:root {
    --ink: #101936;
    --ink2: #17234a;
    --blue: #3159d8;
    --teal: #22b7aa;
    --mint: #89e1d5;
    --warm: #f0a85e;
    --paper: #f5f7fb;
    --white: #fff;
    --muted: #66718d;
    --line: #dbe0ea;
    --heading: 'Manrope',sans-serif;
    --body: 'DM Sans',sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: var(--body);
    line-height: 1.6
}

.container {
    width: min(1180px,calc(100% - 48px));
    margin: auto
}

.skip-link {
    position: fixed;
    left: 10px;
    top: -60px;
    background: #fff;
    color: #111;
    padding: 10px;
    z-index: 100
}

    .skip-link:focus {
        top: 10px
    }

.site-header {
    position: absolute;
    z-index: 20;
    width: 100%;
    top: 0;
    border-bottom: 1px solid rgba(255,255,255,.12)
}

.nav-wrap {
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand img {
    display: block;
    width: 168px;
    height: auto;
    filter: brightness(0) invert(1)
}

.desktop-nav {
    display: flex;
    gap: 27px;
    margin-left: auto;
    margin-right: 30px
}

    .desktop-nav a {
        color: #e5e9f5;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500
    }

        .desktop-nav a:hover {
            color: #8fe1d7
        }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.region-button {
    border: 0;
    background: transparent;
    color: #e5e9f5;
    font: 500 13px var(--body);
    padding: 10px;
    cursor: pointer
}

.globe {
    color: var(--mint);
    font-size: 17px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    padding: 15px 21px;
    border-radius: 3px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: .25s
}

    .button span {
        font-size: 18px
    }

    .button:hover {
        transform: translateY(-2px)
    }

.button-primary {
    color: #0c1733;
    background: var(--mint)
}

.button-small {
    padding: 10px 15px;
    font-size: 12px;
    gap: 12px
}

.menu-button, .mobile-panel {
    display: none
}

.hero {
    min-height: 780px;
    padding: 160px 0 0;
    background: radial-gradient(circle at 78% 38%,#293a70 0,transparent 33%),linear-gradient(135deg,#0d1530 0%,#14224a 58%,#101936 100%);
    color: white;
    position: relative;
    overflow: hidden
}

    .hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
        background-size: 55px 55px;
        mask-image: linear-gradient(to right,transparent,black)
    }

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px)
}

.hero-glow-one {
    width: 350px;
    height: 350px;
    background: rgba(34,183,170,.08);
    right: -130px;
    top: 80px
}

.hero-glow-two {
    width: 260px;
    height: 260px;
    background: rgba(49,89,216,.16);
    left: -130px;
    bottom: 10px
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 40px;
    position: relative
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: #c8d2ec
}

    .eyebrow span {
        width: 26px;
        height: 2px;
        background: var(--teal)
    }

h1, h2, h3 {
    font-family: var(--heading);
    margin-top: 0
}

h1 {
    font-size: clamp(50px,5.4vw,78px);
    line-height: 1.05;
    letter-spacing: -.048em;
    margin: 25px 0
}

    h1 em, h2 em {
        font-style: normal;
        color: var(--mint)
    }

.hero-intro {
    max-width: 650px;
    color: #c0c8dc;
    font-size: 18px;
    line-height: 1.7
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 34px;
    margin: 34px 0 42px
}

.text-link {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    gap: 12px
}

.market-line {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px
}

    .market-line span {
        color: #8793ae
    }

    .market-line b {
        font-weight: 500
    }

    .market-line i {
        width: 3px;
        height: 3px;
        background: var(--teal);
        border-radius: 50%
    }

.hero-visual {
    height: 520px;
    position: relative
}

.orbit {
    position: absolute;
    border: 1px solid rgba(137,225,213,.24);
    border-radius: 50%;
    left: 50%;
    top: 48%;
    transform: translate(-50%,-50%)
}

.orbit-one {
    width: 390px;
    height: 390px
}

.orbit-two {
    width: 285px;
    height: 285px;
    border-style: dashed
}

.visual-core {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    left: 50%;
    top: 48%;
    transform: translate(-50%,-50%);
    background: linear-gradient(145deg,#2d54d3,#1f3791);
    box-shadow: 0 25px 80px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

    .visual-core:before {
        content: "";
        position: absolute;
        inset: 9px;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 50%
    }

    .visual-core small {
        color: var(--mint);
        letter-spacing: .18em;
        font-size: 9px
    }

    .visual-core strong {
        font: 700 26px/1.1 var(--heading);
        margin: 8px
    }

    .visual-core span {
        font-size: 9px;
        color: #c5cde0
    }

.signal-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(18,28,60,.9);
    border: 1px solid rgba(255,255,255,.15);
    padding: 13px 15px;
    width: 185px;
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
    backdrop-filter: blur(8px)
}

    .signal-card small {
        display: block;
        color: #7e8ba8;
        font-size: 8px;
        letter-spacing: .14em
    }

    .signal-card b {
        font-size: 12px
    }

.signal-icon {
    width: 35px;
    height: 35px;
    background: rgba(137,225,213,.1);
    color: var(--mint);
    display: grid;
    place-items: center
}

.signal-one {
    top: 52px;
    left: 10px
}

.signal-two {
    right: -10px;
    top: 190px
}

.signal-three {
    bottom: 55px;
    left: 28px
}

.market-node {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    border: 4px solid rgba(34,183,170,.3)
}

.node-ca {
    top: 75px;
    right: 65px
}

.node-sa {
    bottom: 42px;
    right: 90px
}

.node-bh {
    bottom: 115px;
    left: 0
}

.dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--warm);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(240,168,94,.13)
}

.dot-one {
    top: 185px;
    left: 15px
}

.dot-two {
    right: 20px;
    bottom: 165px
}

.dot-three {
    top: 25px;
    left: 55%
}

.trust-strip {
    height: 85px;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,.13);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    color: #b7c0d6;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 10px
}

    .trust-strip i {
        width: 4px;
        height: 4px;
        background: var(--teal);
        border-radius: 50%
    }

.section {
    padding: 105px 0
}

.intro {
    background: #fff
}

.intro-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 100px;
    align-items: start
}

.eyebrow.dark {
    color: #6e7891
}

.section-heading h2, .heading-row h2, .industries h2, .regions h2, .delivery h2, .contact h2 {
    font-size: clamp(35px,4vw,53px);
    line-height: 1.18;
    letter-spacing: -.035em;
    margin: 20px 0
}

    .section-heading h2 em, .heading-row h2 em, .industries h2 em, .regions h2 em {
        color: var(--blue)
    }

.intro-copy {
    padding-top: 37px;
    color: var(--muted);
    font-size: 16px
}

.dark-link {
    color: var(--ink);
    margin-top: 12px
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin-top: 75px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.value-card {
    padding: 40px 28px;
    position: relative;
    border-right: 1px solid var(--line)
}

    .value-card:last-child {
        border: 0
    }

.card-number {
    position: absolute;
    right: 18px;
    top: 18px;
    color: #aeb5c4;
    font-size: 10px
}

.line-icon {
    color: var(--blue);
    font-size: 28px;
    margin-bottom: 45px
}

.value-card h3 {
    font-size: 18px
}

.value-card p {
    color: var(--muted);
    font-size: 13px
}

.solutions {
    background: var(--ink);
    color: white
}

.heading-row {
    display: grid;
    grid-template-columns: 1.5fr .5fr;
    gap: 100px;
    align-items: end
}

.eyebrow.light {
    color: #b9c4dc
}

.heading-row > p {
    color: #aeb8d0;
    font-size: 14px;
    margin-bottom: 28px
}

.solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 50px
}

.solution-card {
    min-height: 320px;
    padding: 35px;
    background: #18244a;
    border: 1px solid rgba(255,255,255,.09);
    position: relative;
    overflow: hidden
}

    .solution-card h3 {
        font-size: 25px;
        line-height: 1.3;
        margin: 18px 0 12px;
        max-width: 430px
    }

    .solution-card p {
        color: #aab4ca;
        max-width: 450px;
        font-size: 14px
    }

    .solution-card a {
        position: absolute;
        left: 35px;
        bottom: 30px;
        color: var(--mint);
        text-decoration: none;
        font-size: 12px;
        font-weight: 700
    }

        .solution-card a span {
            margin-left: 12px
        }

.solution-index {
    font-size: 9px;
    letter-spacing: .14em;
    color: #8490ad
}

.solution-card.feature {
    grid-row: span 2;
    min-height: 656px;
    background: linear-gradient(145deg,#213679,#182753)
}

.solution-art {
    height: 310px;
    position: relative;
    margin: -35px -35px 25px;
    background: radial-gradient(circle at 50% 50%,rgba(137,225,213,.15),transparent 35%)
}

    .solution-art span {
        position: absolute;
        border: 1px solid rgba(137,225,213,.25);
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)
    }

        .solution-art span:nth-child(1) {
            width: 270px;
            height: 270px
        }

        .solution-art span:nth-child(2) {
            width: 190px;
            height: 190px
        }

        .solution-art span:nth-child(3) {
            width: 115px;
            height: 115px;
            background: rgba(49,89,216,.25)
        }

    .solution-art b {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font: 800 22px var(--heading);
        color: var(--mint);
        letter-spacing: .12em
    }

.mini-network, .cloud-lines, .data-bars {
    position: absolute;
    right: 30px;
    bottom: 28px;
    width: 150px;
    height: 80px;
    opacity: .42
}

    .mini-network i {
        position: absolute;
        width: 12px;
        height: 12px;
        border: 2px solid var(--mint);
        border-radius: 50%
    }

        .mini-network i:nth-child(1) {
            top: 3px;
            left: 65px
        }

        .mini-network i:nth-child(2) {
            bottom: 4px;
            left: 5px
        }

        .mini-network i:nth-child(3) {
            right: 4px;
            bottom: 4px
        }

        .mini-network i:nth-child(4) {
            left: 65px;
            bottom: 20px
        }

    .cloud-lines i {
        display: block;
        height: 1px;
        background: linear-gradient(90deg,transparent,var(--mint),transparent);
        margin: 19px
    }

.data-bars {
    display: flex;
    align-items: end;
    gap: 8px;
    justify-content: end
}

    .data-bars i {
        width: 10px;
        background: var(--teal)
    }

        .data-bars i:nth-child(1) {
            height: 22px
        }

        .data-bars i:nth-child(2) {
            height: 40px
        }

        .data-bars i:nth-child(3) {
            height: 32px
        }

        .data-bars i:nth-child(4) {
            height: 65px
        }

        .data-bars i:nth-child(5) {
            height: 52px
        }

.capability-ticker {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 23px;
    margin-top: 55px;
    color: #aeb8cc;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-size: 9px
}

    .capability-ticker i {
        width: 3px;
        height: 3px;
        background: var(--teal)
    }

.industries {
    background: #f2f4f8
}

.industries-grid {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 110px
}

.industries-copy > p:not(.eyebrow) {
    color: var(--muted);
    font-size: 15px;
    max-width: 430px
}

.button-outline {
    border: 1px solid #b7bfce;
    color: var(--ink);
    margin-top: 20px
}

.industry-list {
    border-top: 1px solid #cdd3df
}

    .industry-list div {
        display: grid;
        grid-template-columns: 50px 1fr 30px;
        align-items: center;
        gap: 20px;
        padding: 25px 6px;
        border-bottom: 1px solid #cdd3df
    }

    .industry-list span {
        font-size: 10px;
        color: #8490a7
    }

    .industry-list h3 {
        margin: 0;
        font-size: 18px
    }

    .industry-list b {
        color: var(--blue);
        font-weight: 400
    }

.regions {
    background: white
}

.region-heading {
    align-items: end
}

.region-stage {
    height: 520px;
    margin-top: 45px;
    background: linear-gradient(135deg,#101936,#1d2e62);
    position: relative;
    overflow: hidden
}

    .region-stage:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 50% 50%,rgba(34,183,170,.18),transparent 35%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
        background-size: auto,38px 38px,38px 38px
    }

.region-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 170px;
    height: 170px;
    border: 1px solid rgba(137,225,213,.5);
    border-radius: 50%;
    display: grid;
    place-content: center;
    text-align: center;
    background: #162654;
    box-shadow: 0 0 0 25px rgba(137,225,213,.035)
}

    .region-core img {
        width: 115px;
        filter: brightness(0) invert(1);
        margin: auto
    }

    .region-core span {
        color: #aab7d0;
        font-size: 10px;
        margin-top: 9px
    }

.region-card {
    position: absolute;
    width: 235px;
    color: white;
    border-left: 2px solid var(--teal);
    padding: 18px;
    background: rgba(23,35,74,.85);
    box-shadow: 0 15px 35px rgba(0,0,0,.22)
}

    .region-card > span {
        position: absolute;
        right: 15px;
        top: 12px;
        color: rgba(255,255,255,.11);
        font: 800 42px var(--heading)
    }

    .region-card small {
        font-size: 8px;
        color: var(--mint);
        letter-spacing: .14em
    }

    .region-card h3 {
        font-size: 23px;
        margin: 5px 0
    }

    .region-card p {
        font-size: 11px;
        color: #aeb9d0;
        line-height: 1.5;
        margin: 0
    }

.canada {
    top: 48px;
    left: 48px
}

.saudi {
    right: 45px;
    top: 100px
}

.bahrain {
    right: 150px;
    bottom: 34px
}

.world-lines i {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg,transparent,rgba(137,225,213,.55),transparent);
    transform-origin: left
}

    .world-lines i:nth-child(1) {
        width: 340px;
        left: 25%;
        top: 40%;
        transform: rotate(14deg)
    }

    .world-lines i:nth-child(2) {
        width: 350px;
        left: 52%;
        top: 48%;
        transform: rotate(-17deg)
    }

    .world-lines i:nth-child(3) {
        width: 260px;
        left: 53%;
        top: 54%;
        transform: rotate(20deg)
    }

.delivery {
    background: #121c3b;
    color: white
}

.delivery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 110px;
    align-items: center
}

.delivery-copy > p:not(.eyebrow) {
    color: #aeb9d0;
    max-width: 500px
}

.relationship {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 32px
}

    .relationship div {
        border: 1px solid rgba(255,255,255,.16);
        padding: 15px;
        flex: 1
    }

    .relationship b {
        display: block;
        color: var(--mint);
        font: 700 14px var(--heading)
    }

    .relationship span {
        font-size: 9px;
        color: #929db5
    }

    .relationship i {
        font-style: normal;
        color: var(--warm)
    }

.delivery-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,.15)
}

    .delivery-steps li {
        display: grid;
        grid-template-columns: 55px 1fr;
        gap: 20px;
        padding: 22px;
        border-bottom: 1px solid rgba(255,255,255,.15)
    }

        .delivery-steps li > span {
            font-size: 10px;
            color: var(--teal)
        }

    .delivery-steps h3 {
        font-size: 18px;
        margin: 0
    }

    .delivery-steps p {
        margin: 3px 0 0;
        color: #99a5bd;
        font-size: 12px
    }

.contact {
    background: #f2f4f8
}

.contact-card {
    background: linear-gradient(110deg,#2c53cf,#1e378e);
    color: white;
    padding: 65px 70px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden
}

    .contact-card h2 {
        margin: 18px 0
    }

    .contact-card p {
        color: #c7d1ea;
        max-width: 600px
    }

.button-light {
    background: white;
    color: var(--ink);
    z-index: 2;
    white-space: nowrap
}

.contact-watermark {
    position: absolute;
    right: 20%;
    top: -70px;
    color: rgba(255,255,255,.055);
    font: 800 210px var(--heading)
}

footer {
    background: #0b1228;
    color: #a8b2c9;
    padding: 65px 0 25px
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr .7fr 1fr;
    gap: 60px
}

    .footer-top img {
        width: 168px;
        filter: brightness(0) invert(1)
    }

    .footer-top p {
        font-size: 12px
    }

    .footer-top div:not(:first-child) {
        display: flex;
        flex-direction: column;
        gap: 7px;
        font-size: 12px
    }

    .footer-top small {
        color: var(--mint);
        font-size: 9px;
        letter-spacing: .15em;
        margin-bottom: 6px
    }

    .footer-top a {
        color: #c5cee0;
        text-decoration: none
    }

.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    justify-content: space-between;
    font-size: 10px
}

    .footer-bottom a {
        color: var(--mint);
        text-decoration: none
    }

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s,transform .65s
}

    .reveal.visible {
        opacity: 1;
        transform: none
    }

@media(max-width:1000px) {
    .desktop-nav, .region-button {
        display: none
    }

    .menu-button {
        display: flex;
        width: 42px;
        height: 42px;
        background: transparent;
        border: 1px solid rgba(255,255,255,.25);
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 10px
    }

        .menu-button span {
            display: block;
            height: 1px;
            background: white
        }

    .mobile-panel.open {
        display: flex;
        position: absolute;
        top: 84px;
        width: 100%;
        background: #101936;
        padding: 20px 24px;
        flex-direction: column
    }

    .mobile-panel a {
        color: white;
        text-decoration: none;
        padding: 10px;
        border-bottom: 1px solid rgba(255,255,255,.1)
    }

    .hero-grid {
        grid-template-columns: 1fr
    }

    .hero {
        padding-top: 145px
    }

    .hero-copy {
        text-align: center
    }

    .eyebrow, .hero-actions, .market-line {
        justify-content: center
    }

    .hero-intro {
        margin-inline: auto
    }

    .hero-visual {
        height: 470px
    }

    .trust-strip {
        margin-top: 0
    }

    .intro-grid, .delivery-grid {
        gap: 55px
    }

    .value-grid {
        grid-template-columns: 1fr 1fr
    }

    .value-card:nth-child(2) {
        border-right: 0
    }

    .industries-grid {
        gap: 55px
    }

    .contact-card {
        padding: 55px 45px
    }

    .contact-watermark {
        right: 5%
    }
}

