/* =========================================================
   WALBRYDGE CLIENT ENGAGEMENT PAGE
   Scoped to .wbcl-page
========================================================= */

.wbcl-page {
    --wbcl-primary: #2f63f5;
    --wbcl-primary-2: #5d83ff;
    --wbcl-navy: #071426;
    --wbcl-navy-2: #0d2342;
    --wbcl-text: #101d32;
    --wbcl-soft: #60718b;
    --wbcl-border: rgba(16, 29, 50, 0.09);
    --wbcl-shadow: 0 22px 65px rgba(12, 28, 52, 0.10);
    position: relative;
    overflow: hidden;
    color: var(--wbcl-text);
    background: #ffffff;
}

    .wbcl-page *,
    .wbcl-page *::before,
    .wbcl-page *::after {
        box-sizing: border-box;
    }

    .wbcl-page .container-fluid {
        width: 100%;
        max-width: 1840px;
        margin: 0 auto;
    }

    .wbcl-page p {
        text-align: left;
        text-wrap: pretty;
    }

    /* =========================================================
   SHARED TYPOGRAPHY / BUTTONS
========================================================= */

    .wbcl-page .wbcl-kicker,
    .wbcl-page .wbcl-section-tag,
    .wbcl-page .wbcl-section-heading > span,
    .wbcl-page .wbcl-governance-heading > span,
    .wbcl-page .wbcl-closing-box > div:first-child > span,
    .wbcl-page .wbcl-form-head > span,
    .wbcl-page .wbcl-inquiry-guide > span {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        padding: .58rem .9rem;
        border-radius: 999px;
        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-btn-primary,
    .wbcl-page .wbcl-btn-secondary,
    .wbcl-page .wbcl-submit-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        min-height: 54px;
        padding: .88rem 1.45rem;
        border-radius: 999px;
        font-weight: 800;
        text-decoration: none;
        transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
    }

    .wbcl-page .wbcl-btn-primary,
    .wbcl-page .wbcl-submit-btn {
        border: 0;
        background: linear-gradient(135deg, var(--wbcl-primary), var(--wbcl-primary-2));
        color: #ffffff;
        box-shadow: 0 16px 34px rgba(47, 99, 245, .24);
    }

    .wbcl-page .wbcl-btn-secondary {
        border: 1px solid rgba(255,255,255,.20);
        background: rgba(255,255,255,.055);
        color: #ffffff;
    }

        .wbcl-page .wbcl-btn-primary:hover,
        .wbcl-page .wbcl-submit-btn:hover,
        .wbcl-page .wbcl-btn-secondary:hover {
            transform: translateY(-2px);
            color: #ffffff;
        }

    .wbcl-page .wbcl-btn-primary:hover,
    .wbcl-page .wbcl-submit-btn:hover {
        box-shadow: 0 21px 42px rgba(47, 99, 245, .30);
    }

    .wbcl-page .wbcl-btn-secondary:hover {
        border-color: rgba(255,255,255,.34);
        background: rgba(255,255,255,.10);
    }

    /* =========================================================
   01 · HERO
========================================================= */

    .wbcl-page .wbcl-hero {
        position: relative;
        overflow: hidden;
        padding: clamp(2.6rem, 4vw, 4.5rem) 0 clamp(2.2rem, 3.5vw, 3.8rem);
        background: radial-gradient(circle at 84% 12%, rgba(77, 119, 255, .30), transparent 28%), radial-gradient(circle at 9% 10%, rgba(40, 114, 255, .13), transparent 26%), linear-gradient(126deg, #071426 0%, #09182c 45%, #11336e 100%);
        color: #ffffff;
    }

        .wbcl-page .wbcl-hero::before,
        .wbcl-page .wbcl-hero::after {
            content: "";
            position: absolute;
            pointer-events: none;
            border: 1px solid rgba(91, 135, 255, .22);
            border-radius: 50%;
        }

        .wbcl-page .wbcl-hero::before {
            width: 520px;
            height: 520px;
            top: -280px;
            left: -155px;
        }

        .wbcl-page .wbcl-hero::after {
            width: 460px;
            height: 460px;
            right: -210px;
            bottom: -245px;
        }

    .wbcl-page .wbcl-hero-grid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(520px, .95fr);
        align-items: center;
        gap: clamp(2.3rem, 5vw, 6rem);
    }

    .wbcl-page .wbcl-hero-copy {
        min-width: 0;
    }

    .wbcl-page .wbcl-kicker {
        margin-bottom: 1.2rem;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(255,255,255,.075);
        color: #dbe4ff;
    }

    .wbcl-page .wbcl-hero-copy h1 {
        max-width: 960px;
        margin: 0;
        color: #ffffff;
        font-size: clamp(3rem, 5.2vw, 5.45rem);
        line-height: .99;
        font-weight: 800;
        letter-spacing: -.052em;
        text-wrap: balance;
    }

    .wbcl-page .wbcl-hero-copy > p {
        max-width: 810px;
        margin: 1.35rem 0 0;
        color: rgba(231, 238, 250, .77);
        font-size: clamp(1rem, 1.25vw, 1.13rem);
        line-height: 1.85;
    }

    .wbcl-page .wbcl-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .9rem;
        margin-top: 1.8rem;
    }

    /* Hero command centre */

    .wbcl-page .wbcl-command-panel {
        position: relative;
        min-height: 500px;
        overflow: hidden;
        border: 1px solid rgba(171, 197, 255, .24);
        border-radius: 38px;
        background: radial-gradient(circle at 78% 15%, rgba(86, 129, 255, .34), transparent 31%), linear-gradient(140deg, rgba(255,255,255,.10), rgba(59, 107, 231, .15));
        box-shadow: 0 35px 88px rgba(0, 0, 0, .24);
    }

    .wbcl-page .wbcl-command-glow {
        position: absolute;
        width: 300px;
        height: 300px;
        right: -60px;
        top: -70px;
        border-radius: 50%;
        background: rgba(51, 101, 247, .34);
        filter: blur(50px);
    }

    .wbcl-page .wbcl-command-top {
        position: absolute;
        z-index: 3;
        top: 50%;
        left: 50%;
        width: min(390px, 62%);
        padding: 1.7rem 1.6rem;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 30px;
        background: rgba(4, 14, 29, .90);
        transform: translate(-50%, -50%);
        text-align: center;
        box-shadow: 0 24px 55px rgba(0,0,0,.24);
    }

    .wbcl-page .wbcl-command-chip {
        display: inline-flex;
        margin-bottom: .9rem;
        padding: .5rem .75rem;
        border-radius: 999px;
        background: rgba(51, 101, 247, .22);
        color: #d6e1ff;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-command-top h2 {
        margin: 0;
        color: #ffffff;
        font-size: clamp(1.45rem, 2.1vw, 2.05rem);
        line-height: 1.22;
        font-weight: 800;
        text-wrap: balance;
    }

    .wbcl-page .wbcl-command-top p {
        margin: .8rem 0 0;
        color: rgba(224, 234, 251, .67);
        font-size: .9rem;
        line-height: 1.6;
        text-align: center;
    }

    .wbcl-page .wbcl-command-orbit::before,
    .wbcl-page .wbcl-command-orbit::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        border: 1px solid rgba(156, 185, 255, .16);
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }

    .wbcl-page .wbcl-command-orbit::before {
        width: 74%;
        aspect-ratio: 1;
    }

    .wbcl-page .wbcl-command-orbit::after {
        width: 48%;
        aspect-ratio: 1;
    }

    .wbcl-page .wbcl-command-node {
        position: absolute;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: .65rem;
        min-height: 58px;
        padding: .65rem .9rem;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 18px;
        background: rgba(5, 16, 33, .91);
        color: #ffffff;
        font-size: .82rem;
        font-weight: 800;
        box-shadow: 0 15px 38px rgba(0,0,0,.18);
    }

        .wbcl-page .wbcl-command-node i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 12px;
            background: rgba(59, 105, 235, .28);
            color: #dce6ff;
        }

    .wbcl-page .wbcl-node-top {
        top: 7%;
        left: 50%;
        transform: translateX(-50%);
    }

    .wbcl-page .wbcl-node-left {
        top: 50%;
        left: 3%;
        transform: translateY(-50%);
    }

    .wbcl-page .wbcl-node-right {
        top: 50%;
        right: 3%;
        transform: translateY(-50%);
    }

    .wbcl-page .wbcl-node-bottom {
        bottom: 8%;
        left: 50%;
        transform: translateX(-50%);
    }

    .wbcl-page .wbcl-command-status {
        position: absolute;
        z-index: 4;
        right: 1.1rem;
        bottom: 1rem;
        left: 1.1rem;
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        color: rgba(224, 233, 248, .70);
        font-size: .72rem;
        font-weight: 700;
    }

        .wbcl-page .wbcl-command-status span:first-child {
            display: flex;
            align-items: center;
            gap: .4rem;
        }

        .wbcl-page .wbcl-command-status i {
            color: #31cea0;
            font-size: .52rem;
        }

    /* Hero signals */

    .wbcl-page .wbcl-hero-signals {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
        margin-top: clamp(2rem, 3.5vw, 3.25rem);
    }

        .wbcl-page .wbcl-hero-signals article {
            display: flex;
            align-items: flex-start;
            gap: .95rem;
            min-width: 0;
            padding: 1.25rem;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 24px;
            background: rgba(255,255,255,.065);
        }

        .wbcl-page .wbcl-hero-signals i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
            border-radius: 15px;
            background: rgba(65, 111, 237, .26);
            color: #dce6ff;
            font-size: 1.05rem;
        }

        .wbcl-page .wbcl-hero-signals h3 {
            margin: 0;
            color: #ffffff;
            font-size: 1rem;
            line-height: 1.3;
            font-weight: 800;
        }

        .wbcl-page .wbcl-hero-signals p {
            margin: .45rem 0 0;
            color: rgba(224, 232, 247, .69);
            font-size: .86rem;
            line-height: 1.6;
        }

    /* =========================================================
   02 · TRANSFORMATION MODEL
========================================================= */

    .wbcl-page .wbcl-transformation {
        position: relative;
        padding: clamp(4.5rem, 6vw, 6.6rem) 0;
        background: radial-gradient(circle at top right, rgba(75, 121, 255, .08), transparent 26%), #ffffff;
    }

    .wbcl-page .wbcl-section-heading {
        max-width: 930px;
    }

    .wbcl-page .wbcl-heading-center {
        margin: 0 auto;
        text-align: center;
    }

    .wbcl-page .wbcl-section-heading > span {
        border: 1px solid rgba(47, 99, 245, .16);
        background: #edf3ff;
        color: #3967ee;
    }

    .wbcl-page .wbcl-heading-center > span {
        margin-inline: auto;
    }

    .wbcl-page .wbcl-section-heading h2,
    .wbcl-page .wbcl-domains-intro h2,
    .wbcl-page .wbcl-readiness-copy h2,
    .wbcl-page .wbcl-governance-heading h2,
    .wbcl-page .wbcl-form-head h2,
    .wbcl-page .wbcl-closing-box h2 {
        color: var(--wbcl-text);
        font-size: clamp(2.25rem, 4.25vw, 4.35rem);
        line-height: 1.05;
        font-weight: 800;
        letter-spacing: -.045em;
        text-wrap: balance;
    }

    .wbcl-page .wbcl-section-heading h2 {
        margin: 1rem 0 0;
    }

    .wbcl-page .wbcl-heading-center p {
        margin-inline: auto;
        text-align: center;
    }

    .wbcl-page .wbcl-section-heading p,
    .wbcl-page .wbcl-domains-intro p,
    .wbcl-page .wbcl-readiness-copy p {
        max-width: 820px;
        margin-top: 1rem;
        color: var(--wbcl-soft);
        font-size: 1rem;
        line-height: 1.85;
    }

    .wbcl-page .wbcl-transformation-flow {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 55px minmax(0, 1fr) 55px minmax(0, 1fr);
        align-items: stretch;
        gap: .7rem;
        margin-top: 3rem;
    }

    .wbcl-page .wbcl-stage-card {
        position: relative;
        min-width: 0;
        min-height: 330px;
        padding: 1.7rem;
        border: 1px solid var(--wbcl-border);
        border-radius: 30px;
        background: #ffffff;
        box-shadow: var(--wbcl-shadow);
    }

    .wbcl-page .wbcl-stage-focus {
        background: radial-gradient(circle at top right, rgba(87, 131, 255, .26), transparent 31%), linear-gradient(140deg, #071426, #153b80);
        color: #ffffff;
    }

    .wbcl-page .wbcl-stage-number {
        position: absolute;
        top: 1.2rem;
        right: 1.3rem;
        color: rgba(16, 29, 50, .26);
        font-size: .78rem;
        font-weight: 900;
    }

    .wbcl-page .wbcl-stage-focus .wbcl-stage-number {
        color: rgba(255,255,255,.40);
    }

    .wbcl-page .wbcl-stage-card > i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        margin-bottom: 1.25rem;
        border-radius: 18px;
        background: #eaf0ff;
        color: var(--wbcl-primary);
        font-size: 1.25rem;
    }

    .wbcl-page .wbcl-stage-focus > i {
        background: rgba(69, 116, 244, .28);
        color: #e2eaff;
    }

    .wbcl-page .wbcl-stage-card > span {
        display: block;
        color: #4774f0;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-stage-focus > span {
        color: #cad8ff;
    }

    .wbcl-page .wbcl-stage-card h3 {
        margin: .65rem 0 0;
        color: var(--wbcl-text);
        font-size: clamp(1.25rem, 1.65vw, 1.7rem);
        line-height: 1.28;
        font-weight: 800;
    }

    .wbcl-page .wbcl-stage-focus h3 {
        color: #ffffff;
    }

    .wbcl-page .wbcl-stage-card p {
        margin: .8rem 0 0;
        color: var(--wbcl-soft);
        font-size: .92rem;
        line-height: 1.75;
    }

    .wbcl-page .wbcl-stage-focus p {
        color: rgba(227, 235, 248, .72);
    }

    .wbcl-page .wbcl-flow-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--wbcl-primary);
        font-size: 1.5rem;
    }

    /* =========================================================
   03 · INITIATIVE DOMAINS
========================================================= */

    .wbcl-page .wbcl-domains {
        position: relative;
        padding: clamp(4.5rem, 6vw, 6.6rem) 0;
        background: radial-gradient(circle at 8% 12%, rgba(62, 111, 245, .09), transparent 28%), linear-gradient(180deg, #f4f8fd 0%, #ffffff 100%);
    }

    .wbcl-page .wbcl-domains-layout {
        display: grid;
        grid-template-columns: minmax(360px, .72fr) minmax(0, 1.28fr);
        align-items: start;
        gap: clamp(2.2rem, 5vw, 5.7rem);
    }

    .wbcl-page .wbcl-section-tag {
        border: 1px solid rgba(47, 99, 245, .16);
        background: #edf3ff;
        color: #3967ee;
    }

    .wbcl-page .wbcl-domains-intro h2,
    .wbcl-page .wbcl-readiness-copy h2 {
        margin: 1rem 0 0;
    }

    .wbcl-page .wbcl-text-link {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        margin-top: 1rem;
        color: #315fef;
        font-weight: 800;
        text-decoration: none;
    }

    .wbcl-page .wbcl-domain-mosaic {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .wbcl-page .wbcl-domain-card {
        min-width: 0;
        min-height: 210px;
        padding: 1.45rem;
        border: 1px solid var(--wbcl-border);
        border-radius: 28px;
        background: #ffffff;
        box-shadow: 0 16px 40px rgba(12, 28, 52, .07);
    }

    .wbcl-page .wbcl-domain-large {
        grid-column: 1 / -1;
        min-height: 310px;
        background: radial-gradient(circle at 85% 15%, rgba(71, 119, 255, .17), transparent 28%), #ffffff;
    }

    .wbcl-page .wbcl-domain-dark {
        border-color: rgba(255,255,255,.08);
        background: radial-gradient(circle at top right, rgba(69, 113, 242, .28), transparent 34%), #08172b;
        color: #ffffff;
    }

    .wbcl-page .wbcl-domain-card > i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 16px;
        background: #e9f0ff;
        color: var(--wbcl-primary);
        font-size: 1.12rem;
    }

    .wbcl-page .wbcl-domain-dark > i {
        background: rgba(73, 119, 245, .28);
        color: #dce7ff;
    }

    .wbcl-page .wbcl-domain-card > span {
        display: block;
        margin-top: 1rem;
        color: #3d6df2;
        font-size: .72rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-domain-dark > span {
        color: #bed0ff;
    }

    .wbcl-page .wbcl-domain-card h3 {
        margin: .6rem 0 0;
        color: var(--wbcl-text);
        font-size: clamp(1.12rem, 1.55vw, 1.52rem);
        line-height: 1.35;
        font-weight: 800;
    }

    .wbcl-page .wbcl-domain-large h3 {
        max-width: 850px;
        font-size: clamp(1.45rem, 2.4vw, 2.45rem);
        line-height: 1.2;
    }

    .wbcl-page .wbcl-domain-dark h3 {
        color: #ffffff;
    }

    .wbcl-page .wbcl-domain-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .55rem;
        margin-top: 1.25rem;
    }

        .wbcl-page .wbcl-domain-tags small {
            padding: .48rem .68rem;
            border: 1px solid rgba(47, 99, 245, .14);
            border-radius: 999px;
            background: #eff4ff;
            color: #3e63bc;
            font-size: .7rem;
            font-weight: 800;
        }

    /* =========================================================
   04 · ENGAGEMENT PATHWAYS
========================================================= */

    .wbcl-page .wbcl-pathways {
        padding: clamp(4.5rem, 6vw, 6.6rem) 0;
        background: #ffffff;
    }

    .wbcl-page .wbcl-pathway-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 2.7rem;
    }

        .wbcl-page .wbcl-pathway-grid article {
            position: relative;
            min-width: 0;
            padding: 1.4rem;
            border: 1px solid var(--wbcl-border);
            border-radius: 26px;
            background: linear-gradient(180deg, #ffffff, #f7f9fd);
        }

            .wbcl-page .wbcl-pathway-grid article::before {
                content: "";
                position: absolute;
                top: 0;
                right: 1.4rem;
                left: 1.4rem;
                height: 3px;
                border-radius: 999px;
                background: linear-gradient(90deg, transparent, #4d77f7, transparent);
                opacity: .55;
            }

    .wbcl-page .wbcl-pathway-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 16px;
        background: #eaf0ff;
        color: var(--wbcl-primary);
    }

    .wbcl-page .wbcl-pathway-grid span {
        display: block;
        margin-top: 1rem;
        color: #4774f0;
        font-size: .7rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-pathway-grid h3 {
        margin: .55rem 0 0;
        color: var(--wbcl-text);
        font-size: 1.08rem;
        line-height: 1.35;
        font-weight: 800;
    }

    .wbcl-page .wbcl-pathway-grid p {
        margin: .75rem 0 0;
        color: var(--wbcl-soft);
        font-size: .84rem;
        line-height: 1.68;
    }

    /* =========================================================
   05 · CLIENT READINESS
========================================================= */

    .wbcl-page .wbcl-readiness {
        padding: clamp(4.5rem, 6vw, 6.6rem) 0;
        background: radial-gradient(circle at 95% 5%, rgba(67, 115, 247, .10), transparent 28%), linear-gradient(180deg, #f3f7fc 0%, #ffffff 100%);
    }

    .wbcl-page .wbcl-readiness-grid {
        display: grid;
        grid-template-columns: minmax(340px, .75fr) minmax(0, 1.25fr);
        align-items: start;
        gap: clamp(2.3rem, 5vw, 5.8rem);
    }

    .wbcl-page .wbcl-readiness-list {
        display: grid;
        gap: .9rem;
    }

        .wbcl-page .wbcl-readiness-list article {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1.15rem;
            border: 1px solid var(--wbcl-border);
            border-radius: 22px;
            background: rgba(255,255,255,.90);
        }

        .wbcl-page .wbcl-readiness-list i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            flex: 0 0 48px;
            border-radius: 15px;
            background: #e9f0ff;
            color: var(--wbcl-primary);
        }

        .wbcl-page .wbcl-readiness-list h3 {
            margin: 0;
            color: var(--wbcl-text);
            font-size: 1rem;
            font-weight: 800;
        }

        .wbcl-page .wbcl-readiness-list p {
            margin: .38rem 0 0;
            color: var(--wbcl-soft);
            font-size: .84rem;
            line-height: 1.65;
        }

    .wbcl-page .wbcl-readiness-highlight {
        border-color: rgba(47, 99, 245, .18) !important;
        background: linear-gradient(135deg, #eaf1ff, #f7f9ff) !important;
    }

    /* =========================================================
   06 · GOVERNANCE
========================================================= */

    .wbcl-page .wbcl-governance {
        position: relative;
        overflow: hidden;
        padding: clamp(4.5rem, 6vw, 6.6rem) 0;
        background: radial-gradient(circle at 88% 8%, rgba(72, 117, 247, .24), transparent 28%), linear-gradient(135deg, #071426, #0c1d35 55%, #14386f);
        color: #ffffff;
    }

    .wbcl-page .wbcl-governance-heading {
        max-width: 1050px;
        margin: 0 auto;
        text-align: center;
    }

        .wbcl-page .wbcl-governance-heading > span {
            margin-inline: auto;
            border: 1px solid rgba(255,255,255,.15);
            background: rgba(255,255,255,.07);
            color: #d8e3ff;
        }

        .wbcl-page .wbcl-governance-heading h2 {
            margin: 1rem 0 0;
            color: #ffffff;
            text-align: center;
        }

    .wbcl-page .wbcl-governance-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 2.8rem;
    }

        .wbcl-page .wbcl-governance-grid article {
            min-width: 0;
            padding: 1.35rem;
            border: 1px solid rgba(255,255,255,.11);
            border-radius: 25px;
            background: rgba(255,255,255,.055);
        }

        .wbcl-page .wbcl-governance-grid i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 15px;
            background: rgba(73, 119, 245, .28);
            color: #dce6ff;
        }

        .wbcl-page .wbcl-governance-grid h3 {
            margin: 1rem 0 0;
            color: #ffffff;
            font-size: 1.05rem;
            line-height: 1.3;
            font-weight: 800;
        }

        .wbcl-page .wbcl-governance-grid p {
            margin: .55rem 0 0;
            color: rgba(225, 234, 248, .68);
            font-size: .84rem;
            line-height: 1.65;
        }

    /* =========================================================
   07 · CLIENT INQUIRY FORM
========================================================= */

    .wbcl-page .wbcl-inquiry {
        position: relative;
        padding: clamp(4.5rem, 6vw, 6.6rem) 0;
        background: radial-gradient(circle at top right, rgba(75, 121, 255, .09), transparent 30%), linear-gradient(180deg, #f4f8fd 0%, #ffffff 100%);
    }

    .wbcl-page .wbcl-inquiry-shell {
        display: grid;
        grid-template-columns: minmax(300px, .34fr) minmax(0, 1fr);
        align-items: stretch;
        gap: 1rem;
        max-width: 1560px;
        margin: 0 auto;
    }

    .wbcl-page .wbcl-inquiry-guide {
        position: relative;
        overflow: hidden;
        padding: clamp(1.5rem, 2.4vw, 2.2rem);
        border-radius: 32px;
        background: radial-gradient(circle at 90% 5%, rgba(74, 118, 246, .27), transparent 29%), linear-gradient(145deg, #071426, #123366);
        color: #ffffff;
        box-shadow: 0 26px 70px rgba(7, 20, 38, .18);
    }

        .wbcl-page .wbcl-inquiry-guide::after {
            content: "";
            position: absolute;
            width: 330px;
            height: 330px;
            right: -190px;
            bottom: -170px;
            border: 1px solid rgba(111, 151, 255, .22);
            border-radius: 50%;
        }

        .wbcl-page .wbcl-inquiry-guide > span {
            border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.065);
            color: #dbe4ff;
        }

        .wbcl-page .wbcl-inquiry-guide h2 {
            margin: 1rem 0 0;
            color: #ffffff;
            font-size: clamp(2rem, 3.1vw, 3.3rem);
            line-height: 1.06;
            font-weight: 800;
            letter-spacing: -.04em;
            text-wrap: balance;
        }

        .wbcl-page .wbcl-inquiry-guide > p {
            margin: 1rem 0 0;
            color: rgba(228, 235, 248, .72);
            font-size: .94rem;
            line-height: 1.78;
        }

    .wbcl-page .wbcl-guide-points {
        display: grid;
        gap: .8rem;
        margin-top: 1.5rem;
    }

        .wbcl-page .wbcl-guide-points article {
            display: flex;
            align-items: flex-start;
            gap: .8rem;
            padding: .9rem;
            border: 1px solid rgba(255,255,255,.10);
            border-radius: 18px;
            background: rgba(255,255,255,.055);
        }

        .wbcl-page .wbcl-guide-points i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            flex: 0 0 42px;
            border-radius: 13px;
            background: rgba(73, 119, 245, .28);
            color: #dce6ff;
        }

        .wbcl-page .wbcl-guide-points strong,
        .wbcl-page .wbcl-guide-points small {
            display: block;
        }

        .wbcl-page .wbcl-guide-points strong {
            color: #ffffff;
            font-size: .88rem;
            font-weight: 800;
        }

        .wbcl-page .wbcl-guide-points small {
            margin-top: .22rem;
            color: rgba(228, 236, 249, .66);
            font-size: .74rem;
            line-height: 1.5;
        }

    .wbcl-page .wbcl-guide-flow {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .35rem;
        margin-top: 1rem;
        padding: .85rem;
        border-radius: 17px;
        background: rgba(3, 14, 29, .52);
        color: #d9e3f7;
        font-size: .68rem;
        font-weight: 800;
    }

        .wbcl-page .wbcl-guide-flow i {
            color: #77a0ff;
            font-size: .72rem;
        }

    .wbcl-page .wbcl-form-card {
        min-width: 0;
        padding: clamp(1.5rem, 2.6vw, 2.5rem);
        border: 1px solid rgba(16, 29, 50, .08);
        border-radius: 34px;
        background: radial-gradient(circle at top right, rgba(77, 121, 255, .07), transparent 27%), #ffffff;
        box-shadow: 0 24px 70px rgba(12, 28, 52, .09);
    }

    .wbcl-page .wbcl-form-head {
        padding-bottom: 1.35rem;
        border-bottom: 1px solid rgba(16, 29, 50, .08);
    }

        .wbcl-page .wbcl-form-head > span {
            border: 1px solid rgba(47, 99, 245, .16);
            background: #edf3ff;
            color: #3967ee;
        }

        .wbcl-page .wbcl-form-head h2 {
            margin: .85rem 0 0;
            font-size: clamp(2.15rem, 3.6vw, 3.55rem);
        }

        .wbcl-page .wbcl-form-head p {
            margin: .65rem 0 0;
            color: var(--wbcl-soft);
            font-size: .94rem;
            line-height: 1.7;
        }

    .wbcl-page .wbcl-validation-summary:empty {
        display: none;
    }

    .wbcl-page .wbcl-validation-summary {
        margin: 1.2rem 0 0;
        padding: .9rem 1rem;
        border: 1px solid rgba(220, 53, 69, .18);
        border-radius: 16px;
        background: rgba(220, 53, 69, .055);
    }

    .wbcl-page #clientInquiryForm {
        margin-top: 1.4rem;
    }

    .wbcl-page .wbcl-field {
        min-width: 0;
    }

    .wbcl-page .wbcl-label {
        margin-bottom: .5rem;
        color: #203653;
        font-size: .78rem;
        font-weight: 800;
    }

    .wbcl-page .wbcl-input {
        width: 100%;
        min-height: 55px;
        border: 1px solid rgba(22, 35, 56, .11);
        border-radius: 16px;
        /*
     * Use background-color instead of the background shorthand.
     * The shorthand resets Bootstrap's form-select background-repeat
     * property and causes validation icons to tile across the field.
     */
        background-color: #f9fbfe;
        color: #15243d;
        padding: .82rem .95rem;
        box-shadow: none !important;
        font-size: .92rem;
    }

        .wbcl-page .wbcl-input:focus {
            border-color: rgba(47, 99, 245, .42);
            background-color: #ffffff;
            box-shadow: 0 0 0 .22rem rgba(47, 99, 245, .08) !important;
        }

    .wbcl-page .wbcl-textarea {
        min-height: 190px;
        resize: vertical;
        line-height: 1.65;
    }

    .wbcl-page .wbcl-field-help {
        display: block;
        margin-top: .45rem;
        color: #728198;
        font-size: .72rem;
        line-height: 1.5;
    }

    .wbcl-page .text-danger {
        display: block;
        margin-top: .42rem;
        font-size: .74rem;
        line-height: 1.45;
    }

    .wbcl-page .input-validation-error,
    .wbcl-page .is-invalid {
        border-color: #dc3545 !important;
        background: #fffafb;
    }

    .wbcl-page .wbcl-phone-control {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .wbcl-page .wbcl-phone-prefix {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        min-height: 55px;
        padding: .8rem .85rem;
        border: 1px solid rgba(22, 35, 56, .11);
        border-right: 0;
        border-radius: 16px 0 0 16px;
        background: #e8efff;
        color: #1d4fc8;
        font-weight: 900;
    }

    .wbcl-page .wbcl-phone-input {
        border-radius: 0 16px 16px 0;
    }

    .wbcl-page .wbcl-submit-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid rgba(47, 99, 245, .13);
        border-radius: 20px;
        background: linear-gradient(135deg, #f3f7ff, #eaf1ff);
    }

        .wbcl-page .wbcl-submit-bar p {
            max-width: 700px;
            margin: 0;
            color: #667790;
            font-size: .77rem;
            line-height: 1.55;
        }

    .wbcl-page .wbcl-submit-btn {
        flex: 0 0 auto;
    }

    /* =========================================================
   08 · CLOSING
========================================================= */

    .wbcl-page .wbcl-closing {
        padding: clamp(4rem, 5.5vw, 5.8rem) 0;
        background: #ffffff;
    }

    .wbcl-page .wbcl-closing-box {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 2rem;
        padding: clamp(2rem, 4vw, 4rem);
        border-radius: 38px;
        background: radial-gradient(circle at 88% 12%, rgba(86, 130, 255, .26), transparent 29%), linear-gradient(135deg, #071426, #102b55 58%, #2857dc);
        color: #ffffff;
        box-shadow: 0 28px 80px rgba(7, 20, 38, .18);
    }

        .wbcl-page .wbcl-closing-box > div:first-child > span {
            border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.07);
            color: #dbe4ff;
        }

        .wbcl-page .wbcl-closing-box h2 {
            max-width: 970px;
            margin: 1rem 0 0;
            color: #ffffff;
        }

        .wbcl-page .wbcl-closing-box p {
            max-width: 830px;
            margin: 1rem 0 0;
            color: rgba(228, 236, 249, .73);
            line-height: 1.8;
        }

    .wbcl-page .wbcl-closing-actions {
        display: flex;
        flex-direction: column;
        min-width: 260px;
        gap: .8rem;
    }

/* =========================================================
   SUCCESS POPUP
========================================================= */

body.wbcl-modal-open {
    overflow: hidden;
}

.wbcl-page .wbcl-success-overlay {
    position: fixed;
    z-index: 99999;
    inset: 0;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 1.2rem;
    background: rgba(3, 10, 20, .80);
    backdrop-filter: blur(12px);
}

.wbcl-page .wbcl-success-modal {
    width: min(760px, 100%);
    padding: clamp(2rem, 4vw, 3.6rem);
    border: 1px solid rgba(181, 204, 255, .24);
    border-radius: 36px;
    background: radial-gradient(circle at 88% 10%, rgba(80, 125, 255, .30), transparent 31%), linear-gradient(135deg, #071426, #12346d);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 40px 110px rgba(0,0,0,.38);
}

.wbcl-page .wbcl-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: #2cc79c;
    color: #ffffff;
    font-size: 2rem;
    box-shadow: 0 16px 36px rgba(44, 199, 156, .26);
}

.wbcl-page .wbcl-success-modal > span {
    display: inline-flex;
    padding: .52rem .8rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: #dbe5ff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wbcl-page .wbcl-success-modal h2 {
    max-width: 680px;
    margin: 1.2rem auto 0;
    color: #ffffff;
    font-size: clamp(2.1rem, 4.4vw, 4.2rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.wbcl-page .wbcl-success-modal > p {
    max-width: 650px;
    margin: 1.1rem auto 0;
    color: rgba(230, 237, 249, .74);
    line-height: 1.75;
    text-align: center;
}

.wbcl-page .wbcl-success-status {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1.5rem;
}

    .wbcl-page .wbcl-success-status article {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .55rem;
        min-height: 66px;
        padding: .8rem;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 17px;
        background: rgba(3, 13, 28, .52);
        font-size: .78rem;
    }

    .wbcl-page .wbcl-success-status i {
        color: #42d1aa;
    }

.wbcl-page .wbcl-success-next {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: rgba(255,255,255,.055);
}

    .wbcl-page .wbcl-success-next strong {
        color: #dce5fa;
        font-size: .72rem;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-success-next p {
        max-width: 620px;
        margin: .45rem auto 0;
        color: rgba(229, 236, 249, .70);
        font-size: .84rem;
        line-height: 1.6;
        text-align: center;
    }

.wbcl-page .wbcl-success-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.1rem;
}

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

@media (max-width: 1399.98px) {
    .wbcl-page .wbcl-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(470px, .9fr);
        gap: 2.2rem;
    }

    .wbcl-page .wbcl-command-panel {
        min-height: 455px;
    }

    .wbcl-page .wbcl-pathway-grid,
    .wbcl-page .wbcl-governance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .wbcl-page .wbcl-hero-grid,
    .wbcl-page .wbcl-domains-layout,
    .wbcl-page .wbcl-readiness-grid {
        grid-template-columns: 1fr;
    }

    .wbcl-page .wbcl-command-panel {
        width: min(850px, 100%);
        margin: 0 auto;
    }

    .wbcl-page .wbcl-hero-signals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wbcl-page .wbcl-transformation-flow {
        grid-template-columns: repeat(3, minmax(280px, 1fr));
        overflow-x: auto;
        padding-bottom: .8rem;
    }

    .wbcl-page .wbcl-flow-arrow {
        display: none;
    }

    .wbcl-page .wbcl-inquiry-shell {
        grid-template-columns: minmax(280px, .4fr) minmax(0, 1fr);
    }

    .wbcl-page .wbcl-closing-box {
        grid-template-columns: 1fr;
    }

    .wbcl-page .wbcl-closing-actions {
        flex-direction: row;
        min-width: 0;
    }
}

@media (max-width: 991.98px) {
    .wbcl-page .wbcl-inquiry-shell {
        grid-template-columns: 1fr;
    }

    .wbcl-page .wbcl-inquiry-guide {
        max-width: none;
    }

    .wbcl-page .wbcl-guide-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wbcl-page .wbcl-pathway-grid,
    .wbcl-page .wbcl-governance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .wbcl-page .wbcl-hero {
        padding-top: 2.2rem;
    }

    .wbcl-page .wbcl-hero-copy h1 {
        font-size: clamp(2.55rem, 11.5vw, 4rem);
    }

    .wbcl-page .wbcl-actions,
    .wbcl-page .wbcl-closing-actions,
    .wbcl-page .wbcl-success-actions {
        flex-direction: column;
    }

        .wbcl-page .wbcl-actions .btn,
        .wbcl-page .wbcl-closing-actions .btn,
        .wbcl-page .wbcl-success-actions .btn {
            width: 100%;
        }

    .wbcl-page .wbcl-command-panel {
        min-height: auto;
        padding: 1rem;
    }

    .wbcl-page .wbcl-command-top {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        transform: none;
    }

    .wbcl-page .wbcl-command-orbit {
        display: grid;
        grid-template-columns: 1fr;
        gap: .65rem;
        margin-top: .75rem;
    }

        .wbcl-page .wbcl-command-orbit::before,
        .wbcl-page .wbcl-command-orbit::after {
            display: none;
        }

    .wbcl-page .wbcl-command-node {
        position: static;
        width: 100%;
        transform: none;
    }

    .wbcl-page .wbcl-command-status {
        position: static;
        flex-direction: column;
        margin-top: .75rem;
        padding: .4rem;
    }

    .wbcl-page .wbcl-hero-signals,
    .wbcl-page .wbcl-domain-mosaic,
    .wbcl-page .wbcl-pathway-grid,
    .wbcl-page .wbcl-governance-grid,
    .wbcl-page .wbcl-guide-points,
    .wbcl-page .wbcl-success-status {
        grid-template-columns: 1fr;
    }

    .wbcl-page .wbcl-domain-large {
        grid-column: auto;
    }

    .wbcl-page .wbcl-transformation-flow {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .wbcl-page .wbcl-stage-card {
        min-height: auto;
    }

    .wbcl-page .wbcl-guide-flow {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }

        .wbcl-page .wbcl-guide-flow i {
            transform: rotate(90deg);
        }

    .wbcl-page .wbcl-submit-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .wbcl-page .wbcl-submit-btn {
        width: 100%;
    }

    .wbcl-page .wbcl-success-modal {
        padding: 1.6rem 1.1rem;
        border-radius: 28px;
    }
}

@media (max-width: 419.98px) {
    .wbcl-page .wbcl-phone-prefix {
        min-width: 56px;
    }

    .wbcl-page .wbcl-form-card,
    .wbcl-page .wbcl-inquiry-guide {
        padding: 1.15rem;
        border-radius: 25px;
    }

    .wbcl-page .wbcl-hero-signals article,
    .wbcl-page .wbcl-readiness-list article {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wbcl-page *,
    .wbcl-page *::before,
    .wbcl-page *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   ADVANCED CLIENT FORM CONTROLS
========================================================= */

.wbcl-page .wbcl-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.wbcl-page .wbcl-submit-btn.wbcl-is-submitting {
    cursor: wait;
    opacity: .78;
    transform: none;
}

.wbcl-page .wbcl-success-reference {
    width: min(430px, 100%);
    margin: 1.15rem auto 0;
    padding: .9rem 1rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(2, 13, 29, .42);
}

    .wbcl-page .wbcl-success-reference small,
    .wbcl-page .wbcl-success-reference strong {
        display: block;
        text-align: center;
    }

    .wbcl-page .wbcl-success-reference small {
        color: rgba(222, 231, 248, .64);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-success-reference strong {
        margin-top: .3rem;
        color: #ffffff;
        font-size: clamp(.96rem, 2.5vw, 1.12rem);
        letter-spacing: .035em;
        overflow-wrap: anywhere;
    }

/* =========================================================
   CLIENT QUALITY VALIDATION
========================================================= */

.wbcl-page .wbcl-input.is-invalid {
    border-color: #e5484d !important;
    background-color: rgba(229, 72, 77, .035);
    box-shadow: 0 0 0 .18rem rgba(229, 72, 77, .08) !important;
}

.wbcl-page .wbcl-input.is-valid {
    border-color: rgba(28, 169, 101, .72) !important;
    background-color: rgba(28, 169, 101, .025);
    box-shadow: 0 0 0 .16rem rgba(28, 169, 101, .055) !important;
}

.wbcl-page .field-validation-error,
.wbcl-page [data-valmsg-for].field-validation-error {
    display: block;
    margin-top: .42rem;
    color: #d9363e !important;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.45;
}

.wbcl-page .field-validation-valid {
    display: none;
}

.wbcl-page .wbcl-validation-summary.validation-summary-errors {
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(217, 54, 62, .2);
    border-radius: 15px;
    background: rgba(217, 54, 62, .055);
}

    .wbcl-page .wbcl-validation-summary.validation-summary-errors ul {
        margin: 0;
        padding-left: 1.1rem;
    }

.wbcl-page .wbcl-validation-summary.validation-summary-valid {
    display: none;
}

/* =========================================================
   BOOTSTRAP SELECT VALIDATION ICON SAFETY
   Prevents validation icons from repeating across select
   controls while retaining the standard dropdown arrow.
========================================================= */

.wbcl-page .form-select.wbcl-input,
.wbcl-page .form-select.wbcl-input.is-valid,
.wbcl-page .form-select.wbcl-input.is-invalid {
    background-repeat: no-repeat !important;
}

    .wbcl-page .form-select.wbcl-input.is-valid,
    .wbcl-page .form-select.wbcl-input.is-invalid {
        background-image: var(--bs-form-select-bg-img) !important;
        background-position: right .9rem center !important;
        background-size: 16px 12px !important;
        padding-right: 2.8rem !important;
    }


/* =========================================================
   CLIENT HERO — INDUSTRIES-STYLE ARCHITECTURE FINAL
   =========================================================
   Scope:
   - First-section right-side visual only
   - Exact rectangular layered architecture language used on
     the Industries page
   - No large circular/orbit structural borders
   - All Client content, inquiry form, Razor logic, routes,
     validation, scripts, and lower sections remain unchanged
========================================================= */

/* Keep the two hero columns balanced like the premium pages */
.wbcl-page .wbcl-hero-grid {
    width: 100%;
    align-items: center;
}

.wbcl-page .wbcl-industry-style-system {
    position: relative;
    isolation: isolate;
    width: min(100%, 800px);
    min-height: clamp(540px, 34vw, 650px);
    aspect-ratio: 1.34 / 1;
    overflow: hidden;
    border: 1px solid rgba(186, 207, 255, 0.28);
    border-radius: 38px;
    background: radial-gradient(circle at 88% 8%, rgba(71, 101, 255, 0.62), transparent 35%), radial-gradient(circle at 4% 100%, rgba(35, 191, 208, 0.23), transparent 36%), linear-gradient( 145deg, rgba(255, 255, 255, 0.12), rgba(18, 46, 92, 0.28) 50%, rgba(31, 74, 167, 0.42) );
    box-shadow: 0 38px 100px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

    /* Fine grid only — no orbit or circular border */
    .wbcl-page .wbcl-industry-style-system::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -3;
        background: linear-gradient( rgba(143, 171, 255, 0.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(143, 171, 255, 0.04) 1px, transparent 1px );
        background-size: 72px 72px;
        mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.72), transparent 94% );
        -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.72), transparent 94% );
    }

    .wbcl-page .wbcl-industry-style-system::after {
        content: "";
        position: absolute;
        inset: 1px;
        z-index: -2;
        border-radius: inherit;
        background: linear-gradient( 115deg, transparent 8%, rgba(255, 255, 255, 0.035) 28%, transparent 48% ), radial-gradient( circle at 74% 38%, rgba(72, 116, 255, 0.16), transparent 34% );
        pointer-events: none;
    }

/* Soft background lighting */

.wbcl-page .wbcl-system-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(24px);
}

.wbcl-page .wbcl-system-glow-one {
    top: -12%;
    right: -10%;
    width: 48%;
    aspect-ratio: 1;
    background: radial-gradient( circle, rgba(61, 92, 255, 0.45), transparent 70% );
}

.wbcl-page .wbcl-system-glow-two {
    bottom: -19%;
    left: -14%;
    width: 48%;
    aspect-ratio: 1;
    background: radial-gradient( circle, rgba(51, 196, 216, 0.22), transparent 70% );
}

/* =========================================================
   RECTANGULAR ARCHITECTURE LAYERS
   No structural circles are used.
========================================================= */

.wbcl-page .wbcl-system-architecture {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.wbcl-page .wbcl-architecture-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(143, 171, 255, 0.17);
    border-radius: 34px;
    transform: translate(-50%, -50%);
}

.wbcl-page .wbcl-architecture-frame-one {
    width: 88%;
    height: 78%;
    transform: translate(-50%, -50%) rotate(-3deg);
}

.wbcl-page .wbcl-architecture-frame-two {
    width: 74%;
    height: 62%;
    transform: translate(-50%, -50%) rotate(3deg);
}

.wbcl-page .wbcl-architecture-frame-three {
    width: 58%;
    height: 47%;
    border-color: rgba(143, 171, 255, 0.22);
    transform: translate(-50%, -50%) rotate(-1deg);
}

/* Illuminated cross-axis */

.wbcl-page .wbcl-system-axis {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(73, 142, 255, 0.35), 0 0 24px rgba(73, 142, 255, 0.16);
    transform: translate(-50%, -50%);
}

.wbcl-page .wbcl-system-axis-horizontal {
    width: 92%;
    height: 3px;
    background: linear-gradient( 90deg, transparent 0%, rgba(91, 143, 255, 0.48) 7%, rgba(76, 145, 255, 0.95) 25%, rgba(76, 145, 255, 0.95) 75%, rgba(91, 143, 255, 0.48) 93%, transparent 100% );
}

.wbcl-page .wbcl-system-axis-vertical {
    width: 3px;
    height: 88%;
    background: linear-gradient( 180deg, transparent 0%, rgba(91, 143, 255, 0.48) 7%, rgba(76, 145, 255, 0.95) 25%, rgba(76, 145, 255, 0.95) 75%, rgba(91, 143, 255, 0.48) 93%, transparent 100% );
}

/* Connector junctions */

.wbcl-page .wbcl-system-pulse {
    position: absolute;
    z-index: 3;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(208, 225, 255, 0.92);
    border-radius: 50%;
    background: #49a4ff;
    box-shadow: 0 0 0 5px rgba(73, 164, 255, 0.10), 0 0 22px rgba(73, 164, 255, 0.95);
}

.wbcl-page .wbcl-system-pulse-top {
    top: 17%;
    left: 50%;
    transform: translateX(-50%);
}

.wbcl-page .wbcl-system-pulse-right {
    top: 50%;
    right: 4.4%;
    transform: translateY(-50%);
}

.wbcl-page .wbcl-system-pulse-bottom {
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
}

.wbcl-page .wbcl-system-pulse-left {
    top: 50%;
    left: 4.4%;
    transform: translateY(-50%);
}

/* Activity status panel — same placement as Industries */

.wbcl-page .wbcl-system-activity {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 10;
    display: grid;
    gap: 0.34rem;
    min-width: 250px;
    padding: 0.92rem 1rem;
    border: 1px solid rgba(202, 217, 255, 0.18);
    border-radius: 17px;
    color: #ffffff;
    background: rgba(4, 15, 31, 0.86);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

    .wbcl-page .wbcl-system-activity small {
        color: rgba(209, 222, 250, 0.68);
        font-size: 0.66rem;
        font-weight: 850;
        letter-spacing: 0.075em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-system-activity strong {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        color: #ffffff;
        font-size: 0.79rem;
        font-weight: 820;
    }

/* Central content card — protected from side-node overlap */

.wbcl-page .wbcl-system-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 7;
    display: flex;
    width: min(52%, 400px);
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.8rem;
    border: 1px solid rgba(180, 204, 255, 0.17);
    border-radius: 29px;
    color: #ffffff;
    text-align: center;
    background: radial-gradient( circle at 50% 0%, rgba(72, 107, 255, 0.10), transparent 48% ), rgba(3, 13, 28, 0.94);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.36), 0 0 0 12px rgba(130, 164, 255, 0.035), 0 0 0 24px rgba(130, 164, 255, 0.022);
    transform: translate(-50%, -50%);
}

    .wbcl-page .wbcl-system-core > span {
        display: inline-flex;
        margin-bottom: 1rem;
        padding: 0.48rem 0.92rem;
        border: 1px solid rgba(143, 171, 255, 0.21);
        border-radius: 999px;
        color: #dfe8ff;
        background: linear-gradient( 135deg, rgba(74, 103, 210, 0.55), rgba(40, 91, 229, 0.78) );
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0.075em;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-system-core h2 {
        max-width: 340px;
        margin: 0;
        color: #ffffff !important;
        font-size: clamp(1.35rem, 1.65vw, 1.88rem);
        font-weight: 850;
        letter-spacing: -0.035em;
        line-height: 1.20;
        text-wrap: balance;
    }

    .wbcl-page .wbcl-system-core p {
        max-width: 325px;
        margin: 0.9rem 0 0;
        color: rgba(231, 239, 255, 0.72);
        font-size: 0.88rem;
        line-height: 1.62;
        text-align: center;
    }

/* Floating capability nodes */

.wbcl-page .wbcl-system-node {
    position: absolute;
    z-index: 9;
    display: flex;
    align-items: center;
    min-width: 175px;
    gap: 0.72rem;
    padding: 0.72rem 0.94rem;
    border: 1px solid rgba(191, 210, 255, 0.16);
    border-radius: 18px;
    color: #ffffff;
    background: rgba(3, 13, 28, 0.92);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 0.84rem;
    font-weight: 820;
}

    .wbcl-page .wbcl-system-node i {
        display: inline-grid;
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        place-items: center;
        border: 1px solid rgba(158, 190, 255, 0.24);
        border-radius: 13px;
        color: #e4ecff;
        background: radial-gradient( circle at 28% 18%, rgba(255, 255, 255, 0.22), transparent 34% ), linear-gradient( 145deg, rgba(58, 101, 222, 0.87), rgba(20, 50, 109, 0.98) );
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.19), 0 10px 22px rgba(0, 0, 0, 0.20);
    }

.wbcl-page .wbcl-system-node-priority {
    top: 1.5rem;
    left: 66%;
    min-width: 210px;
    transform: translateX(-50%);
}

.wbcl-page .wbcl-system-node-product {
    top: 50%;
    left: 1.35rem;
    min-width: 205px;
    transform: translateY(-50%);
}

.wbcl-page .wbcl-system-node-delivery {
    top: 50%;
    right: 1.35rem;
    min-width: 225px;
    transform: translateY(-50%);
}

.wbcl-page .wbcl-system-node-evolution {
    bottom: 1.55rem;
    left: 50%;
    min-width: 245px;
    transform: translateX(-50%);
}

/* Bottom status content preserved */

.wbcl-page .wbcl-system-status {
    position: absolute;
    bottom: 1.15rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(233, 240, 255, 0.77);
    font-size: 0.68rem;
    font-weight: 770;
}

.wbcl-page .wbcl-system-status-left {
    left: 1.35rem;
}

.wbcl-page .wbcl-system-status-right {
    right: 1.35rem;
}

    .wbcl-page .wbcl-system-status-right i {
        color: #b6caff;
    }

.wbcl-page .wbcl-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #42d995;
    box-shadow: 0 0 0 5px rgba(66, 217, 149, 0.10), 0 0 18px rgba(66, 217, 149, 0.58);
}

/* =========================================================
   LARGE DESKTOP — 1600PX+
========================================================= */

@media (min-width: 1600px) {
    .wbcl-page .wbcl-hero-grid {
        grid-template-columns: minmax(0, 1.03fr) minmax(720px, 0.97fr);
        gap: clamp(3rem, 3.7vw, 4.8rem);
    }

    .wbcl-page .wbcl-industry-style-system {
        width: min(100%, 840px);
        min-height: 610px;
    }

    .wbcl-page .wbcl-system-core {
        width: min(51%, 425px);
        min-height: 265px;
    }
}

/* =========================================================
   16-INCH LAPTOP — 1400PX TO 1599PX
========================================================= */

@media (min-width: 1400px) and (max-width: 1599.98px) {
    .wbcl-page .wbcl-hero-grid {
        grid-template-columns: minmax(0, 1.03fr) minmax(630px, 0.97fr);
        gap: clamp(2.15rem, 2.9vw, 3.2rem);
    }

    .wbcl-page .wbcl-industry-style-system {
        width: min(100%, 740px);
        min-height: 550px;
    }

    .wbcl-page .wbcl-system-core {
        width: min(50%, 365px);
        min-height: 238px;
        padding: 1.65rem 1.35rem;
    }

    .wbcl-page .wbcl-system-node {
        min-width: 158px;
        padding: 0.62rem 0.78rem;
    }

    .wbcl-page .wbcl-system-node-priority {
        left: 67%;
        min-width: 185px;
    }

    .wbcl-page .wbcl-system-node-product {
        min-width: 185px;
    }

    .wbcl-page .wbcl-system-node-delivery {
        min-width: 205px;
    }

    .wbcl-page .wbcl-system-node-evolution {
        min-width: 220px;
    }
}

/* =========================================================
   14-INCH LAPTOP — 1200PX TO 1399PX
========================================================= */

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .wbcl-page .wbcl-hero-grid {
        grid-template-columns: minmax(0, 1.02fr) minmax(560px, 0.98fr);
        gap: clamp(1.15rem, 1.8vw, 1.8rem);
    }

    .wbcl-page .wbcl-industry-style-system {
        width: min(100%, 650px);
        min-height: 515px;
        border-radius: 34px;
    }

    .wbcl-page .wbcl-system-activity {
        top: 1rem;
        left: 1rem;
        min-width: 205px;
        padding: 0.72rem 0.80rem;
    }

    .wbcl-page .wbcl-system-core {
        width: min(50%, 325px);
        min-height: 224px;
        padding: 1.28rem 1.05rem;
        border-radius: 26px;
    }

        .wbcl-page .wbcl-system-core > span {
            margin-bottom: 0.72rem;
            padding: 0.40rem 0.66rem;
            font-size: 0.59rem;
        }

        .wbcl-page .wbcl-system-core h2 {
            max-width: 280px;
            font-size: clamp(1.12rem, 1.45vw, 1.42rem);
            line-height: 1.16;
        }

        .wbcl-page .wbcl-system-core p {
            max-width: 270px;
            margin-top: 0.64rem;
            font-size: 0.75rem;
        }

    .wbcl-page .wbcl-system-node {
        min-width: 0;
        gap: 0.52rem;
        padding: 0.53rem 0.60rem;
        border-radius: 16px;
        font-size: 0.68rem;
    }

        .wbcl-page .wbcl-system-node i {
            width: 37px;
            height: 37px;
            flex-basis: 37px;
            border-radius: 11px;
        }

    .wbcl-page .wbcl-system-node-priority {
        top: 1rem;
        left: 68%;
        min-width: 168px;
    }

    .wbcl-page .wbcl-system-node-product {
        left: 0.75rem;
        min-width: 170px;
    }

    .wbcl-page .wbcl-system-node-delivery {
        right: 0.75rem;
        min-width: 185px;
    }

    .wbcl-page .wbcl-system-node-evolution {
        bottom: 1rem;
        min-width: 205px;
    }

    .wbcl-page .wbcl-system-status {
        bottom: 0.55rem;
        font-size: 0.54rem;
    }

    .wbcl-page .wbcl-system-status-left {
        left: 0.80rem;
    }

    .wbcl-page .wbcl-system-status-right {
        right: 0.80rem;
    }
}

/* =========================================================
   TABLET — BELOW 1200PX
========================================================= */

@media (max-width: 1199.98px) {
    .wbcl-page .wbcl-industry-style-system {
        width: min(100%, 800px);
        min-height: 590px;
        margin-inline: auto;
    }
}

/* =========================================================
   MOBILE — BELOW 768PX
========================================================= */

@media (max-width: 767.98px) {
    .wbcl-page .wbcl-industry-style-system {
        display: grid;
        grid-template-columns: 1fr;
        aspect-ratio: auto;
        min-height: auto;
        gap: 0.78rem;
        padding: 1rem;
        border-radius: 28px;
    }

    .wbcl-page .wbcl-system-architecture,
    .wbcl-page .wbcl-system-status {
        display: none;
    }

    .wbcl-page .wbcl-system-activity,
    .wbcl-page .wbcl-system-core,
    .wbcl-page .wbcl-system-node {
        position: relative;
        inset: auto;
        width: 100%;
        min-width: 0;
        transform: none;
    }

    .wbcl-page .wbcl-system-activity {
        order: 1;
    }

    .wbcl-page .wbcl-system-core {
        order: 2;
        min-height: 0;
        padding: 1.45rem 1.10rem;
        border-radius: 23px;
    }

    .wbcl-page .wbcl-system-node-priority {
        order: 3;
    }

    .wbcl-page .wbcl-system-node-product {
        order: 4;
    }

    .wbcl-page .wbcl-system-node-delivery {
        order: 5;
    }

    .wbcl-page .wbcl-system-node-evolution {
        order: 6;
    }

    .wbcl-page .wbcl-system-node {
        justify-content: flex-start;
    }
}


/* =========================================================
   CLIENT HERO — INDUSTRIES-MATCH FINAL OVERRIDE
   Purpose:
   - Make Client first-section right visual match the Industries page architecture language
   - Remove circular/orbit feel inside the visual
   - Fix 14-inch / 16-inch / desktop balance
   - Prevent side nodes from colliding with the central core
========================================================= */

.wbcl-page .wbcl-hero {
    padding: 2.5rem 0 1.45rem;
}

.wbcl-page .wbcl-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr) !important;
    align-items: start !important;
    gap: clamp(2.25rem, 3.8vw, 5rem) !important;
}

