/* ============================================================
   BLUETRAIL LOGISTICS — DESIGN SYSTEM
   ============================================================ */

        @font-face {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400 700;
            font-display: swap;
            src: url('../fonts/inter-var.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Instrument Serif';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('../fonts/instrument-serif-400.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Instrument Serif';
            font-style: italic;
            font-weight: 400;
            font-display: swap;
            src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2');
        }

        :root {
            --navy-900: #03070F;
            --navy-850: #050B1A;
            --navy-800: #071026;
            --navy-700: #0B1A36;
            --navy-600: #122748;
            --blue-600: #0F3FD8;
            --blue-500: #1E5BFF;
            --blue-400: #4B84FF;
            --blue-300: #8FB2FF;
            --ink: #0A1424;
            --ink-70: #3C4A60;
            --ink-50: #66748C;
            --paper: #FFFFFF;
            --paper-alt: #F5F7FB;
            --paper-alt2: #EDF1F8;
            --line: #DFE5F0;
            --line-dark: rgba(255, 255, 255, .12);
            --radius: 4px;
            --radius-lg: 6px;
            --shadow-sm: 0 1px 2px rgba(10, 20, 36, .06), 0 4px 12px rgba(10, 20, 36, .05);
            --shadow-md: 0 2px 4px rgba(10, 20, 36, .05), 0 12px 32px rgba(10, 20, 36, .08);
            --shadow-lg: 0 24px 70px rgba(5, 11, 26, .18);
            --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
            --maxw: 1280px;
            --gut: clamp(20px, 4vw, 56px);
            --ease: cubic-bezier(.22, .61, .36, 1);
        }

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

        html {
            -webkit-text-size-adjust: 100%;
            scroll-behavior: smooth
        }

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

        body {
            margin: 0;
            background: var(--paper);
            color: var(--ink);
            font-family: var(--sans);
            font-size: 16.5px;
            line-height: 1.62;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            display: block
        }

        a {
            color: inherit
        }

        button {
            font: inherit
        }

        /* Focus */
        :focus-visible {
            outline: 2px solid var(--blue-500);
            outline-offset: 3px;
            border-radius: 2px
        }

        .on-dark :focus-visible {
            outline-color: #9FBEFF
        }

        .skip {
            position: absolute;
            left: -9999px;
            top: 0;
            z-index: 999;
            background: #fff;
            color: var(--navy-850);
            padding: 12px 20px;
            font-weight: 600;
            border-radius: 0 0 6px 0
        }

        .skip:focus {
            left: 0
        }

        /* Layout */
        .wrap {
            max-width: var(--maxw);
            margin-inline: auto;
            padding-inline: var(--gut)
        }

        .sec {
            padding: clamp(72px, 9vw, 132px) 0
        }

        .sec--tight {
            padding: clamp(56px, 6vw, 88px) 0
        }

        /* Typography */
        h1,
        h2,
        h3,
        h4 {
            margin: 0;
            font-weight: 600;
            letter-spacing: -.022em;
            line-height: 1.1
        }

        .h-display {
            font-size: clamp(2.6rem, 6.6vw, 5.2rem);
            line-height: .99;
            letter-spacing: -.038em;
            font-weight: 600
        }

        .h1 {
            font-size: clamp(2.2rem, 4.6vw, 3.6rem);
            letter-spacing: -.032em
        }

        .h2 {
            font-size: clamp(1.9rem, 3.6vw, 3rem);
            letter-spacing: -.03em
        }

        .h3 {
            font-size: clamp(1.15rem, 1.6vw, 1.4rem);
            letter-spacing: -.018em
        }

        .serif-it {
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            letter-spacing: -.01em
        }

        .lead {
            font-size: clamp(1.02rem, 1.25vw, 1.16rem);
            line-height: 1.65;
            color: var(--ink-70);
            max-width: 62ch
        }

        .small {
            font-size: .855rem;
            line-height: 1.6
        }

        .mono-label {
            font-size: .685rem;
            font-weight: 600;
            letter-spacing: .19em;
            text-transform: uppercase;
            color: var(--blue-600);
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .mono-label::before {
            content: "";
            width: 26px;
            height: 1px;
            background: currentColor;
            opacity: .55
        }

        .on-dark .mono-label {
            color: var(--blue-300)
        }

        .on-dark {
            color: #EAF0FB
        }

        .on-dark .lead {
            color: rgba(226, 235, 250, .72)
        }

        /* Buttons */
        .btn {
            --bg: var(--blue-600);
            --fg: #fff;
            --bd: transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 15px 26px;
            background: var(--bg);
            color: var(--fg);
            border: 1px solid var(--bd);
            border-radius: var(--radius);
            font-weight: 600;
            font-size: .94rem;
            letter-spacing: -.005em;
            text-decoration: none;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
            box-shadow: 0 1px 2px rgba(15, 63, 216, .24), 0 10px 26px -10px rgba(15, 63, 216, .6);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(15, 63, 216, .18), 0 18px 40px -14px rgba(15, 63, 216, .72)
        }

        .btn:active {
            transform: translateY(0)
        }

        .btn .arw {
            transition: transform .35s var(--ease)
        }

        .btn:hover .arw {
            transform: translateX(4px)
        }

        .btn--ghost {
            --bg: transparent;
            --fg: var(--ink);
            --bd: var(--line);
            box-shadow: none
        }

        .btn--ghost:hover {
            --bd: var(--ink);
            box-shadow: var(--shadow-sm)
        }

        .btn--glass {
            --bg: rgba(255, 255, 255, .08);
            --fg: #fff;
            --bd: rgba(255, 255, 255, .28);
            box-shadow: none;
            backdrop-filter: blur(10px)
        }

        .btn--glass:hover {
            --bg: rgba(255, 255, 255, .16);
            --bd: rgba(255, 255, 255, .5);
            box-shadow: none
        }

        .btn--light {
            --bg: #fff;
            --fg: var(--navy-850);
            box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5)
        }

        .btn--sm {
            padding: 11px 18px;
            font-size: .87rem
        }

        .txtlink {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            font-size: .9rem;
            color: var(--blue-600);
            text-decoration: none;
            padding-bottom: 2px;
            background-image: linear-gradient(currentColor, currentColor);
            background-size: 0% 1px;
            background-repeat: no-repeat;
            background-position: 0 100%;
            transition: background-size .4s var(--ease);
        }

        .txtlink:hover {
            background-size: 100% 1px
        }

        .txtlink .arw {
            transition: transform .35s var(--ease)
        }

        .txtlink:hover .arw {
            transform: translateX(4px)
        }

        /* ---------- HEADER ---------- */
        .hdr {
            position: fixed;
            inset: 0 0 auto 0;
            z-index: 120;
            transition: background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), backdrop-filter .4s;
            border-bottom: 1px solid transparent;
        }

        .admin-bar .hdr {
            top: 32px
        }

        @media (max-width: 782px) {
            .admin-bar .hdr {
                top: 46px
            }
        }

        .hdr__in {
            display: flex;
            align-items: center;
            gap: clamp(18px, 3vw, 44px);
            height: 78px;
            transition: height .4s var(--ease)
        }

        .hdr.is-stuck {
            background: rgba(255, 255, 255, .88);
            backdrop-filter: saturate(180%) blur(18px);
            border-bottom-color: var(--line);
            box-shadow: 0 1px 26px rgba(10, 20, 36, .07)
        }

        .hdr.is-stuck .hdr__in {
            height: 66px
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 11px;
            text-decoration: none;
            flex: 0 0 auto
        }

        .brand__mark {
            width: 38px;
            height: 38px;
            flex: 0 0 auto
        }

        .brand .custom-logo-link {
            display: flex;
            align-items: center;
            flex: 0 0 auto
        }

        .brand .custom-logo-link img.custom-logo {
            width: auto !important;
            height: 40px !important;
            max-height: 40px !important;
            max-width: 120px;
            object-fit: contain
        }

        .brand__txt {
            display: flex;
            flex-direction: column;
            line-height: 1
        }

        .brand__name {
            font-weight: 700;
            font-size: 1.02rem;
            letter-spacing: -.02em;
            color: #fff;
            transition: color .4s var(--ease)
        }

        .brand__sub {
            font-size: .575rem;
            letter-spacing: .22em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .6);
            margin-top: 4px;
            transition: color .4s var(--ease)
        }

        .hdr.is-stuck .brand__name {
            color: var(--navy-850)
        }

        .hdr.is-stuck .brand__sub {
            color: var(--ink-50)
        }

        .brand__mark .bm-hull {
            fill: var(--blue-400)
        }

        .brand__mark .bm-sail {
            fill: #fff
        }

        .hdr.is-stuck .brand__mark .bm-hull {
            fill: var(--blue-600)
        }

        .hdr.is-stuck .brand__mark .bm-sail {
            fill: var(--navy-850)
        }

        .nav {
            display: flex;
            align-items: center;
            gap: 2px;
            margin-left: auto
        }

        .nav a {
            position: relative;
            text-decoration: none;
            font-size: .905rem;
            font-weight: 500;
            color: rgba(255, 255, 255, .86);
            padding: 9px 14px;
            border-radius: var(--radius);
            transition: color .3s, background .3s;
        }

        .nav a::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 4px;
            height: 1.5px;
            background: currentColor;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .4s var(--ease);
        }

        .nav a:hover::after,
        .nav a[aria-current="page"]::after {
            transform: scaleX(1)
        }

        .hdr.is-stuck .nav a {
            color: var(--ink-70)
        }

        .hdr.is-stuck .nav a:hover {
            color: var(--navy-850)
        }

        .nav a[aria-current="page"] {
            color: #fff
        }

        .hdr.is-stuck .nav a[aria-current="page"] {
            color: var(--blue-600)
        }

        .hdr__cta {
            margin-left: clamp(8px, 1.6vw, 20px);
            display: flex;
            align-items: center;
            gap: 10px
        }

        .hdr__tel {
            display: none;
            font-size: .88rem;
            font-weight: 600;
            color: rgba(255, 255, 255, .9);
            text-decoration: none;
            white-space: nowrap
        }

        .hdr.is-stuck .hdr__tel {
            color: var(--navy-850)
        }

        @media(min-width:1120px) {
            .hdr__tel {
                display: inline-flex;
                align-items: center;
                gap: 7px
            }
        }

        .burger {
            display: none;
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            background: none;
            border: 1px solid rgba(255, 255, 255, .28);
            border-radius: var(--radius);
            cursor: pointer;
            margin-left: auto
        }

        .hdr.is-stuck .burger {
            border-color: var(--line)
        }

        .burger span {
            display: block;
            width: 19px;
            height: 1.6px;
            background: #fff;
            position: relative;
            transition: background .3s
        }

        .burger span::before,
        .burger span::after {
            content: "";
            position: absolute;
            left: 0;
            width: 19px;
            height: 1.6px;
            background: #fff;
            transition: transform .4s var(--ease), background .3s
        }

        .burger span::before {
            top: -6px
        }

        .burger span::after {
            top: 6px
        }

        .hdr.is-stuck .burger span,
        .hdr.is-stuck .burger span::before,
        .hdr.is-stuck .burger span::after {
            background: var(--navy-850)
        }

        body.menu-open .burger span {
            background: transparent !important
        }

        body.menu-open .burger span::before {
            transform: translateY(6px) rotate(45deg)
        }

        body.menu-open .burger span::after {
            transform: translateY(-6px) rotate(-45deg)
        }

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

            .hdr__cta .btn {
                display: none
            }

            .burger {
                display: flex
            }
        }

        /* Mobile drawer */
        .drawer {
            position: fixed;
            inset: 0;
            z-index: 110;
            background: var(--navy-850);
            padding: 100px var(--gut) 40px;
            display: flex;
            flex-direction: column;
            transform: translateY(-100%);
            visibility: hidden;
            transition: transform .55s var(--ease), visibility 0s linear .55s;
            overflow-y: auto;
            counter-reset: dnav;
        }

        .nav li,
        .drawer li {
            display: contents
        }

        body.menu-open .drawer {
            transform: translateY(0);
            visibility: visible;
            transition: transform .55s var(--ease), visibility 0s
        }

        .drawer li a {
            display: flex;
            align-items: baseline;
            gap: 14px;
            text-decoration: none;
            color: #fff;
            font-size: 2rem;
            font-weight: 600;
            letter-spacing: -.03em;
            padding: 16px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .1);
            opacity: 0;
            transform: translateY(14px);
            transition: opacity .5s var(--ease), transform .5s var(--ease);
        }

        body.menu-open .drawer li a {
            opacity: 1;
            transform: none
        }

        .drawer li a::before {
            counter-increment: dnav;
            content: counter(dnav, decimal-leading-zero);
            font-style: normal;
            font-size: .66rem;
            letter-spacing: .16em;
            color: var(--blue-400);
            font-weight: 600
        }

        .drawer__foot {
            margin-top: auto;
            padding-top: 36px;
            color: rgba(255, 255, 255, .6);
            font-size: .88rem
        }

        .drawer__foot a {
            color: #fff;
            text-decoration: none;
            display: block;
            font-weight: 600;
            font-size: 1.05rem;
            margin-bottom: 6px
        }

        /* ---------- HERO ---------- */
        .hero {
            position: relative;
            min-height: min(94vh, 900px);
            display: flex;
            align-items: flex-end;
            overflow: hidden;
            background: var(--navy-850)
        }

        .hero__media {
            position: absolute;
            inset: 0;
            z-index: 0
        }

        .hero__media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .72;
            transition: transform 14s linear
        }

        .hero.is-in .hero__media img {
            transform: scale(1.07)
        }

        .hero__media::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(3, 7, 15, .86) 0%, rgba(3, 7, 15, .42) 34%, rgba(3, 7, 15, .72) 72%, rgba(3, 7, 15, .96) 100%),
                linear-gradient(90deg, rgba(3, 7, 15, .82) 0%, rgba(3, 7, 15, .18) 62%);
        }

        .hero__fx {
            position: absolute;
            inset: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0;
            transition: opacity 1.6s var(--ease)
        }

        .hero__fx.on {
            opacity: 1
        }

        .hero__scan {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
            overflow: hidden;
        }

        .hero__scan::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            height: 38vh;
            top: 0;
            background: linear-gradient(180deg, transparent, rgba(75, 132, 255, .06) 55%, rgba(143, 178, 255, .11) 82%, transparent);
            will-change: transform;
            animation: scanDown 9s cubic-bezier(.5, 0, .5, 1) infinite;
        }

        @keyframes scanDown {
            0% {
                transform: translate3d(0, -45vh, 0);
                opacity: 0
            }

            12% {
                opacity: 1
            }

            88% {
                opacity: 1
            }

            100% {
                transform: translate3d(0, 105vh, 0);
                opacity: 0
            }
        }

        .hero__grid {
            position: absolute;
            inset: 0;
            z-index: 1;
            opacity: .16;
            pointer-events: none;
            background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
            background-size: 100% 140px, 12.5% 100%;
            mask-image: radial-gradient(120% 80% at 70% 40%, #000 10%, transparent 72%);
        }

        .hero__in {
            position: relative;
            z-index: 2;
            width: 100%;
            padding-top: 150px;
            padding-bottom: clamp(36px, 5vw, 64px)
        }

        .hero__eyebrow {
            color: var(--blue-300);
            margin-bottom: 26px
        }

        .hero h1 {
            color: #fff;
            max-width: 15ch;
            margin-bottom: 26px
        }

        .hero h1 em {
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            color: #fff
        }

        .hero__sub {
            color: rgba(232, 239, 250, .82);
            font-size: clamp(1.02rem, 1.35vw, 1.22rem);
            max-width: 56ch;
            margin: 0 0 34px
        }

        .hero__acts {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            margin-bottom: clamp(40px, 5vw, 60px)
        }

        .hero__scroll {
            position: absolute;
            right: var(--gut);
            bottom: clamp(36px, 5vw, 64px);
            z-index: 3;
            writing-mode: vertical-rl;
            font-size: .66rem;
            letter-spacing: .24em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .5);
            display: none;
            align-items: center;
            gap: 14px;
        }

        @media(min-width:1100px) {
            .hero__scroll {
                display: flex
            }
        }

        .hero__scroll::after {
            content: "";
            width: 1px;
            height: 64px;
            background: linear-gradient(rgba(255, 255, 255, .6), transparent)
        }

        @media(max-width:600px) {
            .hero {
                min-height: 0
            }

            .hero__in {
                padding-top: 120px
            }

            .hero .h-display {
                font-size: 2.18rem;
                letter-spacing: -.028em;
                max-width: none;
                line-height: 1.06
            }

            .hero__sub {
                font-size: 1rem
            }

            .hero__eyebrow {
                margin-bottom: 18px;
                font-size: .62rem;
                letter-spacing: .15em
            }

            .hero__acts {
                gap: 10px
            }

            .hero__acts .btn {
                flex: 1 1 100%
            }
        }

        /* Quote panel */
        .qpanel {
            background: rgba(255, 255, 255, .07);
            backdrop-filter: blur(22px) saturate(160%);
            border: 1px solid rgba(255, 255, 255, .16);
            border-radius: var(--radius-lg);
            padding: 8px;
            display: grid;
            gap: 8px;
            grid-template-columns: 1fr;
            max-width: 940px;
            box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
        }

        @media(min-width:820px) {
            .qpanel {
                grid-template-columns: 1fr 1fr 1fr auto;
                align-items: stretch
            }
        }

        .qfield {
            position: relative;
            padding: 12px 16px 11px;
            border-radius: var(--radius);
            background: rgba(255, 255, 255, .05);
            transition: background .3s
        }

        .qfield:focus-within {
            background: rgba(255, 255, 255, .13)
        }

        .qfield label {
            display: block;
            font-size: .62rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .56);
            margin-bottom: 4px;
            font-weight: 600
        }

        .qfield input,
        .qfield select {
            width: 100%;
            background: none;
            border: 0;
            color: #fff;
            font-size: .95rem;
            font-weight: 500;
            padding: 0;
            outline: none;
        }

        .qfield input::placeholder {
            color: rgba(255, 255, 255, .42)
        }

        .qfield select option {
            background: var(--navy-800);
            color: #fff
        }

        .qpanel .btn {
            border-radius: var(--radius);
            white-space: nowrap
        }

        .qnote {
            font-size: .75rem;
            color: rgba(255, 255, 255, .66);
            margin-top: 12px;
            max-width: 70ch
        }

        /* ---------- MARQUEE / CAPABILITY STRIP ---------- */
        .strip {
            background: var(--navy-850);
            color: #fff;
            padding: 0;
            overflow: hidden;
            border-top: 1px solid rgba(255, 255, 255, .07)
        }

        .strip__row {
            display: flex;
            gap: 0;
            align-items: stretch;
            overflow-x: auto;
            scrollbar-width: none
        }

        .strip__row::-webkit-scrollbar {
            display: none
        }

        .strip__item {
            flex: 1 0 auto;
            min-width: 220px;
            padding: 34px clamp(18px, 2.4vw, 34px);
            border-right: 1px solid rgba(255, 255, 255, .08);
            display: flex;
            flex-direction: column;
            gap: 8px;
            transition: background .4s var(--ease);
        }

        .strip__item:last-child {
            border-right: 0
        }

        .strip__item:hover {
            background: rgba(255, 255, 255, .04)
        }

        .strip__item b {
            font-size: .98rem;
            font-weight: 600;
            letter-spacing: -.01em;
            display: flex;
            align-items: center;
            gap: 10px
        }

        .strip__item span {
            font-size: .83rem;
            color: rgba(226, 235, 250, .6);
            line-height: 1.5
        }

        .strip__item svg {
            width: 19px;
            height: 19px;
            stroke: var(--blue-400);
            fill: none;
            stroke-width: 1.5;
            flex: 0 0 auto
        }

        /* ---------- SECTION HEAD ---------- */
        .shead {
            display: grid;
            gap: 26px;
            margin-bottom: clamp(40px, 5vw, 64px)
        }

        @media(min-width:960px) {
            .shead {
                grid-template-columns: 1.15fr .85fr;
                align-items: end;
                gap: 56px
            }
        }

        .shead__t {
            margin-top: 16px
        }

        /* ---------- SERVICES ---------- */
        .svc-grid {
            position: relative;
            display: grid;
            gap: 1px;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            overflow: hidden
        }

        .svc-grid::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 2px;
            width: 22%;
            z-index: 3;
            pointer-events: none;
            background: linear-gradient(90deg, transparent, var(--blue-500), transparent);
            animation: svcSweep 7s linear infinite;
        }

        @keyframes svcSweep {
            from {
                transform: translateX(-100%)
            }

            to {
                transform: translateX(460%)
            }
        }

        @media(min-width:700px) {
            .svc-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

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

        .svc {
            position: relative;
            background: var(--paper);
            padding: 0;
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
            min-height: 340px;
            overflow: hidden;
            isolation: isolate;
        }

        .svc__img {
            position: relative;
            height: 150px;
            overflow: hidden;
            background: var(--navy-700)
        }

        .svc__img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.02);
            transition: transform 1s var(--ease)
        }

        .svc:hover .svc__img img {
            transform: scale(1.09)
        }

        .svc__img::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(5, 11, 26, .15), rgba(5, 11, 26, .55))
        }

        .svc__num {
            position: absolute;
            z-index: 2;
            top: 12px;
            left: 14px;
            font-size: .66rem;
            letter-spacing: .18em;
            font-weight: 600;
            color: rgba(255, 255, 255, .82);
        }

        .svc__body {
            padding: 22px 22px 24px;
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: 10px
        }

        .svc__body h3 {
            font-size: 1.08rem;
            letter-spacing: -.02em
        }

        .svc__body p {
            margin: 0;
            font-size: .885rem;
            color: var(--ink-70);
            line-height: 1.6
        }

        .svc__tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: auto;
            padding-top: 14px
        }

        .svc__tags span {
            font-size: .7rem;
            color: var(--ink-50);
            border: 1px solid var(--line);
            padding: 4px 9px;
            border-radius: 100px
        }

        .svc__more {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin-top: 14px;
            font-size: .83rem;
            font-weight: 600;
            color: var(--blue-600);
            opacity: .001;
            transform: translateY(6px);
            transition: opacity .4s var(--ease), transform .4s var(--ease);
        }

        .svc:hover .svc__more,
        .svc:focus-visible .svc__more {
            opacity: 1;
            transform: none
        }

        @media(hover:none) {
            .svc__more {
                opacity: 1;
                transform: none
            }
        }

        .svc::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: var(--blue-600);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .5s var(--ease)
        }

        .svc:hover::after {
            transform: scaleX(1)
        }

        /* ---------- WHY (editorial) ---------- */
        .why {
            background: var(--navy-850);
            color: #fff;
            position: relative;
            overflow: hidden
        }

        .why::before {
            content: "";
            position: absolute;
            width: 900px;
            height: 900px;
            right: -280px;
            top: -320px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(30, 91, 255, .24), transparent 62%);
            pointer-events: none;
            animation: breathe 13s ease-in-out infinite;
        }

        .why__grid {
            display: grid;
            gap: clamp(34px, 5vw, 72px)
        }

        @media(min-width:1000px) {
            .why__grid {
                grid-template-columns: .92fr 1.08fr;
                align-items: start
            }
        }

        .why__list {
            display: grid;
            gap: 1px;
            background: rgba(255, 255, 255, .1);
            border-top: 1px solid rgba(255, 255, 255, .1)
        }

        .whyrow {
            background: var(--navy-850);
            padding: 26px 4px 26px 0;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 22px;
            align-items: start;
            cursor: default;
            transition: background .45s var(--ease), padding-left .45s var(--ease);
        }

        .whyrow:hover {
            background: var(--navy-800);
            padding-left: 18px
        }

        .whyrow__n {
            font-size: .68rem;
            letter-spacing: .16em;
            color: var(--blue-400);
            font-weight: 600;
            padding-top: 6px
        }

        .whyrow h3 {
            font-size: clamp(1.15rem, 1.9vw, 1.5rem);
            margin-bottom: 8px;
            letter-spacing: -.024em
        }

        .whyrow p {
            margin: 0;
            color: rgba(226, 235, 250, .66);
            font-size: .925rem;
            line-height: 1.62;
            max-width: 56ch
        }

        .why__aside {
            position: relative
        }

        .why__fig {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            aspect-ratio: 4/5;
            background: var(--navy-700)
        }

        .why__fig img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .9
        }

        .why__quote {
            position: relative;
            margin-top: -70px;
            margin-left: clamp(0px, 3vw, 34px);
            z-index: 2;
            background: #fff;
            color: var(--ink);
            padding: 30px 32px;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            max-width: 420px;
        }

        .why__quote p {
            margin: 0 0 14px;
            font-family: var(--serif);
            font-style: italic;
            font-size: 1.3rem;
            line-height: 1.36;
            letter-spacing: -.015em
        }

        .why__quote cite {
            font-style: normal;
            font-size: .74rem;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--ink-50);
            font-weight: 600
        }

        /* stats */
        .stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1px;
            background: rgba(255, 255, 255, .12);
            margin-top: 44px;
            border: 1px solid rgba(255, 255, 255, .12)
        }

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

        .stat {
            background: var(--navy-850);
            padding: 26px 20px
        }

        .stat b {
            display: block;
            font-size: clamp(2rem, 3.4vw, 2.9rem);
            font-weight: 600;
            letter-spacing: -.04em;
            line-height: 1;
            color: #fff;
            white-space: nowrap
        }

        .stat b i {
            font-style: normal;
            color: var(--blue-400)
        }

        .stat>span {
            display: block;
            margin-top: 10px;
            font-size: .775rem;
            color: rgba(226, 235, 250, .6);
            line-height: 1.45
        }

        /* ---------- NETWORK MAP ---------- */
        .net {
            position: relative;
            background: linear-gradient(180deg, var(--navy-900), var(--navy-800) 60%, var(--navy-850));
            color: #fff;
            overflow: hidden
        }

        .map-shell {
            position: relative;
            margin-top: clamp(28px, 4vw, 48px);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--radius-lg);
            background: radial-gradient(120% 100% at 50% 30%, rgba(30, 91, 255, .10), rgba(255, 255, 255, .02) 60%);
            padding: clamp(10px, 2vw, 24px);
            overflow: hidden
        }

        .globe {
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            max-height: min(62vh, 580px);
            touch-action: pan-y
        }

        @media(max-width:700px) {
            .globe {
                aspect-ratio: 1/1
            }
        }

        .globe canvas {
            display: block;
            width: 100%;
            height: 100%;
            cursor: grab
        }

        .globe canvas:active {
            cursor: grabbing
        }

        .globe__halo {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 74%;
            aspect-ratio: 1;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            pointer-events: none;
            background: radial-gradient(circle at 50% 50%, rgba(30, 91, 255, .16) 0%, rgba(30, 91, 255, .06) 48%, rgba(30, 91, 255, 0) 70%);
            filter: blur(6px);
            animation: breathe 7s ease-in-out infinite;
        }

        @keyframes breathe {

            0%,
            100% {
                opacity: .75;
                transform: translate(-50%, -50%) scale(1)
            }

            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.045)
            }
        }

        .ops {
            display: grid;
            gap: clamp(14px, 2vw, 26px)
        }

        @media(min-width:980px) {
            .ops {
                grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
                align-items: stretch
            }
        }

        .feed {
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--radius-lg);
            background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
            padding: 18px 18px 16px;
            min-height: 0;
        }

        .feed__hd {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, .1);
            margin-bottom: 6px
        }

        .feed__hd h3 {
            font-size: .78rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: #fff;
            font-weight: 600
        }

        .feed__live {
            position: relative;
            width: 9px;
            height: 9px;
            flex: 0 0 auto
        }

        .feed__live i {
            position: absolute;
            inset: 2px;
            border-radius: 50%;
            background: #3BD07A;
            box-shadow: 0 0 8px rgba(59, 208, 122, .9)
        }

        .feed__live::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: rgba(59, 208, 122, .5);
            animation: livePulse 2.2s ease-out infinite
        }

        @keyframes livePulse {
            0% {
                transform: scale(.6);
                opacity: .9
            }

            70% {
                transform: scale(2.1);
                opacity: 0
            }

            100% {
                opacity: 0
            }
        }

        .feed__badge {
            margin-left: auto;
            font-size: .58rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            font-weight: 600;
            color: rgba(226, 235, 250, .62);
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 100px;
            padding: 3px 9px;
        }

        .feed__list {
            list-style: none;
            margin: 0;
            padding: 6px 0 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
            min-height: 150px;
            overflow: hidden
        }

        /* activity strip — single series, one hue, recessive frame, no legend needed */
        .spark {
            margin: 16px 0 4px;
            padding: 0
        }

        .spark figcaption {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin-bottom: 9px
        }

        .spark figcaption span {
            font-size: .63rem;
            letter-spacing: .13em;
            text-transform: uppercase;
            color: rgba(226, 235, 250, .58);
            font-weight: 600
        }

        .spark figcaption b {
            margin-left: auto;
            font-size: .95rem;
            color: #fff;
            font-variant-numeric: tabular-nums;
            letter-spacing: -.02em
        }

        .spark__plot {
            display: flex;
            align-items: flex-end;
            gap: 2px;
            height: 46px
        }

        .spark__plot i {
            flex: 1;
            min-width: 0;
            border-radius: 3px 3px 0 0;
            background: var(--blue-400);
            opacity: .42;
            transition: height .6s var(--ease), opacity .4s var(--ease);
            position: relative;
            cursor: default;
        }

        .spark__plot i:last-child {
            opacity: 1
        }

        .spark__plot i:hover {
            opacity: 1
        }

        .spark__plot i::after {
            content: attr(data-v);
            position: absolute;
            left: 50%;
            bottom: calc(100% + 7px);
            transform: translateX(-50%) translateY(3px);
            background: #0A1424;
            color: #fff;
            font-size: .68rem;
            font-weight: 600;
            padding: 3px 7px;
            border-radius: 3px;
            border: 1px solid rgba(255, 255, 255, .16);
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s, transform .2s;
        }

        .spark__plot i:hover::after {
            opacity: 1;
            transform: translateX(-50%) translateY(0)
        }

        .spark__axis {
            display: flex;
            justify-content: space-between;
            margin-top: 7px
        }

        .spark__axis i {
            font-style: normal;
            font-size: .6rem;
            letter-spacing: .1em;
            color: rgba(226, 235, 250, .4)
        }

        .feed__item {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 11px;
            align-items: center;
            padding: 9px 2px;
            border-bottom: 1px solid rgba(255, 255, 255, .055);
            animation: feedIn .5s var(--ease) both;
        }

        @keyframes feedIn {
            from {
                opacity: 0;
                transform: translateY(-8px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .feed__ico {
            width: 26px;
            height: 26px;
            border-radius: 5px;
            display: grid;
            place-items: center;
            background: rgba(75, 132, 255, .16);
            flex: 0 0 auto
        }

        .feed__ico svg {
            width: 14px;
            height: 14px;
            stroke: #9FC0FF;
            fill: none;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .feed__item.is-done .feed__ico {
            background: rgba(59, 208, 122, .16)
        }

        .feed__item.is-done .feed__ico svg {
            stroke: #6EE7A2
        }

        .feed__txt b {
            display: block;
            font-size: .83rem;
            font-weight: 600;
            color: #EAF0FB;
            letter-spacing: -.01em
        }

        .feed__txt span {
            display: block;
            font-size: .72rem;
            color: rgba(226, 235, 250, .6);
            margin-top: 1px
        }

        .feed__t {
            font-size: .66rem;
            color: rgba(226, 235, 250, .45);
            letter-spacing: .04em;
            font-variant-numeric: tabular-nums
        }

        .feed__stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            background: rgba(255, 255, 255, .1);
            border: 1px solid rgba(255, 255, 255, .1);
            margin-top: 14px
        }

        .feed__stats div {
            background: rgba(6, 13, 30, .62);
            padding: 11px 10px
        }

        .feed__stats b {
            display: block;
            font-size: 1.28rem;
            font-weight: 600;
            letter-spacing: -.03em;
            color: #fff;
            font-variant-numeric: tabular-nums
        }

        .feed__stats span {
            display: block;
            font-size: .63rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: rgba(226, 235, 250, .58);
            margin-top: 3px
        }

        .feed__note {
            margin: 12px 0 0;
            font-size: .7rem;
            line-height: 1.5;
            color: rgba(226, 235, 250, .52)
        }

        .globe__hint {
            position: absolute;
            right: 10px;
            bottom: 6px;
            font-size: .63rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(226, 235, 250, .42);
            pointer-events: none;
            transition: opacity .5s var(--ease);
        }

        .globe.dragged .globe__hint {
            opacity: 0
        }

        .map-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 26px;
            margin-top: 22px;
            font-size: .79rem;
            color: rgba(226, 235, 250, .62)
        }

        .map-legend b {
            color: #fff;
            font-weight: 600
        }

        .map-note {
            margin-top: 16px;
            font-size: .75rem;
            color: rgba(226, 235, 250, .58);
            max-width: 70ch
        }

        /* ---------- PROCESS ---------- */
        .steps {
            position: relative;
            display: grid;
            gap: 2px;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            overflow: hidden
        }

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

        .step {
            background: var(--paper);
            padding: clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 30px);
            position: relative;
            transition: background .4s var(--ease)
        }

        .step:hover {
            background: var(--paper-alt)
        }

        .step__n {
            font-size: .7rem;
            letter-spacing: .2em;
            font-weight: 600;
            color: var(--blue-600);
            display: block;
            margin-bottom: 22px
        }

        .step__dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            background: var(--blue-600);
            position: absolute;
            top: calc(clamp(26px, 3vw, 38px) + 30px);
            left: clamp(20px, 2.4vw, 30px);
            box-shadow: 0 0 0 5px rgba(30, 91, 255, .14)
        }

        .step h3 {
            margin: 44px 0 10px;
            font-size: 1.08rem
        }

        .step p {
            margin: 0;
            font-size: .885rem;
            color: var(--ink-70)
        }

        .step::before {
            content: "";
            position: absolute;
            top: calc(clamp(26px, 3vw, 38px) + 35px);
            left: 0;
            right: 0;
            height: 1px;
            background: var(--line)
        }

        /* ---------- HOW IT WORKS (interactive infographic) ---------- */
        .flow {
            --cols: 4
        }

        .flow__rail {
            position: relative;
            height: 54px;
            margin-bottom: 6px;
            display: none
        }

        @media(min-width:900px) {
            .flow__rail {
                display: block
            }
        }

        .flow__track {
            position: absolute;
            left: calc(100%/var(--cols)/2);
            right: calc(100%/var(--cols)/2);
            top: 26px;
            height: 2px;
            background: var(--line);
            border-radius: 2px;
            overflow: hidden
        }

        .flow__fill {
            display: block;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--blue-600), var(--blue-400));
            transition: width .9s var(--ease);
            box-shadow: 0 0 12px rgba(30, 91, 255, .5)
        }

        .flow__nodes {
            position: absolute;
            inset: 0
        }

        .flow__nodes b {
            position: absolute;
            top: 19px;
            width: 16px;
            height: 16px;
            margin-left: -8px;
            border-radius: 50%;
            background: var(--paper);
            border: 2px solid var(--line);
            transition: all .5s var(--ease);
        }

        .flow__nodes b.done {
            border-color: var(--blue-600);
            background: var(--blue-600)
        }

        .flow__nodes b.now {
            border-color: var(--blue-600);
            background: #fff;
            box-shadow: 0 0 0 6px rgba(30, 91, 255, .14)
        }

        .flow__pod {
            position: absolute;
            top: 6px;
            left: 12.5%;
            width: 42px;
            height: 42px;
            margin-left: -21px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: var(--navy-850);
            color: #fff;
            transition: left 1.1s var(--ease);
            z-index: 2;
            box-shadow: 0 8px 22px -8px rgba(5, 11, 26, .7);
        }

        .flow__pod svg {
            width: 22px;
            height: 14px;
            fill: currentColor
        }

        .flow__pod::after {
            content: "";
            position: absolute;
            inset: -5px;
            border-radius: 50%;
            border: 1px solid rgba(30, 91, 255, .4);
            animation: podRing 2.6s ease-out infinite
        }

        @keyframes podRing {
            0% {
                transform: scale(.85);
                opacity: .9
            }

            70% {
                transform: scale(1.35);
                opacity: 0
            }

            100% {
                opacity: 0
            }
        }

        .flow__steps {
            display: grid;
            gap: 2px;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            overflow: hidden
        }

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

        .fstep {
            position: relative;
            background: var(--paper);
            border: 0;
            text-align: left;
            cursor: pointer;
            font: inherit;
            color: inherit;
            padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2.2vw, 26px) 30px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            transition: background .5s var(--ease);
        }

        .fstep:hover {
            background: var(--paper-alt)
        }

        .fstep.is-active {
            background: var(--paper-alt)
        }

        .fstep__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px
        }

        .fstep__n {
            font-size: .7rem;
            letter-spacing: .2em;
            font-weight: 600;
            color: var(--ink-50);
            transition: color .4s
        }

        .fstep.is-active .fstep__n {
            color: var(--blue-600)
        }

        .fstep__ico {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            flex: 0 0 auto
        }

        .fstep__ico svg {
            width: 40px;
            height: 40px;
            overflow: visible
        }

        .fstep__ico svg * {
            fill: none;
            stroke: #AFBBCE;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: stroke .45s var(--ease)
        }

        .fstep.is-active .fstep__ico svg * {
            stroke: var(--blue-600)
        }

        .fstep__body b {
            display: block;
            font-size: 1.05rem;
            font-weight: 600;
            letter-spacing: -.02em;
            margin-bottom: 8px
        }

        .fstep__body span {
            display: block;
            font-size: .885rem;
            color: var(--ink-70);
            line-height: 1.6
        }

        .fstep__bar {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: transparent;
            overflow: hidden
        }

        .fstep__bar i {
            display: block;
            height: 100%;
            width: 0;
            background: var(--blue-600)
        }

        .fstep.is-active .fstep__bar i {
            animation: fbar var(--dwell, 6s) linear forwards
        }

        @keyframes fbar {
            from {
                width: 0
            }

            to {
                width: 100%
            }
        }

        .fstep.is-done .fstep__bar i {
            width: 100%;
            background: rgba(30, 91, 255, .28);
            animation: none
        }

        /* icon micro-animations, only while the step is active */
        .fstep.is-active .ico-enquiry .ln {
            stroke-dasharray: 14;
            stroke-dashoffset: 14;
            animation: drawLn .5s var(--ease) forwards
        }

        .fstep.is-active .ico-enquiry .l2 {
            animation-delay: .16s
        }

        .fstep.is-active .ico-enquiry .l3 {
            animation-delay: .32s
        }

        @keyframes drawLn {
            to {
                stroke-dashoffset: 0
            }
        }

        .fstep.is-active .ico-route .path {
            stroke-dasharray: 44;
            stroke-dashoffset: 44;
            animation: drawLn2 1s var(--ease) forwards
        }

        @keyframes drawLn2 {
            to {
                stroke-dashoffset: 0
            }
        }

        .fstep.is-active .ico-route .mover {
            animation: moveAlong 3.2s var(--ease) .5s infinite
        }

        @keyframes moveAlong {
            0% {
                transform: translate(0, 0);
                opacity: 0
            }

            12% {
                opacity: 1
            }

            88% {
                opacity: 1
            }

            100% {
                transform: translate(24px, -13px);
                opacity: 0
            }
        }

        .fstep.is-active .ico-move .box {
            animation: hop 2.4s var(--ease) infinite
        }

        .fstep.is-active .ico-move .b2 {
            animation-delay: .18s
        }

        .fstep.is-active .ico-move .b3 {
            animation-delay: .36s
        }

        @keyframes hop {

            0%,
            72%,
            100% {
                transform: translateY(0)
            }

            84% {
                transform: translateY(-3px)
            }
        }

        .fstep.is-active .ico-move .wave {
            animation: waveGo 1.9s linear infinite
        }

        .fstep.is-active .ico-move .w2 {
            animation-delay: .3s
        }

        .fstep.is-active .ico-move .w3 {
            animation-delay: .6s
        }

        @keyframes waveGo {
            0% {
                opacity: 0;
                transform: translateX(4px)
            }

            40% {
                opacity: .9
            }

            100% {
                opacity: 0;
                transform: translateX(-7px)
            }
        }

        .fstep.is-active .ico-done .tick {
            stroke-dasharray: 20;
            stroke-dashoffset: 20;
            animation: drawTick .55s var(--ease) .35s forwards
        }

        @keyframes drawTick {
            to {
                stroke-dashoffset: 0
            }
        }

        .fstep .ico-done .tick {
            stroke-dashoffset: 20;
            stroke-dasharray: 20
        }

        .fstep.is-active .ico-done .crate {
            animation: crateIn .5s var(--ease)
        }

        @keyframes crateIn {
            from {
                transform: translateY(-4px);
                opacity: .4
            }

            to {
                transform: none;
                opacity: 1
            }
        }

        /* mobile rail */
        @media(max-width:899px) {
            .fstep {
                padding-left: 52px
            }

            .fstep::after {
                content: "";
                position: absolute;
                left: 24px;
                top: 0;
                bottom: 0;
                width: 2px;
                background: var(--line)
            }

            .fstep::before {
                content: "";
                position: absolute;
                left: 19px;
                top: 30px;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: var(--paper);
                border: 2px solid var(--line);
                z-index: 1;
                transition: all .4s
            }

            .fstep.is-active::before,
            .fstep.is-done::before {
                border-color: var(--blue-600);
                background: var(--blue-600)
            }

            .fstep__top {
                justify-content: flex-start;
                gap: 16px
            }
        }

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

            .fstep__bar i,
            .flow__pod::after,
            .fstep.is-active .ico-route .mover,
            .fstep.is-active .ico-move .box,
            .fstep.is-active .ico-move .wave {
                animation: none !important
            }

            .fstep .ico-done .tick,
            .fstep.is-active .ico-enquiry .ln,
            .fstep.is-active .ico-route .path {
                stroke-dashoffset: 0 !important
            }
        }

        /* ---------- INDUSTRIES ---------- */
        .ind {
            background: var(--paper-alt)
        }

        .ind-grid {
            display: grid;
            gap: 12px
        }

        @media(min-width:640px) {
            .ind-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

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

        .indcard {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-lg);
            min-height: 230px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 22px;
            color: #fff;
            background: var(--navy-700);
            isolation: isolate;
            border: 1px solid rgba(10, 20, 36, .06);
        }

        .indcard img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -2;
            opacity: 1;
            transform: scale(1.03);
            transition: transform 1.1s var(--ease)
        }

        .indcard:hover img {
            transform: scale(1.1)
        }

        .indcard::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(180deg, rgba(5, 11, 26, .12) 20%, rgba(5, 11, 26, .86) 100%);
            transition: background .5s
        }

        .indcard:hover::after,
        .indcard.is-lit::after {
            background: linear-gradient(180deg, rgba(15, 63, 216, .28) 10%, rgba(5, 11, 26, .92) 100%)
        }

        .indcard.is-lit img {
            transform: scale(1.1)
        }

        .indcard.is-lit p {
            max-height: 120px;
            opacity: 1
        }

        .indcard.is-lit::before {
            opacity: 1
        }

        .indcard h3 {
            font-size: 1.06rem;
            margin-bottom: 6px
        }

        .indcard p {
            margin: 0;
            font-size: .82rem;
            color: rgba(255, 255, 255, .74);
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height .5s var(--ease), opacity .4s var(--ease)
        }

        .indcard:hover p,
        .indcard:focus-within p {
            max-height: 120px;
            opacity: 1
        }

        @media(hover:none) {
            .indcard p {
                max-height: 120px;
                opacity: 1
            }
        }

        /* ---------- PROVISIONS SHOWCASE ---------- */
        .prov {
            background: var(--paper)
        }

        .prov__grid {
            display: grid;
            gap: clamp(28px, 4vw, 56px)
        }

        @media(min-width:1000px) {
            .prov__grid {
                grid-template-columns: 1fr 1fr;
                align-items: center
            }
        }

        .prov__fig {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            aspect-ratio: 16/12;
            background: var(--navy-700)
        }

        .prov__fig img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .acc {
            border-top: 1px solid var(--line)
        }

        .acc__item {
            border-bottom: 1px solid var(--line)
        }

        .acc__btn {
            width: 100%;
            background: none;
            border: 0;
            text-align: left;
            padding: 20px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 1.02rem;
            font-weight: 600;
            color: var(--ink);
            letter-spacing: -.018em;
        }

        .acc__btn:hover {
            color: var(--blue-600)
        }

        .acc__ico {
            width: 22px;
            height: 22px;
            flex: 0 0 auto;
            position: relative;
            margin-left: auto
        }

        .acc__ico::before,
        .acc__ico::after {
            content: "";
            position: absolute;
            background: var(--blue-600);
            transition: transform .45s var(--ease), opacity .3s
        }

        .acc__ico::before {
            top: 10px;
            left: 2px;
            width: 18px;
            height: 1.6px
        }

        .acc__ico::after {
            left: 10px;
            top: 2px;
            width: 1.6px;
            height: 18px
        }

        .acc__btn[aria-expanded="true"] .acc__ico::after {
            transform: rotate(90deg);
            opacity: 0
        }

        .acc__panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height .55s var(--ease)
        }

        .acc__inner {
            padding: 0 0 22px;
            display: flex;
            flex-wrap: wrap;
            gap: 7px
        }

        .acc__inner span {
            font-size: .83rem;
            color: var(--ink-70);
            background: var(--paper-alt);
            border: 1px solid var(--line);
            padding: 6px 12px;
            border-radius: 100px
        }

        /* ---------- TESTIMONIALS ---------- */
        .tst {
            position: relative;
            background: var(--navy-850);
            overflow: hidden
        }

        .tst__glow {
            position: absolute;
            left: 50%;
            top: -10%;
            width: min(1100px, 120vw);
            aspect-ratio: 2/1;
            transform: translateX(-50%);
            background: radial-gradient(closest-side, rgba(30, 91, 255, .20), transparent 72%);
            filter: blur(20px);
            pointer-events: none;
            animation: aurora 11s ease-in-out infinite;
        }

        .tst .wrap {
            position: relative;
            z-index: 2
        }

        .tst__box {
            position: relative
        }

        .tst__viewport {
            overflow: hidden;
            border-top: 1px solid rgba(255, 255, 255, .12)
        }

        .tst__track {
            display: flex;
            transition: transform .8s var(--ease);
            will-change: transform
        }

        .tcard {
            flex: 0 0 100%;
            padding: clamp(30px, 4vw, 52px) 0 clamp(26px, 3vw, 40px);
            display: grid;
            gap: clamp(22px, 3vw, 44px);
            align-items: start;
        }

        @media(min-width:900px) {
            .tcard {
                grid-template-columns: auto 1fr
            }
        }

        .tcard__logo {
            width: 78px;
            height: 78px;
            border-radius: var(--radius);
            display: grid;
            place-items: center;
            flex: 0 0 auto;
            background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
            border: 1px solid rgba(255, 255, 255, .16);
            color: #fff;
            font-weight: 700;
            letter-spacing: .06em;
            font-size: 1.05rem;
        }

        .tcard__logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 12px;
            filter: brightness(0) invert(1);
            opacity: .9
        }

        .tcard q {
            display: block;
            quotes: none;
            font-family: var(--serif);
            font-style: italic;
            font-weight: 400;
            font-size: clamp(1.35rem, 2.8vw, 2.15rem);
            line-height: 1.28;
            letter-spacing: -.018em;
            color: #fff;
            margin-bottom: 24px;
        }

        .tcard__by {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap
        }

        .tcard__by b {
            font-size: .95rem;
            color: #fff;
            font-weight: 600
        }

        .tcard__by span {
            font-size: .84rem;
            color: rgba(226, 235, 250, .62)
        }

        .tcard__by span::before {
            content: "— ";
            opacity: .6
        }

        .tcard__flag {
            font-size: .6rem;
            letter-spacing: .16em;
            text-transform: uppercase;
            font-weight: 600;
            color: #FFD98A;
            border: 1px dashed rgba(255, 217, 138, .55);
            border-radius: 100px;
            padding: 4px 11px;
        }

        .tcard.is-placeholder q {
            color: rgba(255, 255, 255, .72)
        }

        .tst__ctrl {
            display: flex;
            align-items: center;
            gap: 14px;
            padding-top: 22px;
            border-top: 1px solid rgba(255, 255, 255, .12)
        }

        .tst__btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .18);
            display: grid;
            place-items: center;
            cursor: pointer;
            transition: background .3s, border-color .3s, transform .3s var(--ease);
        }

        .tst__btn:hover {
            background: rgba(255, 255, 255, .14);
            border-color: rgba(255, 255, 255, .45);
            transform: translateY(-2px)
        }

        .tst__btn svg {
            width: 17px;
            height: 17px;
            fill: none;
            stroke: #fff;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .tst__dots {
            display: flex;
            gap: 8px;
            margin-left: auto
        }

        .tst__dots button {
            width: 26px;
            height: 4px;
            border-radius: 100px;
            border: 0;
            background: rgba(255, 255, 255, .22);
            cursor: pointer;
            padding: 0;
            transition: background .4s var(--ease), width .4s var(--ease);
        }

        .tst__dots button[aria-selected="true"] {
            background: var(--blue-400);
            width: 44px
        }

        /* ---------- PORT SCENE ---------- */
        .port {
            position: relative;
            overflow: hidden;
            background: var(--navy-900);
            color: #fff;
            isolation: isolate
        }

        .port canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0;
            transition: opacity 1.4s var(--ease)
        }

        .port canvas.on {
            opacity: 1
        }

        .port::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(90deg, rgba(3, 7, 15, .94) 0%, rgba(3, 7, 15, .72) 42%, rgba(3, 7, 15, .18) 78%, rgba(3, 7, 15, .35) 100%);
        }

        .port__in {
            position: relative;
            z-index: 2;
            padding-block: clamp(62px, 8vw, 104px) clamp(70px, 9vw, 118px);
            max-width: none
        }

        .port__in .lead {
            color: rgba(226, 235, 250, .76);
            max-width: 46ch
        }

        .port__in h2 {
            margin: 16px 0 20px;
            max-width: 21ch
        }

        /* ---------- ABOUT PREVIEW ---------- */
        .about-split {
            display: grid;
            gap: clamp(32px, 4vw, 64px)
        }

        @media(min-width:1000px) {
            .about-split {
                grid-template-columns: 1.02fr .98fr;
                align-items: center
            }
        }

        .figstack {
            position: relative;
            aspect-ratio: 1/1
        }

        .figstack figure {
            position: absolute;
            margin: 0;
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: var(--navy-700);
            box-shadow: var(--shadow-lg)
        }

        .figstack figure img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .figstack .f1 {
            inset: 0 24% 22% 0
        }

        .figstack .f2 {
            inset: 36% 0 0 32%;
            border: 6px solid #fff
        }

        .vcards {
            display: grid;
            gap: 12px;
            margin-top: 30px
        }

        @media(min-width:640px) {
            .vcards {
                grid-template-columns: 1fr 1fr
            }
        }

        .vcard {
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 22px;
            background: #fff;
            transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s
        }

        .vcard:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
            border-color: #C9D6EE
        }

        .vcard h4 {
            font-size: .7rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--blue-600);
            margin-bottom: 10px
        }

        .vcard p {
            margin: 0;
            font-size: .9rem;
            color: var(--ink-70)
        }

        /* team */
        .team {
            display: grid;
            gap: clamp(20px, 3vw, 32px);
            margin-top: clamp(28px, 4vw, 44px)
        }

        @media(min-width:600px) {
            .team {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(min-width:900px) {
            .team {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        .member {
            position: relative;
        }

        .member__photo {
            position: relative;
            aspect-ratio: 4 / 5;
            border-radius: var(--radius-lg);
            overflow: hidden;
            background: var(--paper-alt2);
            isolation: isolate;
        }

        .member__avatar {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: scale(1.03);
            transition: transform 1.1s var(--ease)
        }

        .member:hover .member__avatar {
            transform: scale(1.08)
        }

        .member__avatar--initials {
            display: grid;
            place-items: center;
            background: linear-gradient(140deg, var(--navy-700), var(--blue-600));
            color: #fff;
            font-weight: 600;
            font-size: clamp(1.8rem, 4vw, 2.4rem);
            letter-spacing: .02em;
        }

        .member__card {
            position: relative;
            margin: -64px 16px 0;
            background: #fff;
            border-radius: var(--radius-lg);
            padding: 18px 20px 20px;
            box-shadow: var(--shadow-md);
            transition: transform .35s var(--ease), box-shadow .35s var(--ease);
        }

        .member:hover .member__card {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg)
        }

        .member__role {
            display: block;
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--blue-600);
            margin-bottom: 4px
        }

        .member__name {
            display: block;
            font-size: 1.12rem;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: -.01em
        }

        .member__desc,
        .member__desc p {
            margin: 8px 0 0;
            font-size: .85rem;
            line-height: 1.55;
            color: var(--ink-70)
        }

        .member__desc p+p {
            margin-top: 8px
        }

        /* ---------- CTA BAND ---------- */
        .cta {
            position: relative;
            overflow: hidden;
            background: var(--navy-900);
            color: #fff;
            text-align: center
        }

        .cta__media {
            position: absolute;
            inset: 0
        }

        .cta__media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .42
        }

        .cta__media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(80% 100% at 50% 60%, rgba(3, 7, 15, .62), rgba(3, 7, 15, .94))
        }

        .cta__in {
            position: relative;
            z-index: 2;
            padding-block: clamp(80px, 10vw, 150px);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 26px
        }

        .cta h2 {
            max-width: 16ch
        }

        .cta .lead {
            text-align: center;
            margin-inline: auto
        }

        .cta__acts {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            justify-content: center
        }

        /* ---------- FORMS ---------- */
        .form {
            display: grid;
            gap: 16px
        }

        @media(min-width:680px) {
            .form {
                grid-template-columns: 1fr 1fr
            }
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 7px
        }

        .field--full {
            grid-column: 1/-1
        }

        .field label {
            font-size: .75rem;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--ink-50)
        }

        .field input,
        .field select,
        .field textarea {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            padding: 13px 14px;
            font: inherit;
            font-size: .95rem;
            color: var(--ink);
            transition: border-color .3s, box-shadow .3s;
        }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            outline: none;
            border-color: var(--blue-500);
            box-shadow: 0 0 0 3px rgba(30, 91, 255, .13);
        }

        .field textarea {
            resize: vertical;
            min-height: 130px
        }

        .form__note {
            grid-column: 1/-1;
            font-size: .78rem;
            color: var(--ink-50)
        }

        .formmsg {
            grid-column: 1/-1;
            padding: 14px 16px;
            border-radius: var(--radius);
            font-size: .9rem;
            display: none
        }

        .formmsg.show {
            display: block
        }

        .formmsg--ok {
            background: #EAF3EC;
            border: 1px solid #BFE0C8;
            color: #1F5A32
        }

        /* ---------- CONTACT ---------- */
        .contact-grid {
            display: grid;
            gap: clamp(30px, 4vw, 60px)
        }

        @media(min-width:1000px) {
            .contact-grid {
                grid-template-columns: 1.05fr .95fr
            }
        }

        .ccard {
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 26px;
            background: #fff;
            margin-bottom: 14px
        }

        .ccard h3 {
            font-size: .72rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--blue-600);
            margin-bottom: 14px
        }

        .ccard a {
            color: var(--ink);
            text-decoration: none;
            font-weight: 500
        }

        .ccard a:hover {
            color: var(--blue-600);
            text-decoration: underline
        }

        .ccard ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 9px;
            font-size: .94rem
        }

        .ccard address {
            font-style: normal;
            color: var(--ink-70);
            font-size: .94rem;
            line-height: 1.65
        }

        .people {
            display: grid;
            gap: 10px
        }

        @media(min-width:520px) {
            .people {
                grid-template-columns: 1fr 1fr
            }
        }

        .person {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 14px 16px;
            background: var(--paper-alt)
        }

        .person b {
            display: block;
            font-size: .92rem
        }

        .person span {
            display: block;
            font-size: .76rem;
            color: var(--ink-50);
            margin: 2px 0 7px
        }

        .person a {
            font-size: .84rem;
            color: var(--blue-600);
            text-decoration: none;
            word-break: break-all;
            display: block
        }

        .person a:hover {
            text-decoration: underline
        }

        /* ---------- FOOTER ---------- */
        .ftr {
            background: var(--navy-900);
            color: rgba(226, 235, 250, .68);
            padding-top: clamp(56px, 7vw, 92px)
        }

        .ftr__grid {
            display: grid;
            gap: 38px;
            padding-bottom: 52px
        }

        @media(min-width:760px) {
            .ftr__grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(min-width:1040px) {
            .ftr__grid {
                grid-template-columns: 1.6fr 1fr 1fr 1.3fr
            }
        }

        .ftr h4 {
            color: #fff;
            font-size: .7rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            margin-bottom: 18px;
            font-weight: 600
        }

        .ftr ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 11px;
            font-size: .9rem
        }

        .ftr a {
            color: rgba(226, 235, 250, .68);
            text-decoration: none;
            transition: color .3s
        }

        .ftr a:hover {
            color: #fff
        }

        .ftr__about {
            font-size: .9rem;
            max-width: 42ch;
            line-height: 1.68
        }

        .ftr__brand {
            display: flex;
            align-items: center;
            gap: 11px;
            margin-bottom: 18px
        }

        .ftr__brand .brand__name {
            color: #fff
        }

        .ftr__brand .brand__sub {
            color: rgba(226, 235, 250, .5)
        }

        .ftr__brand .custom-logo-link {
            display: flex;
            align-items: center;
            flex: 0 0 auto
        }

        .ftr__brand .custom-logo-link img.custom-logo {
            width: auto !important;
            height: clamp(32px, 8vw, 40px) !important;
            max-height: 40px !important;
            max-width: 120px;
            object-fit: contain
        }

        .ftr__bot {
            border-top: 1px solid rgba(255, 255, 255, .1);
            padding: 24px 0 34px;
            display: flex;
            flex-wrap: wrap;
            gap: 14px 26px;
            align-items: center;
            font-size: .8rem
        }

        .ftr__bot p {
            margin: 0
        }

        .ftr__legal {
            display: flex;
            gap: 20px;
            margin-left: auto;
            flex-wrap: wrap
        }

        .soc {
            display: flex;
            gap: 9px;
            margin-top: 18px
        }

        .soc a {
            width: 38px;
            height: 38px;
            border: 1px solid rgba(255, 255, 255, .16);
            border-radius: var(--radius);
            display: grid;
            place-items: center;
            transition: background .3s, border-color .3s, transform .3s
        }

        .soc a:hover {
            background: rgba(255, 255, 255, .08);
            border-color: rgba(255, 255, 255, .4);
            transform: translateY(-2px)
        }

        .soc svg {
            width: 16px;
            height: 16px;
            fill: currentColor
        }

        /* ---------- FLOATING / MOBILE CTA ---------- */
        .wa {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 90;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: #128C7E;
            display: grid;
            place-items: center;
            box-shadow: 0 12px 32px -8px rgba(18, 140, 126, .7);
            transition: transform .35s var(--ease);
        }

        .wa:hover {
            transform: scale(1.07)
        }

        .wa svg {
            width: 26px;
            height: 26px;
            fill: #fff
        }

        @media(max-width:760px) {
            .wa {
                bottom: 82px
            }

            .mcta {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 95;
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 1px;
                background: var(--line);
                border-top: 1px solid var(--line);
                box-shadow: 0 -8px 28px rgba(10, 20, 36, .1);
            }

            .mcta a {
                background: #fff;
                padding: 15px 10px;
                text-align: center;
                font-size: .88rem;
                font-weight: 600;
                text-decoration: none;
                color: var(--ink)
            }

            .mcta a.pri {
                background: var(--blue-600);
                color: #fff
            }

            body {
                padding-bottom: 54px
            }
        }

        .mcta {
            display: none
        }

        @media(max-width:760px) {
            .mcta {
                display: grid
            }
        }

        /* ---------- REVEAL ANIMATION (only when JS is running) ---------- */
        .js .rv {
            opacity: 0;
            transform: translateY(22px);
            transition: opacity .85s var(--ease), transform .85s var(--ease)
        }

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

        .rv-d1 {
            transition-delay: .08s
        }

        .rv-d2 {
            transition-delay: .16s
        }

        .rv-d3 {
            transition-delay: .24s
        }

        .rv-d4 {
            transition-delay: .32s
        }

        @media (prefers-reduced-motion:reduce) {
            .js .rv {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important
            }

            .route {
                stroke-dashoffset: 0 !important;
                animation: none !important
            }

            .node circle.halo {
                animation: none !important
            }

            .hero__media img {
                transition: opacity .3s !important;
                transform: none !important
            }

            * {
                animation-duration: .001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .12s !important
            }
        }

        /* ---------- VFX LAYER ---------- */
        /* scroll progress */
        .scrollbar-progress {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            z-index: 130;
            pointer-events: none
        }

        .scrollbar-progress i {
            display: block;
            height: 100%;
            width: 100%;
            transform: scaleX(0);
            transform-origin: left;
            background: linear-gradient(90deg, var(--blue-600), var(--blue-400) 55%, #9FC0FF);
            box-shadow: 0 0 14px rgba(75, 132, 255, .8);
        }

        /* film grain — only on sections without a live canvas underneath, and with no
   blend mode: mix-blend-mode over an animating canvas forces a full recomposite
   every frame and cost ~20fps in testing. */
        .why::after,
        .cta::after,
        .phero::after,
        .tst::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 4;
            pointer-events: none;
            opacity: .03;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        .hero__in,
        .why__grid,
        .net .wrap,
        .cta__in,
        .phero__in {
            position: relative;
            z-index: 5
        }

        /* cursor spotlight on cards */
        .svc,
        .vcard,
        .indcard,
        .step,
        .member,
        .ccard {
            position: relative
        }

        .svc::before,
        .vcard::before,
        .member::before,
        .ccard::before,
        .step .spot {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            transition: opacity .45s var(--ease);
            z-index: 0;
            background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(30, 91, 255, .09), transparent 62%);
        }

        .svc:hover::before,
        .vcard:hover::before,
        .member:hover::before,
        .ccard:hover::before,
        .step:hover .spot {
            opacity: 1
        }

        .svc__body,
        .vcard>*,
        .step>h3,
        .step>p,
        .step>.step__n,
        .member>*,
        .ccard>* {
            position: relative;
            z-index: 1
        }

        .indcard::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            transition: opacity .45s var(--ease);
            z-index: 0;
            background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(120, 164, 255, .28), transparent 60%);
        }

        .indcard:hover::before {
            opacity: 1
        }

        .indcard h3,
        .indcard p {
            position: relative;
            z-index: 1
        }

        /* button shine sweep */
        .btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: -120%;
            width: 60%;
            height: 100%;
            pointer-events: none;
            background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
            transition: left .75s var(--ease);
        }

        .btn:hover::after {
            left: 130%
        }

        .btn--ghost::after {
            background: linear-gradient(100deg, transparent, rgba(15, 63, 216, .14), transparent)
        }

        /* stacked-figure tilt */
        .figstack {
            perspective: 1100px
        }

        .figstack figure {
            transform: rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg));
            transition: transform .7s var(--ease), box-shadow .7s var(--ease);
            transform-style: preserve-3d;
        }

        .figstack .f2 {
            transform: rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg)) translateZ(28px)
        }

        /* headline wipe-in */
        .js .wipe {
            clip-path: inset(0 0 105% 0);
            transition: clip-path 1.05s var(--ease)
        }

        .js .wipe.lit {
            clip-path: inset(0 0 -12% 0)
        }

        /* strip shimmer */
        .strip__item {
            position: relative;
            overflow: hidden
        }

        .strip__item::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            background: linear-gradient(120deg, transparent 30%, rgba(120, 164, 255, .10) 50%, transparent 70%);
            transform: translateX(-100%);
            transition: opacity .3s;
        }

        .strip__item:hover::after {
            opacity: 1;
            animation: sweep 1.1s var(--ease)
        }

        @keyframes sweep {
            to {
                transform: translateX(100%)
            }
        }

        /* CTA aurora */
        .cta__in::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 40%;
            width: min(900px, 90vw);
            aspect-ratio: 2/1;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: -1;
            border-radius: 50%;
            background: radial-gradient(closest-side, rgba(30, 91, 255, .30), transparent 72%);
            filter: blur(30px);
            animation: aurora 9s ease-in-out infinite;
        }

        @keyframes aurora {

            0%,
            100% {
                opacity: .55;
                transform: translate(-50%, -50%) scale(1)
            }

            50% {
                opacity: .9;
                transform: translate(-48%, -52%) scale(1.12)
            }
        }

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

            .svc-grid::before,
            .why::before {
                animation: none !important
            }

            .js .wipe {
                clip-path: none !important;
                transition: none !important
            }

            .globe__halo,
            .cta__in::before {
                animation: none !important
            }

            .btn::after {
                display: none
            }

            .figstack figure {
                transform: none !important
            }
        }

        /* inner page hero */
        .phero {
            position: relative;
            background: var(--navy-850);
            color: #fff;
            overflow: hidden;
            padding-top: 130px
        }

        .phero__media {
            position: absolute;
            inset: 0
        }

        .phero__media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .5
        }

        .phero__media::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, rgba(3, 7, 15, .95) 12%, rgba(3, 7, 15, .55) 78%)
        }

        .phero__in {
            position: relative;
            z-index: 2;
            padding-bottom: clamp(50px, 7vw, 90px)
        }

        .crumb {
            font-size: .78rem;
            color: rgba(226, 235, 250, .55);
            margin-bottom: 20px
        }

        .crumb a {
            color: rgba(226, 235, 250, .8);
            text-decoration: none
        }

        .crumb a:hover {
            color: #fff
        }

        /* service detail rows */
        .srow {
            display: grid;
            gap: clamp(24px, 3.5vw, 54px);
            padding: clamp(38px, 5vw, 64px) 0;
            border-bottom: 1px solid var(--line)
        }

        @media(min-width:940px) {
            .srow {
                grid-template-columns: .44fr .56fr;
                align-items: start
            }
        }

        .srow:last-child {
            border-bottom: 0
        }

        .srow__fig {
            position: relative;
            border-radius: var(--radius-lg);
            overflow: hidden;
            aspect-ratio: 4/3;
            background: var(--navy-700)
        }

        .srow__fig img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1.1s var(--ease)
        }

        .srow:hover .srow__fig img {
            transform: scale(1.04)
        }

        .srow h2 {
            font-size: clamp(1.5rem, 2.5vw, 2.05rem);
            margin-bottom: 14px
        }

        .srow .kicker {
            font-size: .68rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--blue-600);
            font-weight: 600;
            display: block;
            margin-bottom: 12px
        }

        .bullets {
            list-style: none;
            margin: 20px 0 0;
            padding: 0;
            display: grid;
            gap: 10px
        }

        @media(min-width:620px) {
            .bullets {
                grid-template-columns: 1fr 1fr
            }
        }

        .bullets li {
            position: relative;
            padding-left: 24px;
            font-size: .9rem;
            color: var(--ink-70)
        }

        .bullets li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .55em;
            width: 11px;
            height: 2px;
            background: var(--blue-600);
        }

        .note-flag {
            border-left: 3px solid #E0A500;
            background: #FFF9E8;
            padding: 14px 18px;
            border-radius: 0 var(--radius) var(--radius) 0;
            font-size: .85rem;
            color: #6B5200;
            margin-top: 22px;
        }

        .note-flag b {
            color: #4A3800
        }

        hr.rule {
            border: 0;
            border-top: 1px solid var(--line);
            margin: 0
        }