@media(max-width:760px) {
    .container {
        width: min(100% - 32px,1180px)
    }

    .nav-wrap {
        height: 72px
    }

    .brand img {
        width: 145px
    }

    .nav-actions .button {
        display: none
    }

    .mobile-panel.open {
        top: 72px
    }

    .hero {
        min-height: auto;
        padding-top: 125px
    }

    .hero-copy {
        text-align: left
    }

    .hero h1 {
        font-size: 45px
    }

    .hero-intro {
        font-size: 16px
    }

    .eyebrow, .hero-actions, .market-line {
        justify-content: flex-start
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px
    }

    .market-line {
        flex-wrap: wrap
    }

        .market-line > span {
            width: 100%
        }

    .hero-visual {
        height: 430px;
        transform: scale(.85);
        margin: -15px
    }

    .signal-two {
        right: -45px
    }

    .signal-one {
        left: -35px
    }

    .trust-strip {
        height: auto;
        padding: 25px 0;
        flex-wrap: wrap;
        gap: 16px
    }

    .section {
        padding: 75px 0
    }

    .intro-grid, .heading-row, .industries-grid, .delivery-grid {
        grid-template-columns: 1fr;
        gap: 30px
    }

        .section-heading h2, .heading-row h2, .industries h2, .regions h2, .delivery h2, .contact h2 {
            font-size: 35px
        }

    .intro-copy {
        padding-top: 0
    }

    .value-grid {
        grid-template-columns: 1fr;
        margin-top: 45px
    }

    .value-card {
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

        .value-card:last-child {
            border-bottom: 0
        }

    .solution-grid {
        grid-template-columns: 1fr
    }

    .solution-card.feature {
        grid-row: auto;
        min-height: 600px
    }

    .capability-ticker {
        flex-wrap: wrap
    }

    .region-stage {
        height: 770px
    }

    .region-core {
        top: 36%
    }

    .region-card {
        width: calc(100% - 40px);
        left: 20px !important;
        right: auto !important
    }

    .canada {
        top: 30px
    }

    .saudi {
        top: auto;
        bottom: 175px
    }

    .bahrain {
        bottom: 25px
    }

    .world-lines {
        display: none
    }

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

        .relationship i {
            text-align: center
        }

    .contact-card {
        padding: 45px 28px;
        display: block
    }

        .contact-card .button {
            margin-top: 20px
        }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .footer-bottom {
        flex-direction: column;
        gap: 10px
    }

    .contact-watermark {
        font-size: 130px;
        top: 10px;
        right: -20px
    }
}

/* International presence network: regional engagement plus coordinated delivery partners. */
.region-stage {
    height: 650px
}

.canada {
    top: 42px;
    left: 44px
}

.india {
    left: 62px;
    bottom: 48px
}

.saudi {
    right: 42px;
    top: 50px
}

.bahrain {
    right: 22px;
    top: 250px
}

.africa {
    right: 92px;
    bottom: 32px
}

@media(max-width:760px) {
    .region-stage {
        height: 1160px;
        padding: 24px 0
    }

    .region-core {
        display: none
    }

    .region-card {
        position: absolute;
        width: calc(100% - 40px);
        left: 20px !important;
        right: auto !important
    }

    .canada {
        top: 25px
    }

    .saudi {
        top: 245px;
        bottom: auto
    }

    .bahrain {
        top: 465px;
        bottom: auto
    }

    .india {
        top: 685px;
        bottom: auto
    }

    .africa {
        top: 905px;
        bottom: auto
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }

    .button {
        transition: none
    }
}

/* Board-review hero slider: one invariant desktop stage */
.brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none
}

    .brand span {
        color: #aeb9d0;
        font-size: 7px;
        letter-spacing: .095em;
        margin-top: 5px;
        white-space: nowrap
    }

.hero {
    height: 905px;
    min-height: 905px;
    padding: 124px 0 0
}

.hero-slider {
    position: relative;
    height: 696px
}

.hero-slide {
    display: none;
    position: absolute;
    inset: 0 0 86px;
    animation: heroIn .55s ease both
}

    .hero-slide.is-active {
        display: block
    }

    .hero-slide .hero-grid {
        height: 570px;
        min-height: 570px
    }

    .hero-slide .hero-grid {
        grid-template-columns: .96fr 1.04fr;
        gap: 18px
    }

.hero-copy {
    align-self: center;
    height: 570px;
    display: grid;
    grid-template-rows: 30px 330px 100px 65px 25px;
    row-gap: 5px;
    align-content: center
}

    .hero-copy > .eyebrow {
        margin: 0;
        align-self: start
    }

    .hero-copy > h1 {
        margin: 0;
        align-self: center
    }

        .hero-copy > h1 > span, .hero-copy > h1 > em, .hero-copy > h1 > em > span {
            display: block
        }

    .hero-copy > .hero-intro {
        margin: 0;
        align-self: start
    }

    .hero-copy > .hero-actions {
        margin: 0;
        align-self: center
    }

    .hero-copy > .market-line {
        align-self: end
    }

.hero h1 {
    font-size: clamp(50px,5.15vw,74px);
    line-height: 1.05;
    letter-spacing: -.048em;
    max-width: 720px
}

.hero-image-wrap {
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible
}

    .hero-image-wrap img {
        display: block;
        width: 116%;
        height: 540px;
        max-width: 700px;
        object-fit: contain;
        filter: drop-shadow(0 24px 38px rgba(4,10,30,.3))
    }

.hero-controls {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 69px;
    transform: translateX(-50%);
    height: 42px;
    display: flex;
    align-items: center;
    gap: 14px
}

.hero-slide .market-line {
    transform: none
}

.hero-arrow {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.24);
    background: transparent;
    color: white;
    cursor: pointer
}

    .hero-arrow:hover {
        border-color: var(--mint);
        color: var(--mint)
    }

.hero-dots {
    display: flex;
    gap: 7px
}

    .hero-dots button {
        width: 25px;
        height: 2px;
        padding: 0;
        border: 0;
        background: rgba(255,255,255,.25);
        cursor: pointer
    }

        .hero-dots button.is-active {
            background: var(--mint)
        }

.slide-count {
    font-size: 10px;
    color: #7785a4;
    letter-spacing: .1em
}

    .slide-count b {
        color: white
    }

.hero-next {
    margin-left: 0
}

.trust-strip {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    margin-top: 0
}

@keyframes heroIn {
    from {
        opacity: 0;
        transform: translateX(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(max-width:1000px) {
    .hero {
        height: auto;
        min-height: 0;
        padding-top: 130px
    }

    .hero-slider {
        height: 1020px
    }

    .hero-slide {
        inset: 0 0 84px
    }

        .hero-slide .hero-grid {
            height: 920px;
            min-height: 920px;
            grid-template-rows: 420px 500px
        }

        .hero-slide .hero-grid {
            grid-template-columns: 1fr;
            gap: 0
        }

    .hero-copy {
        align-self: start
    }

    .hero-copy {
        height: 420px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start
    }

        .hero-copy > .eyebrow, .hero-copy > h1, .hero-copy > .hero-intro, .hero-copy > .hero-actions, .hero-copy > .market-line {
            align-self: initial
        }

        .hero-copy > h1 {
            margin: 25px 0
        }

        .hero-copy > .hero-actions {
            margin: 34px 0 42px
        }

        .hero-copy > .market-line {
            margin-top: auto
        }

    .hero-image-wrap {
        height: 500px
    }

        .hero-image-wrap img {
            height: 470px;
            max-width: 660px
        }

    .hero-controls {
        bottom: 22px
    }

    .hero-slide .market-line {
        transform: none
    }

    .trust-strip {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none
    }
}

@media(max-width:760px) {
    .brand span {
        font-size: 6px;
        letter-spacing: .06em
    }

    .hero {
        padding-top: 105px
    }

    .hero-slider {
        height: 900px
    }

    .hero-slide {
        inset: 0 0 72px
    }

        .hero-slide .hero-grid {
            height: 810px;
            min-height: 810px;
            display: grid;
            grid-template-rows: 490px 320px;
            gap: 0
        }

    .hero h1 {
        font-size: 43px
    }

    .hero-copy {
        height: 490px
    }

        .hero-copy > .hero-actions {
            margin: 26px 0 30px
        }

    .hero-image-wrap {
        height: 320px !important;
        transform: none !important;
        margin: 0 !important
    }

        .hero-image-wrap img {
            height: 310px;
            width: 106%;
            max-width: none
        }

    .hero-controls {
        bottom: 16px
    }
}

@media(max-width:420px) {
    .hero-slider {
        height: 940px
    }

    .hero-slide .hero-grid {
        height: 850px;
        min-height: 850px;
        grid-template-rows: 540px 310px
    }

    .hero h1 {
        font-size: 39px
    }

    .hero-image-wrap, .hero-image-wrap img {
        height: 300px !important
    }
}

/* Home slider: keep all three mobile slides on one shared vertical rhythm. */
@media(max-width:760px) {
    .hero-slider {
        height: 1010px
    }

    .hero-slide {
        inset: 0 0 72px
    }

        .hero-slide .hero-grid {
            height: 920px;
            min-height: 920px;
            grid-template-rows: 610px 310px
        }

    .hero-copy {
        height: 610px;
        min-height: 610px;
        padding-top: 0;
        justify-content: flex-start
    }

        .hero-copy > .eyebrow {
            flex: 0 0 auto
        }

        .hero-copy > h1 {
            flex: 0 0 auto;
            margin: 20px 0 22px
        }

        .hero-copy > .hero-intro {
            flex: 0 0 auto
        }

        .hero-copy > .hero-actions {
            flex: 0 0 auto;
            margin: 26px 0 28px
        }

        .hero-copy > .market-line {
            margin-top: auto;
            margin-bottom: 16px
        }

    .hero-image-wrap {
        height: 310px !important;
        align-self: center
    }

        .hero-image-wrap img {
            width: 100%;
            height: 300px;
            max-height: 300px;
            object-fit: contain;
            object-position: center
        }

    .hero-controls {
        bottom: 15px
    }
}

@media(max-width:420px) {
    .hero-slider {
        height: 1040px
    }

    .hero-slide .hero-grid {
        height: 950px;
        min-height: 950px;
        grid-template-rows: 650px 300px
    }

    .hero-copy {
        height: 650px;
        min-height: 650px
    }

    .hero-image-wrap,
    .hero-image-wrap img {
        height: 290px !important;
        max-height: 290px
    }
}

/* Expanded global corporate footer */
.site-footer {
    background: #0b1228;
    color: #a8b2c9;
    padding: 76px 0 26px;
    position: relative;
    overflow: hidden
}

    .site-footer:before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -210px;
        top: -235px;
        border: 1px solid rgba(137,225,213,.08);
        border-radius: 50%;
        box-shadow: 0 0 0 75px rgba(137,225,213,.025),0 0 0 150px rgba(137,225,213,.018)
    }

.footer-main {
    display: grid;
    grid-template-columns: 1.55fr repeat(4,1fr);
    gap: 45px;
    position: relative
}

.footer-brand img {
    display: block;
    width: 168px;
    height: auto;
    filter: brightness(0) invert(1)
}

.footer-tagline {
    margin: 18px 0 16px;
    color: #eef2fb;
    font: 600 17px/1.45 var(--heading)
}

.footer-summary {
    max-width: 280px;
    margin: 0 0 23px;
    color: #8490a9;
    font-size: 12px;
    line-height: 1.75
}

.footer-conversation {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--mint);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none
}

    .footer-conversation span {
        font-size: 16px
    }

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px
}

    .footer-column h2, .footer-presence h3 {
        margin: 3px 0 12px;
        color: #eef2fb;
        font: 700 11px var(--heading);
        letter-spacing: .13em;
        text-transform: uppercase
    }

    .footer-column a {
        color: #aeb8cc;
        text-decoration: none;
        font-size: 12px;
        line-height: 1.55;
        transition: color .2s,transform .2s
    }

        .footer-column a:hover, .footer-column a:focus-visible {
            color: var(--mint);
            transform: translateX(2px)
        }

    .footer-column .footer-email {
        color: var(--mint);
        font-weight: 600
    }

.footer-presence {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid rgba(255,255,255,.09);
    width: 100%
}

    .footer-presence h3 {
        margin: 0 0 5px;
        color: #77849f;
        font-size: 8px
    }

    .footer-presence span {
        font-size: 10px;
        color: #8f9ab1
    }

.footer-network {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 42px;
    margin-top: 55px;
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1)
}

    .footer-network > span {
        color: var(--mint);
        font: 600 11px/1.6 var(--heading);
        letter-spacing: .09em;
        text-transform: uppercase
    }

    .footer-network p {
        max-width: 780px;
        margin: 0;
        color: #7e8aa3;
        font-size: 11px;
        line-height: 1.75
    }

    .footer-network strong {
        color: #bfc8da;
        font-weight: 600
    }

.site-footer .footer-bottom {
    margin-top: 0;
    padding-top: 24px;
    border-top: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 35px;
    color: #6f7b94;
    font-size: 10px
}

.footer-legal {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px
}

.site-footer .footer-bottom a {
    color: #9ba6ba;
    text-decoration: none
}

    .site-footer .footer-bottom a:hover, .site-footer .footer-bottom a:focus-visible {
        color: var(--mint)
    }

.back-to-top {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap
}

    .back-to-top span {
        display: grid;
        place-items: center;
        width: 25px;
        height: 25px;
        border: 1px solid rgba(255,255,255,.16);
        color: var(--mint)
    }

@media(max-width:1050px) {
    .footer-main {
        grid-template-columns: 1.4fr repeat(3,1fr)
    }

    .footer-connect {
        grid-column: 2/-1;
        display: grid;
        grid-template-columns: repeat(3,max-content);
        column-gap: 28px;
        align-items: start
    }

        .footer-connect h2 {
            grid-column: 1/-1
        }

        .footer-connect .footer-presence {
            grid-column: 1/-1
        }
}

@media(max-width:760px) {
    .site-footer {
        padding-top: 58px
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 38px 28px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-summary {
        max-width: 480px
    }

    .footer-connect {
        grid-column: 1/-1;
        display: flex
    }

    .footer-network {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 42px
    }

    .site-footer .footer-bottom {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .footer-legal {
        justify-content: flex-start;
        gap: 12px 18px
    }
}

@media(max-width:460px) {
    .footer-main {
        grid-template-columns: 1fr
    }

    .footer-brand {
        grid-column: auto
    }

    .footer-column {
        padding-top: 22px;
        border-top: 1px solid rgba(255,255,255,.08)
    }

    .footer-connect {
        grid-column: auto
    }
}

/* Capability-led lower page and footer */
.delivery-proof {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 34px;
    color: #dce4f5;
    font: 600 10px var(--heading);
    letter-spacing: .08em;
    text-transform: uppercase
}

    .delivery-proof i {
        color: var(--mint);
        font-style: normal
    }

    .delivery-proof span {
        padding: 10px 12px;
        border: 1px solid rgba(255,255,255,.14)
    }

.site-footer {
    padding-top: 0
}

.footer-focus {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 100px;
    align-items: end;
    padding: 82px 0 66px;
    border-bottom: 1px solid rgba(255,255,255,.11);
    position: relative
}

    .footer-focus:before {
        content: "";
        position: absolute;
        left: 0;
        top: 82px;
        width: 34px;
        height: 3px;
        background: var(--teal)
    }

.footer-kicker {
    margin: 0 0 27px;
    padding-left: 51px;
    color: var(--mint);
    font: 700 10px var(--heading);
    letter-spacing: .17em;
    text-transform: uppercase
}

.footer-focus h2 {
    margin: 0;
    color: #f5f7fc;
    font-size: clamp(39px,4vw,58px);
    line-height: 1.08;
    letter-spacing: -.045em
}

    .footer-focus h2 em {
        font-style: normal;
        color: var(--mint)
    }

.footer-focus-copy p {
    max-width: 520px;
    margin: 0 0 27px;
    color: #9aa6bd;
    font-size: 14px;
    line-height: 1.75
}

.footer-main {
    padding-top: 62px;
    grid-template-columns: 1.35fr repeat(4,1fr)
}

.footer-signal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 54px;
    padding: 22px 0;
    border-top: 1px solid rgba(255,255,255,.09);
    border-bottom: 1px solid rgba(255,255,255,.09);
    color: #8f9bb2;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase
}

    .footer-signal i {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--teal)
    }

.site-footer .footer-bottom {
    padding-top: 25px
}