.wbcl-page .wbcl-hero-copy {
    max-width: 900px;
}

    .wbcl-page .wbcl-hero-copy h1 {
        max-width: 860px;
        font-size: clamp(3rem, 4.45vw, 4.95rem) !important;
        line-height: 1.01 !important;
        letter-spacing: -0.055em !important;
        text-wrap: balance;
    }

    .wbcl-page .wbcl-hero-copy > p {
        max-width: 820px;
        margin-top: 1.25rem;
        font-size: clamp(1rem, 1.06vw, 1.10rem) !important;
        line-height: 1.82 !important;
    }

.wbcl-page .wbcl-actions {
    margin-top: 1.45rem;
}

.wbcl-page .wbcl-hero-visual {
    display: flex;
    justify-content: flex-end;
}

.wbcl-page .wbcl-industry-style-system {
    position: relative;
    isolation: isolate;
    width: min(100%, 760px) !important;
    min-height: 520px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 38px !important;
    background: radial-gradient(circle at 85% 10%, rgba(86, 126, 255, 0.40), transparent 32%), radial-gradient(circle at 10% 92%, rgba(66, 201, 223, 0.12), transparent 33%), linear-gradient(145deg, rgba(30, 44, 70, 0.92), rgba(16, 29, 52, 0.90) 54%, rgba(40, 79, 165, 0.82)) !important;
    box-shadow: 0 34px 92px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

    /* Prevent the page decorative circles from reading as part of the visual */
    .wbcl-page .wbcl-industry-style-system::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background: linear-gradient(rgba(143, 171, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 171, 255, 0.04) 1px, transparent 1px), linear-gradient(180deg, rgba(7, 17, 31, 0.12), rgba(7, 17, 31, 0.12));
        background-size: 72px 72px, 72px 72px, auto;
        opacity: 0.82;
    }

    .wbcl-page .wbcl-industry-style-system::after {
        content: "";
        position: absolute;
        inset: 1px;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient(115deg, transparent 8%, rgba(255, 255, 255, 0.030) 28%, transparent 48%), radial-gradient(circle at 74% 38%, rgba(72, 116, 255, 0.12), transparent 34%);
        pointer-events: none;
    }

