:root {
        --navy: #07162E;
        --blue: #1767F2;
        --cyan: #57C6FF;
        --bg: #F7F9FC;
        --ink: #14213A;
        --mut: #53627b;
        --line: #e3e9f2;
        --r: 16px;
        --sh: 0 10px 30px rgba(7, 22, 46, .08)
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: 84px
    }

    body {
        margin: 0;
        font: 400 17px/1.7 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
        color: var(--ink);
        background: #fff;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased
    }

    /* Title: allow 1 or 2 lines */
    .pcard .cb h3 {
        line-height: 1.3;
        min-height: 2.6em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Description: maximum 3 lines */
    .pcard .cb p {
        line-height: 1.6;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Read case study on same line */
    .pcard .cb a.more {
        white-space: nowrap;
    }

    img,
    svg {
        max-width: 100%;
        height: auto;
        display: block
    }

    a {
        color: var(--blue);
        text-decoration: none
    }

    a:hover {
        text-decoration: underline
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: Manrope, 'DM Sans', system-ui, sans-serif;
        line-height: 1.18;
        color: var(--navy);
        letter-spacing: -.01em;
        margin: 0 0 .5em
    }

    h1 {
        font-size: clamp(2.2rem, 5vw, 3.7rem);
        font-weight: 800
    }

    h2 {
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        font-weight: 800
    }

    h3 {
        font-size: 1.25rem;
        font-weight: 700
    }

    h4 {
        font-size: 1.05rem
    }

    p {
        margin: 0 0 1em
    }

    h1,
    h2,
    h3,
    h4,
    p,
    li,
    dd {
        overflow-wrap: anywhere
    }

    .wrap {
        width: min(1180px, 100% - 40px);
        margin-inline: auto
    }

    .narrow {
        max-width: 820px
    }

    .skip {
        position: absolute;
        left: -999px;
        top: 8px;
        background: #fff;
        padding: 8px 14px;
        z-index: 99;
        border-radius: 8px
    }

    .skip:focus {
        left: 8px
    }

    :focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: 2px
    }

    /* header */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(4, 11, 28, .94);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, .08)
    }

    .bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        min-height: 76px
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 11px;
        color: #fff;
        text-decoration: none !important
    }

    .logo span {
        font: 800 21px/1 Manrope, sans-serif;
        letter-spacing: .14em
    }

    .logo small {
        display: block;
        font: 500 9px 'DM Sans';
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--cyan);
        margin-top: 4px
    }

    #site-nav {
        display: flex;
        align-items: center;
        gap: 22px
    }

    #site-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 4px
    }

    #site-nav a,
    #site-nav button {
        color: #e6eefb;
        font: 600 14px 'DM Sans', sans-serif;
        padding: 10px 11px;
        border-radius: 8px;
        background: none;
        border: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none
    }

    #site-nav a:hover,
    #site-nav button:hover,
    #site-nav a[aria-current] {
        color: var(--cyan)
    }

    .has-dd {
        position: relative
    }

    .dd {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 300px;
        background: #0b2147;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 14px;
        padding: 8px !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
        display: none !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 0 !important
    }

    .dd a {
        display: block !important;
        width: 100%
    }

    .dd a:hover {
        background: rgba(87, 198, 255, .1)
    }

    .dd-sep {
        font: 700 11px 'DM Sans';
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #7f95b8;
        padding: 10px 11px 4px
    }

    .has-dd:hover>.dd,
    .has-dd:focus-within>.dd,
    .has-dd.open>.dd {
        display: flex !important
    }

    .nav-toggle {
        display: none;
        background: none;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 10px;
        width: 44px;
        height: 44px;
        cursor: pointer;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px
    }

    .nav-toggle span {
        width: 20px;
        height: 2px;
        background: #fff;
        display: block
    }

    /* buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font: 700 15px Manrope, sans-serif;
        padding: 13px 24px;
        border-radius: 999px;
        border: 1.5px solid transparent;
        cursor: pointer;
        transition: .2s;
        text-decoration: none !important
    }

    .btn-primary {
        background: var(--blue);
        color: #fff !important;
        box-shadow: 0 8px 22px rgba(23, 103, 242, .35)
    }

    .btn-primary:hover {
        background: #0f56d6;
        transform: translateY(-1px)
    }

    .btn-ghost {
        border-color: rgba(255, 255, 255, .4);
        color: #fff !important
    }

    .btn-ghost:hover {
        background: rgba(255, 255, 255, .1)
    }

    .btn-ghost-d {
        border-color: var(--blue);
        color: var(--blue) !important
    }

    .btn-light {
        background: #fff;
        color: var(--navy) !important
    }

    .nav-cta {
        padding: 10px 20px !important;
        margin-left: 6px
    }

    .cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 26px
    }

    /* hero */
    .hero {
        background: radial-gradient(900px 500px at 85% -10%, rgba(87, 198, 255, .28), transparent 60%), linear-gradient(135deg, #07162E 0%, #0b2a5c 100%);
        color: #fff;
        padding: 64px 0 76px;
        position: relative;
        overflow: hidden
    }

    .hero h1 {
        color: #fff
    }

    .hgrid {
        display: grid;
        grid-template-columns: 1.15fr .85fr;
        gap: 48px;
        align-items: center
    }

    .hero .lead {
        font-size: 1.2rem;
        color: #cfdcf1;
        max-width: 640px
    }

    .eyebrow {
        font: 700 12px 'DM Sans';
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--cyan);
        margin: 0 0 12px
    }

    .hart img {
        border-radius: 22px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
        border: 1px solid rgba(255, 255, 255, .12)
    }

    .crumbs ol {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 0;
        margin: 0 0 22px;
        font-size: 13px;
        color: #9db3d4
    }

    .crumbs li+li::before {
        content: "/";
        margin-right: 6px;
        opacity: .6
    }

    .crumbs a {
        color: #bcd0ee
    }

    .meta {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 14px;
        margin: 30px 0 0;
        max-width: 640px
    }

    .meta div {
        background: rgba(255, 255, 255, .07);
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 12px;
        padding: 12px 16px
    }

    .meta dt {
        font: 700 11px 'DM Sans';
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--cyan)
    }

    .meta dd {
        margin: 2px 0 0;
        color: #fff
    }

    .postdate {
        color: #bcd0ee;
        margin-top: 16px
    }

    /* sections */
    .sec {
        padding: 80px 0
    }

    .alt {
        background: var(--bg)
    }

    .shead {
        max-width: 820px;
        margin-bottom: 36px
    }

    .shead .sub {
        font-size: 1.15rem;
        color: var(--mut);
        margin: .4em 0 0
    }

    .num {
        font: 800 14px Manrope;
        color: var(--blue);
        margin: 0 0 6px;
        letter-spacing: .14em
    }

    .num::before {
        content: "STEP ";
        color: var(--mut)
    }

    .prose {
        max-width: 820px
    }

    .prose p,
    .prose li,
    .sec p,
    .sec li {
        color: var(--mut)
    }

    .prose h3 {
        margin-top: 1.6em
    }

    .prose strong {
        color: var(--ink)
    }

    .list {
        padding-left: 0;
        list-style: none;
        margin: 0 0 1.2em
    }

    .list li {
        position: relative;
        padding-left: 28px;
        margin-bottom: 8px
    }

    .list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: .62em;
        width: 12px;
        height: 12px;
        border-radius: 4px;
        background: linear-gradient(135deg, var(--blue), var(--cyan))
    }

    .chips {
        list-style: none;
        padding: 0;
        margin: 0 0 1.4em;
        display: flex;
        flex-wrap: wrap;
        gap: 10px
    }

    .chips li {
        padding: 9px 18px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--line);
        font-weight: 600;
        color: var(--navy) !important;
        box-shadow: var(--sh)
    }

    blockquote {
        margin: 1.4em 0;
        padding: 18px 24px;
        border-left: 4px solid var(--blue);
        background: var(--bg);
        border-radius: 0 12px 12px 0
    }

    .grid {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr))
    }

    .g2 {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))
    }

    .g3 {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
    }

    .g4 {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr))
    }

    .card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r);
        overflow: hidden;
        box-shadow: var(--sh);
        transition: .25s;
        display: flex;
        flex-direction: column
    }

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(7, 22, 46, .14)
    }

    .card .ph {
        margin: 0
    }

    .card .cb {
        padding: 22px 24px 26px;
        flex: 1
    }

    .card h3 a {
        color: var(--navy)
    }

    .card .more {
        font: 700 14px Manrope;
        display: inline-block;
        margin-top: 6px
    }

    .card p,
    .card li {
        font-size: .97rem
    }

    .ph {
        margin: 0 0 20px
    }

    .ph img,
    .pth img {
        width: 100%;
        aspect-ratio: 10/7;
        object-fit: cover;
        border-radius: 12px
    }

    .card .ph img,
    .card .pth img {
        border-radius: 0
    }

    .pth {
        display: block
    }

    .ph.wide img {
        border-radius: 18px;
        margin-bottom: 28px
    }

    .split {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 48px;
        align-items: center
    }

    .filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 28px
    }

    .filters button {
        font: 600 14px 'DM Sans';
        padding: 9px 18px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: #fff;
        cursor: pointer;
        color: var(--ink)
    }

    .filters .on {
        background: var(--navy);
        color: #fff;
        border-color: var(--navy)
    }

    .cta-band {
        background: linear-gradient(120deg, #0b2a5c, #1767F2);
        color: #fff;
        padding: 70px 0;
        text-align: center
    }

    .cta-band h2 {
        color: #fff;
        max-width: 800px;
        margin-inline: auto
    }

    .cta-band p {
        color: #dbe8ff
    }

    .notice {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r);
        padding: 28px 30px;
        box-shadow: var(--sh)
    }

    /* contact */
    .csplit {
        display: grid;
        grid-template-columns: 1.5fr .8fr;
        gap: 56px
    }

    .csplit h2 {
        font-size: 1.7rem
    }

    .h3 {
        font-size: 1.2rem
    }

    .enq {
        display: grid;
        gap: 16px;
        margin-top: 24px
    }

    .fl {
        display: grid;
        gap: 6px;
        font-weight: 600;
        font-size: 14px
    }

    .fl input,
    .fl textarea {
        font: inherit;
        padding: 13px 15px;
        border: 1.5px solid var(--line);
        border-radius: 12px;
        background: #fff;
        width: 100%
    }

    .fl input:focus,
    .fl textarea:focus {
        border-color: var(--blue);
        outline: 0;
        box-shadow: 0 0 0 4px rgba(23, 103, 242, .12)
    }

    fieldset {
        border: 1.5px solid var(--line);
        border-radius: 12px;
        padding: 14px 18px
    }

    legend {
        font-weight: 700;
        padding: 0 8px
    }

    .opts {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        gap: 6px 16px
    }

    .chk {
        font-size: 15px;
        display: flex;
        gap: 8px;
        align-items: center
    }

    .small {
        font-size: 12px
    }

    .fstatus {
        font-weight: 600;
        margin: 0
    }

    .fstatus.err {
        color: #b42318
    }

    .fstatus.info {
        color: var(--navy);
        background: var(--bg);
        padding: 12px 14px;
        border-radius: 10px;
        border: 1px solid var(--line)
    }

    /* footer */
    .site-footer {
        background: #041027;
        color: #b9c9e3;
        padding: 64px 0 0;
        font-size: 15px
    }

    .fgrid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr;
        gap: 36px
    }

    .site-footer h2 {
        font-size: 13px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 14px
    }

    .site-footer .sp {
        margin-top: 24px
    }

    .site-footer ul {
        list-style: none;
        padding: 0;
        margin: 0
    }

    .site-footer li {
        margin-bottom: 8px
    }

    .site-footer a {
        color: #b9c9e3
    }

    .site-footer a:hover {
        color: var(--cyan)
    }

    .site-footer address {
        font-style: normal
    }

    .fbrand p {
        margin: 16px 0
    }

    .soc {
        display: flex !important;
        gap: 16px;
        flex-wrap: wrap
    }

    .soc.dark a {
        color: var(--blue)
    }

    .fbot {
        border-top: 1px solid rgba(255, 255, 255, .1);
        margin-top: 44px;
        padding: 22px 0
    }

    .copy {
        margin: 0;
        font-size: 14px;
        color: #9fb3d3
    }

    .js .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: .6s
    }

    .js .reveal.in {
        opacity: 1;
        transform: none
    }

    @media(prefers-reduced-motion:reduce) {
        * {
            transition: none !important;
            scroll-behavior: auto !important
        }

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

    @media(max-width:980px) {

        .hgrid,
        .split,
        .csplit {
            grid-template-columns: 1fr
        }

        .hart {
            display: none
        }

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

        .nav-toggle {
            display: flex
        }

        #site-nav {
            position: fixed;
            inset: 76px 0 0 0;
            background: #07162E;
            flex-direction: column;
            align-items: stretch;
            padding: 18px 20px 40px;
            overflow-y: auto;
            display: none
        }

        #site-nav.open {
            display: flex
        }

        #site-nav ul {
            flex-direction: column;
            align-items: stretch
        }

        #site-nav a,
        #site-nav button {
            width: 100%;
            justify-content: space-between;
            padding: 14px 8px;
            font-size: 16px
        }

        .dd {
            position: static;
            min-width: 0;
            box-shadow: none;
            background: transparent;
            border: 0;
            padding: 0 0 0 12px !important
        }

        .has-dd:hover>.dd,
        .has-dd:focus-within>.dd {
            display: none !important
        }

        .has-dd.open>.dd {
            display: flex !important
        }

        .nav-cta {
            margin: 12px 0 0 !important;
            justify-content: center !important
        }
    }

    @media(max-width:600px) {
        body {
            font-size: 16px
        }

        .sec {
            padding: 56px 0
        }

        .hero {
            padding: 44px 0 52px
        }

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

        .grid,
        .g2,
        .g3,
        .g4 {
            grid-template-columns: 1fr
        }
    }

    /* --- v2: mockup design --- */
    :root {
        --deep: #040b1c
    }

    .logo span {
        font-size: 24px;
        letter-spacing: .2em
    }

    .logo small {
        letter-spacing: .12em;
        font-size: 8.5px;
        margin-top: 5px
    }

    .nav-cta {
        border-radius: 6px !important;
        padding: 12px 20px !important
    }

    .btn {
        border-radius: 8px
    }

    .hero {
        background: radial-gradient(900px 500px at 85% -10%, rgba(23, 103, 242, .35), transparent 60%), var(--deep)
    }

    .eyebrow.dk {
        color: var(--blue)
    }

    .rowhead {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 32px
    }

    .rowhead .shead {
        margin-bottom: 0
    }

    .more {
        font: 600 14px 'DM Sans';
        color: var(--blue)
    }

    .hh {
        background: radial-gradient(1000px 600px at 75% 40%, rgba(23, 103, 242, .22), transparent 65%), var(--deep);
        color: #fff;
        padding: 64px 0 56px;
        overflow: hidden
    }

    .hhgrid {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: 24px;
        align-items: center
    }

    .hh h1 {
        color: #fff;
        font-size: clamp(2.3rem, 4.6vw, 3.6rem);
        margin-bottom: .45em
    }

    .grad {
        color: #2f7bff
    }

    .hh .lead {
        color: #d3deef;
        max-width: 520px;
        font-size: 1.05rem
    }

    .hstats {
        list-style: none;
        padding: 0;
        margin: 44px 0 0;
        display: flex;
        flex-wrap: wrap;
        gap: 28px
    }

    .hstats li {
        display: flex;
        gap: 12px;
        align-items: center;
        color: var(--cyan)
    }

    .hstats strong {
        display: block;
        font: 700 1.55rem/1 Manrope;
        color: #fff
    }

    .hstats span {
        font-size: 11.5px;
        color: #9db3d4
    }

    .globe {
        position: relative
    }

    .globe>img {
        width: 100%;
        max-width: 640px;
        margin-left: auto
    }

    .pills {
        position: absolute;
        inset: 0;
        pointer-events: none
    }

    .pill {
        position: absolute;
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(10, 28, 70, .72);
        border: 1px solid rgba(87, 198, 255, .3);
        backdrop-filter: blur(6px);
        border-radius: 12px;
        padding: 10px 16px;
        color: #fff !important;
        font: 600 13px/1.25 'DM Sans';
        max-width: 190px;
        text-decoration: none !important;
        transition: .2s
    }

    .pill:hover {
        border-color: var(--cyan);
        transform: translateY(-2px)
    }

    .pill .ic {
        color: var(--cyan);
        flex: none
    }

    .p1 {
        top: 2%;
        right: 6%
    }

    .p2 {
        top: 16%;
        left: 2%
    }

    .p3 {
        top: 38%;
        right: -2%
    }

    .p4 {
        top: 62%;
        left: 4%
    }

    .p5 {
        top: 72%;
        right: 0
    }

    .g5 {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 18px
    }

    .sol .cb {
        padding: 24px 20px
    }

    .sol .ic {
        color: var(--blue);
        margin-bottom: 14px
    }

    .sol h3 {
        font-size: 1.08rem
    }

    .sol p {
        color: var(--mut)
    }

    .trust {
        background: #061538;
        padding: 34px 0
    }

    .trust .eyebrow {
        text-align: center;
        color: #8fb4ff;
        margin-bottom: 18px
    }

    .trust ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px 46px
    }

    .trust li {
        font: 800 17px Manrope;
        color: #fff;
        opacity: .9;
        letter-spacing: .02em
    }

    .track {
        display: flex;
        gap: 22px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 4px 2px 18px;
        scrollbar-width: thin
    }

    .track .card {
        flex: 0 0 min(360px, 84%);
        scroll-snap-align: start
    }

    .track .card:hover {
        transform: none
    }

    .pcard .pth {
        position: relative
    }

    .tag {
        position: absolute;
        left: 12px;
        top: 12px;
        background: var(--blue);
        color: #fff;
        font: 600 11px 'DM Sans';
        padding: 4px 10px;
        border-radius: 4px
    }

    .car-nav {
        display: flex;
        justify-content: flex-end;
        gap: 10px
    }

    .car-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: #fff;
        font-size: 22px;
        cursor: pointer;
        color: var(--navy)
    }

    .car-btn:hover {
        background: var(--navy);
        color: #fff
    }

    .vision {
        background: radial-gradient(800px 400px at 80% 50%, rgba(23, 103, 242, .28), transparent 65%), var(--deep);
        color: #fff;
        padding: 64px 0
    }

    .vgrid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 48px;
        align-items: center
    }

    .vision h2 {
        color: #fff
    }

    .vision p {
        color: #c9d8ee;
        max-width: 440px
    }

    .vstats {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        text-align: center
    }

    .vstats li {
        padding: 0 10px;
        border-left: 1px solid rgba(255, 255, 255, .12)
    }

    .vstats li:first-child {
        border: 0
    }

    .vstats strong {
        display: block;
        font: 700 2.2rem/1.1 Manrope;
        color: #2f7bff;
        margin-top: 12px
    }

    .vstats li>span:last-child {
        font-size: 13px;
        color: #c9d8ee
    }

    .ring {
        display: inline-grid;
        place-items: center;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .25);
        color: #fff
    }

    .site-footer {
        background: var(--deep)
    }

    .frow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px 28px;
        padding-bottom: 30px;
        margin-bottom: 34px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        color: #d6e2f5
    }

    .frow>* {
        display: inline-flex;
        align-items: center;
        gap: 10px
    }

    .frow .ic {
        color: var(--cyan)
    }

    .fol {
        gap: 14px !important
    }

    @media(max-width:980px) {

        .hhgrid,
        .vgrid {
            grid-template-columns: 1fr
        }

        .pills {
            position: static;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 14px
        }

        .pill {
            position: static;
            max-width: none
        }

        .globe>img {
            margin: 0 auto
        }

        .vstats {
            grid-template-columns: repeat(2, 1fr);
            row-gap: 28px
        }

        .vstats li:nth-child(3) {
            border: 0
        }
    }

    @media(max-width:600px) {
        .hstats {
            gap: 20px
        }

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

    /* --- v3: motion, technologies, e-commerce --- */
    @keyframes up {
        from {
            opacity: 0;
            transform: translateY(22px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    @keyframes bob {
        50% {
            translate: 0 -9px
        }
    }

    @keyframes pulse {
        50% {
            opacity: .55;
            transform: scale(1.04)
        }
    }

    .hhgrid>div:first-child>* {
        animation: up .8s cubic-bezier(.2, .7, .2, 1) both
    }

    .hhgrid>div:first-child>:nth-child(2) {
        animation-delay: .1s
    }

    .hhgrid>div:first-child>:nth-child(3) {
        animation-delay: .2s
    }

    .hhgrid>div:first-child>:nth-child(4) {
        animation-delay: .3s
    }

    .hhgrid>div:first-child>:nth-child(5) {
        animation-delay: .4s
    }

    .globe {
        animation: up 1s .2s both
    }

    .globe::before {
        content: "";
        position: absolute;
        inset: 9% 9% 14%;
        border-radius: 50%;
        box-shadow: 0 0 110px 26px rgba(23, 103, 242, .4);
        animation: pulse 7s ease-in-out infinite
    }

    .globe>img,
    .pills {
        position: relative;
        z-index: 1
    }

    .pills {
        position: absolute;
        z-index: 2
    }

    .pill {
        animation: bob 6s ease-in-out infinite
    }

    .p2 {
        animation-delay: -1.2s
    }

    .p3 {
        animation-delay: -2.4s
    }

    .p4 {
        animation-delay: -3.6s
    }

    .p5 {
        animation-delay: -4.8s
    }

    .hstats li .ic {
        transition: .3s
    }

    .hstats li:hover .ic {
        transform: scale(1.15)
    }

    .tgrid {
        display: grid;
        gap: 22px;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
    }

    .tgrp {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r);
        padding: 24px;
        box-shadow: var(--sh);
        transition: border-color .25s, box-shadow .25s
    }

    .tgrp:hover {
        border-color: var(--blue);
        box-shadow: 0 16px 36px rgba(23, 103, 242, .15)
    }

    .tgrp h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.1rem;
        margin-bottom: 16px
    }

    .tgrp h3 .ic {
        color: var(--blue)
    }

    .tchips {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px
    }

    .tchips li {
        font: 600 13px 'DM Sans';
        padding: 6px 13px;
        border-radius: 999px;
        background: var(--bg);
        border: 1px solid var(--line);
        color: var(--navy) !important;
        transition: .2s
    }

    .tchips li:hover {
        background: var(--blue);
        border-color: var(--blue);
        color: #fff !important;
        transform: translateY(-2px)
    }

    .ecom {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 56px;
        align-items: center;
        margin-bottom: 48px
    }

    .ecom .sub {
        font-size: 1.1rem;
        color: var(--mut)
    }

    .ecimg img {
        border-radius: 20px;
        box-shadow: 0 30px 60px rgba(7, 22, 46, .25);
        animation: bob 8s ease-in-out infinite
    }

    .efeat .ic {
        color: var(--blue);
        margin-bottom: 12px
    }

    .efeat p {
        color: var(--mut)
    }

    @media(max-width:980px) {
        .ecom {
            grid-template-columns: 1fr
        }
    }

    @media(prefers-reduced-motion:reduce) {

        .hhgrid>div:first-child>*,
        .globe,
        .pill,
        .globe::before,
        .ecimg img {
            animation: none !important
        }
    }

    @media(min-width:1180px) {
        .tgrid {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    /* --- v4: mega menu, faq --- */
    .dd.mega {
        display: none !important;
        grid-template-columns: repeat(3, minmax(230px, 1fr));
        gap: 0 14px;
        min-width: 820px;
        left: 50%;
        transform: translateX(-32%);
        padding: 14px !important
    }

    #site-nav .dd.mega .grp ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-bottom: 10px
    }

    .dd.mega .dd-sep {
        margin: 0;
        padding: 6px 11px;
        color: var(--cyan)
    }

    .dd.mega .grp {
        list-style: none
    }

    .has-dd.open>.dd.mega {
        display: grid !important
    }

    @media(min-width:981px) {

        .has-dd:hover>.dd.mega,
        .has-dd:focus-within>.dd.mega {
            display: grid !important
        }

        .fgrid {
            grid-template-columns: 1.2fr 1fr 1.1fr 1.2fr 1.1fr
        }
    }

    @media(max-width:980px) {
        .dd.mega {
            min-width: 0;
            transform: none;
            grid-template-columns: 1fr;
            left: 0
        }
    }

    .faq details {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 12px;
        background: #fff
    }

    .faq summary {
        font: 700 1.05rem Manrope, sans-serif;
        cursor: pointer;
        color: var(--navy)
    }

    .faq details[open] summary {
        color: var(--blue);
        margin-bottom: 8px
    }

    .faq p {
        margin: 0
    }

    /* --- v5: premium motion --- */
    html.lenis,
    html.lenis body {
        height: auto
    }

    .lenis.lenis-smooth {
        scroll-behavior: auto !important
    }

    .lenis.lenis-stopped {
        overflow: hidden
    }

    .pre .hero :is(h1, .eyebrow, .lead, .cta-row, .crumbs, .meta, .postdate, .hart),
    .pre .hh :is(h1, .eyebrow, .lead, .cta-row, .hstats, .globe) {
        visibility: hidden
    }

    .hhgrid>div:first-child>*,
    .globe {
        animation: none !important
    }

    .hh,
    .hero,
    .vision,
    .cta-band {
        position: relative;
        overflow: hidden
    }

    .hero .wrap,
    .hh .wrap,
    .vision .wrap,
    .cta-band .wrap {
        position: relative;
        z-index: 1
    }

    .shapes {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        perspective: 900px
    }

    .shape {
        position: absolute;
        will-change: transform
    }

    .s1 {
        left: 47%;
        top: 3%
    }

    .s2 {
        right: 38%;
        bottom: 8%
    }

    .s3 {
        left: 52%;
        bottom: 16%
    }

    .s4 {
        right: 2%;
        top: 6%
    }

    .s5 {
        left: 6%;
        bottom: -30px
    }

    .b1 {
        left: -8%;
        top: -20%
    }

    .b2 {
        right: -6%;
        bottom: -30%
    }

    .b3 {
        left: -6%;
        top: -40%
    }

    .b4 {
        right: -8%;
        bottom: -50%
    }

    .blob {
        width: 460px;
        height: 460px;
        background: radial-gradient(circle at 30% 30%, rgba(23, 103, 242, .5), rgba(87, 198, 255, .12) 55%, transparent 70%);
        border-radius: 42% 58% 63% 37%/45% 38% 62% 55%;
        animation: morph 16s ease-in-out infinite, drift 26s ease-in-out infinite alternate
    }

    .b2 .blob,
    .b4 .blob {
        animation-delay: -6s
    }

    @keyframes morph {
        50% {
            border-radius: 61% 39% 35% 65%/58% 62% 38% 42%
        }
    }

    @keyframes drift {
        to {
            transform: translate(40px, 30px) rotate(40deg)
        }
    }

    .cube {
        --s: 64px;
        width: var(--s);
        height: var(--s);
        transform-style: preserve-3d;
        animation: cube 24s linear infinite
    }

    .cube.sm {
        --s: 34px;
        animation-duration: 16s;
        animation-direction: reverse
    }

    .cube i {
        position: absolute;
        inset: 0;
        border: 1px solid rgba(87, 198, 255, .6);
        background: linear-gradient(135deg, rgba(23, 103, 242, .35), rgba(87, 198, 255, .06))
    }

    .cube i:nth-child(1) {
        transform: translateZ(calc(var(--s)/2))
    }

    .cube i:nth-child(2) {
        transform: rotateY(90deg) translateZ(calc(var(--s)/2))
    }

    .cube i:nth-child(3) {
        transform: rotateY(180deg) translateZ(calc(var(--s)/2))
    }

    .cube i:nth-child(4) {
        transform: rotateY(-90deg) translateZ(calc(var(--s)/2))
    }

    .cube i:nth-child(5) {
        transform: rotateX(90deg) translateZ(calc(var(--s)/2))
    }

    .cube i:nth-child(6) {
        transform: rotateX(-90deg) translateZ(calc(var(--s)/2))
    }

    @keyframes cube {
        to {
            transform: rotateX(360deg) rotateY(360deg)
        }
    }

    .ring {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 9px solid rgba(87, 198, 255, .32);
        box-shadow: 0 0 30px rgba(23, 103, 242, .4), inset 0 0 20px rgba(87, 198, 255, .25);
        animation: ring 14s linear infinite
    }

    @keyframes ring {
        from {
            transform: rotateX(65deg) rotateZ(0)
        }

        to {
            transform: rotateX(65deg) rotateZ(360deg)
        }
    }

    .s5 .ring {
        width: 90px;
        height: 90px;
        border-width: 7px
    }

    .orb {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #bfe9ff, #1767F2 45%, #07162E);
        box-shadow: 0 0 40px rgba(87, 198, 255, .45);
        animation: bob 7s ease-in-out infinite
    }

    .ui {
        position: absolute;
        z-index: 2;
        pointer-events: none;
        background: rgba(10, 28, 70, .78);
        border: 1px solid rgba(87, 198, 255, .3);
        backdrop-filter: blur(6px);
        border-radius: 14px;
        padding: 12px 14px;
        color: #fff;
        font: 600 12px 'DM Sans'
    }

    .ui1 {
        left: 14%;
        bottom: 1%;
        width: 150px;
        animation: bob 7s ease-in-out infinite
    }

    .ui2 {
        right: 12%;
        bottom: -3%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        animation: bob 8s ease-in-out -2s infinite
    }

    .uit {
        color: var(--cyan);
        font-size: 11px;
        letter-spacing: .1em;
        text-transform: uppercase
    }

    .bars {
        display: flex;
        align-items: flex-end;
        gap: 6px;
        height: 44px;
        margin-top: 8px
    }

    .bars i {
        flex: 1;
        background: linear-gradient(180deg, var(--cyan), var(--blue));
        border-radius: 3px;
        animation: bar 3s ease-in-out infinite
    }

    .bars i:nth-child(1) {
        height: 40%
    }

    .bars i:nth-child(2) {
        height: 65%;
        animation-delay: -.4s
    }

    .bars i:nth-child(3) {
        height: 50%;
        animation-delay: -.8s
    }

    .bars i:nth-child(4) {
        height: 85%;
        animation-delay: -1.2s
    }

    .bars i:nth-child(5) {
        height: 70%;
        animation-delay: -1.6s
    }

    @keyframes bar {
        50% {
            transform: scaleY(.6);
            transform-origin: bottom
        }
    }

    .bub {
        background: var(--blue);
        padding: 8px 12px;
        border-radius: 12px 12px 12px 2px
    }

    .dots {
        display: flex;
        gap: 4px;
        padding-left: 6px
    }

    .dots i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--cyan);
        animation: dot 1.2s infinite
    }

    .dots i:nth-child(2) {
        animation-delay: .2s
    }

    .dots i:nth-child(3) {
        animation-delay: .4s
    }

    @keyframes dot {
        40% {
            transform: translateY(-4px);
            opacity: .5
        }
    }

    .hh::after {
        content: "";
        position: absolute;
        left: -5%;
        right: -5%;
        bottom: -1px;
        height: 46px;
        background: #fff;
        border-radius: 50% 50% 0 0/100% 100% 0 0;
        z-index: 1
    }

    .w {
        display: inline-block;
        overflow: hidden;
        vertical-align: top;
        padding-bottom: .1em;
        margin-bottom: -.1em
    }

    .w>span {
        display: inline-block;
        will-change: transform
    }

    .marq {
        overflow: hidden;
        margin-top: 6px;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)
    }

    .mt {
        display: flex;
        width: max-content;
        animation: mq 34s linear infinite
    }

    .marq:hover .mt {
        animation-play-state: paused
    }

    .trust .marq ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0 56px;
        padding-right: 56px
    }

    .trust li {
        white-space: nowrap
    }

    @keyframes mq {
        to {
            transform: translateX(-50%)
        }
    }

    .cta-band {
        background: linear-gradient(120deg, #0b2a5c, #1767F2, #0b2a5c, #1767F2);
        background-size: 300% 300%;
        animation: gshift 16s ease infinite
    }

    @keyframes gshift {
        50% {
            background-position: 100% 50%
        }
    }

    .hero,
    .hh {
        background-size: 140% 140%
    }

    .btn {
        position: relative;
        overflow: hidden
    }

    .btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35), transparent 70%);
        transform: translateX(-130%);
        transition: transform .7s
    }

    .btn:hover::after {
        transform: translateX(130%)
    }

    .btn [aria-hidden] {
        display: inline-block;
        margin-left: 6px;
        transition: transform .25s
    }

    .btn:hover [aria-hidden] {
        transform: translateX(5px)
    }

    .more [aria-hidden] {
        display: inline-block;
        transition: transform .25s
    }

    .more:hover [aria-hidden] {
        transform: translateX(5px)
    }

    .more:hover {
        text-decoration: none
    }

    #site-nav>ul>li>a,
    #site-nav>ul>li>button {
        position: relative
    }

    #site-nav>ul>li>a::before,
    #site-nav>ul>li>button::before {
        content: "";
        position: absolute;
        left: 11px;
        right: 11px;
        bottom: 4px;
        height: 2px;
        background: var(--cyan);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s
    }

    #site-nav>ul>li>a:hover::before,
    #site-nav>ul>li>button:hover::before,
    #site-nav>ul>li>a[aria-current]::before {
        transform: scaleX(1)
    }

    .bar {
        transition: min-height .3s
    }

    .site-header.scrolled .bar {
        min-height: 62px
    }

    .site-header.scrolled {
        box-shadow: 0 8px 30px rgba(0, 0, 0, .35)
    }

    .pbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 60;
        background: linear-gradient(90deg, var(--blue), var(--cyan));
        transform: scaleX(0);
        transform-origin: left;
        pointer-events: none
    }

    .pth,
    .ph,
    .ecimg {
        overflow: hidden
    }

    .pth img {
        transition: transform .6s
    }

    .card:hover .pth img {
        transform: scale(1.06)
    }

    @media(max-width:980px) {
        .ui {
            display: none
        }

        .s1 {
            left: 70%;
            top: 6%
        }

        .s2 {
            right: 6%;
            bottom: 4%
        }

        .s3,
        .s4 {
            display: none
        }

        .blob {
            width: 320px;
            height: 320px
        }
    }

    @media(max-width:600px) {
        .cube {
            --s: 44px
        }

        .ring {
            width: 80px;
            height: 80px
        }

        .s1 {
            left: 78%
        }
    }

    @media(prefers-reduced-motion:reduce) {

        .shape *,
        .blob,
        .ui,
        .ui *,
        .mt,
        .cta-band,
        .pbar {
            animation: none !important
        }
    }

    /* motion-safe card transitions: GSAP owns transform/opacity, CSS owns shadow + lift via translate */
    .card {
        transition: box-shadow .3s, border-color .3s, translate .3s
    }

    .card:hover {
        transform: none;
        translate: 0 -4px
    }

    .track .card:hover {
        translate: 0 -4px
    }

    .tchips li {
        transition: background .2s, color .2s, border-color .2s, translate .2s
    }

    .tchips li:hover {
        transform: none;
        translate: 0 -2px
    }

    .chips li {
        transition: translate .2s
    }

    #stories .track {
        padding-top: 8px
    }

    /* v6: no circular outline on globe; ecommerce pill */
    .p6 {
        top: 41%;
        left: -3%;
        animation-delay: -6s
    }

    .globe::before {
        display: none
    }

    /* v7: icon menus */
    #site-nav .dd .mi-l {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 8px 10px;
        border-radius: 10px;
        font-weight: 600
    }

    .mi {
        flex: none;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(87, 198, 255, .1);
        color: var(--cyan);
        transition: background .2s, color .2s, transform .2s
    }

    #site-nav .mi-l:hover .mi {
        background: var(--blue);
        color: #fff;
        transform: scale(1.06)
    }

    .mx {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
        text-align: left
    }

    .mx b {
        font-weight: 600
    }

    .mx small {
        font: 400 12px 'DM Sans', sans-serif;
        color: #8fa6c8;
        margin-top: 2px
    }

    .dd:not(.mega) {
        min-width: 300px
    }

    .dd.mega.mega-s {
        grid-template-columns: 1.25fr 1fr 1fr;
        min-width: 900px;
        transform: translateX(-14%)
    }

    .mfeat {
        list-style: none;
        background: linear-gradient(160deg, #123a7a, #0b2a5c);
        border: 1px solid rgba(87, 198, 255, .25);
        border-radius: 14px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-self: start
    }

    .mfeat h3 {
        color: #fff;
        font-size: 1.1rem;
        margin: 0
    }

    .mfeat p {
        color: #c9d8ee;
        font-size: 13px;
        margin: 0
    }

    .mfeat .eyebrow {
        color: var(--cyan);
        margin: 0
    }

    #site-nav .mfeat .btn {
        margin-top: 6px;
        padding: 10px 18px;
        font-size: 13px;
        justify-content: center;
        width: auto
    }

    .mbar {
        grid-column: 1/-1;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 22px;
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, .1);
        margin-top: 6px;
        padding: 10px 10px 0;
        font-size: 13px;
        color: #9db3d4
    }

    #site-nav .mbar a {
        padding: 4px 0;
        font-size: 13px;
        width: auto;
        color: var(--cyan)
    }

    @media(max-width:980px) {
        .dd.mega.mega-s {
            min-width: 0;
            transform: none;
            grid-template-columns: 1fr
        }

        .mx small {
            display: none
        }

        .mfeat {
            margin: 8px 0
        }
    }

    #site-nav .btn-primary {
        background: var(--blue)
    }

    #site-nav .btn-primary:hover {
        background: #0f56d6;
        color: #fff
    }

    /* v7b: compact 4-column services mega */
    .dd.mega .mi {
        width: 32px;
        height: 32px;
        border-radius: 9px
    }

    #site-nav .dd.mega .mi-l {
        padding: 6px 8px;
        gap: 10px;
        font-size: 13.5px
    }

    .dd.mega:not(.mega-s) {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
        min-width: 640px;
        transform: translateX(-30%)
    }

    @media(min-width:1200px) {
        .dd.mega:not(.mega-s) {
            grid-template-columns: repeat(4, minmax(220px, 1fr));
            min-width: 1080px;
            transform: translateX(-42%)
        }
    }

    @media(max-width:980px) {
        .dd.mega:not(.mega-s) {
            min-width: 0;
            transform: none;
            grid-template-columns: 1fr
        }
    }

    @media(min-width:981px) {
        .dd.mega {
            max-height: calc(100vh - 96px);
            overflow-y: auto;
            overscroll-behavior: contain
        }
    }

    /* v8: forms backed by PHP */
    .hp {
        position: absolute !important;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden
    }

    .jobgrid {
        display: grid;
        grid-template-columns: 1.3fr .9fr;
        gap: 48px;
        align-items: start
    }

    .applybox {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--r);
        padding: 26px;
        box-shadow: var(--sh);
        position: sticky;
        top: 96px
    }

    .applybox h2 {
        font-size: 1.3rem
    }

    .fl input[type=file] {
        padding: 10px;
        background: var(--bg)
    }

    .genapp {
        margin-top: 24px
    }

    .allj {
        margin-top: 24px
    }

    .fstatus.info {
        display: block
    }

    @media(max-width:980px) {
        .jobgrid {
            grid-template-columns: 1fr
        }

        .applybox {
            position: static
        }
    }
/* Mobile menu fix: .site-header has backdrop-filter, which makes it the containing block for
   the fixed #site-nav, so the panel was sized to the header (about 58px tall). Give it the viewport height. */
@media (max-width: 980px) {
    #site-nav.open {
        bottom: auto;
        height: calc(100vh - 76px);
        height: calc(100dvh - 76px);
    }
}