@media(max-width:1000px) {
    .footer-focus {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .footer-main {
        grid-template-columns: 1.35fr repeat(2,1fr)
    }
}

@media(max-width:760px) {
    .footer-focus {
        padding: 62px 0 50px
    }

        .footer-focus:before {
            top: 62px
        }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        padding-top: 48px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-signal {
        justify-content: flex-start
    }
}

@media(max-width:460px) {
    .footer-main {
        grid-template-columns: 1fr
    }

    .footer-brand {
        grid-column: auto
    }
}

/* Footer office directory */
.footer-offices-compact {
    padding-top: 62px;
}

.footer-offices-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.footer-offices-heading h2,
.footer-office h2 {
    margin: 0;
    color: #eef2fb;
    font: 700 11px var(--heading);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.footer-offices-heading p {
    margin: 0;
    color: #8490a9;
    font-size: 12px;
}

.footer-offices-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
}

.footer-office {
    min-width: 0;
    padding: 0 24px;
}

.footer-office:first-child {
    padding-left: 0;
}

.footer-office:last-child {
    padding-right: 0;
}

.footer-office + .footer-office {
    border-left: 1px solid rgba(255,255,255,.12);
}

.footer-office h2 {
    margin-bottom: 18px;
}

.footer-office address {
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #aeb8cc;
    font-size: 11px;
    font-style: normal;
    line-height: 1.65;
}

.footer-office-address {
    display: block;
    min-height: 72px;
    color: #aeb8cc;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.footer-contact a,
.footer-office > address > .footer-whatsapp,
.footer-office .footer-email,
.footer-contact-pending {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    color: #aeb8cc;
    font-size: 11px;
    line-height: 1.45;
    text-decoration: none;
}

.footer-contact b,
.footer-office > address > .footer-whatsapp b,
.footer-office .footer-email b,
.footer-contact-pending b {
    color: #dbe2ef;
    font-weight: 600;
}

.footer-office .footer-whatsapp {
    color: #6fe1bd;
}

.footer-office .footer-email {
    color: #8fded2;
    overflow-wrap: anywhere;
}

.footer-contact-icon {
    display: inline-block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.footer-contact a[href^="tel:"] .footer-contact-icon,
.footer-contact-pending .footer-contact-icon {
    color: #aeb8cc;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.299c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.46L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.547-2.19a.678.678 0 0 0-.122-.58z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.299c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.46L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.547-2.19a.678.678 0 0 0-.122-.58z'/%3E%3C/svg%3E");
}

.footer-whatsapp .footer-contact-icon {
    color: #6fe1bd;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.068 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.93 7.93 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.926-7.926a7.9 7.9 0 0 0-2.323-5.61zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.495.654.666-2.433-.156-.251a6.6 6.6 0 1 1 5.581 3.094m3.617-4.934c-.198-.099-1.171-.578-1.353-.646-.182-.066-.314-.099-.445.099-.132.198-.513.646-.629.778-.116.132-.231.149-.429.05-.198-.1-.836-.308-1.592-.984-.588-.524-.985-1.17-1.101-1.369-.116-.198-.012-.305.087-.404.089-.088.198-.231.297-.347.1-.116.132-.198.198-.33.066-.132.033-.248-.017-.347-.05-.099-.445-1.073-.61-1.47-.16-.389-.323-.336-.445-.342l-.379-.006a.73.73 0 0 0-.528.248c-.182.198-.693.677-.693 1.651s.71 1.915.809 2.047c.099.132 1.397 2.132 3.383 2.992.472.203.841.324 1.129.415.474.151.906.13 1.247.079.38-.057 1.171-.479 1.337-.943.165-.462.165-.858.116-.94-.05-.083-.182-.132-.38-.231'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.068 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.93 7.93 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.926-7.926a7.9 7.9 0 0 0-2.323-5.61zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.495.654.666-2.433-.156-.251a6.6 6.6 0 1 1 5.581 3.094m3.617-4.934c-.198-.099-1.171-.578-1.353-.646-.182-.066-.314-.099-.445.099-.132.198-.513.646-.629.778-.116.132-.231.149-.429.05-.198-.1-.836-.308-1.592-.984-.588-.524-.985-1.17-1.101-1.369-.116-.198-.012-.305.087-.404.089-.088.198-.231.297-.347.1-.116.132-.198.198-.33.066-.132.033-.248-.017-.347-.05-.099-.445-1.073-.61-1.47-.16-.389-.323-.336-.445-.342l-.379-.006a.73.73 0 0 0-.528.248c-.182.198-.693.677-.693 1.651s.71 1.915.809 2.047c.099.132 1.397 2.132 3.383 2.992.472.203.841.324 1.129.415.474.151.906.13 1.247.079.38-.057 1.171-.479 1.337-.943.165-.462.165-.858.116-.94-.05-.083-.182-.132-.38-.231'/%3E%3C/svg%3E");
}

.footer-email .footer-contact-icon {
    color: #8fded2;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-.894.553L8 7.382l6.894-3.829A1 1 0 0 0 14 3zm13 1.697-4.97 2.761L15 10.546zm-.034 6.995-5.83-3.237L8 9.086 6.864 8.454l-5.83 3.237A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-1.309zM1 10.546l4.97-3.088L1 4.697z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-.894.553L8 7.382l6.894-3.829A1 1 0 0 0 14 3zm13 1.697-4.97 2.761L15 10.546zm-.034 6.995-5.83-3.237L8 9.086 6.864 8.454l-5.83 3.237A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-1.309zM1 10.546l4.97-3.088L1 4.697z'/%3E%3C/svg%3E");
}

.footer-office a:hover,
.footer-office a:focus-visible {
    color: var(--mint);
}

@media(max-width:1100px) {
    .footer-offices-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
        row-gap: 36px;
    }

    .footer-office:nth-child(4) {
        border-left: 0;
        padding-left: 0;
    }
}

@media(max-width:760px) {
    .footer-offices-heading {
        display: block;
    }

    .footer-offices-heading p {
        margin-top: 10px;
        line-height: 1.65;
    }

    .footer-offices-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-office,
    .footer-office:first-child,
    .footer-office:last-child,
    .footer-office:nth-child(4) {
        padding: 0 20px;
    }

    .footer-office:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .footer-office-address {
        min-height: 0;
    }
}

@media(max-width:520px) {
    .footer-offices-grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .footer-office,
    .footer-office:first-child,
    .footer-office:last-child,
    .footer-office:nth-child(4) {
        padding: 25px 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.1);
    }

    .footer-office:first-child {
        padding-top: 0;
        border-top: 0;
    }
}

/* Capability-led primary navigation */
.desktop-nav {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    gap: 1px;
    margin-left: auto;
    margin-right: 14px
}

    .desktop-nav > a.nav-home {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        align-self: stretch;
        color: #e5e9f5;
        text-decoration: none;
        font-size: 17px;
        position: relative;
        padding: 0 7px
    }

        .desktop-nav > a.nav-home b {
            font: 600 12px var(--body)
        }

        .desktop-nav > a.nav-home:after {
            content: "";
            position: absolute;
            left: 7px;
            right: 7px;
            bottom: 0;
            height: 2px;
            background: var(--mint);
            transform: scaleX(0);
            transition: transform .2s
        }

        .desktop-nav > a.nav-home:hover {
            color: var(--mint)
        }

            .desktop-nav > a.nav-home:hover:after, .desktop-nav > a.nav-home:focus:after {
                transform: scaleX(1)
            }

.nav-item {
    position: relative;
    display: flex;
    align-items: center
}

.nav-trigger {
    height: 100%;
    padding: 0 9px;
    border: 0;
    background: transparent;
    color: #e5e9f5;
    font: 600 12px var(--body);
    cursor: pointer
}

    .nav-trigger > span {
        display: inline-block;
        margin-left: 3px;
        color: #7f8eac;
        font-size: 10px;
        transition: transform .2s
    }

.nav-item:hover .nav-trigger, .nav-item:focus-within .nav-trigger, .nav-item.is-open .nav-trigger {
    color: var(--mint)
}

    .nav-item:hover .nav-trigger > span, .nav-item:focus-within .nav-trigger > span, .nav-item.is-open .nav-trigger > span {
        transform: rotate(180deg)
    }

.nav-item:after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 0;
    height: 2px;
    background: var(--mint);
    transform: scaleX(0);
    transition: transform .2s
}

.nav-item:hover:after, .nav-item:focus-within:after, .nav-item.is-open:after {
    transform: scaleX(1)
}

.nav-dropdown {
    position: absolute;
    z-index: 30;
    top: calc(100% + 1px);
    left: 0;
    width: 350px;
    padding: 23px;
    background: #fff;
    color: var(--ink);
    border-top: 3px solid var(--teal);
    box-shadow: 0 24px 55px rgba(4,12,34,.24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .2s,transform .2s,visibility .2s
}

.nav-item:hover > .nav-dropdown, .nav-item:focus-within > .nav-dropdown, .nav-item.is-open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none
}

.nav-align-right {
    left: auto;
    right: 0
}

.nav-caption {
    margin: 0 0 13px;
    color: #77839c;
    font: 700 9px var(--heading);
    letter-spacing: .16em;
    text-transform: uppercase
}

.nav-dropdown-small > a {
    display: block;
    padding: 11px 0;
    border-top: 1px solid #edf0f5;
    color: var(--ink);
    text-decoration: none
}

    .nav-dropdown-small > a strong {
        display: block;
        font: 700 13px var(--heading)
    }

    .nav-dropdown-small > a small {
        display: block;
        margin-top: 3px;
        color: #748098;
        font-size: 10px;
        line-height: 1.45
    }

.nav-dropdown a:hover strong {
    color: var(--blue)
}

.nav-mega {
    position: fixed;
    top: 85px;
    left: 50%;
    width: min(1120px,calc(100% - 48px));
    transform: translate(-50%,10px);
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 42px;
    padding: 32px 36px
}

.nav-item:hover > .nav-mega, .nav-item:focus-within > .nav-mega, .nav-item.is-open > .nav-mega {
    transform: translate(-50%,0)
}

.nav-intro {
    padding-right: 30px;
    border-right: 1px solid #e2e6ee
}

    .nav-intro h2 {
        margin: 0 0 22px;
        font-size: 22px;
        line-height: 1.35;
        letter-spacing: -.025em
    }

    .nav-intro > a {
        color: var(--blue);
        font-size: 11px;
        font-weight: 700;
        text-decoration: none
    }

.nav-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px
}

    .nav-link-grid > a {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 10px;
        padding: 12px 0;
        border-top: 1px solid #e7eaf0;
        color: var(--ink);
        text-decoration: none
    }

        .nav-link-grid > a > b {
            color: var(--teal);
            font: 700 9px var(--heading)
        }

    .nav-link-grid span, .nav-link-grid strong, .nav-link-grid small {
        display: block
    }

    .nav-link-grid strong {
        font: 700 13px var(--heading)
    }

    .nav-link-grid small {
        margin-top: 3px;
        color: #748098;
        font-size: 10px;
        line-height: 1.45
    }

@media(max-width:1120px) {
    .desktop-nav {
        display: none
    }

    .menu-button {
        display: flex;
        width: 42px;
        height: 42px;
        background: transparent;
        border: 1px solid rgba(255,255,255,.25);
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 10px
    }

        .menu-button span {
            display: block;
            height: 1px;
            background: white
        }

    .mobile-panel.open {
        display: block;
        position: absolute;
        top: 84px;
        width: 100%;
        max-height: calc(100vh - 84px);
        overflow-y: auto;
        background: #101936;
        padding: 14px 24px 24px;
        border-top: 1px solid rgba(255,255,255,.1)
    }

    .mobile-home {
        display: block !important;
        padding: 15px 4px !important;
        border-bottom: 1px solid rgba(255,255,255,.1) !important;
        color: #fff !important;
        font: 700 14px var(--heading);
        text-decoration: none
    }

    .mobile-menu-group {
        border-bottom: 1px solid rgba(255,255,255,.1)
    }

        .mobile-menu-group > button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 15px 4px;
            border: 0;
            background: transparent;
            color: #fff;
            font: 700 14px var(--heading);
            text-align: left
        }

            .mobile-menu-group > button span {
                color: var(--mint);
                font-size: 20px;
                font-weight: 400;
                transition: transform .2s
            }

        .mobile-menu-group.open > button span {
            transform: rotate(45deg)
        }

        .mobile-menu-group > div {
            display: none;
            padding: 0 0 12px 14px
        }

        .mobile-menu-group.open > div {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2px 20px
        }

    .mobile-panel .mobile-menu-group a {
        color: #aeb9d0;
        text-decoration: none;
        padding: 7px 0;
        border: 0;
        font-size: 12px
    }

    .mobile-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 18px;
        padding: 13px 15px !important;
        background: var(--mint);
        color: var(--ink) !important;
        font-weight: 700;
        text-decoration: none
    }
}

/* Reusable inner-page masthead and breadcrumb. Pages opt in with ViewData["ShowPageHero"]. */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: 154px 0 78px;
    background: #202633;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

    .page-hero:after {
        content: "";
        position: absolute;
        right: -140px;
        bottom: -250px;
        width: 520px;
        height: 520px;
        border: 1px solid rgba(137,225,213,.12);
        border-radius: 50%;
        box-shadow: 0 0 0 75px rgba(137,225,213,.025),0 0 0 150px rgba(137,225,213,.018)
    }

.page-hero-glow {
    position: absolute;
    left: 54%;
    top: 20%;
    width: 360px;
    height: 220px;
    background: radial-gradient(circle,rgba(43,101,255,.18),transparent 68%);
    filter: blur(12px);
    pointer-events: none
}

.page-hero-inner {
    position: relative;
    z-index: 1
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 34px;
    color: #8793aa;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase
}

    .breadcrumb a {
        color: var(--mint);
        text-decoration: none
    }

        .breadcrumb a:hover, .breadcrumb a:focus-visible {
            color: #fff
        }

.page-hero h1 {
    max-width: 880px;
    margin: 18px 0 0;
    font: 700 clamp(42px,6vw,76px)/1.03 var(--heading);
    letter-spacing: -.05em
}

.page-hero-summary {
    max-width: 720px;
    margin: 28px 0 0;
    color: #aeb8cb;
    font-size: 17px;
    line-height: 1.75
}

@media(max-width:760px) {
    .page-hero {
        padding: 118px 0 58px
    }

    .breadcrumb {
        margin-bottom: 25px
    }

    .page-hero-summary {
        font-size: 15px
    }
}

@media(max-width:760px) {
    .mobile-panel.open {
        top: 72px;
        max-height: calc(100vh - 72px)
    }
}

@media(max-width:560px) {
    .mobile-menu-group.open > div {
        grid-template-columns: 1fr
    }
}

/* Premium content narrative */
.intro {
    position: relative;
    overflow: hidden
}

    .intro:before {
        content: "";
        position: absolute;
        right: 18px;
        top: 28px;
        width: 180px;
        height: 180px;
        background: url('/assets/brand/toqxcel-mark.png') center/contain no-repeat;
        opacity: .045;
        pointer-events: none
    }

.intro-grid, .value-grid {
    position: relative;
    z-index: 1
}

.value-card {
    transition: background .25s,transform .25s
}

    .value-card:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -1px;
        height: 3px;
        background: linear-gradient(90deg,var(--blue),var(--teal));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s
    }

    .value-card:hover {
        background: #f8faff;
        transform: translateY(-4px)
    }

        .value-card:hover:before {
            transform: scaleX(1)
        }

    .value-card h3 {
        font-size: 19px;
        letter-spacing: -.02em
    }

    .value-card p {
        line-height: 1.65
    }

.solutions {
    position: relative;
    background: linear-gradient(145deg,#0c1532 0%,#101c42 58%,#0d1735 100%)
}

    .solutions:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
        background-size: 52px 52px;
        pointer-events: none
    }

    .solutions > .container {
        position: relative
    }

.solution-card {
    transition: transform .3s,border-color .3s,background .3s
}

    .solution-card:hover {
        transform: translateY(-5px);
        border-color: rgba(137,225,213,.35);
        background: #1d2b57
    }

    .solution-card.feature:hover {
        background: linear-gradient(145deg,#27408c,#1a2a5c)
    }

    .solution-card h3 {
        letter-spacing: -.025em
    }

/* Transformation momentum canvas */
.momentum-stage {
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr);
    min-height: 690px;
    margin-top: 58px;
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(12,22,51,.72);
    box-shadow: 0 38px 90px rgba(2,7,22,.28);
    overflow: hidden;
    position: relative
}

    .momentum-stage:before {
        content: "ENTERPRISE / MOMENTUM";
        position: absolute;
        right: -20px;
        top: 15px;
        color: rgba(255,255,255,.025);
        font: 800 76px/1 var(--heading);
        letter-spacing: -.06em;
        white-space: nowrap;
        pointer-events: none
    }

.momentum-feature {
    display: grid;
    grid-template-rows: 390px 1fr;
    min-width: 0;
    background: linear-gradient(155deg,rgba(48,82,184,.58),rgba(22,38,83,.78));
    border-right: 1px solid rgba(255,255,255,.13);
    position: relative;
    overflow: hidden
}

    .momentum-feature:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,rgba(137,225,213,.09),transparent 38%);
        pointer-events: none
    }

.momentum-visual {
    position: relative;
    overflow: hidden;
    background: #071532;
    isolation: isolate
}

    .momentum-visual:before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(90deg,rgba(7,15,39,.16),transparent 30%,transparent 75%,rgba(7,15,39,.12)),linear-gradient(0deg,rgba(7,15,39,.48),transparent 32%);
        pointer-events: none
    }

    .momentum-visual:after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 38%;
        z-index: 1;
        background: linear-gradient(0deg,rgba(12,27,66,.9),transparent);
        pointer-events: none
    }

    .momentum-visual > img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center;
        transform: scale(1.015);
        transition: transform .8s cubic-bezier(.2,.7,.2,1);
        filter: saturate(1.06) contrast(1.04)
    }

.momentum-feature:hover .momentum-visual > img {
    transform: scale(1.035)
}

.visual-direction {
    position: absolute;
    z-index: 3;
    left: 7%;
    right: 7%;
    bottom: 20px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    color: #cbd5e9;
    font: 700 8px var(--heading);
    letter-spacing: .12em;
    text-transform: uppercase
}

    .visual-direction i {
        height: 1px;
        background: linear-gradient(90deg,rgba(137,225,213,.28),var(--mint));
        position: relative
    }

        .visual-direction i:after {
            content: "";
            position: absolute;
            right: 0;
            top: -3px;
            width: 7px;
            height: 7px;
            border-top: 1px solid var(--mint);
            border-right: 1px solid var(--mint);
            transform: rotate(45deg)
        }

    .visual-direction strong {
        color: var(--mint);
        font: inherit
    }

.momentum-feature-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 42px 46px 40px;
    position: relative;
    z-index: 2
}

    .momentum-feature-copy h3 {
        max-width: 500px;
        margin: 15px 0 14px;
        font-size: clamp(28px,2.25vw,38px);
        line-height: 1.17;
        letter-spacing: -.04em
    }

    .momentum-feature-copy p {
        max-width: 500px;
        margin: 0;
        color: #b1bdd4;
        font-size: 13px;
        line-height: 1.7
    }

    .momentum-feature-copy a, .momentum-path a {
        margin-top: auto;
        color: var(--mint);
        text-decoration: none;
        font-size: 11px;
        font-weight: 700
    }

        .momentum-feature-copy a span, .momentum-path a span {
            margin-left: 10px;
            transition: transform .2s;
            display: inline-block
        }

        .momentum-feature-copy a:hover span, .momentum-path a:hover span {
            transform: translate(3px,-3px)
        }

.momentum-paths {
    display: grid;
    grid-template-rows: repeat(3,1fr);
    position: relative
}

    .momentum-paths:before {
        content: "";
        position: absolute;
        left: 42px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(transparent,var(--teal) 12%,var(--teal) 88%,transparent);
        opacity: .38
    }

.momentum-path {
    display: grid;
    grid-template-columns: 62px minmax(0,1fr) 94px;
    gap: 16px;
    align-items: center;
    min-height: 0;
    padding: 30px 28px 30px 20px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    position: relative;
    transition: background .25s
}

    .momentum-path:last-child {
        border-bottom: 0
    }

    .momentum-path:hover {
        background: rgba(55,82,157,.18)
    }