.wbcl-page .wbcl-system-glow-one {
    top: -70px;
    right: -65px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(79, 124, 255, 0.34), transparent 68%);
    filter: blur(22px);
}

.wbcl-page .wbcl-system-glow-two {
    bottom: -100px;
    left: -70px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(66, 201, 223, 0.14), transparent 68%);
    filter: blur(22px);
}

/* Explicitly remove any orbit/circle pseudo-effects from legacy CSS if cached/combined */
.wbcl-page .wbcl-industry-style-system .wbcl-command-orbit,
.wbcl-page .wbcl-industry-style-system .wbcl-command-orbit::before,
.wbcl-page .wbcl-industry-style-system .wbcl-command-orbit::after {
    display: none !important;
}

.wbcl-page .wbcl-system-architecture {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wbcl-page .wbcl-architecture-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(141, 170, 255, 0.16);
    border-radius: 34px;
    transform: translate(-50%, -50%);
}

.wbcl-page .wbcl-architecture-frame-one {
    width: 88%;
    height: 78%;
}

.wbcl-page .wbcl-architecture-frame-two {
    width: 70%;
    height: 60%;
}

.wbcl-page .wbcl-architecture-frame-three {
    width: 54%;
    height: 45%;
}

.wbcl-page .wbcl-system-axis {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(73, 142, 255, 0.35);
}