.path-number {
    align-self: start;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: 2px;
    border-radius: 50%;
    background: #101c40;
    border: 1px solid rgba(137,225,213,.4);
    color: var(--mint);
    font: 700 10px var(--heading);
    position: relative;
    z-index: 2
}

.path-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%
}

    .path-copy h3 {
        max-width: 330px;
        margin: 11px 0 7px;
        font-size: 21px;
        line-height: 1.23;
        letter-spacing: -.025em
    }

    .path-copy p {
        max-width: 350px;
        margin: 0;
        color: #9fabc3;
        font-size: 11px;
        line-height: 1.55
    }

    .path-copy a {
        padding-top: 14px
    }

.path-symbol {
    width: 78px;
    height: 78px;
    position: relative;
    opacity: .72;
    transition: opacity .25s,transform .25s
}

.momentum-path:hover .path-symbol {
    opacity: 1;
    transform: scale(1.06)
}

.network-symbol i {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--mint);
    border-radius: 50%
}

    .network-symbol i:nth-child(1) {
        left: 3px;
        top: 34px
    }

    .network-symbol i:nth-child(2) {
        left: 33px;
        top: 4px
    }

    .network-symbol i:nth-child(3) {
        right: 3px;
        top: 34px
    }

    .network-symbol i:nth-child(4) {
        left: 33px;
        bottom: 4px
    }

.network-symbol b {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: 12px;
    border: 1px solid rgba(137,225,213,.55);
    transform: rotate(45deg)
}

.core-symbol i {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(137,225,213,.55);
    transform: rotate(45deg)
}

    .core-symbol i:nth-child(2) {
        inset: 21px;
        border-color: var(--teal)
    }

    .core-symbol i:nth-child(3) {
        inset: 32px;
        background: var(--mint);
        border: 0;
        box-shadow: 0 0 18px rgba(137,225,213,.4)
    }

.insight-symbol {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 6px;
    padding: 12px
}

    .insight-symbol:before {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        top: 17px;
        height: 1px;
        background: linear-gradient(90deg,transparent,var(--mint),transparent);
        transform: rotate(-19deg)
    }

    .insight-symbol i {
        width: 6px;
        background: linear-gradient(var(--mint),var(--blue))
    }

        .insight-symbol i:nth-child(1) {
            height: 17px
        }

        .insight-symbol i:nth-child(2) {
            height: 28px
        }

        .insight-symbol i:nth-child(3) {
            height: 23px
        }

        .insight-symbol i:nth-child(4) {
            height: 43px
        }

        .insight-symbol i:nth-child(5) {
            height: 53px
        }

.capability-ticker {
    padding: 19px 24px;
    border: 1px solid rgba(255,255,255,.1);
    border-top: 0;
    margin-top: 0;
    background: rgba(7,15,37,.48)
}

@media(max-width:1000px) {
    .momentum-stage {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .momentum-feature {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.13)
    }

    .momentum-path {
        min-height: 220px
    }

    .momentum-paths:before {
        left: 42px
    }
}

@media(max-width:620px) {
    .momentum-stage {
        margin-top: 38px
    }

    .momentum-feature {
        grid-template-rows: 300px auto
    }

    .momentum-feature-copy {
        min-height: 385px;
        padding: 34px 28px
    }

        .momentum-feature-copy h3 {
            font-size: 29px
        }

    .momentum-path {
        grid-template-columns: 48px 1fr;
        padding: 27px 20px 27px 14px;
        min-height: 245px
    }

    .momentum-paths:before {
        left: 35px
    }

    .path-number {
        width: 42px;
        height: 42px
    }

    .path-symbol {
        display: none
    }

    .path-copy h3 {
        font-size: 20px
    }

    .momentum-stage:before {
        font-size: 48px
    }

    .visual-direction {
        left: 4%;
        right: 4%;
        gap: 8px;
        font-size: 6px
    }

    .momentum-visual > img {
        object-position: 55% center;
        transform: scale(1.1)
    }
}

.solution-index {
    color: var(--mint)
}

.industries-copy h2 {
    max-width: 510px
}

.industry-list div {
    transition: padding .25s,background .25s
}

    .industry-list div:hover {
        padding-left: 18px;
        padding-right: 18px;
        background: #fff
    }

        .industry-list div:hover h3 {
            color: var(--blue)
        }