.wbcl-page .wbcl-system-axis-horizontal {
    width: 84%;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(91, 143, 255, 0.48) 7%, rgba(76, 145, 255, 0.95) 25%, rgba(76, 145, 255, 0.95) 75%, rgba(91, 143, 255, 0.48) 93%, transparent 100%);
}

.wbcl-page .wbcl-system-axis-vertical {
    width: 3px;
    height: 84%;
    background: linear-gradient(180deg, transparent 0%, rgba(91, 143, 255, 0.48) 7%, rgba(76, 145, 255, 0.95) 25%, rgba(76, 145, 255, 0.95) 75%, rgba(91, 143, 255, 0.48) 93%, transparent 100%);
}

.wbcl-page .wbcl-system-pulse {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(208, 225, 255, 0.92);
    border-radius: 50%;
    background: #49a4ff;
    box-shadow: 0 0 0 5px rgba(73, 164, 255, 0.10), 0 0 18px rgba(73, 164, 255, 0.58);
}

.wbcl-page .wbcl-system-pulse-top {
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
}

.wbcl-page .wbcl-system-pulse-right {
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
}

.wbcl-page .wbcl-system-pulse-bottom {
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
}

.wbcl-page .wbcl-system-pulse-left {
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
}

.wbcl-page .wbcl-system-activity {
    position: absolute !important;
    top: 1.45rem !important;
    left: 1.45rem !important;
    z-index: 12 !important;
    display: grid !important;
    gap: 0.34rem;
    min-width: 248px;
    padding: 0.92rem 1rem;
    border: 1px solid rgba(202, 217, 255, 0.18);
    border-radius: 17px;
    color: #ffffff;
    background: rgba(4, 15, 31, 0.90);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

    .wbcl-page .wbcl-system-activity small {
        color: rgba(209, 222, 250, 0.68);
        font-size: 0.66rem;
        font-weight: 850;
        letter-spacing: 0.075em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-system-activity strong {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        color: #ffffff;
        font-size: 0.79rem;
        font-weight: 820;
    }

.wbcl-page .wbcl-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #42d995;
    box-shadow: 0 0 0 5px rgba(66, 217, 149, 0.10), 0 0 18px rgba(66, 217, 149, 0.58);
}

.wbcl-page .wbcl-system-core {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 7 !important;
    display: flex;
    width: min(46%, 350px) !important;
    min-height: 255px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.8rem 1.35rem;
    border: 1px solid rgba(180, 204, 255, 0.12);
    border-radius: 28px;
    color: #ffffff;
    text-align: center;
    background: rgba(5, 14, 28, 0.92);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    transform: translate(-50%, -50%) !important;
}

    .wbcl-page .wbcl-system-core > span {
        display: inline-flex;
        margin-bottom: 0.75rem;
        padding: 0.42rem 0.75rem;
        border-radius: 999px;
        color: #dfe8ff;
        background: rgba(79, 124, 255, 0.22);
        border: none;
        font-size: 0.70rem;
        font-weight: 850;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .wbcl-page .wbcl-system-core h2 {
        max-width: 290px;
        margin: 0;
        color: #ffffff;
        font-size: clamp(1.22rem, 1.46vw, 1.70rem) !important;
        font-weight: 850;
        letter-spacing: -0.03em;
        line-height: 1.23 !important;
        text-align: center;
    }

    .wbcl-page .wbcl-system-core p {
        max-width: 290px;
        margin: 0.65rem 0 0;
        color: rgba(233, 240, 255, 0.70);
        font-size: 0.88rem;
        line-height: 1.55;
        text-align: center;
    }

.wbcl-page .wbcl-system-node {
    position: absolute !important;
    z-index: 9 !important;
    display: flex;
    align-items: center;
    min-width: 150px;
    gap: 0.65rem;
    padding: 0.70rem 0.90rem;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    color: #ffffff;
    background: rgba(5, 14, 28, 0.87);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.20);
    font-size: 0.86rem;
    font-weight: 820;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .wbcl-page .wbcl-system-node i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 13px;
        color: #dfe8ff;
        border: none;
        background: rgba(79, 124, 255, 0.22);
    }

.wbcl-page .wbcl-system-node-priority {
    top: 1.45rem !important;
    left: 66% !important;
    min-width: 186px !important;
    transform: translateX(-50%) !important;
}

.wbcl-page .wbcl-system-node-product {
    top: 50% !important;
    left: 1.15rem !important;
    min-width: 188px !important;
    transform: translateY(-50%) !important;
}

.wbcl-page .wbcl-system-node-delivery {
    top: 50% !important;
    right: 1.15rem !important;
    min-width: 210px !important;
    transform: translateY(-50%) !important;
}

.wbcl-page .wbcl-system-node-evolution {
    bottom: 5.2rem !important;
    left: 50% !important;
    min-width: 214px !important;
    transform: translateX(-50%) !important;
}

.wbcl-page .wbcl-system-status {
    position: absolute;
    bottom: 1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(233, 240, 255, 0.78);
    font-size: 0.70rem;
    font-weight: 760;
}

.wbcl-page .wbcl-system-status-left {
    left: 1rem;
}

.wbcl-page .wbcl-system-status-right {
    right: 1rem;
}

    .wbcl-page .wbcl-system-status-right i {
        color: #b6caff;
    }

/* 16-inch laptop */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    .wbcl-page .wbcl-hero-grid {
        grid-template-columns: minmax(0, 1.01fr) minmax(620px, 0.99fr) !important;
        gap: clamp(2rem, 2.5vw, 3rem) !important;
    }

    .wbcl-page .wbcl-hero-copy h1 {
        font-size: clamp(3rem, 4.0vw, 4.35rem) !important;
        max-width: 760px;
    }

    .wbcl-page .wbcl-industry-style-system {
        width: min(100%, 700px) !important;
        min-height: 500px !important;
    }

    .wbcl-page .wbcl-system-core {
        width: min(46%, 330px) !important;
        min-height: 236px;
        padding: 1.45rem 1.10rem;
    }

        .wbcl-page .wbcl-system-core h2 {
            font-size: clamp(1.12rem, 1.26vw, 1.50rem) !important;
        }

        .wbcl-page .wbcl-system-core p {
            font-size: 0.79rem;
        }

    .wbcl-page .wbcl-system-node {
        font-size: 0.78rem;
        padding: 0.60rem 0.72rem;
    }

        .wbcl-page .wbcl-system-node i {
            width: 36px;
            height: 36px;
            flex-basis: 36px;
        }

    .wbcl-page .wbcl-system-node-priority {
        min-width: 170px !important;
    }

    .wbcl-page .wbcl-system-node-product {
        min-width: 170px !important;
    }

    .wbcl-page .wbcl-system-node-delivery {
        min-width: 190px !important;
    }

    .wbcl-page .wbcl-system-node-evolution {
        min-width: 205px !important;
    }
}