.delivery {
    position: relative;
    overflow: hidden;
    background: linear-gradient(125deg,#0c1530,#172752)
}

    .delivery:after {
        content: "";
        position: absolute;
        width: 460px;
        height: 460px;
        border: 1px solid rgba(137,225,213,.1);
        border-radius: 50%;
        right: -230px;
        top: -180px;
        box-shadow: 0 0 0 70px rgba(137,225,213,.018),0 0 0 140px rgba(137,225,213,.012)
    }

.delivery-grid {
    position: relative;
    z-index: 1
}

.delivery-steps li {
    transition: background .25s,padding-left .25s
}

    .delivery-steps li:hover {
        background: rgba(137,225,213,.055);
        padding-left: 30px
    }

.contact-card {
    box-shadow: 0 30px 70px rgba(16,25,54,.16)
}

    /* Premium closing-panel motion: a single staged entrance, followed by calm ambient movement. */
    .contact-card:before, .contact-card:after {
        content: "";
        position: absolute;
        pointer-events: none;
        border-radius: 50%;
        z-index: 0
    }

    .contact-card:before {
        width: 320px;
        height: 320px;
        right: 18%;
        top: -235px;
        border: 1px solid rgba(137,225,213,.2);
        box-shadow: 0 0 0 58px rgba(137,225,213,.025),0 0 0 116px rgba(137,225,213,.018);
        opacity: 0;
        transform: scale(.7)
    }

    .contact-card:after {
        width: 210px;
        height: 210px;
        left: -145px;
        bottom: -150px;
        background: radial-gradient(circle,rgba(137,225,213,.2),rgba(137,225,213,0) 68%);
        opacity: 0;
        transform: translate(-18px,18px)
    }

    .contact-card > div, .contact-card > .button {
        position: relative;
        z-index: 2
    }

    .contact-card > div {
        opacity: 0;
        transform: translateY(18px)
    }

    .contact-card > .button {
        opacity: 0;
        transform: translateX(18px)
    }

    .contact-card.visible > div {
        animation: contact-copy-in .75s cubic-bezier(.2,.75,.2,1) .08s both
    }

    .contact-card.visible > .button {
        animation: contact-action-in .7s cubic-bezier(.2,.75,.2,1) .3s both
    }

    .contact-card.visible:before {
        animation: contact-orbit-in 1s cubic-bezier(.2,.75,.2,1) .18s both,contact-orbit-drift 11s ease-in-out 1.2s infinite alternate
    }

    .contact-card.visible:after {
        animation: contact-glow-in 1.1s ease-out .25s both,contact-glow-drift 9s ease-in-out 1.3s infinite alternate
    }

    .contact-card.visible .contact-watermark {
        animation: contact-mark-in 1s cubic-bezier(.2,.75,.2,1) .15s both,contact-mark-drift 10s ease-in-out 1.2s infinite alternate
    }

    .contact-card .button-light span {
        transition: transform .25s ease
    }

    .contact-card .button-light:hover span {
        transform: translate(4px,-4px)
    }

@keyframes contact-copy-in {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes contact-action-in {
    from {
        opacity: 0;
        transform: translateX(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes contact-orbit-in {
    from {
        opacity: 0;
        transform: scale(.7)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes contact-orbit-drift {
    to {
        transform: translate(14px,10px) scale(1.04)
    }
}

@keyframes contact-glow-in {
    from {
        opacity: 0;
        transform: translate(-18px,18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes contact-glow-drift {
    to {
        transform: translate(18px,-8px) scale(1.08)
    }
}

@keyframes contact-mark-in {
    from {
        opacity: 0;
        transform: translateX(35px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes contact-mark-drift {
    to {
        transform: translateX(-12px)
    }
}

/* Keep the closing conversation panel visually connected to adjacent sections. */
.contact.section {
    padding: 28px 0
}

@media(max-width:760px) {
    .intro:before {
        font-size: 110px;
        top: 35px
    }

    .value-card:hover, .solution-card:hover {
        transform: none
    }

    .industry-list div:hover {
        padding-left: 6px;
        padding-right: 6px
    }

    .contact.section {
        padding: 20px 0
    }
}

@media(prefers-reduced-motion:reduce) {
    .contact-card > div, .contact-card > .button {
        opacity: 1;
        transform: none
    }

    .contact-card.visible > div, .contact-card.visible > .button, .contact-card.visible:before, .contact-card.visible:after, .contact-card.visible .contact-watermark {
        animation: none
    }

    .contact-card:before, .contact-card:after {
        opacity: .65;
        transform: none
    }
}

/* Use the supplied light artwork directly so the green check remains intact. */
.brand img,
.footer-brand img {
    filter: none
}

/* Board-review additions: contextual value, evidence and global presence. */
.context-statement {
    position: relative;
    background: linear-gradient(112deg,#111a31 0%,#252b38 55%,#171d2b 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
    overflow: hidden
}

    .context-statement:before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 73% 30%,rgba(49,89,216,.18),transparent 26%),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
        background-size: auto,64px 64px;
        pointer-events: none
    }

    .context-statement:after {
        content: "CONTEXT";
        position: absolute;
        right: -22px;
        bottom: -34px;
        color: rgba(255,255,255,.035);
        font: 800 116px/1 var(--heading);
        letter-spacing: -.06em;
        pointer-events: none
    }

.context-grid {
    display: grid;
    grid-template-columns: .55fr 1.25fr 1fr;
    gap: 58px;
    align-items: center;
    padding: 54px 0;
    position: relative;
    z-index: 1
}

.context-index {
    color: var(--mint);
    font: 700 9px var(--heading);
    letter-spacing: .15em
}

.context-grid h2 {
    margin: 0;
    font-size: clamp(27px,3vw,42px);
    line-height: 1.12;
    letter-spacing: -.04em
}

    .context-grid h2 em {
        font-style: normal;
        color: #7093ff
    }

.context-grid p {
    margin: 0;
    color: #c1c9da;
    font-size: 14px;
    line-height: 1.75;
    border-left: 2px solid var(--teal);
    padding-left: 25px
}

/* Separate the editorial brand-value strip from the main business narrative. */
.intro {
    background: radial-gradient(circle at 84% 16%,rgba(49,89,216,.07),transparent 29%), linear-gradient(180deg,#f5f8fd 0%,#f8faff 52%,#f3f6fb 100%);
    border-top: 1px solid #e5eaf3;
}

    .intro:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: clamp(120px,18vw,360px);
        height: 3px;
        background: linear-gradient(90deg,var(--teal),var(--blue),transparent);
    }

    .intro:before {
        color: rgba(49,89,216,.045)
    }

    .intro .value-grid {
        background: rgba(255,255,255,.68);
        box-shadow: 0 24px 65px rgba(16,25,54,.045)
    }

    .intro .value-card {
        transition: background .25s,transform .25s
    }

        .intro .value-card:hover {
            background: #fff;
            transform: translateY(-4px)
        }

/* Bright visual bridge for light-background sections. */
.advantage-visual {
    position: relative;
    z-index: 1;
    margin-top: 52px;
    margin-bottom: -18px;
    background: #fff;
    border: 1px solid rgba(49,89,216,.1);
    box-shadow: 0 28px 70px rgba(16,25,54,.07);
    overflow: hidden
}

    .advantage-visual:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg,rgba(49,89,216,.035),transparent 28%,transparent 72%,rgba(34,183,170,.035));
        pointer-events: none
    }

    .advantage-visual img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3/1;
        object-fit: cover;
        position: relative;
        z-index: 1;
        transition: transform 1.2s cubic-bezier(.2,.7,.2,1)
    }

    .advantage-visual:hover img {
        transform: scale(1.012)
    }

    .advantage-visual figcaption {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: auto 1fr auto 1fr auto;
        align-items: center;
        gap: 16px;
        margin: 0;
        padding: 14px 24px;
        background: #fff;
        border-top: 1px solid #edf0f6;
        color: #7c879f;
        font: 700 8px var(--heading);
        letter-spacing: .13em;
        text-transform: uppercase
    }

        .advantage-visual figcaption i {
            height: 1px;
            background: linear-gradient(90deg,rgba(49,89,216,.18),var(--teal),rgba(49,89,216,.18))
        }

        .advantage-visual figcaption strong {
            color: var(--blue);
            font: inherit
        }

    .advantage-visual + .value-grid {
        margin-top: 64px
    }

@media(max-width:760px) {
    .advantage-visual {
        margin-top: 38px;
        margin-bottom: -6px
    }

        .advantage-visual img {
            aspect-ratio: 1.6/1;
            object-position: 55% center
        }

        .advantage-visual figcaption {
            grid-template-columns: 1fr;
            gap: 5px;
            padding: 12px 16px;
            text-align: center
        }

            .advantage-visual figcaption i {
                display: none
            }

        .advantage-visual + .value-grid {
            margin-top: 44px
        }
}

.proof {
    position: relative;
    background: #fff;
    overflow: hidden
}

    .proof:before {
        content: "PROOF / ACTIVITY";
        position: absolute;
        left: -20px;
        top: 34px;
        color: #f5f7fb;
        font: 800 105px/1 var(--heading);
        letter-spacing: -.06em;
        white-space: nowrap
    }

    .proof > .container {
        position: relative;
        z-index: 1
    }

.proof-heading {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 90px;
    align-items: end;
    margin-bottom: 52px
}

    .proof-heading h2, .presence-head h2 {
        font-size: clamp(35px,4vw,53px);
        line-height: 1.16;
        letter-spacing: -.04em;
        margin: 20px 0 0
    }

        .proof-heading h2 em, .presence-head h2 em {
            font-style: normal;
            color: var(--blue)
        }

    .proof-heading > p, .presence-head > p {
        margin: 0 0 8px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.75
    }

.proof-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    min-height: 510px;
    border: 1px solid var(--line);
    box-shadow: 0 30px 75px rgba(16,25,54,.09)
}

.proof-feature {
    padding: 52px;
    background: linear-gradient(145deg,#121f48,#203e91);
    color: #fff;
    position: relative;
    overflow: hidden
}

    .proof-feature:after {
        content: "06";
        position: absolute;
        right: -15px;
        bottom: -46px;
        color: rgba(255,255,255,.05);
        font: 800 230px/1 var(--heading)
    }

.proof-type, .proof-card > span {
    color: var(--mint);
    font: 700 9px var(--heading);
    letter-spacing: .15em
}

.proof-feature h3 {
    max-width: 650px;
    margin: 60px 0 18px;
    font-size: clamp(31px,3.2vw,46px);
    line-height: 1.14;
    letter-spacing: -.045em
}

.proof-feature > p {
    max-width: 620px;
    color: #bec9df;
    font-size: 14px;
    line-height: 1.75
}

.proof-feature ul {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    margin: 44px 0 34px;
    padding: 0;
    list-style: none;
    background: rgba(255,255,255,.14)
}

.proof-feature li {
    padding: 18px;
    background: #172959
}

    .proof-feature li b {
        display: block;
        color: #fff;
        font: 700 24px var(--heading)
    }

    .proof-feature li span {
        color: #9facC4;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .08em
    }

.proof-feature a {
    position: relative;
    z-index: 1;
    color: var(--mint);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700
}

.proof-secondary {
    display: grid;
    grid-template-rows: 1fr 1fr
}

.proof-card {
    padding: 42px 38px;
    border-bottom: 1px solid var(--line);
    background: #fafbfe;
    display: flex;
    flex-direction: column
}

    .proof-card:last-child {
        border-bottom: 0
    }

    .proof-card > span {
        color: var(--blue)
    }

    .proof-card h3 {
        margin: 24px 0 12px;
        font-size: 22px;
        line-height: 1.25;
        letter-spacing: -.03em
    }

    .proof-card p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.65
    }

    .proof-card small {
        margin-top: auto;
        color: #8b94a8;
        font-size: 8px;
        letter-spacing: .13em
    }

.industry-list a {
    display: grid;
    grid-template-columns: 50px 1fr 190px 30px;
    align-items: center;
    gap: 20px;
    padding: 25px 6px;
    border-bottom: 1px solid #cdd3df;
    color: var(--ink);
    text-decoration: none;
    transition: padding .25s,background .25s
}

    .industry-list a:hover, .industry-list a:focus-visible {
        padding-left: 18px;
        padding-right: 18px;
        background: #fff;
        outline: none
    }

        .industry-list a:hover h3, .industry-list a:focus-visible h3 {
            color: var(--blue)
        }

    .industry-list a small {
        color: var(--muted);
        font-size: 10px
    }

    .industry-list a > b {
        color: var(--blue);
        font-weight: 400
    }

.presence {
    background: #eef2f8;
    position: relative;
    overflow: hidden
}

    .presence:before {
        content: "05";
        position: absolute;
        right: -12px;
        top: -70px;
        color: #e5eaf3;
        font: 800 290px/1 var(--heading)
    }

.presence-head {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 95px;
    align-items: end;
    position: relative;
    z-index: 1
}

.presence-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    margin-top: 52px;
    border-top: 1px solid #cbd3e1;
    border-bottom: 1px solid #cbd3e1;
    position: relative;
    z-index: 1
}

    .presence-grid article {
        min-height: 250px;
        padding: 24px 22px 28px;
        border-right: 1px solid #cbd3e1;
        position: relative;
        transition: background .25s,transform .25s,box-shadow .25s
    }

        .presence-grid article:last-child {
            border: 0
        }

        .presence-grid article:hover {
            background: #fff;
            transform: translateY(-6px);
            box-shadow: 0 18px 40px rgba(16,25,54,.08)
        }

        .presence-grid article > span {
            position: absolute;
            right: 17px;
            top: 16px;
            color: #a3adbf;
            font-size: 9px
        }

.presence-icon {
    width: 48px;
    height: 48px;
    margin: 5px 0 23px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,#fff,#e8edf7);
    border: 1px solid #d4dbea;
    color: var(--blue);
    box-shadow: 0 10px 24px rgba(16,25,54,.06);
    transition: color .25s,background .25s
}

.presence-grid article:hover .presence-icon {
    color: var(--teal);
    background: #fff
}

.presence-icon svg {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.presence-grid article:first-child .presence-icon svg {
    fill: currentColor;
    stroke: none
}

.presence-grid small {
    color: var(--blue);
    font: 700 8px var(--heading);
    letter-spacing: .14em
}

.presence-grid h3 {
    margin: 16px 0 10px;
    font-size: 24px;
    letter-spacing: -.035em
}

.presence-grid p {
    margin: 0;
    color: #7a8499;
    font-size: 11px;
    line-height: 1.65
}

@media(max-width:1000px) {
    .context-grid {
        grid-template-columns: .4fr 1fr;
        gap: 30px
    }

        .context-grid p {
            grid-column: 2
        }

    .proof-grid {
        grid-template-columns: 1fr
    }

    .proof-secondary {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto
    }

    .proof-card {
        min-height: 265px;
        border-bottom: 0;
        border-right: 1px solid var(--line)
    }

    .presence-grid {
        grid-template-columns: repeat(3,1fr)
    }

        .presence-grid article:nth-child(3) {
            border-right: 0
        }

        .presence-grid article:nth-child(-n+3) {
            border-bottom: 1px solid #cbd3e1
        }
}

@media(max-width:760px) {
    .context-grid, .proof-heading, .presence-head {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .context-grid {
        padding: 42px 0
    }

        .context-grid p {
            grid-column: auto
        }

    .proof-feature {
        padding: 38px 28px
    }

        .proof-feature h3 {
            margin-top: 42px
        }

        .proof-feature ul {
            grid-template-columns: 1fr
        }

    .proof-secondary {
        grid-template-columns: 1fr
    }

    .proof-card {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        min-height: 230px
    }

    .industry-list a {
        grid-template-columns: 36px 1fr 25px;
        padding: 22px 6px
    }

        .industry-list a small {
            display: none
        }

    .presence-grid {
        grid-template-columns: 1fr 1fr
    }

        .presence-grid article, .presence-grid article:nth-child(3) {
            border-right: 1px solid #cbd3e1;
            border-bottom: 1px solid #cbd3e1
        }

            .presence-grid article:nth-child(even) {
                border-right: 0
            }

            .presence-grid article:last-child {
                border-bottom: 0
            }

    .presence:before {
        font-size: 180px
    }
}

/* Board colour option: use the contextual-intelligence charcoal as the
   principal brand surface, with cobalt and mint reserved for energy. */
:root {
    --brand-main: #202633;
    --brand-deep: #111725;
    --brand-raised: #29303f;
    --brand-line: rgba(255,255,255,.12);
}

.hero {
    background: radial-gradient(circle at 78% 36%,rgba(49,89,216,.32) 0,transparent 34%), radial-gradient(circle at 12% 82%,rgba(34,183,170,.10),transparent 28%), linear-gradient(135deg,var(--brand-deep) 0%,var(--brand-main) 58%,#171d2b 100%);
}

.site-header {
    background: rgba(17,23,37,.32);
    backdrop-filter: blur(10px)
}

.nav-dropdown {
    background: var(--brand-main);
    color: #fff;
    border-top-color: var(--mint);
    box-shadow: 0 28px 65px rgba(4,8,18,.36)
}

.nav-caption, .nav-link-grid small {
    color: #aeb8cb
}

.nav-intro h2, .nav-link-grid strong {
    color: #fff
}

.nav-link-grid > a, .nav-dropdown-small > a {
    border-color: var(--brand-line);
    color: #fff
}

.nav-dropdown a:hover strong {
    color: var(--mint)
}

.context-statement {
    background: radial-gradient(circle at 73% 30%,rgba(49,89,216,.24),transparent 28%), linear-gradient(112deg,var(--brand-deep) 0%,var(--brand-main) 55%,#171d2b 100%);
}

.context-grid h2 em {
    color: #82a0ff
}

.intro {
    background: radial-gradient(circle at 84% 16%,rgba(49,89,216,.08),transparent 29%), linear-gradient(180deg,#f7f8fb 0%,#fff 56%,#f2f4f8 100%);
}

    .intro .value-grid {
        background: #fff;
        border-color: #d6dce7;
        box-shadow: 0 28px 70px rgba(17,23,37,.08)
    }

    .intro .value-card:hover {
        background: #f6f8fc
    }

.solutions {
    background: radial-gradient(circle at 85% 14%,rgba(49,89,216,.19),transparent 28%), linear-gradient(145deg,var(--brand-deep) 0%,var(--brand-main) 62%,#181e2c 100%);
}

.momentum-stage {
    background: rgba(17,23,37,.72);
    border-color: var(--brand-line)
}

.momentum-feature {
    background: linear-gradient(155deg,rgba(49,89,216,.42),rgba(32,38,51,.82))
}

.momentum-path:hover {
    background: rgba(49,89,216,.12)
}

.path-number {
    background: var(--brand-raised)
}

.proof {
    background: #f7f8fb
}

    .proof:before {
        color: #eef1f6
    }

.proof-feature {
    background: linear-gradient(145deg,var(--brand-main),#273a73)
}

    .proof-feature li {
        background: #29303f
    }

.proof-card {
    background: #fff
}

.industries {
    background: #fff
}

.industry-list a:hover, .industry-list a:focus-visible {
    background: #f2f4f8
}

.delivery {
    background: radial-gradient(circle at 90% 16%,rgba(34,183,170,.10),transparent 25%), linear-gradient(125deg,var(--brand-deep),var(--brand-main));
}

.presence {
    background: #eef1f5
}

    .presence:before {
        color: #e2e6ed
    }

.presence-icon {
    background: linear-gradient(145deg,#fff,#e7eaf0);
    color: var(--brand-main)
}

.contact-card {
    background: linear-gradient(110deg,var(--brand-main),#263c79)
}

footer {
    background: #0d121d
}

.mobile-panel.open {
    background: var(--brand-deep)
}

/* Shared Company and future inner-page content system. */
.company-intro {
    background: #fff
}

.split-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 105px;
    align-items: start
}

    .split-intro h2, .company-heading h2 {
        font-size: clamp(36px,4.3vw,56px);
        line-height: 1.14;
        letter-spacing: -.045em;
        margin: 20px 0 0
    }

        .split-intro h2 em, .company-heading h2 em {
            font-style: normal;
            color: var(--blue)
        }

.prose {
    padding-top: 32px;
    color: var(--muted);
    font-size: 15px
}

    .prose p {
        margin: 0 0 20px
    }

    .prose .lead {
        color: var(--ink);
        font: 600 20px/1.55 var(--heading)
    }

.company-belief {
    padding: 0 0 105px;
    background: #fff
}

.belief-panel {
    position: relative;
    padding: 62px 70px;
    background: linear-gradient(115deg,var(--brand-deep),var(--brand-main));
    color: #fff;
    overflow: hidden
}

    .belief-panel:after {
        content: "";
        position: absolute;
        right: 22px;
        bottom: -38px;
        width: 180px;
        height: 180px;
        background: url('/assets/brand/toqxcel-mark.png') center/contain no-repeat;
        filter: brightness(0) invert(1);
        opacity: .045
    }

    .belief-panel > span, .belief-panel > small {
        position: relative;
        z-index: 1;
        color: var(--mint);
        font: 700 9px var(--heading);
        letter-spacing: .15em;
        text-transform: uppercase
    }

    .belief-panel blockquote {
        position: relative;
        z-index: 1;
        max-width: 900px;
        margin: 28px 0;
        font: 600 clamp(27px,3.2vw,43px)/1.32 var(--heading);
        letter-spacing: -.035em
    }

.surface-soft {
    background: #f2f4f8
}

.company-heading {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 90px;
    align-items: end;
    margin-bottom: 55px
}

    .company-heading > p {
        margin: 0 0 7px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.75
    }

.dark-surface {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 86% 18%,rgba(49,89,216,.2),transparent 28%),linear-gradient(135deg,var(--brand-deep),var(--brand-main));
    color: #fff
}

    .dark-surface .company-heading > p {
        color: #aeb8cb
    }

    .dark-surface .company-heading h2 em {
        color: var(--mint)
    }

.principle-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border: 1px solid #d8dee9;
    background: #fff
}

    .principle-grid article {
        position: relative;
        min-height: 310px;
        padding: 35px 28px;
        border-right: 1px solid #d8dee9
    }

        .principle-grid article:last-child {
            border: 0
        }

        .principle-grid article > span {
            position: absolute;
            right: 20px;
            top: 18px;
            color: #a7b0c1;
            font-size: 9px
        }

    .principle-grid i {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        margin: 10px 0 48px;
        background: #edf1f8;
        color: var(--blue);
        font: normal 23px var(--heading)
    }

    .principle-grid h3 {
        font-size: 19px;
        margin-bottom: 12px
    }

    .principle-grid p {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.7
    }

.purpose-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border: 1px solid rgba(255,255,255,.14)
}

    .purpose-grid article {
        min-height: 275px;
        padding: 38px;
        border-right: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.025)
    }

        .purpose-grid article:last-child {
            border: 0
        }

    .purpose-grid small {
        color: var(--mint);
        font: 700 9px var(--heading);
        letter-spacing: .15em;
        text-transform: uppercase
    }

    .purpose-grid h3 {
        margin: 58px 0 0;
        font-size: 24px;
        line-height: 1.4;
        letter-spacing: -.03em
    }

.journey-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ccd4e1
}

    .journey-grid li {
        display: grid;
        grid-template-columns: 80px 1fr;
        padding: 32px 20px;
        border-bottom: 1px solid #ccd4e1;
        transition: background .25s,padding .25s
    }

        .journey-grid li:hover {
            padding-left: 32px;
            background: #fff
        }

        .journey-grid li > span {
            color: var(--blue);
            font: 700 10px var(--heading)
        }

    .journey-grid small {
        color: var(--teal);
        font: 700 9px var(--heading);
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .journey-grid h3 {
        margin: 7px 0;
        font-size: 23px
    }

    .journey-grid p {
        margin: 0;
        max-width: 760px;
        color: var(--muted);
        font-size: 13px
    }

    .journey-grid b {
        display: block;
        margin-top: 12px;
        color: var(--blue);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .08em
    }

.governance-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid rgba(255,255,255,.15);
    border-bottom: 1px solid rgba(255,255,255,.15)
}

    .governance-grid article {
        padding: 34px 27px;
        border-right: 1px solid rgba(255,255,255,.15)
    }

        .governance-grid article:last-child {
            border: 0
        }

    .governance-grid i {
        color: var(--mint);
        font: normal 9px var(--heading)
    }

    .governance-grid h3 {
        margin: 42px 0 10px;
        font-size: 19px
    }

    .governance-grid p {
        color: #aab4c8;
        font-size: 12px
    }

.reason-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: #d8dee9;
    border: 1px solid #d8dee9
}

    .reason-grid article {
        position: relative;
        min-height: 285px;
        padding: 35px;
        background: #fff
    }

    .reason-grid span {
        position: absolute;
        right: 22px;
        top: 18px;
        color: #aab2c1;
        font-size: 9px
    }

    .reason-grid h3 {
        max-width: 280px;
        margin: 34px 0 14px;
        font-size: 21px;
        line-height: 1.3
    }

    .reason-grid p {
        color: var(--muted);
        font-size: 12px
    }

    .reason-grid small {
        position: absolute;
        left: 35px;
        bottom: 28px;
        color: var(--blue);
        font: 700 8px var(--heading);
        letter-spacing: .09em;
        text-transform: uppercase
    }

.company-proof {
    padding: 90px 0
}

.proof-quote > span {
    color: var(--mint);
    font: 700 9px var(--heading);
    letter-spacing: .15em;
    text-transform: uppercase
}

.proof-quote blockquote {
    max-width: 980px;
    margin: 28px 0 45px;
    font: 600 clamp(30px,4vw,52px)/1.25 var(--heading);
    letter-spacing: -.04em
}

.proof-quote > div {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #aeb8cb;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .1em
}

.proof-quote i {
    width: 35px;
    height: 1px;
    background: var(--teal)
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border: 1px solid var(--line)
}

    .evidence-grid article {
        min-height: 270px;
        padding: 35px;
        border-right: 1px solid var(--line)
    }

        .evidence-grid article:last-child {
            border: 0
        }

    .evidence-grid small {
        color: var(--blue);
        font: 700 8px var(--heading);
        letter-spacing: .12em;
        text-transform: uppercase
    }

    .evidence-grid h3 {
        margin: 48px 0 14px;
        font-size: 22px
    }

    .evidence-grid p {
        color: var(--muted);
        font-size: 12px
    }

.leader-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

    .leader-grid article {
        padding: 18px 18px 30px;
        background: #fff;
        border: 1px solid #dce1ea
    }

.leader-photo {
    display: grid;
    place-items: center;
    aspect-ratio: 1.2/1;
    background: linear-gradient(145deg,#e6eaf1,#f8f9fc);
    color: #9ca6b8;
    text-align: center;
    font: 700 9px var(--heading);
    letter-spacing: .12em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden
}

    .leader-photo:after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border: 1px solid #d2d8e3;
        border-radius: 50%;
        bottom: -100px;
        right: -60px;
        box-shadow: 0 0 0 35px rgba(49,89,216,.025)
    }

.leader-grid small {
    display: block;
    margin-top: 25px;
    color: var(--blue);
    font: 700 8px var(--heading);
    letter-spacing: .13em;
    text-transform: uppercase
}

.leader-grid h3 {
    margin: 9px 0 2px;
    font-size: 24px
}

.leader-grid p {
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 12px
}

.leader-grid a, .leader-grid article > b {
    color: var(--ink);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700
}

.vacancy-list {
    border-top: 1px solid rgba(255,255,255,.15)
}

    .vacancy-list article {
        display: grid;
        grid-template-columns: 170px 1fr 1fr auto;
        align-items: center;
        gap: 25px;
        padding: 30px 16px;
        border-bottom: 1px solid rgba(255,255,255,.15)
    }

    .vacancy-list span {
        color: var(--mint);
        font: 700 8px var(--heading);
        letter-spacing: .12em;
        text-transform: uppercase
    }

    .vacancy-list h3 {
        margin: 0;
        font-size: 19px
    }

    .vacancy-list p {
        margin: 0;
        color: #aeb8cb;
        font-size: 12px
    }

    .vacancy-list a {
        color: var(--mint);
        text-decoration: none;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap
    }

.company-cta {
    padding: 28px 0;
    background: #f2f4f8
}

.about-origin-mark > img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain
}

.region-orbit b {
    font: inherit
}

    .region-orbit b img {
        display: block;
        width: 48px;
        height: 48px;
        object-fit: contain;
        filter: brightness(0) invert(1)
    }

.contact-watermark {
    width: 210px;
    height: 210px
}

    .contact-watermark img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: none;
        opacity: .16
    }

@media(max-width:900px) {
    .principle-grid, .governance-grid {
        grid-template-columns: 1fr 1fr
    }

        .principle-grid article:nth-child(2), .governance-grid article:nth-child(2) {
            border-right: 0
        }

        .principle-grid article:nth-child(-n+2), .governance-grid article:nth-child(-n+2) {
            border-bottom: 1px solid #d8dee9
        }

    .reason-grid {
        grid-template-columns: 1fr 1fr
    }

    .vacancy-list article {
        grid-template-columns: 130px 1fr
    }

    .vacancy-list p, .vacancy-list a {
        grid-column: 2
    }
}

@media(max-width:760px) {
    .split-intro, .company-heading {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .prose {
        padding-top: 0
    }

    .company-belief {
        padding-bottom: 75px
    }

    .belief-panel {
        padding: 45px 28px
    }

    .principle-grid, .purpose-grid, .governance-grid, .reason-grid, .evidence-grid, .leader-grid {
        grid-template-columns: 1fr
    }

        .principle-grid article, .purpose-grid article, .governance-grid article, .evidence-grid article {
            border-right: 0;
            border-bottom: 1px solid #d8dee9
        }

            .principle-grid article:last-child, .purpose-grid article:last-child, .governance-grid article:last-child, .evidence-grid article:last-child {
                border-bottom: 0
            }

    .proof-quote > div {
        align-items: flex-start;
        flex-direction: column
    }

    .proof-quote i {
        display: none
    }

    .vacancy-list article {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .vacancy-list p, .vacancy-list a {
        grid-column: auto
    }

    .journey-grid li {
        grid-template-columns: 45px 1fr;
        padding-left: 5px
    }

    .company-cta {
        padding: 20px 0
    }
}

/* Vibrant shared inner-page hero and reusable icon-card treatment. */
.page-hero {
    min-height: 520px;
    padding: 138px 0 72px;
    background: radial-gradient(circle at 76% 44%,rgba(49,89,216,.2),transparent 31%),linear-gradient(125deg,var(--brand-deep),var(--brand-main))
}

.page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0,.82fr) minmax(500px,1.18fr);
    gap: 34px;
    align-items: center
}

.page-hero-copy {
    position: relative;
    z-index: 2
}

.page-hero h1 {
    max-width: 620px;
    font-size: clamp(42px,5.2vw,70px)
}

.page-hero-art {
    position: relative;
    align-self: stretch;
    min-height: 300px;
    margin: 0;
    display: grid;
    place-items: center;
    isolation: isolate
}

    .page-hero-art:before {
        content: "";
        position: absolute;
        width: 70%;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(34,183,170,.16),rgba(49,89,216,.08) 42%,transparent 70%);
        filter: blur(12px);
        animation: companyHeroGlow 6s ease-in-out infinite
    }

    .page-hero-art img {
        position: relative;
        z-index: 2;
        display: block;
        width: 118%;
        max-width: none;
        height: auto;
        transform: translateX(3%);
        filter: drop-shadow(0 28px 38px rgba(2,7,20,.32));
        animation: companyHeroFloat 7s ease-in-out infinite
    }

.hero-art-orbit {
    position: absolute;
    z-index: 1;
    width: 74%;
    aspect-ratio: 1;
    border: 1px solid rgba(137,225,213,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(137,225,213,.018),0 0 0 80px rgba(49,89,216,.018);
    animation: companyHeroOrbit 18s linear infinite
}

@keyframes companyHeroFloat {
    0%,100% {
        transform: translateX(3%) translateY(0)
    }

    50% {
        transform: translateX(3%) translateY(-10px)
    }
}

@keyframes companyHeroGlow {
    0%,100% {
        opacity: .7;
        transform: scale(.94)
    }

    50% {
        opacity: 1;
        transform: scale(1.05)
    }
}

@keyframes companyHeroOrbit {
    to {
        transform: rotate(360deg)
    }
}

.principle-grid i, .card-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 10px 0 42px;
    background: linear-gradient(145deg,#eef3ff,#fff);
    border: 1px solid #dfe6f2;
    border-radius: 12px;
    color: var(--blue);
    font: normal 23px var(--heading);
    box-shadow: 0 12px 28px rgba(17,23,37,.07);
    transition: transform .3s,background .3s,color .3s,box-shadow .3s
}

.principle-grid article:hover i, .reason-grid article:hover .card-icon, .evidence-grid article:hover .card-icon {
    transform: translateY(-5px) rotate(-3deg);
    background: linear-gradient(145deg,var(--blue),#5378ea);
    color: #fff;
    box-shadow: 0 18px 34px rgba(49,89,216,.22)
}

.card-icon svg, .principle-grid i svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.principle-grid article, .reason-grid article, .evidence-grid article {
    overflow: hidden;
    transition: transform .3s,box-shadow .3s,background .3s
}

    .principle-grid article:before, .reason-grid article:before, .evidence-grid article:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg,var(--teal),var(--blue),transparent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s
    }

    .principle-grid article:hover:before, .reason-grid article:hover:before, .evidence-grid article:hover:before {
        transform: scaleX(1)
    }

.reason-grid .card-icon {
    margin: 7px 0 26px
}

.reason-grid h3 {
    margin-top: 0
}

.evidence-grid .card-icon {
    margin: 18px 0 24px
}

.evidence-grid h3 {
    margin-top: 0
}

@media(max-width:1000px) {
    .page-hero-inner {
        grid-template-columns: 1fr .9fr
    }

    .page-hero-art img {
        width: 145%
    }
}

@media(max-width:760px) {
    .page-hero {
        min-height: 0;
        padding: 112px 0 38px
    }

    .page-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .page-hero-art {
        min-height: 190px
    }

        .page-hero-art img {
            width: 112%;
            transform: none
        }

    .hero-art-orbit {
        width: 55%
    }
}

@media(prefers-reduced-motion:reduce) {
    .page-hero-art img, .page-hero-art:before, .hero-art-orbit {
        animation: none !important
    }

    .principle-grid i, .card-icon {
        transition: none
    }
}

/* Careers: human ambition, international perspective and talent introduction. */
.careers-opening {
    position: relative;
    overflow: hidden;
    background: #fff
}

    .careers-opening:after {
        content: "";
        position: absolute;
        right: -9%;
        bottom: -55%;
        width: 38vw;
        aspect-ratio: 1;
        border: 1px solid #e6eaf2;
        border-radius: 50%;
        box-shadow: 0 0 0 55px rgba(49,89,216,.025),0 0 0 110px rgba(34,183,170,.018)
    }

.careers-opening-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 105px;
    position: relative;
    z-index: 1
}

.careers-opening h2, .career-presence h2, .career-apply h2 {
    margin: 20px 0 0;
    font-size: clamp(38px,4.5vw,58px);
    line-height: 1.12;
    letter-spacing: -.047em
}

    .careers-opening h2 em, .career-apply h2 em {
        font-style: normal;
        color: var(--blue)
    }

.careers-manifesto {
    padding-top: 30px;
    color: var(--muted);
    font-size: 15px
}

    .careers-manifesto p {
        margin: 0 0 20px
    }

    .careers-manifesto .lead {
        color: var(--ink);
        font: 600 20px/1.5 var(--heading)
    }

.career-signal {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 70px;
    padding: 21px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 1;
    color: #6f7990;
    font: 700 9px var(--heading);
    letter-spacing: .11em;
    text-transform: uppercase
}

    .career-signal i {
        height: 1px;
        flex: 1;
        background: linear-gradient(90deg,var(--teal),var(--blue));
        position: relative
    }

        .career-signal i:after {
            content: "";
            position: absolute;
            right: 0;
            top: -3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--blue)
        }

.careers-experience {
    background: linear-gradient(145deg,#eef2f8,#f8f9fc 54%,#eef7f6)
}

.career-bento {
    display: grid;
    grid-template-columns: 1.12fr .88fr .88fr;
    gap: 14px
}

    .career-bento article {
        position: relative;
        min-height: 300px;
        padding: 34px;
        background: #fff;
        border: 1px solid #dce2ec;
        overflow: hidden;
        transition: transform .3s,box-shadow .3s
    }

        .career-bento article:hover {
            transform: translateY(-6px);
            box-shadow: 0 22px 52px rgba(17,23,37,.1)
        }

        .career-bento article:after {
            content: "";
            position: absolute;
            right: -45px;
            bottom: -45px;
            width: 120px;
            height: 120px;
            border: 1px solid #e1e6ef;
            border-radius: 50%;
            box-shadow: 0 0 0 22px rgba(49,89,216,.025)
        }

    .career-bento .card-icon {
        margin: 0 0 38px
    }

    .career-bento small {
        color: var(--teal);
        font: 700 8px var(--heading);
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .career-bento h3 {
        max-width: 390px;
        margin: 12px 0;
        font-size: 24px;
        line-height: 1.25;
        letter-spacing: -.035em
    }

    .career-bento p {
        max-width: 440px;
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.7
    }

.career-bento-feature {
    grid-row: span 2;
    background: linear-gradient(145deg,var(--brand-main),#24345f) !important;
    color: #fff;
    border-color: transparent !important;
    padding: 44px !important
}

    .career-bento-feature .card-icon {
        background: rgba(255,255,255,.1);
        border-color: rgba(255,255,255,.15);
        color: var(--mint)
    }

    .career-bento-feature h3 {
        margin-top: 45px !important;
        font-size: 32px !important
    }

    .career-bento-feature p {
        color: #b8c3d5
    }

.career-bento-wide {
    grid-column: 2/4;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 25px;
    align-items: center;
    min-height: 220px !important
}

    .career-bento-wide .card-icon {
        margin: 0
    }

.career-presence {
    padding: 110px 0
}

.career-presence-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 95px;
    align-items: center
}

.career-presence-copy h2 em {
    font-style: normal;
    color: var(--mint)
}

.career-presence-copy > p:not(.eyebrow) {
    max-width: 530px;
    color: #aeb8cb;
    font-size: 14px;
    line-height: 1.75
}

.career-presence-copy > a {
    display: inline-flex;
    gap: 20px;
    margin-top: 25px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700
}

    .career-presence-copy > a span {
        color: var(--mint)
    }

.career-location-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: repeat(2,150px);
    gap: 12px;
    isolation: isolate
}

    .career-location-map:before {
        content: "";
        position: absolute;
        inset: 10% 5%;
        background: radial-gradient(circle,rgba(34,183,170,.13),transparent 65%);
        filter: blur(12px)
    }

    .career-location-map article {
        position: relative;
        z-index: 2;
        padding: 22px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.14);
        backdrop-filter: blur(5px);
        transition: transform .3s,background .3s,border-color .3s
    }

        .career-location-map article:hover {
            transform: translateY(-5px);
            background: rgba(49,89,216,.2);
            border-color: rgba(137,225,213,.35)
        }

        .career-location-map article:nth-of-type(1) {
            grid-column: 1/3
        }

        .career-location-map article:nth-of-type(2) {
            grid-column: 3/5;
            margin-top: 22px
        }

        .career-location-map article:nth-of-type(3) {
            grid-column: 5/7
        }

        .career-location-map article:nth-of-type(4) {
            grid-column: 2/4
        }

        .career-location-map article:nth-of-type(5) {
            grid-column: 4/6;
            margin-top: 12px
        }

    .career-location-map i {
        display: block;
        color: var(--mint);
        font: normal 8px var(--heading)
    }

    .career-location-map b {
        display: block;
        margin: 36px 0 4px;
        font: 600 18px var(--heading)
    }

    .career-location-map small {
        color: #96a4bc;
        font-size: 10px
    }

.map-line {
    position: absolute;
    z-index: 1;
    height: 1px;
    background: linear-gradient(90deg,transparent,var(--teal),var(--blue),transparent);
    transform-origin: left
}

.line-a {
    left: 18%;
    top: 32%;
    width: 64%;
    transform: rotate(8deg)
}

.line-b {
    left: 25%;
    top: 63%;
    width: 53%;
    transform: rotate(-10deg)
}

.line-c {
    left: 48%;
    top: 18%;
    width: 1px;
    height: 70%;
    background: linear-gradient(transparent,var(--blue),transparent);
    transform: rotate(24deg)
}

.career-apply {
    background: #f7f8fb
}

.career-apply-layout {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 95px;
    align-items: start
}

.career-apply-intro {
    position: sticky;
    top: 120px
}

    .career-apply-intro > p:not(.eyebrow) {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.75
    }

    .career-apply-intro .lead {
        margin-top: 28px;
        color: var(--ink);
        font: 600 18px/1.55 var(--heading)
    }

.career-apply-note {
    display: flex;
    gap: 15px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

    .career-apply-note i {
        width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        color: var(--blue);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 50%
    }

    .career-apply-note svg {
        width: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7
    }

    .career-apply-note span {
        display: flex;
        flex-direction: column;
        gap: 4px
    }

    .career-apply-note b {
        font-size: 11px
    }

    .career-apply-note small {
        max-width: 360px;
        color: var(--muted);
        font-size: 9px;
        line-height: 1.5
    }

.career-form {
    padding: 38px 40px 42px;
    background: #fff;
    border: 1px solid #dce2ec;
    box-shadow: 0 25px 70px rgba(17,23,37,.08)
}

.career-form-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 35px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    color: var(--blue);
    font: 700 9px var(--heading);
    letter-spacing: .14em;
    text-transform: uppercase
}

    .career-form-head b {
        color: #9aa5b7
    }

.career-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 18px
}

    .career-fields label {
        display: flex;
        flex-direction: column;
        gap: 9px
    }

        .career-fields label > span {
            color: #5f697c;
            font: 700 9px var(--heading);
            letter-spacing: .08em;
            text-transform: uppercase
        }

    .career-fields input, .career-fields select, .career-fields textarea {
        width: 100%;
        min-height: 50px;
        padding: 13px 14px;
        border: 1px solid #d8deea;
        border-radius: 0;
        background: #fafbfc;
        color: var(--ink);
        font: 500 13px var(--body);
        outline: none;
        transition: border-color .2s,box-shadow .2s,background .2s
    }

    .career-fields textarea {
        resize: vertical
    }

        .career-fields input:focus, .career-fields select:focus, .career-fields textarea:focus {
            background: #fff;
            border-color: var(--blue);
            box-shadow: 0 0 0 3px rgba(49,89,216,.1)
        }

.field-wide {
    grid-column: 1/-1
}

.career-file input {
    padding: 11px
}

.career-file small {
    color: #919bad;
    font-size: 9px
}

.career-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 23px 0;
    color: #747e91;
    font-size: 10px
}

    .career-consent input {
        accent-color: var(--blue)
    }

.career-submit {
    border: 0;
    cursor: pointer
}

.career-form-status {
    min-height: 18px;
    margin: 16px 0 0;
    color: var(--teal);
    font-size: 10px;
    line-height: 1.5
}

body:has(.careers-opening) .page-hero {
    min-height: 0;
    padding-top: 132px;
    padding-bottom: 54px
}

body:has(.careers-opening) .page-hero-inner {
    grid-template-columns: minmax(0,.9fr) minmax(460px,1.1fr);
    gap: 54px
}

body:has(.careers-opening) .page-hero-art {
    min-height: 310px;
    align-self: center;
    margin: 0
}

    body:has(.careers-opening) .page-hero-art:before, body:has(.careers-opening) .hero-art-orbit {
        display: none
    }

    body:has(.careers-opening) .page-hero-art img {
        width: min(100%,620px);
        height: auto;
        max-height: 340px;
        object-fit: contain;
        object-position: center;
        transform: none;
        filter: none;
        animation: none
    }

@media(max-width:1000px) {
    .career-bento {
        grid-template-columns: 1fr 1fr
    }

    .career-bento-feature {
        grid-column: 1/-1;
        grid-row: auto;
        min-height: 340px !important
    }

    .career-bento-wide {
        grid-column: 1/-1
    }

    .career-presence-grid, .career-apply-layout {
        grid-template-columns: 1fr;
        gap: 55px
    }

    .career-apply-intro {
        position: static
    }

    .career-location-map {
        max-width: 760px;
        width: 100%
    }
}

@media(max-width:760px) {
    .careers-opening-grid {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .careers-manifesto {
        padding: 0
    }

    .career-signal {
        display: grid;
        grid-template-columns: 20px 1fr;
        margin-top: 45px
    }

        .career-signal i {
            order: -1;
            width: 1px;
            height: 30px;
            margin: auto;
            background: linear-gradient(var(--teal),var(--blue))
        }

            .career-signal i:after {
                right: -3px;
                top: auto;
                bottom: 0
            }

    .career-bento {
        grid-template-columns: 1fr
    }

    .career-bento-feature, .career-bento-wide {
        grid-column: auto
    }

    .career-bento-wide {
        display: block;
        min-height: 285px !important
    }

        .career-bento-wide .card-icon {
            margin-bottom: 30px
        }

    .career-location-map {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto
    }

        .career-location-map article:nth-of-type(n) {
            grid-column: auto;
            margin: 0;
            min-height: 145px
        }

        .career-location-map article:last-of-type {
            grid-column: 1/-1
        }

    .map-line {
        display: none
    }

    .career-form {
        padding: 28px 22px
    }

    .career-fields {
        grid-template-columns: 1fr
    }

    .field-wide {
        grid-column: auto
    }

    body:has(.careers-opening) .page-hero {
        padding: 106px 0 34px
    }

    body:has(.careers-opening) .page-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px
    }

    body:has(.careers-opening) .page-hero-art {
        width: min(100%,520px);
        min-height: 0;
        margin-inline: auto
    }

        body:has(.careers-opening) .page-hero-art img {
            width: 100%;
            height: auto;
            max-height: none
        }
}

@media(prefers-reduced-motion:reduce) {
    body:has(.careers-opening) .page-hero-art img {
        animation: none !important
    }

    .career-bento article, .career-location-map article {
        transition: none
    }
}

/* About: international capability, direction and presence. */
.about-opening {
    position: relative;
    overflow: hidden;
    background: #fff
}

    .about-opening:after {
        content: "";
        position: absolute;
        left: -10%;
        bottom: -55%;
        width: 36vw;
        aspect-ratio: 1;
        border: 1px solid #e7eaf1;
        border-radius: 50%;
        box-shadow: 0 0 0 55px rgba(49,89,216,.025),0 0 0 110px rgba(34,183,170,.018)
    }

.about-opening-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 110px;
    position: relative;
    z-index: 1
}

.about-opening-title h2, .about-global-head h2, .about-direction-intro h2, .about-presence-copy h2 {
    margin: 20px 0 0;
    font-size: clamp(39px,4.5vw,59px);
    line-height: 1.12;
    letter-spacing: -.048em
}

    .about-opening-title h2 em, .about-direction-intro h2 em, .about-presence-copy h2 em {
        font-style: normal;
        color: var(--blue)
    }

.about-manifesto {
    padding-top: 30px;
    color: var(--muted);
    font-size: 15px
}

    .about-manifesto p {
        margin: 0 0 20px
    }

    .about-manifesto .lead {
        color: var(--ink);
        font: 600 20px/1.52 var(--heading)
    }

.about-origin-mark {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 56px
}

    .about-origin-mark > span {
        color: var(--blue);
        font: 800 26px var(--heading);
        letter-spacing: -.08em
    }

    .about-origin-mark i {
        width: 48px;
        height: 1px;
        background: linear-gradient(90deg,var(--teal),var(--blue))
    }

    .about-origin-mark small {
        color: #8590a3;
        font: 700 8px/1.5 var(--heading);
        letter-spacing: .11em;
        text-transform: uppercase
    }

.about-capability-rail {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 70px;
    padding: 21px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 1;
    color: #6f7990;
    font: 700 9px var(--heading);
    letter-spacing: .11em;
    text-transform: uppercase
}

    .about-capability-rail i {
        height: 1px;
        flex: 1;
        background: linear-gradient(90deg,var(--teal),var(--blue));
        position: relative
    }

        .about-capability-rail i:after {
            content: "";
            position: absolute;
            right: 0;
            top: -3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--blue)
        }

.about-global {
    padding: 112px 0
}

.about-global-head {
    display: grid;
    grid-template-columns: 1.05fr .75fr;
    gap: 100px;
    align-items: end
}

    .about-global-head h2 em {
        font-style: normal;
        color: var(--mint)
    }

    .about-global-head > p {
        margin: 0 0 8px;
        color: #aeb8cb;
        font-size: 14px;
        line-height: 1.75
    }

.about-region-system {
    display: grid;
    grid-template-columns: 1.35fr repeat(2,1fr);
    margin-top: 60px;
    border: 1px solid rgba(255,255,255,.14)
}

    .about-region-system article {
        position: relative;
        min-height: 290px;
        padding: 32px;
        border-right: 1px solid rgba(255,255,255,.14);
        border-bottom: 1px solid rgba(255,255,255,.14);
        background: rgba(255,255,255,.025);
        overflow: hidden;
        transition: background .3s,transform .3s
    }

        .about-region-system article:nth-child(3), .about-region-system article:nth-child(5) {
            border-right: 0
        }

        .about-region-system article:nth-child(4), .about-region-system article:nth-child(5) {
            border-bottom: 0
        }

        .about-region-system article:hover {
            background: rgba(49,89,216,.12)
        }

    .about-region-system .region-feature {
        grid-row: span 2;
        min-height: 580px;
        background: linear-gradient(145deg,rgba(49,89,216,.35),rgba(255,255,255,.025));
        border-bottom: 0
    }

    .about-region-system .card-icon {
        margin: 0 0 42px;
        background: rgba(255,255,255,.07);
        border-color: rgba(255,255,255,.13);
        color: var(--mint);
        box-shadow: none
    }

    .about-region-system small {
        color: var(--mint);
        font: 700 8px var(--heading);
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .about-region-system h3 {
        margin: 12px 0;
        font-size: 22px;
        line-height: 1.3
    }

    .about-region-system p {
        margin: 0;
        color: #aeb8cb;
        font-size: 12px;
        line-height: 1.7
    }

.region-feature h3 {
    margin-top: 40px;
    font-size: 30px
}

.region-orbit {
    position: relative;
    display: grid;
    place-items: center;
    width: 245px;
    aspect-ratio: 1;
    margin: 4px auto 46px;
    border: 1px solid rgba(137,225,213,.22);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(49,89,216,.08),0 0 0 68px rgba(137,225,213,.035)
}

    .region-orbit b {
        display: grid;
        place-items: center;
        width: 92px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: linear-gradient(145deg,var(--blue),#183373);
        box-shadow: 0 0 40px rgba(70,115,255,.5);
        font: 800 24px var(--heading)
    }

    .region-orbit span {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--mint);
        box-shadow: 0 0 16px var(--mint)
    }

        .region-orbit span:nth-child(1) {
            top: 8%;
            left: 29%
        }

        .region-orbit span:nth-child(2) {
            right: 3%;
            top: 46%;
            background: #6e8fff
        }

        .region-orbit span:nth-child(3) {
            left: 18%;
            bottom: 8%;
            background: #f3b55b
        }

.about-advantage {
    background: #fff
}

.about-advantage-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 14px
}

    .about-advantage-grid article {
        position: relative;
        min-height: 300px;
        padding: 38px;
        background: #f4f6f9;
        border: 1px solid #e0e5ed;
        overflow: hidden;
        transition: transform .3s,box-shadow .3s
    }

        .about-advantage-grid article:hover {
            transform: translateY(-5px);
            box-shadow: 0 22px 52px rgba(17,23,37,.09)
        }

        .about-advantage-grid article:after {
            content: "";
            position: absolute;
            right: -50px;
            bottom: -50px;
            width: 140px;
            aspect-ratio: 1;
            border: 1px solid #dfe4ed;
            border-radius: 50%;
            box-shadow: 0 0 0 24px rgba(49,89,216,.025)
        }

    .about-advantage-grid .advantage-lead {
        grid-row: span 2;
        min-height: 614px;
        padding: 48px;
        background: linear-gradient(145deg,var(--brand-main),#273b78);
        color: #fff;
        border-color: transparent
    }

    .about-advantage-grid span {
        color: var(--teal);
        font: 700 8px var(--heading);
        letter-spacing: .13em;
        text-transform: uppercase
    }

    .about-advantage-grid h3 {
        max-width: 500px;
        margin: 50px 0 16px;
        font-size: 25px;
        line-height: 1.3;
        letter-spacing: -.03em
    }

    .about-advantage-grid .advantage-lead h3 {
        margin-top: 155px;
        font-size: 36px
    }

    .about-advantage-grid p {
        max-width: 520px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.75
    }

    .about-advantage-grid .advantage-lead p {
        color: #bec8dc
    }

    .about-advantage-grid b {
        position: absolute;
        left: 38px;
        bottom: 34px;
        color: var(--blue);
        font: 700 8px var(--heading);
        letter-spacing: .09em;
        text-transform: uppercase
    }

    .about-advantage-grid .advantage-lead b {
        left: 48px;
        color: var(--mint)
    }

.about-direction {
    background: linear-gradient(145deg,#eef2f8,#f8f9fc 54%,#edf7f6)
}

.about-direction-intro {
    display: grid;
    grid-template-columns: 1.1fr .7fr;
    gap: 95px;
    align-items: end;
    margin-bottom: 58px
}

    .about-direction-intro > p {
        margin: 0 0 7px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.75
    }

.about-purpose {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    border: 1px solid #d8dee9;
    background: #fff
}

    .about-purpose article {
        position: relative;
        min-height: 350px;
        padding: 42px;
        border-right: 1px solid #d8dee9;
        border-bottom: 1px solid #d8dee9
    }

        .about-purpose article:nth-child(2) {
            border-right: 0
        }

    .about-purpose .about-principles {
        grid-column: 1/-1;
        border: 0;
        display: grid;
        grid-template-columns: .25fr .75fr;
        gap: 20px;
        min-height: 0
    }

    .about-purpose i {
        position: absolute;
        right: 25px;
        top: 23px;
        color: #a2acbc;
        font: normal 9px var(--heading)
    }

    .about-purpose small {
        color: var(--teal);
        font: 700 8px var(--heading);
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .about-purpose h3 {
        max-width: 560px;
        margin: 70px 0 18px;
        font-size: 27px;
        line-height: 1.35;
        letter-spacing: -.035em
    }

    .about-purpose p {
        max-width: 570px;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.75
    }

.about-principles ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none
}

.about-principles li {
    padding: 18px 20px;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

    .about-principles li:nth-child(n+3) {
        border-bottom: 0
    }

.about-principles b, .about-principles span {
    display: block
}

.about-principles b {
    font-size: 14px
}

.about-principles span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px
}

.about-presence {
    background: #fff
}

.about-presence-copy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 95px;
    align-items: end
}

    .about-presence-copy .eyebrow {
        grid-column: 1/-1;
        margin-bottom: -72px
    }

    .about-presence-copy > p:last-child {
        margin: 0 0 8px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.75
    }

.about-location-line {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    margin-top: 62px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

    .about-location-line article {
        position: relative;
        min-height: 185px;
        padding: 28px 22px;
        border-right: 1px solid var(--line);
        transition: background .3s,transform .3s
    }

        .about-location-line article:last-child {
            border: 0
        }

        .about-location-line article:hover {
            background: #f2f5fa;
            transform: translateY(-5px)
        }

    .about-location-line i {
        color: var(--teal);
        font: normal 8px var(--heading)
    }

    .about-location-line b {
        display: block;
        margin: 46px 0 5px;
        font: 600 19px var(--heading)
    }

    .about-location-line small {
        color: #8a95a8;
        font-size: 10px
    }

body:has(.about-opening) .page-hero {
    min-height: 0;
    padding-top: 132px;
    padding-bottom: 54px
}

body:has(.about-opening) .page-hero-inner {
    grid-template-columns: minmax(0,.9fr) minmax(460px,1.1fr);
    gap: 54px
}

body:has(.about-opening) .page-hero-art {
    min-height: 310px;
    align-self: center;
    margin: 0
}

    body:has(.about-opening) .page-hero-art:before, body:has(.about-opening) .hero-art-orbit {
        display: none
    }

    body:has(.about-opening) .page-hero-art img {
        width: min(100%,620px);
        height: auto;
        max-height: 340px;
        object-fit: contain;
        object-position: center;
        transform: none;
        filter: none;
        animation: none
    }

@media(max-width:1000px) {
    .about-region-system {
        grid-template-columns: 1fr 1fr
    }

        .about-region-system .region-feature {
            grid-column: 1/-1;
            grid-row: auto;
            min-height: 500px;
            border-right: 0;
            border-bottom: 1px solid rgba(255,255,255,.14)
        }

        .about-region-system article:nth-child(3) {
            border-right: 0
        }

        .about-region-system article:nth-child(4) {
            border-bottom: 0
        }

    .about-advantage-grid {
        grid-template-columns: 1fr
    }

        .about-advantage-grid .advantage-lead {
            grid-row: auto;
            min-height: 480px
        }

    .about-location-line {
        grid-template-columns: repeat(3,1fr)
    }

        .about-location-line article:nth-child(3) {
            border-right: 0
        }

        .about-location-line article:nth-child(-n+3) {
            border-bottom: 1px solid var(--line)
        }
}

@media(max-width:760px) {
    .about-opening-grid, .about-global-head, .about-direction-intro, .about-presence-copy {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .about-origin-mark {
        margin-top: 38px
    }

    .about-capability-rail {
        display: grid;
        grid-template-columns: 20px 1fr;
        margin-top: 45px
    }

        .about-capability-rail i {
            order: -1;
            width: 1px;
            height: 30px;
            margin: auto;
            background: linear-gradient(var(--teal),var(--blue))
        }

            .about-capability-rail i:after {
                right: -3px;
                top: auto;
                bottom: 0
            }

    .about-global {
        padding: 80px 0
    }

    .about-region-system {
        grid-template-columns: 1fr
    }

        .about-region-system .region-feature {
            min-height: 490px
        }

        .about-region-system article:nth-child(n) {
            border-right: 0;
            border-bottom: 1px solid rgba(255,255,255,.14)
        }

        .about-region-system article:last-child {
            border-bottom: 0
        }

    .region-orbit {
        width: 205px
    }

    .about-advantage-grid .advantage-lead {
        min-height: 480px;
        padding: 36px
    }

        .about-advantage-grid .advantage-lead h3 {
            margin-top: 120px;
            font-size: 30px
        }

        .about-advantage-grid .advantage-lead b {
            left: 36px
        }

    .about-purpose {
        grid-template-columns: 1fr
    }

        .about-purpose article:nth-child(n) {
            border-right: 0;
            border-bottom: 1px solid var(--line)
        }

        .about-purpose .about-principles {
            grid-column: auto;
            display: block
        }

    .about-principles ul {
        grid-template-columns: 1fr;
        margin-top: 36px
    }

    .about-principles li {
        border-left: 0;
        border-bottom: 1px solid var(--line) !important;
        padding-left: 0
    }

        .about-principles li:last-child {
            border-bottom: 0 !important
        }

    .about-presence-copy .eyebrow {
        grid-column: auto;
        margin: 0
    }

    .about-location-line {
        grid-template-columns: 1fr 1fr
    }

        .about-location-line article:nth-child(n) {
            border-right: 1px solid var(--line);
            border-bottom: 1px solid var(--line)
        }

        .about-location-line article:nth-child(even) {
            border-right: 0
        }

        .about-location-line article:last-child {
            grid-column: 1/-1;
            border-bottom: 0
        }

    body:has(.about-opening) .page-hero {
        padding: 106px 0 34px
    }

    body:has(.about-opening) .page-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px
    }

    body:has(.about-opening) .page-hero-art {
        width: min(100%,520px);
        min-height: 0;
        margin-inline: auto
    }

        body:has(.about-opening) .page-hero-art img {
            width: 100%;
            height: auto;
            max-height: none
        }
}

@media(prefers-reduced-motion:reduce) {
    body:has(.about-opening) .page-hero-art img {
        animation: none !important
    }

    .about-region-system article, .about-advantage-grid article, .about-location-line article {
        transition: none
    }
}

/* Why ToqXcel: choice, international confidence and visible accountability. */
.why-opening {
    position: relative;
    overflow: hidden;
    background: #fff
}

    .why-opening:after {
        content: "";
        position: absolute;
        right: -12%;
        bottom: -78%;
        width: 38vw;
        aspect-ratio: 1;
        border: 1px solid #e6eaf1;
        border-radius: 50%;
        box-shadow: 0 0 0 54px rgba(240,142,45,.025),0 0 0 108px rgba(34,183,170,.018)
    }

.why-opening-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 110px
}

.why-opening-title h2, .why-international-copy h2, .why-promise-panel h2 {
    margin: 20px 0 0;
    font-size: clamp(39px,4.5vw,59px);
    line-height: 1.12;
    letter-spacing: -.048em
}

    .why-opening-title h2 em, .why-promise-panel h2 em {
        font-style: normal;
        color: var(--blue)
    }

.why-manifesto {
    padding-top: 30px;
    color: var(--muted);
    font-size: 15px
}

    .why-manifesto p {
        margin: 0 0 20px
    }

    .why-manifesto .lead {
        color: var(--ink);
        font: 600 20px/1.52 var(--heading)
    }

.why-signature {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 55px;
    color: #7c8799;
    font: 700 8px var(--heading);
    letter-spacing: .11em;
    text-transform: uppercase
}

    .why-signature i {
        width: 58px;
        height: 1px;
        background: linear-gradient(90deg,#f05b4f,#f3a22f,var(--teal));
        position: relative
    }

        .why-signature i:after {
            content: "";
            position: absolute;
            right: 0;
            top: -3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--teal)
        }

.why-advantage-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 14px
}

    .why-advantage-grid article {
        position: relative;
        min-height: 315px;
        padding: 36px 38px;
        background: #fff;
        border: 1px solid #dfe4ec;
        overflow: hidden
    }

        .why-advantage-grid article:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 5px;
            height: 100%;
            background: var(--why-accent,var(--teal))
        }

        .why-advantage-grid article:nth-child(2) {
            --why-accent: #f0a02f
        }

        .why-advantage-grid article:nth-child(3) {
            --why-accent: #1d9bb0
        }

        .why-advantage-grid article:nth-child(4) {
            --why-accent: #4fc5a4
        }

    .why-advantage-grid .why-advantage-feature {
        grid-row: span 2;
        min-height: 644px;
        padding: 46px;
        background: linear-gradient(145deg,#fff5f1,#fff 48%,#edf9f7);
        --why-accent: #ef5c50
    }

    .why-advantage-grid > article > span {
        color: var(--why-accent);
        font: 700 8px var(--heading);
        letter-spacing: .13em;
        text-transform: uppercase
    }

.why-large-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 48px 0 34px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--why-accent) 12%,white);
    color: var(--why-accent)
}

    .why-large-icon svg {
        width: 37px;
        height: 37px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.55;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.why-advantage-feature .why-large-icon {
    width: 104px;
    height: 104px;
    margin-top: 115px
}

    .why-advantage-feature .why-large-icon svg {
        width: 50px;
        height: 50px
    }

.why-advantage-grid h3 {
    max-width: 510px;
    margin: 0 0 14px;
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -.03em
}

.why-advantage-grid .why-advantage-feature h3 {
    font-size: 36px
}

.why-advantage-grid p {
    max-width: 540px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75
}

.why-advantage-grid b {
    position: absolute;
    left: 38px;
    bottom: 32px;
    color: var(--why-accent);
    font: 700 8px var(--heading);
    letter-spacing: .09em;
    text-transform: uppercase
}

.why-advantage-grid .why-advantage-feature b {
    left: 46px
}

/* Keep the four advantages as one aligned composition: one feature beside three equal rows. */
@media(min-width:1001px) {
    .why-advantage-grid {
        grid-template-rows: repeat(3,minmax(250px,1fr));
        align-items: stretch
    }

        .why-advantage-grid .why-advantage-feature {
            grid-row: 1 / span 3;
            min-height: 778px
        }

        .why-advantage-grid > article:not(.why-advantage-feature) {
            min-height: 250px;
            padding: 30px 38px
        }

            .why-advantage-grid > article:not(.why-advantage-feature) .why-large-icon {
                width: 64px;
                height: 64px;
                margin: 30px 0 22px
            }

                .why-advantage-grid > article:not(.why-advantage-feature) .why-large-icon svg {
                    width: 31px;
                    height: 31px
                }

            .why-advantage-grid > article:not(.why-advantage-feature) h3 {
                margin-bottom: 10px;
                font-size: 22px
            }

            .why-advantage-grid > article:not(.why-advantage-feature) b {
                bottom: 24px
            }
}

.why-international {
    padding: 112px 0
}

.why-international-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 110px;
    align-items: center
}

.why-international-copy h2 em {
    font-style: normal;
    color: var(--mint)
}

.why-international-copy > p:last-child {
    max-width: 620px;
    margin-top: 28px;
    color: #aeb8cb;
    font-size: 14px;
    line-height: 1.8
}

.why-context-flow {
    border-top: 1px solid rgba(255,255,255,.16)
}

    .why-context-flow article {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 22px;
        align-items: center;
        padding: 23px 8px;
        border-bottom: 1px solid rgba(255,255,255,.16)
    }

    .why-context-flow i {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(137,225,213,.09);
        color: var(--mint);
        font: normal 8px var(--heading)
    }

    .why-context-flow b, .why-context-flow span {
        display: block
    }

    .why-context-flow b {
        font-size: 16px
    }

    .why-context-flow span {
        margin-top: 5px;
        color: #aeb8cb;
        font-size: 10px;
        letter-spacing: .05em
    }

.why-engagement {
    background: #fff
}

.why-expect-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

    .why-expect-grid article {
        position: relative;
        min-height: 285px;
        padding: 34px 28px;
        border-right: 1px solid var(--line)
    }

        .why-expect-grid article:last-child {
            border: 0
        }

        .why-expect-grid article:after {
            content: "";
            position: absolute;
            left: 28px;
            top: 78px;
            width: 38px;
            height: 3px;
            background: linear-gradient(90deg,var(--teal),var(--blue))
        }

    .why-expect-grid span {
        color: var(--teal);
        font: 700 8px var(--heading);
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .why-expect-grid h3 {
        margin: 70px 0 14px;
        font-size: 20px;
        line-height: 1.35
    }

    .why-expect-grid p {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.7
    }

.why-promise {
    padding-top: 25px
}

.why-promise-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: end;
    padding: 62px 66px;
    background: #fff;
    border-left: 5px solid #f0a02f
}

    .why-promise-panel small {
        color: #ef5c50;
        font: 700 8px var(--heading);
        letter-spacing: .14em;
        text-transform: uppercase
    }

    .why-promise-panel h2 {
        font-size: clamp(30px,3.5vw,48px)
    }

    .why-promise-panel blockquote {
        margin: 0;
        color: var(--muted);
        font: 500 19px/1.65 var(--heading)
    }