/* 14-inch laptop */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .wbcl-page .wbcl-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(560px, 0.96fr) !important;
        gap: 1.5rem !important;
    }

    .wbcl-page .wbcl-hero-copy h1 {
        font-size: clamp(2.8rem, 3.85vw, 4.10rem) !important;
        max-width: 700px;
    }

    .wbcl-page .wbcl-hero-copy > p {
        max-width: 700px;
        font-size: 0.99rem !important;
        line-height: 1.75 !important;
    }

    .wbcl-page .wbcl-industry-style-system {
        width: min(100%, 620px) !important;
        min-height: 468px !important;
        border-radius: 34px !important;
    }

    .wbcl-page .wbcl-system-activity {
        top: 0.95rem !important;
        left: 0.95rem !important;
        min-width: 200px;
        padding: 0.70rem 0.80rem;
    }

        .wbcl-page .wbcl-system-activity small {
            font-size: 0.58rem;
        }

        .wbcl-page .wbcl-system-activity strong {
            font-size: 0.68rem;
        }

    .wbcl-page .wbcl-system-core {
        width: min(44%, 285px) !important;
        min-height: 210px;
        padding: 1.25rem 0.95rem;
    }

        .wbcl-page .wbcl-system-core > span {
            margin-bottom: 0.66rem;
            padding: 0.36rem 0.60rem;
            font-size: 0.56rem;
        }

        .wbcl-page .wbcl-system-core h2 {
            max-width: 235px;
            font-size: clamp(1.02rem, 1.12vw, 1.26rem) !important;
            line-height: 1.18 !important;
        }

        .wbcl-page .wbcl-system-core p {
            max-width: 235px;
            margin-top: 0.58rem;
            font-size: 0.70rem;
            line-height: 1.45;
        }

    .wbcl-page .wbcl-system-node {
        gap: 0.50rem;
        padding: 0.50rem 0.58rem;
        font-size: 0.64rem;
        border-radius: 16px;
    }

        .wbcl-page .wbcl-system-node i {
            width: 33px;
            height: 33px;
            flex-basis: 33px;
            border-radius: 11px;
        }

    .wbcl-page .wbcl-system-node-priority {
        top: 0.95rem !important;
        left: 67% !important;
        min-width: 148px !important;
    }

    .wbcl-page .wbcl-system-node-product {
        left: 0.70rem !important;
        min-width: 158px !important;
    }

    .wbcl-page .wbcl-system-node-delivery {
        right: 0.70rem !important;
        min-width: 178px !important;
    }

    .wbcl-page .wbcl-system-node-evolution {
        bottom: 4.15rem !important;
        min-width: 178px !important;
    }

    .wbcl-page .wbcl-system-status {
        bottom: 0.70rem;
        font-size: 0.58rem;
    }

    .wbcl-page .wbcl-system-status-left {
        left: 0.70rem;
    }

    .wbcl-page .wbcl-system-status-right {
        right: 0.70rem;
    }
}