body:has(.why-opening) .page-hero {
    min-height: 0;
    padding-top: 132px;
    padding-bottom: 54px
}

body:has(.why-opening) .page-hero-inner {
    grid-template-columns: minmax(0,.9fr) minmax(460px,1.1fr);
    gap: 54px
}

body:has(.why-opening) .page-hero-art {
    min-height: 310px;
    align-self: center;
    margin: 0
}

    body:has(.why-opening) .page-hero-art:before, body:has(.why-opening) .hero-art-orbit {
        display: none
    }

    body:has(.why-opening) .page-hero-art img {
        width: min(100%,620px);
        height: auto;
        max-height: 340px;
        object-fit: contain;
        object-position: center;
        transform: none;
        filter: none;
        animation: none
    }

@media(max-width:1000px) {
    .why-advantage-grid {
        grid-template-columns: 1fr
    }

        .why-advantage-grid .why-advantage-feature {
            grid-row: auto;
            min-height: 500px
        }

    .why-expect-grid {
        grid-template-columns: 1fr 1fr
    }

        .why-expect-grid article:nth-child(2) {
            border-right: 0
        }

        .why-expect-grid article:nth-child(-n+2) {
            border-bottom: 1px solid var(--line)
        }
}

@media(max-width:760px) {
    .why-opening-grid, .why-international-grid, .why-promise-panel {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .why-signature {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 38px
    }

        .why-signature i {
            width: 1px;
            height: 30px;
            background: linear-gradient(#ef5c50,#f0a02f,var(--teal))
        }

            .why-signature i:after {
                right: -3px;
                top: auto;
                bottom: 0
            }

    .why-advantage-grid .why-advantage-feature {
        min-height: 480px;
        padding: 36px
    }

    .why-advantage-feature .why-large-icon {
        margin-top: 82px
    }

    .why-advantage-grid .why-advantage-feature h3 {
        font-size: 30px
    }

    .why-advantage-grid .why-advantage-feature b {
        left: 36px
    }

    .why-international {
        padding: 80px 0
    }

    .why-expect-grid {
        grid-template-columns: 1fr
    }

        .why-expect-grid article:nth-child(n) {
            border-right: 0;
            border-bottom: 1px solid var(--line)
        }

        .why-expect-grid article:last-child {
            border-bottom: 0
        }

    .why-promise-panel {
        padding: 42px 28px
    }

    body:has(.why-opening) .page-hero {
        padding: 106px 0 34px
    }

    body:has(.why-opening) .page-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px
    }

    body:has(.why-opening) .page-hero-art {
        width: min(100%,520px);
        min-height: 0;
        margin-inline: auto
    }

        body:has(.why-opening) .page-hero-art img {
            width: 100%;
            height: auto;
            max-height: none
        }
}

/* How we work: business-led delivery from priority to sustained performance. */
.how-opening {
    position: relative;
    overflow: hidden;
    background: #fff
}

    .how-opening:after {
        content: "";
        position: absolute;
        left: -12%;
        bottom: -78%;
        width: 38vw;
        aspect-ratio: 1;
        border: 1px solid #e6eaf1;
        border-radius: 50%;
        box-shadow: 0 0 0 54px rgba(239,165,47,.025),0 0 0 108px rgba(66,187,136,.018)
    }

.how-opening-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 110px
}

.how-opening-title h2, .how-rhythm-copy h2, .how-principles-panel h2 {
    margin: 20px 0 0;
    font-size: clamp(39px,4.5vw,59px);
    line-height: 1.12;
    letter-spacing: -.048em
}

    .how-opening-title h2 em, .how-principles-panel h2 em {
        font-style: normal;
        color: var(--blue)
    }

.how-manifesto {
    padding-top: 30px;
    color: var(--muted);
    font-size: 15px
}

    .how-manifesto p {
        margin: 0 0 20px
    }

    .how-manifesto .lead {
        color: var(--ink);
        font: 600 20px/1.52 var(--heading)
    }

.how-signature {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 55px;
    color: #7c8799;
    font: 700 8px var(--heading);
    letter-spacing: .11em;
    text-transform: uppercase
}

    .how-signature i {
        width: 58px;
        height: 1px;
        background: linear-gradient(90deg,#ef5c50,#efa52f,#42bb88);
        position: relative
    }

        .how-signature i:after {
            content: "";
            position: absolute;
            right: 0;
            top: -3px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #42bb88
        }

.how-stage-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    margin-top: 58px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

    .how-stage-grid li {
        position: relative;
        min-height: 430px;
        padding: 30px 25px 34px;
        border-right: 1px solid var(--line);
        background: #fff
    }

        .how-stage-grid li:last-child {
            border-right: 0
        }

        .how-stage-grid li:before {
            content: "";
            position: absolute;
            left: 0;
            top: -1px;
            width: 100%;
            height: 4px;
            background: var(--stage)
        }

    .how-stage-grid > li > span {
        color: var(--stage);
        font: 700 8px var(--heading);
        letter-spacing: .13em;
        text-transform: uppercase
    }

.how-stage-icon {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: 45px 0 35px;
    border-radius: 50%;
    background: color-mix(in srgb,var(--stage) 12%,white);
    color: var(--stage)
}

    .how-stage-icon svg, .how-role-icon svg {
        width: 40px;
        height: 40px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.55;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.how-stage-grid h3 {
    margin: 0 0 15px;
    font-size: 21px;
    line-height: 1.32
}

.how-stage-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.72
}

.how-stage-grid b {
    position: absolute;
    left: 25px;
    bottom: 28px;
    color: var(--stage);
    font: 700 8px var(--heading);
    letter-spacing: .08em;
    text-transform: uppercase
}

.how-rhythm {
    padding: 112px 0
}

.how-rhythm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 110px;
    align-items: center
}

.how-rhythm-copy h2 em {
    font-style: normal;
    color: var(--mint)
}

.how-rhythm-copy > p:last-child {
    max-width: 620px;
    margin-top: 28px;
    color: #aeb8cb;
    font-size: 14px;
    line-height: 1.8
}

.how-rhythm-list {
    border-top: 1px solid rgba(255,255,255,.16)
}

    .how-rhythm-list article {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 22px;
        align-items: center;
        padding: 23px 8px;
        border-bottom: 1px solid rgba(255,255,255,.16)
    }

    .how-rhythm-list i {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(137,225,213,.09);
        color: var(--mint);
        font: normal 8px var(--heading)
    }

    .how-rhythm-list b, .how-rhythm-list span {
        display: block
    }

    .how-rhythm-list b {
        font-size: 16px
    }

    .how-rhythm-list span {
        margin-top: 5px;
        color: #aeb8cb;
        font-size: 10px;
        line-height: 1.55
    }

.how-collaboration {
    background: #fff
}

.how-role-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

    .how-role-grid article {
        min-height: 345px;
        padding: 34px 28px;
        border-right: 1px solid var(--line)
    }

        .how-role-grid article:last-child {
            border: 0
        }

.how-role-icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin-bottom: 38px;
    border-radius: 50%;
    background: #edf8f6;
    color: #159ba6
}

.how-role-grid article:nth-child(2) .how-role-icon {
    background: #fff6e7;
    color: #e49a20
}

.how-role-grid article:nth-child(3) .how-role-icon {
    background: #fff0ee;
    color: #ef5c50
}

.how-role-grid article:nth-child(4) .how-role-icon {
    background: #f1edfb;
    color: #7554c8
}

.how-role-grid > article > span {
    color: var(--teal);
    font: 700 8px var(--heading);
    letter-spacing: .13em;
    text-transform: uppercase
}

.how-role-grid h3 {
    margin: 28px 0 14px;
    font-size: 20px;
    line-height: 1.35
}

.how-role-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7
}

.how-principles-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
    padding: 62px 66px;
    background: #fff;
    border-left: 5px solid #7554c8
}

    .how-principles-panel h2 {
        font-size: clamp(32px,3.8vw,50px)
    }

    .how-principles-panel ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0;
        padding: 0;
        list-style: none;
        border-top: 1px solid var(--line);
        border-left: 1px solid var(--line)
    }

    .how-principles-panel li {
        padding: 21px;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line)
    }

    .how-principles-panel b, .how-principles-panel span {
        display: block
    }

    .how-principles-panel b {
        font-size: 13px;
        line-height: 1.4
    }

    .how-principles-panel span {
        margin-top: 6px;
        color: var(--muted);
        font-size: 10px;
        line-height: 1.55
    }

body:has(.how-opening) .page-hero {
    min-height: 0;
    padding-top: 132px;
    padding-bottom: 54px
}

body:has(.how-opening) .page-hero-inner {
    grid-template-columns: minmax(0,.9fr) minmax(460px,1.1fr);
    gap: 54px
}

body:has(.how-opening) .page-hero-art {
    min-height: 310px;
    align-self: center;
    margin: 0
}

    body:has(.how-opening) .page-hero-art:before, body:has(.how-opening) .hero-art-orbit {
        display: none
    }

    body:has(.how-opening) .page-hero-art img {
        width: min(100%,620px);
        height: auto;
        max-height: 340px;
        object-fit: contain;
        object-position: center;
        transform: none;
        filter: none;
        animation: none
    }
/* Keep Company masthead copy on one shared top baseline regardless of copy length. */
body:has(.about-opening) .page-hero-inner,
body:has(.why-opening) .page-hero-inner,
body:has(.careers-opening) .page-hero-inner,
body:has(.how-opening) .page-hero-inner {
    align-items: start
}

body:has(.about-opening) .page-hero-copy,
body:has(.why-opening) .page-hero-copy,
body:has(.careers-opening) .page-hero-copy,
body:has(.how-opening) .page-hero-copy {
    align-self: start
}

@media(max-width:1100px) {
    .how-stage-grid {
        grid-template-columns: repeat(2,1fr)
    }

        .how-stage-grid li {
            border-bottom: 1px solid var(--line)
        }

            .how-stage-grid li:nth-child(even) {
                border-right: 0
            }

            .how-stage-grid li:last-child {
                grid-column: 1/-1;
                min-height: 360px
            }

    .how-role-grid {
        grid-template-columns: 1fr 1fr
    }

        .how-role-grid article:nth-child(2) {
            border-right: 0
        }

        .how-role-grid article:nth-child(-n+2) {
            border-bottom: 1px solid var(--line)
        }
}

@media(max-width:760px) {
    .how-opening-grid, .how-rhythm-grid, .how-principles-panel {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .how-signature {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 38px
    }

        .how-signature i {
            width: 1px;
            height: 30px;
            background: linear-gradient(#ef5c50,#efa52f,#42bb88)
        }

            .how-signature i:after {
                right: -3px;
                top: auto;
                bottom: 0
            }

    .how-stage-grid {
        grid-template-columns: 1fr
    }

        .how-stage-grid li:nth-child(n) {
            min-height: 380px;
            border-right: 0;
            border-bottom: 1px solid var(--line)
        }

        .how-stage-grid li:last-child {
            grid-column: auto;
            border-bottom: 0
        }

    .how-rhythm {
        padding: 80px 0
    }

    .how-role-grid {
        grid-template-columns: 1fr
    }

        .how-role-grid article:nth-child(n) {
            min-height: 305px;
            border-right: 0;
            border-bottom: 1px solid var(--line)
        }

        .how-role-grid article:last-child {
            border-bottom: 0
        }

    .how-principles-panel {
        padding: 42px 28px
    }

        .how-principles-panel ul {
            grid-template-columns: 1fr
        }

    body:has(.how-opening) .page-hero {
        padding: 106px 0 34px
    }

    body:has(.how-opening) .page-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px
    }

    body:has(.how-opening) .page-hero-art {
        width: min(100%,520px);
        min-height: 0;
        margin-inline: auto
    }

        body:has(.how-opening) .page-hero-art img {
            width: 100%;
            height: auto;
            max-height: none
        }
}

@media(prefers-reduced-motion:reduce) {
    .how-stage-grid li, .how-role-grid article {
        transition: none
    }

    body:has(.how-opening) .page-hero-art img {
        animation: none !important
    }
}

/* Shared closing CTA brand mark: keep the complete circular logo inside the panel.
   Margin-based centring is intentional because the reveal animation owns transform. */
.contact-card .contact-watermark {
    right: 23%;
    top: 50%;
    width: 180px;
    height: 180px;
    margin-top: -90px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    pointer-events: none;
}

    .contact-card .contact-watermark img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        filter: none;
        opacity: .14;
    }

@media(max-width:1000px) {
    .contact-card .contact-watermark {
        right: 18%;
    }
}

@media(max-width:760px) {
    .contact-card .contact-watermark {
        right: 18px;
        top: 22px;
        width: 112px;
        height: 112px;
        margin-top: 0;
    }
}

/* Home: ToqXcel international engagement connected to Toqsoft India delivery. */
.delivery-network {
    position: relative;
    overflow: hidden;
    background: #f7f9fc
}

    .delivery-network:before {
        content: "DELIVERY";
        position: absolute;
        right: -20px;
        top: -58px;
        color: #eef1f6;
        font: 800 170px/1 var(--heading);
        letter-spacing: -.07em;
        pointer-events: none
    }

.delivery-network-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 90px;
    align-items: end
}

    .delivery-network-head h2 {
        margin: 18px 0 0;
        font-size: clamp(38px,4.5vw,60px);
        line-height: 1.08;
        letter-spacing: -.05em
    }

        .delivery-network-head h2 em {
            font-style: normal;
            color: var(--blue)
        }

    .delivery-network-head > p {
        margin: 0 0 6px;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.8
    }

.delivery-network-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 150px 1fr;
    align-items: stretch;
    margin-top: 55px
}

.network-card {
    position: relative;
    min-height: 350px;
    padding: 42px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 18px 45px rgba(16,25,54,.06)
}

.network-card-toqxcel {
    border-top: 4px solid var(--blue)
}

.network-card-toqsoft {
    border-top: 4px solid var(--teal);
    background: linear-gradient(145deg,#fff 0%,#f2fbfa 100%)
}

.network-label {
    display: block;
    color: var(--blue);
    font: 700 10px/1.4 var(--heading);
    letter-spacing: .13em
}

.network-card-toqsoft .network-label {
    color: #138d83
}

.network-card h3 {
    margin: 38px 0 14px;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -.04em
}

.network-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75
}

.network-card ul {
    display: grid;
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none
}

.network-card li {
    position: relative;
    padding-left: 18px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 600
}

    .network-card li:before {
        content: "";
        position: absolute;
        left: 0;
        top: .65em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--teal)
    }

.network-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 17px;
    color: #8490a8;
    text-align: center;
    font: 700 8px/1.5 var(--heading);
    letter-spacing: .12em
}

    .network-connector i {
        position: relative;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg,var(--blue),var(--teal))
    }

        .network-connector i:before, .network-connector i:after {
            content: "";
            position: absolute;
            top: -4px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid var(--blue)
        }

        .network-connector i:before {
            left: -1px
        }

        .network-connector i:after {
            right: -1px;
            border-color: var(--teal)
        }

.delivery-network-foot {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: center;
    padding-top: 30px
}

    .delivery-network-foot p {
        max-width: 760px;
        margin: 0;
        color: var(--muted);
        font-size: 13px
    }

        .delivery-network-foot p strong {
            color: var(--ink)
        }

    .delivery-network-foot a {
        flex: none;
        color: var(--blue);
        text-decoration: none;
        font-size: 12px;
        font-weight: 700
    }

        .delivery-network-foot a span {
            margin-left: 18px;
            color: var(--teal)
        }

.presence-grid .presence-delivery-centre {
    background: #fff;
    box-shadow: inset 0 4px 0 var(--teal)
}

    .presence-grid .presence-delivery-centre small {
        color: #138d83;
        letter-spacing: .08em
    }

.presence-grid .presence-delivery-centre p {
        color: var(--ink);
        font-weight: 600
    }

/* Keep the closing CTA visually connected to the office-presence strip. */
.presence.section {
    padding-bottom: 0
}

.external-site-link,.presence-site-link{display:inline-flex;align-items:center;gap:10px;color:var(--blue);font-size:10px;font-weight:800;text-decoration:none}.external-site-link{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.presence-site-link{margin-top:13px}.external-site-link span,.presence-site-link span{color:var(--teal);transition:transform .25s}.external-site-link:hover span,.presence-site-link:hover span{transform:translate(3px,-3px)}

.footer-office .footer-website{display:grid;grid-template-columns:18px minmax(0,1fr);gap:5px;margin-top:5px;color:#75cfff;text-decoration:none}.footer-office .footer-website b{color:#fff;font-weight:700}

    .presence.section + .contact.section {
        padding-top: 18px
    }

/* Keep the shared CTA mark as a subtle bottom-right watermark. */
.contact-card .contact-watermark {
    right: 28px;
    top: auto;
    bottom: 20px;
    width: 120px;
    height: 120px;
    margin-top: 0
}

    .contact-card .contact-watermark img {
        opacity: .12
    }

.contact-card.visible .contact-watermark {
    animation: contact-mark-in .9s cubic-bezier(.2,.75,.2,1) .15s both
}

@media(max-width:1000px) {
    .delivery-network-head {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .delivery-network-grid {
        grid-template-columns: 1fr 100px 1fr
    }

    .network-card {
        padding: 32px;
        min-height: 385px
    }

    .contact-card .contact-watermark {
        right: 24px;
        top: auto;
        bottom: 18px;
        width: 108px;
        height: 108px;
        margin-top: 0
    }
}

@media(max-width:760px) {
    .delivery-network:before {
        font-size: 88px;
        top: -18px
    }

    .delivery-network-grid {
        grid-template-columns: 1fr;
        margin-top: 38px
    }

    .network-card {
        min-height: 0;
        padding: 32px 28px
    }

    .network-connector {
        min-height: 88px
    }

        .network-connector i {
            width: 1px;
            height: 48px;
            background: linear-gradient(var(--blue),var(--teal))
        }

            .network-connector i:before {
                left: -4px;
                top: -1px
            }

            .network-connector i:after {
                right: auto;
                left: -4px;
                top: auto;
                bottom: -1px
            }

    .delivery-network-foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px
    }

    .presence.section {
        padding-bottom: 0
    }

        .presence.section + .contact.section {
            padding-top: 16px
        }

    .contact-card .contact-watermark {
        display: none
    }
}
/* Page-aware social sharing */
.page-share{background:#eef3f8;border-top:1px solid #dce5ee;padding:22px 0}
.page-share-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.page-share p{display:flex;flex-direction:column;gap:3px;margin:0;color:#17243b}
.page-share p span{color:#637086;font-size:.86rem}
.page-share nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.page-share nav a{border:1px solid #cbd7e3;border-radius:999px;color:#25344d;font-size:.78rem;font-weight:700;padding:8px 13px;text-decoration:none;transition:border-color .2s ease,color .2s ease,background .2s ease}
.page-share nav a:hover,.page-share nav a:focus-visible{background:#fff;border-color:#126bff;color:#126bff}
@media(max-width:720px){.page-share-inner{align-items:flex-start;flex-direction:column}.page-share nav{justify-content:flex-start}}