@media (max-width: 1199.98px) {
    .wbcl-page .wbcl-hero-grid {
        grid-template-columns: 1fr !important;
    }

    .wbcl-page .wbcl-hero-visual {
        justify-content: center;
    }

    .wbcl-page .wbcl-industry-style-system {
        width: min(100%, 760px) !important;
        min-height: 540px !important;
    }
}

@media (max-width: 767.98px) {
    .wbcl-page .wbcl-hero-copy h1 {
        font-size: clamp(2.45rem, 10vw, 3.8rem) !important;
    }

    .wbcl-page .wbcl-industry-style-system {
        display: grid;
        grid-template-columns: 1fr;
        min-height: auto !important;
        gap: 0.78rem;
        padding: 1rem;
        aspect-ratio: auto !important;
        border-radius: 28px !important;
    }

    .wbcl-page .wbcl-system-architecture,
    .wbcl-page .wbcl-system-status {
        display: none !important;
    }

    .wbcl-page .wbcl-system-activity,
    .wbcl-page .wbcl-system-core,
    .wbcl-page .wbcl-system-node {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        transform: none !important;
    }

    .wbcl-page .wbcl-system-core {
        min-height: 0;
        padding: 1.35rem 1.05rem;
    }
}


/* =========================================================
   CLIENT HERO — FINAL NODE ALIGNMENT PATCH
   ---------------------------------------------------------
   Corrects only:
   1. Business Priority alignment with the central vertical axis
   2. Evolution & Ownership clearance below the central core
========================================================= */

/* All desktop and laptop widths */
@media (min-width: 1200px) {

    /*
     * Centre the top node exactly on the same vertical axis
     * as the central Client Engagement Core.
     */
    .wbcl-page .wbcl-system-node-priority {
        top: 1.45rem !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    /*
     * Move the bottom node beneath the central card.
     * It remains centred on the illuminated vertical axis.
     */
    .wbcl-page .wbcl-system-node-evolution {
        top: auto !important;
        right: auto !important;
        bottom: 1.35rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* 16-inch laptop */
@media (min-width: 1400px) and (max-width: 1599.98px) {

    .wbcl-page .wbcl-system-node-priority {
        top: 1.20rem !important;
        left: 50% !important;
    }

    .wbcl-page .wbcl-system-node-evolution {
        bottom: 1.15rem !important;
    }
}

/* 14-inch laptop */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    .wbcl-page .wbcl-system-node-priority {
        top: 0.95rem !important;
        left: 50% !important;
    }

    .wbcl-page .wbcl-system-node-evolution {
        bottom: 0.95rem !important;
    }
}



/* =========================================================
   CLIENT V4 — MOBILE DENSITY & BUTTON REFINEMENT
   ---------------------------------------------------------
   Phone-only corrections:
   1. Compact hero action buttons
   2. Compact client-value cards
   3. Compact 01 / 02 / 03 transformation cards
   4. Compact governance cards
   5. Compact inquiry-guidance cards
   6. Compact form submission button
   7. Compact final CTA buttons

   Preserved:
   - Client.cshtml and all wording
   - Client architecture visual
   - Inquiry form, uploads, Turnstile and validation
   - Routes, scripts and AOS
   - Tablet, laptop and desktop layouts
========================================================= */

@media (max-width: 767.98px) {

    /* =====================================================
       1. HERO BUTTONS — COMPACT AND CENTRED
    ===================================================== */

    .wbcl-page .wbcl-actions {
        display: flex !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.62rem !important;
        margin-top: 1.05rem !important;
    }

        .wbcl-page .wbcl-actions .btn {
            width: auto !important;
            max-width: calc(100% - 0.75rem) !important;
            min-height: 48px !important;
            margin: 0 auto !important;
            padding: 0.72rem 1.30rem !important;
            font-size: 0.78rem !important;
            line-height: 1.20 !important;
            white-space: normal !important;
        }

        .wbcl-page .wbcl-actions .wbcl-btn-primary {
            min-width: min(100%, 290px) !important;
        }

        .wbcl-page .wbcl-actions .wbcl-btn-secondary {
            min-width: min(100%, 225px) !important;
        }

    /* =====================================================
       2. HERO CLIENT-VALUE CARDS — COMPACT 2 × 2 GRID
    ===================================================== */

    .wbcl-page .wbcl-hero-signals {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.62rem !important;
        margin-top: 1rem !important;
    }

        .wbcl-page .wbcl-hero-signals article {
            display: grid !important;
            grid-template-columns: 42px minmax(0, 1fr) !important;
            min-height: 94px !important;
            align-items: center !important;
            gap: 0.64rem !important;
            padding: 0.72rem 0.76rem !important;
            border-radius: 17px !important;
            transform: none !important;
        }

        .wbcl-page .wbcl-hero-signals i {
            width: 42px !important;
            height: 42px !important;
            min-width: 42px !important;
            flex: 0 0 42px !important;
            border-radius: 13px !important;
            font-size: 0.92rem !important;
        }

        .wbcl-page .wbcl-hero-signals h3 {
            margin: 0 0 0.18rem !important;
            font-size: 0.88rem !important;
            line-height: 1.20 !important;
        }

        .wbcl-page .wbcl-hero-signals p {
            margin: 0 !important;
            font-size: 0.70rem !important;
            line-height: 1.34 !important;
        }

    /* =====================================================
       3. TRANSFORMATION MODEL — SHORT HORIZONTAL CARDS
    ===================================================== */

    .wbcl-page .wbcl-transformation-flow {
        grid-template-columns: 1fr !important;
        gap: 0.62rem !important;
        margin-top: 1.45rem !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .wbcl-page .wbcl-flow-arrow {
        display: none !important;
    }

    .wbcl-page .wbcl-stage-card {
        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon stage"
            "icon title"
            "description description" !important;
        min-height: 0 !important;
        height: auto !important;
        gap: 0.14rem 0.68rem !important;
        padding: 0.78rem 0.82rem !important;
        border-radius: 18px !important;
    }

    .wbcl-page .wbcl-stage-number {
        top: 0.68rem !important;
        right: 0.76rem !important;
        font-size: 0.72rem !important;
        line-height: 1 !important;
    }

    .wbcl-page .wbcl-stage-card > i {
        grid-area: icon;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        align-self: center !important;
        border-radius: 15px !important;
        font-size: 1rem !important;
    }

    .wbcl-page .wbcl-stage-card > span {
        grid-area: stage;
        align-self: end !important;
        margin: 0 !important;
        padding-right: 2.2rem !important;
        font-size: 0.56rem !important;
        line-height: 1.15 !important;
    }

    .wbcl-page .wbcl-stage-card h3 {
        grid-area: title;
        align-self: start !important;
        margin: 0 !important;
        padding-right: 2.2rem !important;
        font-size: 0.93rem !important;
        line-height: 1.22 !important;
    }

    .wbcl-page .wbcl-stage-card p {
        grid-area: description;
        margin: 0.40rem 0 0 !important;
        font-size: 0.73rem !important;
        line-height: 1.42 !important;
    }

    /* =====================================================
       4. GOVERNANCE CARDS — COMPACT CONTENT-LED GRID
    ===================================================== */

    .wbcl-page .wbcl-governance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.62rem !important;
        margin-top: 1.45rem !important;
    }

        .wbcl-page .wbcl-governance-grid article {
            display: grid !important;
            grid-template-columns: 42px minmax(0, 1fr) !important;
            grid-template-areas:
                "icon title"
                "description description" !important;
            min-height: 0 !important;
            height: auto !important;
            align-items: center !important;
            gap: 0.14rem 0.64rem !important;
            padding: 0.74rem 0.78rem !important;
            border-radius: 17px !important;
            transform: none !important;
        }

        .wbcl-page .wbcl-governance-grid i {
            grid-area: icon;
            width: 42px !important;
            height: 42px !important;
            margin: 0 !important;
            border-radius: 13px !important;
            font-size: 0.92rem !important;
        }

        .wbcl-page .wbcl-governance-grid h3 {
            grid-area: title;
            margin: 0 !important;
            font-size: 0.90rem !important;
            line-height: 1.20 !important;
        }

        .wbcl-page .wbcl-governance-grid p {
            grid-area: description;
            margin: 0.40rem 0 0 !important;
            font-size: 0.70rem !important;
            line-height: 1.38 !important;
        }

    /* =====================================================
       5. INQUIRY GUIDANCE — COMPACT CARDS
    ===================================================== */

    .wbcl-page .wbcl-guide-points {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.58rem !important;
        margin-top: 1rem !important;
    }

        .wbcl-page .wbcl-guide-points article {
            display: grid !important;
            grid-template-columns: 40px minmax(0, 1fr) !important;
            min-height: 78px !important;
            align-items: center !important;
            gap: 0.60rem !important;
            padding: 0.64rem 0.68rem !important;
            border-radius: 16px !important;
        }

            .wbcl-page .wbcl-guide-points article > i {
                width: 40px !important;
                height: 40px !important;
                min-width: 40px !important;
                flex: 0 0 40px !important;
                border-radius: 12px !important;
                font-size: 0.88rem !important;
            }

        .wbcl-page .wbcl-guide-points strong {
            display: block !important;
            margin: 0 0 0.12rem !important;
            font-size: 0.82rem !important;
            line-height: 1.20 !important;
        }

        .wbcl-page .wbcl-guide-points small {
            display: block !important;
            font-size: 0.66rem !important;
            line-height: 1.34 !important;
        }

    .wbcl-page .wbcl-guide-flow {
        gap: 0.34rem !important;
        margin-top: 0.84rem !important;
        padding: 0.72rem !important;
        border-radius: 17px !important;
    }

        .wbcl-page .wbcl-guide-flow span {
            font-size: 0.68rem !important;
            line-height: 1.20 !important;
        }

        .wbcl-page .wbcl-guide-flow i {
            font-size: 0.72rem !important;
            transform: rotate(90deg) !important;
        }

    /* =====================================================
       6. FORM SUBMISSION — COMPACT CENTRED BUTTON
    ===================================================== */

    .wbcl-page .wbcl-submit-bar {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        gap: 0.88rem !important;
        padding: 0.86rem !important;
        border-radius: 18px !important;
    }

        .wbcl-page .wbcl-submit-bar p {
            width: 100% !important;
            margin: 0 !important;
        }

    .wbcl-page .wbcl-submit-btn {
        width: auto !important;
        max-width: calc(100% - 0.75rem) !important;
        min-width: min(100%, 270px) !important;
        min-height: 48px !important;
        margin: 0 auto !important;
        padding: 0.72rem 1.30rem !important;
        font-size: 0.78rem !important;
        line-height: 1.20 !important;
        white-space: normal !important;
    }

    /* =====================================================
       7. FINAL CTA BUTTONS — COMPACT AND CENTRED
    ===================================================== */

    .wbcl-page .wbcl-closing-box {
        padding: 1.45rem 0.90rem !important;
        border-radius: 25px !important;
    }

    .wbcl-page .wbcl-closing-actions {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.62rem !important;
        margin-top: 1rem !important;
    }

        .wbcl-page .wbcl-closing-actions .btn {
            width: auto !important;
            max-width: calc(100% - 0.75rem) !important;
            min-height: 48px !important;
            margin: 0 auto !important;
            padding: 0.72rem 1.30rem !important;
            font-size: 0.78rem !important;
            line-height: 1.20 !important;
            white-space: normal !important;
        }

        .wbcl-page .wbcl-closing-actions .wbcl-btn-primary {
            min-width: min(100%, 245px) !important;
        }

        .wbcl-page .wbcl-closing-actions .wbcl-btn-secondary {
            min-width: min(100%, 210px) !important;
        }
}

/* Normal narrow phones use one readable column for card groups. */
@media (max-width: 519.98px) {

    .wbcl-page .wbcl-hero-signals,
    .wbcl-page .wbcl-governance-grid,
    .wbcl-page .wbcl-guide-points {
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
    }

        .wbcl-page .wbcl-hero-signals article,
        .wbcl-page .wbcl-governance-grid article,
        .wbcl-page .wbcl-guide-points article {
            min-height: 70px !important;
        }
}

/* Very narrow phones retain safe full-width touch targets. */
@media (max-width: 359.98px) {

    .wbcl-page .wbcl-actions .btn,
    .wbcl-page .wbcl-submit-btn,
    .wbcl-page .wbcl-closing-actions .btn {
        width: calc(100% - 0.5rem) !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .wbcl-page .wbcl-stage-card {
        grid-template-columns: 44px minmax(0, 1fr) !important;
        padding: 0.68rem 0.72rem !important;
    }

        .wbcl-page .wbcl-stage-card > i {
            width: 44px !important;
            height: 44px !important;
        }
}