:root {
    --navy-900: #041838;
    --navy-800: #082B56;
    --blue-700: #0B3A6D;
    --blue-500: #0F5E9C;
    --blue-400: #1A76C5;
    --gold-700:#f6cd53;
    --gold-600:#f6cd53;
    --gold-500:#eebc28;
    --gold-100:#ffdc4d;
    --white: #FFFFFF;
    --slate-50: #F7F9FC;
    --slate-100: #EEF3F8;
    --slate-200: #E2E8F0;
    --slate-500: #64748B;
    --slate-900: #0F172A;
    --ink-soft: #CFE0F2;
    --shadow-soft: 0 18px 45px rgba(4, 24, 56, 0.12);
    --shadow-card: 0 10px 28px rgba(4, 24, 56, 0.08);
    --ease: 200ms ease;
    --display: "Playfair Display", Georgia, serif;
    --body: "Inter", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--slate-900);
    background: var(--white);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
}

body.menu-open {
    overflow: hidden;
}

img,
svg {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--gold-100);
    outline-offset: 4px;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100;
    padding: 10px 14px;
    color: var(--navy-900);
    background: var(--gold-100);
    border-radius: 4px;
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

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

.site-header {
    position: fixed;
    inset: 0 0 auto;
    padding-top: 10px;
    z-index: 50;
    transition: background var(--ease), box-shadow var(--ease), padding var(--ease);
}

.site-header.scrolled,
.site-header.menu-active {
    background: rgba(4, 24, 56, 0.96);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    gap: 28px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
}

.site-header .brand {
    position: relative;
    isolation: isolate;
    padding: 0;
    margin: 0;
    overflow: visible;
    color: var(--white);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 260ms ease;
}

.site-header .brand::before,
.site-header .brand::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.site-header .brand::before {
    inset: -12% -10%;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 52%, rgba(245, 193, 22, 0.24), rgba(245, 193, 22, 0.1) 36%, transparent 70%);
    opacity: 0.34;
    transform: scale(0.86);
    filter: blur(10px);
    animation: headerLogoAura 4.8s ease-in-out infinite;
}

.site-header .brand::after {
    inset: -18% -40%;
    z-index: 2;
    height: auto;
    /* background: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, 0.14) 45%, rgba(245, 193, 22, 0.5) 50%, rgba(255, 255, 255, 0.12) 55%, transparent 64%); */
    mix-blend-mode: screen;
    opacity: 0;
    transform: translateX(-62%) skewX(-18deg);
    animation: headerLogoLightPass 6.2s ease-in-out infinite;
}

.site-header .brand:hover,
.site-header .brand:focus-visible {
    transform: translateY(-2px);
}

.site-header .brand:hover::before,
.site-header .brand:focus-visible::before {
    opacity: 0.58;
    transform: scale(1.08);
}

.logo-heander {
    position: relative;
    z-index: 1;
    display: block;
    width: 120px;
    transform-origin: center;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18)) brightness(1.04) saturate(1.04);
    animation: headerLogoGoldMotion 4.8s ease-in-out infinite;
    transition: transform 260ms ease, filter 260ms ease;
    will-change: transform, filter;
}

.site-header .brand:hover .logo-heander,
.site-header .brand:focus-visible .logo-heander {
    filter: drop-shadow(0 16px 24px rgba(245, 193, 22, 0.38)) brightness(1.18) saturate(1.15) contrast(1.05);
    transform: translateY(-2px) scale(1.08);
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: var(--navy-900);
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500), var(--gold-100));
    border-radius: 4px;
    font-family: var(--display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.brand-copy {
    display: grid;
    gap: 1px;
    color: var(--white);
}

.brand-name {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}

.brand-subtitle {
    color: var(--gold-100);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

.primary-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 60px;
    color: var(--white);
}

.nav-link {
    position: relative;
    padding: 20px 0;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.nav-link::after {
    position: absolute;
    right: 0;
    bottom: 17px;
    left: 0;
    height: 2px;
    content: "";
    background: var(--gold-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ease);
}

.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 4px;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 5px auto;
    background: var(--white);
    transition: transform var(--ease), opacity var(--ease);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 13px 22px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
}

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

.button-gold {
    color: var(--navy-900);
   background: #EEA42D;
background: linear-gradient(148deg, rgba(238, 164, 45, 1) 0%, rgba(255, 248, 123, 1) 42%, rgba(238, 164, 45, 1) 100%);

    box-shadow: 0 12px 24px rgba(212, 175, 55, 0.18);
}

.button-outline {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.04);
}

.button-outline:hover {
    background: rgba(255, 255, 255, 0.12);
}

@keyframes headerLogoGoldMotion {
    0%,
    100% {
        filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18)) drop-shadow(0 0 0 rgba(245, 193, 22, 0)) brightness(1.02) saturate(1.04);
        transform: translate3d(0, 0, 0) scale(1);
    }

    28% {
        filter: drop-shadow(0 10px 18px rgba(245, 193, 22, 0.18)) brightness(1.12) saturate(1.12);
        transform: translate3d(1px, -2px, 0) scale(1.045);
    }

    58% {
        filter: drop-shadow(0 12px 20px rgba(245, 193, 22, 0.24)) brightness(1.16) saturate(1.15);
        transform: translate3d(-1px, -3px, 0) scale(1.065);
    }

    78% {
        filter: drop-shadow(0 9px 16px rgba(245, 193, 22, 0.12)) brightness(1.07) saturate(1.08);
        transform: translate3d(0, -1px, 0) scale(1.025);
    }
}

@keyframes headerLogoAura {
    0% {
        opacity: 0.28;
        transform: scale(0.82);
    }

    50% {
        opacity: 0.52;
        transform: scale(1.08);
    }

    100% {
        opacity: 0.28;
        transform: scale(0.82);
    }
}

@keyframes headerLogoLightPass {
    0%,
    62% {
        opacity: 0;
        transform: translateX(-62%) skewX(-18deg);
    }

    72% {
        opacity: 0.58;
    }

    86%,
    100% {
        opacity: 0;
        transform: translateX(62%) skewX(-18deg);
    }
}

.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: var(--white);
    background:
        linear-gradient(90deg, rgb(4, 24, 56), rgba(4, 24, 56, 0.421), rgba(4, 24, 56, 0)),
        url("../images/hero.jpg") center / cover no-repeat;
}

.hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 34%;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(4, 24, 56, 0.76));
    pointer-events: none;
}

.hero-scene {
    display: none;
}

.scene-line,
.scene-crane,
.container-lines {
    fill: none;
    stroke: var(--gold-100);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
}

.scene-crane {
    stroke: var(--gold-500);
    opacity: 0.82;
}

.scene-crane.muted {
    opacity: 0.52;
}

.scene-container {
    fill: rgba(15, 94, 156, 0.72);
    stroke: rgba(242, 226, 162, 0.38);
    stroke-width: 3;
}

.scene-container-detail {
    fill: rgba(4, 24, 56, 0.72);
}

.scene-skyline {
    fill: rgba(242, 226, 162, 0.34);
}

.scene-water {
    fill: rgba(15, 94, 156, 0.35);
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 100vh;
    align-items: center;
       padding-top: 184px;
    padding-bottom: 120px;
}

.hero-copy {
    max-width: 720px;
}


.eyebrow{
 margin: 0 0 25px;
 font-size: 17px !important;
}
h1,
h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.08;
}

h1 {
    max-width: 760px;
    color: var(--white);
    font-size: 70px;
}

h2 {
    color: var(--navy-900);
    font-size: 46px;
}

h1 span,
h2 span {
    color: var(--gold-500);
}

.hero-lead {
    max-width: 680px;
    margin: 24px 0 34px;
    color: var(--ink-soft);
    font-size: 18px;
}

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

.hero-trust-tags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 820px;
    margin-top: 28px;
}

.hero-trust-tags span {
    min-height: 76px;
    padding: 14px;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(242, 226, 162, 0.2);
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.35;
    text-transform: uppercase;
}

.hero-trust-tags strong {
    display: block;
    margin-bottom: 5px;
    color: var(--gold-100);
    font-size: 16px;
    font-weight: 800;
}

.film-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    color: var(--white);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.play-symbol {
    position: relative;
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 2px solid var(--gold-500);
    border-radius: 50%;
}

.play-symbol::after {
    width: 0;
    height: 0;
    margin-left: 3px;
    content: "";
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid var(--gold-500);
}

.stats-band {
    position: relative;
    z-index: 4;
    margin-top: 0;
    /* padding: 26px 0 64px;
    background:
        linear-gradient(180deg, rgba(4, 24, 56, 0.98) 0%, rgba(8, 43, 86, 0.96) 100%); */
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    isolation: isolate;
}

.stats-band .container-fluid {
    /* width: min(100% - 32px, 1520px); */
    margin: 0 auto;
}

.stats-band::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 90px 90px;
    opacity: 0.16;
    pointer-events: none;
}

.stats-shell {
    position: relative;
    padding: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(135deg, rgba(5, 28, 60, 0.96) 0%, rgba(8, 43, 86, 0.94) 50%, rgba(6, 25, 57, 0.94) 100%);
    border: 1px solid rgba(212, 175, 55, 0.18);
    /* border-radius: 28px; */
    box-shadow: 0 26px 60px rgba(4, 24, 56, 0.26);
}

.stats-shell::before {
    position: absolute;
    inset: 0 18px auto;
    z-index: 1;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(245, 193, 22, 0.72), transparent);
    pointer-events: none;
}

.stats-shell::after {
    position: absolute;
    inset: auto -80px -120px auto;
    width: 260px;
    height: 260px;
    content: "";
    background: radial-gradient(circle, rgba(212, 175, 55, 0.14), transparent 72%);
    pointer-events: none;
}
body.industries-page {
    --industries-header-height: 86px;
    --industries-hero-height: 102vh;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFD 100%);
}

.industries-page main {
    overflow: hidden;
}

.industries-page .site-header {
    padding-top: 0;
    min-height: var(--industries-header-height);
    overflow: visible;
    background: rgba(4, 24, 56, 0.96);
    z-index: 100;
}

.industries-page .header-inner {
    height: var(--industries-header-height);
    min-height: var(--industries-header-height);
    align-items: center;
}

.industries-page .site-header .brand {
    height: var(--industries-header-height);
    align-items: center;
}

.industries-page .logo-heander {
    display: block;
    width: auto;
    height: 72px;
    max-height: 72px;
    object-fit: contain;
    object-position: center;
}

.industry-hero {
    position: relative;
    height: var(--industries-hero-height);
    min-height: 0;
    max-height: none;
    padding: var(--industries-header-height) 0 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #F8FBFE 0%, #FFFFFF 45%, #EEF5FB 100%);
    isolation: isolate;
}

.industry-hero::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(8, 43, 86, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(8, 43, 86, 0.055) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.54) 44%, transparent 84%);
    animation: industryHeroGridShift 22s linear infinite;
    pointer-events: none;
}

.industry-hero::after {
    position: absolute;
    top: var(--industries-header-height);
    right: 0;
    bottom: 14px;
    z-index: 0;
    width: 58%;
    content: "";
    background: linear-gradient(116deg, transparent 0%, rgba(245, 193, 22, 0.08) 34%, rgba(8, 43, 86, 0.1) 58%, transparent 100%);
    transform: skewX(-8deg);
    transform-origin: center;
    animation: industryHeroSoftSweep 12s ease-in-out infinite alternate;
    pointer-events: none;
}

.industry-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: stretch;
    gap: 0;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.99) 0%, rgba(255, 255, 255, 0.98) 38%, rgba(235, 243, 250, 0.88) 100%);
    border: 1px solid rgba(8, 43, 86, 0.06);
    border-radius: 0;
    box-shadow: 0 18px 42px rgba(4, 24, 56, 0.08);
}

.industry-hero-copy {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    min-height: 0;
    height: 100%;
    max-width: none;
    padding: 30px 46px 22px 32px;
    background: linear-gradient(135deg, #FFFFFF 0%, #FAFCFE 100%);
    isolation: isolate;
}

.industry-hero-copy::before {
    position: absolute;
    top: 0;
    right: -44px;
    bottom: 0;
    width: 88px;
    content: "";
    background: linear-gradient(135deg, #FFFFFF 0%, #F9FCFE 100%);
    box-shadow: 18px 0 34px rgba(4, 24, 56, 0.04);
    transform: skewX(-12deg);
    transform-origin: left top;
    z-index: -1;
    pointer-events: none;
}

.industry-hero-copy::after {
    position: absolute;
    top: 128px;
    right: 10px;
    width: 1px;
    height: 120px;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(245, 193, 22, 0.62), transparent);
    opacity: 0.7;
    pointer-events: none;
}

.industries-page .industry-hero .eyebrow {
    margin-bottom: 16px;
    color: var(--gold-500);
}

.industry-hero-copy h1 {
    max-width: 610px;
    margin-bottom: 12px;
    color: var(--navy-900);
    font-family: var(--display);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: 0;
}

.industry-hero-copy h1::after {
    display: block;
    width: 52px;
    height: 3px;
    margin-top: 16px;
    content: "";
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500));
    border-radius: 4px;
}

.industry-hero-copy h1 span {
    color: var(--gold-500);
}

.industry-hero-copy p:not(.eyebrow) {
    max-width: 38ch;
    margin: 0 0 8px;
    color: var(--slate-500);
    font-size: 15.5px;
    line-height: 1.58;
}

.industry-hero-copy p:not(.eyebrow):last-of-type {
    display: none;
}

.industry-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.industry-hero-actions .button {
    min-width: 180px;
    min-height: 42px;
    padding: 11px 18px;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.industry-hero-actions .button:hover {
    transform: translateY(-2px);
}

.industry-hero-actions .button-outline {
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(212, 175, 55, 0.34);
    box-shadow: none;
}

.industry-hero-actions .button-outline:hover {
    color: var(--navy-900);
    background: #FFF9E8;
    border-color: rgba(212, 175, 55, 0.52);
    box-shadow: 0 12px 28px rgba(8, 43, 86, 0.08);
}

.industry-hero-showcase {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 76px;
    align-content: stretch;
    gap: 0;
    height: 100%;
    margin-left: -96px;
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.2) 14%, transparent 36%),
        linear-gradient(180deg, #EDF4FA 0%, #DFEAF4 100%);
}

.industry-hero-showcase::before {
    display: none;
}

.industry-collage {
    position: relative;
    display: grid;
    grid-template-columns: 0.92fr 1.04fr 0.92fr 1.04fr;
    gap: 0px;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
    padding: 0 0 0 20px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(8, 43, 86, 0.04));
}

.industry-collage::before {
    position: absolute;
    inset: 0;
    z-index: 2;
    content: "";
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.36) 0%, transparent 24%, transparent 100%);
    pointer-events: none;
}

.industry-collage-slice {
    --slice-y: 0px;
    position: relative;
    min-height: 0;
    height: 100%;
    margin: 0;
    overflow: hidden;
    clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: translateY(var(--slice-y));
    transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 420ms ease;
    will-change: transform;
}

.industry-collage-slice:nth-child(1) {
    --slice-y: 16px;
}

.industry-collage-slice:nth-child(2) {
    --slice-y: 0px;
}

.industry-collage-slice:nth-child(3) {
    --slice-y: 14px;
}

.industry-collage-slice:nth-child(4) {
    --slice-y: 0px;
}

.industry-collage-slice:hover {
    z-index: 3;
    /* transform: translateY(calc(var(--slice-y) - 6px)) scale(1.01); */
}

.industry-collage-slice::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(4, 24, 56, 0.18)),
        linear-gradient(180deg, rgba(4, 24, 56, 0), rgba(4, 24, 56, 0.16));
    transition: opacity 420ms ease;
}

.industry-collage-slice:hover::after {
    opacity: 0.72;
}

.industry-collage-slice img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.94) contrast(1.02) brightness(0.95);
    transform: scale(1.07) translateX(-1%);
    transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 520ms ease;
    animation: industryHeroImageDrift 15s ease-in-out infinite alternate;
}

.industry-collage-slice:nth-child(2) img {
    animation-delay: -3s;
}

.industry-collage-slice:nth-child(3) img {
    animation-delay: -6s;
}

.industry-collage-slice:nth-child(4) img {
    animation-delay: -9s;
}

.industry-collage-slice:hover img {
    animation: none;
    filter: saturate(1.02) contrast(1.04) brightness(1.03);
    transform: scale(1.12) translateX(1%);
}

.industry-hero-points {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    overflow: visible;
    color: var(--white);
    padding: 0 24px 0 118px;
    background:
        linear-gradient(90deg, rgba(245, 193, 22, 0.08), transparent 28%),
        linear-gradient(90deg, #041838 0%, #06224A 58%, #041838 100%);
    border: 0;
    box-shadow: 0 -18px 34px rgba(4, 24, 56, 0.18), inset 0 1px 0 rgba(245, 193, 22, 0.14);
}

.industry-hero-points::before {
    position: absolute;
    top: -30px;
    bottom: 0;
    left: -118px;
    z-index: 0;
    width: 210px;
    content: "";
    background: #041838;
    border-top-right-radius: 56px;
    clip-path: polygon(54% 0, 100% 0, 100% 100%, 0 100%, 0 70%);
    box-shadow: 0 -18px 34px rgba(4, 24, 56, 0.16);
    filter: none;
    opacity: 1;
    pointer-events: none;
}

.industry-hero-points::after {
    position: absolute;
    top: 0;
    right: 24px;
    left: 118px;
    z-index: 2;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, rgba(245, 193, 22, 0.58), transparent 70%);
    pointer-events: none;
}

.industry-hero-points article {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 76px;
    padding: 12px 18px;
    overflow: hidden;
    isolation: isolate;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 260ms ease, color 260ms ease;
}

.industry-hero-points article::before,
.industry-hero-points article::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.industry-hero-points article::before {
    inset: 0;
    z-index: -1;
    background: linear-gradient(120deg, transparent, rgba(245, 193, 22, 0.12), transparent);
    opacity: 0;
    transition: opacity 240ms ease;
}

.industry-hero-points article::after {
    right: 20%;
    bottom: 14px;
    left: 20%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms ease;
}

.industry-hero-points article:hover {
    transform: translateY(-3px);
}

.industry-hero-points article:hover::before {
    opacity: 1;
}

.industry-hero-points article:hover::after {
    transform: scaleX(1);
}

.industry-hero-points article + article {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.industry-hero-points svg,
.industry-hero-points img {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    fill: none;
    stroke: var(--gold-100);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    background: transparent;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    animation: industryPointPulse 3.8s ease-in-out infinite;
    transition: transform 240ms ease, stroke 240ms ease, filter 240ms ease;
}

.industry-hero-points article:nth-child(2) svg,
.industry-hero-points article:nth-child(2) img {
    animation-delay: -0.8s;
}

.industry-hero-points article:nth-child(3) svg,
.industry-hero-points article:nth-child(3) img {
    animation-delay: -1.6s;
}

.industry-hero-points article:nth-child(4) svg,
.industry-hero-points article:nth-child(4) img {
    animation-delay: -2.4s;
}

.industry-hero-points article:hover svg,
.industry-hero-points article:hover img {
    animation: none;
    stroke: var(--gold-500);
    filter: drop-shadow(0 0 10px rgba(245, 193, 22, 0.28));
    transform: translateY(-1px) scale(1.1);
}

.industry-hero-points span {
    position: relative;
    z-index: 1;
    max-width: 118px;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.18;
    color: rgba(255, 255, 255, 0.96);
}

@keyframes industryHeroGridShift {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 76px 0, 0 76px;
    }
}

@keyframes industryHeroSoftSweep {
    0% {
        opacity: 0.55;
        transform: translateX(-2%) skewX(-8deg);
    }

    100% {
        opacity: 0.95;
        transform: translateX(2%) skewX(-8deg);
    }
}

@keyframes industryHeroImageDrift {
    0% {
        transform: scale(1.07) translateX(-1%);
    }

    100% {
        transform: scale(1.1) translateX(1.5%);
    }
}

@keyframes industryPointPulse {
    0%,
    100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 0 rgba(245, 193, 22, 0));
    }

    50% {
        transform: translateY(-1px);
        filter: drop-shadow(0 0 8px rgba(245, 193, 22, 0.28));
    }
}

.industry-hub-section {
    position: relative;
    padding: 46px 0 76px;
    background:
        radial-gradient(circle at 50% 2%, rgba(245, 193, 22, 0.1), transparent 18%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FBFE 100%);
}

.industry-hub-section > .container-fluid {
    width: min(100% - 48px, 1510px);
    margin: 0 auto;
}

.industry-section-intro {
    display: grid;
    justify-items: center;
    max-width: 840px;
    margin: 0 auto 38px;
    text-align: center;
}

.industry-hub-section .industry-section-intro {
    max-width: 780px;
    margin-bottom: 28px;
}

.industry-section-intro h2 {
    max-width: 14ch;
}

.industry-hub-section .industry-section-intro h2 {
    max-width: 780px;
    font-family: var(--display);
    font-size: clamp(34px, 3vw, 46px);
    line-height: 1.05;
}

.industry-section-intro p:last-child {
    margin: 18px 0 0;
    color: var(--slate-500);
    font-size: 17px;
    line-height: 1.72;
}

.industry-hub-section .industry-section-intro p:last-child {
    max-width: 680px;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.58;
}

.industry-hub-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(230px, 0.78fr) minmax(0, 2fr) minmax(230px, 0.78fr);
    justify-content: center;
    align-items: stretch;
    gap: 24px;
}

.industry-hub-layout::before,
.industry-hub-layout::after {
    display: none;
}

.industry-hub-layout::before {
    left: calc(300px + 11px);
}

.industry-hub-layout::after {
    right: calc(300px + 11px);
}

.industry-list {
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
    height: 720px;
}

.industry-node {
    position: relative;
    display: grid;
    grid-template-columns: 28px 50px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 18px 16px;
    color: var(--navy-900);
    text-align: left;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(11, 58, 109, 0.1);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(4, 24, 56, 0.07);
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease);
}

.industry-node:hover {
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.34);
    box-shadow: 0 22px 40px rgba(4, 24, 56, 0.12);
}

.industry-node.is-active {
    color: var(--white);
    background: linear-gradient(135deg, rgba(4, 24, 56, 0.98), rgba(8, 43, 86, 0.94));
    border-color: rgba(212, 175, 55, 0.48);
    box-shadow: 0 28px 48px rgba(4, 24, 56, 0.22);
}

.industry-node.is-active::before {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(245, 193, 22, 0.14), transparent 45%);
    border-radius: inherit;
    pointer-events: none;
}

.industry-node-index {
    align-self: start;
    color: rgba(4, 24, 56, 0.32);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.industry-node.is-active .industry-node-index {
    color: rgba(245, 193, 22, 0.78);
}

.industry-node-icon {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    color: var(--service-accent, var(--gold-600));
    background: rgba(4, 24, 56, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 50%;
}

.industry-node.is-active .industry-node-icon {
    color: var(--gold-100);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(245, 193, 22, 0.3);
}

.industry-node svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.industry-node-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.industry-node-copy strong h3 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.16;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.industry-node-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(100, 116, 139, 0.94);
    font-size: 12.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.industry-node.is-active .industry-node-copy small {
    color: rgba(207, 224, 242, 0.88);
}

.industry-node-action {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: rgba(4, 24, 56, 0.74);
    background: rgba(4, 24, 56, 0.04);
    border: 1px solid rgba(11, 58, 109, 0.08);
    border-radius: 50%;
    font-size: 21px;
    line-height: 1;
}

.industry-node.is-active .industry-node-action {
    color: var(--navy-900);
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500), var(--gold-100));
    border-color: transparent;
}

.industry-spotlight {
    min-width: 0;
    height: 720px;
    min-height: 0;
}

.industry-detail-panel {
    position: relative;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background:radial-gradient(circle at 50% 50%, rgba(245, 193, 22, 0.14), #fdf0f000 24%), linear-gradient(180deg, #17458f 0%, #0a244f 100%);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 18px;
    box-shadow: 0 24px 54px rgba(4, 24, 56, 0.1);
    transition: opacity 260ms ease, transform 260ms ease;
}

.industry-detail-panel.has-active-detail {
    background:
        radial-gradient(circle at 78% 8%, rgba(245, 193, 22, 0.13), transparent 24%),
        linear-gradient(180deg, #061D42 0%, #041838 100%);
    border-color: rgba(212, 175, 55, 0.22);
    box-shadow: 0 28px 60px rgba(4, 24, 56, 0.22);
}

.industry-detail-panel.is-switching {
    opacity: 0;
    transform: translateY(14px);
}

.industry-detail-default {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    height: 100%;
    min-height: 0;
    padding: 34px;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(circle at 50% 48%, rgba(212, 175, 55, 0.22), transparent 38%),
        radial-gradient(circle at 50% 50%, rgba(246, 205, 83, 0.14) 1px, transparent 1px);
    background-size: auto, 18px 18px;
}

.industry-detail-default::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 380px;
    height: 380px;
    content: "";
    border: 1px dashed rgba(246, 205, 83, 0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: industryOrbitSpin 46s linear infinite;
    pointer-events: none;
}

.industry-detail-default::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 460px;
    height: 460px;
    content: "";
    border: 1px dashed rgba(77, 134, 255, 0.12);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: industryOrbitSpin 62s linear infinite reverse;
    pointer-events: none;
}

.industry-detail-default-mark {
    position: relative;
    z-index: 2;
    display: grid;
    width: 196px;
    height: 196px;
    place-items: center;
    margin-top: 6px;
    background: #ffffff;
    border: 2px solid var(--gold-500);
    border-radius: 50%;
    box-shadow: 0 24px 50px rgba(4, 24, 56, 0.28), 0 0 0 6px rgba(246, 205, 83, 0.14);
    animation: industryCenterPulse 2.8s ease-in-out infinite;
}

.industry-detail-default-mark::before {
    position: absolute;
    inset: -16px;
    z-index: -1;
    content: "";
    border: 1px solid rgba(212, 175, 55, 0.28);
    border-radius: inherit;
}

.industry-detail-default-mark::after {
    position: absolute;
    inset: -58px;
    z-index: -2;
    content: "";
    border: 1px dashed rgba(246, 205, 83, 0.22);
    border-radius: 50%;
    box-shadow:
        0 0 0 40px rgba(246, 205, 83, 0.05),
        0 0 0 80px rgba(246, 205, 83, 0.03);
    animation: industryRingPulse 5.6s ease-in-out infinite;
}

.industry-detail-default-mark img {
    width: 158px;
    height: auto;
    fill: none;
    stroke: var(--gold-500);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.industry-default-network {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.industry-network-lines use {
    fill: none;
    stroke: rgba(246, 205, 83, 0.85);
    stroke-dasharray: 0.6 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 0.42;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px rgba(245, 193, 22, 0.4));
    animation: industryNetworkBreathe 3.6s ease-in-out infinite;
}

.industry-network-lines use:nth-child(2n) {
    animation-delay: 0.5s;
}

.industry-network-endpoints circle {
    fill: var(--gold-500);
    opacity: 0.82;
    filter: drop-shadow(0 0 5px rgba(245, 193, 22, 0.42));
}

.industry-network-dots circle {
    fill: var(--gold-500);
    filter: drop-shadow(0 0 5px rgba(245, 193, 22, 0.68));
}

.industry-default-line {
    display: none;
}

.industry-default-line::before {
    position: absolute;
    inset: 0;
    content: "";
    border-color: rgba(212, 175, 55, 0.48);
    border-style: dotted;
    border-width: 0;
}

.industry-default-line::after {
    position: absolute;
    width: 7px;
    height: 7px;
    content: "";
    background: var(--gold-500);
    border-radius: 50%;
@media (min-width: 721px) {
    body.industries-page .industry-detail-panel.is-default,
    body.industries-page .industry-detail-panel.is-default .industry-detail-default {
        background:
            radial-gradient(circle at 50% 50%, rgba(35, 102, 170, 0.42), transparent 32%),
            linear-gradient(145deg, #03142e 0%, #062c5d 56%, #041a3c 100%);
    }

    body.industries-page .industry-detail-panel.is-default {
        border: 1px solid rgba(246, 205, 83, 0.48);
        box-shadow: 0 24px 56px rgba(4, 24, 56, 0.22), inset 0 0 0 1px rgba(125, 191, 234, 0.12);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default {
        overflow: hidden;
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default::before {
        width: 430px;
        height: 430px;
        border-color: rgba(246, 205, 83, 0.25);
        box-shadow: 0 0 0 34px rgba(246, 205, 83, 0.045), 0 0 0 70px rgba(98, 178, 235, 0.04);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default::after {
        width: 600px;
        height: 600px;
        border-color: rgba(246, 205, 83, 0.14);
        box-shadow: 0 0 0 44px rgba(246, 205, 83, 0.025), 0 0 0 92px rgba(86, 171, 232, 0.03);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default-mark {
        border-width: 3px;
        box-shadow: 0 24px 50px rgba(0, 7, 22, 0.46), 0 0 0 8px rgba(246, 205, 83, 0.18), 0 0 36px rgba(246, 205, 83, 0.36);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default-mark::before {
        inset: -20px;
        border-color: rgba(246, 205, 83, 0.45);
        box-shadow: 0 0 24px rgba(246, 205, 83, 0.2);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default-mark::after {
        inset: -72px;
        border-color: rgba(246, 205, 83, 0.32);
        box-shadow: 0 0 0 36px rgba(246, 205, 83, 0.07), 0 0 0 78px rgba(246, 205, 83, 0.035);
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-lines use {
        stroke: #f6cd53;
        filter: drop-shadow(0 0 5px rgba(246, 205, 83, 0.56));
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-endpoints circle {
        fill: #ffe873;
        filter: drop-shadow(0 0 7px rgba(246, 205, 83, 0.76));
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-star {
        fill: #fff3a6;
        stroke: #f6cd53;
        stroke-width: 0.45;
        filter: drop-shadow(0 0 5px rgba(246, 205, 83, 0.92));
        animation: industryStarTwinkle 1.4s ease-in-out infinite;
        transform-box: fill-box;
        transform-origin: center;
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-star:nth-child(2n) {
        animation-delay: -0.45s;
    }

    body.industries-page .industry-detail-panel.is-default .industry-default-cue p {
        color: rgba(239, 247, 255, 0.86);
    }
}

@keyframes industryStarTwinkle {
    0%, 100% { opacity: 0.72; transform: scale(0.82) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.18) rotate(18deg); }
}

/* Final spotlight polish: deeper blue atmosphere, luminous gold rings, and rotating stars. */
@media (min-width: 721px) {
    body.industries-page .industry-detail-panel.is-default {
        background:
            radial-gradient(circle at 50% 45%, rgba(16, 72, 139, 0.52), transparent 34%),
            radial-gradient(circle at 50% 50%, rgba(246, 205, 83, 0.08), transparent 20%),
            linear-gradient(145deg, #010b1d 0%, #031b3c 48%, #020c20 100%);
        border-color: rgba(246, 205, 83, 0.68);
        box-shadow: 0 28px 68px rgba(0, 5, 18, 0.48), inset 0 0 0 1px rgba(125, 191, 234, 0.14), inset 0 0 80px rgba(7, 61, 126, 0.24);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default {
        background:
            radial-gradient(circle at 50% 50%, rgba(19, 85, 164, 0.44), transparent 30%),
            radial-gradient(circle at 50% 50%, rgba(246, 205, 83, 0.07), transparent 17%),
            linear-gradient(145deg, #010b1d 0%, #031d43 52%, #020b1d 100%);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default::before {
        border-color: rgba(255, 220, 77, 0.42);
        box-shadow: 0 0 0 34px rgba(246, 205, 83, 0.07), 0 0 0 70px rgba(32, 125, 220, 0.06), 0 0 46px rgba(246, 205, 83, 0.18);
        animation: industryOrbitSpin 38s linear infinite, industryRingGlow 4.6s ease-in-out infinite;
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default::after {
        border-color: rgba(246, 205, 83, 0.24);
        box-shadow: 0 0 0 44px rgba(246, 205, 83, 0.04), 0 0 0 92px rgba(32, 125, 220, 0.055), 0 0 70px rgba(246, 205, 83, 0.1);
        animation: industryOrbitSpin 58s linear infinite reverse, industryRingGlow 6.2s ease-in-out infinite reverse;
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default-mark {
        box-shadow: 0 24px 50px rgba(0, 3, 14, 0.62), 0 0 0 8px rgba(246, 205, 83, 0.24), 0 0 28px rgba(246, 205, 83, 0.62), 0 0 68px rgba(246, 205, 83, 0.22);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default-mark::before {
        border-color: rgba(255, 226, 91, 0.68);
        box-shadow: 0 0 22px rgba(246, 205, 83, 0.36), inset 0 0 12px rgba(246, 205, 83, 0.1);
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-lines use {
        stroke: #ffdc4d;
        stroke-width: 0.5;
        filter: drop-shadow(0 0 5px rgba(246, 205, 83, 0.7)) drop-shadow(0 0 12px rgba(246, 205, 83, 0.28));
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-endpoints circle {
        fill: #fff0a1;
        filter: drop-shadow(0 0 6px rgba(246, 205, 83, 0.95)) drop-shadow(0 0 14px rgba(246, 205, 83, 0.36));
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-star {
        fill: #fff8c5;
        stroke: #ffdc4d;
        stroke-width: 0.58;
        filter: drop-shadow(0 0 4px #fff0a1) drop-shadow(0 0 9px rgba(246, 205, 83, 0.98)) drop-shadow(0 0 18px rgba(246, 205, 83, 0.46));
        animation: industryStarTravelSpin 5.2s linear infinite;
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-star:nth-child(2n) {
        animation-delay: -0.72s;
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-star:nth-child(3n) {
        animation-delay: -1.34s;
    }
}

@keyframes industryStarTravelSpin {
    0%, 100% { opacity: 0.68; transform: scale(0.84) rotate(0deg); }
    25% { opacity: 0.9; transform: scale(0.96) rotate(90deg); }
    50% { opacity: 1; transform: scale(1.06) rotate(180deg); }
    75% { opacity: 0.9; transform: scale(0.96) rotate(270deg); }
}

@keyframes industryRingGlow {
    0%, 100% { opacity: 0.58; }
    50% { opacity: 1; }
}

/* Final cursor cue: float above the cards without changing the existing tagline. */
.solutions-page .solutions-showcase {
    position: relative;
}

.solutions-page .solution-card-cursor {
    position: absolute !important;
    top: 42px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 20;
    display: block;
    width: 54px;
    height: 54px;
    margin: 0;
    pointer-events: none;
    transform: translateX(-50%);
}

.solutions-page .solution-card-cursor img {
    display: block;
    width: 54px !important;
    height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(246, 205, 83, .48));
    animation: solutionCardCursorFloat 2.8s ease-in-out infinite;
}

@keyframes solutionCardCursorFloat {
    0%, 100% { opacity: .76; transform: translateY(4px) scale(.94); }
    50% { opacity: 1; transform: translateY(-5px) scale(1); }
}

@media (max-width: 720px) {
    .solutions-page .solution-card-cursor {
        top: 62px !important;
        width: 44px;
        height: 44px;
    }

    .solutions-page .solution-card-cursor img {
        width: 44px !important;
        height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solution-card-cursor img {
        animation: none;
    }
}

/* Floating click cue above the solution cards; the original tagline stays below. */
.solutions-page .solutions-showcase {
    position: relative;
}

.solutions-page .solution-card-cursor {
    position: absolute;
    top: 84px;
    left: 50%;
    z-index: 10;
    width: 54px;
    height: 54px;
    pointer-events: none;
    transform: translateX(-50%);
}

.solutions-page .solution-card-cursor img {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(246, 205, 83, 0.48));
    animation: solutionCardCursorFloat 2.8s ease-in-out infinite;
}

@keyframes solutionCardCursorFloat {
    0%, 100% { opacity: 0.76; transform: translateY(4px) scale(0.94); }
    50% { opacity: 1; transform: translateY(-5px) scale(1); }
}

@media (max-width: 720px) {
    .solutions-page .solution-card-cursor {
        top: 62px;
        width: 44px;
        height: 44px;
    }

    .solutions-page .solution-card-cursor img {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solution-card-cursor img {
        animation: none;
    }
}
    box-shadow: 0 0 0 6px rgba(245, 193, 22, 0.12);
    animation: industryDotLeftTop 3s linear infinite;
}

.industry-default-line-left {
    left: 0;
}

.industry-default-line-left::before {
    border-top-width: 2px;
    border-right-width: 2px;
    border-radius: 0 28px 28px 0;
}

.industry-default-line-left::after {
    left: calc(100% - 4px);
    top: calc(100% - 7px);
}

.industry-default-line-right {
    right: 0;
}

.industry-default-line-right::before {
    border-top-width: 2px;
    border-left-width: 2px;
    border-radius: 28px 0 0 28px;
}

.industry-default-line-right::after {
    left: -3px;
    top: calc(100% - 7px);
    animation-name: industryDotRightTop;
}

.industry-default-line-1 {
    top: 20%;
}

.industry-default-line-2 {
    top: 45%;
    height: 2px;
}

.industry-default-line-left.industry-default-line-2::after {
    left: calc(100% - 7px);
    top: -3px;
    animation-name: industryDotLeftStraight;
}

.industry-default-line-right.industry-default-line-2::after {
    left: 0;
    top: -3px;
    animation-name: industryDotRightStraight;
}

.industry-default-line-2::after {
    animation-delay: 0.45s;
}

.industry-default-line-2::before {
    border-right-width: 0;
    border-left-width: 0;
}

.industry-default-line-3 {
    bottom: 20%;
}

.industry-default-line-left.industry-default-line-3::before {
    border-top-width: 0;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-radius: 0 0 28px 0;
}

.industry-default-line-right.industry-default-line-3::before {
    border-top-width: 0;
    border-left-width: 2px;
    border-bottom-width: 2px;
    border-radius: 0 0 0 28px;
}

.industry-default-line-left.industry-default-line-3::after {
    left: calc(100% - 4px);
    top: 0;
    animation-name: industryDotLeftBottom;
    animation-delay: 0.9s;
}

.industry-default-line-right.industry-default-line-3::after {
    left: -3px;
    top: 0;
    animation-name: industryDotRightBottom;
    animation-delay: 0.9s;
}

.industry-default-cue {
    position: absolute;
    right: 0;
    bottom: 36px;
    left: 0;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 8px;
    color: var(--navy-900);
}

.industry-default-cue svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: var(--gold-500);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    animation: industryTapFloat 1.8s ease-in-out infinite;
}

.industry-default-cue p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

@keyframes industryCenterPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 24px 50px rgba(4, 24, 56, 0.28), 0 0 0 6px rgba(246, 205, 83, 0.14);
    }

    50% {
        transform: scale(1.035);
        box-shadow: 0 30px 62px rgba(4, 24, 56, 0.32), 0 0 0 9px rgba(246, 205, 83, 0.2);
    }
}

@keyframes industryRingPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }

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

@keyframes industryOrbitSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes industryLineFlow {
    0% {
        opacity: 0.45;
        filter: saturate(0.86);
    }

    50% {
        opacity: 1;
        filter: saturate(1.2);
    }

    100% {
        opacity: 0.45;
        filter: saturate(0.86);
    }
}

@keyframes industryNetworkBreathe {
    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

@keyframes industryDotLeftTop {
    0% {
        left: calc(100% - 4px);
        top: calc(100% - 7px);
        opacity: 0.25;
        transform: scale(0.72);
    }

    28% {
        left: calc(100% - 4px);
        top: 1px;
        opacity: 1;
        transform: scale(1);
    }

    40% {
        left: calc(100% - 18px);
        top: -3px;
        opacity: 1;
    }

    86% {
        opacity: 1;
    }

    100% {
        left: 0;
        top: -3px;
        opacity: 0.25;
        transform: scale(1.05);
    }
}

@keyframes industryDotRightTop {
    0% {
        left: -3px;
        top: calc(100% - 7px);
        opacity: 0.25;
        transform: scale(0.72);
    }

    28% {
        left: -3px;
        top: 1px;
        opacity: 1;
        transform: scale(1);
    }

    40% {
        left: 12px;
        top: -3px;
        opacity: 1;
    }

    86% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 7px);
        top: -3px;
        opacity: 0.25;
        transform: scale(1.05);
    }
}

@keyframes industryDotLeftStraight {
    0% {
        left: calc(100% - 7px);
        top: -3px;
        opacity: 0.25;
        transform: scale(0.72);
    }

    12%,
    86% {
        opacity: 1;
    }

    100% {
        left: 0;
        top: -3px;
        opacity: 0.25;
        transform: scale(1.05);
    }
}

@keyframes industryDotRightStraight {
    0% {
        left: 0;
        top: -3px;
        opacity: 0.25;
        transform: scale(0.72);
    }

    12%,
    86% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 7px);
        top: -3px;
        opacity: 0.25;
        transform: scale(1.05);
    }
}

@keyframes industryDotLeftBottom {
    0% {
        left: calc(100% - 4px);
        top: 0;
        opacity: 0.25;
        transform: scale(0.72);
    }

    28% {
        left: calc(100% - 4px);
        top: calc(100% - 7px);
        opacity: 1;
        transform: scale(1);
    }

    40% {
        left: calc(100% - 18px);
        top: calc(100% - 4px);
        opacity: 1;
    }

    86% {
        opacity: 1;
    }

    100% {
        left: 0;
        top: calc(100% - 4px);
        opacity: 0.25;
        transform: scale(1.05);
    }
}

@keyframes industryDotRightBottom {
    0% {
        left: -3px;
        top: 0;
        opacity: 0.25;
        transform: scale(0.72);
    }

    28% {
        left: -3px;
        top: calc(100% - 7px);
        opacity: 1;
        transform: scale(1);
    }

    40% {
        left: 12px;
        top: calc(100% - 4px);
        opacity: 1;
    }

    86% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 7px);
        top: calc(100% - 4px);
        opacity: 0.25;
        transform: scale(1.05);
    }
}

@keyframes industryTapFloat {
    0%,
    100% {
        transform: translateY(0);
    }

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

.industry-detail-active {
    display: grid;
    grid-template-rows: 202px minmax(0, 1fr);
    height: 100%;
    gap: 0;
}

.industry-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 50%;
    box-shadow: 0 10px 26px rgba(4, 24, 56, 0.12);
    cursor: pointer;
}

.industry-detail-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.industry-detail-visual {
    position: relative;
    height: 202px;
    min-height: 0;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

.industry-detail-visual::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(4, 24, 56, 0.88), rgba(4, 24, 56, 0.38) 62%, rgba(4, 24, 56, 0.82)),
        linear-gradient(180deg, rgba(4, 24, 56, 0.08), rgba(4, 24, 56, 0.78));
}

.industry-detail-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.industry-detail-heading {
    position: absolute;
    right: 28px;
    bottom: 24px;
    left: 28px;
    z-index: 2;
    color: var(--white);
}

.industry-detail-heading p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: rgba(245, 193, 22, 0.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.industry-detail-heading p span {
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500));
    border-radius: 999px;
}

.industry-detail-heading h3 {
    margin: 0 0 8px;
    font-family: var(--display);
    font-size: 36px;
    line-height: 1.04;
}

.industry-detail-heading span {
    display: block;
    max-width: 520px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 14px;
    line-height: 1.55;
}

.industry-detail-body {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 0;
    padding: 16px 22px 18px;
    overflow: hidden;
}

.industry-detail-columns {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
}

.industry-detail-column {
    grid-column: span 6;
    min-height: 126px;
    padding: 15px 16px;
    color: var(--white);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.045));
    border: 1px solid rgba(212, 175, 55, 0.16);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.industry-detail-column:nth-child(3) {
    grid-column: span 12;
    min-height: auto;
    padding: 14px 16px;
    background:
        linear-gradient(90deg, rgba(245, 193, 22, 0.13), rgba(255, 255, 255, 0.055));
    border-color: rgba(245, 193, 22, 0.24);
}

.industry-detail-column h4,
.industry-detail-list h4 {
    margin: 0 0 10px;
    color: var(--gold-100);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.industry-detail-column p {
    margin: 0;
    color: rgba(207, 224, 242, 0.88);
    font-size: 13px;
    line-height: 1.52;
}

.industry-detail-grid {
    display: grid;
    grid-template-columns: 1.06fr 0.9fr 1.04fr;
    align-items: stretch;
    gap: 12px;
}

.industry-detail-list {
    min-height: 126px;
    padding: 14px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.045));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.industry-detail-list ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.industry-detail-list li {
    position: relative;
    padding-left: 17px;
    color: rgba(207, 224, 242, 0.88);
    font-size: 12.8px;
    line-height: 1.32;
}

.industry-detail-list li::before {
    position: absolute;
    top: 6px;
    left: 0;
    width: 6px;
    height: 6px;
    content: "";
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500));
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
}

.industry-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 50px;
    padding: 10px 12px 10px 16px;
    color: rgba(207, 224, 242, 0.82);
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.industry-detail-footer span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.industry-detail-cta {
    display: inline-flex;
    flex: 0 0 auto;
    width: fit-content;
    min-width: 196px;
    min-height: 40px;
    margin-top: 0;
}

.industry-applications {
    padding: 82px 0 76px;
    background:radial-gradient(circle at 50% 0%, rgb(245 193 22 / 18%), #f4f4f4 18%), linear-gradient(180deg, #FFFFFF 0%, #F9FBFE 100%)
}

.industry-applications > .container-fluid {
    width: min(100% - 52px, 1540px);
    margin: 0 auto;
}

.industry-applications .industry-section-intro {
    max-width: 980px;
    margin-bottom: 24px;
}

.industry-applications .industry-section-intro h2 {
    max-width: none;
    font-family: var(--display);
    font-size: clamp(30px, 2.4vw, 38px);
}

.industry-applications .industry-section-intro p:last-child {
    display: none;
}

.application-carousel {
    position: relative;
    padding: 0 70px;
}

.application-carousel::before,
.application-carousel::after {
    position: absolute;
    top: 0;
    bottom: 22px;
    z-index: 2;
    width: 58px;
    content: "";
    pointer-events: none;
}

.application-carousel::before {
    left: 70px;
    background: linear-gradient(90deg, #F9FBFE 0%, rgba(249, 251, 254, 0));
}

.application-carousel::after {
    right: 70px;
    background: linear-gradient(270deg, #F9FBFE 0%, rgba(249, 251, 254, 0));
}

.application-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: var(--white);
    background: linear-gradient(180deg, #061D42, #041838);
    border: 3px solid #D5A52E;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6px rgba(213, 165, 46, 0.28), 0 16px 30px rgba(4, 24, 56, 0.22);
    cursor: pointer;
    transform: translateY(-50%);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
}

.application-nav-prev {
    left: 5px;
}

.application-nav-next {
    right: 5px;
}

.application-nav:hover {
    background: linear-gradient(180deg, #082B56, #041838);
    border-color: #F5C116;
    box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 7px rgba(245, 193, 22, 0.38), 0 20px 36px rgba(4, 24, 56, 0.26);
    transform: translateY(-50%) scale(1.06);
}

.application-nav:disabled {
    opacity: 0.42;
    cursor: default;
    transform: translateY(-50%);
    box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6px rgba(213, 165, 46, 0.16), 0 10px 20px rgba(4, 24, 56, 0.12);
}

.application-nav:focus-visible,
.application-dot:focus-visible {
    outline: 3px solid #F5C116;
    outline-offset: 4px;
}

.application-nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.application-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(220px, calc((100% - 84px) / 5.4), 268px);
    gap: 18px;
    padding: 12px 4px 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.application-scroller.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.application-scroller::-webkit-scrollbar {
    display: none;
}

.application-card {
    position: relative;
    display: grid;
    overflow: hidden;
    justify-items: center;
    align-content: start;
    gap: 14px;
    min-height: 248px;
    padding: 26px 20px 22px;
    text-align: center;
    background: linear-gradient(155deg, #FFFFFF 0%, #FFFBF1 100%);
    border: 2px solid rgba(212, 175, 55, 0.48);
    border-top: 4px solid var(--gold-700);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(4, 24, 56, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.92);
    scroll-snap-align: start;
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.application-card:hover {
    transform: translateY(-7px);
    background: linear-gradient(155deg, #FFFFFF 0%, #FFF6DA 100%);
    border-color: var(--gold-700);
    box-shadow: 0 25px 46px rgba(4, 24, 56, 0.14), 0 0 0 3px rgba(212, 175, 55, 0.12);
}

.application-icon {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    color: var(--gold-500);
    background: linear-gradient(145deg, var(--navy-800), var(--navy-900));
    border: 3px solid var(--gold-700);
    border-radius: 50%;
    box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6px rgba(212, 175, 55, 0.30), 0 13px 25px rgba(4, 24, 56, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: color var(--ease), border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.application-card:hover .application-icon {
    color: #FFF0AE;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 7px rgba(246, 205, 83, 0.38), 0 16px 30px rgba(4, 24, 56, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-2px) scale(1.04);
}

.application-icon svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.application-card h3 {
    margin: 0;
    color: var(--navy-900);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.24;
}

.application-card h3::after {
    display: block;
    width: 34px;
    height: 3px;
    margin: 10px auto 0;
    content: "";
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500));
    border-radius: 999px;
}

.application-card p {
    margin: 0;
    color: #52677E;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.6;
}

.application-dots {
    display: flex;
    min-height: 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.application-dot {
    width: 14px;
    height: 14px;
    padding: 0;
    background: #FFFFFF;
    border: 3px solid #D5A52E;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(4, 24, 56, 0.10);
    cursor: pointer;
    transition: width var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.application-dot.is-active {
    width: 38px;
    background: #D5A52E;
    border-color: #D5A52E;
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px #F9DF91, 0 5px 12px rgba(213, 165, 46, 0.28);
}

.application-dot:hover {
    border-color: #F5C116;
    transform: translateY(-2px);
}


.gradient-text {
    background-image: linear-gradient(to right, #ff7e5f, #feb47b);
 -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  color: #ff7e5f;
}

.industry-support {
    position: relative;
    padding: 0;
    background: var(--navy-900);
}

.industry-support-layout {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    min-height: 540px;
    margin: 0 auto;
    gap: 0;
    overflow: hidden;
    background: url("../images/solution-trading.png") center 58% / cover no-repeat;
    border: 0;
    border-top: 4px solid var(--gold-700);
    border-bottom: 1px solid rgba(246, 205, 83, 0.44);
    box-shadow: 0 24px 58px rgba(4, 24, 56, 0.20), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.industry-support-layout::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background: linear-gradient(90deg, rgba(3, 18, 37, 0.98) 0%, rgba(4, 24, 56, 0.94) 38%, rgba(4, 24, 56, 0.74) 64%, rgba(4, 24, 56, 0.38) 100%);
    pointer-events: none;
}

.industry-support-card {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    align-content: center;
    justify-items: start;
    overflow: hidden;
    min-height: 540px;
    padding: clamp(64px, 7vw, 112px) clamp(28px, 7vw, 128px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.industry-support-card:hover {
    box-shadow: none;
    transform: none;
}

.industry-support-card h2 {
    max-width: 27ch;
    margin-bottom: 20px;
    color: var(--white);
    font-family: var(--display);
    font-size: clamp(40px, 3.2vw, 58px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.018em;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.26);
}

.industry-support .eyebrow {
    margin-bottom: 14px;
    color: var(--gold-500);
    letter-spacing: 0.19em;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}

.industry-support-card p:not(.eyebrow) {
    max-width: 58ch;
    margin: 0 0 30px;
    color: rgba(232, 240, 247, 0.90);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.7;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
}

.industry-support-map {
    z-index: 1;
    background: transparent;
}

.industry-support-map::before {
    display: none;
}

.industry-support-map img {
    position: absolute;
    right: clamp(20px, 4vw, 92px);
    top: 50%;
    z-index: 0;
    width: min(43vw, 560px);
    opacity: 0.17;
    filter: grayscale(1) saturate(0.55) contrast(0.94);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 0.88) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 1) 42%, rgba(0, 0, 0, 0.88) 100%);
    transform: translateY(-50%) translateX(0);
    animation: supportMapDrift 14s ease-in-out infinite alternate;
    pointer-events: none;
}

.industry-support-map .eyebrow,
.industry-support-map h2,
.industry-support-map p,
.industry-support-map .button {
    position: relative;
    z-index: 1;
}

.industry-support-cta {
    z-index: 2;
    margin-left: -78px;
    padding-left: clamp(120px, 9vw, 172px);
    padding-right: clamp(48px, 5.8vw, 108px);
    color: var(--white);
    background:
        radial-gradient(circle at 82% 30%, rgba(15, 94, 156, 0.24), transparent 28%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, #031225 0%, #041838 50%, #08284F 100%);
    background-size: auto, 86px 86px, 86px 86px, auto;
    clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
    border: none;
}

.industry-support-cta h2 {
    max-width: 26ch;
    color: var(--white);
}

.industry-support-cta::before {
    position: absolute;
    right: 0;
    bottom: -4%;
    z-index: 0;
    width: 52%;
    height: 112%;
    content: "";
    background:
        repeating-radial-gradient(ellipse at 100% 50%, rgba(245, 193, 22, 0.2) 0 1px, transparent 1px 11px);
    opacity: 0.42;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.88) 42%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.88) 42%, transparent 100%);
    animation: supportLineScan 12s linear infinite;
    pointer-events: none;
}

.industry-support-cta::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.08), transparent 22%),
        radial-gradient(circle at 96% 64%, rgba(245, 193, 22, 0.16), transparent 26%);
    pointer-events: none;
}

.industry-support-cta .eyebrow,
.industry-support-cta h2,
.industry-support-cta p,
.industry-support-cta .industry-support-actions {
    position: relative;
    z-index: 1;
}

.industry-support-cta .eyebrow {
    color: var(--gold-500);
}

.industry-support-cta p:not(.eyebrow) {
    max-width: 66ch;
    color: rgba(207, 224, 242, 0.86);
}

.industry-support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 6px;
}

.industry-support-cta .button-outline {
    color: var(--white);
    background: transparent;
    border-color: rgba(212, 175, 55, 0.46);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.08);
}

.industry-support-map .button-outline {
    display: inline-flex;
    min-width: 300px;
    min-height: 58px;
    padding: 15px 24px;
    justify-content: center;
    gap: 14px;
    color: var(--navy-900);
    background: linear-gradient(148deg, rgba(238, 164, 45, 1) 0%, rgba(255, 248, 123, 1) 42%, rgba(238, 164, 45, 1) 100%);
    border: 2px solid #F8D876;
    border-radius: 10px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26), 0 0 0 4px rgba(246, 205, 83, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.48);
    font-weight: 900;
    letter-spacing: 0.035em;
}

.industry-support-map .button-outline svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 220ms ease;
}

.industry-support-map .button-outline:hover {
    color: var(--navy-900);
    background: linear-gradient(135deg, #FFE07A, var(--gold-500));
    border-color: #FFF0B5;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32), 0 0 0 5px rgba(246, 205, 83, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.58);
    transform: translateY(-3px);
}

.industry-support-map .button-outline:hover svg {
    transform: translateX(4px);
}

.industry-support-map .button-outline:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 4px;
}

.industry-support-actions .button {
    min-width: 248px;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

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

.industry-support-cta .button-outline:hover {
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.96);
}

@keyframes supportMapDrift {
    0% {
        opacity: 0.16;
        transform: translateY(-50%) translateX(0);
    }

    100% {
        opacity: 0.24;
        transform: translateY(-50%) translateX(-14px);
    }
}

@keyframes supportLineScan {
    0% {
        background-position: 0 0;
    }

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

@media (min-width: 921px) and (max-height: 860px) {
    .industry-hero {
        padding-top: var(--industries-header-height);
        padding-bottom: 12px;
    }

    .industry-hero-copy {
        min-height: 0;
        padding: 22px 20px 14px 45px;

    }

    .industry-hero-copy::after {
        top: 96px;
        width: 42px;
        height: 42px;
    }

    .industry-hero-copy h1 {
        font-size: 40px;
        margin-bottom: 10px;
    }

    .industry-hero-copy p:not(.eyebrow) {
        font-size: 14.5px;
        line-height: 1.52;
        margin-bottom: 8px;
    }

    .industry-hero-copy p:not(.eyebrow):last-of-type {
        display: none;
    }

    .industry-hero-actions {
        margin-top: 14px;
        gap: 12px;
    }

    .industry-hero-actions .button {
        min-width: 176px;
        min-height: 42px;
        padding: 11px 18px;
    }

    .industry-hero-showcase {
        margin-left: -84px;
        grid-template-rows: minmax(0, 1fr) 64px;
    }

    .industry-collage-slice {
        min-height: 0;
    }

    .industry-collage-slice:nth-child(1) {
        --slice-y: 10px;
    }

    .industry-collage-slice:nth-child(3) {
        --slice-y: 10px;
    }

    .industry-hero-points {
        right: auto;
        bottom: auto;
        left: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        min-height: 64px;
        padding: 0 14px 0 92px;
    }

    .industry-hero-points::before {
        top: -22px;
        bottom: 0;
        left: -92px;
        display: block;
        width: 164px;
        height: auto;
        border-top-right-radius: 44px;
    }

    .industry-hero-points article {
        min-height: 64px;
        padding: 8px 10px;
    }

    .industry-hero-points svg,
    .industry-hero-points img {
        width: 30px;
        height: 30px;
        padding: 0;
    }

    .industry-hero-points span {
        font-size: 12px;
    }
}

@media (max-width: 1280px) {
    .industry-hero-layout {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    }

    .industry-hero-copy {
        min-height: 0;
        padding: 24px 34px 18px 24px;
    }

    .industry-hero-copy h1 {
        font-size: 40px;
    }

    .industry-hero-copy::before {
        right: -28px;
        width: 56px;
    }

    .industry-hero-copy::after {
        right: 12px;
    }

    .industry-hero-showcase {
        margin-left: -92px;
    }

    .industry-collage-slice {
        min-height: 0;
    }

    .industry-hero-points {
        right: auto;
        bottom: auto;
        left: auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        padding: 0 16px 0 96px;
    }

    .industry-hero-points article {
        border: 0;
    }

    .industry-hero-points article:nth-child(-n + 2) {
        border-top: 0;
    }

    .industry-hero-points article + article {
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }

    .industry-hero-points article:nth-child(2n) {
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }

    .industry-hero-points::before {
        top: -24px;
        bottom: 0;
        left: -96px;
        width: 172px;
        height: auto;
    }

    .industry-hub-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .industry-hub-layout::before,
    .industry-hub-layout::after {
        display: none;
    }

    .industry-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: minmax(112px, auto);
        height: auto;
    }

    .industry-list-left {
        order: 1;
    }

    .industry-spotlight {
        order: 2;
    }

    .industry-list-right {
        order: 3;
    }

    .industry-detail-panel,
    .industry-spotlight {
        height: auto;
        min-height: auto;
    }

    .industry-detail-default {
        min-height: 520px;
    }

    .application-scroller {
        grid-auto-columns: minmax(160px, calc((100% - 56px) / 5));
    }

    .industry-support-layout {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1181px) and (max-width: 1439px) {
    .industry-hub-section > .container-fluid {
        width: min(100% - 36px, 1360px);
    }

    .industry-hub-layout {
        grid-template-columns: minmax(220px, 0.72fr) minmax(0, 2fr) minmax(220px, 0.72fr);
        gap: 16px;
    }

    .industry-list,
    .industry-spotlight {
        height: 680px;
    }

    .industry-list {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    .industry-detail-panel {
        height: 100%;
    }

    .industry-node {
        grid-template-columns: 22px 44px minmax(0, 1fr) 30px;
        gap: 10px;
        padding: 14px 12px;
    }

    .industry-node-icon {
        width: 44px;
        height: 44px;
    }

    .industry-node-copy strong h3 {
        font-size: 15px;
    }

    .industry-node-copy small {
        font-size: 11px;
    }

    .industry-detail-active {
        grid-template-rows: 190px minmax(0, 1fr);
    }

    .industry-detail-visual {
        height: 190px;
    }

    .industry-detail-body {
        padding: 16px;
    }
}

@media (max-width: 920px) {
    .industries-page .primary-nav {
        top: var(--industries-header-height);
        min-height: calc(100vh - var(--industries-header-height));
    }

    .industry-hero {
        height: auto;
        min-height: 80vh;
        max-height: none;
        padding-top: var(--industries-header-height);
        padding-bottom: 16px;
        background: linear-gradient(180deg, #F8FBFE 0%, #FFFFFF 48%, #EEF5FB 100%);
    }

    .industry-hero-layout {
        grid-template-columns: 1fr;
        border-radius: 8px;
    }

    .industry-hero-copy {
        min-height: auto;
        padding: 22px 18px 16px;
    }

    .industry-hero-copy::before {
        display: none;
    }

    .industry-hero-copy::after {
        display: none;
    }

    .industry-hero-copy p:not(.eyebrow) {
        font-size: 15px;
    }

    .industry-hero-showcase {
        margin-left: 0;
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .industry-hero-showcase {
        border-top: 1px solid rgba(11, 58, 109, 0.06);
    }

    .industry-collage {
        gap: 0;
    }

    .industry-collage-slice {
        min-height: 196px;
    }

    .industry-collage-slice:nth-child(1),
    .industry-collage-slice:nth-child(2),
    .industry-collage-slice:nth-child(3),
    .industry-collage-slice:nth-child(4) {
        --slice-y: 0px;
    }

    .industry-hero-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: auto;
        padding: 12px;
    }

    .industry-hero-points article {
        justify-content: flex-start;
        min-height: 58px;
        padding: 10px 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .industry-hero-points::before {
        display: none;
    }

    .industry-hero-points::after {
        right: 12px;
        left: 12px;
    }

    .industry-hub-section,
    .industry-applications {
        padding: 74px 0;
    }

    .industry-hub-section > .container-fluid {
        width: min(100% - 32px, 760px);
    }

    .industry-applications > .container-fluid {
        width: min(100% - 28px, 760px);
    }

    .industry-applications .industry-section-intro {
        margin-bottom: 18px;
    }

    .industry-applications .industry-section-intro h2 {
        font-size: 30px;
    }

    .industry-hub-section .industry-section-intro {
        margin-bottom: 24px;
    }

    .industry-hub-section .industry-section-intro h2 {
        font-size: clamp(30px, 5.4vw, 34px);
        line-height: 1.1;
    }

    .industry-list {
        height: auto;
        grid-template-rows: none;
        grid-auto-rows: minmax(104px, auto);
    }

    .industry-node {
        min-height: 104px;
        height: auto;
    }

    .industry-detail-default {
        min-height: 460px;
        padding: 34px 24px;
    }

    .industry-detail-default h3 {
        font-size: 36px;
    }

    .industry-detail-visual {
        height: 248px;
        min-height: 0;
    }

    .industry-detail-heading h3 {
        font-size: 32px;
    }

    .industry-spotlight,
    .industry-detail-panel {
        height: auto;
        min-height: 0;
    }

    .industry-detail-active {
        grid-template-rows: auto auto;
        height: auto;
    }

    .industry-detail-body {
        overflow: visible;
    }

    .industry-detail-columns,
    .industry-detail-grid {
        grid-template-columns: 1fr;
    }

    .industry-detail-column,
    .industry-detail-column:nth-child(3) {
        grid-column: auto;
        min-height: 0;
    }

    .industry-detail-footer {
        flex-wrap: wrap;
    }

    .application-carousel {
        padding: 0 44px;
    }

    .application-carousel::before {
        left: 44px;
        width: 36px;
    }

    .application-carousel::after {
        right: 44px;
        width: 36px;
    }

    .application-nav {
        width: 38px;
        height: 38px;
    }

    .application-scroller {
        grid-auto-columns: minmax(178px, calc((100% - 28px) / 3));
        gap: 14px;
    }

    .application-card {
        min-height: 210px;
    }

    .industry-support-card {
        min-height: auto;
    }

    .industry-support-layout {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 500px;
        background-position: 58% center;
        border-radius: 0;
    }

    .industry-support-card {
        min-height: 500px;
        padding: 64px 32px;
    }

    .industry-support-map {
        padding-right: 32px;
    }

    .industry-support-card h2 {
        max-width: 15ch;
    }

    .industry-support-cta {
        margin-left: 0;
        padding-left: 28px;
        padding-right: 28px;
        clip-path: none;
    }

    .industry-support-map img {
        right: -52px;
        width: min(62%, 430px);
        opacity: 0.16;
    }
}

@media (max-width: 640px) {
    .industry-hero {
        padding-top: var(--industries-header-height);
        padding-bottom: 10px;
        background: linear-gradient(180deg, #F8FBFE 0%, #FFFFFF 52%, #EEF5FB 100%);
    }

    .industry-hero-layout {
        border-radius: 8px;
    }

    .industry-hero-copy {
        padding: 20px 16px 14px;
    }

    .industry-hero-copy::after {
        display: none;
    }

    .industry-hero-copy h1 {
        max-width: 10ch;
        font-size: 32px;
    }

    .industry-hero-actions,
    .industry-support-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .industry-hero-actions .button,
    .industry-support-actions .button {
        width: 100%;
        min-width: 0;
    }

    .industry-collage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .industry-collage-slice {
        min-height: 142px;
        clip-path: none;
        border-radius: 8px;
    }

    .industry-hero-points {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .industry-hero-points article {
        min-height: 50px;
        padding: 10px 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .industry-hero-points article:nth-child(1) {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .industry-hero-points article:nth-child(n + 2) {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .industry-hero-points article + article,
    .industry-hero-points article:nth-child(2n) {
        border-left: none;
    }

    .industry-section-intro h2,
    .industry-support-card h2 {
        font-size: 32px;
    }

    .industry-hub-section {
        padding: 60px 0 64px;
    }

    .industry-hub-section > .container-fluid {
        width: min(100% - 24px, 560px);
    }

    .industry-hub-section .industry-section-intro {
        margin-bottom: 20px;
    }

    .industry-hub-section .industry-section-intro h2 {
        max-width: 13ch;
        font-size: clamp(28px, 8.5vw, 32px);
        line-height: 1.08;
    }

    .industry-hub-section .industry-section-intro p:last-child {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.55;
    }

    .industry-hub-layout {
        gap: 14px;
    }

    .industry-list {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 10px;
    }

    .industry-node {
        grid-template-columns: 24px 48px minmax(0, 1fr) 32px;
        gap: 10px;
        min-height: 92px;
        padding: 14px 12px;
        border-radius: 14px;
    }

    .industry-node-action {
        grid-column: auto;
        justify-self: center;
        width: 32px;
        height: 32px;
        margin-top: 0;
    }

    .industry-node-index {
        align-self: center;
        font-size: 10px;
    }

    .industry-node-icon {
        width: 48px;
        height: 48px;
    }

    .industry-node svg {
        width: 24px;
        height: 24px;
    }

    .industry-node-copy strong h3 {
        font-size: 16px;
        line-height: 1.2;
    }

    .industry-node-copy small {
        font-size: 11.5px;
        line-height: 1.35;
    }

    .industry-detail-panel {
        padding: 0;
        border-radius: 18px;
        scroll-margin-top: calc(var(--industries-header-height) + 16px);
    }

    .industry-detail-default {
        min-height: 340px;
        padding: 24px 16px;
    }

    .industry-detail-default-mark {
        width: 112px;
        height: 112px;
    }

    .industry-detail-default-mark img {
        width: 84px;
        height: auto;
    }

    .industry-detail-default h3 {
        font-size: 28px;
    }

    .industry-default-cue {
        bottom: 22px;
    }

    .industry-detail-visual {
        height: 200px;
        min-height: 0;
    }

    .industry-detail-heading {
        right: 18px;
        bottom: 18px;
        left: 18px;
    }

    .industry-detail-heading h3 {
        font-size: clamp(24px, 7.4vw, 28px);
    }

    .industry-detail-heading span {
        font-size: 12.5px;
        line-height: 1.45;
    }

    .industry-detail-close {
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
    }

    .industry-detail-body {
        gap: 10px;
        padding: 14px;
    }

    .industry-detail-columns,
    .industry-detail-grid {
        gap: 10px;
    }

    .industry-detail-column,
    .industry-detail-column:nth-child(3),
    .industry-detail-list {
        min-height: 0;
        padding: 14px;
    }

    .industry-detail-footer {
        align-items: stretch;
        padding: 14px;
        flex-direction: column;
        gap: 12px;
    }

    .industry-detail-footer span {
        font-size: 10.5px;
        line-height: 1.4;
        text-align: center;
    }

    .industry-detail-cta {
        width: 100%;
        min-width: 0;
    }

    .application-scroller {
        grid-auto-columns: 76%;
    }

    .application-card {
        min-height: 212px;
    }

    .application-carousel {
        padding: 0;
    }

    .application-carousel::before,
    .application-carousel::after {
        display: none;
    }

    .application-nav {
        display: none;
    }

    .industry-support-card {
        min-height: 520px;
        padding: 54px 24px;
        border-radius: 0;
    }

    .industry-support-map,
    .industry-support-cta {
        padding-right: 24px;
        padding-left: 24px;
    }

    .industry-support-layout {
        min-height: 520px;
        background-position: 61% center;
    }

    .industry-support-layout::before {
        background: linear-gradient(180deg, rgba(3, 18, 37, 0.88) 0%, rgba(4, 24, 56, 0.94) 52%, rgba(4, 24, 56, 0.98) 100%);
    }

    .industry-support-card h2 {
        max-width: 13ch;
        font-size: clamp(32px, 10vw, 42px);
        line-height: 1.06;
    }

    .industry-support-card p:not(.eyebrow) {
        margin-bottom: 26px;
        font-size: 14.5px;
        line-height: 1.62;
    }

    .industry-support-map .button-outline {
        width: 100%;
        min-width: 0;
        min-height: 56px;
        padding: 14px 18px;
    }

    .industry-support-map img {
        position: absolute;
        top: 58%;
        right: -62px;
        bottom: auto;
        width: 92%;
        max-width: 390px;
        margin-top: 0;
        opacity: 0.12;
        transform: translateY(-50%);
        animation: none;
    }
}

/* About page */
body.about-page {
    --about-header-height: 86px;
    background:
        radial-gradient(circle at 12% 16%, rgba(245, 193, 22, 0.08), transparent 24%),
        linear-gradient(180deg, #FFFFFF 0%, #F6FAFE 44%, #FFFFFF 100%);
}

.about-page main {
    overflow: hidden;
}

.about-page .site-header {
    padding-top: 0;
    min-height: var(--about-header-height);
    overflow: visible;
    background: rgba(4, 24, 56, 0.96);
    z-index: 100;
}

.about-page .header-inner {
    height: var(--about-header-height);
    min-height: var(--about-header-height);
    align-items: center;
}

.about-page .site-header .brand {
    height: var(--about-header-height);
    align-items: center;
}

.about-page .logo-heander {
    display: block;
    width: auto;
    height: 72px;
    max-height: 72px;
    object-fit: contain;
    object-position: center;
}

.about-hero {
    position: relative;
    min-height: 80vh;
    padding: calc(var(--about-header-height) + 44px) 0 58px;
    color: var(--white);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 82% 24%, rgba(245, 193, 22, 0.18), transparent 18%),
        linear-gradient(135deg, #041838 0%, #082B56 54%, #0B3A6D 100%);
    background-size: 92px 92px, 92px 92px, auto, auto;
    isolation: isolate;
}

    /* .about-hero::before {
        position: absolute;
        inset: auto 0 0;
        height: 160px;
        content: "";
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.98));
        pointer-events: none;
    } */

.about-hero::after {
    position: absolute;
    top: 24%;
    right: 42%;
    width: 260px;
    height: 260px;
    content: "";
    background: radial-gradient(circle, rgba(245, 193, 22, 0.18), transparent 68%);
    filter: blur(10px);
    pointer-events: none;
}

.about-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(390px, 0.82fr) minmax(580px, 1.18fr);
    align-items: center;
    gap: clamp(24px, 3.4vw, 52px);
}

.about-hero-copy {
    max-width: 620px;
}

.about-hero-copy h1 {
    max-width: 720px;
    margin: 0 0 22px;
    color: var(--white);
    font-family: var(--display);
    font-size: clamp(46px, 4.7vw, 59px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0;
}

.about-hero-copy h1 span,
.about-section-heading h2 span,
.about-section-card h2 span,
.about-approach-panel h2 span,
.about-commitment-panel h2 span,
.about-final-panel h2 span {
    color: var(--gold-500);
}

.about-hero-copy > p:not(.eyebrow) {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    line-height: 1.72;
}

.about-hero-actions,
.about-final-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.about-hero .button-outline,
.about-final-cta .button-outline {
    color: var(--white);
    border-color: rgba(245, 193, 22, 0.52);
    background: rgba(255, 255, 255, 0.03);
}

.about-hero .button-outline:hover,
.about-final-cta .button-outline:hover {
    color: var(--navy-900);
    background: var(--gold-500);
}

.about-hero-visual {
    position: relative;
    min-height: 550px;
    overflow: hidden;
    border: 1px solid rgba(245, 193, 22, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34);
}

.about-hero-visual::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    /* background:
        linear-gradient(180deg, rgba(4, 24, 56, 0.08), rgba(4, 24, 56, 0.72)),
        linear-gradient(90deg, rgba(4, 24, 56, 0.42), transparent 44%); */
    pointer-events: none;
}

.about-hero-visual img {
    width: 100%;
    height: 100%;
    min-height: 550px;
    object-fit: cover;
    object-position: center 52%;
    filter: saturate(1.05) contrast(1.025);
    transform: scale(1.015);
}

.about-hero-badge {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 2;
    display: grid;
    gap: 4px;
    max-width: 250px;
    padding: 16px 18px;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background: rgba(4, 24, 56, 0.74);
    backdrop-filter: blur(14px);
}

.about-hero-badge span {
    color: var(--gold-500);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.about-hero-badge strong {
    font-size: 18px;
    line-height: 1.2;
}

.about-hero-metrics {
    position: absolute;
    right: 26px;
    bottom: 26px;
    left: 26px;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.about-hero-metrics article {
    min-height: 108px;
    padding: 18px;
    color: var(--white);
    border: 1px solid rgba(245, 193, 22, 0.24);
    border-radius: 18px;
    background: rgba(4, 24, 56, 0.82);
    backdrop-filter: blur(16px);
}

.about-hero-metrics strong {
    display: block;
    margin-bottom: 8px;
    color: var(--gold-500);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.about-hero-metrics span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.55;
}

.about-section {
    position: relative;
    padding: 86px 0;
}

.about-section::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(4, 24, 56, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(4, 24, 56, 0.035) 1px, transparent 1px);
    background-size: 90px 90px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    pointer-events: none;
}

.about-purpose {
    overflow: hidden;
    padding: 92px 0 104px;
    color: var(--navy-900);
    /* background:
        linear-gradient(128deg, transparent 0 61%, rgba(245, 193, 22, 0.11) 61% 69%, transparent 69%),
        linear-gradient(90deg, rgba(4, 24, 56, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(4, 24, 56, 0.028) 1px, transparent 1px),
        radial-gradient(circle at 8% 18%, rgba(246, 205, 83, 0.16), transparent 22%),
        radial-gradient(circle at 92% 84%, rgba(15, 94, 156, 0.12), transparent 28%),
        linear-gradient(180deg, #FFFFFF 0%, #F7FBFE 48%, #EEF5FA 100%); */
    background-size: auto, 86px 86px, 86px 86px, auto;
}

.about-purpose::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(245, 193, 22, 0.10), transparent 28%, transparent 70%, rgba(82, 156, 212, 0.12)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), transparent 45%, rgba(8, 43, 86, 0.04));
    mask-image: none;
    pointer-events: none;
}

.about-purpose::after {
    position: absolute;
    inset: auto -12% -42px 34%;
    z-index: 0;
    height: 140px;
    content: "";
    background:
        linear-gradient(90deg, transparent, rgba(245, 193, 22, 0.18), rgba(82, 156, 212, 0.16), transparent);
    clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
    opacity: 0.48;
    pointer-events: none;
}

.about-purpose-shell {
    position: relative;
    z-index: 1;
}

.about-purpose-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.55fr);
    align-items: end;
    gap: clamp(28px, 5vw, 70px);
    margin-bottom: 34px;
}

.about-purpose-intro .eyebrow {
    margin-bottom: 14px;
    color: var(--gold-500);
}

.about-purpose-intro h2 {
    max-width: 780px;
    margin: 0;
    color: var(--navy-900);
    font-family: var(--display);
    font-size: clamp(36px, 3.4vw, 56px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: 0;
}

.about-purpose-intro > p {
    margin: 0 0 4px;
    color: #536987;
    font-size: 15px;
    line-height: 1.7;
}

.about-purpose-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    overflow: visible;
    padding: 0;
    border-bottom: 0;
}

.about-section-card {
    position: relative;
    display: flex;
    min-height: 360px;
    flex-direction: column;
    overflow: hidden;
    padding: 26px 26px 30px;
    border: 1px solid rgba(4, 24, 56, 0.10);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 252, 255, 0.96) 100%);
    box-shadow: 0 22px 60px rgba(4, 24, 56, 0.10);
    transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.about-section-card::after {
    position: absolute;
    right: -70px;
    bottom: -92px;
    display: block;
    width: 220px;
    height: 220px;
    content: "";
    border: 1px solid rgba(212, 175, 55, 0.14);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 193, 22, 0.10), transparent 68%);
    pointer-events: none;
}

.about-info-card + .about-info-card {
    border-left: 1px solid rgba(255, 255, 255, 0.72);
}

.about-info-card::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--purpose-accent), var(--gold-100), var(--blue-500), var(--purpose-accent));
    background-size: 220% 100%;
    animation: aboutPurposeAccent 6.4s linear infinite;
}

/* .about-info-card:nth-child(1)::after {
    content: "01";
}

.about-info-card:nth-child(2)::after {
    content: "02";
}

.about-info-card:nth-child(3)::after {
    content: "03";
} */

/* .about-info-card::after {
    position: absolute;
    right: 24px;
    bottom: 20px;
    width: auto;
    height: auto;
    border: 0;
    background: none;
    color: rgba(4, 24, 56, 0.045);
    content: var(--purpose-index);
    font-family: var(--body);
    font-size: 104px;
    font-weight: 900;
    letter-spacing: -0.08em;
    line-height: 1;
    pointer-events: none;
} */

.about-info-card:hover {
    border-color: rgba(245, 193, 22, 0.42);
    box-shadow:
        0 32px 72px rgba(4, 24, 56, 0.16),
        0 14px 34px var(--purpose-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    transform: translateY(-10px);
}

.about-info-icon {
    position: relative;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    margin-bottom: 24px;
    color: var(--purpose-accent);
    border: 1px solid rgba(245, 193, 22, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 34%),
        linear-gradient(145deg, #03142E 0%, #082B56 58%, #0B3A6D 100%);
    box-shadow:
        0 18px 34px rgba(4, 24, 56, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: color 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.about-info-icon::before {
    position: absolute;
    inset: auto 8px 8px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.74;
}

.about-info-icon svg,
.about-difference-icon svg {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.about-section-card h2,
.about-section-heading h2,
.about-approach-panel h2,
.about-commitment-panel h2,
.about-final-panel h2 {
    margin: 0 0 18px;
    color: var(--navy-900);
    font-family: var(--display);
    font-size: clamp(26px, 2.2vw, 40px);
    line-height: 1.09;
    letter-spacing: -0.03em;
}

.about-section-card p:not(.eyebrow),
.about-approach-panel p,
.about-commitment-panel p,
.about-final-panel p {
    margin: 0;
    color: #4D6482;
    font-size: 14px;
    line-height: 1.62;
}

.about-page .about-purpose .about-info-card {
    --purpose-accent: var(--gold-500);
    --purpose-shadow: rgba(245, 193, 22, 0.16);
    --purpose-index: "01";
    min-height: 500px;
    padding: 34px 32px 36px;
    color: var(--navy-900);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.94) 42%, rgba(233, 241, 248, 0.96) 100%);
    border-color: rgba(255, 255, 255, 0.78);
    border-radius: 8px;
    box-shadow:
        0 28px 66px rgba(4, 24, 56, 0.12),
        0 10px 24px rgba(4, 24, 56, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    isolation: isolate;
}

.about-page .about-purpose .about-info-card:nth-child(2) {
    --purpose-accent: #2387C8;
    --purpose-shadow: rgba(35, 135, 200, 0.18);
    --purpose-index: "02";
}

.about-page .about-purpose .about-info-card:nth-child(3) {
    --purpose-accent: #D49B35;
    --purpose-shadow: rgba(212, 155, 53, 0.16);
    --purpose-index: "03";
}

.about-page .about-purpose .about-info-card > * {
    position: relative;
    z-index: 1;
}

.about-page .about-purpose .about-info-card .eyebrow {
    width: fit-content;
    margin-bottom: 16px;
    padding-bottom: 8px;
    color: var(--purpose-accent);
    border-bottom: 1px solid rgba(4, 24, 56, 0.12);
    font-size: 12px;
    letter-spacing: 0.10em;
}

.about-page .about-purpose .about-info-card h2 {
    max-width: 20ch;
    margin-bottom: 18px;
    color: var(--navy-900);
    font-family: var(--display);
    font-size: clamp(24px, 1.55vw, 31px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0;
}

.about-page .about-purpose .about-info-card p:not(.eyebrow) {
    max-width: 46ch;
    color: #465E7C;
    font-size: 14px;
    line-height: 1.66;
}

.about-page .about-purpose .about-info-card:hover::before {
    animation-duration: 3.2s;
}

.about-page .about-purpose .about-info-card:hover .about-info-icon {
    color: var(--gold-100);
    box-shadow:
        0 20px 38px rgba(4, 24, 56, 0.24),
        0 0 0 1px rgba(245, 193, 22, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-4px);
}

.about-section-card p + p,
.about-commitment-panel p + p {
    margin-top: 13px;
}

@keyframes aboutPurposeAccent {
    to {
        background-position: 220% 0;
    }
}

.about-who-card {
    color: var(--navy-900);
    background: transparent;
}

.about-who-card h2 {
    color: var(--navy-900);
}

.about-who-card p:not(.eyebrow) {
    color: #536987;
}

.about-approach {
    padding-top: 18px;
}

.about-approach-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 78px);
    overflow: hidden;
    padding: clamp(38px, 5vw, 64px);
    color: var(--white);
    border: 1px solid rgba(245, 193, 22, 0.24);
    border-radius: 30px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 84% 22%, rgba(245, 193, 22, 0.16), transparent 24%),
        linear-gradient(135deg, #041838 0%, #082B56 68%, #0B3A6D 100%);
    background-size: 76px 76px, 76px 76px, auto, auto;
    box-shadow: 0 30px 82px rgba(4, 24, 56, 0.22);
}

.about-approach-panel::after {
    position: absolute;
    inset: -30% auto -30% 46%;
    width: 1px;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(245, 193, 22, 0.48), transparent);
}

.about-approach-panel h2,
.about-final-panel h2 {
    color: var(--white);
}

.about-approach-panel p:not(.eyebrow),
.about-final-panel p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.78);
}

.about-section-heading {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto 42px;
    text-align: center;
}

.about-difference {
    overflow: hidden;
    padding: 72px 0 92px;
    color: var(--white);
    background:
        linear-gradient(124deg, transparent 0 58%, rgba(245, 193, 22, 0.085) 58% 66%, transparent 66%),
        radial-gradient(circle at 92% 48%, rgba(245, 193, 22, 0.14), transparent 22%),
        radial-gradient(circle at 12% 18%, rgba(37, 126, 190, 0.20), transparent 28%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(135deg, #03142E 0%, #041838 48%, #082B56 100%);
    /* background-size: auto, 92px 92px, 92px 92px, auto; */
}

.about-difference::before {
    position: absolute;
    inset: auto -130px -170px auto;
    width: 520px;
    height: 520px;
    content: "";
    border: 1px solid rgba(245, 193, 22, 0.15);
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, rgba(245, 193, 22, 0.1) 0 1px, transparent 1px 18px);
    background-size: auto;
    mask-image: none;
    opacity: 0.48;
    pointer-events: none;
}

.about-difference::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(245, 193, 22, 0.10), transparent 24%, transparent 76%, rgba(82, 156, 212, 0.12)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%, rgba(0, 0, 0, 0.12));
    pointer-events: none;
}

.about-difference .about-section-heading {
    margin-bottom: 38px;
}

.about-difference .about-section-heading .eyebrow {
    color: var(--gold-100);
}

.about-difference .about-section-heading h2 {
    color: var(--white);
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.30);
}

.about-difference .about-section-heading h2::after {
    display: block;
    width: 74px;
    height: 3px;
    margin: 18px auto 0;
    content: "";
    background: linear-gradient(90deg, transparent, var(--gold-100), var(--gold-500), transparent);
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(245, 193, 22, 0.26);
}

.about-difference-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.about-difference-card {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: 260px;
    overflow: hidden;
    padding: 34px 28px 32px;
    text-align: center;
    border: 2px solid rgba(246, 205, 83, 0.78);
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 205, 83, 0.13), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.065)),
        linear-gradient(145deg, rgba(15, 94, 156, 0.20), rgba(4, 24, 56, 0.46));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        0 24px 58px rgba(0, 0, 0, 0.24);
    transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}

.about-difference-card::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(90deg, transparent, rgba(246, 205, 83, 0.34), transparent) top / 100% 3px no-repeat,
        radial-gradient(circle at 92% 18%, rgba(246, 205, 83, 0.15), transparent 24%);
    opacity: 0.88;
    pointer-events: none;
}

.about-difference-card::after {
    position: absolute;
    right: -44px;
    bottom: -54px;
    z-index: 0;
    width: 140px;
    height: 140px;
    content: "";
    border: 1px solid rgba(246, 205, 83, 0.18);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 205, 83, 0.09), transparent 66%);
    pointer-events: none;
}

.about-difference-card > * {
    position: relative;
    z-index: 1;
}

.about-difference-card:hover {
    border-color: rgba(255, 220, 77, 0.98);
    background:
        radial-gradient(circle at 50% 0%, rgba(246, 205, 83, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.075)),
        linear-gradient(145deg, rgba(15, 94, 156, 0.25), rgba(4, 24, 56, 0.42));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 32px 70px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(246, 205, 83, 0.22),
        0 0 28px rgba(246, 205, 83, 0.12);
    transform: translateY(-8px);
}

.about-difference-icon {
    position: relative;
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    margin-bottom: 24px;
    color: var(--gold-100);
    border: 2px solid rgba(246, 205, 83, 0.62);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 38%),
        linear-gradient(145deg, #03142E 0%, #082B56 58%, #0B3A6D 100%);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: color 260ms ease, border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease;
}

.about-difference-icon::after {
    position: absolute;
    inset: auto 10px 9px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.74;
}

.about-difference-icon svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.75;
}

.about-difference-card:hover .about-difference-icon {
    color: var(--gold-500);
    border-color: rgba(255, 220, 77, 0.95);
    box-shadow:
        0 22px 40px rgba(0, 0, 0, 0.30),
        0 0 22px rgba(246, 205, 83, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform: translateY(-4px);
}

.about-difference-card h3,
.about-process-step h3 {
    margin: 0 0 12px;
    color: var(--white);
    font-family: var(--display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.about-difference-card h3 {
    color: #ffd700;
    font-size: clamp(22px, 1.5vw, 27px);
    line-height: 1.12;
    text-shadow: 0 8px 18px rgba(0, 0, 0, 0.36);
}

.about-difference-card p,
.about-process-step p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.58;
}

.about-difference-card p {
    max-width: 31ch;
    color: rgba(236, 244, 252, 0.92);
    font-size: 15px;
    line-height: 1.58;
    text-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.about-process-step h3 {
    color: var(--navy-900);
    font-family: var(--display);
    font-size: 21px;
}

.about-process-step p {
    color: #536987;
    font-size: 15px;
    line-height: 1.72;
}

.about-process {
    overflow: hidden;
    padding: 88px 0 96px;
    background:
        linear-gradient(90deg, rgba(11, 58, 109, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(11, 58, 109, 0.032) 1px, transparent 1px),
        radial-gradient(circle at 50% 18%, rgba(246, 205, 83, 0.12), transparent 28%),
        radial-gradient(circle at 88% 76%, rgba(15, 94, 156, 0.10), transparent 28%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FBFE 48%, #EEF5FA 100%);
    background-size: 82px 82px, 82px 82px, auto, auto, auto;
    isolation: isolate;
}

.about-process::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(115deg, transparent 0 58%, rgba(246, 205, 83, 0.10) 58% 66%, transparent 66%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), transparent 42%, rgba(8, 43, 86, 0.04));
    pointer-events: none;
}

.about-process::after {
    position: absolute;
    inset: 18px 0 auto;
    z-index: 0;
    height: 230px;
    content: "";
    background: url("../images/worldmap.png") center top / min(980px, 82vw) auto no-repeat;
    opacity: 0.10;
    pointer-events: none;
}

.about-process .container {
    position: relative;
    z-index: 1;
}

.about-process .about-section-heading {
    margin-bottom: 54px;
}

.about-process-track {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    padding-top: 8px;
    counter-reset: processStep;
}

.about-process-track::before {
    position: absolute;
    top: 80px;
    right: 10%;
    left: 10%;
    z-index: 0;
    height: 4px;
    content: "";
    background-image: linear-gradient(90deg, rgba(4, 24, 56, 0.34) 50%, transparent 0);
    background-size: 14px 4px;
    background-repeat: repeat-x;
}

.about-process-track::after {
    position: absolute;
    top: 79px;
    right: 10%;
    left: 10%;
    z-index: 1;
    height: 6px;
    content: "";
    background:
        linear-gradient(90deg, var(--gold-700), var(--gold-500), var(--gold-100), var(--blue-500));
    border-radius: 999px;
    box-shadow:
        0 0 18px rgba(246, 205, 83, 0.34),
        0 0 28px rgba(15, 94, 156, 0.16);
    transform: scaleX(0.08);
    transform-origin: left center;
    animation: aboutProcessLine 16s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    pointer-events: none;
}

.about-process-step {
    --step-delay: 0s;
    z-index: 2;
    position: relative;
    display: grid;
    justify-items: center;
    min-height: 348px;
    overflow: hidden;
    padding: 30px 24px 30px;
    text-align: center;
    border: 1px solid rgba(11, 58, 109, 0.13);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 254, 0.94));
    box-shadow:
        0 20px 48px rgba(4, 24, 56, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    transition: border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}

.about-process-step:nth-child(1) {
    --step-delay: 0s;
}

.about-process-step:nth-child(2) {
    --step-delay: -12s;
}

.about-process-step:nth-child(3) {
    --step-delay: -8s;
}

.about-process-step:nth-child(4) {
    --step-delay: -4s;
}

.about-process-step.reveal.is-visible {
    animation: aboutProcessStepFocus 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

.about-process-step::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--gold-500), var(--gold-100), transparent);
    opacity: 0.28;
    transform: scaleX(0.36);
    transition: opacity 260ms ease;
    pointer-events: none;
}

.about-process-step.reveal.is-visible::before {
    animation: aboutProcessTopFocus 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

.about-process-step span {
    position: relative;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: var(--navy-900);
    margin: -18px 0 24px;
    border: 2px solid rgba(184, 144, 43, 0.34);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(184, 144, 43, 0.26);
    animation: aboutProcessBadgeFocus 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

.about-process-step:not(:last-child)::after {
    display: none;
}

.about-process-icon {
    position: relative;
    z-index: 3;
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    overflow: hidden;
    color: var(--blue-700);
    border: 2px solid rgba(184, 144, 43, 0.42);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 244, 251, 0.94));
    box-shadow:
        0 18px 34px rgba(4, 24, 56, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    animation: aboutProcessIconFocus 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

.about-process-icon::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(145deg, #041838 0%, #082B56 58%, #0F5E9C 100%);
    opacity: 0;
    transform: translateY(104%);
    animation: aboutProcessIconFill 16s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
    animation-delay: var(--step-delay);
}

.about-process-icon::after {
    position: absolute;
    inset: 8px;
    z-index: 1;
    content: "";
    border: 1px solid rgba(184, 144, 43, 0.24);
    border-radius: inherit;
    pointer-events: none;
}

.about-process-icon svg {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.85;
    transition: stroke 260ms ease;
}

.about-process-step h3 {
    max-width: 230px;
    margin: 0 auto 14px;
    color: var(--navy-900);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    animation: aboutProcessCopyFocus 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

.about-process-step p {
    max-width: 250px;
    margin: 0 auto;
    color: #506681;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.72;
    animation: aboutProcessTextFocus 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

@keyframes aboutProcessLine {
    0%,
    18% {
        transform: scaleX(0.08);
        opacity: 0.84;
    }

    25%,
    43% {
        transform: scaleX(0.38);
        opacity: 1;
    }

    50%,
    68% {
        transform: scaleX(0.68);
        opacity: 1;
    }

    75%,
    94% {
        transform: scaleX(1);
        opacity: 1;
    }

    100% {
        transform: scaleX(0.08);
        opacity: 0.84;
    }
}

@keyframes aboutProcessStepFocus {
    0%,
    20% {
        opacity: 1;
        border-color: rgba(246, 205, 83, 0.78);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(249, 252, 255, 0.98));
        box-shadow:
            0 28px 62px rgba(4, 24, 56, 0.14),
            0 16px 34px rgba(246, 205, 83, 0.12),
            0 0 0 1px rgba(246, 205, 83, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.98);
        transform: translateY(-7px);
    }

    27%,
    100% {
        opacity: 0.92;
        border-color: rgba(11, 58, 109, 0.13);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 254, 0.94));
        box-shadow:
            0 20px 48px rgba(4, 24, 56, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.98);
        transform: translateY(0);
    }
}

@keyframes aboutProcessTopFocus {
    0%,
    20% {
        opacity: 1;
        transform: scaleX(1);
    }

    27%,
    100% {
        opacity: 0.28;
        transform: scaleX(0.36);
    }
}

@keyframes aboutProcessIconFocus {
    0%,
    20% {
        color: var(--gold-100);
        border-color: rgba(246, 205, 83, 0.95);
        box-shadow:
            0 20px 40px rgba(4, 24, 56, 0.20),
            0 0 24px rgba(246, 205, 83, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.16);
        transform: translateY(-3px);
    }

    27%,
    100% {
        color: var(--blue-700);
        border-color: rgba(184, 144, 43, 0.42);
        box-shadow:
            0 18px 34px rgba(4, 24, 56, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.96);
        transform: translateY(0);
    }
}

@keyframes aboutProcessIconFill {
    0%,
    20% {
        opacity: 1;
        transform: translateY(0);
    }

    27%,
    100% {
        opacity: 0;
        transform: translateY(104%);
    }
}

@keyframes aboutProcessBadgeFocus {
    0%,
    20% {
        background: linear-gradient(180deg, var(--gold-100), var(--gold-500));
        box-shadow:
            0 12px 24px rgba(184, 144, 43, 0.34),
            0 0 18px rgba(246, 205, 83, 0.34);
        transform: scale(1.08);
    }

    27%,
    100% {
        background: linear-gradient(180deg, var(--gold-500), var(--gold-600));
        box-shadow: 0 10px 20px rgba(184, 144, 43, 0.26);
        transform: scale(1);
    }
}

@keyframes aboutProcessArrowFocus {
    0%,
    18% {
        border-left-color: var(--gold-500);
        transform: translateX(6px);
        opacity: 1;
    }

    24%,
    100% {
        border-left-color: rgba(4, 24, 56, 0.50);
        transform: translateX(0);
        opacity: 0.58;
    }
}

@keyframes aboutProcessCopyFocus {
    0%,
    20% {
        color: #041838;
        transform: translateY(-2px);
    }

    27%,
    100% {
        color: #344D6B;
        transform: translateY(0);
    }
}

@keyframes aboutProcessTextFocus {
    0%,
    20% {
        color: #334D6D;
        transform: translateY(0);
    }

    27%,
    100% {
        color: #657890;
        transform: translateY(0);
    }
}

/* Process timeline: deliberately free of content cards so the sequence reads as one journey. */
.about-process-track {
    gap: 28px;
    padding-top: 2px;
}

.about-process-track::before {
    top: 44px;
    right: 12.5%;
    left: 12.5%;
    height: 2px;
    background-image: linear-gradient(90deg, rgba(4, 24, 56, 0.30) 50%, transparent 0);
    background-size: 12px 2px;
}

.about-process-track::after {
    top: 40px;
    right: auto;
    left: 12.5%;
    width: 50px;
    height: 10px;
    background: linear-gradient(90deg, transparent, var(--gold-500) 24%, var(--gold-100) 50%, var(--blue-500) 76%, transparent);
    box-shadow: 0 0 14px rgba(246, 205, 83, 0.52), 0 0 20px rgba(15, 94, 156, 0.20);
    transform-origin: center;
    animation: aboutProcessLine 16s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
}

.about-process-step {
    min-height: 310px;
    overflow: visible;
    padding: 128px 16px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition: opacity 260ms ease;
}

.about-process-step::before {
    top: 96px;
    left: 50%;
    z-index: 1;
    width: 1px;
    height: 22px;
    inset: 96px auto auto 50%;
    background: linear-gradient(var(--gold-500), rgba(184, 144, 43, 0));
    opacity: 0.5;
    transform: translateX(-50%);
}

.about-process-step span {
    z-index: 2;
    width: 30px;
    height: 30px;
    margin: 0 0 20px;
    border: 1px solid rgba(184, 144, 43, 0.46);
    background: #FFFDF8;
    font-size: 13px;
    box-shadow: 0 8px 17px rgba(4, 24, 56, 0.08);
}

.about-process-icon {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    width: 90px;
    height: 90px;
    border: 2px solid rgba(184, 144, 43, 0.72);
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 14px 30px rgba(4, 24, 56, 0.12), 0 0 0 7px rgba(246, 205, 83, 0.13);
    transform: translateX(-50%);
}

.about-process-icon::before {
    inset: -1px;
    background: linear-gradient(155deg, #031A3B, #0B4B86);
}

.about-process-icon::after {
    border-radius: 50%;
}

.about-process-icon svg {
    width: 38px;
    height: 38px;
}

.about-process-step h3 {
    max-width: 238px;
    margin: 0 auto 13px;
    font-size: 22px;
}

.about-process-step p {
    max-width: 258px;
}

@keyframes aboutProcessLine {
    0% { transform: translateX(0); opacity: 0; }
    3%, 22% { opacity: 1; }
    25% { transform: translateX(125%); opacity: 0; }
    26% { transform: translateX(125%); opacity: 0; }
    29%, 47% { opacity: 1; }
    50% { transform: translateX(250%); opacity: 0; }
    51% { transform: translateX(250%); opacity: 0; }
    54%, 72% { opacity: 1; }
    75% { transform: translateX(375%); opacity: 0; }
    76% { transform: translateX(375%); opacity: 0; }
    79%, 97% { opacity: 1; }
    100% { transform: translateX(500%); opacity: 0; }
}

@keyframes aboutProcessStepFocus {
    0%, 20% { opacity: 1; }
    27%, 100% { opacity: 0.76; }
}

@keyframes aboutProcessTopFocus {
    0%, 20% { opacity: 0.95; transform: translateX(-50%); }
    27%, 100% { opacity: 0.28; transform: translateX(-50%); }
}

@keyframes aboutProcessIconFocus {
    0%, 20% {
        color: var(--gold-100);
        border-color: rgba(246, 205, 83, 0.96);
        box-shadow: 0 18px 34px rgba(4, 24, 56, 0.22), 0 0 0 7px rgba(246, 205, 83, 0.20), 0 0 25px rgba(246, 205, 83, 0.24);
        transform: translateX(-50%) scale(1.04);
    }
    27%, 100% {
        color: var(--blue-700);
        border-color: rgba(184, 144, 43, 0.48);
        box-shadow: 0 14px 30px rgba(4, 24, 56, 0.12), 0 0 0 7px rgba(246, 205, 83, 0.13);
        transform: translateX(-50%) scale(1);
    }
}

@keyframes aboutProcessIconFill {
    0%, 20% { opacity: 1; transform: translateY(0); }
    27%, 100% { opacity: 0; transform: translateY(104%); }
}

@keyframes aboutProcessBadgeFocus {
    0%, 20% {
        background: linear-gradient(180deg, var(--gold-100), var(--gold-500));
        box-shadow: 0 10px 20px rgba(184, 144, 43, 0.32), 0 0 16px rgba(246, 205, 83, 0.28);
        transform: scale(1.04);
    }
    27%, 100% {
        background: #FFFDF8;
        box-shadow: 0 8px 17px rgba(4, 24, 56, 0.08);
        transform: scale(1);
    }
}

@keyframes aboutProcessCopyFocus {
    0%, 20% { color: #041838; transform: none; }
    27%, 100% { color: #526783; transform: none; }
}

@keyframes aboutProcessTextFocus {
    0%, 20% { color: #334D6D; transform: none; }
    27%, 100% { color: #657890; transform: none; }
}

/* Final light-theme treatment: the process stays visible; only the waypoint carries motion. */
.about-process {
    background:
        linear-gradient(90deg, rgba(16, 56, 91, 0.028) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16, 56, 91, 0.026) 1px, transparent 1px),
        radial-gradient(circle at 50% 22%, rgba(24, 111, 167, 0.06), transparent 31%),
        linear-gradient(180deg, #FFFFFF 0%, #FAFCFE 52%, #F2F7FB 100%);
    background-size: 88px 88px, 88px 88px, auto, auto;
}

.about-process::before {
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.72), transparent 62%);
}

.about-process::after {
    opacity: 0.045;
}

.about-process-track::before {
    background-image: linear-gradient(90deg, rgba(50, 83, 117, 0.40) 50%, transparent 0);
}

.about-process-track::after {
    background: linear-gradient(90deg, transparent, #D3A62F 24%, #F4D77B 50%, #236FA8 76%, transparent);
    box-shadow: 0 0 11px rgba(211, 166, 47, 0.35), 0 0 18px rgba(35, 111, 168, 0.16);
}

.about-process-step,
.about-process-step.reveal.is-visible {
    opacity: 1;
    animation: none;
}

.about-process-step::before,
.about-process-step.reveal.is-visible::before {
    background: linear-gradient(#D3A62F, rgba(211, 166, 47, 0));
    opacity: 0.5;
    animation: none;
}

.about-process-step span {
    color: #284867;
    border-color: #D5E0E9;
    background: #FFFFFF;
    box-shadow: 0 6px 16px rgba(17, 52, 85, 0.08);
    animation: none;
}

.about-process-icon {
    color: #1A5687;
    border-color: #C9D9E6;
    background: #FFFFFF;
    box-shadow: 0 10px 24px rgba(17, 52, 85, 0.10), 0 0 0 7px rgba(226, 236, 244, 0.72);
}

.about-process-icon::after {
    border-color: rgba(29, 84, 130, 0.13);
}

.about-process-step h3 {
    color: #123454;
    animation: none;
}

.about-process-step p {
    color: #5C7189;
    animation: none;
}

@keyframes aboutProcessIconFocus {
    0%, 20% {
        color: #FFE49A;
        border-color: #D3A62F;
        box-shadow: 0 14px 30px rgba(17, 52, 85, 0.16), 0 0 0 7px rgba(211, 166, 47, 0.13);
        transform: translateX(-50%) scale(1.025);
    }
    27%, 100% {
        color: #1A5687;
        border-color: #C9D9E6;
        box-shadow: 0 10px 24px rgba(17, 52, 85, 0.10), 0 0 0 7px rgba(226, 236, 244, 0.72);
        transform: translateX(-50%) scale(1);
    }
}

@keyframes aboutProcessIconFill {
    0%, 20% { opacity: 1; transform: translateY(0); }
    27%, 100% { opacity: 0; transform: translateY(104%); }
}

/* The route itself now carries the sequence: no coloured block travelling between icons. */
.about-process-track::before {
    z-index: 0;
    background-image: repeating-linear-gradient(90deg, #AABDCF 0 8px, transparent 8px 17px);
    background-size: 34px 2px;
    animation: aboutProcessDashFlow 1.35s linear infinite;
}

.about-process-track::after {
    top: 44px;
    right: 12.5%;
    left: 12.5%;
    z-index: 1;
    width: auto;
    height: 2px;
    border-radius: 0;
    background: repeating-linear-gradient(90deg, #174F80 0 10px, #2B6F9E 10px 16px, transparent 16px 25px);
    background-size: 50px 2px;
    box-shadow: 0 0 7px rgba(23, 79, 128, 0.18);
    transform: scaleX(0.025);
    transform-origin: left center;
    animation: aboutProcessRouteProgress 16s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
}

.about-process-step h3 {
    position: relative;
    padding-bottom: 13px;
}

.about-process-step h3::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 24px;
    height: 2px;
    content: "";
    background: #CAD8E4;
    transform: translateX(-50%);
    animation: aboutProcessStepAccent 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

@keyframes aboutProcessDashFlow {
    to { background-position: -34px 0; }
}

@keyframes aboutProcessRouteProgress {
    0%, 20% {
        background-position: 0 0;
        transform: scaleX(0.025);
    }
    25%, 45% {
        background-position: -50px 0;
        transform: scaleX(0.335);
    }
    50%, 70% {
        background-position: -100px 0;
        transform: scaleX(0.665);
    }
    75%, 96% {
        background-position: -150px 0;
        transform: scaleX(1);
    }
    100% {
        background-position: -200px 0;
        transform: scaleX(0.025);
    }
}

@keyframes aboutProcessStepAccent {
    0%, 20% {
        width: 54px;
        background: #D3A62F;
        box-shadow: 0 3px 10px rgba(211, 166, 47, 0.24);
    }
    27%, 100% {
        width: 24px;
        background: #CAD8E4;
        box-shadow: none;
    }
}

.about-commitment {
    padding: 44px 0;
    background:
        radial-gradient(circle at 18% 24%, rgba(245, 193, 22, 0.10), transparent 22%),
        linear-gradient(180deg, #F7FAFD 0%, #FFFFFF 100%);
}

.about-commitment-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(360px, 0.42fr) minmax(0, 0.58fr);
    align-items: center;
    gap: 0;
    overflow: hidden;
    min-height: 370px;
    padding: 0;
    border: 1px solid rgba(245, 193, 22, 0.24);
    border-radius: 34px;
    background:
        radial-gradient(circle at 14% 50%, rgba(245, 193, 22, 0.18), transparent 24%),
        linear-gradient(135deg, #041838 0%, #082B56 58%, #0B3A6D 100%);
    box-shadow: 0 34px 84px rgba(4, 24, 56, 0.16);
}

.about-commitment-panel::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: linear-gradient(90deg, transparent 0 38%, #000 48%, #000 100%);
    pointer-events: none;
}

.about-commitment-panel::after {
    position: absolute;
    right: -150px;
    bottom: -170px;
    width: 460px;
    height: 300px;
    content: "";
    border: 1px solid rgba(245, 193, 22, 0.16);
    border-radius: 50%;
    transform: rotate(-12deg);
    pointer-events: none;
}

.about-commitment-image {
    position: relative;
    z-index: 1;
    align-self: stretch;
    min-height: 430px;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border-right: 1px solid rgba(245, 193, 22, 0.22);
    background: #071E42;
}

.about-commitment-image::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background:
        linear-gradient(90deg, rgba(4, 24, 56, 0.08), rgba(4, 24, 56, 0.68)),
        linear-gradient(180deg, transparent 45%, rgba(4, 24, 56, 0.64));
    pointer-events: none;
}

.about-commitment-image::after {
    position: absolute;
    inset: 22px;
    z-index: 2;
    content: "";
    border: 1px solid rgba(245, 193, 22, 0.26);
    border-radius: 24px;
    pointer-events: none;
}

.about-commitment-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    transform: scale(1.04);
}

.about-commitment-panel > div:last-child {
    position: relative;
    z-index: 1;
    padding: clamp(42px, 5vw, 70px);
}

.about-commitment-panel .eyebrow {
    color: var(--gold-500);
}

.about-commitment-panel h2 {
    max-width: 760px;
    color: var(--white);
}

.about-commitment-panel p {
    max-width: 820px;
    color: rgba(255, 255, 255, 0.76);
}

.about-commitment-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.about-commitment-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    color: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(245, 193, 22, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.about-commitment-points span::before {
    width: 8px;
    height: 8px;
    content: "";
    border-radius: 50%;
    background: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(245, 193, 22, 0.14);
}

/* Full-width commitment banner. The image and business proof points share one visual field. */
.about-commitment {
    padding: 0;
    background: #041838;
}

.about-commitment-panel {
    display: block;
    width: 100%;
    min-height: 560px;
    border: 0;
    border-radius: 0;
    background: #041838;
    box-shadow: none;
}

.about-commitment-panel::before {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(2, 17, 42, 0.99) 0%, rgba(2, 17, 42, 0.97) 34%, rgba(2, 17, 42, 0.74) 42%, rgba(2, 17, 42, 0.14) 62%, rgba(2, 17, 42, 0.08) 100%),
        linear-gradient(180deg, rgba(2, 17, 42, 0.08), rgba(2, 17, 42, 0.46));
    mask-image: none;
}

.about-commitment-panel::after {
    right: -80px;
    bottom: -190px;
    z-index: 2;
    width: 480px;
    height: 300px;
    border-color: rgba(245, 193, 22, 0.26);
}

.about-commitment-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 29%;
    z-index: 0;
    min-height: 0;
    border: 0;
    background: #041838;
}

.about-commitment-image::before,
.about-commitment-image::after {
    display: none;
}

.about-commitment-image img {
    min-height: 0;
    height: 100%;
    transform: none;
    object-fit: contain;
    object-position: right center;
}

.about-commitment-panel > .about-commitment-content {
    position: relative;
    z-index: 3;
    width: min(39%, 650px);
    min-height: 560px;
    padding: clamp(58px, 7vw, 104px) 5vw;
}

.about-commitment-panel .eyebrow {
    margin-bottom: 15px;
    color: #F3C54C;
}

.about-commitment-panel h2 {
    max-width: 14ch;
    margin-bottom: 20px;
    color: #FFFFFF;
    font-size: clamp(36px, 3.1vw, 54px);
    letter-spacing: 0;
}

.about-commitment-panel p {
    max-width: 620px;
    color: rgba(237, 244, 250, 0.88);
    font-size: 16px;
    line-height: 1.7;
}

.about-commitment-panel p + p {
    margin-top: 16px;
}

.about-commitment-panel > .about-commitment-points {
    right: clamp(24px, 3.5vw, 70px);
    bottom: clamp(34px, 6vw, 82px);
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(190px, 236px);
    gap: 22px;
    margin: 0;
    padding: 0;
}

.about-commitment-points article {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    justify-items: start;
    gap: 13px;
    text-align: left;
}

.about-commitment-points article svg {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: #F3C54C;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.24));
}

.about-commitment-points article span {
    display: block;
    padding: 0;
    color: #FFFFFF;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.03em;
    text-transform: none;
}

.about-commitment-points article span::before {
    display: none;
}

.about-final-cta {
    padding: 86px 0;
    color: var(--white);
    background:
        radial-gradient(circle at 78% 45%, rgba(245, 193, 22, 0.16), transparent 28%),
        linear-gradient(135deg, #041838 0%, #071E42 50%, #082B56 100%);
}

.about-final-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
    overflow: hidden;
    padding: clamp(36px, 5vw, 66px);
    border: 1px solid rgba(245, 193, 22, 0.24);
    border-radius: 30px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        rgba(255, 255, 255, 0.035);
    background-size: 82px 82px;
}

.about-final-panel::after {
    position: absolute;
    right: -120px;
    bottom: -150px;
    width: 520px;
    height: 280px;
    content: "";
    border: 1px solid rgba(245, 193, 22, 0.18);
    border-radius: 50%;
    transform: rotate(-15deg);
    pointer-events: none;
}

.about-final-panel h2 {
    max-width: 820px;
    margin-bottom: 18px;
}

.about-final-panel p:not(.eyebrow) {
    max-width: 780px;
}

.about-final-actions {
    position: relative;
    z-index: 1;
    justify-content: flex-end;
    min-width: 300px;
    margin-top: 0;
}

.industries-page .industry-hero-showcase::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 46%;
    content: "";
    background:
        linear-gradient(180deg, transparent 0%, rgba(2, 15, 37, 0.52) 30%, rgba(2, 15, 37, 0.94) 100%),
        linear-gradient(90deg, rgba(2, 15, 37, 0.28), transparent 28%, transparent 72%, rgba(2, 15, 37, 0.34));
    pointer-events: none;
}

.industries-page .industry-hero-points article {
    background: linear-gradient(145deg, #061A39 0%, #082B56 56%, #0A3767 100%);
    border-color: rgba(243, 197, 76, 0.74);
    box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    backdrop-filter: none;
}

.industries-page .industry-hero-points article::before {
    background: linear-gradient(120deg, transparent 15%, rgba(243, 197, 76, 0.12) 50%, transparent 85%);
    opacity: 0.48;
}

.industries-page .industry-hero-points article:hover {
    border-color: #F3C54C;
    box-shadow:
        0 22px 40px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(243, 197, 76, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

@media (max-width: 1180px) {
    .about-hero-layout,
    .about-approach-panel {
        grid-template-columns: 1fr;
    }

    .about-purpose-intro {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 18px;
    }

    .about-purpose-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .about-hero-copy h1 {
        max-width: 680px;
    }

    .about-difference-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .about-page .primary-nav {
        top: var(--about-header-height);
    }

    .about-hero {
        min-height: auto;
        padding: calc(var(--about-header-height) + 44px) 0 68px;
    }

    .about-hero-layout {
        gap: 34px;
    }

    .about-hero-visual,
    .about-hero-visual img {
        min-height: 440px;
    }

    .about-section {
        padding: 78px 0;
    }

    .about-purpose {
        padding: 76px 0;
    }

    .about-purpose-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 0;
    }

    .about-purpose-intro {
        margin-bottom: 28px;
    }

    .about-section-card {
        min-height: auto;
        padding: 30px;
    }

    .about-info-card + .about-info-card {
        border-left: 1px solid rgba(255, 255, 255, 0.78);
    }

    .about-approach {
        padding-top: 0;
    }

    .about-approach-panel::after,
    .about-process-track::before,
    .about-process-track::after {
        display: none;
    }

    .about-process-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 46px 22px;
    }

    .about-process-step:not(:last-child)::after {
        display: none;
    }

    .about-commitment-panel,
    .about-final-panel {
        grid-template-columns: 1fr;
    }

    .about-commitment-panel {
        gap: 0;
        min-height: 0;
        padding: 0;
        background:
            radial-gradient(circle at 18% 12%, rgba(245, 193, 22, 0.14), transparent 28%),
            linear-gradient(135deg, #041838 0%, #082B56 100%);
    }

    .about-commitment-panel::before {
        mask-image: none;
    }

    .about-commitment-image,
    .about-commitment-image img {
        min-height: 310px;
    }

    .about-commitment-image {
        border-right: 0;
        border-bottom: 1px solid rgba(245, 193, 22, 0.22);
    }

    .about-commitment-panel > div:last-child {
        padding: 36px;
    }

    .about-final-actions {
        justify-content: flex-start;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    body.about-page {
        --about-header-height: 82px;
    }

    .about-page .logo-heander {
        height: 66px;
    }

    .about-hero-copy h1 {
        font-size: 38px;
        letter-spacing: -0.045em;
    }

    .about-hero-copy > p:not(.eyebrow),
    .about-section-card p:not(.eyebrow),
    .about-approach-panel p,
    .about-commitment-panel p,
    .about-final-panel p {
        font-size: 15px;
    }

    .about-hero-visual,
    .about-hero-visual img {
        min-height: 390px;
    }

    .about-hero-badge {
        top: 18px;
        left: 18px;
        max-width: calc(100% - 36px);
    }

    .about-hero-metrics {
        right: 16px;
        bottom: 16px;
        left: 16px;
        grid-template-columns: 1fr;
    }

    .about-hero-metrics article {
        min-height: auto;
        padding: 16px;
    }

    .about-section-card,
    .about-approach-panel,
    .about-commitment-panel,
    .about-final-panel {
        padding: 26px;
        border-radius: 22px;
    }

    .about-purpose {
        padding: 64px 0;
    }

    .about-purpose-intro h2 {
        font-size: 34px;
    }

    .about-page .about-purpose .about-info-card {
        min-height: auto;
        padding: 26px;
        border-radius: 8px;
    }

    .about-info-icon {
        width: 58px;
        height: 58px;
        margin-bottom: 20px;
    }

    .about-section-card h2,
    .about-section-heading h2,
    .about-approach-panel h2,
    .about-commitment-panel h2,
    .about-final-panel h2 {
        font-size: 30px;
    }

    .about-difference-grid,
    .about-process-track {
        grid-template-columns: 1fr;
    }

    .about-difference {
        padding: 64px 0 76px;
    }

    .about-difference-card {
        min-height: 230px;
        padding: 30px 24px 28px;
    }

    .about-difference-icon {
        width: 62px;
        height: 62px;
        margin-bottom: 20px;
    }

    .about-process-step {
        min-height: auto;
    }

    .about-commitment-panel {
        padding: 0;
    }

    .about-commitment-image,
    .about-commitment-image img {
        min-height: 240px;
    }

    .about-commitment-image::after {
        inset: 14px;
        border-radius: 16px;
    }

    .about-commitment-panel > div:last-child {
        padding: 26px;
    }

    .about-commitment-points {
        gap: 8px;
    }

    .about-commitment-points span {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 920px) {
    .about-commitment-panel {
        display: block;
        min-height: 760px;
        padding: 0;
        border-radius: 0;
    }

    .about-commitment-panel > .about-commitment-content {
        width: min(76%, 680px);
        min-height: 0;
        padding: 70px 36px 220px;
    }

    .about-commitment-image {
        left: 0;
    }

    .about-commitment-image img {
        object-fit: cover;
        object-position: center;
    }

    .about-commitment-panel > .about-commitment-points {
        right: 36px;
        bottom: 46px;
        left: 36px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .about-commitment-panel {
        min-height: 0;
    }

    .about-commitment-panel::before {
        background:
            linear-gradient(180deg, rgba(2, 17, 42, 0.86), rgba(2, 17, 42, 0.94) 64%, rgba(2, 17, 42, 0.98));
    }

    .about-commitment-panel > .about-commitment-content {
        width: 100%;
        padding: 64px 24px 36px;
    }

    .about-commitment-panel h2 {
        font-size: 34px;
    }

    .about-commitment-panel > .about-commitment-points {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 0 24px 48px;
    }

    .about-commitment-points article {
        grid-template-columns: 42px 1fr;
        justify-items: start;
        align-items: center;
        gap: 13px;
        text-align: left;
    }

    .about-commitment-points article svg {
        width: 36px;
        height: 36px;
    }
}

/* Commitment proof points belong to the image edge, not below the copy. */
.about-commitment-panel > .about-commitment-points {
    position: absolute !important;
    right: clamp(28px, 4vw, 82px) !important;
    bottom: clamp(30px, 4vw, 58px) !important;
    left: auto !important;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(3, minmax(126px, 158px));
    gap: clamp(16px, 2.2vw, 36px);
    width: auto;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(2, 17, 42, 0.62);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.about-commitment-points article {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 9px;
    text-align: center;
}

.about-commitment-points article svg {
    width: 38px;
    height: 38px;
}

@media (max-width: 920px) {
    .about-commitment-panel > .about-commitment-points {
        right: 28px !important;
        bottom: 30px !important;
        left: 28px !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .about-commitment-panel > .about-commitment-points {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        grid-template-columns: 1fr;
        width: calc(100% - 48px);
        margin: 0 24px;
        padding: 22px;
    }

    .about-commitment-points article {
        grid-template-columns: 38px 1fr;
        justify-items: start;
        text-align: left;
    }
}

.stats-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.footer-logo {
     width: 239px;
    background: #fff;
    padding: 7px;
    border-radius: 8px;
}

.stat-item {
    position: relative;
    min-height: 134px;
    padding: 22px 22px 20px;
    overflow: hidden;
    text-align: left;
    background:
        radial-gradient(circle at top right, rgba(212, 175, 55, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(243, 247, 252, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 8px;
    box-shadow: 0 18px 38px rgba(1, 15, 34, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.94);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.stat-item::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500));
    pointer-events: none;
}

.stat-item::after {
    position: absolute;
    right: 22px;
    bottom: 16px;
    left: 98px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, rgba(4, 24, 56, 0.2), rgba(212, 175, 55, 0.5), rgba(4, 24, 56, 0));
    opacity: 0.72;
    transition: opacity var(--ease), transform var(--ease);
}

.stat-item:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 24px 44px rgba(1, 15, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.stat-item:hover::after {
    opacity: 1;
}

.stat-item:last-child {
    border-right: 0;
}

.stat-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    /* align-items: center; */
    gap: 16px;
    min-width: 0;
}

.stat-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.stat-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    background: linear-gradient(180deg, rgba(4, 24, 56, 0.98), rgba(8, 43, 86, 0.94));
    border: 1px solid rgba(212, 175, 55, 0.24);
    border-radius: 17px;
    box-shadow: 0 14px 24px rgba(4, 24, 56, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stat-icon::before {
    position: absolute;
    inset: 7px;
    content: "";
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 13px;
}

.stat-item svg,
.service-card svg {
    width: 55px;
    height: 55px;
    fill: none;
    stroke: var(--gold-500);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.stat-item svg {
    position: relative;
    z-index: 1;
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    stroke: var(--gold-100);
    filter: none;
}

.service-card svg {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    padding: 0;
    stroke: var(--service-accent);
    background: none;
    border: 0;
    border-radius: 0;
    filter: drop-shadow(0 8px 14px rgba(4, 24, 56, 0.08));
    transform: translateY(0);
    transition: stroke var(--ease), filter var(--ease), transform var(--ease);
}

.stat-item strong {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 2px;
    color: var(--navy-800);
    font-size: clamp(36px, 2.35vw, 50px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.05em;
    text-shadow: none;
}

.stat-count {
    display: inline-block;
}

.stat-suffix {
    color: var(--gold-500);
    font-size: 1.05em;
    font-weight: 800;
    letter-spacing: 0.05em;;
}

.stat-suffix-availability {
    font-size: 0.74em;
    letter-spacing: 0.03em;
}

.stat-label {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(4, 24, 56, 0.92);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: none;
    text-wrap: balance;
}

.section {
    padding: 110px 0;
}

.about-company,
.catalogue {
    background: linear-gradient(180deg, var(--white), var(--slate-50));
}

.presence {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 24%, rgba(245, 193, 22, 0.11), transparent 19%),
        radial-gradient(circle at 74% 20%, rgba(255, 255, 255, 0.08), transparent 12%),
        radial-gradient(circle at 88% 56%, rgba(15, 94, 156, 0.22), transparent 24%),
        linear-gradient(108deg, #03142E 0%, var(--navy-900) 36%, var(--navy-800) 66%, var(--blue-700) 100%);
    isolation: isolate;
}

.presence::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1.8px),
        radial-gradient(circle at 34% 62%, rgba(245, 193, 22, 0.22) 0 1.3px, transparent 2px),
        radial-gradient(circle at 58% 20%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1.8px),
        radial-gradient(circle at 72% 48%, rgba(245, 193, 22, 0.16) 0 1.2px, transparent 2px);
    pointer-events: none;
}

.presence::after {
    position: absolute;
    inset: auto 0 0 auto;
    width: min(54vw, 920px);
    height: 100%;
    content: "";
    background:
        radial-gradient(circle at 40% 48%, rgba(245, 193, 22, 0.14), transparent 20%),
        radial-gradient(circle at 66% 34%, rgba(255, 255, 255, 0.08), transparent 16%),
        linear-gradient(90deg, transparent, rgba(11, 58, 109, 0.2));
    pointer-events: none;
}

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

.presence .split-layout {
    grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr);
    gap: 34px;
}

.presence .section-copy {
    max-width: 470px;
}

.presence .section-copy .eyebrow {
    color: var(--gold-100);
}

.presence .section-copy h2 {
    color: var(--white);
}

.presence .section-copy p:not(.eyebrow) {
    color: rgba(207, 224, 242, 0.92);
}

.about-company {
    position: relative;
    overflow: hidden;
    padding: 76px 0;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F7FAFD 100%);
    border-bottom: 1px solid rgba(11, 58, 109, 0.08);
    isolation: isolate;
}

.about-company::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 100%;
    content: "";
    background:
        linear-gradient(90deg, rgba(11, 58, 109, 0.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(11, 58, 109, 0.022) 1px, transparent 1px);
    background-size: 72px 72px;
    pointer-events: none;
}

.about-layout {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 40px;
    /* padding: 24px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(11, 58, 109, 0.08);
    border-radius: 10px;
    box-shadow: 0 24px 70px rgba(4, 24, 56, 0.08); */
}

.about-content {
    display: grid;
    justify-items: start;
    gap: 16px;
    max-width: 540px;
    padding: 18px 0 18px 22px;
}

.about-content .eyebrow {
    margin-bottom: 0;
    color: var(--gold-500);
    letter-spacing: 0;
}

.about-content h2 {
    max-width: 520px;
    font-size: 36px;
    line-height: 1.1;
}

.about-content p {
    margin: 0;
    color: var(--slate-500);
    font-size: 14px;
    line-height: 1.68;
}

.about-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0 4px;
}

.about-highlights span {
    padding: 8px 10px;
    color: var(--blue-700);
    background: rgba(15, 94, 156, 0.045);
    border: 1px solid rgba(15, 94, 156, 0.12);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.about-content .button {
    margin-top: 8px;
    min-width: 230px;
}

.about-media {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(11, 58, 109, 0.12);
    border-radius: 10px;
    box-shadow: 0 26px 62px rgba(4, 24, 56, 0.16);
    isolation: isolate;
}

.about-media::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background:
        linear-gradient(180deg, rgba(4, 24, 56, 0.02), rgba(4, 24, 56, 0.34)),
        linear-gradient(90deg, rgba(4, 24, 56, 0.08), transparent 44%);
    pointer-events: none;
}

.about-media::after {
    position: absolute;
    inset: 18px;
    z-index: 2;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 6px;
    pointer-events: none;
}

.about-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
    transform: scale(1);
    transition: transform 700ms ease;
}

.about-media:hover img {
    transform: scale(1.045);
}

.about-media-badge {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    max-width: 300px;
    padding: 18px 20px;
    color: var(--white);
    background: rgba(4, 24, 56, 0.78);
    border: 1px solid rgba(242, 226, 162, 0.28);
    border-radius: 6px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.about-media-badge span {
    display: block;
    margin-bottom: 4px;
    color: var(--gold-100);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.about-media-badge strong {
    display: block;
    font-size: 19px;
    line-height: 1.2;
}

.services {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, var(--navy-900) 0, var(--navy-900) 430px, var(--slate-50) 430px, var(--white) 100%);
    isolation: isolate;
}

.services::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    height: 430px;
    content: "";
    background:
        linear-gradient(135deg, transparent 0 58%, rgba(212, 175, 55, 0.14) 58%, transparent 72%),
        linear-gradient(120deg, rgba(15, 94, 156, 0.24), transparent 44%);
    pointer-events: none;
}

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

.split-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: center;
    gap: 70px;
}

.section-copy p,
.section-intro p,
.center-intro p,
.trust-copy p,
.contact-inner p {
    max-width: 630px;
    color: var(--slate-500);
    font-size: 17px;
}

.presence-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 620px;
    margin: 28px 0 22px;
}

.presence-metrics span {
    min-height: 82px;
    padding: 16px 14px;
    color: var(--slate-500);
    background: linear-gradient(180deg, var(--white), #FAFBFD);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(4, 24, 56, 0.06);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
}

.presence-metrics strong {
    display: block;
    margin-bottom: 5px;
    color: var(--navy-900);
    font-size: 22px;
    line-height: 1;
}

.section-intro {
    display: grid;
    max-width: 760px;
    margin-bottom: 36px;
}

.services .section-intro {
  grid-template-columns: minmax(0, 760px) minmax(180px, 3fr);
    align-items: center;
    /* justify-content: space-between; */
    gap: 0px;
    max-width: none;
    margin-bottom: 60px;
}

.services .eyebrow {
    color: var(--gold-100);
}

.services .section-intro h2 {
    max-width: 760px;
    color: var(--white);
}

.services .section-intro p {
    color: rgba(255, 255, 255, 0.74);
}

.services .section-intro .text-link {
    justify-self: start;
    margin-top: 0;
    padding: 13px 18px;
    color: var(--navy-900);
 background: #EEA42D;
background: linear-gradient(148deg, rgba(238, 164, 45, 1) 0%, rgba(255, 248, 123, 1) 42%, rgba(238, 164, 45, 1) 100%);

    border-radius: 4px;
    box-shadow: 0 14px 28px rgba(212, 175, 55, 0.2);
}

.center-intro {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.text-link {
    display: inline-flex;
    margin-top: 6px;
    color: var(--gold-600);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.text-link:hover {
    color: var(--blue-700);
}

.text-link.light {
    color: var(--gold-100);
}

.map-panel {
    position: relative;
    min-height: 540px;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    isolation: isolate;
}

.map-panel::before {
    display: none;
}

.map-panel::after {
    display: none;
}

.network-map-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.network-map-wrap::before {
    display: none;
}

.network-map-wrap::after {
    display: none;
}

.map-atmosphere {
    display: none;
}

.map-legend,
.map-status-card {
    position: absolute;
    z-index: 6;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(4, 24, 56, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
}

.map-legend {
    top: 16px;
    right: 16px;
    flex-wrap: wrap;
    max-width: min(290px, calc(100% - 32px));
    gap: 7px;
    padding: 8px 11px;
}

.map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.map-legend-item i {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-700), var(--gold-500));
    box-shadow: 0 0 0 4px rgba(245, 193, 22, 0.16);
}

.map-legend-item-hub i {
    background: linear-gradient(135deg, var(--navy-900), var(--blue-700));
    box-shadow: 0 0 0 4px rgba(11, 58, 109, 0.12);
}

.map-status-card {
    left: 46%;
    bottom: 18px;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(280px, calc(100% - 36px));
    gap: 4px;
    padding: 14px 16px;
    color: var(--white);
    background:
        linear-gradient(135deg, rgba(4, 24, 56, 0.9), rgba(11, 58, 109, 0.74));
    border-color: rgba(242, 226, 162, 0.18);
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.24);
}

.map-status-card span {
    color: var(--gold-100);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.map-status-card strong {
    font-size: 15px;
    line-height: 1.35;
}

.network-map {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    background: none;
}

.network-map::before {
    display: none;
}

.network-map .jvm-container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: transparent;
    filter: saturate(0.86) brightness(0.78) contrast(1.08);
}

.network-map svg {
    overflow: visible;
    /* transform: scale(1.04); */
    transform-origin: 50% 50%;
}

.network-map .jvm-region {
    transition: fill var(--ease), fill-opacity var(--ease);
}

.network-map .jvm-marker {
    filter:
        drop-shadow(0 0 8px rgba(245, 193, 22, 0.38))
        drop-shadow(0 10px 16px rgba(4, 24, 56, 0.16));
    transition: filter var(--ease), transform var(--ease);
    transform-box: fill-box;
    transform-origin: center;
}

.network-map .jvm-marker:hover {
    filter:
        drop-shadow(0 0 12px rgba(245, 193, 22, 0.62))
        drop-shadow(0 14px 22px rgba(4, 24, 56, 0.22));
    transform: scale(1.22);
}

.network-map .jvm-line {
    stroke-dasharray: 12 10;
    filter:
        drop-shadow(0 0 6px rgba(245, 193, 22, 0.36))
        drop-shadow(0 10px 14px rgba(184, 144, 43, 0.16));
    animation: vectorRouteFlow 2.6s linear infinite;
}

.network-map .jvm-line:nth-of-type(2n) {
    animation-duration: 3.2s;
    animation-delay: -0.8s;
}

.network-map .jvm-line:nth-of-type(3n) {
    animation-duration: 3.8s;
    animation-delay: -1.4s;
}

.jvm-tooltip {
    min-width: 220px;
    padding: 12px 14px !important;
    color: rgba(255, 255, 255, 0.82) !important;
    background:
        linear-gradient(135deg, rgba(4, 24, 56, 0.96), rgba(11, 58, 109, 0.9)) !important;
    border: 1px solid rgba(242, 226, 162, 0.28) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 46px rgba(4, 24, 56, 0.28) !important;
    font-family: var(--body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    text-transform: none !important;
}

.jvm-tooltip::before {
    display: none;
    content: "";
}

.jvm-zoom-btn {
    display: none !important;
}

.vector-network-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vector-ambient-lanes path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-dasharray: 2 13;
    stroke-linecap: round;
    stroke-width: 1.2;
    opacity: 0.44;
    animation: premiumAmbientRoute 13s linear infinite;
}

.vector-hub-glow {
    fill: url(#vectorHubGlow);
    opacity: 0.72;
    animation: premiumHubGlow 4.8s ease-in-out infinite;
}

/* Premium workflow cards — final process-section treatment. */
.about-process {
    padding: 96px 0 104px;
    background:
        radial-gradient(circle at 50% -10%, rgba(35, 111, 168, 0.34), transparent 38%),
        radial-gradient(circle at 8% 92%, rgba(211, 166, 47, 0.12), transparent 30%),
        linear-gradient(135deg, #03142E 0%, #061F40 52%, #082B50 100%);
}

.about-process::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 1;
}

.about-process::after {
    inset: 0;
    height: auto;
    background: url("../images/worldmap.png") center 32px / min(980px, 78vw) auto no-repeat;
    opacity: 0.035;
}

.about-process .about-section-heading {
    margin-bottom: 54px;
}

.about-process .about-section-heading .eyebrow {
    color: #F1C75B;
}

.about-process .about-section-heading h2 {
    color: #FFFFFF;
    text-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.about-process-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    padding: 0;
}

.about-process-track::before,
.about-process-track::after {
    display: none;
}

.about-process-step,
.about-process-step.reveal,
.about-process-step.reveal.is-visible {
    position: relative;
    display: flex;
    min-height: 390px;
    overflow: visible;
    padding: 28px 24px 30px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #FFFFFF;
    text-align: left;
    background:
        radial-gradient(circle at 100% 0%, rgba(49, 126, 181, 0.18), transparent 34%),
        linear-gradient(155deg, rgba(13, 50, 89, 0.96), rgba(5, 27, 58, 0.97));
    border: 1px solid rgba(159, 193, 220, 0.18);
    border-radius: 16px;
    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
    animation: none;
}

.about-process-step.reveal {
    opacity: 0;
    transform: translateY(34px) scale(0.97);
    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.about-process-step.reveal:nth-child(2) { transition-delay: 130ms; }
.about-process-step.reveal:nth-child(3) { transition-delay: 260ms; }
.about-process-step.reveal:nth-child(4) { transition-delay: 390ms; }

.about-process-step.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.about-process-step.reveal.is-visible:hover {
    z-index: 5;
    border-color: rgba(241, 199, 91, 0.44);
    box-shadow:
        0 32px 70px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(241, 199, 91, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateY(-7px) scale(1);
}

.about-process-step::before,
.about-process-step.reveal.is-visible::before {
    position: absolute;
    inset: 0 24px auto;
    width: auto;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, #D3A62F, #F1CD67 58%, transparent);
    border-radius: 0 0 999px 999px;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.about-process-step.reveal.is-visible::before {
    transform: scaleX(1);
    transition-delay: 420ms;
}

.about-process-step:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -28px;
    z-index: 8;
    display: grid;
    width: 38px;
    height: 38px;
    content: "\2192";
    place-items: center;
    color: #061E3D;
    background: linear-gradient(145deg, #FFE59B, #D3A62F);
    border: 5px solid #061D3B;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 900;
    opacity: 0;
    transform: translateY(-50%) translateX(-8px) scale(0.8);
}

.about-process-step.reveal.is-visible:not(:last-child)::after {
    animation: processConnectorReveal 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 640ms;
}

.about-process-icon,
.about-process-step.reveal.is-visible .about-process-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 68px;
    height: 68px;
    margin: 0 0 24px;
    color: #F5D472;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(241, 199, 91, 0.34);
    border-radius: 14px;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: none;
    animation: none;
}

.about-process-icon::before {
    display: none;
}

.about-process-icon::after {
    inset: 7px;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 9px;
}

.about-process-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.8;
}

.process-step-meta,
.about-process-step.reveal.is-visible .process-step-meta {
    display: flex;
    width: 100%;
    min-height: 32px;
    margin: 0 0 19px;
    align-items: center;
    gap: 10px;
    color: #AFC3D7;
    opacity: 1;
    transform: none;
    animation: none;
}

.process-step-meta b,
.about-process-step.reveal.is-visible .process-step-meta b {
    display: block;
    width: auto;
    height: auto;
    color: #F1C75B;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    animation: none;
}

.process-step-meta em {
    display: inline-flex;
    min-height: 25px;
    padding: 0 10px;
    align-items: center;
    color: #D6E3EE;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    font-size: 9px;
    letter-spacing: 0.14em;
}

.about-process-step h3,
.about-process-step.reveal.is-visible h3 {
    max-width: none;
    margin: 0 0 16px;
    padding: 0;
    color: #FFFFFF;
    font-size: clamp(23px, 1.5vw, 28px);
    line-height: 1.12;
    text-align: left;
    letter-spacing: -0.035em;
    animation: none;
}

.about-process-step h3::after {
    display: none;
}

.about-process-step p,
.about-process-step.reveal.is-visible p {
    max-width: none;
    margin: 0;
    color: rgba(210, 226, 239, 0.72);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
    text-align: left;
    animation: none;
}

@keyframes processConnectorReveal {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateX(-8px) scale(0.8) rotate(-12deg);
    }
    70% {
        opacity: 1;
        transform: translateY(-50%) translateX(3px) scale(1.06) rotate(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) translateX(0) scale(1) rotate(0);
    }
}

@media (max-width: 1180px) {
    .about-process-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .about-process-step:not(:last-child)::after {
        display: none;
    }

    .about-process-step {
        min-height: 350px;
    }
}

@media (max-width: 640px) {
    .about-process {
        padding: 72px 0;
    }

    .about-process-track {
        grid-template-columns: 1fr;
    }

    .about-process-step,
    .about-process-step.reveal,
    .about-process-step.reveal.is-visible {
        min-height: 0;
        padding: 24px;
    }

    .about-process-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }
}

/* Premium process sequence: fixed, crisp icons with the journey progressing through the route. */
.about-process-track::before {
    background-image: repeating-linear-gradient(90deg, rgba(64, 103, 138, 0.46) 0 7px, transparent 7px 16px);
    background-size: auto;
    animation: none;
}

.about-process-track::after {
    height: 3px;
    background: linear-gradient(90deg, #C89420 0%, #F1CD67 52%, #176394 100%);
    box-shadow: 0 0 12px rgba(211, 166, 47, 0.25);
    transform-origin: left center;
    animation: aboutProcessRouteProgressPremium 16s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
}

.about-process-step,
.about-process-step.reveal.is-visible,
.about-process-step span,
.about-process-step h3,
.about-process-step p {
    animation: none;
    opacity: 1;
}

.about-process-step::before,
.about-process-step.reveal.is-visible::before {
    background: linear-gradient(#D3A62F, rgba(211, 166, 47, 0));
    animation: none;
    opacity: 0.48;
    transform: translateX(-50%);
}

.about-process-icon,
.about-process-icon::before {
    animation: none;
}

.about-process-icon::before {
    opacity: 0;
    transform: none;
}

.about-process-icon {
    color: #1A5687;
    border-color: #C8D9E6;
    background: linear-gradient(145deg, #FFFFFF 0%, #F6FAFD 100%);
    box-shadow:
        0 12px 26px rgba(17, 52, 85, 0.11),
        0 0 0 7px rgba(226, 236, 244, 0.76);
    will-change: transform, box-shadow;
}

.about-process-step.reveal.is-visible .about-process-icon {
    animation: aboutProcessNodePulse 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

.about-process-step h3::after {
    width: 26px;
    background: #C8D8E5;
    box-shadow: none;
    animation: none;
}

.about-process-step.reveal.is-visible h3::after {
    animation: aboutProcessTitleMarker 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

@keyframes aboutProcessRouteProgressPremium {
    0%, 18% {
        transform: scaleX(0.035);
        opacity: 0.78;
    }
    25%, 43% {
        transform: scaleX(0.35);
        opacity: 1;
    }
    50%, 68% {
        transform: scaleX(0.675);
        opacity: 1;
    }
    75%, 96% {
        transform: scaleX(1);
        opacity: 1;
    }
    100% {
        transform: scaleX(0.035);
        opacity: 0;
    }
}

@keyframes aboutProcessNodePulse {
    0%, 20% {
        transform: translateX(-50%) scale(1.055);
        box-shadow:
            0 18px 36px rgba(17, 52, 85, 0.18),
            0 0 0 7px rgba(211, 166, 47, 0.17),
            0 0 0 13px rgba(211, 166, 47, 0.06);
    }
    27%, 100% {
        transform: translateX(-50%) scale(1);
        box-shadow:
            0 12px 26px rgba(17, 52, 85, 0.11),
            0 0 0 7px rgba(226, 236, 244, 0.76);
    }
}

@keyframes aboutProcessTitleMarker {
    0%, 20% {
        width: 54px;
        background: #D3A62F;
        box-shadow: 0 3px 10px rgba(211, 166, 47, 0.22);
    }
    27%, 100% {
        width: 26px;
        background: #C8D8E5;
        box-shadow: none;
    }
}

/* A visible route cursor makes the four cards read as one guided workflow. */
.about-process-track::after {
    top: 37px;
    right: auto;
    left: calc(12.5% - 7px);
    width: 14px;
    height: 14px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    background: #D3A62F;
    box-shadow:
        0 0 0 4px rgba(211, 166, 47, 0.18),
        0 5px 14px rgba(17, 52, 85, 0.18);
    animation: aboutProcessRouteCursor 16s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
}

.process-step-meta {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    margin: 0 0 17px;
    color: #66809A;
    font-family: var(--body);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.process-step-meta b {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #16486F;
    background: #FFFFFF;
    border: 1px solid #D1DFEA;
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(17, 52, 85, 0.08);
    font-size: 11px;
    letter-spacing: 0;
}

.process-step-meta em {
    font-style: normal;
}

.about-process-step.reveal.is-visible .process-step-meta {
    animation: aboutProcessMetaActivate 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

.about-process-step.reveal.is-visible .process-step-meta b {
    animation: aboutProcessNumberActivate 16s ease-in-out infinite both;
    animation-delay: var(--step-delay);
}

@keyframes aboutProcessRouteCursor {
    0%, 18% {
        left: calc(12.5% - 7px);
        opacity: 1;
    }
    25%, 43% {
        left: calc(37.5% - 7px);
        opacity: 1;
    }
    50%, 68% {
        left: calc(62.5% - 7px);
        opacity: 1;
    }
    75%, 94% {
        left: calc(87.5% - 7px);
        opacity: 1;
    }
    99% {
        left: calc(87.5% - 7px);
        opacity: 0;
    }
    100% {
        left: calc(12.5% - 7px);
        opacity: 0;
    }
}

@keyframes aboutProcessMetaActivate {
    0%, 20% {
        color: #A06F09;
        transform: translateY(-1px);
    }
    27%, 100% {
        color: #66809A;
        transform: translateY(0);
    }
}

@keyframes aboutProcessNumberActivate {
    0%, 20% {
        color: #FFFFFF;
        background: #123F66;
        border-color: #123F66;
        box-shadow: 0 7px 16px rgba(18, 63, 102, 0.22);
    }
    27%, 100% {
        color: #16486F;
        background: #FFFFFF;
        border-color: #D1DFEA;
        box-shadow: 0 5px 12px rgba(17, 52, 85, 0.08);
    }
}

.vector-hub-orbit,
.vector-route-glow,
.vector-route,
.vector-route-secondary,
.vector-route-motion,
.vector-cargo-pulses {
    display: none;
}

.vector-route-web path {
    fill: none;
    stroke: #EAB728;
    stroke-dasharray: 9 9;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-width: 1.8;
    opacity: 0.9;
    filter: drop-shadow(0 0 5px rgba(245, 193, 22, 0.28));
    animation: networkDashFlow 5.2s linear infinite;
}

.vector-route-web path:nth-child(2n) {
    animation-duration: 6.4s;
    animation-delay: -1.6s;
}

.vector-route-web path:nth-child(3n) {
    animation-duration: 7.1s;
    animation-delay: -3.2s;
}

.vector-route-web-track path {
    stroke: rgba(245, 193, 22, 0.27);
    stroke-dasharray: none;
    stroke-width: 4.2;
    opacity: 0.52;
    filter: blur(2.5px);
    animation: none;
}

.vector-route-sparks circle {
    fill: #FFF5C7;
    stroke: #FFFFFF;
    stroke-width: 0.7;
    opacity: 0.98;
    filter:
        drop-shadow(0 0 5px rgba(255, 244, 192, 0.98))
        drop-shadow(0 0 12px rgba(245, 193, 22, 0.8));
}

.vector-port-marker .port-orbit {
    fill: none;
    stroke: rgba(249, 210, 85, 0.62);
    stroke-width: 0.85;
}

.vector-port-marker .port-aura {
    fill: rgba(245, 193, 22, 0.26);
    filter: drop-shadow(0 0 7px rgba(245, 193, 22, 0.56));
}

.vector-port-marker .port-core {
    fill: #F6BD1B;
    stroke: #FFF3BE;
    stroke-width: 1.05;
    filter: drop-shadow(0 0 5px rgba(245, 193, 22, 0.95));
}

.vector-port-marker .port-center {
    fill: #FFFFFF;
}

.vector-hub-marker {
    filter: drop-shadow(0 0 8px rgba(245, 193, 22, 0.78)) drop-shadow(0 0 22px rgba(245, 193, 22, 0.44));
}

.hub-orbit {
    fill: none;
    stroke: rgba(246, 193, 37, 0.68);
    transform-box: fill-box;
    transform-origin: center;
}

.hub-orbit-one { stroke-width: 1; stroke-dasharray: 3 4; animation: hubOrbitSpin 12s linear infinite; }
.hub-orbit-two { stroke-width: 1.05; stroke-dasharray: 2 3; animation: hubOrbitSpin 8s linear infinite reverse; }
.hub-orbit-three { stroke-width: 1.2; opacity: 0.82; }

.hub-core {
    fill: #F7BF1F;
    stroke: #FFF3B5;
    stroke-width: 1.3;
}

.hub-diamond {
    fill: #FFFFFF;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.96));
}

.vector-port-labels text {
    fill: #F8FAFF;
    font-family: var(--body);
    paint-order: stroke;
    stroke: rgba(3, 22, 50, 0.88);
    stroke-linejoin: round;
    stroke-width: 2.6px;
}

.vector-port-labels .port-name,
.vector-port-labels .hub-name {
    font-size: 10.8px;
    font-weight: 800;
    letter-spacing: 0;
}

.vector-port-labels .port-country,
.vector-port-labels .hub-country {
    fill: rgba(233, 241, 252, 0.88);
    font-size: 8.7px;
    font-weight: 500;
}

.vector-port-labels .hub-name,
.vector-port-labels .hub-country {
    fill: #F5C116;
}

.vector-map-pin {
    position: absolute;
    z-index: 5;
    display: grid;
    width: 24px;
    height: 24px;
    padding: 0;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    cursor: pointer;
    outline: none;
    transform: translate(-50%, -50%);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease);
}

.vector-map-pin::before {
    display: none;
}

.vector-map-pin::after {
    display: none;
}

.vector-map-pin:hover,
.vector-map-pin:focus-visible,
.vector-map-pin.is-active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: translate(-50%, -50%) scale(1);
}

.vector-map-pin:hover::after,
.vector-map-pin:focus-visible::after,
.vector-map-pin.is-active::after {
    opacity: 1;
    transform: scale(1.16);
}

.vector-pin-hub {
    width: 30px;
    height: 30px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.vector-pin-hub::before {
    display: none;
}

.vector-pin-europe { top: 38.5%;
    left: 48.2%; }
.vector-pin-asia { top: 51.4%; left: 76%; }
.vector-pin-hub { top: 50.9%; left: 62.5%; }
.vector-pin-africa { top: 63.4%; left: 57.5%; }
.vector-pin-south-america {     top: 70.2%;
    left: 32.8%;}

.vector-map-tooltip {
    position: absolute;
    top: var(--vector-tooltip-top, 18px);
    left: var(--vector-tooltip-left, 180px);
    z-index: 7;
    width: max-content;
    min-width: 0;
    max-width: calc(100% - 28px);
    padding: 12px 18px;
    color: var(--white);
    background:
        linear-gradient(135deg, rgba(4, 24, 56, 0.96), rgba(11, 58, 109, 0.9));
    border: 1px solid rgba(242, 226, 162, 0.28);
    border-radius: 18px;
    box-shadow:
        0 24px 44px rgba(4, 24, 56, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity var(--ease), transform var(--ease);
}

.vector-map-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.vector-map-tooltip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--gold-100);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vector-map-tooltip span::before {
    width: 7px;
    height: 7px;
    content: "";
    background: var(--gold-500);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(245, 193, 22, 0.14);
}

.vector-map-tooltip strong {
    display: block;
    margin: 0;
    color: var(--white);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

.vector-map-tooltip small {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.map-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    color: transparent;
    pointer-events: none;
    user-select: none;
}

.network-map.is-fallback ~ .map-fallback {
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 24px;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 800;
    text-align: center;
    background: rgba(4, 24, 56, 0.58);
    backdrop-filter: blur(8px);
}

@keyframes vectorRouteFlow {
    to {
        stroke-dashoffset: -44;
    }
}

@keyframes premiumRouteFlow {
    to {
        stroke-dashoffset: -190;
    }
}

@keyframes networkDashFlow {
    to {
        stroke-dashoffset: -32;
    }
}

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

@keyframes networkPulseDash {
    0% {
        stroke-dashoffset: 56;
        opacity: 0.46;
    }

    12% {
        opacity: 0.95;
    }

    82% {
        opacity: 0.95;
    }

    100% {
        stroke-dashoffset: -56;
        opacity: 0.5;
    }
}

@keyframes hubDotBreath {
    0%,
    100% {
        opacity: 0.86;
        transform: scale(0.92);
    }

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

@keyframes premiumAmbientRoute {
    to {
        stroke-dashoffset: -60;
    }
}

@keyframes premiumHubGlow {
    0%,
    100% {
        opacity: 0.68;
        transform: scale(0.94);
    }

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

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

@keyframes portRingPulse {
    0% {
        opacity: 0.82;
        transform: scale(0.7);
    }

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

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

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    align-items: stretch;
    perspective: 1800px;
}

@property --service-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.service-card {
    --service-accent: var(--gold-500);
    --service-accent-soft: rgba(212, 175, 55, 0.10);
    --service-accent-border: rgba(80, 132, 174, 0.46);
    --service-accent-shadow: rgba(15, 94, 156, 0.20);
    --service-ring-track: rgba(31, 91, 143, 0.50);
    --service-ring-light: rgba(246, 205, 83, 1);
    --service-ring-ice: rgba(58, 151, 214, 0.95);
    --service-border-angle: 0deg;
    --service-border-size: 3px;
    --card-rotate-x: 0deg;
    --card-rotate-y: 0deg;
    --card-translate-y: 0px;
    --card-scale: 1;
    --card-shine-x: 50%;
    --card-shine-y: 20%;
    --service-reveal-y: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 460px;
    overflow: hidden;
    isolation: isolate;
    padding: 28px 28px 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, #F8FBFE 54%, #EAF2F8 100%);
    border: 1px solid rgba(73, 117, 155, 0.34);
    border-radius: 8px;
    box-shadow:
        0 28px 60px rgba(4, 24, 56, 0.12),
        0 10px 22px rgba(4, 24, 56, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -28px 46px rgba(15, 94, 156, 0.05);
    backface-visibility: hidden;
    outline: 1px solid transparent;
    transform-origin: center;
    transform-style: preserve-3d;
    will-change: transform;
}

.service-card.reveal {
    opacity: 0;
    transform:
        perspective(1600px)
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y))
        translateY(calc(var(--card-translate-y) + var(--service-reveal-y)))
        scale(var(--card-scale));
    transition:
        opacity 650ms ease,
        border-color 260ms ease,
        box-shadow 320ms ease,
        outline-color 260ms ease,
        background 320ms ease,
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card.reveal.is-visible {
    opacity: 1;
    transform:
        perspective(1600px)
        rotateX(var(--card-rotate-x))
        rotateY(var(--card-rotate-y))
        translateY(var(--card-translate-y))
        scale(var(--card-scale));
}

.service-card:first-child {
    /* --service-accent: #B87943;
    --service-accent-soft: rgba(184, 121, 67, 0.12);
    --service-accent-border: rgba(184, 121, 67, 0.42);
    --service-accent-shadow: rgba(184, 121, 67, 0.22);
    --service-ring-track: rgba(119, 82, 48, 0.42);
    --service-ring-ice: rgba(206, 147, 86, 0.86); */
  --service-accent: #0f5e9c;
    --service-accent-soft: rgba(15, 94, 156, 0.12);
    --service-accent-border: rgba(15, 94, 156, 0.46);
    --service-accent-shadow: rgba(15, 94, 156, 0.24);
    --service-ring-track: rgba(11, 75, 130, 0.48);
    --service-ring-ice: rgba(77, 161, 215, 0.96);

}

.service-card:nth-child(2) {
  --service-accent: #0f5e9c;
    --service-accent-soft: rgba(15, 94, 156, 0.12);
    --service-accent-border: rgba(15, 94, 156, 0.46);
    --service-accent-shadow: rgba(15, 94, 156, 0.24);
    --service-ring-track: rgba(11, 75, 130, 0.48);
    --service-ring-ice: rgba(77, 161, 215, 0.96);
}

.service-card:nth-child(3) {
    --service-accent: #0f5e9c;
    --service-accent-soft: rgba(15, 94, 156, 0.12);
    --service-accent-border: rgba(15, 94, 156, 0.46);
    --service-accent-shadow: rgba(15, 94, 156, 0.24);
    --service-ring-track: rgba(11, 75, 130, 0.48);
    --service-ring-ice: rgba(77, 161, 215, 0.96);
}

.service-card:nth-child(4) {
    --service-accent: #596C86;
    --service-accent-soft: rgba(89, 108, 134, 0.12);
    --service-accent-border: rgba(89, 108, 134, 0.24);
    --service-accent-shadow: rgba(89, 108, 134, 0.16);
}

.service-card::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        radial-gradient(circle at var(--card-shine-x) var(--card-shine-y), rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.32) 15%, rgba(255, 255, 255, 0) 37%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 66%, rgba(4, 24, 56, 0.055) 100%),
        radial-gradient(circle at 14% 10%, var(--service-accent-soft), transparent 30%);
    opacity: 0.82;
    transition: opacity var(--ease);
    pointer-events: none;
}

.service-card::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: var(--service-border-size);
    content: "";
    background:
        conic-gradient(
            from var(--service-border-angle),
            var(--service-ring-track) 0deg 54deg,
            var(--service-ring-ice) 70deg,
            var(--service-ring-light) 90deg,
            rgba(255, 245, 175, 1) 104deg,
            var(--service-accent) 122deg,
            var(--service-ring-ice) 146deg,
            var(--service-ring-track) 168deg 360deg
        );
    border-radius: inherit;
    opacity: 0.94;
    filter:
        drop-shadow(0 0 10px rgba(246, 205, 83, 0.18))
        drop-shadow(0 0 15px var(--service-accent-shadow));
    animation: serviceBorderSpin 4.6s linear infinite;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    transition: opacity var(--ease), filter 320ms ease, padding 260ms ease;
    pointer-events: none;
}

.service-grid .service-card:hover,
.service-grid .service-card:focus-within,
.service-grid .service-card.is-tilting {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, #F9FCFF 50%, #E8F1F9 100%);
    border-color: var(--service-accent-border);
    outline-color: var(--service-accent-border);
    box-shadow:
        0 42px 82px rgba(4, 24, 56, 0.18),
        0 20px 44px var(--service-accent-shadow),
        0 0 0 1px rgba(216, 176, 74, 0.14),
        inset 0 0 0 1px rgba(73, 117, 155, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    --card-translate-y: -14px;
    --card-scale: 1.015;
}

.service-grid .service-card:nth-child(2):hover,
.service-grid .service-card:nth-child(2):focus-within,
.service-grid .service-card:nth-child(2).is-tilting {
    --card-translate-y: -14px;
    --card-scale: 1.015;
}

.service-grid .service-card:nth-child(3):hover,
.service-grid .service-card:nth-child(3):focus-within,
.service-grid .service-card:nth-child(3).is-tilting {
    --card-translate-y: -14px;
    --card-scale: 1.015;
}

.service-grid .service-card:hover::before,
.service-grid .service-card:focus-within::before,
.service-grid .service-card.is-tilting::before {
    opacity: 1;
}

.service-grid .service-card:hover::after,
.service-grid .service-card:focus-within::after,
.service-grid .service-card.is-tilting::after {
    padding: 4px;
    opacity: 1;
    filter:
        drop-shadow(0 0 20px var(--service-accent-shadow))
        drop-shadow(0 0 14px rgba(246, 205, 83, 0.26));
    animation-duration: 2.8s;
}

.service-card > * {
    position: relative;
    z-index: 1;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.service-card h3 {
    margin: 24px 0 12px;
    color: var(--navy-900);
    font-family: var(--body);
    font-size: clamp(20px, 1.55vw, 26px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-transform: none;
    transition: color var(--ease), transform var(--ease);
}

.service-card p {
    margin: 0 0 22px;
    color: #5D7393;
    font-size: 15px;
    line-height: 1.55;
}

.service-card ul {
    display: grid;
    gap: 0;
    margin: 4px 0 28px;
    padding: 0;
    color: #5C7190;
    border-top: 1px solid rgba(11, 58, 109, 0.08);
    list-style: none;
}

.service-card li {
    position: relative;
    padding: 12px 0 12px 22px;
    border-bottom: 1px solid rgba(11, 58, 109, 0.08);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.38;
    transition: color var(--ease), transform var(--ease);
}

.service-card li::before {
    position: absolute;
    top: 20px;
    left: 0;
    width: 10px;
    height: 3px;
    content: "";
    background: var(--service-accent);
    border-radius: 999px;
    box-shadow: 0 0 10px var(--service-accent-shadow);
}

.service-card a {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    color: var(--navy-900);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color var(--ease), transform var(--ease), text-shadow var(--ease);
}

.service-card a:hover {
    color: var(--service-accent);
}

.service-grid .service-card:hover svg,
.service-grid .service-card:focus-within svg,
.service-grid .service-card.is-tilting svg {
    filter:
        drop-shadow(0 16px 26px var(--service-accent-shadow))
        drop-shadow(0 0 16px rgba(255, 255, 255, 0.36));
    transform: translateZ(56px) translateY(-4px) scale(1.04);
}

.service-grid .service-card:hover h3,
.service-grid .service-card:focus-within h3,
.service-grid .service-card.is-tilting h3 {
    color: #041838;
    transform: translateZ(42px) translateY(-3px);
}

.service-grid .service-card:hover li,
.service-grid .service-card:focus-within li,
.service-grid .service-card.is-tilting li {
    color: var(--navy-800);
}

.service-grid .service-card:hover a,
.service-grid .service-card:focus-within a,
.service-grid .service-card.is-tilting a {
    color: var(--service-accent);
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
    transform: translateZ(44px) translateX(6px);
}

.service-card svg {
    position: relative;
    z-index: 1;
    width: 74px;
    height: 74px;
    padding: 16px;
    stroke: var(--service-accent);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(233, 240, 248, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.98);
    border-radius: 22px;
    box-shadow:
        0 18px 30px rgba(4, 24, 56, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 10px 16px rgba(4, 24, 56, 0.08));
    transform: translateZ(46px);
    transition: stroke var(--ease), filter var(--ease), transform 280ms ease;
}

.service-card p,
.service-card ul,
.service-card a {
    transform: translateZ(28px);
}

@keyframes serviceBorderSpin {
    to {
        --service-border-angle: 360deg;
    }
}

.industries {
    position: relative;
    overflow: hidden;
    padding: 82px 24px 88px;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F9FBFD 58%, #EEF5FB 100%);
    isolation: isolate;
}

.industries::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(11, 58, 109, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(11, 58, 109, 0.026) 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 62%, rgba(245, 193, 22, 0.06) 62%, transparent 78%);
    background-size: 90px 90px, 90px 90px, auto;
    pointer-events: none;
}

.industries::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(245, 193, 22, 0.045), transparent 26%, transparent 72%, rgba(15, 94, 156, 0.06)),
        linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.72) 46%, transparent);
    opacity: 0.78;
    pointer-events: none;
}
.highlighted{
    color: var(--gold-100) !important;
}
.industries .container-fluid {
    position: relative;
    z-index: 1;
}

.industries .center-intro {
    max-width: 1120px;
    margin: 0 auto 46px;
    gap: 12px;
}

.industries .center-intro .eyebrow {
    display: inline-flex;
    width: auto !important;
    max-width: none !important;
    margin: 0 auto;
    padding: 0 0 8px;
    /* color: var(--gold-500); */
    /* backgroun    d: transparent; */
    border: 0;
    border-bottom: 2px solid rgba(245, 193, 22, 0.44);
    border-radius: 0;
    box-shadow: none;
}

.industries .center-intro h2 {
    max-width: 1120px;
    margin: 0 auto;
    font-size: clamp(38px, 3.2vw, 58px);
    line-height: 1.05;
    letter-spacing: 0;
    text-wrap: balance;
}

.industry-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
}

.industry-card {
    --industry-lift: 0px;
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 268px;
    overflow: hidden;
    padding: 18px 18px 20px;
    color: var(--white);
    background: var(--navy-900);
    border: 1px solid rgba(11, 58, 109, 0.14);
    border-radius: 14px;
    isolation: isolate;
    box-shadow:
        0 20px 42px rgba(4, 24, 56, 0.10),
        0 8px 18px rgba(4, 24, 56, 0.06);
    backface-visibility: hidden;
    contain: paint;
}

.industry-card.reveal {
    opacity: 0;
    transform:
        translateY(calc(var(--industry-lift) + 24px))
        scale(0.985);
    transition:
        opacity 650ms ease,
        border-color 260ms ease,
        box-shadow 320ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.industry-card.reveal.is-visible {
    opacity: 1;
    transform: translateY(var(--industry-lift)) scale(1);
}

.industry-card::before,
.industry-card::after {
    position: absolute;
    inset: 0;
    content: "";
    z-index: -1;
    pointer-events: none;
}

.industry-card::before {
    background:linear-gradient(180deg, rgb(4 24 56 / 0%) 0%, rgb(4 24 56 / 0%) 42%, rgba(4, 24, 56, 0.86) 100%), linear-gradient(90deg, rgb(4 24 56 / 0%), transparent 54%, rgb(127 104 27 / 0%));
    /* opacity: 0.92;
    transition: opacity 320ms ease; */
}

/* .industry-card::after {
    inset: auto 18px 18px;
    z-index: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-500), rgba(245, 193, 22, 0.16), transparent);
    opacity: 0.82;
    transform: scaleX(0.32);
    transform-origin: left;
    transition: transform 280ms ease, opacity var(--ease);
} */

.industry-card:hover,
.industry-card:focus-within {
    --industry-lift: -3px;
    border-color: rgba(11, 58, 109, 0.24);
    box-shadow:
        0 28px 58px rgba(4, 24, 56, 0.16),
        0 14px 26px rgba(4, 24, 56, 0.08);
}

.industry-card:hover::after,
.industry-card:focus-within::after {
    opacity: 1;
    transform: scaleX(1);
}

.industry-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    filter: saturate(0.92) contrast(1.01) brightness(0.88);
    transform: scale(1.02);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.industry-card:hover .industry-image,
.industry-card:focus-within .industry-image {
    transform: scale(1.03);
}

.industry-card span {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 190px;
    padding-bottom: 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    font-size: clamp(15px, 1.02vw, 18px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0;
    text-shadow: 0 5px 18px rgba(0, 0, 0, 0.34);
    text-transform: uppercase;
    transition: transform 280ms ease, color var(--ease);
}

.industry-card span::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 52px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, var(--gold-500), transparent);
    border-radius: 999px;
    transform-origin: left;
    transition: transform 280ms ease, opacity var(--ease);
}

.industry-card:hover span,
.industry-card:focus-within span {
    color: #FFFFFF;
    transform: translateY(-4px);
}

.industry-card:hover span::after,
.industry-card:focus-within span::after {
    transform: scaleX(1.35);
}

@keyframes industriesBackdropDrift {
    from {
        background-position: 0 0, 0 0, 0 0;
    }

    to {
        background-position: 90px 0, 0 90px, 28px -18px;
    }
}

@keyframes industriesSoftSweep {
    0%,
    100% {
        opacity: 0.48;
        transform: translateX(-18px);
    }

    50% {
        opacity: 0.78;
        transform: translateX(18px);
    }
}

@keyframes industryOverlayBreath {
    0%,
    100% {
        opacity: 0.86;
    }

    50% {
        opacity: 0.98;
    }
}

.container-showcase {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    padding: 0;
    /* background:
        radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.42) 38%, transparent 62%),
        linear-gradient(180deg, #EAF4FC 0%, #DDECF8 100%);
    border: 1px solid rgba(11, 58, 109, 0.12);
    border-radius: 8px;
    box-shadow: 0 26px 68px rgba(4, 24, 56, 0.12), 0 10px 24px rgba(4, 24, 56, 0.08);
    isolation: isolate; */
}

.container-showcase::before {
    position: absolute;
    inset: 24px;
    z-index: 0;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 6px;
    pointer-events: none;
}

.container-showcase::after {
    position: absolute;
    right: 14%;
    bottom: 104px;
    left: 14%;
    z-index: 0;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(11, 58, 109, 0.18), transparent);
    pointer-events: none;
}

.floating-container-image {
    position: absolute;
    top: 30% !important;
    left: 50%;
    z-index: 2;
    width: min(84%, 600px);
    height: auto;
    object-fit: contain;
    transform: translate3d(-50%, 0, 0);
    filter: drop-shadow(0 30px 26px rgba(4, 24, 56, 0.24));
    animation: containerFloat 3.8s ease-in-out infinite;
    will-change: transform;
    border-radius:8px;
}

.container-shadow-svg {
    position: absolute;
    bottom: 14px;
    left: 50%;
    z-index: 1;
    width: min(70%, 520px);
    height: 96px;
    overflow: visible;
    transform: translateX(-50%);
}

.container-lines,
.container-ribs {
    fill: none;
    stroke: rgba(242, 226, 162, 0.5);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.container-ribs {
    stroke: rgba(255, 255, 255, 0.28);
}

.container-brand {
    fill: var(--gold-500);
    font-family: var(--body);
    font-size: 32px;
    font-weight: 800;
    text-anchor: middle;
}

.container-tag {
    fill: var(--gold-100);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
}

.container-shadow {
    fill: rgb(0 0 0 / 36%);
    filter: blur(7px);
    transform-origin: center;
    transform-box: fill-box;
    animation: containerShadowPulse 3.8s ease-in-out infinite;
    will-change: opacity, transform;
}

.vision-visual {
    position: relative;
    display: block;
    aspect-ratio: 14 / 10;
    overflow: hidden;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 14px;
    box-shadow: none;
    isolation: isolate;
}

.vision-visual::before {
    display: none;
}

.vision-visual::after {
    display: none;
}


.solutions-main{

    display: inline-flex;
    width: fit-content;
    margin-bottom: 22px;
    padding: 8px 12px;
    color: var(--gold-100);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(242, 226, 162, 0.22);
    border-radius: 4px;

}

.vision-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(11, 58, 109, 0.12);
    border-radius: 14px;
    box-shadow:
        0 32px 72px rgba(4, 24, 56, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.vision-orbit {
    position: absolute;
    top: 44%;
    left: 50%;
    z-index: 1;
    width: 270px;
    height: 270px;
    border: 1px dashed rgba(245, 193, 22, 0.38);
    border-radius: 50%;
    box-shadow:
        0 0 0 42px rgba(245, 193, 22, 0.05),
        0 0 80px rgba(245, 193, 22, 0.12);
    transform: translate(-50%, -50%);
    animation: visionOrbitSpin 18s linear infinite;
}

.vision-flow-lines {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vision-flow {
    fill: none;
    stroke: url(#visionFlowGold);
    stroke-dasharray: 18 18;
    stroke-linecap: round;
    stroke-width: 2.2;
    opacity: 0.76;
    filter: drop-shadow(0 0 10px rgba(245, 193, 22, 0.22));
    animation: visionFlowMove 4.8s linear infinite;
}

.vision-flow-two {
    animation-duration: 5.6s;
    animation-delay: -1.4s;
    opacity: 0.58;
}

.vision-flow-three {
    animation-duration: 6.2s;
    animation-delay: -2.1s;
    opacity: 0.5;
}

.vision-core-card,
.vision-node,
.vision-stats-row {
    position: relative;
    z-index: 2;
}

.vision-core-card {
    display: grid;
    grid-column: 1 / 7;
    width: 100%;
    min-height: 158px;
    align-content: center;
    padding: 26px 30px;
    color: var(--white);
    background:
        linear-gradient(135deg, rgba(4, 24, 56, 0.96), rgba(11, 58, 109, 0.9));
    border: 1px solid rgba(242, 226, 162, 0.26);
    border-radius: 20px;
    box-shadow:
        0 26px 54px rgba(4, 24, 56, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: none;
}

.vision-core-card span,
.vision-node small {
    display: inline-flex;
    color: var(--gold-100);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vision-core-card strong {
    display: block;
    margin-top: 8px;
    font-family: var(--display);
    font-size: clamp(26px, 2.1vw, 34px);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.vision-node {
    width: auto;
    min-height: 132px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(11, 58, 109, 0.12);
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(4, 24, 56, 0.12);
    backdrop-filter: blur(14px);
    animation: visionNodeFloat 4.2s ease-in-out infinite;
}

.vision-node::before {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 10px;
    height: 10px;
    content: "";
    background: var(--gold-500);
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(245, 193, 22, 0.14);
}

.vision-node strong {
    display: block;
    margin: 7px 0 4px;
    color: var(--navy-900);
    font-size: 15px;
    line-height: 1.2;
}

.vision-node span {
    color: var(--slate-500);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.vision-node-top {
    grid-column: 1 / 3;
}

.vision-node-right {
    grid-column: 3 / 5;
    animation-delay: -1.2s;
}

.vision-node-bottom {
    grid-column: 5 / 7;
    animation-delay: -2.2s;
}

.vision-stats-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}

.vision-stats-row span {
    padding: 12px 10px;
    color: var(--slate-500);
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(11, 58, 109, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(4, 24, 56, 0.08);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

.vision-stats-row strong {
    display: block;
    color: var(--navy-900);
    font-size: 14px;
}

@keyframes containerFloat {
    0%,
    100% {
        transform: translate3d(-50%, 0, 0);
    }

    50% {
        transform: translate3d(-50%, -38px, 0);
    }
}

@keyframes containerShadowPulse {
    0%,
    100% {
        opacity: 0.94;
        transform: scaleX(1.04) scaleY(1);
    }

    50% {
        opacity: 0.44;
        transform: scaleX(0.82) scaleY(0.72);
    }
}

.type-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 34px;
}

.type-button {
    min-height: 44px;
    padding: 10px 16px;
    color: var(--navy-900);
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--ease), background var(--ease), border var(--ease);
}

.type-button:hover,
.type-button.active {
    color: var(--white);
    background: linear-gradient(90deg, var(--blue-700), var(--blue-400));
    border-color: var(--blue-500);
}

.container-catalogue-section {
    position: relative;
    overflow: hidden;
    padding: 70px 0 54px;
    background:
        linear-gradient(180deg, #FFFFFF 0%, #F7FAFD 62%, #EEF5FB 100%);
    isolation: isolate;
}

.container-catalogue-section::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(11, 58, 109, 0.03) 1px, transparent 1px),
        linear-gradient(180deg, rgba(11, 58, 109, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 18% 24%, rgba(245, 193, 22, 0.09), transparent 20%),
        radial-gradient(circle at 80% 12%, rgba(15, 94, 156, 0.08), transparent 22%);
    background-size: 72px 72px, 72px 72px, auto, auto;
    pointer-events: none;
}

.catalogue-browser {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: 40px;
}

.catalogue-copy {
    display: grid;
    justify-items: start;
    gap: 14px;
    max-width: 450px;
}

.catalogue-copy .eyebrow {
    margin-bottom: 0;
    color: var(--gold-500);
}

.catalogue-copy h2 {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(34px, 2.95vw, 50px);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.catalogue-copy > p {
    margin: 0;
    color: var(--slate-500);
    font-size: 16px;
    line-height: 1.62;
}

.catalogue-active-panel {
    position: relative;
    display: grid;
    width: 100%;
    gap: 10px;
    padding: 18px 18px 16px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(11, 58, 109, 0.08);
    border-radius: 18px;
    box-shadow: 0 16px 34px rgba(4, 24, 56, 0.07);
    backdrop-filter: blur(12px);
}

.catalogue-active-panel::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500), rgba(245, 193, 22, 0));
    border-radius: 18px 18px 0 0;
    pointer-events: none;
}

.catalogue-active-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.catalogue-active-title {
    display: grid;
    gap: 6px;
}

.catalogue-active-label {
    color: var(--gold-500);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.catalogue-active-panel strong {
    color: var(--navy-900);
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.catalogue-active-count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 34px;
    padding: 6px 10px;
    color: var(--navy-900);
    background: rgba(15, 94, 156, 0.06);
    border: 1px solid rgba(15, 94, 156, 0.12);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
}

.catalogue-active-panel .catalogue-active-meta {
    margin: -2px 0 0;
    color: #5A7088;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.catalogue-active-panel p {
    margin: 0;
    color: #566A83;
    font-size: 13px;
    line-height: 1.55;
}

.catalogue-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.catalogue-specs span {
    padding: 7px 11px;
    color: var(--blue-700);
    background: rgba(15, 94, 156, 0.05);
    border: 1px solid rgba(15, 94, 156, 0.12);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.catalogue-active-footer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: #67809B;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.03em;
}

.catalogue-active-pulse {
    width: 8px;
    height: 8px;
    background: var(--gold-500);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(245, 193, 22, 0.32);
    animation: cataloguePulse 1.8s ease-in-out infinite;
}

.catalogue-stage.container-showcase {
    min-height: 450px;
    border-radius: 24px;
    /* background:
        radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.96), transparent 24%),
        radial-gradient(circle at 78% 24%, rgba(212, 175, 55, 0.18), transparent 30%),
        linear-gradient(180deg, #F8FBFE 0%, #E7F1FA 100%); */
}

.catalogue-stage.container-showcase::before {
    inset: 20px;
    border-radius: 18px;
}

.catalogue-stage.container-showcase::after {
    right: 12%;
    bottom: 88px;
    left: 12%;
}

.catalogue-floor-rings {
    position: absolute;
    right: 8%;
    bottom: 24px;
    left: 8%;
    z-index: 0;
    height: 150px;
    background: repeating-radial-gradient(circle at center, rgba(11, 58, 109, 0.11) 0 2px, transparent 2px 24px);
    opacity: 0.16;
    transform: perspective(560px) rotateX(74deg);
    transform-origin: center bottom;
    pointer-events: none;
}

.catalogue-stage-copy,
.catalogue-stage-badge {
    transition: opacity 260ms ease, transform 260ms ease;
}

.catalogue-stage-copy {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 3;
    display: grid;
    gap: 6px;
    max-width: 240px;
    padding: 14px 14px 12px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(4, 24, 56, 0.08);
    backdrop-filter: blur(12px);
}

.catalogue-stage-label {
    color: var(--gold-500);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.catalogue-stage-copy strong {
    color: var(--navy-900);
    font-size: 26px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.catalogue-stage-copy p {
    margin: 0;
    color: #5A7088;
    font-size: 12px;
    line-height: 1.45;
}

.catalogue-stage-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    max-width: 224px;
    padding: 13px 15px;
    color: var(--white);
    background: rgba(4, 24, 56, 0.84);
    border: 1px solid rgba(242, 226, 162, 0.26);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(4, 24, 56, 0.2);
}

.catalogue-stage-badge span {
    display: block;
    margin-bottom: 6px;
    color: var(--gold-100);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.catalogue-stage-badge strong {
    display: block;
    font-size: 15px;
    line-height: 1.28;
}

.catalogue-stage .catalogue-hero-image {
    top: 0px;
    width: min(82%, 620px);
    animation: catalogueContainerFloat 3.8s ease-in-out infinite;
}

.catalogue-stage.is-transitioning .catalogue-stage-copy,
.catalogue-stage.is-transitioning .catalogue-stage-badge {
    opacity: 0.12;
    transform: translateY(12px);
}

.catalogue-stage.is-transitioning .catalogue-hero-image {
    opacity: 0.42;
    animation: none;
    transform: translate3d(-50%, 8px, 0) scale(1.02);
}

@keyframes catalogueContainerFloat {
    0%,
    100% {
        transform: translate3d(-50%, 0, 0) scale(1.04);
    }

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

@keyframes cataloguePulse {
    0%,
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(245, 193, 22, 0.3);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 7px rgba(245, 193, 22, 0);
    }
}

.catalogue-rail-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.catalogue-arrow {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(11, 58, 109, 0.1);
    border-radius: 50%;
    box-shadow: 0 12px 28px rgba(4, 24, 56, 0.08);
    cursor: pointer;
    transition: transform var(--ease), color var(--ease), box-shadow var(--ease), border-color var(--ease);
}

.catalogue-arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.25;
}

.catalogue-arrow:hover,
.catalogue-arrow:focus-visible {
    color: var(--blue-700);
    border-color: rgba(212, 175, 55, 0.44);
    box-shadow: 0 16px 30px rgba(4, 24, 56, 0.12);
    transform: translateY(-2px);
}

.catalogue-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(118px, 1fr);
    gap: 14px;
    overflow-x: auto;
    padding: 8px 4px 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(11, 58, 109, 0.22) transparent;
}

.catalogue-rail::-webkit-scrollbar {
    height: 8px;
}

.catalogue-rail::-webkit-scrollbar-thumb {
    background: rgba(11, 58, 109, 0.2);
    border-radius: 999px;
}

.catalogue-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 104px;
    padding: 14px 12px;
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(11, 58, 109, 0.08);
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(4, 24, 56, 0.06);
    cursor: pointer;
    scroll-snap-align: center;
    transition: transform var(--ease), color var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.catalogue-card::after {
    position: absolute;
    right: 18px;
    bottom: 12px;
    left: 18px;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500));
    border-radius: 999px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    transition: opacity var(--ease), transform var(--ease);
}

.catalogue-card svg {
    width: 68px;
    height: 28px;
    fill: none;
    stroke: #234A75;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.3;
    transition: stroke var(--ease), transform var(--ease);
}

.catalogue-card-name {
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.catalogue-card:hover,
.catalogue-card:focus-visible,
.catalogue-card.active {
    color: var(--navy-900);
    background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFD 100%);
    border-color: rgba(212, 175, 55, 0.36);
    box-shadow: 0 22px 38px rgba(4, 24, 56, 0.1);
    transform: translateY(-5px);
}

.catalogue-card:hover svg,
.catalogue-card:focus-visible svg,
.catalogue-card.active svg {
    stroke: var(--navy-900);
    transform: translateY(-1px);
}

.catalogue-card.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.trust {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    color: var(--white);
    background:
        linear-gradient(115deg, #041838 0%, #082B56 42%, #1F3E4E 66%, #806B1D 100%);
    /* isolation: isolate; */
}

.trust::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        linear-gradient(90deg, rgba(242, 226, 162, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(242, 226, 162, 0.06) 1px, transparent 1px),
        linear-gradient(135deg, transparent 0 62%, rgba(242, 226, 162, 0.16) 62%, transparent 76%);
    background-size: 82px 82px, 82px 82px, auto;
    opacity: 0.86;
    animation: trustGridDrift 24s linear infinite;
    pointer-events: none;
}

.trust::after {
    position: absolute;
    right: -8%;
    bottom: 0;
    z-index: -1;
    width: 46%;
    height: 100%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.18));
    clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
    animation: trustBeamShift 14s ease-in-out infinite alternate;
    pointer-events: none;
}

.trust-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;
}

.trust h2,
.trust-copy p {
    color: var(--white);
}

.trust-copy .eyebrow {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 22px;
    padding: 8px 12px;
    /* color: var(--gold-100);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(242, 226, 162, 0.22); */
    border-radius: 4px;
}

.trust-copy > p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.76);
}

.trust-copy .text-link.light {
    margin-top: 18px;
    padding: 12px 16px;
    color: var(--gold-100);
    border: 1px solid rgba(242, 226, 162, 0.34);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
}

.trust-copy .text-link.light:hover {
    color: var(--navy-900);
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500), var(--gold-100));
}

.trust-panel {
    position: relative;
    display: grid;
    overflow: hidden;
    gap: 22px;
    padding: 26px;
    background: rgb(1 1 1 / 40%);
    border: 1px solid rgba(242, 226, 162, 0.22);
    border-radius: 10px;
    box-shadow: 0 30px 78px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(76px);
    isolation: isolate;
}

.trust-panel::before {
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    content: "";
    background: linear-gradient(90deg, var(--gold-700), var(--gold-500), var(--gold-100), transparent);
    background-size: 220% 100%;
    border-radius: 10px 10px 0 0;
    animation: trustAccentFlow 6.4s ease-in-out infinite;
}

.trust-panel::after {
    position: absolute;
    inset: 12% -10% -28% 48%;
    z-index: 0;
    content: "";
    background:
        radial-gradient(circle, rgba(245, 193, 22, 0.18) 0%, rgba(15, 94, 156, 0.14) 38%, transparent 72%);
    filter: blur(14px);
    opacity: 0.72;
    animation: trustHaloDrift 9.6s ease-in-out infinite;
    pointer-events: none;
}

.trust-panel.reveal.is-visible {
    animation: trustPanelFloat 8.6s ease-in-out infinite;
}

.trust-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    counter-reset: trustStats;
    position: relative;
    z-index: 1;
}

.trust-stats article {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    padding: 28px;
    color: var(--white);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07)),
        linear-gradient(135deg, rgba(4, 24, 56, 0.56), rgba(11, 58, 109, 0.28));
    background-size: 100% 100%, 180% 180%;
    background-position: 0 0, 0% 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(242, 226, 162, 0.06);
    counter-increment: trustStats;
    transition: transform var(--ease), border var(--ease), background var(--ease), box-shadow var(--ease);
}

.trust-panel.reveal.is-visible .trust-stats article {
    animation: trustCardGlow 8.4s ease-in-out infinite;
}

.trust-panel.reveal.is-visible .trust-stats article:nth-child(2) {
    animation-delay: -2s;
}

.trust-panel.reveal.is-visible .trust-stats article:nth-child(3) {
    animation-delay: -4.1s;
}

.trust-panel.reveal.is-visible .trust-stats article:nth-child(4) {
    animation-delay: -6.2s;
}

.trust-stats article::before {
    position: absolute;
    /* right: 24px;
    bottom: 18px;
    content: "0" counter(trustStats);
    color: rgba(255, 255, 255, 0.05);
    font-size: 50px;
    font-weight: 800; */
    line-height: 1;
    text-shadow: 0 0 24px rgba(245, 193, 22, 0.08);
    opacity: 0.42;
}

.trust-panel.reveal.is-visible .trust-stats article::before {
    animation: trustNumberPulse 8.4s ease-in-out infinite;
}

.trust-panel.reveal.is-visible .trust-stats article:nth-child(2)::before {
    animation-delay: -2s;
}

.trust-panel.reveal.is-visible .trust-stats article:nth-child(3)::before {
    animation-delay: -4.1s;
}

.trust-panel.reveal.is-visible .trust-stats article:nth-child(4)::before {
    animation-delay: -6.2s;
}

.trust-stats article::after {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--gold-500), var(--gold-100), transparent);
    background-size: 220% 100%;
}

.trust-panel.reveal.is-visible .trust-stats article::after {
    animation: trustTopLineSweep 5.6s ease-in-out infinite;
}

.trust-panel.reveal.is-visible .trust-stats article:nth-child(2)::after {
    animation-delay: -1.4s;
}

.trust-panel.reveal.is-visible .trust-stats article:nth-child(3)::after {
    animation-delay: -2.8s;
}

.trust-panel.reveal.is-visible .trust-stats article:nth-child(4)::after {
    animation-delay: -4.2s;
}

.trust-stats article:hover {
    transform: translateY(-3px);
    border-color: rgba(242, 226, 162, 0.4);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
        linear-gradient(135deg, rgba(4, 24, 56, 0.5), rgba(15, 94, 156, 0.28));
}

.trust-stats strong {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 8px;
    color: var(--gold-100);
    font-size: 24px;
    line-height: 1.12;
}

.trust-stats span {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
}

.cert-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.cert-list span {
    position: relative;
    min-height: 48px;
    padding: 13px 12px 13px 34px;
    color: var(--white);
    background: rgba(4, 24, 56, 0.58);
    border: 1px solid rgba(242, 226, 162, 0.28);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    display: flex;
    align-items: center;

}

.cert-list span::before {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 10px;
    height: 10px;
    content: "";
    background: var(--gold-500);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14);
    transform: translateY(-50%);
}

@keyframes trustGridDrift {
    from {
        background-position: 0 0, 0 0, 0 0;
    }

    to {
        background-position: 82px 0, 0 82px, 32px -18px;
    }
}

@keyframes trustBeamShift {
    0% {
        opacity: 0.42;
        transform: translateX(0) scaleX(0.96);
    }

    100% {
        opacity: 0.82;
        transform: translateX(24px) scaleX(1.06);
    }
}

@keyframes trustAccentFlow {
    0%,
    100% {
        background-position: 0% 50%;
        opacity: 0.84;
    }

    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

@keyframes trustHaloDrift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(0.94);
        opacity: 0.54;
    }

    50% {
        transform: translate3d(-18px, -12px, 0) scale(1.08);
        opacity: 0.88;
    }
}

@keyframes trustPanelFloat {
    0%,
    100% {
        transform: translateY(0);
        box-shadow: 0 30px 78px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }

    50% {
        transform: translateY(-6px);
        box-shadow: 0 38px 92px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    }
}

@keyframes trustCardGlow {
    0%,
    100% {
        background-position: 0 0, 0% 50%;
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: inset 0 0 0 1px rgba(242, 226, 162, 0.06);
    }

    50% {
        background-position: 0 0, 100% 50%;
        border-color: rgba(242, 226, 162, 0.28);
        box-shadow:
            inset 0 0 0 1px rgba(242, 226, 162, 0.08),
            0 18px 34px rgba(4, 24, 56, 0.18);
    }
}

@keyframes trustNumberPulse {
    0%,
    100% {
        opacity: 0.34;
        transform: translateY(0);
    }

    50% {
        opacity: 0.64;
        transform: translateY(-4px);
    }
}

@keyframes trustTopLineSweep {
    0%,
    100% {
        background-position: 0% 50%;
        opacity: 0.72;
    }

    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

.contact-strip {
    padding: 78px 0;
    background: var(--white);
}

.contact-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 42px;
    color: var(--white);
    background: linear-gradient(135deg, var(--navy-900), var(--blue-700));
    border-radius: 6px;
}

.contact-inner h2 {
    max-width: 760px;
    color: var(--white);
    font-size: 38px;
}

.contact-inner .eyebrow {
    margin-bottom: 8px;
}

.contact-inner > div > p:not(.eyebrow) {
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.76);
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    min-width: 330px;
}

.footer {
    position: relative;
    color: rgba(255, 255, 255, 0.68);
    background:
        radial-gradient(circle at 16% 0%, rgba(212, 175, 55, 0.12), transparent 26%),
        linear-gradient(135deg, #03132C, var(--navy-900) 58%, #062B52);
}

.footer::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}

.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(150px, 1fr)) minmax(265px, 1.05fr);
    gap: 36px;
    padding: 76px 0 46px;
}

.footer h3 {
    position: relative;
    margin: 0 0 22px;
    color: var(--white);
    font-family: var(--body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.footer h3::after {
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 10px;
    content: "";
    background: var(--gold-500);
}

.footer p {
    /* max-width: 330px; */
    margin: 22px 0 24px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 15px;
    line-height: 1.65;
}

.footer a,
.footer span {
    display: block;
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.35;
}

.footer a:hover {
    color: var(--gold-100);
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.social-links a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0;
    color: var(--gold-100);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(242, 226, 162, 0.22);
    border-radius: 50%;
    transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease);
}

.social-links a:hover {
    color: var(--navy-900);
    background: var(--gold-100);
    border-color: var(--gold-100);
    transform: translateY(-2px);
}

.social-links svg,
.footer-contact svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* .footer-contact {
    padding: 18px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(242, 226, 162, 0.18);
    border-radius: 8px;
} */

.footer-contact a,
.footer-contact > span {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 11px 0;
    color: rgba(255, 255, 255, 0.78);
}

/* .footer-contact a + a,
.footer-contact a + span {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
} */

.footer-contact svg {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 8px;
    color: var(--gold-100);
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(242, 226, 162, 0.18);
    border-radius: 50%;
}

.footer-contact span {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.footer-bottom {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0 32px;
    border-top: 1px solid rgba(242, 226, 162, 0.18);
}

.footer-bottom p,
.footer-bottom a {
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 13px;
}

.footer-bottom div {
    display: flex;
    gap: 20px;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 650ms ease, transform 650ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

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

    *,
    *::before,
    *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }

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

    .floating-container-image,
    .container-shadow,
    .site-header .brand,
    .site-header .brand::before,
    .site-header .brand::after,
    .logo-heander,
    .trade-route,
    .network-map .jvm-line,
    .vector-ambient-lanes path,
    .vector-hub-glow,
    .vector-hub-orbit,
    .vector-route-web path,
    .vector-route-sparks circle,
    .hub-orbit,
    .vector-route-motion,
    .vector-map-pin::after,
    .vision-orbit,
    .vision-flow,
    .vision-node,
    .location-halo,
    .hub-ring {
        animation: none !important;
    }

    .vector-cargo-pulses {
        display: none;
    }

    .trust::before,
    .trust::after,
    .trust-panel.reveal.is-visible,
    .trust-panel::before,
    .trust-panel::after,
    .trust-panel.reveal.is-visible .trust-stats article,
    .trust-panel.reveal.is-visible .trust-stats article::before,
    .trust-panel.reveal.is-visible .trust-stats article::after {
        animation: none !important;
    }

    .industries::before,
    .industries::after,
    .industry-card.reveal.is-visible::before {
        animation: none !important;
    }

    .about-process-track::after,
    .about-process-step.reveal.is-visible,
    .about-process-step.reveal.is-visible::before,
    .about-process-step span,
    .about-process-step:not(:last-child)::after,
    .about-process-icon,
    .about-process-icon::before,
    .about-process-step h3,
    .about-process-step p {
        animation: none !important;
        transform: none !important;
    }

    .industry-hero::before,
    .industry-hero::after,
    .industry-collage-slice img,
    .industry-hero-points svg,
    .industry-hero-points img,
    .industry-support-map img,
    .industry-support-cta::before {
        animation: none !important;
    }

    .industry-support-card:hover,
    .industry-support .button:hover {
        transform: none !important;
    }

    .site-header .brand:hover,
    .site-header .brand:focus-visible,
    .site-header .brand:hover .logo-heander,
    .site-header .brand:focus-visible .logo-heander {
        transform: none !important;
    }

    .industry-card,
    .industry-card:hover,
    .industry-card:focus-within,
    .industry-card:hover .industry-image,
    .industry-card:focus-within .industry-image,
    .industry-card:hover span,
    .industry-card:focus-within span,
    .industry-card:hover::after,
    .industry-card:focus-within::after {
        transform: none !important;
    }

    .service-grid .service-card,
    .service-grid .service-card:hover,
    .service-grid .service-card:focus-within,
    .service-grid .service-card.is-tilting,
    .service-grid .service-card:hover svg,
    .service-grid .service-card:focus-within svg,
    .service-grid .service-card.is-tilting svg,
    .service-grid .service-card:hover h3,
    .service-grid .service-card:focus-within h3,
    .service-grid .service-card.is-tilting h3,
    .service-grid .service-card:hover a,
    .service-grid .service-card:focus-within a,
    .service-grid .service-card.is-tilting a {
        transform: none !important;
    }

    .service-card::after {
        animation: none !important;
    }
}

@keyframes visionFlowMove {
    to {
        stroke-dashoffset: -72;
    }
}

@keyframes visionOrbitSpin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes visionNodeFloat {
    0%,
    100% {
        transform: translateY(0);
    }

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

/* Industries hero: a single full-bleed port scene with the industry system overlaid. */
.industries-page .industry-hero {
    height: min(760px, calc(100vh - 8px));
    min-height: 650px;
    padding: var(--industries-header-height) 0 0;
    background: #020F25;
}

.industries-page .industry-hero::before {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: none;
    opacity: 0.32;
}

.industries-page .industry-hero::after {
    display: none;
}

.industries-page .industry-hero-layout {
    grid-template-columns: minmax(390px, 0.42fr) minmax(0, 0.58fr);
    background: #020F25;
    border: 0;
    box-shadow: none;
}

.industries-page .industry-hero-copy {
    z-index: 3;
    padding: clamp(48px, 5.2vw, 88px) clamp(40px, 0vw, 78px) clamp(44px, 5vw, 78px);
    background: linear-gradient(90deg, #020F25 0%, #041838 76%, rgba(4, 24, 56, 0.84) 100%);
}

.industries-page .industry-hero-copy::before,
.industries-page .industry-hero-copy::after {
    display: none;
}

.industries-page .industry-hero .eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color: #F3C54C;
}
/* 
.industries-page .industry-hero .eyebrow::after {
    width: 68px;
    height: 1px;
    content: "";
    background: rgba(243, 197, 76, 0.62);
} */

.industries-page .industry-hero-copy h1 {
    /* max-width: 11.5ch; */
    margin-bottom: 22px;
    color: #FFFFFF;
    font-size: clamp(42px, 3.55vw, 62px);
    line-height: 0.98;
    letter-spacing: 0;
}

.industries-page .industry-hero-copy h1::after {
    display: none;
}

.industries-page .industry-hero-copy h1 span {
    color: #F3C54C;
}

.industries-page .industry-hero-copy p:not(.eyebrow) {
    max-width: 45ch;
    margin-bottom: 0;
    color: rgba(235, 242, 249, 0.84);
    font-size: 15.5px;
    line-height: 1.72;
}

.industries-page .industry-hero-actions {
    gap: 13px;
    margin-top: 30px;
}

.industries-page .industry-hero-actions .button {
    min-height: 52px;
    padding: 14px 20px;
}

.industries-page .industry-hero-actions .button-outline {
    color: #FFFFFF;
    border-color: rgba(243, 197, 76, 0.72);
    background: rgba(2, 15, 37, 0.42);
}

.industries-page .industry-hero-actions .button-outline:hover {
    color: #041838;
    background: #F3C54C;
    border-color: #F3C54C;
}

.industries-page .industry-hero-showcase {
    display: block;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #071E42;
}

.industries-page .industry-hero-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
}

.industries-page .industry-hero-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(90deg, rgba(2, 15, 37, 0.56), transparent 28%), linear-gradient(180deg, rgba(2, 15, 37, 0.06), rgba(2, 15, 37, 0.54));
}

.industries-page .industry-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
}

.industries-page .industry-world-network {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: min(86%, 900px);
    height: 49%;
    background: url("../images/worldmap.png") right top / contain no-repeat;
    opacity: 0.36;
    mix-blend-mode: screen;
    pointer-events: none;
}

.industries-page .industry-world-network::after {
    position: absolute;
    inset: 11% 5% auto 5%;
    height: 65%;
    content: "";
    background: repeating-radial-gradient(ellipse at 58% 100%, transparent 0 86px, rgba(243, 197, 76, 0.34) 87px 88px, transparent 89px 138px);
    opacity: 0.66;
    pointer-events: none;
}

.industries-page .industry-hero-points {
    position: absolute;
    right: clamp(24px, 4vw, 70px);
    bottom: clamp(4px, 1vw, 36px);
    left: clamp(24px, 3.2vw, 58px);
    z-index: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    background: none;
    box-shadow: none;
}

.industries-page .industry-hero-points::before,
.industries-page .industry-hero-points::after {
    display: none;
}

.industries-page .industry-hero-points article {
    display: grid;
    min-height: 122px;
    padding: 20px 14px 16px;
    justify-items: center;
    align-content: center;
    gap: 15px;
    background: linear-gradient(180deg, rgba(3, 21, 49, 0.80), rgba(3, 21, 49, 0.68));
    border: 1px solid rgba(243, 197, 76, 0.52);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
}

.industries-page .industry-hero-points article + article {
    border-left: 1px solid rgba(243, 197, 76, 0.52);
}

.industries-page .industry-hero-points article::before {
    opacity: 0.28;
}

.industries-page .industry-hero-points article::after {
    display: none;
}

.industries-page .industry-hero-points svg,
.industries-page .industry-hero-points img {
    width: 47px;
    height: 47px;
    stroke: #F3C54C;
}

.industries-page .industry-hero-points span {
    max-width: none;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
}

@media (max-width: 920px) {
    .industries-page .industry-hero {
        height: auto;
        min-height: 0;
        padding-top: var(--industries-header-height);
    }

    .industries-page .industry-hero-layout {
        grid-template-columns: 1fr;
    }

    .industries-page .industry-hero-copy {
        min-height: 500px;
    }

    .industries-page .industry-hero-showcase {
        min-height: 520px;
    }
}

@media (max-width: 640px) {
    .industries-page .industry-hero-copy {
        min-height: 0;
        padding: 52px 24px 42px;
    }

    .industries-page .industry-hero-copy h1 {
        font-size: 38px;
    }

    .industries-page .industry-hero-showcase {
        min-height: 610px;
    }

    .industries-page .industry-hero-points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        right: 16px;
        bottom: 18px;
        left: 16px;
    }

    .industries-page .industry-hero-points article {
        min-height: 114px;
        padding: 15px 10px;
    }

    .industries-page .industry-hero-points svg,
    .industries-page .industry-hero-points img {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 1180px) {
    .primary-nav {
        gap: 15px;
    }

    .nav-link {
        font-size: 11px;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-card {
        min-height: 400px;
    }

    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .catalogue-browser {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .catalogue-copy {
        max-width: 100%;
    }

    .catalogue-stage.container-showcase {
        min-height: 480px;
    }

    .catalogue-rail {
        grid-auto-columns: 144px;
    }

    .industry-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .industry-card {
        min-height: 286px;
    }
}

@media (max-width: 920px) {

    .menu-toggle {
        display: block;
    }

    .primary-nav {
        position: fixed;
        top: 82px;
        right: 0;
        left: 0;
        display: none;
        min-height: calc(100vh - 82px);
        padding: 26px 24px 46px;
        flex-direction: column;
        align-items: stretch;
        background: rgba(4, 24, 56, 0.98);
    }

    .primary-nav.open {
        display: flex;
    }

    .nav-link {
        padding: 14px 0;
        font-size: 14px;
    }

    .nav-link::after {
        bottom: 8px;
        width: 80px;
    }

    .nav-cta {
        width: 100%;
        margin-top: 10px;
    }

    .industries {
        padding-inline: 18px;
    }

    .industries .center-intro {
        margin-bottom: 34px;
    }

    .industries .center-intro h2 {
        max-width: 760px;
        font-size: clamp(34px, 5.6vw, 48px);
    }

    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 36px;
    }

    .hero {
        min-height: auto;
    }

    .hero-scene {
        right: -190px;
        width: 980px;
        opacity: 0.42;
    }

    .hero-inner {
        min-height: 780px;
        padding-bottom: 150px;
    }

    .services {
        background:
            linear-gradient(180deg, var(--navy-900) 0, var(--navy-900) 440px, var(--slate-50) 440px, var(--white) 100%);
    }

    .services::before {
        height: 440px;
    }

    .services .section-intro {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 22px;
        margin-bottom: 38px;
    }

    .services .section-intro .text-link {
        justify-self: start;
    }

    .hero-trust-tags {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .container-catalogue-section {
        padding: 64px 0 48px;
    }

    .catalogue-copy > p {
        font-size: 15px;
    }

    .catalogue-copy h2 {
        max-width: 12ch;
        font-size: clamp(32px, 5.4vw, 44px);
    }

    .catalogue-active-panel {
        padding: 17px 17px 15px;
    }

    .catalogue-active-count {
        min-width: 58px;
        min-height: 32px;
        padding: 5px 9px;
    }

    .catalogue-stage.container-showcase {
        min-height: 390px;
        border-radius: 22px;
    }

    .catalogue-stage.container-showcase::before {
        inset: 18px;
        border-radius: 16px;
    }

    .catalogue-stage-copy {
        top: 18px;
        left: 18px;
        max-width: 220px;
        padding: 13px 13px 11px;
    }

    .catalogue-stage-copy strong {
        font-size: 24px;
    }

    .catalogue-stage-badge {
        right: 18px;
        bottom: 18px;
        max-width: 214px;
        padding: 12px 14px;
    }

    .catalogue-stage .catalogue-hero-image {
        top: 52px;
        width: min(84%, 520px);
    }

    .catalogue-rail-shell {
        gap: 10px;
        margin-top: 16px;
    }

    .catalogue-rail {
        grid-auto-columns: 128px;
    }

    .stats-band {
        padding: 24px 0 50px;
    }

    .stats-shell {
        padding: 16px;
        border-radius: 24px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .stat-item {
        min-height: 150px;
        padding: 20px 18px 18px;
    }

    .stat-item:last-child {
        grid-column: 1 / -1;
    }

    .stat-item::after {
        right: 18px;
        bottom: 14px;
        left: 86px;
    }

    .stat-top {
        gap: 14px;
    }

    .stat-icon {
        width: 54px;
        height: 54px;
    }

    .stat-icon::before {
        inset: 6px;
        border-radius: 13px;
    }

    .stat-label {
        font-size: 13px;
    }

    .stat-item strong {
        font-size: 42px;
    }

    .split-layout,
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .presence .split-layout {
        grid-template-columns: 1fr;
    }

    .about-company {
        padding: 78px 0;
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: 28px;
        /* padding: 22px; */
    }

    .about-content {
        max-width: 720px;
        padding: 0;
    }

    .about-media {
        min-height: 360px;
    }

    .trust {
        padding: 86px 0;
    }

    .trust-panel {
        padding: 22px;
    }

    .cert-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .presence-metrics {
        max-width: 100%;
    }

    .map-panel {
        min-height: 430px;
    }

    .map-legend {
        top: 14px;
        right: 14px;
        gap: 6px;
        padding: 8px 10px;
    }

    .container-showcase {
        min-height: 430px;
    }

    .vision-visual {
        min-height: auto;
        padding: 0;
    }

    .vision-image {
        min-height: 420px;
    }

    .vision-node {
        width: auto;
    }

    .vision-core-card,
    .vision-stats-row {
        grid-column: 1 / -1;
    }

    .vision-node-top,
    .vision-node-right {
        grid-column: span 1;
    }

    .vision-node-bottom {
        grid-column: 1 / -1;
    }

    .floating-container-image {
        top: 44px;
        width: min(88%, 580px);
    }

    .container-shadow-svg {
        bottom: 8px;
        width: min(70%, 480px);
    }

    .section {
        padding: 78px 0;
    }

    .industry-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .industry-card {
        min-height: 250px;
        padding: 16px;
    }

    .industry-card span {
        min-height: 96px;
        padding: 16px;
        font-size: clamp(17px, 2.3vw, 22px);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 26px;
    }

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

    .footer-contact {
        max-width: 360px;
    }
}

@media (max-width: 640px) {
    .header-inner {
        min-height: 72px;
    }

    .container {
        width: min(100% - 32px, 1280px);
    }

    .site-header {
        padding-top: max(8px, env(safe-area-inset-top));
    }

    .brand-mark {
        width: 36px;
        height: 36px;
        font-size: 24px;
    }

    .brand-name {
        font-size: 14px;
    }

    .brand-subtitle {
        font-size: 9px;
    }

    .primary-nav {
        top: 72px;
        min-height: calc(100vh - 72px);
    }

    h1 {
        font-size: 36px;
    }

    h2,
    .contact-inner h2 {
        font-size: 30px;
    }

    .hero-inner {
        min-height: auto;
        padding-top: 88px;
        padding-bottom: 100px;
    }

    .hero-copy .eyebrow {
        margin-bottom: 16px;
        font-size: 11px;
        letter-spacing: 0.14em;
    }

    .hero-copy h1 {
        font-size: clamp(32px, 9vw, 40px);
        line-height: 1.08;
    }

    .hero-lead {
        margin: 18px 0 26px;
        font-size: 15px;
        line-height: 1.65;
    }

    .hero-trust-tags span {
        min-height: 64px;
        padding: 12px;
        font-size: 11px;
    }

    .hero-trust-tags strong {
        font-size: 11px;
    }

    .hero-actions,
    .contact-inner {
        align-items: stretch;
        flex-direction: column;
    }

    .button,
    .film-link {
        width: 100%;
    }

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

    .container-catalogue-section {
        padding: 52px 0 38px;
    }

    .catalogue-browser {
        gap: 22px;
    }

    .catalogue-active-panel {
        padding: 16px;
        border-radius: 18px;
    }

    .catalogue-active-panel strong {
        font-size: 22px;
    }

    .catalogue-active-head {
        gap: 10px;
    }

    .catalogue-active-count {
        min-width: 54px;
        min-height: 30px;
        font-size: 10px;
    }

    .catalogue-active-meta {
        font-size: 11px;
    }

    .catalogue-stage.container-showcase {
        min-height: 330px;
        border-radius: 26px;
    }

    .catalogue-stage.container-showcase::before {
        inset: 12px;
        border-radius: 14px;
    }

    .catalogue-stage.container-showcase::after {
        right: 10%;
        bottom: 68px;
        left: 10%;
    }

    .catalogue-floor-rings {
        right: 5%;
        bottom: 18px;
        left: 5%;
        height: 100px;
    }

    .catalogue-stage-copy {
        display: none;
    }

    .catalogue-stage-badge {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
        padding: 12px 14px;
    }

    .catalogue-stage-badge strong {
        font-size: 14px;
    }

    .catalogue-stage .catalogue-hero-image {
        top: 24px;
        width: min(88%, 360px);
    }

    .catalogue-rail-shell {
        gap: 8px;
        margin-top: 14px;
    }

    .catalogue-arrow {
        width: 40px;
        height: 40px;
    }

    .catalogue-rail {
        grid-auto-columns: 122px;
        gap: 10px;
    }

    .catalogue-card {
        min-height: 104px;
        padding: 14px 12px;
        border-radius: 16px;
    }

    .catalogue-card svg {
        width: 66px;
        height: 28px;
    }

    .catalogue-card-name {
        font-size: 11px;
    }

    .about-company {
        padding: 64px 0;
    }

    .about-content h2 {
        font-size: 28px;
    }
.services .section-intro p {
    color: rgba(255, 255, 255, 0.74);
    margin: 0px;
}
    .about-media {
        min-height: 320px;
    }

    .about-media-badge {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
        padding: 14px;
    }

    .services {
        background:
            linear-gradient(180deg, var(--navy-900) 0, var(--navy-900) 500px, var(--slate-50) 500px, var(--white) 100%);
    }

    .services::before {
        height: 500px;
    }

    .services .section-intro h2 {
        font-size: 32px;
    }

    .services .section-intro .text-link {
        width: fit-content;
    }

    .contact-actions {
        justify-content: flex-start;
        min-width: 0;
        width: 100%;
    }

    .stats-band {
        padding: 20px 0 36px;
    }

    .stats-shell {
        padding: 12px;
        border-radius: 20px;
    }

    .stats-grid {
        gap: 10px;
    }

    .stats-grid,
    .service-grid,
    .industry-track,
    .trust-stats,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .trust {
        padding: 72px 0;
    }

    .trust-panel {
        padding: 18px;
    }

    .trust-stats article {
        min-height: 132px;
        padding: 24px;
    }

    .trust-stats strong {
        font-size: 24px;
    }

    .cert-list {
        grid-template-columns: 1fr;
    }

    .stat-item,
    .stat-item:nth-child(2n) {
        min-height: 0;
        padding: 18px 14px 16px;
        border-right: 0;
    }

    .stat-item::after {
        right: 14px;
        bottom: 12px;
        left: 76px;
    }

    .stat-top {
        gap: 12px;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    .stat-icon::before {
        inset: 6px;
        border-radius: 10px;
    }

    .stat-item strong {
        font-size: 36px;
    }

    .stat-label {
        font-size: 12px;
        letter-spacing: 0.01em;
        line-height: 1.35;
    }

    .stat-item:last-child {
        grid-column: auto;
    }

    .map-panel,
    .container-showcase {
        min-height: 380px;
    }

    .network-map-wrap {
        inset: 0;
    }

    .map-legend {
        top: 10px;
        left: auto;
        right: 10px;
        max-width: calc(100% - 20px);
    }

    .map-status-card {
        right: 12px;
        bottom: 12px;
        left: 12px;
        max-width: none;
        padding: 12px 14px;
    }

    .map-status-card strong {
        font-size: 13px;
    }

    .vector-route {
        stroke-width: 2;
    }

    .vector-route-glow {
        stroke-width: 5;
    }

    .vector-route-web path {
        stroke-width: 1.35;
    }

    .vector-route-web-track path {
        stroke-width: 3.2;
    }

    .vector-port-labels .port-name,
    .vector-port-labels .hub-name {
        font-size: 9.5px;
    }

    .vector-port-labels .port-country,
    .vector-port-labels .hub-country {
        font-size: 7.8px;
    }

    .vector-map-pin {
        width: 22px;
        height: 22px;
    }

    .vector-map-pin::before {
        display: none;
    }

    .vector-pin-hub {
        width: 28px;
        height: 28px;
    }

    .vector-pin-hub::before {
        display: none;
    }

    .vector-map-tooltip {
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        transform: translateY(8px);
    }

    .vector-map-tooltip.is-visible {
        transform: translateY(0);
    }

    .container-showcase {
        min-height: 320px;
    }

    .vision-visual {
        min-height: auto;
        gap: 0;
        padding: 0;
    }

    .vision-visual::after {
        display: none;
    }

    .vision-image {
        min-height: 280px;
        border-radius: 18px;
    }

    .vision-orbit,
    .vision-flow-lines {
        opacity: 0.5;
    }

    .vision-core-card,
    .vision-node,
    .vision-stats-row {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        max-width: none;
        transform: none;
    }

    .vision-core-card {
        grid-column: 1;
        min-height: auto;
        margin-bottom: 14px;
        padding: 22px;
    }

    .vision-core-card strong {
        font-size: 26px;
    }

    .vision-node {
        grid-column: 1;
        min-height: auto;
        margin-top: 10px;
        animation: none;
    }

    .vision-stats-row {
        grid-template-columns: 1fr;
        margin-top: 14px;
    }

    .floating-container-image {
        top: 54px;
        width: min(92%, 420px);
    }

    .container-shadow-svg {
        bottom: 28px;
        width: min(78%, 360px);
    }

    .industry-track {
        grid-template-columns: 1fr;
    }

    .industry-card {
        min-height: 220px;
        border-radius: 22px;
    }

    .industry-card span {
        min-height: 0;
        font-size: 20px;
    }

    .contact-inner {
        padding: 28px;
    }

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

    .footer {
        text-align: left;
    }

    .footer-grid {
        gap: 30px;
        padding-top: 58px;
    }

    .footer-contact {
        max-width: none;
    }

    .social-links a {
        width: 40px;
        height: 40px;
    }
}

/* Final cascade lock: premium process workflow. */
body.about-page #process.about-process {
    padding: 96px 0 104px;
    background:
        radial-gradient(circle at 50% -10%, rgba(35, 111, 168, 0.34), transparent 38%),
        radial-gradient(circle at 8% 92%, rgba(211, 166, 47, 0.12), transparent 30%),
        linear-gradient(135deg, #03142E 0%, #061F40 52%, #082B50 100%);
}

body.about-page #process::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: 1;
}

@media (max-width: 640px) {
    .footer-bottom {
        justify-content: flex-start;
        gap: 14px; 
    }

    .footer-bottom div {
        gap: 10px; 
    }
}

/* =========================================================
   Solutions page
   ========================================================= */

.solutions-page {
    --solutions-bg: #031321;
    --solutions-panel: #061a2b;
    --solutions-panel-light: #0a2134;
    --solutions-line: rgba(137, 171, 194, 0.2);
    --solutions-copy: #aebdcc;
    --solutions-teal: #39cbb8;
    --solutions-teal-soft: rgba(57, 203, 184, 0.15);
    --solutions-amber: #f3aa36;
    --solutions-amber-soft: rgba(243, 170, 54, 0.14);
    color: #f6f8fa;
    background: var(--solutions-bg);
}

.solutions-page .site-header {
    padding-top: 6px;
    background: rgba(2, 15, 27, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
}

.solutions-page .site-header.scrolled,
.solutions-page .site-header.menu-active {
    background: rgba(2, 15, 27, 0.98);
}

.solutions-page .header-inner {
    min-height: 76px;
}

/*.solutions-page .primary-nav {*/
/*    gap: clamp(18px, 3vw, 48px);*/
/*}*/

/*.solutions-page .nav-link {*/
/*    padding-block: 18px;*/
/*    font-size: 16px;*/
/*    text-transform: none;*/
/*}*/

.solutions-page .nav-link::after {
    bottom: 13px;
    background: var(--solutions-amber);
}

.solutions-page .button {
    gap: 10px;
    min-height: 48px;
    padding: 13px 21px;
    border-radius: 6px;
    letter-spacing: 0.015em;
    text-transform: none;
}

.solutions-page .button-gold {
    color: #071522;
    background: linear-gradient(135deg, #f2a631 0%, #ffd06b 52%, #e99b27 100%);
    box-shadow: 0 12px 30px rgba(243, 170, 54, 0.2);
}

.solutions-page .button-outline {
    color: #f6f8fa;
    border-color: rgba(177, 199, 215, 0.42);
    background: rgba(5, 22, 36, 0.48);
}

.solutions-page .solutions-kicker {
    margin: 0 0 12px;
    color: var(--solutions-teal);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.solutions-hero {
    position: relative;
    min-height: 820px;
    overflow: hidden;
    padding: 138px 0 88px;
    background:
        radial-gradient(circle at 79% 35%, rgba(31, 113, 130, 0.19), transparent 31%),
        radial-gradient(circle at 36% 76%, rgba(32, 84, 140, 0.11), transparent 28%),
        linear-gradient(135deg, #020f1b 0%, #031522 48%, #041a29 100%);
    border-bottom: 1px solid rgba(115, 154, 178, 0.16);
}

.solutions-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent 82%);
}

.solutions-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(610px, 1.38fr);
    gap: clamp(38px, 6vw, 84px);
    align-items: center;
}

.solutions-hero-copy {
    padding-top: 12px;
}

.solutions-hero-copy h1 {
    max-width: 590px;
    margin: 0;
    color: #f7f8f9;
    font-family: var(--body);
    font-size: clamp(46px, 5vw, 70px);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 1.03;
}

.solutions-hero-copy h1 span {
    display: inline-block;
    margin-top: 8px;
    color: var(--solutions-amber);
}

.solutions-hero-lead {
    max-width: 530px;
    margin: 25px 0 0;
    color: var(--solutions-copy);
    font-size: 16px;
    line-height: 1.8;
}

.solutions-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.solutions-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 30px;
    color: #8fa5b7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.solutions-hero-proof span {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.solutions-hero-proof i {
    color: var(--solutions-teal);
}

.solution-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

.solution-card {
    --solution-accent: #4e8ef7;
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 430px;
    padding: 0;
    overflow: hidden;
    color: #f5f7f9;
    text-align: left;
    background: #07192a;
    border: 1px solid rgba(119, 155, 183, 0.28);
    border-radius: 14px;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24);
    cursor: pointer;
    isolation: isolate;
    transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.solution-card::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(2, 13, 24, 0.02) 32%, rgba(3, 15, 27, 0.44) 60%, rgba(3, 15, 27, 0.98) 100%);
}

.solution-card:hover,
.solution-card:focus-visible {
    border-color: color-mix(in srgb, var(--solution-accent) 76%, white);
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.34), 0 0 26px color-mix(in srgb, var(--solution-accent) 22%, transparent);
    transform: translateY(-8px);
}

.solution-card.is-active {
    min-height: 484px;
    border-color: var(--solution-accent);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.38), 0 0 34px color-mix(in srgb, var(--solution-accent) 27%, transparent);
    transform: translateY(-12px);
}

.solution-card-leasing {
    --solution-accent: #4d86ff;
}

.solution-card-trading {
    --solution-accent: var(--solutions-teal);
}

.solution-card-own {
    --solution-accent: var(--solutions-amber);
}

.solution-card-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    display: grid;
    width: 50px;
    height: 50px;
    color: var(--solution-accent);
    background: color-mix(in srgb, var(--solution-accent) 15%, #061525);
    border: 1px solid color-mix(in srgb, var(--solution-accent) 72%, transparent);
    border-radius: 50%;
    place-items: center;
    box-shadow: 0 0 20px color-mix(in srgb, var(--solution-accent) 24%, transparent);
}

.solution-card-title {
    position: absolute;
    top: 82px;
    left: 20px;
    z-index: 3;
    max-width: calc(100% - 40px);
    color: #f8fafb;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-transform: uppercase;
}

.solution-card-image {
    position: absolute;
    inset: 0;
}

.solution-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1), filter 300ms ease;
}

.solution-card:hover .solution-card-image img,
.solution-card:focus-visible .solution-card-image img,
.solution-card.is-active .solution-card-image img {
    transform: scale(1.055);
}

.solution-card-copy {
    position: absolute;
    right: 60px;
    bottom: 18px;
    left: 18px;
    z-index: 3;
    color: #cad5de;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.55;
}

.solution-card-arrow {
    position: absolute;
    right: 16px;
    bottom: 18px;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    color: #f4f7f9;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 50%;
    place-items: center;
    transition: color 220ms ease, background 220ms ease, border-color 220ms ease;
}

.solution-card:hover .solution-card-arrow,
.solution-card.is-active .solution-card-arrow {
    color: #04131f;
    background: var(--solution-accent);
    border-color: var(--solution-accent);
}

.solution-card-badge {
    position: absolute;
    top: 22px;
    right: 16px;
    z-index: 3;
    padding: 5px 8px;
    color: #091521;
    background: var(--solutions-amber);
    border-radius: 4px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.solutions-scroll-cue {
    position: absolute;
    bottom: 26px;
    left: 50%;
    z-index: 2;
    display: flex;
    gap: 9px;
    align-items: center;
    color: #8096a8;
    font-size: 11px;
    transform: translateX(-50%);
}

.solutions-scroll-cue i {
    color: var(--solutions-amber);
}

.solution-explorer {
    padding: 78px 0 92px;
    background:
        radial-gradient(circle at 87% 10%, rgba(39, 177, 162, 0.08), transparent 26%),
        var(--solutions-bg);
}

.featured-solution {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
    min-height: 520px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(8, 31, 49, 0.98), rgba(4, 20, 33, 0.98));
    border: 1px solid rgba(57, 203, 184, 0.52);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
    transition: border-color 260ms ease, box-shadow 260ms ease;
}

.featured-solution[data-active-solution="leasing"] {
    border-color: rgba(77, 134, 255, 0.56);
}

.featured-solution[data-active-solution="lease-to-own"] {
    border-color: rgba(243, 170, 54, 0.65);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.24), 0 0 38px rgba(243, 170, 54, 0.08);
}

.featured-solution-media {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background: #081826;
}

.featured-solution-media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(to top, rgba(3, 16, 28, 0.72), transparent 52%);
    pointer-events: none;
}

.featured-solution-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 300ms ease, transform 750ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.featured-solution:hover .featured-solution-media img {
    transform: scale(1.025);
}

.featured-media-tag {
    position: absolute;
    right: 24px;
    bottom: 22px;
    left: 24px;
    z-index: 2;
    display: inline-flex;
    width: fit-content;
    gap: 9px;
    align-items: center;
    padding: 9px 13px;
    color: #d9e5eb;
    background: rgba(2, 15, 27, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    backdrop-filter: blur(8px);
    font-size: 11px;
    font-weight: 600;
}

.featured-media-tag i {
    color: var(--solutions-amber);
}

.featured-solution-content {
    display: flex;
    min-width: 0;
    padding: clamp(30px, 4vw, 52px);
    flex-direction: column;
}

.featured-solution-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}

.featured-solution-heading h2 {
    max-width: 650px;
    margin: 0;
    color: #f7f8f9;
    font-family: var(--display);
    font-size: clamp(32px, 3vw, 46px);
    line-height: 1.16;
}

.featured-number {
    color: rgba(255, 255, 255, 0.13);
    font-family: var(--display);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
}

.featured-overview {
    max-width: 770px;
    margin: 18px 0 0;
    color: #bac8d2;
    font-size: 14px;
    line-height: 1.76;
}

.featured-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 28px;
    border-block: 1px solid var(--solutions-line);
}

.featured-value-grid article {
    min-width: 0;
    padding: 25px 22px 25px 0;
}

.featured-value-grid article + article {
    padding-left: 22px;
    border-left: 1px solid var(--solutions-line);
}

.featured-value-grid article > span {
    display: grid;
    width: 35px;
    height: 35px;
    color: var(--solutions-teal);
    background: var(--solutions-teal-soft);
    border: 1px solid rgba(57, 203, 184, 0.34);
    border-radius: 6px;
    place-items: center;
}

.featured-value-grid h3 {
    margin: 12px 0 7px;
    color: #f2f5f7;
    font-size: 12px;
    font-weight: 800;
}

.featured-value-grid p {
    margin: 0;
    color: #91a4b4;
    font-size: 11px;
    line-height: 1.58;
}

.featured-bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    margin-top: auto;
    padding-top: 26px;
}

.featured-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
}

.featured-benefits span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: #b8c7d1;
    font-size: 10px;
    font-weight: 600;
}

.featured-benefits i {
    color: var(--solutions-teal);
}

.solutions-page .featured-cta {
    color: #04141f;
    background: var(--solutions-teal);
    /* box-shadow: 0 14px 30px rgba(57, 203, 184, 0.16); */
}

.solution-comparison {
    padding: 92px 0;
    background: #041624;
    border-block: 1px solid rgba(118, 154, 177, 0.13);
}

.solutions-section-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.solutions-section-heading h2 {
    margin: 0;
    color: #f5f7f9;
    font-family: var(--display);
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.16;
}

.solutions-section-heading > p:last-child {
    max-width: 620px;
    margin: 15px auto 0;
    color: #9cafbd;
    font-size: 14px;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.comparison-card {
    --comparison-accent: #4d86ff;
    position: relative;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    color: #dbe4ea;
    text-align: left;
    background: rgba(5, 22, 36, 0.86);
    border: 1px solid rgba(125, 158, 181, 0.23);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 260ms ease, box-shadow 260ms ease, transform 260ms ease, background 260ms ease;
}

.comparison-card:nth-child(2) {
    --comparison-accent: var(--solutions-teal);
}

.comparison-card:nth-child(3) {
    --comparison-accent: var(--solutions-amber);
}

.comparison-card:hover,
.comparison-card:focus-visible,
.comparison-card.is-active {
    border-color: var(--comparison-accent);
    background: color-mix(in srgb, var(--comparison-accent) 5%, #061927);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.24), 0 0 28px color-mix(in srgb, var(--comparison-accent) 12%, transparent);
    transform: translateY(-5px);
}

.comparison-card-head {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 112px;
    padding: 24px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--comparison-accent) 9%, transparent), transparent);
    border-bottom: 1px solid var(--solutions-line);
}

.comparison-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    color: var(--comparison-accent);
    background: color-mix(in srgb, var(--comparison-accent) 14%, #061727);
    border: 1px solid color-mix(in srgb, var(--comparison-accent) 46%, transparent);
    border-radius: 50%;
    place-items: center;
}

.comparison-card-head small,
.comparison-card-head strong {
    display: block;
}

.comparison-card-head small {
    margin-bottom: 4px;
    color: #72899b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.comparison-card-head strong {
    color: #f3f6f8;
    font-size: 15px;
}

.comparison-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 18px;
    min-height: 84px;
    align-content: center;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(119, 154, 177, 0.13);
}

.comparison-row > span:first-child {
    color: #8ba0b0;
    font-size: 11px;
}

.comparison-row > strong {
    color: #e8eef2;
    font-size: 11px;
}

.comparison-row > strong i {
    margin-right: 5px;
    color: var(--comparison-accent);
}

.comparison-meter {
    position: relative;
    grid-column: 1 / -1;
    display: block;
    height: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
}

.comparison-meter i {
    display: block;
    height: 100%;
    background: var(--comparison-accent);
    border-radius: inherit;
    box-shadow: 0 0 12px color-mix(in srgb, var(--comparison-accent) 45%, transparent);
}

.comparison-best {
    display: block;
    min-height: 67px;
    padding: 18px 24px;
    color: var(--comparison-accent);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
}

.comparison-recommended {
    position: absolute;
    top: 0;
    right: 22px;
    z-index: 2;
    padding: 5px 10px;
    color: #08131c;
    background: var(--solutions-amber);
    border-radius: 0 0 5px 5px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.solution-finder {
    padding: 92px 0;
    background:
        radial-gradient(circle at 86% 50%, rgba(57, 203, 184, 0.09), transparent 24%),
        var(--solutions-bg);
}

.finder-shell {
    display: grid;
    grid-template-columns: minmax(240px, 0.75fr) minmax(580px, 1.75fr) minmax(230px, 0.75fr);
    gap: 28px;
    align-items: stretch;
    padding: 30px;
    background: linear-gradient(135deg, rgba(8, 31, 49, 0.96), rgba(5, 22, 36, 0.96));
    border: 1px solid rgba(126, 160, 183, 0.24);
    border-radius: 14px;
}

.finder-intro {
    padding: 7px 10px 7px 4px;
}

.finder-intro h2 {
    margin: 0;
    color: #f4f7f8;
    font-family: var(--display);
    font-size: clamp(27px, 2.4vw, 36px);
    line-height: 1.18;
}

.finder-intro > p:not(.solutions-kicker) {
    margin: 15px 0 0;
    color: #91a5b4;
    font-size: 12px;
    line-height: 1.65;
}

.finder-progress {
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.finder-progress span {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    color: #7990a1;
    border: 1px solid rgba(145, 176, 197, 0.32);
    border-radius: 50%;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
}

.finder-progress span.is-complete {
    color: var(--navy-900);
    background: var(--gold-500);
    border-color: var(--gold-500);
}

.finder-progress i {
    width: 28px;
    height: 1px;
    background: rgba(145, 176, 197, 0.24);
}

.finder-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.finder-question {
    min-width: 0;
    margin: 0;
    padding: 19px 16px 16px;
    border: 1px solid rgba(130, 162, 184, 0.22);
    border-radius: 10px;
}

.finder-question legend {
    width: 100%;
    padding: 0;
    color: #ecf1f4;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.finder-question legend span {
    display: block;
    margin-bottom: 5px;
    color: var(--solutions-teal);
    font-size: 9px;
    letter-spacing: 0.1em;
}

.finder-options {
    display: grid;
    gap: 8px;
    margin-top: 15px;
}

.finder-options label {
    display: block;
    cursor: pointer;
}

.finder-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.finder-options label > span {
    display: flex;
    min-height: 47px;
    gap: 8px;
    align-items: center;
    padding: 10px;
    color: #8399a9;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(128, 160, 183, 0.16);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.finder-options label > span i {
    width: 17px;
    color: #728a9c;
    text-align: center;
}

.finder-options input:checked + span {
    color: #e9f6f4;
    background: var(--solutions-teal-soft);
    border-color: rgba(57, 203, 184, 0.56);
}

.finder-options input:checked + span i {
    color: var(--solutions-teal);
}

.finder-options input:focus-visible + span {
    outline: 3px solid var(--solutions-amber);
    outline-offset: 2px;
}

.finder-result {
    position: relative;
    display: flex;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(150deg, rgba(57, 203, 184, 0.12), rgba(243, 170, 54, 0.08));
    border: 1px solid rgba(57, 203, 184, 0.52);
    border-radius: 10px;
}

.finder-result-icon {
    display: grid;
    width: 50px;
    height: 50px;
    color: var(--solutions-amber);
    background: rgba(243, 170, 54, 0.12);
    border: 1px solid rgba(243, 170, 54, 0.44);
    border-radius: 50%;
    place-items: center;
    box-shadow: 0 0 24px rgba(243, 170, 54, 0.14);
}

.finder-result > p {
    margin: 20px 0 7px;
    color: var(--solutions-teal);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.finder-result h3 {
    margin: 0;
    color: #f5f7f9;
    font-family: var(--display);
    font-size: 27px;
    line-height: 1.2;
}

.finder-result > span:not(.finder-result-icon) {
    margin-top: 10px;
    color: #8fa4b3;
    font-size: 10px;
    line-height: 1.55;
}

.finder-result-link {
    display: flex;
    width: 100%;
    min-height: 44px;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding: 10px 13px;
    color: #e9eff2;
    background: transparent;
    border: 1px solid rgba(186, 207, 220, 0.34);
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.finder-result-link:hover {
    color: #04141f;
    background: var(--solutions-teal);
    border-color: var(--solutions-teal);
}

.solutions-final-cta {
    padding: 70px 0 70px;
    background: var(--solutions-bg);
}

.solutions-final-cta-inner {
    position: relative;
    display: flex;
    min-height: 270px;
    gap: 42px;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(36px, 5vw, 66px);
    background:
        linear-gradient(90deg, rgba(3, 18, 31, 0.97) 0%, rgba(3, 18, 31, 0.9) 50%, rgba(3, 18, 31, 0.65) 100%),
        url("../images/solution-trading.png") center 55% / cover no-repeat;
    border: 1px solid rgba(243, 170, 54, 0.38);
    border-radius: 14px;
}

.solutions-final-cta-inner::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--solutions-amber), transparent);
}

.solutions-final-cta-inner > div {
    position: relative;
    z-index: 1;
}

.solutions-final-cta-inner h2 {
    max-width: 700px;
    margin: 0;
    color: #f7f8f9;
    font-family: var(--display);
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.15;
}

.solutions-final-cta-inner p:not(.solutions-kicker) {
    max-width: 720px;
    margin: 15px 0 0;
    color: #a8b8c4;
    font-size: 14px;
}

.solutions-final-actions {
    display: grid;
    min-width: 238px;
    gap: 11px;
}

@media (max-width: 1180px) {
    .solutions-hero-layout {
        grid-template-columns: 0.78fr 1.22fr;
        gap: 36px;
    }

    .solution-selector {
        gap: 10px;
    }

    .solution-card {
        min-height: 390px;
    }

    .solution-card.is-active {
        min-height: 438px;
    }

    .solution-card-title {
        font-size: 13px;
    }

    .featured-solution {
        grid-template-columns: minmax(320px, 0.78fr) minmax(500px, 1.22fr);
    }

    .featured-value-grid p {
        font-size: 10px;
    }

    .featured-bottom {
        grid-template-columns: 1fr;
    }

    .featured-cta {
        width: fit-content;
    }

    .finder-shell {
        grid-template-columns: 0.8fr 2fr;
    }

    .finder-result {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto 0.4fr 1fr auto;
        gap: 16px;
        align-items: center;
    }

    .finder-result > p,
    .finder-result h3,
    .finder-result > span:not(.finder-result-icon),
    .finder-result-link {
        margin: 0;
    }

    .finder-result-link {
        width: 190px;
    }
}

@media (max-width: 920px) {
    .solutions-page .primary-nav {
        top: 76px;
        min-height: calc(100vh - 76px);
    }

    .solutions-hero {
        min-height: auto;
        padding: 130px 0 90px;
    }

    .solutions-hero-layout {
        grid-template-columns: 1fr;
    }

    .solutions-hero-copy {
        max-width: 700px;
        text-align: center;
        justify-self: center;
    }

    .solutions-hero-lead {
        margin-inline: auto;
    }

    .solutions-hero-actions,
    .solutions-hero-proof {
        justify-content: center;
    }

    .solution-selector {
        max-width: 760px;
        justify-self: center;
    }

    .solution-card {
        min-height: 420px;
    }

    .solution-card.is-active {
        min-height: 454px;
    }

    .solutions-scroll-cue {
        bottom: 22px;
    }

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

    .featured-solution-media {
        min-height: 460px;
    }

    .featured-solution-content {
        min-height: 500px;
    }

    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .comparison-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .comparison-card-head,
    .comparison-best {
        grid-column: 1 / -1;
    }

    .comparison-row:nth-of-type(odd) {
        border-right: 1px solid rgba(119, 154, 177, 0.13);
    }

    .finder-shell {
        grid-template-columns: 1fr;
    }

    .finder-form {
        grid-template-columns: repeat(3, 1fr);
    }

    .finder-result {
        grid-column: auto;
    }

    .solutions-final-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .solutions-final-actions {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    body.about-page #process.about-process {
        padding: 52px 0 60px;
    }

    body.about-page #process .about-section-heading {
        margin-bottom: 28px;
        padding-inline: 16px;
    }

    body.about-page #process .about-section-heading h2 {
        max-width: 100%;
        font-size: clamp(28px, 8vw, 34px);
        line-height: 1.08;
    }

    body.about-page #process .process-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-height: 196px;
        margin: 0;
        padding: 0 12px 10px;
        overflow: hidden;
        box-sizing: border-box;
    }

    body.about-page #process .process-timeline-step .about-process-icon,
    body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
        width: 54px;
        height: 54px;
    }

    body.about-page #process .process-timeline-step::after {
        display: none;
    }

    body.about-page #process .timeline-step-meta {
        margin-top: 9px;
        font-size: 9px;
        letter-spacing: 0.08em;
    }

    body.about-page #process .process-timeline-step {
        min-width: 0;
        padding-inline: 4px;
    }

    body.about-page #process .about-process-track {
        width: 100%;
        gap: 18px;
    }

    body.about-page #process .process-step-image,
    body.about-page #process .process-step-image img {
        width: 100%;
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.contact-page .contact-value-list li,
    body.contact-page .contact-faq-item,
    body.contact-page .contact-step-btn.button-gold {
        transition: none;
    }

    body.contact-page .contact-value-list li:hover,
    body.contact-page .contact-faq-item:hover,
    body.contact-page .contact-step-btn.button-gold:hover {
        transform: none;
    }
}

/* Final mobile step-grid override: keep every label readable. */
@media (max-width: 720px) {
    body.about-page #process .process-route-spark,
    body.about-page #process .process-route-runner,
    body.about-page #process .process-active-arrow {
        display: none !important;
    }

    body.about-page #process .process-timeline-step,
    body.about-page #process .process-timeline-step.is-active-step,
    body.about-page #process .process-timeline-step.is-complete-step {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        min-height: 78px !important;
        transform: none !important;
    }

    body.about-page #process .process-timeline-step .about-process-icon,
    body.about-page #process .process-timeline-step.is-active-step .about-process-icon,
    body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
        position: relative !important;
        inset: auto !important;
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    body.about-page #process .process-timeline-step::before,
    body.about-page #process .process-timeline-step::after {
        display: none !important;
    }

    body.about-page #process .container {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
    }

    body.about-page #process .about-section-heading {
        grid-column: 1 / -1;
    }

    body.about-page #process .process-timeline {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(0, 1fr));
        width: 104px;
        min-height: 0;
        height: 100%;
        padding: 4px 0 0;
        overflow: hidden;
        row-gap: 4px;
    }

    body.about-page #process .process-timeline-step {
        min-width: 0;
        min-height: 78px;
        padding-inline: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    body.about-page #process .process-timeline-step,
    body.about-page #process .process-timeline-step.is-active-step,
    body.about-page #process .process-timeline-step.is-complete-step {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
    }

    body.about-page #process .process-timeline-step::after {
        display: none;
    }

    body.about-page #process .process-timeline-step .about-process-icon,
    body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
        width: 50px;
        height: 50px;
    }

    body.about-page #process .timeline-step-meta {
        display: flex;
        justify-content: center;
        margin-top: 7px;
        font-size: 8px;
        line-height: 1.2;
        text-align: center;
        white-space: normal;
    }

    body.about-page #process .about-process-track {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        width: 100%;
        display: block;
    }

    body.about-page #process .about-process-step {
        width: 100%;
        box-sizing: border-box;
    }
}
    .solutions-page .container {
        width: min(100% - 32px, 1280px);
    }

    .solutions-hero-copy h1 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .solution-selector {
        width: calc(100vw - 32px);
        max-width: none;
        grid-template-columns: repeat(3, minmax(248px, 1fr));
        align-items: stretch;
        overflow-x: auto;
        padding: 18px 4px 24px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .solution-selector::-webkit-scrollbar {
        display: none;
    }

    .solution-card,
    .solution-card.is-active {
        min-height: 420px;
        scroll-snap-align: center;
        transform: none;
    }

    .solution-card:hover,
    .solution-card:focus-visible,
    .solution-card.is-active {
        transform: none;
    }

    .featured-solution-media {
        min-height: 380px;
    }

    .featured-solution-content {
        min-height: 0;
        padding: 28px 22px;
    }

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

    .featured-value-grid article {
        display: grid;
        grid-template-columns: 38px 1fr;
        column-gap: 12px;
        padding: 18px 0;
    }

    .featured-value-grid article + article {
        padding-left: 0;
        border-top: 1px solid var(--solutions-line);
        border-left: 0;
    }

    .featured-value-grid article > span {
        grid-row: 1 / 3;
    }

    .featured-value-grid h3 {
        margin: 0 0 5px;
    }

    .featured-value-grid p {
        font-size: 11px;
    }

    .comparison-card {
        grid-template-columns: 1fr;
    }

    .comparison-row:nth-of-type(odd) {
        border-right: 0;
    }

    .finder-form {
        grid-template-columns: 1fr;
    }

    .finder-result {
        display: flex;
        align-items: flex-start;
    }

    .finder-result-link {
        width: 100%;
        margin-top: 18px;
    }
}

@media (max-width: 520px) {
    .solutions-page .header-inner {
        min-height: 70px;
    }

    .solutions-page .primary-nav {
        top: 70px;
        min-height: calc(100vh - 70px);
    }

    .solutions-hero {
        padding-top: 118px;
    }

    .solutions-hero-actions {
        display: grid;
    }

    .solutions-hero-actions .button {
        width: 100%;
    }

    .solutions-hero-proof {
        gap: 13px;
        flex-direction: column;
        align-items: center;
    }

    .featured-solution-heading h2 {
        font-size: 31px;
    }

    .featured-number {
        font-size: 34px;
    }

    .featured-benefits {
        display: grid;
        grid-template-columns: 1fr;
    }

    .solutions-page .featured-cta {
        width: 100%;
    }

    .solutions-final-cta-inner {
        padding: 32px 24px;
    }

    .solutions-final-actions {
        display: grid;
        width: 100%;
    }

    .solutions-final-actions .button {
        width: 100%;
    }
}

body.about-page #process::after {
    inset: 0;
    height: auto;
    background: url("../images/worldmap.png") center 32px / min(980px, 78vw) auto no-repeat;
    opacity: 0.035;
}

body.about-page #process .about-section-heading {
    margin-bottom: 54px;
}

body.about-page #process .about-section-heading .eyebrow { color: var(--gold-500); }
body.about-page #process .about-section-heading h2 { color: #FFFFFF; }

body.about-page #process .about-process-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    padding: 0;
}

body.about-page #process .about-process-track::before,
body.about-page #process .about-process-track::after {
    display: none;
}

body.about-page #process .about-process-step,
body.about-page #process .about-process-step.reveal,
body.about-page #process .about-process-step.reveal.is-visible {
    position: relative;
    display: flex;
    min-height: 390px;
    overflow: visible;
    padding: 28px 24px 30px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #FFFFFF;
    text-align: left;
    background:
        radial-gradient(circle at 100% 0%, rgba(49, 126, 181, 0.18), transparent 34%),
        linear-gradient(155deg, rgba(13, 50, 89, 0.96), rgba(5, 27, 58, 0.97));
    border: 1px solid rgba(159, 193, 220, 0.18);
    border-radius: 16px;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px);
    animation: none;
}

body.about-page #process .about-process-step.reveal {
    opacity: 0;
    transform: translateY(34px) scale(0.97);
    transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1), border-color 260ms ease, box-shadow 260ms ease;
}

body.about-page #process .about-process-step.reveal:nth-child(2) { transition-delay: 130ms; }
body.about-page #process .about-process-step.reveal:nth-child(3) { transition-delay: 260ms; }
body.about-page #process .about-process-step.reveal:nth-child(4) { transition-delay: 390ms; }

body.about-page #process .about-process-step.reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

body.about-page #process .about-process-step.reveal.is-visible:hover {
    z-index: 5;
    border-color: rgba(241, 199, 91, 0.44);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(241, 199, 91, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    transform: translateY(-7px);
    transition-delay: 0ms;
}

body.about-page #process .about-process-step::before,
body.about-page #process .about-process-step.reveal.is-visible::before {
    position: absolute;
    inset: 0 24px auto;
    width: auto;
    height: 3px;
    background: linear-gradient(90deg, #D3A62F, #F1CD67 58%, transparent);
    border-radius: 0 0 999px 999px;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: none;
}

body.about-page #process .about-process-step.reveal.is-visible::before {
    transform: scaleX(1);
    transition-delay: 420ms;
}

body.about-page #process .about-process-step:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -28px;
    z-index: 8;
    display: grid;
    width: 38px;
    height: 38px;
    content: "\2192";
    place-items: center;
    color: #061E3D;
    background: linear-gradient(145deg, #FFE59B, #D3A62F);
    border: 5px solid #061D3B;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 900;
    opacity: 0;
    transform: translateY(-50%) translateX(-8px) scale(0.8);
}

body.about-page #process .about-process-step.reveal.is-visible:not(:last-child)::after {
    animation: processConnectorReveal 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 640ms;
}

body.about-page #process .about-process-step.reveal.is-visible:nth-child(2)::after { animation-delay: 770ms; }
body.about-page #process .about-process-step.reveal.is-visible:nth-child(3)::after { animation-delay: 900ms; }

body.about-page #process .about-process-icon,
body.about-page #process .about-process-step.reveal.is-visible .about-process-icon {
    position: relative;
    top: auto;
    left: auto;
    width: 68px;
    height: 68px;
    margin: 0 0 24px;
    color: #F5D472;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
    border: 1px solid rgba(241, 199, 91, 0.34);
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: none;
    animation: none;
}

body.about-page #process .about-process-icon::before { display: none; }
body.about-page #process .about-process-icon::after { inset: 7px; border-radius: 9px; border-color: rgba(255,255,255,0.08); }
body.about-page #process .about-process-icon svg { width: 32px; height: 32px; }

body.about-page #process .process-step-meta,
body.about-page #process .about-process-step.reveal.is-visible .process-step-meta {
    display: flex;
    width: 100%;
    min-height: 32px;
    margin: 0 0 19px;
    align-items: center;
    gap: 10px;
    color: #AFC3D7;
    opacity: 1;
    transform: none;
    animation: none;
}

body.about-page #process .process-step-meta b,
body.about-page #process .about-process-step.reveal.is-visible .process-step-meta b {
    display: block;
    width: auto;
    height: auto;
    color: #F1C75B;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: var(--display);
    font-size: 28px;
    line-height: 1;
    letter-spacing: -0.04em;
    animation: none;
}

body.about-page #process .process-step-meta em {
    display: inline-flex;
    min-height: 25px;
    padding: 0 10px;
    align-items: center;
    color: #D6E3EE;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    font-size: 9px;
}

body.about-page #process .about-process-step h3,
body.about-page #process .about-process-step.reveal.is-visible h3 {
    max-width: none;
    margin: 0 0 16px;
    padding: 0;
    color: #FFFFFF;
    font-size: clamp(23px, 1.5vw, 28px);
    line-height: 1.12;
    text-align: left;
    animation: none;
}

body.about-page #process .about-process-step h3::after { display: none; }

body.about-page #process .about-process-step p,
body.about-page #process .about-process-step.reveal.is-visible p {
    max-width: none;
    margin: 0;
    color: rgba(210, 226, 239, 0.72);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
    text-align: left;
    animation: none;
}

@media (max-width: 1180px) {
    body.about-page #process .about-process-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    body.about-page #process .about-process-step:not(:last-child)::after { display: none; }
    body.about-page #process .about-process-step { min-height: 350px; }
}

@media (max-width: 640px) {
    body.about-page #process.about-process { padding: 72px 0; }
    body.about-page #process .about-process-track { grid-template-columns: 1fr; }
    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible { min-height: 0; padding: 24px; }
}

/* Light animated process timeline — final approved direction. */
body.about-page #process.about-process {
    padding: 64px 0 96px;
    background:
        linear-gradient(90deg, rgba(16, 56, 91, 0.028) 1px, transparent 1px),
        linear-gradient(180deg, rgba(16, 56, 91, 0.026) 1px, transparent 1px),
        radial-gradient(circle at 50% 18%, rgba(24, 111, 167, 0.07), transparent 31%),
        linear-gradient(180deg, #FFFFFF 0%, #FAFCFE 52%, #F2F7FB 100%);
    background-size: 88px 88px, 88px 88px, auto, auto;
}

body.about-page #process::before {
    background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.78), transparent 64%);
    opacity: 1;
}

body.about-page #process::after {
    inset: 18px 0 auto;
    height: 230px;
    background: url("../images/worldmap.png") center top / min(980px, 82vw) auto no-repeat;
    opacity: 0.045;
}

body.about-page #process .about-section-heading {
    margin-bottom: 48px;
}

body.about-page #process .about-section-heading .eyebrow { color: var(--gold-500); }
body.about-page #process .about-section-heading h2 { color: #041838; text-shadow: none; }

body.about-page #process .process-banner {
    position: relative;
    height: clamp(150px, 13vw, 205px);
    margin: 0 0 44px;
    overflow: hidden;
    background: #153D52;
    border: 1px solid rgba(35, 80, 102, 0.18);
    border-radius: 18px;
    box-shadow: 0 24px 52px rgba(17, 52, 85, 0.14);
    isolation: isolate;
}

body.about-page #process .process-banner::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background:
        linear-gradient(90deg, rgba(8, 36, 54, 0.76), rgba(8, 36, 54, 0.08) 48%, rgba(8, 36, 54, 0.34)),
        linear-gradient(180deg, transparent 40%, rgba(5, 28, 45, 0.52));
    pointer-events: none;
}

body.about-page #process .process-banner::after {
    position: absolute;
    inset: 12px;
    z-index: 2;
    content: "";
    border: 1px solid rgba(239, 222, 172, 0.34);
    border-radius: 11px;
    pointer-events: none;
}

body.about-page #process .process-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 57%;
    filter: saturate(0.82) contrast(1.04);
    transform: scale(1.025);
    transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .process-banner.is-visible img {
    transform: scale(1);
}

body.about-page #process .process-banner span {
    position: absolute;
    bottom: 24px;
    left: 28px;
    z-index: 3;
    color: rgba(255, 249, 231, 0.94);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

body.about-page #process .about-process-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
    padding: 14px 0 0;
}

body.about-page #process .about-process-track::before {
    position: absolute;
    top: 58px;
    right: 12.5%;
    left: 12.5%;
    z-index: 0;
    display: block;
    width: auto;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, rgba(133, 158, 170, 0.16), rgba(80, 121, 136, 0.38), rgba(133, 158, 170, 0.16));
    border-radius: 999px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.82), 0 4px 12px rgba(17, 52, 85, 0.08);
    opacity: 1;
    animation: none;
}

body.about-page #process .about-process-track::after {
    position: absolute;
    top: 57px;
    right: 12.5%;
    left: 12.5%;
    z-index: 1;
    display: block;
    width: auto;
    height: 6px;
    content: "";
    background: linear-gradient(90deg, #315F70 0%, #4E8189 32%, #F0E6C8 51%, #7A9D9D 68%, #315F70 100%);
    background-size: 220% 100%;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 0 9px rgba(55, 107, 119, 0.28), 0 0 18px rgba(88, 133, 139, 0.14);
    opacity: 1;
    transform: scaleX(0.02);
    transform-origin: left center;
    animation: processRouteBuildLight 16s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
}

body.about-page #process .about-process-step,
body.about-page #process .about-process-step.reveal,
body.about-page #process .about-process-step.reveal.is-visible {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 340px;
    overflow: visible;
    padding: 0 14px 12px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: #123454;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body.about-page #process .about-process-step.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms ease, transform 650ms ease;
}

body.about-page #process .about-process-step.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    animation: processStepZoomLight 16s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation-delay: var(--step-delay);
}

body.about-page #process .about-process-step.reveal.is-visible:hover {
    border: 0;
    box-shadow: none;
}

body.about-page #process .about-process-step::before,
body.about-page #process .about-process-step.reveal.is-visible::before,
body.about-page #process .about-process-step:not(:last-child)::after,
body.about-page #process .about-process-step.reveal.is-visible:not(:last-child)::after {
    display: none;
    animation: none;
}

body.about-page #process .about-process-icon,
body.about-page #process .about-process-step.reveal.is-visible .about-process-icon {
    position: relative;
    top: auto;
    left: auto;
    z-index: 3;
    display: grid;
    width: 92px;
    height: 92px;
    margin: 0 0 22px;
    place-items: center;
    overflow: visible;
    color: #FFF9E9;
    background:
        radial-gradient(circle at 32% 22%, rgba(102, 157, 162, 0.88), transparent 36%),
        linear-gradient(145deg, #376F7B 0%, #255667 48%, #163C54 100%);
    border: 2px solid rgba(197, 166, 102, 0.70);
    border-radius: 50%;
    box-shadow:
        0 16px 30px rgba(18, 57, 72, 0.20),
        0 0 0 7px rgba(225, 235, 237, 0.88),
        0 0 0 9px rgba(189, 156, 91, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transform: none;
    animation: processIconGrowLight 16s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation-delay: var(--step-delay);
}

body.about-page #process .about-process-icon::before {
    position: absolute;
    inset: -12px;
    z-index: -1;
    display: block;
    content: "";
    background: transparent;
    border: 2px solid rgba(183, 151, 88, 0.40);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.82);
    animation: processNodeRippleLight 16s ease-out infinite both;
    animation-delay: var(--step-delay);
}

body.about-page #process .about-process-icon::after {
    inset: 8px;
    display: block;
    border: 1px solid rgba(255, 247, 222, 0.24);
    border-radius: 50%;
}

body.about-page #process .about-process-icon svg {
    width: 38px;
    height: 38px;
    stroke-width: 1.9;
    filter: drop-shadow(0 3px 7px rgba(2, 20, 42, 0.28));
}

body.about-page #process .process-step-meta,
body.about-page #process .about-process-step.reveal.is-visible .process-step-meta {
    display: inline-flex;
    width: auto;
    min-height: 30px;
    margin: 0 0 18px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #627A94;
    opacity: 1;
    transform: none;
    animation: none;
}

body.about-page #process .process-step-meta b,
body.about-page #process .about-process-step.reveal.is-visible .process-step-meta b {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    color: #16486F;
    background: #FFFFFF;
    border: 1px solid #D1DFEA;
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(17, 52, 85, 0.09);
    font-family: var(--body);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0;
    animation: none;
}

body.about-page #process .process-step-meta em {
    min-height: 0;
    padding: 0;
    color: #627A94;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
}

body.about-page #process .about-process-step h3,
body.about-page #process .about-process-step.reveal.is-visible h3 {
    max-width: 248px;
    margin: 0 auto 14px;
    padding: 0 0 13px;
    color: #123454;
    font-size: 22px;
    line-height: 1.2;
    text-align: center;
    animation: none;
}

body.about-page #process .about-process-step h3::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: 28px;
    height: 2px;
    content: "";
    background: #C8D8E5;
    transform: translateX(-50%);
}

body.about-page #process .about-process-step p,
body.about-page #process .about-process-step.reveal.is-visible p {
    max-width: 270px;
    margin: 0 auto;
    color: #5C7189;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
    animation: none;
}

@keyframes processStepZoomLight {
    0%, 19% {
        opacity: 1;
        transform: translateY(-9px) scale(1.025);
        filter: saturate(1.05);
    }
    27%, 100% {
        opacity: 0.78;
        transform: translateY(0) scale(0.975);
        filter: saturate(0.92);
    }
}

@keyframes processNodeRippleLight {
    0% { opacity: 0; transform: scale(0.82); }
    4%, 14% { opacity: 0.75; transform: scale(1); }
    20% { opacity: 0; transform: scale(1.16); }
    27%, 100% { opacity: 0; transform: scale(0.82); }
}

@keyframes processIconGrowLight {
    0%, 19% {
        transform: scale(1.13);
        box-shadow:
            0 22px 40px rgba(18, 57, 72, 0.26),
            0 0 0 8px rgba(229, 237, 237, 0.88),
            0 0 0 15px rgba(183, 151, 88, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.30);
    }
    27%, 100% {
        transform: scale(0.96);
        box-shadow:
            0 13px 27px rgba(18, 57, 72, 0.17),
            0 0 0 7px rgba(225, 235, 237, 0.88),
            0 0 0 9px rgba(183, 151, 88, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }
}

@keyframes processRouteBuildLight {
    0%, 19% { transform: scaleX(0.02); background-position: 100% 0; opacity: 1; }
    25%, 44% { transform: scaleX(0.34); background-position: 66% 0; opacity: 1; }
    50%, 69% { transform: scaleX(0.67); background-position: 33% 0; opacity: 1; }
    75%, 96% { transform: scaleX(1); background-position: 0% 0; opacity: 1; }
    100% { transform: scaleX(0.02); background-position: 100% 0; opacity: 0; }
}

@media (max-width: 920px) {
    body.about-page #process .about-process-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 46px 22px;
    }

    body.about-page #process .about-process-track::before,
    body.about-page #process .about-process-track::after {
        display: none;
    }
}

@media (max-width: 640px) {
    body.about-page #process.about-process { padding: 70px 0; }
    body.about-page #process .process-banner { height: 145px; margin-bottom: 36px; border-radius: 13px; }
    body.about-page #process .process-banner::after { inset: 8px; border-radius: 8px; }
    body.about-page #process .process-banner span { right: 18px; bottom: 18px; left: 18px; font-size: 8px; line-height: 1.5; }
    body.about-page #process .about-process-track { grid-template-columns: 1fr; gap: 34px; }
    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible { min-height: 0; padding: 0 14px 12px; }
}

/* Process section refresh: clearer palette and step-specific visual stories. */
body.about-page #process.about-process {
    --process-navy: #071E36;
    --process-blue: #0B5275;
    --process-teal: #1F746D;
    --process-gold: #C8942D;
    --process-gold-bright: #E8C66B;
    --process-cream: #F6F0E4;
    padding: 82px 0 104px;
    background:
        radial-gradient(circle at 10% 12%, rgba(200, 148, 45, 0.13), transparent 27%),
        radial-gradient(circle at 91% 82%, rgba(11, 82, 117, 0.10), transparent 29%),
        linear-gradient(90deg, rgba(7, 30, 54, 0.028) 1px, transparent 1px),
        linear-gradient(180deg, rgba(7, 30, 54, 0.028) 1px, transparent 1px),
        linear-gradient(180deg, #FFFEFB 0%, #F7F4ED 54%, #F1F5F4 100%);
    background-size: auto, auto, 84px 84px, 84px 84px, auto;
}

body.about-page #process::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 38%);
}

body.about-page #process::after {
    top: 24px;
    opacity: 0.035;
}

body.about-page #process .about-section-heading {
    margin-bottom: 56px;
}

body.about-page #process .about-section-heading .eyebrow {
    color: var(--gold-500);
    letter-spacing: 0.16em;
}

body.about-page #process .about-section-heading h2 {
    color: var(--process-navy);
}

body.about-page #process .about-process-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
    padding-top: 0;
}

body.about-page #process .about-process-track::before {
    top: 47px;
    right: 12.5%;
    left: 12.5%;
    height: 4px;
    background: repeating-linear-gradient(90deg, rgba(90, 116, 132, 0.30) 0 8px, rgba(90, 116, 132, 0.08) 8px 16px);
    border-radius: 999px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.86), 0 4px 13px rgba(7, 30, 54, 0.07);
}

body.about-page #process .about-process-track::after {
    top: 46px;
    right: 12.5%;
    left: 12.5%;
    height: 6px;
    background: linear-gradient(90deg, #B98521 0%, #E8C66B 36%, #2A7A79 72%, #0B5275 100%);
    background-size: 180% 100%;
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(200, 148, 45, 0.34), 0 0 24px rgba(11, 82, 117, 0.16);
    transform: scaleX(var(--process-progress, 0));
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .about-process-step,
body.about-page #process .about-process-step.reveal,
body.about-page #process .about-process-step.reveal.is-visible {
    position: relative;
    display: flex;
    min-height: 570px;
    padding: 0 18px 30px;
    overflow: visible;
    flex-direction: column;
    align-items: center;
    color: var(--process-navy);
    background: transparent;
    border: 0;
    opacity: 0.58;
    transform: none;
    filter: saturate(0.72);
    animation: none;
    transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1), filter 620ms ease;
}

body.about-page #process .about-process-step::before,
body.about-page #process .about-process-step.reveal.is-visible::before {
    position: absolute;
    inset: 112px 0 0;
    z-index: 0;
    display: block;
    width: auto;
    height: auto;
    content: "";
    background:
        radial-gradient(circle at 50% 16%, rgba(232, 198, 107, 0.13), transparent 40%),
        linear-gradient(180deg, rgba(11, 82, 117, 0.035), transparent 68%);
    border: 1px solid transparent;
    border-top: 2px solid transparent;
    border-radius: 20px;
    box-shadow: none;
    opacity: 0;
    transform: translateY(5px) scale(0.96);
    animation: none;
    transition: opacity 620ms ease, border-color 620ms ease, box-shadow 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .about-process-step.reveal.is-visible:hover::before {
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

body.about-page #process .about-process-step:not(:last-child)::after,
body.about-page #process .about-process-step.reveal.is-visible:not(:last-child)::after {
    display: none;
}

body.about-page #process .about-process-step > * {
    position: relative;
    z-index: 2;
}

body.about-page #process .about-process-icon,
body.about-page #process .about-process-step.reveal.is-visible .about-process-icon {
    width: 94px;
    height: 94px;
    margin: 0 0 25px;
    overflow: visible;
    color: #486A81;
    background: rgba(247, 251, 251, 0.76);
    border: 2px solid rgba(126, 153, 169, 0.42);
    box-shadow:
        0 12px 26px rgba(7, 30, 54, 0.10),
        0 0 0 7px rgba(255, 255, 255, 0.72),
        0 0 0 9px rgba(109, 137, 153, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
    animation: none;
    transition: color 620ms ease, background 620ms ease, border-color 620ms ease, box-shadow 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .about-process-icon::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    content: "";
    background:
        radial-gradient(circle at 31% 22%, rgba(39, 125, 145, 0.94), transparent 35%),
        linear-gradient(145deg, #0B5275 0%, #071E36 78%);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.82);
    animation: none;
    transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .about-process-icon::after {
    inset: -11px;
    z-index: -1;
    border: 2px solid transparent;
    border-top-color: var(--process-gold-bright);
    border-right-color: rgba(11, 82, 117, 0.62);
    opacity: 0;
    transform: rotate(0deg);
}

body.about-page #process .process-step-meta,
body.about-page #process .about-process-step.reveal.is-visible .process-step-meta {
    width: calc(100% - 2px);
    min-height: 34px;
    margin: 0 0 15px;
    justify-content: flex-start;
    gap: 10px;
    color: var(--process-blue);
    transition: color 500ms ease;
}

body.about-page #process .process-step-meta::after {
    margin-left: auto;
    padding: 5px 8px;
    content: "UP NEXT";
    color: #7890A1;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(87, 118, 137, 0.18);
    border-radius: 999px;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    opacity: 0.76;
    transition: color 420ms ease, background 420ms ease, border-color 420ms ease, box-shadow 420ms ease, opacity 420ms ease, transform 420ms ease;
}

body.about-page #process .process-step-meta b,
body.about-page #process .about-process-step.reveal.is-visible .process-step-meta b {
    width: 34px;
    height: 34px;
    color: var(--process-navy);
    background: rgba(244, 239, 226, 0.68);
    border: 1px solid rgba(200, 148, 45, 0.32);
    box-shadow: 0 6px 14px rgba(7, 30, 54, 0.07);
    font-size: 11px;
    transition: color 520ms ease, background 520ms ease, border-color 520ms ease, box-shadow 520ms ease, transform 520ms ease;
}

body.about-page #process .process-step-meta em {
    color: var(--process-blue);
    font-size: 10px;
    letter-spacing: 0.16em;
}

body.about-page #process .process-step-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    margin: 0 0 22px;
    overflow: hidden;
    background: rgba(220, 230, 236, 0.48);
    border: 1px solid rgba(7, 30, 54, 0.08);
    border-radius: 14px;
    box-shadow: 0 9px 22px rgba(7, 30, 54, 0.08);
    transform: translateY(0) scale(0.985);
    transition: border-color 620ms ease, box-shadow 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .process-step-image::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(108deg, transparent 25%, rgba(255, 255, 255, 0.58) 48%, transparent 68%);
    opacity: 0;
    transform: translateX(-130%);
    pointer-events: none;
}

body.about-page #process .process-step-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.62) contrast(0.98) brightness(1.03);
    transform: scale(1.01);
    transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1), filter 620ms ease;
}

body.about-page #process .about-process-step:hover .process-step-image img {
    transform: scale(1.01);
}

body.about-page #process .about-process-step h3,
body.about-page #process .about-process-step.reveal.is-visible h3 {
    max-width: none;
    margin: 0 0 13px;
    padding: 0 0 14px;
    color: var(--process-navy);
    font-size: clamp(20px, 1.35vw, 23px);
    line-height: 1.18;
    transition: color 520ms ease, transform 520ms ease;
}

body.about-page #process .about-process-step h3::after {
    width: 34px;
    height: 3px;
    background: linear-gradient(90deg, #91A9B8, #CBD8DE);
    border-radius: 999px;
    transform: translateX(-50%) scaleX(0.72);
    transition: background 520ms ease, transform 520ms ease, box-shadow 520ms ease;
}

body.about-page #process .about-process-step p,
body.about-page #process .about-process-step.reveal.is-visible p {
    max-width: none;
    color: #53677B;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.66;
    transition: color 520ms ease, opacity 520ms ease;
}

body.about-page #process .process-route-runner {
    position: absolute;
    top: 49px;
    left: var(--runner-position, 12.5%);
    z-index: 1;
    display: grid;
    width: 20px;
    height: 20px;
    margin: 0;
    place-items: center;
    background: linear-gradient(145deg, #F2D783, #C8942D);
    border: 4px solid #FFFDF7;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(200, 148, 45, 0.28), 0 6px 18px rgba(7, 30, 54, 0.18), 0 0 22px rgba(232, 198, 107, 0.48);
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: left 900ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

body.about-page #process .process-route-runner::before {
    position: absolute;
    inset: -8px;
    content: "";
    border: 2px solid rgba(200, 148, 45, 0.46);
    border-radius: inherit;
    animation: none;
}

body.about-page #process .process-route-runner::after {
    width: 4px;
    height: 4px;
    content: "";
    background: var(--process-navy);
    border-radius: 50%;
}

body.about-page #process .about-process-track.is-resetting::after {
    transition: none;
}

body.about-page #process .about-process-track.is-resetting .process-route-runner {
    transition: none;
}

body.about-page #process .about-process-track.is-running::after {
    animation: processLineShimmer 2.2s linear infinite;
}

body.about-page #process .about-process-track.is-running .process-route-runner::before {
    animation: processRunnerRipple 1.7s ease-out infinite;
}

body.about-page #process .about-process-step.is-active-step,
body.about-page #process .about-process-step.reveal.is-visible.is-active-step {
    z-index: 4;
    opacity: 1;
    filter: saturate(1);
    transform: translateY(-9px) scale(1.018);
}

body.about-page #process .about-process-step.is-active-step::before,
body.about-page #process .about-process-step.reveal.is-visible.is-active-step::before {
    border-color: rgba(200, 148, 45, 0.18);
    border-top-color: rgba(200, 148, 45, 0.72);
    box-shadow: 0 24px 52px rgba(7, 30, 54, 0.09), 0 0 42px rgba(232, 198, 107, 0.11);
    opacity: 1;
    transform: translateY(0) scale(1);
}

body.about-page #process .about-process-step.is-complete-step,
body.about-page #process .about-process-step.reveal.is-visible.is-complete-step {
    opacity: 0.82;
    filter: saturate(0.88);
}

body.about-page #process .about-process-step.is-active-step .about-process-icon,
body.about-page #process .about-process-step.reveal.is-visible.is-active-step .about-process-icon {
    color: #FFF9E9;
    border-color: var(--process-gold-bright);
    box-shadow:
        0 20px 40px rgba(7, 30, 54, 0.23),
        0 0 0 7px rgba(255, 255, 255, 0.90),
        0 0 0 11px rgba(200, 148, 45, 0.18),
        0 0 30px rgba(232, 198, 107, 0.25);
    transform: scale(1.12);
    animation: processActiveIconPulse 1.8s ease-in-out infinite;
}

body.about-page #process .about-process-step.is-active-step .about-process-icon::before {
    opacity: 1;
    transform: scale(1);
}

body.about-page #process .about-process-step.is-active-step .about-process-icon::after {
    opacity: 1;
    animation: processIconOrbit 1.6s linear infinite;
}

body.about-page #process .about-process-step.is-complete-step .about-process-icon {
    color: #236C64;
    background: rgba(226, 241, 237, 0.86);
    border-color: rgba(56, 128, 116, 0.46);
    box-shadow: 0 12px 26px rgba(31, 116, 109, 0.10), 0 0 0 7px rgba(255, 255, 255, 0.68);
}

body.about-page #process .about-process-step.is-active-step .process-step-meta b {
    color: var(--process-navy);
    background: linear-gradient(145deg, #F0D783, #C8942D);
    border-color: transparent;
    box-shadow: 0 9px 22px rgba(200, 148, 45, 0.30);
    transform: scale(1.08);
}

body.about-page #process .about-process-step.is-active-step .process-step-meta::after {
    content: "IN PROGRESS";
    color: #FFFFFF;
    background: linear-gradient(90deg, #0B5275, #1F746D);
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(11, 82, 117, 0.18);
    opacity: 1;
    transform: translateY(-1px);
    animation: processStatusPulse 1.5s ease-in-out infinite;
}

body.about-page #process .about-process-step.is-complete-step .process-step-meta::after {
    content: "COMPLETE";
    color: #236C64;
    background: rgba(226, 241, 237, 0.78);
    border-color: rgba(56, 128, 116, 0.22);
    opacity: 1;
}

body.about-page #process .about-process-step.is-active-step .process-step-image {
    border-color: rgba(200, 148, 45, 0.64);
    box-shadow: 0 18px 34px rgba(7, 30, 54, 0.16), 0 0 0 3px rgba(232, 198, 107, 0.10);
    transform: translateY(-2px) scale(1);
}

body.about-page #process .about-process-step.is-active-step .process-step-image::after {
    opacity: 1;
    animation: processImageSweep 3.6s ease-in-out infinite;
}

body.about-page #process .about-process-step.is-active-step .process-step-image img {
    filter: saturate(1.04) contrast(1.045) brightness(1.01);
    transform: scale(1.045);
}

body.about-page #process .about-process-step.is-complete-step .process-step-image img {
    filter: saturate(0.86) contrast(1.01);
}

body.about-page #process .about-process-step.is-active-step h3 {
    color: #061B31;
    transform: translateY(-1px);
}

body.about-page #process .about-process-step.is-active-step h3::after {
    background: linear-gradient(90deg, var(--process-gold), var(--process-gold-bright), var(--process-blue));
    box-shadow: 0 0 10px rgba(200, 148, 45, 0.26);
    transform: translateX(-50%) scaleX(1.35);
}

body.about-page #process .about-process-step.is-active-step p {
    color: #40586D;
}

@keyframes processLineShimmer {
    from { background-position: 100% 0; }
    to { background-position: -80% 0; }
}

@keyframes processRunnerRipple {
    0% { opacity: 0.72; transform: scale(0.74); }
    70%, 100% { opacity: 0; transform: scale(1.55); }
}

@keyframes processActiveIconPulse {
    0%, 100% { transform: scale(1.09); }
    50% { transform: scale(1.14); }
}

@keyframes processIconOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes processStatusPulse {
    0%, 100% { box-shadow: 0 7px 16px rgba(11, 82, 117, 0.16); }
    50% { box-shadow: 0 7px 22px rgba(31, 116, 109, 0.34); }
}

@keyframes processImageSweep {
    0%, 18% { opacity: 0; transform: translateX(-130%); }
    42% { opacity: 0.72; }
    64%, 100% { opacity: 0; transform: translateX(130%); }
}

@media (max-width: 1080px) {
    body.about-page #process .about-process-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 42px 24px;
    }

    body.about-page #process .about-process-track::before,
    body.about-page #process .about-process-track::after,
    body.about-page #process .process-route-runner {
        display: none;
    }

    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible {
        min-height: 600px;
    }
}

@media (max-width: 640px) {
    body.about-page #process.about-process {
        padding: 68px 0 76px;
    }

    body.about-page #process .about-section-heading {
        margin-bottom: 42px;
    }

    body.about-page #process .about-process-track {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible {
        min-height: 0;
        padding: 0 18px 30px;
    }

    body.about-page #process .about-process-step.is-active-step,
    body.about-page #process .about-process-step.reveal.is-visible.is-active-step {
        transform: translateY(-6px) scale(1);
    }

    body.about-page #process .process-step-image {
        aspect-ratio: 16 / 9;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.about-page #process .about-process-track::after {
        transform: scaleX(1);
        transition: none;
        animation: none;
    }

    body.about-page #process .process-route-runner {
        display: none;
    }

    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible,
    body.about-page #process .about-process-step.is-active-step,
    body.about-page #process .about-process-step.is-complete-step {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
        animation: none;
    }

    body.about-page #process .about-process-icon,
    body.about-page #process .about-process-icon::after,
    body.about-page #process .process-step-meta::after,
    body.about-page #process .process-step-image::after {
        animation: none;
    }
}

/* Pixel-fidelity pass for the supplied animated process reference. */
body.about-page #process.about-process {
    --reference-navy: #082A47;
    --reference-blue: #1598D4;
    --reference-cyan: #56C8F6;
    --reference-teal: #18B9AA;
    --reference-gold: #E8B33E;
    --reference-paper: #FAF8F2;
    background:
        radial-gradient(circle at 50% 5%, rgba(232, 179, 62, 0.10), transparent 23%),
        radial-gradient(circle at 84% 76%, rgba(24, 185, 170, 0.055), transparent 30%),
        linear-gradient(90deg, rgba(8, 42, 71, 0.020) 1px, transparent 1px),
        linear-gradient(180deg, rgba(8, 42, 71, 0.020) 1px, transparent 1px),
        linear-gradient(180deg, #FCFBF7 0%, #F8F6F0 62%, #F2F5F2 100%);
    background-size: auto, auto, 76px 76px, 76px 76px, auto;
}

body.about-page #process .process-timeline::before {
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(86, 106, 123, 0.72) 0 7px, rgba(86, 106, 123, 0.06) 7px 14px);
}

body.about-page #process .process-timeline::after {
    height: 4px;
    background: linear-gradient(90deg, #E4A92D 0%, #F1C14B 32%, #2D86C8 66%, #1699D5 100%);
    box-shadow: 0 0 8px rgba(232, 179, 62, 0.32), 0 0 17px rgba(21, 152, 212, 0.16);
}

body.about-page #process .process-route-spark {
    position: absolute;
    top: 45px;
    z-index: 2;
    display: block;
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    border: 3px solid rgba(228, 233, 234, 0.88);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.34), 0 0 15px rgba(62, 89, 107, 0.13);
    transform: translate(-50%, -50%);
    transition: background 620ms ease, border-color 620ms ease, box-shadow 620ms ease, transform 620ms ease;
    pointer-events: none;
}

body.about-page #process .process-route-spark[data-process-segment="0"] { left: 25%; }
body.about-page #process .process-route-spark[data-process-segment="1"] { left: 50%; }
body.about-page #process .process-route-spark[data-process-segment="2"] { left: 75%; }

body.about-page #process .process-route-spark.is-complete-segment {
    background: #FFFFFF;
    border-color: #F1BF48;
    box-shadow: 0 0 0 5px rgba(241, 191, 72, 0.10), 0 0 18px rgba(232, 179, 62, 0.58);
}

body.about-page #process .process-route-spark.is-active-segment {
    background: #FFFFFF;
    border-color: var(--reference-cyan);
    box-shadow: 0 0 0 5px rgba(86, 200, 246, 0.11), 0 0 20px rgba(21, 152, 212, 0.72);
    animation: referenceSparkPulse 1.35s ease-in-out infinite;
}

body.about-page #process .process-timeline .process-route-runner {
    width: 13px;
    height: 13px;
    border-width: 3px;
    border-color: #FFFFFF;
    background: var(--reference-cyan);
    box-shadow: 0 0 0 5px rgba(86, 200, 246, 0.12), 0 0 20px rgba(21, 152, 212, 0.66);
    opacity: 0;
    transition: left 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}

body.about-page #process .process-timeline.is-advancing .process-route-runner {
    opacity: 1;
}

body.about-page #process .process-timeline-step .about-process-icon,
body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
    width: 86px;
    height: 86px;
    color: #587083;
    background: rgba(251, 251, 249, 0.94);
    border-color: rgba(95, 119, 135, 0.24);
    box-shadow:
        0 10px 24px rgba(8, 42, 71, 0.09),
        0 0 0 7px rgba(255, 255, 255, 0.72),
        0 0 0 9px rgba(106, 128, 141, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
    color: #587083;
    border-color: rgba(95, 119, 135, 0.27);
}

body.about-page #process .process-timeline-step.is-active-step .about-process-icon {
    width: 92px;
    height: 92px;
    color: #FFFFFF;
    background: #FFFFFF;
    border-color: #E8B33E;
    box-shadow:
        0 18px 38px rgba(8, 42, 71, 0.24),
        0 0 0 6px rgba(255, 255, 255, 0.90),
        0 0 0 10px rgba(232, 179, 62, 0.23),
        0 0 0 15px rgba(21, 152, 212, 0.075),
        0 0 34px rgba(21, 152, 212, 0.25);
}

body.about-page #process .process-timeline-step.is-active-step .about-process-icon::before {
    inset: 5px;
    background:
        radial-gradient(circle at 35% 24%, rgba(31, 116, 145, 0.98), transparent 38%),
        linear-gradient(150deg, #0B5276 0%, #082A47 76%);
}

body.about-page #process .process-timeline-step.is-active-step .about-process-icon::after {
    inset: -2px;
    border-width: 2px;
    border-top-color: rgba(232, 179, 62, 0.92);
    border-right-color: rgba(232, 179, 62, 0.28);
    border-bottom-color: rgba(21, 152, 212, 0.88);
    border-left-color: rgba(21, 152, 212, 0.18);
}

body.about-page #process .process-timeline-step.is-active-step::after {
    top: 96px;
    border-top-color: var(--reference-navy);
}

body.about-page #process .timeline-step-meta {
    margin-top: 17px;
}

body.about-page #process .process-timeline-step.is-active-step .timeline-step-meta b {
    background: #0D5B78;
}

body.about-page #process .about-process-track {
    gap: 16px;
}

body.about-page #process .about-process-step,
body.about-page #process .about-process-step.reveal,
body.about-page #process .about-process-step.reveal.is-visible,
body.about-page #process .about-process-step.is-complete-step,
body.about-page #process .about-process-step.is-active-step {
    min-height: 358px;
    padding: 11px 13px 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.25), rgba(249, 250, 247, 0.08));
    border-color: rgba(94, 119, 135, 0.16);
    border-radius: 17px;
    box-shadow: 0 12px 28px rgba(8, 42, 71, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body.about-page #process .about-process-step.is-complete-step,
body.about-page #process .about-process-step.reveal.is-visible.is-complete-step {
    opacity: 0.96;
    filter: saturate(0.95);
}

body.about-page #process .about-process-step.is-active-step,
body.about-page #process .about-process-step.reveal.is-visible.is-active-step {
    background: linear-gradient(160deg, rgba(255, 252, 242, 0.42), rgba(248, 251, 249, 0.13));
    border-color: rgba(232, 179, 62, 0.82);
    box-shadow:
        0 18px 40px rgba(8, 42, 71, 0.105),
        0 0 0 2px rgba(232, 179, 62, 0.15),
        0 0 28px rgba(232, 179, 62, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
    animation: referenceActiveCardGlow 2.2s ease-in-out infinite;
}

body.about-page #process .process-step-image,
body.about-page #process .about-process-step.is-active-step .process-step-image {
    margin-bottom: 25px;
}

body.about-page #process .process-step-image::before {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 2;
    display: block;
    height: 36%;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(250, 249, 245, 0.80) 78%, rgba(250, 249, 245, 0.96));
    border-radius: 0 0 13px 13px;
    pointer-events: none;
}

body.about-page #process .about-process-step.is-active-step .process-step-image::before {
    background: linear-gradient(180deg, transparent, rgba(255, 250, 237, 0.72) 80%, rgba(255, 250, 237, 0.92));
}

body.about-page #process .about-process-step.is-complete-step .process-step-image img {
    filter: saturate(0.96) contrast(1.015) brightness(1.01);
}

body.about-page #process .about-process-step h3,
body.about-page #process .about-process-step.reveal.is-visible h3 {
    max-width: 245px;
    margin-bottom: 7px;
    color: #0D2A47;
    font-size: clamp(17px, 1.12vw, 19px);
}

body.about-page #process .about-process-step p,
body.about-page #process .about-process-step.reveal.is-visible p {
    max-width: 244px;
    color: #536B7D;
    font-size: 10.5px;
    line-height: 1.52;
}

body.about-page #process .about-process-step.is-complete-step .process-card-progress {
    background: linear-gradient(90deg, transparent, var(--reference-teal), transparent);
}

body.about-page #process .about-process-step.is-active-step .process-card-progress {
    background: linear-gradient(90deg, transparent, var(--reference-blue) 27%, #1678D5 46%, var(--reference-gold) 74%, transparent);
    background-size: 180% 100%;
}

@keyframes referenceSparkPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.88); }
    50% { transform: translate(-50%, -50%) scale(1.13); }
}

@keyframes referenceActiveCardGlow {
    0%, 100% {
        box-shadow: 0 18px 40px rgba(8, 42, 71, 0.105), 0 0 0 2px rgba(232, 179, 62, 0.14), 0 0 24px rgba(232, 179, 62, 0.11);
    }
    50% {
        box-shadow: 0 20px 44px rgba(8, 42, 71, 0.13), 0 0 0 2px rgba(232, 179, 62, 0.23), 0 0 34px rgba(232, 179, 62, 0.19);
    }
}

@media (max-width: 1080px) {
    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible {
        min-height: 396px;
    }
}

@media (max-width: 720px) {
    body.about-page #process .process-route-spark {
        display: none;
    }

    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible,
    body.about-page #process .about-process-step.is-active-step {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.about-page #process .process-route-spark,
    body.about-page #process .about-process-step.is-active-step {
        animation: none;
    }
}

/* Reference lock: library icons, explicit active arrow and photographic card framing. */
body.about-page #process .process-timeline-step::after {
    display: none;
}

body.about-page #process .process-timeline-step .about-process-icon .process-library-icon,
body.about-page #process .process-image-status .process-library-icon {
    fill: currentColor;
    stroke: none;
}

body.about-page #process .process-timeline-step .about-process-icon .process-library-icon {
    position: relative;
    z-index: 2;
    display: block;
    width: 17px;
    height: 17px;
    filter: none;
    transition: filter 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .process-timeline-step.is-active-step .about-process-icon .process-library-icon {
    filter: brightness(0) invert(1);
    transform: scale(1.04);
}

body.about-page #process .process-timeline-step[data-process-index="0"] .about-process-icon .process-library-icon {
    width: 21px;
    height: 21px;
}

body.about-page #process .process-timeline-step[data-process-index="3"] .about-process-icon .process-library-icon {
    width: 33px;
    height: 33px;
}

body.about-page #process .process-active-arrow {
    position: absolute;
    top: 98px;
    left: 50%;
    z-index: 6;
    display: block;
    width: 19px;
    height: 19px;
    fill: #082A47;
    stroke: none;
    opacity: 0;
    filter: drop-shadow(0 5px 5px rgba(8, 42, 71, 0.16));
    pointer-events: none;
    transform: translate(-50%, -8px) scale(0.72);
    transform-origin: center;
    transition: opacity 340ms ease, transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .process-timeline-step.is-active-step .process-active-arrow {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    animation: processArrowDrop 1.65s ease-in-out infinite;
}

body.about-page #process .process-step-image,
body.about-page #process .about-process-step.is-active-step .process-step-image {
    aspect-ratio: 16 / 9;
    margin: 0 0 27px;
    isolation: isolate;
    overflow: visible;
    border-radius: 13px;
}

body.about-page #process .process-step-image img,
body.about-page #process .about-process-step:hover .process-step-image img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid rgba(8, 42, 71, 0.075);
    border-radius: 13px;
    box-shadow: 0 10px 22px rgba(8, 42, 71, 0.10);
}

body.about-page #process .about-process-step[data-process-index="0"] .process-step-image img {
    object-position: center 47%;
}

body.about-page #process .about-process-step[data-process-index="1"] .process-step-image img {
    object-position: center 48%;
}

body.about-page #process .about-process-step[data-process-index="2"] .process-step-image img {
    object-position: center 54%;
}

body.about-page #process .about-process-step[data-process-index="3"] .process-step-image img {
    object-position: center 45%;
}

body.about-page #process .process-step-image::before {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 2;
    display: block;
    height: 43%;
    content: "";
    background: linear-gradient(180deg, rgba(249, 249, 246, 0) 0%, rgba(249, 249, 246, 0.12) 28%, rgba(249, 249, 246, 0.78) 78%, rgba(249, 249, 246, 0.98) 100%);
    border-radius: 0 0 13px 13px;
    pointer-events: none;
}

body.about-page #process .about-process-step.is-active-step .process-step-image::before {
    background: linear-gradient(180deg, rgba(255, 251, 240, 0) 0%, rgba(255, 251, 240, 0.08) 28%, rgba(255, 251, 240, 0.72) 78%, rgba(255, 251, 240, 0.96) 100%);
}

body.about-page #process .process-step-image::after {
    z-index: 3;
}

body.about-page #process .process-image-status {
    bottom: -17px;
    z-index: 5;
}

body.about-page #process .process-image-status .process-library-icon {
    position: absolute;
    display: block;
    width: 17px;
    height: 17px;
    opacity: 0;
    filter: brightness(0) invert(1);
    transform: scale(0.7);
    transition: opacity 420ms ease, transform 420ms ease;
}

@keyframes processArrowDrop {
    0%, 100% {
        transform: translate(-50%, 0) scale(1);
    }
    50% {
        transform: translate(-50%, 4px) scale(1.04);
    }
}

@media (max-width: 720px) {
    body.about-page #process .process-active-arrow {
        top: 83px;
        width: 16px;
        height: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.about-page #process .process-timeline-step.is-active-step .process-active-arrow {
        animation: none;
    }
}

/* Reference-matched process journey: separate timeline and compact translucent cards. */
body.about-page #process.about-process {
    padding: 76px 0 94px;
    background:
        radial-gradient(circle at 50% 8%, rgba(232, 198, 107, 0.11), transparent 25%),
        radial-gradient(circle at 86% 78%, rgba(41, 115, 125, 0.08), transparent 28%),
        linear-gradient(90deg, rgba(7, 30, 54, 0.024) 1px, transparent 1px),
        linear-gradient(180deg, rgba(7, 30, 54, 0.024) 1px, transparent 1px),
        linear-gradient(180deg, #FFFDF8 0%, #F8F5EF 58%, #F2F5F2 100%);
    background-size: auto, auto, 76px 76px, 76px 76px, auto;
}

body.about-page #process .about-section-heading {
    margin-bottom: 42px;
}

body.about-page #process .process-timeline {
    --process-progress: 0;
    --runner-position: 12.5%;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 142px;
    margin: 0 0 18px;
    align-items: start;
}

body.about-page #process .process-timeline::before,
body.about-page #process .process-timeline::after {
    position: absolute;
    top: 44px;
    right: 12.5%;
    left: 12.5%;
    z-index: 0;
    display: block;
    height: 3px;
    content: "";
    border-radius: 999px;
}

body.about-page #process .process-timeline::before {
    background: repeating-linear-gradient(90deg, rgba(88, 111, 129, 0.56) 0 7px, rgba(88, 111, 129, 0.09) 7px 14px);
    box-shadow: 0 3px 10px rgba(7, 30, 54, 0.06);
}

body.about-page #process .process-timeline::after {
    z-index: 1;
    height: 5px;
    background: linear-gradient(90deg, #D9A12F 0%, #F2C760 31%, #2F8882 68%, #1689C4 100%);
    background-size: 180% 100%;
    box-shadow: 0 0 10px rgba(217, 161, 47, 0.32), 0 0 20px rgba(22, 137, 196, 0.14);
    transform: scaleX(var(--process-progress));
    transform-origin: left center;
    transition: transform 950ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .process-timeline.is-running::after {
    animation: processLineShimmer 2s linear infinite;
}

body.about-page #process .process-timeline.is-resetting::after {
    transition: none;
}

body.about-page #process .process-timeline-step {
    position: relative;
    z-index: 3;
    display: flex;
    width: 100%;
    min-width: 0;
    padding: 0;
    flex-direction: column;
    align-items: center;
    color: #5E7487;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0.72;
    transform: translateY(0) scale(0.96);
    transition: opacity 620ms ease, color 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .process-timeline-step:focus-visible {
    outline: 2px solid var(--process-gold);
    outline-offset: 7px;
    border-radius: 18px;
}

body.about-page #process .process-timeline-step::after {
    position: absolute;
    top: 92px;
    left: 50%;
    width: 0;
    height: 0;
    content: "";
    border-top: 10px solid #0A3153;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    opacity: 0;
    transform: translate(-50%, -7px);
    transition: opacity 420ms ease, transform 420ms ease;
}

body.about-page #process .process-timeline-step .about-process-icon,
body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
    position: relative;
    top: auto;
    left: auto;
    z-index: 3;
    display: grid;
    width: 88px;
    height: 88px;
    margin: 0;
    place-items: center;
    overflow: visible;
    color: #526E82;
    background: rgba(249, 251, 250, 0.92);
    border: 1px solid rgba(104, 130, 147, 0.28);
    border-radius: 50%;
    box-shadow:
        0 10px 26px rgba(7, 30, 54, 0.10),
        0 0 0 7px rgba(255, 255, 255, 0.70),
        0 0 0 9px rgba(113, 140, 155, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    transform: none;
    animation: none;
    transition: color 620ms ease, border-color 620ms ease, box-shadow 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .process-timeline-step .about-process-icon::before {
    position: absolute;
    inset: 6px;
    z-index: 0;
    display: block;
    content: "";
    background:
        radial-gradient(circle at 32% 22%, rgba(31, 113, 145, 0.92), transparent 36%),
        linear-gradient(145deg, #0A5276 0%, #071E36 80%);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.78);
    transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .process-timeline-step .about-process-icon::after {
    position: absolute;
    inset: -10px;
    z-index: -1;
    display: block;
    content: "";
    border: 2px solid transparent;
    border-top-color: #EBC35B;
    border-right-color: rgba(22, 137, 196, 0.62);
    border-bottom-color: rgba(217, 161, 47, 0.42);
    border-radius: 50%;
    opacity: 0;
}

body.about-page #process .process-timeline-step .about-process-icon svg {
    position: relative;
    z-index: 2;
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    filter: none;
}

body.about-page #process .timeline-step-meta {
    display: inline-flex;
    min-height: 30px;
    margin-top: 18px;
    align-items: center;
    gap: 9px;
}

body.about-page #process .timeline-step-meta b {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    color: #3B7180;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(81, 119, 134, 0.18);
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(7, 30, 54, 0.07);
    font-size: 10px;
    line-height: 1;
}

body.about-page #process .timeline-step-meta em {
    color: currentColor;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

body.about-page #process .process-timeline-step.is-complete-step {
    color: #21746C;
    opacity: 0.94;
    transform: scale(0.985);
}

body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
    color: #376C77;
    border-color: rgba(48, 126, 119, 0.30);
}

body.about-page #process .process-timeline-step.is-active-step {
    color: #0A3153;
    opacity: 1;
    transform: translateY(-4px) scale(1.035);
}

body.about-page #process .process-timeline-step.is-active-step::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.about-page #process .process-timeline-step.is-active-step .about-process-icon {
    color: #FFF9E9;
    border: 3px solid #E8B84C;
    box-shadow:
        0 18px 38px rgba(7, 30, 54, 0.24),
        0 0 0 7px rgba(255, 255, 255, 0.86),
        0 0 0 12px rgba(232, 184, 76, 0.20),
        0 0 34px rgba(22, 137, 196, 0.20);
    transform: scale(1.12);
    animation: referenceNodePulse 1.8s ease-in-out infinite;
}

body.about-page #process .process-timeline-step.is-active-step .about-process-icon::before {
    opacity: 1;
    transform: scale(1);
}

body.about-page #process .process-timeline-step.is-active-step .about-process-icon::after {
    opacity: 1;
    animation: processIconOrbit 1.8s linear infinite;
}

body.about-page #process .process-timeline-step.is-active-step .timeline-step-meta b {
    color: #FFFFFF;
    background: #0A5276;
    border-color: transparent;
    box-shadow: 0 7px 16px rgba(10, 82, 118, 0.20);
}

body.about-page #process .process-timeline .process-route-runner {
    position: absolute;
    top: 46px;
    left: var(--runner-position);
    z-index: 2;
    display: grid;
    width: 15px;
    height: 15px;
    margin: 0;
    place-items: center;
    background: #FFFFFF;
    border: 4px solid #55BEF1;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(85, 190, 241, 0.10), 0 0 22px rgba(85, 190, 241, 0.70);
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: left 950ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .process-timeline.is-resetting .process-route-runner {
    transition: none;
}

body.about-page #process .process-timeline .process-route-runner::before {
    position: absolute;
    inset: -8px;
    content: "";
    border: 1px solid rgba(85, 190, 241, 0.52);
    border-radius: 50%;
    animation: processRunnerRipple 1.6s ease-out infinite;
}

body.about-page #process .process-timeline .process-route-runner::after {
    display: none;
}

body.about-page #process .about-process-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
    padding: 0;
}

body.about-page #process .about-process-track::before,
body.about-page #process .about-process-track::after {
    display: none;
}

body.about-page #process .about-process-step,
body.about-page #process .about-process-step.reveal,
body.about-page #process .about-process-step.reveal.is-visible,
body.about-page #process .about-process-step.is-complete-step,
body.about-page #process .about-process-step.is-active-step {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 390px;
    padding: 12px 14px 25px;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    color: #17354F;
    text-align: center;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.34), rgba(247, 250, 248, 0.12));
    border: 1px solid rgba(92, 120, 136, 0.18);
    border-radius: 18px;
    box-shadow: 0 13px 30px rgba(7, 30, 54, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.70);
    opacity: 0.64;
    filter: saturate(0.72);
    transform: scale(0.985);
    backdrop-filter: blur(4px);
    animation: none;
    transition: opacity 650ms ease, filter 650ms ease, border-color 650ms ease, box-shadow 650ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1), background 650ms ease;
}

body.about-page #process .about-process-step::before,
body.about-page #process .about-process-step::after,
body.about-page #process .about-process-step.reveal.is-visible::before,
body.about-page #process .about-process-step.reveal.is-visible::after {
    display: none;
}

body.about-page #process .about-process-step > * {
    position: relative;
    z-index: 2;
}

body.about-page #process .about-process-step.is-complete-step,
body.about-page #process .about-process-step.reveal.is-visible.is-complete-step {
    opacity: 0.90;
    filter: saturate(0.90);
    transform: scale(0.99);
}

body.about-page #process .about-process-step.is-active-step,
body.about-page #process .about-process-step.reveal.is-visible.is-active-step {
    z-index: 4;
    color: #0A2945;
    background: linear-gradient(160deg, rgba(255, 253, 245, 0.58), rgba(246, 250, 249, 0.22));
    border-color: rgba(224, 171, 53, 0.74);
    box-shadow:
        0 18px 42px rgba(7, 30, 54, 0.13),
        0 0 0 2px rgba(243, 198, 86, 0.18),
        0 0 30px rgba(232, 184, 76, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    opacity: 1;
    filter: saturate(1);
    transform: translateY(-5px) scale(1.018);
}

body.about-page #process .process-step-meta,
body.about-page #process .about-process-step.reveal.is-visible .process-step-meta {
    display: flex;
    width: 100%;
    min-height: 28px;
    margin: 0 0 9px;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

body.about-page #process .process-step-meta b,
body.about-page #process .about-process-step.reveal.is-visible .process-step-meta b {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #284862;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(80, 111, 132, 0.18);
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(7, 30, 54, 0.06);
    font-size: 9px;
    transform: none;
}

body.about-page #process .process-step-meta em {
    color: #24526C;
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

body.about-page #process .process-step-meta::after {
    margin-left: auto;
    padding: 4px 7px;
    content: "UP NEXT";
    color: #85939E;
    background: rgba(255, 255, 255, 0.54);
    border: 1px solid rgba(107, 126, 140, 0.18);
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.11em;
    line-height: 1;
    opacity: 0.9;
    animation: none;
}

body.about-page #process .about-process-step.is-complete-step .process-step-meta::after {
    content: "COMPLETE";
    color: #13978B;
    background: rgba(236, 255, 251, 0.74);
    border-color: rgba(19, 151, 139, 0.30);
}

body.about-page #process .about-process-step.is-active-step .process-step-meta::after {
    content: "IN PROGRESS";
    color: #FFFFFF;
    background: linear-gradient(90deg, #0878AD, #16A5C0);
    border-color: transparent;
    box-shadow: 0 5px 14px rgba(8, 120, 173, 0.19);
    animation: processStatusPulse 1.5s ease-in-out infinite;
}

body.about-page #process .process-step-image,
body.about-page #process .about-process-step.is-active-step .process-step-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 27px;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 13px;
    box-shadow: none;
    transform: none;
}

body.about-page #process .process-step-image img,
body.about-page #process .about-process-step:hover .process-step-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid rgba(7, 30, 54, 0.08);
    border-radius: 13px;
    box-shadow: 0 9px 20px rgba(7, 30, 54, 0.09);
    filter: saturate(0.62) contrast(0.98) brightness(1.06);
    transform: scale(1);
    transition: filter 650ms ease, transform 850ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 650ms ease;
}

body.about-page #process .about-process-step.is-complete-step .process-step-image img {
    filter: saturate(0.90) contrast(1.01) brightness(1.02);
}

body.about-page #process .about-process-step.is-active-step .process-step-image img {
    box-shadow: 0 13px 27px rgba(7, 30, 54, 0.16);
    filter: saturate(1.05) contrast(1.04) brightness(1.01);
    transform: scale(1.025);
}

body.about-page #process .process-step-image::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    content: "";
    background: linear-gradient(108deg, transparent 26%, rgba(255, 255, 255, 0.52) 48%, transparent 68%);
    border-radius: 13px;
    opacity: 0;
    transform: translateX(-130%);
    pointer-events: none;
}

body.about-page #process .about-process-step.is-active-step .process-step-image::after {
    animation: processImageSweep 3.6s ease-in-out infinite;
}

body.about-page #process .process-image-status {
    position: absolute;
    bottom: -35px;
    left: 50%;
    z-index: 4;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #82919C;
    background: rgba(255, 255, 255, 0.82);
    border: 1px dashed rgba(83, 109, 126, 0.52);
    border-radius: 50%;
    box-shadow: 0 7px 18px rgba(7, 30, 54, 0.10);
    transform: translateX(-50%) scale(0.86);
    transition: color 520ms ease, background 520ms ease, border-color 520ms ease, box-shadow 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.about-page #process .process-image-status svg {
    position: absolute;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 420ms ease, transform 420ms ease;
}

body.about-page #process .about-process-step.is-complete-step .process-image-status {
    color: #FFFFFF;
    background: linear-gradient(145deg, #34C7B8, #12A89B);
    border-color: #FFFFFF;
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.84), 0 7px 18px rgba(18, 168, 155, 0.24);
    transform: translateX(-50%) scale(1);
}

body.about-page #process .about-process-step.is-complete-step .process-image-status .status-check,
body.about-page #process .about-process-step.is-active-step .process-image-status .status-step {
    opacity: 1;
    transform: scale(1);
}

body.about-page #process .about-process-step.is-active-step .process-image-status {
    color: #FFF9E9;
    background: linear-gradient(145deg, #0A5276, #071E36);
    border: 2px solid #E7B94D;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.88), 0 9px 22px rgba(7, 30, 54, 0.24), 0 0 18px rgba(231, 185, 77, 0.25);
    transform: translateX(-50%) scale(1.08);
    animation: referenceMarkerPulse 1.7s ease-in-out infinite;
}

body.about-page #process .about-process-step h3,
body.about-page #process .about-process-step.reveal.is-visible h3 {
    max-width: 250px;
    margin: 0 auto 8px;
    padding: 0;
    color: #102C47;
    font-size: clamp(17px, 1.18vw, 20px);
    line-height: 1.12;
    text-align: center;
    transform: none;
}

body.about-page #process .about-process-step h3::after {
    display: none;
}

body.about-page #process .about-process-step p,
body.about-page #process .about-process-step.reveal.is-visible p {
    max-width: 250px;
    margin: 0 auto;
    color: #526C80;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.55;
    text-align: center;
}

body.about-page #process .process-card-progress {
    position: absolute;
    right: 35%;
    bottom: 0;
    left: 35%;
    z-index: 5;
    display: block;
    height: 3px;
    background: #AEBBC3;
    border-radius: 999px 999px 0 0;
    opacity: 0.42;
    transition: right 620ms ease, left 620ms ease, background 620ms ease, box-shadow 620ms ease, opacity 620ms ease;
}

body.about-page #process .about-process-step.is-complete-step .process-card-progress {
    right: 12%;
    left: 12%;
    background: linear-gradient(90deg, transparent, #26C4B5, transparent);
    box-shadow: 0 0 10px rgba(38, 196, 181, 0.34);
    opacity: 1;
}

body.about-page #process .about-process-step.is-active-step .process-card-progress {
    right: 8%;
    left: 8%;
    background: linear-gradient(90deg, transparent, #158BD0 24%, #E7B94D 72%, transparent);
    box-shadow: 0 0 13px rgba(21, 139, 208, 0.30), 0 0 16px rgba(231, 185, 77, 0.26);
    opacity: 1;
    animation: referenceCardProgress 3.6s ease-in-out infinite;
}

@keyframes referenceNodePulse {
    0%, 100% { transform: scale(1.09); }
    50% { transform: scale(1.15); }
}

@keyframes referenceMarkerPulse {
    0%, 100% { transform: translateX(-50%) scale(1.04); }
    50% { transform: translateX(-50%) scale(1.12); }
}

@keyframes referenceCardProgress {
    0%, 100% { background-position: 100% 0; transform: scaleX(0.82); }
    50% { background-position: 0 0; transform: scaleX(1); }
}

@media (max-width: 1080px) {
    body.about-page #process .process-timeline {
        min-height: 132px;
    }

    body.about-page #process .process-timeline .process-route-runner {
        display: grid;
    }

    body.about-page #process .about-process-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible {
        min-height: 420px;
    }
}

@media (max-width: 720px) {
    body.about-page #process.about-process {
        padding: 66px 0 74px;
    }

    body.about-page #process .process-timeline {
        grid-template-columns: repeat(4, 130px);
        min-height: 132px;
        margin-right: -24px;
        margin-left: -24px;
        padding: 4px 24px 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.about-page #process .process-timeline::-webkit-scrollbar {
        display: none;
    }

    body.about-page #process .process-timeline::before,
    body.about-page #process .process-timeline::after,
    body.about-page #process .process-timeline .process-route-runner {
        display: none;
    }

    body.about-page #process .process-timeline-step .about-process-icon,
    body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
        width: 74px;
        height: 74px;
    }

    body.about-page #process .process-timeline-step::after {
        top: 78px;
    }

    body.about-page #process .timeline-step-meta {
        margin-top: 14px;
    }

    body.about-page #process .about-process-track {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible,
    body.about-page #process .about-process-step.is-active-step {
        min-height: 0;
        padding: 12px 14px 28px;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.about-page #process .process-timeline::after {
        transform: scaleX(1);
        transition: none;
        animation: none;
    }

    body.about-page #process .process-timeline .process-route-runner {
        display: none;
    }

    body.about-page #process .process-timeline-step,
    body.about-page #process .process-timeline-step .about-process-icon,
    body.about-page #process .process-timeline-step .about-process-icon::after,
    body.about-page #process .about-process-step,
    body.about-page #process .process-step-image::after,
    body.about-page #process .process-image-status,
    body.about-page #process .process-card-progress {
        transition: none;
        animation: none;
    }
}

/* Final cascade: exact palette, proportions and motion from the supplied reference. */
body.about-page #process.about-process {
    background:
        radial-gradient(circle at 50% 5%, rgba(232, 179, 62, 0.10), transparent 23%),
        radial-gradient(circle at 84% 76%, rgba(24, 185, 170, 0.055), transparent 30%),
        linear-gradient(90deg, rgba(8, 42, 71, 0.020) 1px, transparent 1px),
        linear-gradient(180deg, rgba(8, 42, 71, 0.020) 1px, transparent 1px),
        linear-gradient(180deg, #FCFBF7 0%, #F8F6F0 62%, #F2F5F2 100%);
    background-size: auto, auto, 76px 76px, 76px 76px, auto;
}

body.about-page #process .process-timeline::before {
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(86, 106, 123, 0.72) 0 7px, rgba(86, 106, 123, 0.06) 7px 14px);
}

body.about-page #process .process-timeline::after {
    height: 4px;
    background: linear-gradient(90deg, #E4A92D 0%, #F1C14B 32%, #2D86C8 66%, #1699D5 100%);
    box-shadow: 0 0 8px rgba(232, 179, 62, 0.32), 0 0 17px rgba(21, 152, 212, 0.16);
}

body.about-page #process .process-timeline .process-route-runner {
    top: 46px;
    width: 13px;
    height: 13px;
    background: #56C8F6;
    border: 3px solid #FFFFFF;
    box-shadow: 0 0 0 5px rgba(86, 200, 246, 0.12), 0 0 20px rgba(21, 152, 212, 0.66);
    opacity: 0;
    transition: left 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}

body.about-page #process .process-timeline.is-advancing .process-route-runner {
    opacity: 1;
}

body.about-page #process .process-timeline-step .about-process-icon,
body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
    width: 86px;
    height: 86px;
    color: #587083;
    background: rgba(251, 251, 249, 0.94);
    border-color: rgba(95, 119, 135, 0.24);
    box-shadow: 0 10px 24px rgba(8, 42, 71, 0.09), 0 0 0 7px rgba(255, 255, 255, 0.72), 0 0 0 9px rgba(106, 128, 141, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

body.about-page #process .process-timeline-step.is-active-step .about-process-icon {
    width: 60px;
    height: 60px;
    color: #FFFFFF;
    background: #FFFFFF;
    border: 3px solid #E8B33E;
    box-shadow: 0 18px 38px rgba(8, 42, 71, 0.24), 0 0 0 6px rgba(255, 255, 255, 0.90), 0 0 0 10px rgba(232, 179, 62, 0.23), 0 0 0 15px rgba(21, 152, 212, 0.075), 0 0 34px rgba(21, 152, 212, 0.25);
}

body.about-page #process .process-timeline-step.is-active-step .about-process-icon::before {
    inset: 5px;
    background: radial-gradient(circle at 35% 24%, rgba(31, 116, 145, 0.98), transparent 38%), linear-gradient(150deg, #0B5276 0%, #082A47 76%);
}

body.about-page #process .process-timeline-step.is-active-step .about-process-icon::after {
    inset: -2px;
    border-width: 2px;
    border-top-color: rgba(232, 179, 62, 0.92);
    border-right-color: rgba(232, 179, 62, 0.28);
    border-bottom-color: rgba(21, 152, 212, 0.88);
    border-left-color: rgba(21, 152, 212, 0.18);
}

body.about-page #process .process-timeline-step.is-active-step::after {
    top: 96px;
    border-top-color: #082A47;
}

body.about-page #process .about-process-track {
    gap: 16px;
}

body.about-page #process .about-process-step,
body.about-page #process .about-process-step.reveal,
body.about-page #process .about-process-step.reveal.is-visible,
body.about-page #process .about-process-step.is-complete-step,
body.about-page #process .about-process-step.is-active-step {
    min-height: 358px;
    padding: 11px 13px 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.25), rgba(249, 250, 247, 0.08));
    border-color: rgba(94, 119, 135, 0.16);
    border-radius: 5px;
    box-shadow: 0 12px 28px rgba(8, 42, 71, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

body.about-page #process .about-process-step.is-complete-step,
body.about-page #process .about-process-step.reveal.is-visible.is-complete-step {
    opacity: 0.96;
    filter: saturate(0.95);
}

body.about-page #process .about-process-step.is-active-step,
body.about-page #process .about-process-step.reveal.is-visible.is-active-step {
    background: linear-gradient(160deg, rgba(255, 252, 242, 0.42), rgba(248, 251, 249, 0.13));
    border-color: rgba(232, 179, 62, 0.82);
    animation: referenceActiveCardGlow 2.2s ease-in-out infinite;
}

body.about-page #process .process-step-image,
body.about-page #process .about-process-step.is-active-step .process-step-image {
    margin-bottom: 25px;
}

body.about-page #process .about-process-step.is-complete-step .process-step-image img {
    filter: saturate(1.96) contrast(1.015) brightness(1.01);
}

body.about-page #process .about-process-step h3,
body.about-page #process .about-process-step.reveal.is-visible h3 {
    max-width: 245px;
    margin-bottom: 7px;
    color: #0D2A47;
    font-size: clamp(17px, 1.42vw, 28px);
}

body.about-page #process .about-process-step p,
body.about-page #process .about-process-step.reveal.is-visible p {
    max-width: 241px;
    color: #536B7D;
    font-size: 15.5px;
    line-height: 1.52;
}

body.about-page #process .about-process-step.is-complete-step .process-card-progress {
    background: linear-gradient(90deg, transparent, #18B9AA, transparent);
}

body.about-page #process .about-process-step.is-active-step .process-card-progress {
    background: linear-gradient(90deg, transparent, #1598D4 27%, #1678D5 46%, #E8B33E 74%, transparent);
    background-size: 180% 100%;
}

@media (max-width: 1080px) {
    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible {
        min-height: 396px;
    }
}

@media (max-width: 720px) {
    body.about-page #process .process-route-spark {
        display: none;
    }

    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible,
    body.about-page #process .about-process-step.is-active-step {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.about-page #process .process-route-spark,
    body.about-page #process .about-process-step.is-active-step {
        animation: none;
    }
}

/* Process card polish: keep imagery and copy as two distinct visual layers. */
body.about-page #process .about-process-step,
body.about-page #process .about-process-step.reveal,
body.about-page #process .about-process-step.reveal.is-visible,
body.about-page #process .about-process-step.is-complete-step,
body.about-page #process .about-process-step.is-active-step {
    padding: 8px;
    background: rgba(245, 247, 246, 0.82);
    border-color: rgba(80, 108, 127, 0.20);
    box-shadow: 0 16px 36px rgba(8, 42, 71, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body.about-page #process .about-process-step.is-active-step,
body.about-page #process .about-process-step.reveal.is-visible.is-active-step {
    background: #FFFCF3;
    border-color: rgba(232, 179, 62, 0.88);
    box-shadow: 0 20px 44px rgba(8, 42, 71, 0.15), 0 0 0 2px rgba(243, 198, 86, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

body.about-page #process .process-step-image,
body.about-page #process .about-process-step.is-active-step .process-step-image {
    flex: 0 0 auto;
    margin: 0;
    overflow: visible;
    border-radius: 14px;
}

body.about-page #process .process-step-image::before,
body.about-page #process .about-process-step.is-active-step .process-step-image::before {
    display: none;
}

body.about-page #process .process-step-image img,
body.about-page #process .about-process-step:hover .process-step-image img {
    border: 1px solid rgba(8, 42, 71, 0.14);
    border-radius: 0px;
    box-shadow: 0 10px 22px rgba(8, 42, 71, 0.12);
}

body.about-page #process .about-process-step.is-active-step .process-step-image img {
    border-color: rgba(8, 42, 71, 0.34);
    box-shadow: 0 14px 28px rgba(8, 42, 71, 0.18);
}

body.about-page #process .process-card-body {
    display: flex;
    width: 100%;
    min-height: 145px;
    margin-top: 0px;
    padding: 25px 5px 20px;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(84, 112, 130, 0.14);
    /* border-radius: 13px; */
    box-shadow: 0 7px 18px rgba(8, 42, 71, 0.05), inset 0 1px 0 #FFFFFF;
    position: relative;
    z-index: 1;

}

body.about-page #process .about-process-step.is-complete-step .process-card-body {
    border-top-color: rgba(24, 185, 170, 0.34);
}

body.about-page #process .about-process-step.is-active-step .process-card-body {
    background: #FFFFFF;
    border-color: rgba(232, 179, 62, 0.32);
    border-top-color: rgba(232, 179, 62, 0.74);
    box-shadow: 0 9px 22px rgba(8, 42, 71, 0.075), inset 0 1px 0 #FFFFFF;
    position: relative;
    z-index: 1;
}

body.about-page #process .about-process-step h3,
body.about-page #process .about-process-step.reveal.is-visible h3 {
    margin-bottom: 10px;
    line-height: 1.16;
}

body.about-page #process .about-process-step p,
body.about-page #process .about-process-step.reveal.is-visible p {
    line-height: 1.58;
}

body.about-page #process .process-card-progress {
    bottom: 12px;
}

@media (max-width: 1080px) {
    body.about-page #process .process-card-body {
        min-height: 158px;
    }
}

@media (max-width: 720px) {
    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible,
    body.about-page #process .about-process-step.is-active-step {
        padding: 11px;
    }

    body.about-page #process .process-card-body {
        min-height: 0;
        padding: 25px 20px 24px;
    }

body.about-page #process .process-card-progress {
        bottom: 11px;
    }
}

/* Lease-to-own feature panel: refined reference-style surface and ambient motion */
.solutions-page .featured-solution {
    --featured-accent: #f3aa36;
    position: relative;
    grid-template-columns: minmax(360px, .84fr) minmax(560px, 1.16fr);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(8, 31, 49, .99), rgba(3, 17, 31, .99));
    border-color: rgba(93, 166, 255, .6);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(146, 194, 255, .06);
}

.solutions-page .featured-solution::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background: linear-gradient(110deg, transparent 28%, rgba(115, 181, 255, .08) 48%, transparent 67%);
    opacity: 0;
    transform: translateX(-80%);
}

.solutions-page .featured-solution.is-visible::before {
    animation: featuredLightSweep 1.35s cubic-bezier(.2, .75, .25, 1) .45s both;
}

.solutions-page .featured-solution[data-active-solution="leasing"] { --featured-accent: #4d86ff; }
.solutions-page .featured-solution[data-active-solution="trading"] { --featured-accent: #39cbb8; }

.solutions-page .featured-solution-media::after {
    background: linear-gradient(to top, rgba(3, 16, 28, .84), rgba(3, 16, 28, .08) 62%);
}

.solutions-page .featured-solution.is-visible .featured-solution-media img {
    animation: featuredImageSettle 1.1s cubic-bezier(.2, .75, .25, 1) both;
}

.solutions-page .featured-value-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.solutions-page .featured-value-grid article { padding: 25px 18px; }
.solutions-page .featured-value-grid article + article { padding-left: 18px; }

.solutions-page .featured-value-grid article > span {
    color: var(--featured-accent);
    background: color-mix(in srgb, var(--featured-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--featured-accent) 42%, transparent);
}

.solutions-page .featured-solution.is-visible .featured-value-grid article {
    animation: featuredCardRise 650ms cubic-bezier(.2, .75, .25, 1) both;
   
}

.solutions-page .featured-solution.is-visible .featured-value-grid article:nth-child(1) { animation-delay: 230ms; }
.solutions-page .featured-solution.is-visible .featured-value-grid article:nth-child(2) { animation-delay: 310ms; }
.solutions-page .featured-solution.is-visible .featured-value-grid article:nth-child(3) { animation-delay: 390ms; }
.solutions-page .featured-solution.is-visible .featured-value-grid article:nth-child(4) { animation-delay: 470ms; }

.solutions-page .featured-benefits i { color: var(--featured-accent); }
.solutions-page .featured-media-tag i { color: var(--featured-accent); }

.solutions-page .featured-cta {
    background: linear-gradient(135deg, #f6c44f, var(--featured-accent));
    /* box-shadow: 0 14px 30px color-mix(in srgb, var(--featured-accent) 22%, transparent); */
}

@keyframes featuredLightSweep {
    0% { opacity: 0; transform: translateX(-80%); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translateX(130%); }
}

@keyframes featuredImageSettle {
    from { transform: scale(1.1); filter: saturate(.8) brightness(.78); }
    to { transform: scale(1); filter: saturate(1) brightness(1); }
}

@keyframes featuredCardRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) {
    .solutions-page .featured-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solutions-page .featured-value-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--solutions-line); }
    .solutions-page .featured-value-grid article:nth-child(4) { border-top: 1px solid var(--solutions-line); }
}

@media (max-width: 720px) {
    .solutions-page .featured-value-grid { grid-template-columns: 1fr; }
    .solutions-page .featured-value-grid article + article { padding-left: 0; }
    
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .featured-solution.is-visible::before,
    .solutions-page .featured-solution.is-visible .featured-solution-media img,
    .solutions-page .featured-solution.is-visible .featured-value-grid article { animation: none; }
}

/* Exact two-tier featured solution composition */
.solutions-page .featured-solution {
    --featured-accent: #2e7cff;
    display: block;
    min-height: 0;
    background: #03162b;
    border: 2px solid rgba(53, 128, 255, .72);
    border-radius: 17px;
    box-shadow: 0 28px 90px rgba(0, 4, 17, .52), 0 0 38px rgba(45, 118, 255, .12), inset 0 0 46px rgba(30, 100, 218, .05);
}

.solutions-page .featured-solution-main {
    display: grid;
    grid-template-columns: 42% 58%;
    min-height: 500px;
}

.solutions-page .featured-solution-media {
    min-height: 400px;
    margin: 24px 0 18px 24px;
    border: 1px solid rgba(173, 207, 255, .22);
    border-radius: 11px;
    box-shadow: 14px 14px 32px rgba(0, 0, 0, .22);
}

.solutions-page .featured-solution-media img {
    object-position: 63% center;
    transform: scale(1.045);
    animation: featuredBreathingImage 10s ease-in-out infinite alternate;
}

.solutions-page .featured-solution.is-visible .featured-solution-media img {
    animation: featuredBreathingImage 10s ease-in-out infinite alternate;
}

.solutions-page .featured-solution:hover .featured-solution-media img { transform: scale(1.085); }

.solutions-page .featured-solution-content {
    padding: 37px 40px 24px 36px;
}

.solutions-page .featured-solution-heading { gap: 12px; }

.solutions-page .featured-solution-heading h2 {
    max-width: 560px;
    font-size: clamp(35px, 3.2vw, 50px);
    letter-spacing: -.035em;
}

.solutions-page .featured-solution .solutions-kicker {
    margin-bottom: 7px;
    color: #4e94ff;
    font-size: 12px;
    letter-spacing: .13em;
}

.solutions-page .featured-number { display: none; }

.solutions-page .featured-overview {
    max-width: 690px;
    margin-top: 12px;
    color: #c3d1dd;
    font-size: 14px;
    line-height: 1.65;
}

.solutions-page .featured-value-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 22px;
    border-block: 0;
}

.solutions-page .featured-value-grid article,
.solutions-page .featured-value-grid article + article {
    padding: 0 16px;
    border: 0;
    border-left: 1px solid rgba(131, 172, 214, .17);
}

.solutions-page .featured-value-grid article:first-child {
    padding-left: 0;
    border-left: 0;
}

.solutions-page .featured-value-grid article > span {
    width: 48px;
    height: 48px;
    color: #52a0ff;
    background: rgba(33, 116, 237, .12);
    border: 1px solid rgba(69, 144, 255, .5);
    border-radius: 7px;
    box-shadow: inset 0 0 12px rgba(67, 143, 255, .1), 0 0 16px rgba(45, 124, 255, .12);
    animation: featuredIconPulse 3.5s ease-in-out infinite;
}

.solutions-page .featured-value-grid article:nth-child(2) > span { animation-delay: .4s; }
.solutions-page .featured-value-grid article:nth-child(3) > span { animation-delay: .8s; }
.solutions-page .featured-value-grid article:nth-child(4) > span { animation-delay: 1.2s; }

.solutions-page .featured-value-grid h3 {
    margin: 11px 0 6px;
    color: #5ca4ff;
    font-size: 14px;
}

.solutions-page .featured-value-grid p {
    color: #b4c2cf;
    font-size: 12px;
    line-height: 1.65;
}

.solutions-page .featured-media-tag {
    right: auto;
    bottom: 14px;
    left: 14px;
    padding: 11px 15px;
    color: #eef7ff;
    background: rgba(10, 53, 103, .91);
    border-color: rgba(74, 149, 255, .64);
    box-shadow: 0 11px 28px rgba(0, 10, 30, .34);
    font-size: 10px;
    animation: featuredTagFloat 4.8s ease-in-out infinite;
}

.solutions-page .featured-bottom {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    min-height: 98px;
    margin: 0 24px;
    padding: 17px 0;
    border-top: 1px solid rgba(126, 174, 222, .18);
}

.solutions-page .featured-benefits-label {
    color: #5da5ff;
    font-size: 14px;
}

.solutions-page .featured-benefits {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 14px;
}

.solutions-page .featured-benefits span {
    gap: 8px;
    color: #d0dce6;
    font-size: 13px;
    line-height: 1.42;
}

.solutions-page .featured-benefits i { color: #75b4ff; font-size: 18px; }

.solutions-page .featured-cta {
    min-width: 224px;
    min-height: 50px;
    justify-content: center;
    color: #f6fbff;
    background: linear-gradient(135deg, #2164d9, #327fee);
    border: 1px solid rgba(121, 180, 255, .6);
    /* box-shadow: 0 10px 26px rgba(23, 91, 209, .34), inset 0 1px 0 rgba(255,255,255,.22); */
    /* animation: featuredCtaGlow 3s ease-in-out infinite; */
}

@keyframes featuredBreathingImage {
    from { transform: scale(1.045) translateX(0); filter: saturate(1) brightness(.96); }
    to { transform: scale(1.09) translateX(-1.2%); filter: saturate(1.13) brightness(1.04); }
}

@keyframes featuredIconPulse {
    0%, 100% { transform: translateY(0); box-shadow: inset 0 0 12px rgba(67,143,255,.1), 0 0 12px rgba(45,124,255,.1); }
    50% { transform: translateY(-3px); box-shadow: inset 0 0 14px rgba(67,143,255,.2), 0 0 24px rgba(45,124,255,.28); }
}

@keyframes featuredTagFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes featuredCtaGlow {
    0%, 100% { box-shadow: 0 10px 26px rgba(23, 91, 209, .34), inset 0 1px 0 rgba(255,255,255,.22); }
    50% { box-shadow: 0 14px 34px rgba(43, 126, 255, .54), 0 0 24px rgba(60, 140, 255, .22), inset 0 1px 0 rgba(255,255,255,.32); }
}

@media (max-width: 1180px) {
    .solutions-page .featured-solution-main { grid-template-columns: 39% 61%; }
    .solutions-page .featured-solution-content { padding: 32px 28px 22px; }
    .solutions-page .featured-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
    .solutions-page .featured-value-grid article:nth-child(3) { padding-left: 0; border-left: 0; }
    .solutions-page .featured-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
    .solutions-page .featured-solution-main { grid-template-columns: 1fr; }
    .solutions-page .featured-solution-media { min-height: 400px; margin: 18px 18px 0; }
    .solutions-page .featured-solution-content { min-height: 0; }
}

@media (max-width: 720px) {
    .solutions-page .featured-solution-media { min-height: 310px; }
    .solutions-page .featured-solution-content { padding: 28px 11px; }
    .solutions-page .featured-value-grid { grid-template-columns: 1fr; }
    .solutions-page .featured-value-grid article,
    .solutions-page .featured-value-grid article + article { padding: 16px 0; border-top: 1px solid rgba(131,172,214,.17); border-left: 0; }
    .solutions-page .featured-value-grid article:first-child { border-top: 0; }
    .solutions-page .featured-bottom { grid-template-columns: 1fr; margin: 0 18px; }
    .solutions-page .featured-benefits { grid-template-columns: 1fr 1fr; }
    .solutions-page .featured-cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .featured-solution-media img,
    .solutions-page .featured-value-grid article > span,
    .solutions-page .featured-media-tag,
    .solutions-page .featured-cta { animation: none; }
}

/* Interactive comparison: priority filter + live three-solution board */
.solutions-page .solution-comparison {
    padding: 88px 0 74px;
    background: radial-gradient(ellipse at 53% 100%, rgba(20, 123, 213, .13), transparent 42%), #020f1f;
}

.solutions-page .comparison-experience {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.solutions-page .comparison-filter-panel { padding: 4px 0; }
.solutions-page .comparison-filter-panel .solutions-kicker { margin: 0 0 8px; color: #36c8bb; }

.solutions-page .comparison-filter-panel h2 {
    margin: 0;
    color: #f5f8fb;
    font-family: var(--display);
    font-size: clamp(30px, 2.7vw, 42px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.solutions-page .comparison-filter-panel > p:not(.solutions-kicker) {
    max-width: 220px;
    margin: 11px 0 22px;
    color: #b2c2ce;
    font-size: 14px;
    line-height: 1.48;
}

.solutions-page .comparison-filter-list { display: grid; gap: 9px; }

.solutions-page .comparison-filter {
    display: flex;
    width: 100%;
    min-height: 54px;
    gap: 13px;
    align-items: center;
    padding: 0 15px;
    color: #c7d4df;
    text-align: left;
    background: rgba(6, 28, 48, .78);
    border: 1px solid rgba(134, 168, 198, .25);
    border-radius: 8px;
    cursor: pointer;
    font: 600 12px var(--body);
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.solutions-page .comparison-filter i { width: 20px; color: #8ea5b8; font-size: 16px; text-align: center; }
.solutions-page .comparison-filter:hover { transform: translateX(4px); border-color: rgba(68, 164, 255, .64); }
.solutions-page .comparison-filter.is-active {
    color: #fff;
    background: linear-gradient(105deg, rgba(20, 101, 215, .25), rgba(6, 30, 50, .88));
    border-color: rgba(59, 150, 255, .76);
    box-shadow: inset 3px 0 0 #3d9cff, 0 0 22px rgba(35, 126, 246, .13);
}
.solutions-page .comparison-filter.is-active i { color: #f2bd43; animation: comparisonFilterIcon 1.8s ease-in-out infinite; }

.solutions-page .comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: visible;
    background: rgba(5, 24, 41, .64);
    border: 1px solid rgba(120, 161, 198, .24);
    border-radius: 12px;
}

.solutions-page .comparison-card {
    --comparison-accent: #2e7cff;
    min-height: 365px;
    overflow: visible;
    padding: 0;
    color: #e8f0f7;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(120, 161, 198, .16);
    border-radius: 0;
    box-shadow: none;
    transition: opacity 300ms ease, transform 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.solutions-page .comparison-card:first-child { border-left: 0; }
.solutions-page .comparison-card:nth-child(2) { --comparison-accent: #37c9b8; }
.solutions-page .comparison-card:nth-child(3) { --comparison-accent: #edb63c; }
.solutions-page .comparison-card:hover,
.solutions-page .comparison-card:focus-visible,
.solutions-page .comparison-card.is-active {
    transform: translateY(-7px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--comparison-accent) 11%, transparent), transparent 44%);
    border-color: color-mix(in srgb, var(--comparison-accent) 60%, transparent);
    box-shadow: 0 17px 36px rgba(0, 0, 0, .28), 0 0 0 1px color-mix(in srgb, var(--comparison-accent) 26%, transparent);
}

.solutions-page .comparison-card.is-filter-match {
    z-index: 2;
    transform: translateY(-6px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--comparison-accent) 13%, transparent), rgba(4, 24, 40, .54));
    box-shadow: 0 22px 42px rgba(0, 0, 0, .3), 0 0 0 1px color-mix(in srgb, var(--comparison-accent) 48%, transparent), 0 0 27px color-mix(in srgb, var(--comparison-accent) 17%, transparent);
    animation: comparisonWinner 680ms cubic-bezier(.2,.75,.25,1) both;
}

.solutions-page .comparison-card.is-filter-muted { opacity: .48; filter: saturate(.65); }

.solutions-page .comparison-card-head {
    display: flex;
    min-height: 92px;
    gap: 12px;
    align-items: center;
    padding: 20px 22px;
    background: transparent;
    border-bottom: 1px solid rgba(120, 161, 198, .16);
}

.solutions-page .comparison-icon {
    width: 45px;
    height: 45px;
    flex-basis: 45px;
    color: var(--comparison-accent);
    background: color-mix(in srgb, var(--comparison-accent) 13%, transparent);
    border-color: color-mix(in srgb, var(--comparison-accent) 55%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--comparison-accent) 13%, transparent);
}

.solutions-page .comparison-card-head strong { color: #f4f8fb; font-size: 12px; text-transform: uppercase; }

.solutions-page .comparison-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    min-height: 68px;
    gap: 10px;
    align-items: center;
    padding: 15px 22px;
    border-bottom: 1px solid rgba(120, 161, 198, .13);
}

.solutions-page .comparison-row b { color: #edf4f9; font-size: 12px; }
.solutions-page .comparison-row b i { margin-right: 7px; color: var(--comparison-accent); }
.solutions-page .comparison-row em { color: color-mix(in srgb, var(--comparison-accent) 78%, #b7c7d5); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .12em; }

.solutions-page .comparison-meter { grid-column: auto; height: 3px; background: rgba(255,255,255,.07); }
.solutions-page .comparison-meter i { background: var(--comparison-accent); box-shadow: 0 0 10px color-mix(in srgb, var(--comparison-accent) 60%, transparent); transition: width 500ms cubic-bezier(.2,.75,.25,1); }
.solutions-page .comparison-card.is-filter-match .comparison-meter i { animation: comparisonMeter 750ms cubic-bezier(.2,.75,.25,1) both; }

.solutions-page .comparison-recommended {
    top: -1px;
    right: 18px;
    padding: 6px 12px;
    color: #032421;
    background: #38c9b9;
    box-shadow: 0 7px 16px rgba(23, 181, 165, .25);
    font-size: 8px;
}

.solutions-page .comparison-detail-link {
    grid-column: 2;
    justify-self: center;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    padding: 12px 18px;
    color: #dceaf5;
    background: rgba(6, 28, 48, .78);
    border: 1px solid rgba(119, 161, 199, .3);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.solutions-page .comparison-detail-link:hover { color: #fff; border-color: #3d9cff; transform: translateY(-3px); }
.solutions-page .comparison-detail-link i:first-child { color: #50a1ff; }

@keyframes comparisonWinner { from { opacity: .55; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: translateY(-6px) scale(1); } }
@keyframes comparisonMeter { from { transform: scaleX(.05); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes comparisonFilterIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px) scale(1.08); } }

@media (max-width: 1080px) {
    .solutions-page .comparison-experience { grid-template-columns: 270px minmax(0, 1fr); gap: 20px; }
    .solutions-page .comparison-card-head, .solutions-page .comparison-row { padding-inline: 14px; }
    .solutions-page .comparison-row { grid-template-columns: 1fr auto; }
    .solutions-page .comparison-meter { grid-column: 1 / -1; }
    .solutions-page .comparison-detail-link { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    .solutions-page .comparison-experience { grid-template-columns: 1fr; }
    .solutions-page .comparison-filter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solutions-page .comparison-filter-panel > p:not(.solutions-kicker) { max-width: 400px; }
    .solutions-page .comparison-detail-link { grid-column: auto; }
}

@media (max-width: 640px) {
    .solutions-page .comparison-filter-list { grid-template-columns: 1fr; }
    .solutions-page .comparison-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px; background: transparent; border: 0; }
    .solutions-page .comparison-card, .solutions-page .comparison-card:first-child { min-height: 0; border: 1px solid rgba(120,161,198,.22); border-radius: 10px; }
    .solutions-page .comparison-card.is-filter-match { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .comparison-filter.is-active i,
    .solutions-page .comparison-card.is-filter-match,
    .solutions-page .comparison-card.is-filter-match .comparison-meter i { animation: none; }
}

/* Premium comparison board refresh */
.solutions-page .solution-comparison {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(72px, 8vw, 112px) 0;
    background:
        linear-gradient(180deg, rgba(1, 13, 28, .96), rgba(3, 18, 34, .98)),
        radial-gradient(circle at 78% 18%, rgba(242, 183, 57, .12), transparent 30%),
        radial-gradient(circle at 34% 85%, rgba(45, 166, 255, .16), transparent 34%);
}

.solutions-page .solution-comparison::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .32;
    background-image:
        linear-gradient(rgba(117, 166, 205, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117, 166, 205, .08) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 78%, transparent);
    animation: comparisonGridDrift 18s linear infinite;
}

.solutions-page .comparison-experience {
    position: relative;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: stretch;
}

.solutions-page .comparison-ambient {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(18px);
    opacity: .42;
}

.solutions-page .comparison-ambient-one {
    width: 280px;
    height: 280px;
    top: -44px;
    right: 6%;
    background: rgba(55, 201, 184, .22);
    animation: comparisonAmbientOne 9s ease-in-out infinite;
}

.solutions-page .comparison-ambient-two {
    width: 220px;
    height: 220px;
    right: 20%;
    bottom: -58px;
    background: rgba(237, 182, 60, .18);
    animation: comparisonAmbientTwo 11s ease-in-out infinite;
}

.solutions-page .comparison-filter-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    padding: 28px 0;
}

.solutions-page .comparison-filter-panel h2 {
    max-width: 360px;
    font-size: clamp(30px, -0.5vw, 62px);
    line-height: .98;
    letter-spacing: 0;
}

.solutions-page .comparison-filter-panel > p:not(.solutions-kicker) {
    max-width: 280px;
    margin: 18px 0 28px;
    color: #c4d8e8;
    font-size: 17px;
}

.solutions-page .comparison-filter-list {
    gap: 12px;
}

.solutions-page .comparison-filter {
    min-height: 68px;
    gap: 16px;
    padding: 0 20px;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(13, 45, 71, .84), rgba(5, 25, 45, .74)),
        rgba(6, 28, 48, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    font-size: 14px;
}

.solutions-page .comparison-filter i {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(141, 194, 232, .08);
}

.solutions-page .comparison-filter:hover {
    transform: translateX(6px);
    background:
        linear-gradient(135deg, rgba(19, 64, 99, .92), rgba(5, 25, 45, .8)),
        rgba(6, 28, 48, .82);
}

.solutions-page .comparison-filter.is-active {
    background:
        linear-gradient(135deg, rgba(19, 119, 214, .34), rgba(9, 35, 58, .92)),
        rgba(6, 28, 48, .82);
    box-shadow: inset 4px 0 0 #3d9cff, 0 14px 30px rgba(10, 83, 159, .18);
}

.solutions-page .comparison-grid {
    position: relative;
    gap: 14px;
    padding: 14px;
    overflow: visible;
    border-color: rgba(133, 180, 215, .28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)),
        rgba(5, 22, 38, .82);
    box-shadow: 0 32px 70px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
}

.solutions-page .comparison-grid::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, rgba(61, 156, 255, .45), rgba(55, 201, 184, .24), rgba(237, 182, 60, .5));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.solutions-page .comparison-card,
.solutions-page .comparison-card:first-child {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid rgba(122, 167, 202, .18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--comparison-accent) 9%, transparent), rgba(4, 18, 32, .74) 44%),
        rgba(5, 23, 39, .82);
    transform: translateY(0);
    animation: comparisonCardRise 650ms cubic-bezier(.2,.75,.25,1) both;
}

.solutions-page .comparison-card:nth-child(2) { animation-delay: 90ms; }
.solutions-page .comparison-card:nth-child(3) { animation-delay: 180ms; }

.solutions-page .comparison-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--comparison-accent) 22%, transparent), transparent 52%);
    transition: opacity 260ms ease;
    pointer-events: none;
}

.solutions-page .comparison-card:hover,
.solutions-page .comparison-card:focus-visible,
.solutions-page .comparison-card.is-active,
.solutions-page .comparison-card.is-filter-match {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--comparison-accent) 62%, transparent);
    box-shadow: 0 28px 54px rgba(0, 0, 0, .34), 0 0 32px color-mix(in srgb, var(--comparison-accent) 16%, transparent);
}

.solutions-page .comparison-card.is-filter-match {
    animation: comparisonSelectedPulse 1.8s ease-in-out infinite;
}

.solutions-page .comparison-card:hover::before,
.solutions-page .comparison-card:focus-visible::before,
.solutions-page .comparison-card.is-active::before,
.solutions-page .comparison-card.is-filter-match::before {
    opacity: 1;
}

.solutions-page .comparison-card.is-filter-muted {
    opacity: .56;
    filter: saturate(.72);
}

.solutions-page .comparison-card-head {
    position: relative;
    min-height: 116px;
    padding: 24px 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .045), transparent),
        transparent;
}

.solutions-page .comparison-icon {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    border-radius: 999px;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--comparison-accent) 9%, transparent), 0 0 22px color-mix(in srgb, var(--comparison-accent) 24%, transparent);
}

.solutions-page .comparison-card-head strong {
    display: block;
    margin-top: 5px;
    font-size: 15px;
    letter-spacing: 0;
}

.solutions-page .comparison-card-head small {
    display: block;
    color: color-mix(in srgb, var(--comparison-accent) 72%, #d7e6ef);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.solutions-page .comparison-row {
    position: relative;
    grid-template-columns: minmax(80px, 1fr) minmax(92px, 1.8fr) minmax(42px, auto);
    min-height: 78px;
    gap: 12px;
    padding: 18px 28px;
}

.solutions-page .comparison-row::before {
    position: absolute;
    top: 10px;
    left: 28px;
    color: #7e96a8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.solutions-page .comparison-row[data-metric="upfront"]::before { content: "Upfront Cost"; }
.solutions-page .comparison-row[data-metric="flexibility"]::before { content: "Flexibility"; }
.solutions-page .comparison-row[data-metric="ownership"]::before { content: "Ownership"; }
.solutions-page .comparison-row[data-metric="value"]::before { content: "Investment Value"; }

.solutions-page .comparison-row b {
    padding-top: 12px;
    font-size: 15px;
}

.solutions-page .comparison-row em {
    padding-top: 12px;
    font-size: 12px;
    letter-spacing: 0;
}

.solutions-page .comparison-meter {
    height: 5px;
    margin-top: 12px;
    overflow: visible;
    border-radius: 999px;
}

.solutions-page .comparison-meter i {
    position: relative;
    display: block;
    height: 100%;
    border-radius: inherit;
}

.solutions-page .comparison-meter i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 16px color-mix(in srgb, var(--comparison-accent) 80%, transparent);
    transform: translateY(-50%);
}

.solutions-page .comparison-recommended {
    top: 0;
    right: 18px;
    z-index: 3;
    padding: 9px 16px;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(135deg, #42ddcc, #28bfae);
    font-size: 9px;
    letter-spacing: .14em;
}

.solutions-page .comparison-detail-link {
    margin-top: 24px;
    padding: 14px 22px;
    background: linear-gradient(135deg, rgba(7, 34, 59, .9), rgba(10, 49, 76, .78));
    box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
}

@keyframes comparisonCardRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes comparisonSelectedPulse {
    0%, 100% { transform: translateY(-8px); }
    50% { transform: translateY(-11px); }
}

@keyframes comparisonGridDrift {
    from { background-position: 0 0; }
    to { background-position: 56px 56px; }
}

@keyframes comparisonAmbientOne {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-28px, 18px, 0) scale(1.08); }
}

@keyframes comparisonAmbientTwo {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(24px, -20px, 0) scale(.94); }
}

@media (max-width: 1180px) {
    .solutions-page .comparison-experience {
        grid-template-columns: 1fr;
    }

    .solutions-page .comparison-filter-panel {
        padding: 0;
    }

    .solutions-page .comparison-filter-panel > p:not(.solutions-kicker) {
        max-width: 520px;
    }

    .solutions-page .comparison-filter-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .solutions-page .comparison-detail-link {
        grid-column: 1;
    }
}

@media (max-width: 860px) {
    .solutions-page .comparison-filter-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solutions-page .comparison-grid {
        grid-template-columns: 1fr;
    }

    .solutions-page .comparison-card,
    .solutions-page .comparison-card:first-child {
        min-height: 0;
    }
}

@media (max-width: 560px) {
    .solutions-page .solution-comparison {
        padding: 58px 0;
    }

    .solutions-page .comparison-filter-list {
        grid-template-columns: 1fr;
    }

    .solutions-page .comparison-filter {
        min-height: 60px;
    }

    .solutions-page .comparison-grid {
        padding: 10px;
    }

    .solutions-page .comparison-card-head,
    .solutions-page .comparison-row {
        padding-inline: 18px;
    }

    .solutions-page .comparison-row {
        grid-template-columns: 1fr auto;
    }

    .solutions-page .comparison-row::before {
        left: 18px;
    }

    .solutions-page .comparison-meter {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solution-comparison::before,
    .solutions-page .comparison-ambient,
    .solutions-page .comparison-card,
    .solutions-page .comparison-card.is-filter-match {
        animation: none;
    }
}

/* Solution finder: visual hierarchy and interaction refinement */
.solutions-page .finder-shell {
    grid-template-columns: minmax(270px, .9fr) minmax(620px, 2.05fr) minmax(250px, .8fr);
    gap: clamp(24px, 2.2vw, 38px);
    min-height: 0;
    padding: clamp(26px, 2.6vw, 38px);
    border-radius: 16px;
}

.solutions-page .finder-shell::after {
    inset: 12px;
    border-radius: 10px;
}

.solutions-page .finder-intro h2 {
    max-width: 310px;
    font-size: clamp(30px, 2.2vw, 40px);
    line-height: 1.07;
}

.solutions-page .finder-intro > p:not(.solutions-kicker) {
    max-width: 300px;
    margin-top: 17px;
    font-size: 14px;
}

.solutions-page .finder-form {
    gap: clamp(20px, 2.1vw, 32px);
}

.solutions-page .finder-question {
    min-height: 260px;
    padding: 18px;
    overflow: visible;
    border-radius: 12px;
    background:
        linear-gradient(155deg, rgba(18, 51, 76, .94), rgba(4, 20, 36, .9)),
        rgba(4, 20, 36, .82);
}

.solutions-page .finder-question-legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.solutions-page .finder-question-heading {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-height: 38px;
    margin-bottom: 15px;
}

.solutions-page .finder-question-heading > span {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    color: #4be0cf;
    background: rgba(58, 211, 193, .10);
    border: 1px solid rgba(74, 222, 207, .25);
    border-radius: 50%;
    place-items: center;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
}

.solutions-page .finder-question-heading  h3 {
    padding-top: 4px;
    color: #f2f7fa;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.28;
}

.solutions-page .finder-question::before {
    width: 46px;
    height: 46px;
    margin: 0 0 13px;
    color: #b9cad7;
    border-width: 1px;
    font-size: 21px;
    box-shadow: 0 0 0 6px rgba(157, 183, 202, .055);
}

.solutions-page .finder-question-heading + .finder-options {
    margin-top: 20PX;
}

.solutions-page .finder-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
}

.solutions-page .finder-options label > span {
    width: 100%;
    min-height: 34px;
    justify-content: flex-start;
    padding: 8px 10px;
    font-size: 10px;
}

.solutions-page .finder-options label > span i {
    width: 15px;
    text-align: center;
}

.solutions-page .finder-options input:checked + span {
    background: linear-gradient(135deg, #4ae0cf, #25bcae);
    box-shadow: 0 9px 20px rgba(55, 201, 184, .22);
}

.solutions-page .finder-result {
    min-height: 260px;
    padding: 24px;
    border-radius: 12px;
    justify-content: center;
}

.solutions-page .finder-result > p {
    margin-bottom: 14px;
}

.solutions-page .finder-result h3 {
    max-width: 190px;
    font-size: clamp(23px, 1.8vw, 29px);
    line-height: 1.16;
}

.solutions-page .finder-result-link {
    margin-top: 22px;
}

@media (max-width: 1320px) {
    .solutions-page .finder-shell {
        grid-template-columns: minmax(240px, .8fr) minmax(540px, 1.8fr);
    }

    .solutions-page .finder-result {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .solutions-page .finder-result-link {
        width: auto;
        min-width: 210px;
    }

    .solutions-page .finder-result::before {
        display: none;
    }
}

@media (max-width: 1050px) {
    .solutions-page .finder-shell {
        grid-template-columns: 1fr;
    }

    .solutions-page .finder-intro h2,
    .solutions-page .finder-intro > p:not(.solutions-kicker) {
        max-width: 560px;
    }
}

@media (max-width: 860px) {
    .solutions-page .finder-question {
        min-height: 0;
    }
}

/* Premium solution finder journey */
.solutions-page .solution-finder {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(64px, 5vw, 104px) 0;
    background:
        radial-gradient(circle at 74% 42%, rgba(55, 201, 184, .12), transparent 30%),
        radial-gradient(circle at 18% 90%, rgba(61, 156, 255, .10), transparent 28%),
        linear-gradient(180deg, #020f1f 0%, #031321 100%);
}

.solutions-page .solution-finder::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .28;
    background-image:
        linear-gradient(rgba(110, 159, 194, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 159, 194, .08) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 86%, transparent);
    animation: finderGridMove 20s linear infinite;
}

.solutions-page .finder-shell {
    position: relative;
    grid-template-columns: minmax(230px, .8fr) minmax(520px, 1.7fr) minmax(210px, .65fr);
    gap: clamp(18px, 2.4vw, 30px);
    align-items: center;
    min-height: 188px;
    padding: clamp(18px, 2.4vw, 28px);
    overflow: hidden;
    border-color: rgba(93, 144, 177, .42);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(9, 34, 54, .93), rgba(3, 18, 34, .96)),
        rgba(4, 20, 36, .9);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.solutions-page .finder-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .72;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .06) 42%, transparent 58%);
    transform: translateX(-120%);
    animation: finderSurfaceSweep 7s ease-in-out infinite;
    pointer-events: none;
}

.solutions-page .finder-shell::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(128, 177, 211, .16);
    border-radius: 6px;
    pointer-events: none;
}

.solutions-page .finder-intro {
    position: relative;
    z-index: 1;
    padding: 0;
}

.solutions-page .finder-intro .solutions-kicker {
    margin-bottom: 8px;
    color: #35cbb9;
    text-shadow: 0 0 18px rgba(53, 203, 185, .24);
}

.solutions-page .finder-intro h2 {
    max-width: 260px;
    color: #f5f8fb;
    font-size: clamp(23px, 2vw, 31px);
    line-height: 1.08;
    letter-spacing: 0;
}

.solutions-page .finder-intro > p:not(.solutions-kicker) {
    max-width: 270px;
    margin-top: 14px;
    color: #bdcbd7;
    font-size: 13px;
    line-height: 1.58;
}

.solutions-page .finder-form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 42px);
    align-items: stretch;
}

.solutions-page .finder-question {
    position: relative;
    display: grid;
    min-height: 118px;
    margin: 0;
    padding: 18px 16px 14px;
    align-content: start;
    overflow: visible;
    border: 1px solid rgba(126, 160, 183, .32);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(13, 39, 61, .88), rgba(5, 23, 39, .76)),
        rgba(4, 20, 36, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 32px rgba(0, 0, 0, .18);
    animation: finderStepIn 700ms cubic-bezier(.2,.75,.25,1) both;
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.solutions-page .finder-question:nth-child(2) { animation-delay: 110ms; }
.solutions-page .finder-question:nth-child(3) { animation-delay: 220ms; }

.solutions-page .finder-question::before {
    display: grid;
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
    place-items: center;
    color: #a9bbca;
    border: 2px solid rgba(181, 199, 213, .68);
    border-radius: 999px;
    font-family: "Font Awesome 6 Free";
    font-size: 26px;
    font-weight: 900;
    box-shadow: 0 0 0 7px rgba(157, 183, 202, .06);
    transition: color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.solutions-page .finder-question:nth-child(1)::before { content: "\f140"; }
.solutions-page .finder-question:nth-child(2)::before { content: "\f017"; font-family: "Font Awesome 6 Free"; font-weight: 400; }
.solutions-page .finder-question:nth-child(3)::before { content: "\f4c0"; }

.solutions-page .finder-question::after {
    content: "\f061";
    position: absolute;
    top: 50%;
    right: clamp(-31px, -2.4vw, -20px);
    color: #a8bdcb;
    font-family: "Font Awesome 6 Free";
    font-size: 18px;
    font-weight: 900;
    transform: translateY(-50%);
    animation: finderArrowFlow 1.8s ease-in-out infinite;
}

.solutions-page .finder-question:nth-child(3)::after {
    display: none;
}

.solutions-page .finder-question:hover,
.solutions-page .finder-question:focus-within {
    transform: translateY(-5px);
    border-color: rgba(55, 201, 184, .62);
    background:
        linear-gradient(145deg, rgba(18, 56, 82, .94), rgba(5, 24, 41, .82)),
        rgba(4, 20, 36, .76);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .24), 0 0 28px rgba(55, 201, 184, .12);
}

.solutions-page .finder-question:hover::before,
.solutions-page .finder-question:focus-within::before {
    color: #37c9b8;
    border-color: #37c9b8;
    box-shadow: 0 0 0 7px rgba(55, 201, 184, .10), 0 0 28px rgba(55, 201, 184, .2);
    transform: scale(1.04);
}

.solutions-page .finder-question legend {
    display: block;
    width: 100%;
    color: #f0f5f8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.38;
}

.solutions-page .finder-question legend span {
    display: inline;
    margin: 0 6px 0 0;
    color: #d4dde5;
    font-size: 10px;
    letter-spacing: 0;
}

.solutions-page .finder-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

.solutions-page .finder-options label {
    min-width: 0;
}

.solutions-page .finder-options label > span {
    min-height: 29px;
    gap: 6px;
    padding: 7px 9px;
    color: #96a9b8;
    background: rgba(255, 255, 255, .035);
    border-color: rgba(135, 166, 188, .18);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.solutions-page .finder-options label > span i {
    width: auto;
    color: #758d9f;
    font-size: 10px;
}

.solutions-page .finder-options input:checked + span {
    color: #03201d;
    background: linear-gradient(135deg, #42ddcc, #28bfae);
    border-color: rgba(66, 221, 204, .9);
    box-shadow: 0 8px 18px rgba(55, 201, 184, .16);
}

.solutions-page .finder-options input:checked + span i {
    color: #03201d;
}

.solutions-page .finder-result {
    position: relative;
    z-index: 1;
    min-height: 136px;
    padding: 18px;
    justify-content: center;
    border-color: rgba(55, 201, 184, .72);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(29, 116, 107, .22), rgba(5, 28, 45, .92)),
        rgba(4, 24, 41, .86);
    box-shadow: 0 0 0 1px rgba(55, 201, 184, .12), 0 18px 36px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
    animation: finderResultGlow 2.8s ease-in-out infinite;
}

.solutions-page .finder-result::before {
    content: "\f061";
    position: absolute;
    top: 50%;
    left: clamp(-31px, -2.4vw, -20px);
    color: #a8bdcb;
    font-family: "Font Awesome 6 Free";
    font-size: 18px;
    font-weight: 900;
    transform: translateY(-50%);
    animation: finderArrowFlow 1.8s ease-in-out infinite;
}

.solutions-page .finder-result-icon,
.solutions-page .finder-result > span:not(.finder-result-icon) {
    display: none;
}

.solutions-page .finder-result > p {
    margin: 0 0 12px;
    color: #35cbb9;
    font-size: 9px;
    letter-spacing: .12em;
}

.solutions-page .finder-result h3 {
    color: #f8fbfd;
    font-family: var(--body);
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 800;
    letter-spacing: 0;
}

.solutions-page .finder-result-link {
    width: 100%;
    min-height: 42px;
    margin-top: 16px;
    padding: 10px 13px;
    border-color: rgba(186, 207, 220, .45);
    border-radius: 6px;
    background: rgba(255, 255, 255, .035);
    font-size: 10px;
}

.solutions-page .finder-result-link:hover {
    color: #031b19;
    background: linear-gradient(135deg, #42ddcc, #28bfae);
    border-color: #42ddcc;
    transform: translateY(-2px);
}

@keyframes finderGridMove {
    from { background-position: 0 0; }
    to { background-position: 52px 52px; }
}

@keyframes finderSurfaceSweep {
    0%, 58% { transform: translateX(-120%); }
    78%, 100% { transform: translateX(120%); }
}

@keyframes finderStepIn {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes finderArrowFlow {
    0%, 100% { opacity: .58; transform: translateY(-50%) translateX(0); }
    50% { opacity: 1; transform: translateY(-50%) translateX(5px); }
}

@keyframes finderArrowDown {
    0%, 100% { opacity: .58; transform: translateX(-50%) rotate(90deg) translateX(0); }
    50% { opacity: 1; transform: translateX(-50%) rotate(90deg) translateX(5px); }
}

@keyframes finderResultGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(55, 201, 184, .12), 0 18px 36px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06); }
    50% { box-shadow: 0 0 0 1px rgba(55, 201, 184, .26), 0 20px 40px rgba(0, 0, 0, .24), 0 0 28px rgba(55, 201, 184, .16), inset 0 1px 0 rgba(255, 255, 255, .08); }
}

@media (max-width: 1180px) {
    .solutions-page .finder-shell {
        grid-template-columns: 1fr;
    }

    .solutions-page .finder-intro h2,
    .solutions-page .finder-intro > p:not(.solutions-kicker) {
        max-width: 560px;
    }

    .solutions-page .finder-result::before {
        display: none;
    }
}

@media (max-width: 860px) {
    .solutions-page .finder-form {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .solutions-page .finder-question::after {
        top: auto;
        right: auto;
        bottom: -19px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
        animation-name: finderArrowDown;
    }

    .solutions-page .finder-question {
        min-height: 0;
    }
}

@media (max-width: 560px) {
    .solutions-page .finder-shell {
        padding: 16px;
    }

    .solutions-page .finder-question {
        padding: 16px 14px 14px;
    }

    .solutions-page .finder-options label > span {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solution-finder::before,
    .solutions-page .finder-shell::before,
    .solutions-page .finder-question,
    .solutions-page .finder-question::after,
    .solutions-page .finder-result,
    .solutions-page .finder-result::before {
        animation: none;
    }
}

/* Solution finder: premium motion pass */
.solutions-page .solution-finder {
    position: relative;
    isolation: isolate;
}

.solutions-page .solution-finder::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .36;
    background-image:
        linear-gradient(90deg, transparent 0 42%, rgba(47, 214, 196, .08) 50%, transparent 58%),
        linear-gradient(rgba(106, 151, 181, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106, 151, 181, .05) 1px, transparent 1px);
    background-size: 360px 100%, 64px 64px, 64px 64px;
    animation: finderLivingField 18s linear infinite;
    pointer-events: none;
}

.solutions-page .finder-shell {
    grid-template-columns: minmax(300px, .86fr) minmax(760px, 2.1fr) minmax(280px, .84fr);
    gap: clamp(24px, 2.4vw, 40px);
    align-items: center;
    padding: clamp(24px, 2.7vw, 36px);
    border-color: rgba(101, 155, 190, .48);
    background:
        linear-gradient(135deg, rgba(10, 37, 58, .96), rgba(4, 18, 33, .98)),
        rgba(3, 17, 31, .94);
}

.solutions-page .finder-shell::before {
    opacity: .82;
    background:
        linear-gradient(90deg, transparent, rgba(49, 216, 200, .08), transparent),
        linear-gradient(135deg, transparent 0 34%, rgba(255, 255, 255, .045) 48%, transparent 62%);
    animation: finderSurfaceSweep 6s ease-in-out infinite;
}

.solutions-page .finder-intro h2 {
    max-width: 330px;
    font-size: clamp(31px, 2.35vw, 42px);
    line-height: 1.02;
}

.solutions-page .finder-intro > p:not(.solutions-kicker) {
    max-width: 300px;
    font-size: 14px;
}

.solutions-page .finder-form {
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    gap: clamp(24px, 2.2vw, 36px);
}

.solutions-page .finder-question {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "options options";
    column-gap: 14px;
    min-height: 0;
    padding: 22px 20px 20px;
    align-content: start;
    overflow: hidden;
}

.solutions-page .finder-question::before {
    grid-area: icon;
    width: 50px;
    height: 50px;
    margin: 0;
    align-self: center;
    font-size: 21px;
    background:
        radial-gradient(circle at 50% 50%, rgba(53, 203, 185, .16), transparent 54%),
        rgba(255, 255, 255, .02);
    animation: finderIconBreath 3.4s ease-in-out infinite;
}

.solutions-page .finder-question-heading {
    grid-area: title;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    margin: 0;
}

.solutions-page .finder-question-heading > span {
    width: 29px;
    height: 29px;
    margin-top: 2px;
    font-size: 10px;
    box-shadow: inset 0 0 0 1px rgba(55, 201, 184, .46), 0 0 18px rgba(55, 201, 184, .12);
}

.solutions-page .finder-question-heading  h3 {
    max-width: 150px;
    color: #f6fbfd;
    font-size: 14px;
    line-height: 1.22;
    letter-spacing: 0;
}

.solutions-page .finder-options {
    grid-area: options;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 20px;
}

.solutions-page .finder-options label > span {
    width: 100%;
    min-height: 36px;
    justify-content: flex-start;
    padding: 9px 12px;
    border-radius: 999px;
    color: #a7b7c4;
    font-size: 11px;
    line-height: 1.1;
    white-space: normal;
    background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025));
}

.solutions-page .finder-options input:checked + span {
    position: relative;
    overflow: hidden;
    color: #031f1c;
    background: linear-gradient(135deg, #4ae4d2, #28bfae 72%, #1aa493);
    box-shadow: 0 10px 24px rgba(47, 214, 196, .22), inset 0 1px 0 rgba(255, 255, 255, .42);
}

.solutions-page .finder-options input:checked + span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: translateX(-140%);
    animation: finderChoiceSheen 2.8s ease-in-out infinite;
}

.solutions-page .finder-result {
    min-height: 188px;
    padding: 24px 22px;
    overflow: hidden;
}

.solutions-page .finder-result-icon {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    color: #35cbb9;
    border: 1px solid rgba(53, 203, 185, .34);
    border-radius: 999px;
    place-items: center;
    background: rgba(53, 203, 185, .08);
}

.solutions-page .finder-result h3 {
    font-size: clamp(24px, 1.9vw, 32px);
    line-height: 1.06;
}

.solutions-page .finder-result > span:not(.finder-result-icon) {
    display: block;
    margin-top: 10px;
    color: #b9c9d5;
    font-size: 12px;
    line-height: 1.48;
}

.solutions-page .finder-result-link {
    margin-top: 20px;
    min-height: 48px;
    font-size: 11px;
}

@keyframes finderLivingField {
    from { background-position: -360px 0, 0 0, 0 0; }
    to { background-position: 360px 0, 64px 64px, 64px 64px; }
}

@keyframes finderIconBreath {
    0%, 100% { box-shadow: 0 0 0 7px rgba(157, 183, 202, .06), 0 0 0 rgba(55, 201, 184, 0); }
    50% { box-shadow: 0 0 0 7px rgba(55, 201, 184, .09), 0 0 24px rgba(55, 201, 184, .18); }
}

@keyframes finderChoiceSheen {
    0%, 46% { transform: translateX(-140%); opacity: 0; }
    62% { opacity: .72; }
    100% { transform: translateX(140%); opacity: 0; }
}

@media (max-width: 1380px) {
    .solutions-page .finder-shell {
        grid-template-columns: minmax(260px, .82fr) minmax(660px, 1.9fr);
    }

    .solutions-page .finder-result {
        grid-column: 2;
        max-width: 360px;
        justify-self: end;
    }

    .solutions-page .finder-result::before {
        display: none;
    }
}

@media (max-width: 1120px) {
    .solutions-page .finder-shell {
        grid-template-columns: 1fr;
    }

    .solutions-page .finder-form {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
    }

    .solutions-page .finder-result {
        grid-column: auto;
        max-width: none;
        justify-self: stretch;
    }
}

@media (max-width: 760px) {
    .solutions-page .finder-form {
        grid-template-columns: 1fr;
    }

    .solutions-page .finder-question {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .solutions-page .finder-question-heading  h3 {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solution-finder::after,
    .solutions-page .finder-question::before,
    .solutions-page .finder-options input:checked + span::after {
        animation: none;
    }
}

/* Solution finder: overflow guard and final composition */
.solutions-page .solution-finder .container {
    width: min(100% - 56px, 1600px);
}

.solutions-page .finder-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(270px, .85fr) minmax(0, 2.35fr) minmax(250px, .78fr);
    gap: clamp(22px, 2vw, 34px);
    overflow: hidden;
}

.solutions-page .finder-intro,
.solutions-page .finder-form,
.solutions-page .finder-result,
.solutions-page .finder-question {
    min-width: 0;
}

.solutions-page .finder-form {
    grid-template-columns: repeat(3, minmax(185px, 1fr));
    gap: clamp(18px, 1.65vw, 30px);
}

.solutions-page .finder-question {
    padding: 20px 18px 18px;
}

.solutions-page .finder-options label > span {
    max-width: 100%;
}

.solutions-page .finder-result {
    width: 100%;
    max-width: 300px;
    justify-self: stretch;
}

.solutions-page .finder-result h3 {
    overflow-wrap: anywhere;
}

.solutions-page .finder-result-link {
    max-width: 100%;
    white-space: nowrap;
}

@media (max-width: 1500px) {
    .solutions-page .finder-shell {
        grid-template-columns: minmax(260px, .9fr) minmax(0, 2.2fr);
    }

    .solutions-page .finder-result {
        grid-column: 2;
        max-width: 100%;
        min-height: 132px;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 10px 18px;
        align-items: center;
        padding: 20px;
    }

    .solutions-page .finder-result-icon {
        grid-row: 1 / span 3;
        margin: 0;
    }

    .solutions-page .finder-result > p {
        margin: 0;
    }

    .solutions-page .finder-result h3 {
        font-size: clamp(24px, 2vw, 30px);
    }

    .solutions-page .finder-result > span:not(.finder-result-icon) {
        margin: 0;
    }

    .solutions-page .finder-result-link {
        grid-column: 3;
        grid-row: 1 / span 3;
        width: min(220px, 100%);
        margin: 0;
    }
}

@media (max-width: 1180px) {
    .solutions-page .solution-finder .container {
        width: min(100% - 42px, 980px);
    }

    .solutions-page .finder-shell {
        grid-template-columns: 1fr;
    }

    .solutions-page .finder-result {
        grid-column: auto;
    }
}

@media (max-width: 900px) {
    .solutions-page .finder-form {
        grid-template-columns: 1fr;
    }

    .solutions-page .finder-result {
        display: flex;
        min-height: 0;
    }

    .solutions-page .finder-result-icon {
        margin-bottom: 14px;
    }

    .solutions-page .finder-result-link {
        width: 100%;
        margin-top: 18px;
    }
}

@media (max-width: 560px) {
    .solutions-page .solution-finder .container {
        width: min(100% - 28px, 100%);
    }

    .solutions-page .finder-shell {
        padding: 16px;
    }

    .solutions-page .finder-result-link {
        white-space: normal;
    }
}

/* Solutions hero: cinematic non-clickable showcase */
.solutions-page .solutions-hero {
    min-height: clamp(720px, 100vh, 900px);
    padding: clamp(118px, 13vh, 158px) 0 86px;
    background-image: url('../images/solution12.png');
}

/* .solutions-page .solutions-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, .42) 0 1px, transparent 1.5px),
        linear-gradient(90deg, transparent, rgba(243, 170, 54, .08), transparent);
    background-position: 0 0, -420px 0;
    background-size: 90px 90px, 420px 100%;
    animation: solutionsStarDrift 22s linear infinite, solutionsLightSweep 9s ease-in-out infinite;
    pointer-events: none;
} */

.solutions-page .solutions-hero-layout {
    width: min(100% - 40px, 1420px);
    grid-template-columns: minmax(360px, .78fr) minmax(720px, 1.35fr);
    gap: clamp(42px, 5vw, 78px);
}

.solutions-page .solutions-hero-copy {
    position: relative;
    align-self: center;
    padding-top: 0;
    isolation: isolate;
}

.solutions-page .solutions-hero-copy::before {
    content: "";
    position: absolute;
    top: -140px;
    left: -110px;
    z-index: -1;
    width: 460px;
    height: 460px;
    /* background:
        radial-gradient(circle at 40% 40%, rgba(246, 205, 83, 0.24), transparent 60%),
        radial-gradient(circle at 70% 75%, rgba(77, 134, 255, 0.14), transparent 55%); */
    pointer-events: none;
    animation: solutionsHeroGlowDrift 11s ease-in-out infinite;
}

.solutions-page .solutions-hero-copy::after {
    content: "";
    position: absolute;
    bottom: -120px;
    left: -60px;
    z-index: -1;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(77, 134, 255, 0.16), transparent 65%);
    pointer-events: none;
    animation: solutionsHeroDecorFloat 13s ease-in-out infinite;
}

@keyframes solutionsHeroGlowDrift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
    50% { transform: translate(18px, -18px) scale(1.12); opacity: 1; }
}

@keyframes solutionsHeroDecorFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    50% { transform: translate(-10px, 12px) scale(1.08); opacity: 1; }
}

@media (max-width: 1024px) {
    .solutions-page .solutions-hero-copy::before,
    .solutions-page .solutions-hero-copy::after {
        display: none;
    }
}

.solutions-page .solutions-hero-copy .solutions-kicker {
    color: var(--gold-500);
}

.solutions-page .solutions-hero-copy h1 {
    max-width: 610px;
    color: #f3f7fb;
    font-size: clamp(48px, 5vw, 74px);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
}

.solutions-page .solutions-hero-copy h1 span {
    color: var(--gold-500);
    text-shadow: 0 0 30px rgba(246, 205, 83, .18);
}

.solutions-page .solutions-hero-lead {
    max-width: 520px;
    color: #b7c5d1;
    font-size: 16px;
}

.solutions-page .solutions-hero-actions .button {
    min-height: 56px;
    padding-inline: 24px;
    border-radius: 7px;
}

.solutions-page .solution-selector {
    position: relative;
    min-height: 600px;
    align-items: end;
    gap: clamp(18px, 2.6vw, 34px);
    isolation: isolate;
}

.solutions-page .solution-selector::before,
.solutions-page .solution-selector::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 22px;
    z-index: -1;
    height: 112px;
    border: 1px solid rgba(243, 170, 54, .48);
    border-top: 0;
    border-radius: 0 0 50% 50%;
    filter: drop-shadow(0 0 16px rgba(243, 170, 54, .22));
    animation: solutionsOrbitGlow 3.8s ease-in-out infinite;
    pointer-events: none;
}

.solutions-page .solution-selector::after {
    left: 13%;
    right: 13%;
    bottom: 54px;
    height: 330px;
    border-color: rgba(53, 203, 185, .34);
    border-bottom-color: rgba(243, 170, 54, .34);
    border-radius: 48% 48% 14px 14px;
    opacity: .78;
    animation-delay: -1.4s;
}

.solutions-page .solution-card {
    min-height: 410px;
    cursor: default;
    border-radius: 16px 16px 9px 9px;
    background: rgba(4, 19, 33, .82);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .34), 0 0 34px color-mix(in srgb, var(--solution-accent) 18%, transparent);
    transform: translateY(24px);
    animation: solutionCardFloat 5.8s ease-in-out infinite;
}

.solutions-page .solution-card:hover,
.solutions-page .solution-card:focus-visible {
    transform: translateY(16px);
}

.solutions-page .solution-card-leasing {
    margin-bottom: 30px;
    animation-delay: -.8s;
}

.solutions-page .solution-card-trading {
    margin-bottom: 30px;
    animation-delay: -1.7s;
}

.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    min-height: 520px;
    margin-bottom: 0;
    border-color: rgba(243, 170, 54, .86);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .42), 0 0 48px rgba(243, 170, 54, .3);
    transform: translateY(0);
    animation: solutionFeaturedFloat 5.4s ease-in-out infinite;
}

.solutions-page .solution-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .58;
    background: linear-gradient(105deg, transparent 0 34%, rgba(255, 255, 255, .18) 50%, transparent 66%);
    transform: translateX(-130%);
    animation: solutionCardSheen 5.8s ease-in-out infinite;
    pointer-events: none;
}

.solutions-page .solution-card::after {
    background:
        linear-gradient(to bottom, rgba(2, 12, 23, .44) 0%, rgba(2, 12, 23, .08) 35%, rgba(2, 12, 23, .34) 62%, rgba(2, 12, 23, .96) 100%),
        radial-gradient(circle at 50% 92%, color-mix(in srgb, var(--solution-accent) 22%, transparent), transparent 44%);
}

.solutions-page .solution-card-icon {
    top: -38px;
    left: 50%;
    width: 76px;
    height: 76px;
    font-size: 28px;
    background:
        radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--solution-accent) 34%, transparent), rgba(5, 22, 36, .92));
    transform: translateX(-50%);
    animation: solutionIconPulse 2.9s ease-in-out infinite;
}

.solutions-page .solution-card-title {
    top: 52px;
    left: 50%;
    max-width: 190px;
    color: #f7f9fb;
    font-size: clamp(15px, 1.12vw, 19px);
    letter-spacing: 0;
    text-align: center;
    transform: translateX(-50%);
}

.solutions-page .solution-card-own .solution-card-title {
    top: 86px;
    color: var(--gold-500);
    font-size: clamp(18px, 1.35vw, 24px);
}

.solutions-page .solution-card-badge {
    top: 58px;
    left: 50%;
    right: auto;
    color: var(--gold-500);
    background: transparent;
    transform: translateX(-50%);
    white-space: nowrap;
}

.solutions-page .solution-card-image {
    top: 126px;
}

.solutions-page .solution-card-own .solution-card-image {
    top: 150px;
}

.solutions-page .solution-card-image img {
    animation: solutionImageLive 9s ease-in-out infinite;
}

.solutions-page .solution-card-copy {
    right: 22px;
    bottom: 26px;
    left: 22px;
    text-align: center;
    color: #d6e1e8;
    font-size: 12px;
}

.solutions-page .solution-card-arrow {
    display: none;
}

.solutions-page .solutions-scroll-cue {
    bottom: 20px;
    color: #aebdca;
}

@keyframes solutionsStarDrift {
    from { background-position: 0 0, -420px 0; }
    to { background-position: 90px 90px, 420px 0; }
}

@keyframes solutionsLightSweep {
    0%, 55% { background-position: 0 0, -420px 0; }
    100% { background-position: 90px 90px, 420px 0; }
}

@keyframes solutionsOrbitGlow {
    0%, 100% { opacity: .52; filter: drop-shadow(0 0 10px rgba(243, 170, 54, .16)); }
    50% { opacity: .96; filter: drop-shadow(0 0 22px rgba(243, 170, 54, .32)); }
}

@keyframes solutionCardFloat {
    0%, 100% { transform: translateY(24px); }
    50% { transform: translateY(12px); }
}

@keyframes solutionFeaturedFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes solutionCardSheen {
    0%, 46% { transform: translateX(-130%); opacity: 0; }
    62% { opacity: .54; }
    100% { transform: translateX(130%); opacity: 0; }
}

@keyframes solutionIconPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--solution-accent) 22%, transparent), 0 0 28px color-mix(in srgb, var(--solution-accent) 25%, transparent); }
    50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--solution-accent) 8%, transparent), 0 0 42px color-mix(in srgb, var(--solution-accent) 38%, transparent); }
}

@keyframes solutionImageLive {
    0%, 100% { transform: scale(1.05) translate3d(0, 0, 0); filter: saturate(1.04) contrast(1.04); }
    50% { transform: scale(1.1) translate3d(-2%, -1%, 0); filter: saturate(1.16) contrast(1.08); }
}

@media (max-width: 1280px) {
    .solutions-page .solutions-hero-layout {
        grid-template-columns: 1fr;
    }

    .solutions-page .solutions-hero-copy {
        max-width: 760px;
    }

    .solutions-page .solution-selector {
        min-height: 520px;
    }
}

@media (max-width: 860px) {
    .solutions-page .solution-selector {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 28px;
    }

    .solutions-page .solution-selector::before,
    .solutions-page .solution-selector::after {
        display: none;
    }

    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        min-height: 430px;
        margin-bottom: 0;
        transform: none;
    }
}

@media (max-width: 560px) {
    .solutions-page .solutions-hero-layout {
        width: min(100% - 28px, 100%);
    }

    .solutions-page .solutions-hero-copy h1 {
        font-size: clamp(38px, 12vw, 50px);
    }

    .solutions-page .solutions-hero-actions .button {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solutions-hero::after,
    .solutions-page .solution-selector::before,
    .solutions-page .solution-selector::after,
    .solutions-page .solution-card,
    .solutions-page .solution-card::before,
    .solutions-page .solution-card-icon,
    .solutions-page .solution-card-image img {
        animation: none;
    }
}

/* Solutions hero: reference layout lock */
.solutions-page .solutions-hero {
    min-height: 720px;
    padding: 110px 0 68px;
}

.solutions-page .solutions-hero-layout {
    width: min(100% - 34px, 1320px);
    grid-template-columns: minmax(390px, 440px) minmax(0, 820px);
    gap: clamp(34px, 4vw, 60px);
    align-items: center;
}

.solutions-page .solutions-hero-copy h1 {
    max-width: 455px;
    font-size: clamp(42px, 3.9vw, 58px);
    font-weight: 700;
    line-height: 1.13;
}

.solutions-page .solutions-hero-copy h1 span {
    margin-top: 4px;
}

.solutions-page .solutions-hero-lead {
    max-width: 420px;
    margin-top: 22px;
    font-size: 14px;
    line-height: 1.85;
}

.solutions-page .solutions-hero-actions {
    margin-top: 34px;
}

.solutions-page .solutions-hero-actions .button {
    min-height: 48px;
    padding: 13px 20px;
    font-size: 12px;
}

.solutions-page .solutions-hero-proof {
    display: none;
}

.solutions-page .solution-selector {
    z-index: 1;
    width: 100%;
    max-width: 820px;
    min-height: 500px;
    grid-template-columns: 1fr 1.16fr 1fr;
    gap: 26px;
    justify-self: end;
    align-items: end;
}

.solutions-page .solution-selector::before {
    left: -8%;
    right: -8%;
    bottom: 12px;
    height: 84px;
    border-color: rgba(243, 170, 54, .62);
    border-radius: 0 0 52% 52%;
}

.solutions-page .solution-selector::after {
    left: 7%;
    right: 7%;
    bottom: 52px;
    height: 308px;
    border-width: 1px;
    border-color: rgba(77, 134, 255, .38);
    border-right-color: rgba(53, 203, 185, .46);
    border-bottom-color: rgba(243, 170, 54, .34);
}

.solutions-page .solution-card {
    min-height: 350px;
    border-radius: 15px 15px 8px 8px;
    transform: translateY(30px);
}

.solutions-page .solution-card-leasing,
.solutions-page .solution-card-trading {
    margin-bottom: 36px;
}

.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    min-height: 470px;
}

.solutions-page .solution-card:hover,
.solutions-page .solution-card:focus-visible {
    transform: translateY(22px);
}

.solutions-page .solution-card-icon {
    top: -32px;
    width: 64px;
    height: 64px;
    font-size: 23px;
}

.solutions-page .solution-card-title {
    top: 58px;
    max-width: 150px;
    font-size: 14px;
    line-height: 1.25;
}

.solutions-page .solution-card-own .solution-card-title {
    top: 82px;
    max-width: 180px;
    font-size: 18px;
    line-height: 1.12;
}

.solutions-page .solution-card-badge {
    top: 56px;
    font-size: 9px;
}

.solutions-page .solution-card-image {
    top: 138px;
}

.solutions-page .solution-card-own .solution-card-image {
    top: 144px;
}

.solutions-page .solution-card-copy {
    bottom: 22px;
    font-size: 11px;
    line-height: 1.45;
}

.solutions-page .solutions-scroll-cue {
    bottom: 18px;
    font-size: 11px;
}

@media (min-width: 1500px) {
    .solutions-page .solutions-hero-layout {
        width: min(100% - 64px, 1540px);
        grid-template-columns: minmax(420px, 520px) minmax(780px, 940px);
        gap: 70px;
    }

    .solutions-page .solutions-hero-copy h1 {
        font-size: 58px;
    }

    .solutions-page .solution-selector {
        max-width: 940px;
        min-height: 520px;
        gap: 30px;
    }

    .solutions-page .solution-card {
        min-height: 380px;
    }

    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        min-height: 500px;
    }
}

@media (max-width: 1100px) {
    .solutions-page .solutions-hero-layout {
        grid-template-columns: 1fr;
    }

    .solutions-page .solution-selector {
        justify-self: stretch;
    }
}

@media (max-width: 860px) {
    .solutions-page .solutions-hero {
        min-height: 0;
    }

    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        min-height: 410px;
        transform: none;
    }

    .solutions-page .solution-card-image,
    .solutions-page .solution-card-own .solution-card-image {
        top: 126px;
    }
}

/* Solutions hero: animated SVG stage */
.solutions-page .solutions-stage-svg {
    position: absolute;
    inset: -20px -34px -22px;
    z-index: 0;
    width: calc(100% + 68px);
    height: calc(100% + 42px);
    overflow: visible;
    pointer-events: none;
}

.solutions-page .solutions-stage-svg path,
.solutions-page .solutions-stage-svg ellipse {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.solutions-page .stage-arc,
.solutions-page .stage-base,
.solutions-page .stage-ring {
    filter: url("#solutions-stage-glow");
}

.solutions-page .stage-arc-left {
    stroke: url("#solutions-stage-blue");
    stroke-width: 1.4;
    stroke-dasharray: 9 13;
    animation: solutionSvgFlow 9s linear infinite;
}

.solutions-page .stage-arc-right {
    stroke: url("#solutions-stage-teal");
    stroke-width: 1.4;
    stroke-dasharray: 9 13;
    animation: solutionSvgFlowReverse 9s linear infinite;
}

.solutions-page .stage-base-wide {
    stroke: url("#solutions-stage-gold");
    stroke-width: 1.6;
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: solutionSvgDraw 4.4s ease-in-out infinite;
}

.solutions-page .stage-base-inner,
.solutions-page .stage-ring {
    stroke: rgba(243, 170, 54, .72);
    stroke-width: 1.2;
    stroke-dasharray: 8 10;
    animation: solutionSvgFlow 5s linear infinite;
}

.solutions-page .stage-ring-two {
    stroke-width: 1.6;
    stroke: rgba(243, 170, 54, .94);
    animation-duration: 3.8s;
}

.solutions-page .stage-node,
.solutions-page .stage-spark {
    fill: #ffd27a;
    filter: url("#solutions-stage-glow");
}

.solutions-page .stage-node-a,
.solutions-page .stage-node-e {
    animation: solutionNodePulse 2.6s ease-in-out infinite;
}

.solutions-page .stage-node-b,
.solutions-page .stage-node-d {
    fill: #5df1df;
    animation: solutionNodePulse 2.6s ease-in-out infinite .45s;
}

.solutions-page .stage-node-c,
.solutions-page .stage-spark {
    fill: var(--gold-500);
    animation: solutionNodePulse 1.8s ease-in-out infinite;
}

.solutions-page .solution-selector::before,
.solutions-page .solution-selector::after {
    display: none;
}

.solutions-page .solution-card {
    overflow: visible;
    z-index: 2;
}

.solutions-page .solution-card-image,
.solutions-page .solution-card::after {
    overflow: hidden;
    border-radius: inherit;
}

.solutions-page .solution-card-image {
    border-radius: 0 0 8px 8px;
}

.solutions-page .solution-card-own::before {
    animation-duration: 4.4s;
}

.solutions-page .solution-card-own .solution-card-icon {
    top: -42px;
    width: 78px;
    height: 78px;
    color: #fff7d8;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 238, 170, .92), rgba(246, 205, 83, .85) 42%, rgba(77, 45, 5, .96) 72%);
    border-color: rgba(255, 219, 127, .82);
    box-shadow: 0 0 0 14px rgba(246, 205, 83, .12), 0 0 48px rgba(246, 205, 83, .46);
}

.solutions-page .solution-card-own::after {
    box-shadow: inset 0 0 0 1px rgba(243, 170, 54, .28);
}

@keyframes solutionSvgFlow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -220; }
}

@keyframes solutionSvgFlowReverse {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 220; }
}

@keyframes solutionSvgDraw {
    0%, 100% { stroke-dashoffset: 520; opacity: .4; }
    42%, 68% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes solutionNodePulse {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.55); }
}

@media (max-width: 860px) {
    .solutions-page .solutions-stage-svg {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .stage-arc-left,
    .solutions-page .stage-arc-right,
    .solutions-page .stage-base-wide,
    .solutions-page .stage-base-inner,
    .solutions-page .stage-ring,
    .solutions-page .stage-node,
    .solutions-page .stage-spark {
        animation: none;
    }
}

/* Solutions hero: final composition repair */
.solutions-page .solutions-hero {
    min-height: 760px;
    padding: 104px 0 72px;
}

.solutions-page .solutions-hero-layout {
    width: min(100% - 56px, 1720px);
    grid-template-columns: minmax(500px, 560px) minmax(920px, 1fr);
    gap: clamp(46px, 4.5vw, 86px);
}

.solutions-page .solutions-hero-copy {
    max-width: 560px;
}

.solutions-page .solutions-hero-copy h1 {
    max-width: 560px;
    font-size: clamp(44px, 3.35vw, 56px);
    line-height: 1.08;
}

.solutions-page .solutions-hero-copy h1 span {
    display: block;
}

.solutions-page .solutions-hero-lead {
    max-width: 545px;
    font-size: 15px;
    line-height: 1.75;
}

.solutions-page .solution-selector {
    max-width: 1060px;
    min-height: 548px;
    grid-template-columns: minmax(240px, .92fr) minmax(280px, 1.1fr) minmax(240px, .92fr);
    gap: clamp(28px, 2.4vw, 40px);
    padding: 28px 18px 22px;
}

.solutions-page .solutions-stage-svg {
    inset: -10px -86px -42px;
    z-index: 1;
    width: calc(100% + 172px);
    height: calc(100% + 52px);
    opacity: 1;
}

.solutions-page .stage-arc,
.solutions-page .stage-base,
.solutions-page .stage-ring {
    filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 18px currentColor);
}

.solutions-page .stage-arc-left {
    color: rgba(77, 134, 255, .78);
    stroke: rgba(77, 134, 255, .86);
    stroke-width: 2.4;
    stroke-dasharray: 12 12;
}

.solutions-page .stage-arc-right {
    color: rgba(55, 201, 184, .82);
    stroke: rgba(55, 201, 184, .9);
    stroke-width: 2.4;
    stroke-dasharray: 12 12;
}

.solutions-page .stage-base-wide {
    color: rgba(243, 170, 54, .9);
    stroke: rgba(243, 170, 54, .92);
    stroke-width: 2.3;
}

.solutions-page .stage-base-inner,
.solutions-page .stage-ring {
    color: rgba(243, 170, 54, .78);
    stroke: rgba(243, 170, 54, .82);
    stroke-width: 1.9;
}

.solutions-page .stage-ring-two {
    stroke-width: 2.4;
}

.solutions-page .stage-node,
.solutions-page .stage-spark {
    filter: drop-shadow(0 0 7px #ffdc4d) drop-shadow(0 0 16px #f6cd53);
}

.solutions-page .solution-card {
    z-index: 3;
    min-height: 372px;
    border: 1px solid color-mix(in srgb, var(--solution-accent) 42%, rgba(126, 160, 183, .24));
    border-radius: 18px 18px 8px 8px;
    background:
        linear-gradient(180deg, rgba(3, 18, 31, .98) 0 34%, rgba(3, 18, 31, .52) 54%, rgba(3, 18, 31, .95) 100%),
        rgba(3, 18, 31, .92);
    box-shadow:
        0 28px 70px rgba(0, 0, 0, .42),
        0 0 38px color-mix(in srgb, var(--solution-accent) 24%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.solutions-page .solution-card-leasing,
.solutions-page .solution-card-trading {
    margin-bottom: 50px;
}

.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    min-height: 520px;
    border-color: rgba(243, 170, 54, .9);
    box-shadow:
        0 34px 88px rgba(0, 0, 0, .46),
        0 0 58px rgba(243, 170, 54, .34),
        inset 0 1px 0 rgba(255, 255, 255, .09);
}

.solutions-page .solution-card::after {
    background:
        linear-gradient(180deg, rgba(2, 13, 24, .82) 0 31%, transparent 50%, rgba(2, 13, 24, .93) 100%),
        radial-gradient(circle at 50% 92%, color-mix(in srgb, var(--solution-accent) 24%, transparent), transparent 48%);
}

.solutions-page .solution-card-icon {
    top: -36px;
    width: 74px;
    height: 74px;
    font-size: 25px;
    border-width: 1.5px;
    box-shadow:
        0 0 0 14px color-mix(in srgb, var(--solution-accent) 13%, transparent),
        0 0 42px color-mix(in srgb, var(--solution-accent) 42%, transparent);
}

.solutions-page .solution-card-own .solution-card-icon {
    top: -48px;
    width: 88px;
    height: 88px;
}

.solutions-page .solution-card-title {
    top: 74px;
    max-width: 172px;
    font-size: 15px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

.solutions-page .solution-card-own .solution-card-title {
    top: 92px;
    max-width: 230px;
    font-size: 20px;
}

.solutions-page .solution-card-badge {
    top: 64px;
}

.solutions-page .solution-card-image {
    top: 154px;
}

.solutions-page .solution-card-own .solution-card-image {
    top: 164px;
}

.solutions-page .solution-card-copy {
    bottom: 24px;
    padding: 0 6px;
    font-size: 12px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .72);
}

.solutions-page .solution-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, transparent 0 58%, rgba(2, 13, 24, .76) 100%),
        radial-gradient(circle at 50% 70%, transparent 0 42%, rgba(2, 13, 24, .34) 100%);
    pointer-events: none;
}

@media (max-width: 1500px) {
    .solutions-page .solutions-hero-layout {
        width: min(100% - 44px, 1360px);
        grid-template-columns: minmax(430px, 500px) minmax(760px, 1fr);
        gap: 48px;
    }

    .solutions-page .solution-selector {
        max-width: 850px;
        gap: 26px;
    }

    .solutions-page .solutions-hero-copy h1 {
        font-size: clamp(42px, 3.5vw, 54px);
    }
}

@media (max-width: 1240px) {
    .solutions-page .solutions-hero-layout {
        grid-template-columns: 1fr;
    }

    .solutions-page .solutions-hero-copy,
    .solutions-page .solutions-hero-copy h1,
    .solutions-page .solutions-hero-lead {
        max-width: 720px;
    }

    .solutions-page .solution-selector {
        justify-self: center;
        width: min(100%, 940px);
    }
}

@media (max-width: 860px) {
    .solutions-page .solutions-hero-layout {
        width: min(100% - 28px, 100%);
    }

    .solutions-page .solutions-hero-copy h1 {
        font-size: clamp(38px, 10vw, 50px);
    }

    .solutions-page .solution-card-leasing,
    .solutions-page .solution-card-trading {
        margin-bottom: 0;
    }
}

/* Solutions hero: premium continuous card shuffle */
.solutions-page .solutions-hero {
    min-height: clamp(760px, 100vh, 920px);
    background:
        radial-gradient(circle at 70% 22%, rgba(57, 203, 184, .16), transparent 24%),
        radial-gradient(circle at 44% 52%, rgba(77, 134, 255, .16), transparent 30%),
        radial-gradient(circle at 74% 84%, rgba(243, 170, 54, .16), transparent 24%),
        linear-gradient(135deg, #020913 0%, #031421 46%, #031a24 100%);
}

.solutions-page .solutions-hero::before {
    opacity: .72;
    background-image:
        linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 255, 255, .38) 0 1px, transparent 1.5px);
    background-position: 0 0, 0 0, 24px 18px;
    background-size: 86px 86px, 86px 86px, 122px 112px;
}

.solutions-page .solutions-hero::after {
    opacity: .34;
    background:
        linear-gradient(100deg, transparent 0 34%, rgba(243, 170, 54, .11) 49%, transparent 64%),
        radial-gradient(circle at 78% 40%, rgba(57, 203, 184, .2), transparent 28%);
    background-size: 760px 100%, 100% 100%;
    animation: solutionsHeroSweep 11s ease-in-out infinite;
}

.solutions-page .solution-selector {
    --card-step: clamp(245px, 28vw, 356px);
    --card-width: clamp(235px, 27vw, 335px);
    --side-width: clamp(215px, 24vw, 292px);
    position: relative;
    display: block;
    max-width: 1080px;
    min-height: 570px;
    padding: 0;
    perspective: 1400px;
}

.solutions-page .solution-selector::before {
    display: block;
    left: 50%;
    right: auto;
    bottom: 2px;
    z-index: 1;
    width: min(92%, 940px);
    height: 116px;
    border: 0;
    border-bottom: 2px solid rgba(243, 170, 54, .58);
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(243, 170, 54, .17), transparent 62%),
        linear-gradient(90deg, transparent, rgba(243, 170, 54, .42), transparent);
    filter: blur(.2px) drop-shadow(0 0 20px rgba(243, 170, 54, .28));
    transform: translateX(-50%);
    animation: solutionsDockGlow 4.8s ease-in-out infinite;
}

.solutions-page .solutions-stage-svg {
    inset: -28px -64px -34px;
    z-index: 1;
    width: calc(100% + 128px);
    height: calc(100% + 62px);
    opacity: .82;
    transform-origin: center bottom;
    animation: solutionsStageBreathe 8s ease-in-out infinite;
}

.solutions-page .stage-arc-left,
.solutions-page .stage-arc-right {
    stroke-width: 1.7;
    stroke-dasharray: 3 17;
    stroke-linecap: round;
    opacity: .82;
}

.solutions-page .stage-base-wide {
    stroke-width: 2;
    opacity: .9;
}

.solutions-page .stage-base-inner,
.solutions-page .stage-ring {
    stroke-width: 1.35;
    opacity: .62;
}

.solutions-page .stage-node {
    opacity: .7;
}

.solutions-page .solution-card {
    position: absolute;
    top: 50px;
    left: 50%;
    width: var(--card-width);
    min-height: 458px;
    margin: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--solution-accent) 48%, rgba(165, 195, 214, .2));
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(5, 21, 34, .98) 0 24%, rgba(5, 21, 34, .58) 52%, rgba(3, 13, 23, .98) 100%),
        #061827;
    box-shadow:
        0 28px 78px rgba(0, 0, 0, .48),
        0 0 34px color-mix(in srgb, var(--solution-accent) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    animation: solutionsCardShuffle 12s cubic-bezier(.58, 0, .18, 1) infinite;
    will-change: transform, opacity, filter;
}

.solutions-page .solution-card:hover,
.solutions-page .solution-card:focus-visible {
    box-shadow:
        0 34px 86px rgba(0, 0, 0, .55),
        0 0 46px color-mix(in srgb, var(--solution-accent) 32%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

.solutions-page .solution-card-leasing {
    animation-delay: -4s;
}

.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    min-height: 458px;
    border-color: rgba(243, 170, 54, .82);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, .5),
        0 0 52px rgba(243, 170, 54, .27),
        inset 0 1px 0 rgba(255, 255, 255, .11);
    animation-delay: 0s;
}

.solutions-page .solution-card-trading {
    animation-delay: -8s;
}

.solutions-page .solution-card::before {
    z-index: 4;
    opacity: .44;
    background:
        linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, .22) 50%, transparent 62%),
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--solution-accent) 16%, transparent), transparent 42%);
    animation: solutionCardSheen 6.4s ease-in-out infinite;
}

.solutions-page .solution-card::after {
    z-index: 2;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(2, 10, 19, .92) 0 31%, rgba(2, 10, 19, .28) 47%, rgba(2, 10, 19, .96) 100%),
        radial-gradient(circle at 50% 86%, color-mix(in srgb, var(--solution-accent) 28%, transparent), transparent 48%),
        linear-gradient(90deg, rgba(255, 255, 255, .04), transparent 24% 76%, rgba(255, 255, 255, .04));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--solution-accent) 18%, transparent);
}

.solutions-page .solution-card-icon {
    top: 18px;
    left: 50%;
    width: 66px;
    height: 66px;
    font-size: 23px;
    transform: translateX(-50%);
    border: 1px solid color-mix(in srgb, var(--solution-accent) 68%, rgba(255, 255, 255, .2));
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--solution-accent) 48%, white 8%), rgba(5, 20, 33, .96) 70%);
    box-shadow:
        0 0 0 9px color-mix(in srgb, var(--solution-accent) 12%, transparent),
        0 0 36px color-mix(in srgb, var(--solution-accent) 38%, transparent);
    animation: solutionIconPulse 3.2s ease-in-out infinite;
}

.solutions-page .solution-card-own .solution-card-icon {
    top: 18px;
    width: 76px;
    height: 76px;
    color: #fff8df;
}

.solutions-page .solution-card-title {
    top: 112px;
    left: 50%;
    width: calc(100% - 42px);
    max-width: 235px;
    font-size: 16px;
    line-height: 1.12;
    text-align: center;
    transform: translateX(-50%);
}

.solutions-page .solution-card-own .solution-card-title {
    top: 116px;
    max-width: 245px;
    font-size: 21px;
}

.solutions-page .solution-card-badge {
    top: 92px;
    left: 50%;
    right: auto;
    padding: 0;
    color: #f7ad35;
    background: transparent;
    font-size: 9px;
    letter-spacing: .08em;
    transform: translateX(-50%);
}

.solutions-page .solution-card-image,
.solutions-page .solution-card-own .solution-card-image {
    inset: auto 0 0;
    top: 188px;
    height: calc(100% - 188px);
    border-radius: 0;
}

.solutions-page .solution-card-image img {
    transform: scale(1.04);
    animation: solutionImageLive 10s ease-in-out infinite;
}

.solutions-page .solution-card-copy {
    right: 20px;
    bottom: 24px;
    left: 20px;
    z-index: 4;
    color: #edf4f8;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

@keyframes solutionsHeroSweep {
    0%, 42% { background-position: -760px 0, 0 0; }
    72%, 100% { background-position: 760px 0, 0 0; }
}

@keyframes solutionsDockGlow {
    0%, 100% { opacity: .55; transform: translateX(-50%) scaleX(.94); }
    50% { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

@keyframes solutionsStageBreathe {
    0%, 100% { opacity: .68; transform: scale(.985); }
    50% { opacity: .95; transform: scale(1.015); }
}

@keyframes solutionsCardShuffle {
    0%, 20% {
        z-index: 5;
        opacity: 1;
        filter: saturate(1.12) brightness(1.05);
        transform: translate3d(-50%, -18px, 80px) rotateY(0deg) scale(1.12);
    }
    33.333%, 53.333% {
        z-index: 3;
        opacity: .78;
        filter: saturate(.95) brightness(.78);
        transform: translate3d(calc(-50% - var(--card-step)), 46px, 0) rotateY(10deg) scale(.86);
    }
    66.666%, 86.666% {
        z-index: 3;
        opacity: .82;
        filter: saturate(.98) brightness(.82);
        transform: translate3d(calc(-50% + var(--card-step)), 46px, 0) rotateY(-10deg) scale(.86);
    }
    100% {
        z-index: 5;
        opacity: 1;
        filter: saturate(1.12) brightness(1.05);
        transform: translate3d(-50%, -18px, 80px) rotateY(0deg) scale(1.12);
    }
}

@keyframes solutionMobileLift {
    0%, 100% {
        transform: translateY(0);
        box-shadow:
            0 24px 64px rgba(0, 0, 0, .42),
            0 0 28px color-mix(in srgb, var(--solution-accent) 18%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, .08);
    }
    50% {
        transform: translateY(-8px);
        box-shadow:
            0 30px 76px rgba(0, 0, 0, .5),
            0 0 40px color-mix(in srgb, var(--solution-accent) 28%, transparent),
            inset 0 1px 0 rgba(255, 255, 255, .1);
    }
}

@media (max-width: 1500px) {
    .solutions-page .solution-selector {
        --card-step: clamp(220px, 27vw, 286px);
        --card-width: clamp(225px, 27vw, 292px);
        min-height: 548px;
    }
}

@media (max-width: 1240px) {
    .solutions-page .solution-selector {
        --card-step: clamp(214px, 31vw, 310px);
        --card-width: clamp(220px, 30vw, 305px);
        min-height: 560px;
    }
}

@media (max-width: 860px) {
    .solutions-page .solution-selector {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 24px;
        perspective: none;
    }

    .solutions-page .solution-selector::before,
    .solutions-page .solutions-stage-svg {
        display: none;
    }

    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        min-height: 410px;
        opacity: 1;
        filter: none;
        transform: none;
        animation: solutionMobileLift 7s ease-in-out infinite;
    }

    .solutions-page .solution-card-own {
        animation-delay: -1.4s;
    }

    .solutions-page .solution-card-trading {
        animation-delay: -2.8s;
    }
}

@media (max-width: 560px) {
    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        min-height: 386px;
    }

    .solutions-page .solution-card-title,
    .solutions-page .solution-card-own .solution-card-title {
        font-size: 16px;
    }

    .solutions-page .solution-card-image,
    .solutions-page .solution-card-own .solution-card-image {
        top: 174px;
        height: calc(100% - 174px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solutions-hero::after,
    .solutions-page .solution-selector::before,
    .solutions-page .solutions-stage-svg,
    .solutions-page .solution-card {
        animation: none;
    }

    .solutions-page .solution-card-leasing {
        transform: translate3d(calc(-50% - var(--card-step)), 46px, 0) rotateY(10deg) scale(.86);
    }

    .solutions-page .solution-card-own {
        transform: translate3d(-50%, -18px, 80px) scale(1.12);
    }

    .solutions-page .solution-card-trading {
        transform: translate3d(calc(-50% + var(--card-step)), 46px, 0) rotateY(-10deg) scale(.86);
    }
}

/* Solutions hero: clean rail carousel */
.solutions-page .solutions-hero-layout {
    grid-template-columns: minmax(460px, 560px) minmax(0, 980px);
    gap: clamp(1px, 0vw, 49px);
}

.solutions-page .solution-selector {
    --rail: clamp(250px, 23vw, 330px);
    --card-width: clamp(238px, 22vw, 292px);
    width: min(100%, 980px);
    max-width: 980px;
    min-height: 540px;
    overflow: hidden;
    border-radius: 12px;
    perspective: 1000px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.solutions-page .solution-selector::before {
    display: block;
    bottom: 20px;
    width: min(86%, 760px);
    height: 92px;
    opacity: .8;
    border-bottom: 1px solid rgba(243, 170, 54, .48);
    background:
        radial-gradient(ellipse at center, rgba(243, 170, 54, .18), transparent 64%),
        repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(243, 170, 54, .16) 19px 20px, transparent 21px 42px);
    filter: drop-shadow(0 0 18px rgba(243, 170, 54, .22));
}

.solutions-page .solutions-stage-svg {
    inset: 12px 18px 22px;
    width: calc(100% - 36px);
    height: calc(100% - 34px);
    opacity: .42;
}

.solutions-page .stage-arc-left,
.solutions-page .stage-arc-right {
    stroke-width: 1.25;
    stroke-dasharray: 2 18;
    opacity: .55;
}

.solutions-page .stage-base-wide {
    stroke-width: 1.5;
    opacity: .62;
}

.solutions-page .stage-base-inner,
.solutions-page .stage-ring,
.solutions-page .stage-node,
.solutions-page .stage-spark {
    opacity: .34;
}

.solutions-page .solution-card,
.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    top: 58px;
    left: 50%;
    width: var(--card-width);
    min-height: 424px;
    border-radius: 8px;
    animation: solutionsRailMove 15s linear infinite;
    transform-origin: center center;
}

.solutions-page .solution-card-leasing {
    animation-delay: -5s;
}

.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    animation-delay: 0s;
}

.solutions-page .solution-card-trading {
    animation-delay: -10s;
}

.solutions-page .solution-card:hover,
.solutions-page .solution-card:focus-visible {
    animation-play-state: paused;
}

.solutions-page .solution-card-icon,
.solutions-page .solution-card-own .solution-card-icon {
    top: 18px;
    width: 64px;
    height: 64px;
    font-size: 22px;
}

.solutions-page .solution-card-own .solution-card-icon {
    width: 70px;
    height: 70px;
}

.solutions-page .solution-card-badge {
    top: 88px;
    font-size: 8px;
}

.solutions-page .solution-card-title,
.solutions-page .solution-card-own .solution-card-title {
    top: 112px;
    width: calc(100% - 34px);
    max-width: 220px;
    font-size: 16px;
}

.solutions-page .solution-card-own .solution-card-title {
    top: 116px;
    font-size: 19px;
}

.solutions-page .solution-card-image,
.solutions-page .solution-card-own .solution-card-image {
    top: 176px;
    height: calc(100% - 176px);
}

.solutions-page .solution-card-copy {
    bottom: 22px;
    font-size: 11px;
    line-height: 1.35;
}

@keyframes solutionsRailMove {
    0% {
        z-index: 2;
        opacity: 0;
        filter: saturate(.8) brightness(.62);
        transform: translate3d(calc(-50% + var(--rail) + 110px), 40px, 0) rotateY(-7deg) scale(.78);
    }
    8%, 27% {
        z-index: 3;
        opacity: .72;
        filter: saturate(.9) brightness(.76);
        transform: translate3d(calc(-50% + var(--rail)), 32px, 0) rotateY(-6deg) scale(.84);
    }
    40%, 60% {
        z-index: 6;
        opacity: 1;
        filter: saturate(1.1) brightness(1.04);
        transform: translate3d(-50%, -10px, 80px) rotateY(0deg) scale(1.04);
    }
    73%, 92% {
        z-index: 3;
        opacity: .72;
        filter: saturate(.9) brightness(.76);
        transform: translate3d(calc(-50% - var(--rail)), 32px, 0) rotateY(6deg) scale(.84);
    }
    100% {
        z-index: 2;
        opacity: 0;
        filter: saturate(.8) brightness(.62);
        transform: translate3d(calc(-50% - var(--rail) - 110px), 40px, 0) rotateY(7deg) scale(.78);
    }
}

@media (max-width: 1500px) {
    .solutions-page .solutions-hero-layout {
        grid-template-columns: minmax(430px, 500px) minmax(0, 850px);
    }

    .solutions-page .solution-selector {
        --rail: clamp(220px, 22vw, 280px);
        --card-width: clamp(226px, 22vw, 270px);
        width: min(100%, 850px);
        min-height: 512px;
    }
}

@media (max-width: 1240px) {
    .solutions-page .solutions-hero-layout {
        grid-template-columns: 1fr;
    }

    .solutions-page .solution-selector {
        --rail: clamp(230px, 31vw, 320px);
        --card-width: clamp(232px, 29vw, 292px);
        width: min(100%, 920px);
        justify-self: center;
    }
}

@media (max-width: 860px) {
    .solutions-page .solution-selector {
        display: grid;
        width: 100%;
        min-height: 0;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        top: auto;
        left: auto;
        width: 100%;
        min-height: 392px;
        transform: none;
        animation: solutionMobileLift 7s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        animation: none;
    }

    .solutions-page .solution-card-leasing {
        opacity: .72;
        transform: translate3d(calc(-50% - var(--rail)), 32px, 0) rotateY(6deg) scale(.84);
    }

    .solutions-page .solution-card-own {
        opacity: 1;
        transform: translate3d(-50%, -10px, 80px) scale(1.04);
    }

    .solutions-page .solution-card-trading {
        opacity: .72;
        transform: translate3d(calc(-50% + var(--rail)), 32px, 0) rotateY(-6deg) scale(.84);
    }
}

/* Solutions hero: fast professional snap carousel */
.solutions-page .solution-selector {
    --rail: clamp(220px, 21vw, 292px);
    --card-width: clamp(230px, 21vw, 282px);
    min-height: 512px;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
    contain: layout paint;
}

.solutions-page .solutions-stage-svg {
    opacity: .24;
    animation: none;
}

.solutions-page .stage-arc-left,
.solutions-page .stage-arc-right,
.solutions-page .stage-base-wide,
.solutions-page .stage-base-inner,
.solutions-page .stage-ring,
.solutions-page .stage-node,
.solutions-page .stage-spark {
    animation: none;
}

.solutions-page .solution-selector::before {
    animation: none;
    opacity: .42;
    filter: none;
}

.solutions-page .solution-card,
.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    top: 54px;
    width: var(--card-width);
    min-height: 414px;
    border-radius: 8px;
    animation: solutionsSnapCycle 7.2s cubic-bezier(.2, .75, .25, 1) infinite;
    transition: box-shadow 180ms ease, border-color 180ms ease;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.solutions-page .solution-card-leasing {
    animation-delay: -2.4s;
}

.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    animation-delay: 0s;
}

.solutions-page .solution-card-trading {
    animation-delay: -4.8s;
}

.solutions-page .solution-card::before,
.solutions-page .solution-card-icon,
.solutions-page .solution-card-image img {
    animation: none;
}

.solutions-page .solution-card::before {
    opacity: .18;
}

.solutions-page .solution-card-icon,
.solutions-page .solution-card-own .solution-card-icon {
    top: 18px;
    width: 58px;
    height: 58px;
    font-size: 20px;
    box-shadow: 0 0 24px color-mix(in srgb, var(--solution-accent) 28%, transparent);
}

.solutions-page .solution-card-own .solution-card-icon {
    width: 64px;
    height: 64px;
}

.solutions-page .solution-card-title,
.solutions-page .solution-card-own .solution-card-title {
    top: 104px;
    font-size: 15px;
}

.solutions-page .solution-card-own .solution-card-title {
    top: 108px;
    font-size: 18px;
}

.solutions-page .solution-card-badge {
    top: 82px;
}

.solutions-page .solution-card-image,
.solutions-page .solution-card-own .solution-card-image {
    top: 162px;
    height: calc(100% - 162px);
}

.solutions-page .solution-card-copy {
    bottom: 20px;
}

@keyframes solutionsSnapCycle {
    0%, 29% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.06);
    }
    33%, 62% {
        z-index: 3;
        opacity: .62;
        transform: translate3d(calc(-50% - var(--rail)), 30px, 0) scale(.82);
    }
    66%, 95% {
        z-index: 3;
        opacity: .62;
        transform: translate3d(calc(-50% + var(--rail)), 30px, 0) scale(.82);
    }
    100% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.06);
    }
}

@media (max-width: 1500px) {
    .solutions-page .solution-selector {
        --rail: clamp(205px, 21vw, 254px);
        --card-width: clamp(220px, 21vw, 258px);
    }
}

@media (max-width: 1240px) {
    .solutions-page .solution-selector {
        --rail: clamp(220px, 30vw, 310px);
        --card-width: clamp(226px, 28vw, 286px);
        overflow: hidden;
    }
}

@media (max-width: 860px) {
    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        animation: none;
    }
}

/* Mobile-only layout lock for the solution chooser. */
@media (max-width: 860px) {
    .solutions-page .solutions-hero {
        min-height: auto;
        padding: 88px 0 42px;
    }

    .solutions-page .solutions-hero-layout {
        width: min(100% - 28px, 520px);
        gap: 34px;
    }

    .solutions-page .solutions-hero-copy {
        width: 100%;
        text-align: center;
    }

    .solutions-page .solutions-hero-copy h1 {
        max-width: 360px;
        margin-inline: auto;
        font-size: clamp(34px, 10vw, 46px);
        line-height: 1.08;
    }

    .solutions-page .solutions-hero-lead {
        max-width: 350px;
        margin-inline: auto;
        font-size: 13px;
        line-height: 1.65;
    }

    .solutions-page .solutions-hero-actions {
        width: 100%;
        margin-top: 26px;
        gap: 10px;
    }

    .solutions-page .solutions-hero-actions .button {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .solutions-page .solution-selector {
        width: 100%;
        min-height: 0;
        gap: 22px;
        overflow: visible;
        contain: none;
    }

    .solutions-page .solution-card-cursor {
        display: none !important;
    }

    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        top: auto;
        left: auto;
        min-height: 390px;
        border-radius: 12px;
        transform: none;
        animation: none;
    }

    .solutions-page .solution-card-icon,
    .solutions-page .solution-card-own .solution-card-icon {
        top: 18px;
        width: 62px;
        height: 62px;
    }

    .solutions-page .solution-card-title,
    .solutions-page .solution-card-own .solution-card-title {
        top: 104px;
        width: calc(100% - 30px);
        font-size: 15px;
    }

    .solutions-page .solution-card-own .solution-card-title {
        top: 108px;
        font-size: 18px;
    }

    .solutions-page .solution-card-image,
    .solutions-page .solution-card-own .solution-card-image {
        top: 164px;
        height: calc(100% - 164px);
    }

    .solutions-page .solutions-scroll-cue {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        width: 100%;
        min-height: 48px;
        margin-top: 2px;
        padding: 10px 14px;
        justify-content: center;
        gap: 10px;
        border-radius: 999px;
        font-size: 11px;
        text-align: center;
    }
}

@media (max-width: 560px) {
    .solutions-page .solutions-hero {
        padding-top: 74px;
    }

    .solutions-page .solutions-hero-layout {
        width: min(100% - 20px, 430px);
        gap: 28px;
    }

    .solutions-page .solutions-hero-copy h1 {
        font-size: clamp(32px, 7.5vw, 42px);
    }

    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        top: auto;
        left: auto;
        min-height: 382px;
    }

    .solutions-page .solution-card-image,
    .solutions-page .solution-card-own .solution-card-image {
        top: 160px;
        height: calc(100% - 160px);
    }
}

/* Solutions hero: synchronized 3-card carousel with no empty state */
.solutions-page .solution-selector {
    --rail: clamp(215px, 20vw, 282px);
    --card-width: clamp(220px, 20vw, 272px);
    min-height: 508px;
    overflow: visible;
}

.solutions-page .solution-card,
.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    width: var(--card-width);
    min-height: 408px;
    animation: solutionsThreeCardRotate 6.6s cubic-bezier(.34, .88, .26, 1) infinite;
}

.solutions-page .solution-card-leasing {
    animation-delay: -2.2s;
}

.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    animation-delay: 0s;
}

.solutions-page .solution-card-trading {
    animation-delay: -4.4s;
}

@keyframes solutionsThreeCardRotate {
    0%, 25% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.05);
    }
    33.333%, 58.333% {
        z-index: 3;
        opacity: .78;
        transform: translate3d(calc(-50% - var(--rail)), 28px, 0) scale(.84);
    }
    66.666%, 91.666% {
        z-index: 3;
        opacity: .78;
        transform: translate3d(calc(-50% + var(--rail)), 28px, 0) scale(.84);
    }
    100% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.05);
    }
}

@media (max-width: 1500px) {
    .solutions-page .solution-selector {
        --rail: clamp(198px, 20vw, 244px);
        --card-width: clamp(210px, 20vw, 250px);
    }
}

@media (max-width: 1240px) {
    .solutions-page .solution-selector {
        --rail: clamp(215px, 30vw, 300px);
        --card-width: clamp(220px, 28vw, 278px);
        overflow: hidden;
    }
}

@media (max-width: 860px) {
    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        width: 100%;
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Comparison board: remove cramped outer stroke */
.solutions-page .comparison-grid {
    gap: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(61, 156, 255, .12), transparent 28%),
        radial-gradient(circle at 86% 10%, rgba(237, 182, 60, .14), transparent 30%),
        linear-gradient(135deg, rgba(5, 23, 39, .48), rgba(4, 17, 31, .22));
    box-shadow: none;
    backdrop-filter: none;
}

.solutions-page .comparison-grid::before {
    display: none;
}

.solutions-page .comparison-grid::after {
    content: "";
    position: absolute;
    inset: -22px -18px -18px;
    z-index: -1;
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(61, 156, 255, .08), rgba(55, 201, 184, .055), rgba(237, 182, 60, .08)),
        rgba(3, 15, 27, .38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 28px 70px rgba(0, 0, 0, .28);
    pointer-events: none;
}

.solutions-page .comparison-card,
.solutions-page .comparison-card:first-child {
    border: 1px solid color-mix(in srgb, var(--comparison-accent) 34%, rgba(126, 166, 197, .16));
    box-shadow:
        0 18px 44px rgba(0, 0, 0, .25),
        inset 0 1px 0 rgba(255, 255, 255, .055);
}

.solutions-page .comparison-card:hover,
.solutions-page .comparison-card:focus-visible,
.solutions-page .comparison-card.is-active,
.solutions-page .comparison-card.is-filter-match {
    transform: translateY(-5px);
    box-shadow:
        0 24px 54px rgba(0, 0, 0, .31),
        0 0 26px color-mix(in srgb, var(--comparison-accent) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

@media (max-width: 760px) {
    .solutions-page .comparison-grid {
        gap: 12px;
        padding: 0;
        background: transparent;
    }

    .solutions-page .comparison-grid::after {
        display: none;
    }
}

/* Solutions hero: mouse-safe synchronized motion */
.solutions-page .solution-card,
.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    pointer-events: none;
    cursor: default;
}

.solutions-page .solution-card:hover,
.solutions-page .solution-card:focus-visible,
.solutions-page .solution-card-own:hover,
.solutions-page .solution-card-own:focus-visible {
    animation-play-state: running;
}

.solutions-page .solution-selector {
    --rail: clamp(250px, 22vw, 328px);
    --card-width: clamp(220px, 20vw, 272px);
}

.solutions-page .solution-card,
.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    animation-duration: 7.8s;
}

@keyframes solutionsCardOwnPath {
    0%, 27% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.02);
    }
    33.333%, 60.333% {
        z-index: 3;
        opacity: .82;
        transform: translate3d(calc(-50% - var(--rail)), 26px, 0) scale(.82);
    }
    66.666%, 93.666% {
        z-index: 3;
        opacity: .82;
        transform: translate3d(calc(-50% + var(--rail)), 26px, 0) scale(.82);
    }
    100% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.02);
    }
}

@keyframes solutionsCardTradingPath {
    0%, 27% {
        z-index: 3;
        opacity: .82;
        transform: translate3d(calc(-50% + var(--rail)), 26px, 0) scale(.82);
    }
    33.333%, 60.333% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.02);
    }
    66.666%, 93.666% {
        z-index: 3;
        opacity: .82;
        transform: translate3d(calc(-50% - var(--rail)), 26px, 0) scale(.82);
    }
    100% {
        z-index: 3;
        opacity: .82;
        transform: translate3d(calc(-50% + var(--rail)), 26px, 0) scale(.82);
    }
}

@keyframes solutionsCardLeasingPath {
    0%, 27% {
        z-index: 3;
        opacity: .82;
        transform: translate3d(calc(-50% - var(--rail)), 26px, 0) scale(.82);
    }
    33.333%, 60.333% {
        z-index: 3;
        opacity: .82;
        transform: translate3d(calc(-50% + var(--rail)), 26px, 0) scale(.82);
    }
    66.666%, 93.666% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.02);
    }
    100% {
        z-index: 3;
        opacity: .82;
        transform: translate3d(calc(-50% - var(--rail)), 26px, 0) scale(.82);
    }
}

@media (max-width: 1500px) {
    .solutions-page .solution-selector {
        --rail: clamp(220px, 21vw, 276px);
        --card-width: clamp(206px, 19vw, 244px);
    }
}

@media (max-width: 1240px) {
    .solutions-page .solution-selector {
        --rail: clamp(220px, 29vw, 310px);
        --card-width: clamp(216px, 27vw, 270px);
    }
}

/* Solutions page: match About page header treatment */
.solutions-page {
    --about-header-height: 86px;
}

.solutions-page .site-header,
.solutions-page .site-header.scrolled,
.solutions-page .site-header.menu-active {
    padding-top: 0;
    min-height: var(--about-header-height);
    overflow: visible;
    background: rgba(4, 24, 56, 0.96);
    border-bottom: 0;
    z-index: 100;
}

.solutions-page .header-inner {
    height: var(--about-header-height);
    min-height: var(--about-header-height);
    align-items: center;
}

.solutions-page .site-header .brand {
    height: var(--about-header-height);
    align-items: center;
}

.solutions-page .logo-heander {
    display: block;
    width: auto;
    height: 72px;
    max-height: 72px;
    object-fit: contain;
    object-position: center;
}

/* Solutions hero: active-card color synced aura */
.solutions-page .solutions-hero {
    background:
        radial-gradient(circle at 50% 80%, rgba(243, 170, 54, .08), transparent 28%),
        linear-gradient(135deg, #020913 0%, #031421 48%, #031923 100%);
}

.solutions-page .solutions-hero::after {
    opacity: .72;
    background:
        radial-gradient(circle at 73% 28%, rgba(243, 170, 54, .22), transparent 28%),
        radial-gradient(circle at 64% 72%, rgba(243, 170, 54, .14), transparent 32%),
        linear-gradient(100deg, transparent 0 34%, rgba(243, 170, 54, .08) 50%, transparent 66%);
    animation: solutionsActiveAura 6.6s cubic-bezier(.34, .88, .26, 1) infinite;
}

.solutions-page .solution-selector::before {
    border-bottom-color: rgba(243, 170, 54, .48);
    background:
        radial-gradient(ellipse at center, rgba(243, 170, 54, .18), transparent 64%),
        repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(243, 170, 54, .16) 19px 20px, transparent 21px 42px);
    animation: solutionsActiveDock 6.6s cubic-bezier(.34, .88, .26, 1) infinite;
}

@keyframes solutionsActiveAura {
    0%, 25%, 100% {
        background:
            radial-gradient(circle at 73% 28%, rgba(243, 170, 54, .24), transparent 28%),
            radial-gradient(circle at 64% 72%, rgba(243, 170, 54, .16), transparent 32%),
            linear-gradient(100deg, transparent 0 34%, rgba(243, 170, 54, .09) 50%, transparent 66%);
    }
    33.333%, 58.333% {
        background:
            radial-gradient(circle at 73% 28%, rgba(57, 203, 184, .24), transparent 28%),
            radial-gradient(circle at 64% 72%, rgba(57, 203, 184, .15), transparent 32%),
            linear-gradient(100deg, transparent 0 34%, rgba(57, 203, 184, .085) 50%, transparent 66%);
    }
    66.666%, 91.666% {
        background:
            radial-gradient(circle at 73% 28%, rgba(77, 134, 255, .24), transparent 28%),
            radial-gradient(circle at 64% 72%, rgba(77, 134, 255, .15), transparent 32%),
            linear-gradient(100deg, transparent 0 34%, rgba(77, 134, 255, .085) 50%, transparent 66%);
    }
}

@keyframes solutionsActiveDock {
    0%, 25%, 100% {
        border-bottom-color: rgba(243, 170, 54, .5);
        background:
            radial-gradient(ellipse at center, rgba(243, 170, 54, .18), transparent 64%),
            repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(243, 170, 54, .16) 19px 20px, transparent 21px 42px);
    }
    33.333%, 58.333% {
        border-bottom-color: rgba(57, 203, 184, .5);
        background:
            radial-gradient(ellipse at center, rgba(57, 203, 184, .18), transparent 64%),
            repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(57, 203, 184, .16) 19px 20px, transparent 21px 42px);
    }
    66.666%, 91.666% {
        border-bottom-color: rgba(77, 134, 255, .5);
        background:
            radial-gradient(ellipse at center, rgba(77, 134, 255, .18), transparent 64%),
            repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(77, 134, 255, .16) 19px 20px, transparent 21px 42px);
    }
}

@media (max-width: 860px) {
    .solutions-page .solutions-hero::after,
    .solutions-page .solution-selector::before {
        animation: none;
    }
}

/* Solutions hero: final locked carousel and image-forward cards */
.solutions-page .solution-selector {
    --rail: clamp(225px, 20.6vw, 331px);
    --card-width: clamp(232px, 21vw, 319px);
    min-height: 600px;
    overflow: visible;
}

.solutions-page .solution-card,
.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    top: 58px;
    width: var(--card-width);
    min-height: 458px;
    will-change: transform, opacity;
    backface-visibility: hidden;
    animation-duration: 9s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
    animation-iteration-count: infinite;
}

.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    animation-name: solutionsCardOwnPath;
    animation-delay: 0s;
}

.solutions-page .solution-card-trading {
    animation-name: solutionsCardTradingPath;
    animation-delay: 0s;
}

.solutions-page .solution-card-leasing {
    animation-name: solutionsCardLeasingPath;
    animation-delay: 0s;
}

.solutions-page .solution-card-icon,
.solutions-page .solution-card-own .solution-card-icon {
    top: 14px;
    width: 48px;
    height: 48px;
    font-size: 17px;
}

.solutions-page .solution-card-own .solution-card-icon {
    width: 52px;
    height: 52px;
}

.solutions-page .solution-card-badge {
    top: 64px;
    font-size: 7px;
}

.solutions-page .solution-card-title,
.solutions-page .solution-card-own .solution-card-title {
    top: 84px;
    width: calc(100% - 28px);
    font-size: 14px;
    line-height: 1.12;
}

.solutions-page .solution-card-own .solution-card-title {
    top: 88px;
    font-size: 17px;
}

.solutions-page .solution-card-image,
.solutions-page .solution-card-own .solution-card-image {
    top: 128px;
    height: calc(100% - 128px);
}

.solutions-page .solution-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
    filter: saturate(1.08) contrast(1.04) brightness(.98);
}

.solutions-page .solution-card-own .solution-card-image img {
    object-position: center 48%;
}

.solutions-page .solution-card::after {
    background:
        linear-gradient(180deg, rgba(2, 10, 19, .78) 0 27%, rgba(2, 10, 19, .06) 43%, rgba(2, 10, 19, .88) 100%),
        radial-gradient(circle at 50% 90%, color-mix(in srgb, var(--solution-accent) 22%, transparent), transparent 50%);
}

.solutions-page .solution-card-image::after {
    background: linear-gradient(180deg, transparent 0 62%, rgba(2, 13, 24, .68) 100%);
}

.solutions-page .solution-card-copy {
    right: 16px;
    bottom: 18px;
    left: 16px;
    font-size: 14px;
    line-height: 1.28;
}

@keyframes solutionsCardOwnPath {
    0%, 24% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.04);
    }
    33.333%, 57.333% {
        z-index: 3;
        opacity: .76;
        transform: translate3d(calc(-50% - var(--rail)), 28px, 0) scale(.84);
    }
    66.666%, 90.666% {
        z-index: 3;
        opacity: .76;
        transform: translate3d(calc(-50% + var(--rail)), 28px, 0) scale(.84);
    }
    100% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.04);
    }
}

@keyframes solutionsCardTradingPath {
    0%, 24% {
        z-index: 3;
        opacity: .76;
        transform: translate3d(calc(-50% + var(--rail)), 28px, 0) scale(.84);
    }
    33.333%, 57.333% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.04);
    }
    66.666%, 90.666% {
        z-index: 3;
        opacity: .76;
        transform: translate3d(calc(-50% - var(--rail)), 28px, 0) scale(.84);
    }
    100% {
        z-index: 3;
        opacity: .76;
        transform: translate3d(calc(-50% + var(--rail)), 28px, 0) scale(.84);
    }
}

@keyframes solutionsCardLeasingPath {
    0%, 24% {
        z-index: 3;
        opacity: .76;
        transform: translate3d(calc(-50% - var(--rail)), 28px, 0) scale(.84);
    }
    33.333%, 57.333% {
        z-index: 3;
        opacity: .76;
        transform: translate3d(calc(-50% + var(--rail)), 28px, 0) scale(.84);
    }
    66.666%, 90.666% {
        z-index: 6;
        opacity: 1;
        transform: translate3d(-50%, -8px, 0) scale(1.04);
    }
    100% {
        z-index: 3;
        opacity: .76;
        transform: translate3d(calc(-50% - var(--rail)), 28px, 0) scale(.84);
    }
}

@media (max-width: 1500px) {
    .solutions-page .solution-selector {
        --rail: clamp(200px, 19vw, 244px);
        --card-width: clamp(216px, 20vw, 252px);
    }
}

@media (max-width: 1240px) {
    .solutions-page .solution-selector {
        --rail: clamp(214px, 29vw, 300px);
        --card-width: clamp(222px, 28vw, 280px);
        overflow: hidden;
    }
}

@media (max-width: 860px) {
    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        width: 100%;
        min-height: 390px;
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Solutions page — align the final palette with the Avantheon home page. */
.solutions-page {
    --solutions-bg: var(--navy-900);
    --solutions-panel: #061f42;
    --solutions-panel-light: var(--navy-800);
    --solutions-line: rgba(145, 185, 222, 0.2);
    --solutions-copy: #c3d4e5;
    --solutions-teal: var(--blue-400);
    --solutions-teal-soft: rgba(26, 118, 197, 0.16);
    --solutions-amber: var(--gold-500);
    --solutions-amber-soft: rgba(246, 205, 83, 0.14);
    background: var(--navy-900);
}

.solutions-page .site-header,
.solutions-page .site-header.scrolled,
.solutions-page .site-header.menu-active {
    background: rgba(4, 24, 56, 0.94);
    border-bottom-color: rgba(246, 205, 83, 0.13);
}

.solutions-page .nav-link::after {
    background: linear-gradient(90deg, var(--gold-700), var(--gold-100));
}

.solutions-page .button-gold {
    color: var(--navy-900);
    background: linear-gradient(148deg, rgba(238, 164, 45, 1) 0%, rgba(255, 248, 123, 1) 42%, rgba(238, 164, 45, 1) 100%);
    box-shadow: 0 12px 24px rgba(212, 175, 55, 0.18);
}

.solutions-page .button-outline {
    background: rgba(8, 43, 86, 0.38);
    border-color: rgba(207, 224, 242, 0.4);
}

.solutions-page .solutions-kicker,
.solutions-page .comparison-filter-panel .solutions-kicker,
.solutions-page .finder-intro .solutions-kicker {
    color: var(--gold-500);
    text-shadow: 0 0 18px rgba(246, 205, 83, 0.16);
}

.solutions-hero {
    background:
        radial-gradient(circle at 80% 30%, rgba(26, 118, 197, 0.28), transparent 34%),
        radial-gradient(circle at 34% 78%, rgba(212, 175, 55, 0.10), transparent 30%),
        linear-gradient(135deg, #03142e 0%, var(--navy-900) 48%, var(--navy-800) 100%);
    border-bottom-color: rgba(246, 205, 83, 0.12);
}

.solutions-hero-copy h1 span,
.solutions-scroll-cue i {
    color: var(--gold-500);
}

.solutions-hero-proof i {
    color: #62aee8;
}

.solutions-page .solution-card {
    background: linear-gradient(160deg, rgba(11, 58, 109, 0.96), rgba(4, 24, 56, 0.98));
    border-color: rgba(126, 174, 215, 0.3);
}

.solutions-page .solution-card-leasing { --solution-accent: var(--blue-400); }
.solutions-page .solution-card-trading { --solution-accent: #67afe4; }
.solutions-page .solution-card-own { --solution-accent: var(--gold-500); }

.solution-explorer {
    background:
        radial-gradient(circle at 87% 8%, rgba(26, 118, 197, 0.14), transparent 28%),
        linear-gradient(180deg, var(--navy-900) 0%, #061f42 100%);
}

.solutions-page .featured-solution {
    --featured-accent: var(--gold-500);
    background:
        radial-gradient(circle at 88% 8%, rgba(26, 118, 197, 0.17), transparent 35%),
        linear-gradient(135deg, #061f42 0%, var(--navy-900) 100%);
    border-color: rgba(246, 205, 83, 0.56);
    box-shadow: 0 28px 88px rgba(1, 11, 29, 0.46), 0 0 34px rgba(212, 175, 55, 0.08);
}

.solutions-page .featured-solution .solutions-kicker,
.solutions-page .featured-value-grid h3,
.solutions-page .featured-benefits-label {
    color: var(--gold-500);
}

.solutions-page .featured-value-grid article > span {
    color: var(--gold-500);
    background: rgba(246, 205, 83, 0.10);
    border-color: rgba(246, 205, 83, 0.42);
    box-shadow: inset 0 0 12px rgba(246, 205, 83, 0.08), 0 0 16px rgba(212, 175, 55, 0.10);
}

.solutions-page .featured-benefits i,
.solutions-page .featured-media-tag i {
    color: var(--gold-500);
}

.solutions-page .featured-media-tag {
    background: rgba(4, 24, 56, 0.91);
    border-color: rgba(246, 205, 83, 0.48);
}

.solutions-page .featured-cta {
    color: var(--navy-900);
    background: linear-gradient(148deg, rgba(238, 164, 45, 1) 0%, rgba(255, 248, 123, 1) 42%, rgba(238, 164, 45, 1) 100%);
    border-color: rgba(238, 164, 45, 0.66);
    box-shadow: 0 12px 24px rgba(212, 175, 55, 0.18);
}

.solutions-page .solution-comparison {
    background:
        radial-gradient(ellipse at 55% 100%, rgba(15, 94, 156, 0.24), transparent 44%),
        linear-gradient(180deg, #061f42 0%, var(--navy-900) 100%);
    border-block-color: rgba(246, 205, 83, 0.1);
}

.solutions-page .comparison-filter,
.solutions-page .comparison-grid {
    background-color: rgba(8, 43, 86, 0.56);
    border-color: rgba(125, 174, 214, 0.26);
}

.solutions-page .comparison-filter.is-active {
    background: linear-gradient(105deg, rgba(212, 175, 55, 0.22), rgba(8, 43, 86, 0.88));
    border-color: rgba(246, 205, 83, 0.7);
    box-shadow: inset 3px 0 0 var(--gold-500), 0 0 22px rgba(212, 175, 55, 0.11);
}

.solutions-page .comparison-filter.is-active i { color: var(--gold-500); }
.solutions-page .comparison-card { --comparison-accent: var(--blue-400); }
.solutions-page .comparison-card:nth-child(2) { --comparison-accent: #67afe4; }
.solutions-page .comparison-card:nth-child(3) { --comparison-accent: var(--gold-500); }

.solutions-page .solution-finder {
    background:
        radial-gradient(circle at 76% 40%, rgba(26, 118, 197, 0.18), transparent 31%),
        radial-gradient(circle at 18% 88%, rgba(212, 175, 55, 0.09), transparent 28%),
        linear-gradient(180deg, var(--navy-900) 0%, #061f42 100%);
}

.solutions-page .finder-shell {
    border-color: rgba(113, 171, 218, 0.42);
    background:
        linear-gradient(135deg, rgba(8, 43, 86, 0.97), rgba(4, 24, 56, 0.98)),
        var(--navy-900);
}

.solutions-page .finder-question {
    background: linear-gradient(145deg, rgba(11, 58, 109, 0.9), rgba(4, 24, 56, 0.84));
    border-color: rgba(127, 177, 218, 0.3);
}

.solutions-page .finder-question:hover,
.solutions-page .finder-question:focus-within {
    border-color: rgba(246, 205, 83, 0.58);
    background: linear-gradient(145deg, rgba(15, 94, 156, 0.72), rgba(4, 24, 56, 0.9));
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.24), 0 0 26px rgba(212, 175, 55, 0.1);
}

.solutions-page .finder-question:hover::before,
.solutions-page .finder-question:focus-within::before {
    color: var(--gold-500);
    border-color: var(--gold-500);
    box-shadow: 0 0 0 7px rgba(246, 205, 83, 0.08), 0 0 26px rgba(212, 175, 55, 0.15);
}

.solutions-page .finder-options input:checked + span,
.solutions-page .finder-result-link:hover {
    color: #000;
    background: linear-gradient(148deg, rgba(238, 164, 45, 1) 0%, rgba(255, 248, 123, 1) 42%, rgba(238, 164, 45, 1) 100%);
    border-color: var(--gold-500);
}

.solutions-page .finder-options input:checked + span i { color: var(--navy-900); }

.solutions-page .finder-result {
    border-color: rgba(246, 205, 83, 0.58);
    background:
        linear-gradient(145deg, rgba(212, 175, 55, 0.14), rgba(8, 43, 86, 0.92)),
        var(--navy-900);
}

.solutions-page .finder-result > p { color: var(--gold-500); }

.solutions-final-cta {
    background: linear-gradient(180deg, #061f42 0%, var(--navy-900) 100%);
}

.solutions-final-cta-inner {
    background:
        linear-gradient(90deg, rgba(4, 24, 56, 0.98) 0%, rgba(8, 43, 86, 0.92) 52%, rgba(4, 24, 56, 0.58) 100%),
        url("../images/solution-trading.png") center 55% / cover no-repeat;
    border-color: rgba(246, 205, 83, 0.42);
}

.solutions-final-cta-inner::before {
    background: linear-gradient(90deg, transparent, var(--gold-500), var(--gold-100), transparent);
}

/* Solutions page — home-page-style alternating dark and light sections. */
.solutions-page .solution-explorer {
    background:
        radial-gradient(circle at 88% 8%, rgba(26, 118, 197, 0.10), transparent 29%),
        radial-gradient(circle at 8% 92%, rgba(212, 175, 55, 0.08), transparent 25%),
        linear-gradient(180deg, #f7fafd 0%, #ffffff 52%, #edf4fa 100%);
}

.solutions-page .featured-solution {
    color: var(--slate-900);
    background:
        radial-gradient(circle at 95% 0%, rgba(26, 118, 197, 0.09), transparent 32%),
        linear-gradient(145deg, #ffffff 0%, #f7fbfe 68%, #edf4fa 100%);
    border-color: rgba(11, 58, 109, 0.26);
    box-shadow: 0 26px 66px rgba(4, 24, 56, 0.13), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

.solutions-page .featured-solution::before {
    background: linear-gradient(110deg, transparent 28%, rgba(26, 118, 197, 0.08) 48%, transparent 67%);
}

.solutions-page .featured-solution-heading h2 {
    color: var(--navy-900);
}

.solutions-page .featured-solution .solutions-kicker,
.solutions-page .featured-value-grid h3,
.solutions-page .featured-benefits-label {
    color: var(--blue-700);
    text-shadow: none;
}

.solutions-page .featured-overview {
    color: #536a7e;
}

.solutions-page .featured-value-grid article,
.solutions-page .featured-value-grid article + article {
    border-color: rgba(11, 58, 109, 0.13);
}

.solutions-page .featured-value-grid article > span {
    color: var(--blue-700);
    background: linear-gradient(145deg, rgba(26, 118, 197, 0.12), rgba(11, 58, 109, 0.06));
    border-color: rgba(15, 94, 156, 0.30);
    box-shadow: 0 10px 22px rgba(4, 24, 56, 0.08);
}

.solutions-page .featured-value-grid p {
    color: #607589;
}

.solutions-page .featured-value-grid article,
.solutions-page .featured-value-grid article + article {
    position: relative;
    padding: 22px 20px;
    overflow: hidden;
    border: 1px solid rgba(11, 58, 109, 0.16);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 246, 252, 0.94));
    box-shadow: 0 10px 24px rgba(4, 24, 56, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease, background 240ms ease;
}

.solutions-page .featured-value-grid article::before {
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    height: 2px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity: 0.35;
    transition: opacity 240ms ease;
}

.solutions-page .featured-value-grid article:hover,
.solutions-page .featured-value-grid article:focus-within {
    z-index: 1;
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.72);
    background: linear-gradient(145deg, #ffffff, #f5f9fd);
    box-shadow: 0 18px 34px rgba(4, 24, 56, 0.13), 0 0 0 3px rgba(246, 205, 83, 0.1), 0 0 24px rgba(212, 175, 55, 0.13);
}

.solutions-page .featured-value-grid article:hover::before,
.solutions-page .featured-value-grid article:focus-within::before {
    opacity: 1;
}

.solutions-page .featured-value-grid article:hover > span,
.solutions-page .featured-value-grid article:focus-within > span {
    color: var(--navy-900);
    background: linear-gradient(145deg, var(--gold-100), var(--gold-500));
    border-color: rgba(212, 175, 55, 0.8);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.24);
    transform: translateY(-2px) scale(1.06);
}

.solutions-page .featured-value-grid article > span {
    transition: transform 240ms ease, color 240ms ease, background 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.solutions-page .featured-bottom {
    border-top-color: rgba(11, 58, 109, 0.14);
}

.solutions-page .featured-benefits span {
    color: #415a70;
}

.solutions-page .featured-benefits i {
    color: var(--gold-500);
}

.solutions-page .solution-finder {
    background:
        radial-gradient(circle at 78% 36%, rgba(26, 118, 197, 0.10), transparent 30%),
        radial-gradient(circle at 16% 88%, rgba(212, 175, 55, 0.07), transparent 25%),
        linear-gradient(180deg, #eef5fb 0%, #ffffff 48%, #f5f9fc 100%);
}

.solutions-page .solution-finder::before,
.solutions-page .solution-finder::after {
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(11, 58, 109, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 58, 109, 0.07) 1px, transparent 1px);
}

.solutions-page .finder-shell {
    color: var(--slate-900);
    border-color: rgba(11, 58, 109, 0.18);
    background:
        radial-gradient(circle at 100% 0%, rgba(26, 118, 197, 0.08), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(238, 245, 251, 0.98));
    box-shadow: 0 26px 60px rgba(4, 24, 56, 0.12), inset 0 1px 0 #ffffff;
}

.solutions-page .finder-shell::before {
    background: linear-gradient(105deg, transparent 0%, rgba(15, 94, 156, 0.07) 42%, transparent 58%);
}

.solutions-page .finder-shell::after {
    border-color: rgba(11, 58, 109, 0.09);
}

.solutions-page .finder-intro .solutions-kicker {
    color: var(--gold-500);
    text-shadow: none;
}

.solutions-page .finder-intro h2 {
    color: var(--navy-900);
}

.solutions-page .finder-intro > p:not(.solutions-kicker) {
    color: #5d7286;
}

.solutions-page .finder-question {
    background: linear-gradient(145deg, #ffffff, #f2f7fb);
    border-color: rgba(11, 58, 109, 0.17);
    box-shadow: 0 12px 28px rgba(4, 24, 56, 0.07), inset 0 1px 0 #ffffff;
}

.solutions-page .finder-question::before {
    color: var(--blue-700);
    background: rgba(15, 94, 156, 0.06);
    border-color: rgba(11, 58, 109, 0.28);
    box-shadow: 0 0 0 7px rgba(15, 94, 156, 0.04);
}

.solutions-page .finder-question::after {
    color: #7791a8;
}

.solutions-page .finder-question:hover,
.solutions-page .finder-question:focus-within {
    border-color: rgba(212, 175, 55, 0.54);
    background: linear-gradient(145deg, #ffffff, #edf4fa);
    box-shadow: 0 20px 38px rgba(4, 24, 56, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.08);
}

.solutions-page .finder-question-heading > span {
    color: var(--navy-900);
    background: rgba(246, 205, 83, 0.22);
    border-color: rgba(212, 175, 55, 0.36);
    box-shadow: none;
}

.solutions-page .finder-question-heading  h3,
.solutions-page .finder-question legend {
    color: var(--navy-900);
}

.solutions-page .finder-question legend span {
    color: #536a7e;
}

.solutions-page .finder-options label > span {
    color: #536a7e;
    background: rgba(11, 58, 109, 0.035);
    border-color: rgba(11, 58, 109, 0.13);
}

.solutions-page .finder-options label > span i {
    color: var(--blue-700);
}

.solutions-page .finder-result {
    color: #ffffff;
    border-color: rgba(246, 205, 83, 0.52);
    background:
        radial-gradient(circle at 100% 0%, rgba(246, 205, 83, 0.14), transparent 38%),
        linear-gradient(145deg, var(--blue-700), var(--navy-900));
    box-shadow: 0 18px 40px rgba(4, 24, 56, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.solutions-page .finder-result h3 {
    color: #ffffff;
}

.solutions-page .finder-result > p {
    color: var(--gold-500);
}

.solutions-page .finder-result-link {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.32);
}

.solutions-page .solutions-hero {
    background:radial-gradient(circle at 72% 22%, rgb(26 118 197 / 0%), #0000003d 27%), radial-gradient(circle at 44% 54%, rgb(77 134 255 / 0%), #0000004a 31%), radial-gradient(circle at 76% 84%, rgb(246 205 83 / 0%), transparent 25%), linear-gradient(135deg, rgb(3 20 46 / 0%) 0%, rgb(4 24 56 / 49%) 48%, rgb(8 43 86) 100%), url(../images/solution12.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.solutions-page .solutions-hero::after {
    background:
        linear-gradient(100deg, transparent 0 34%, rgba(246, 205, 83, 0.11) 49%, transparent 64%),
        radial-gradient(circle at 78% 40%, rgba(26, 118, 197, 0.18), transparent 28%);
}

.solutions-page .stage-arc-right {
    color: rgba(26, 118, 197, 0.82);
    stroke: rgba(26, 118, 197, 0.9);
}

.solutions-page .finder-question::before {
    animation-name: finderIconBrandBreath;
}

.solutions-page .finder-result {
    animation-name: finderResultBrandGlow;
}

@keyframes finderIconBrandBreath {
    0%, 100% { box-shadow: 0 0 0 7px rgba(15, 94, 156, 0.05), 0 0 0 rgba(212, 175, 55, 0); }
    50% { box-shadow: 0 0 0 7px rgba(15, 94, 156, 0.08), 0 0 22px rgba(212, 175, 55, 0.14); }
}

@keyframes finderResultBrandGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(246, 205, 83, 0.14), 0 18px 38px rgba(4, 24, 56, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
    50% { box-shadow: 0 0 0 1px rgba(246, 205, 83, 0.30), 0 22px 44px rgba(4, 24, 56, 0.24), 0 0 24px rgba(212, 175, 55, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.11); }
}

@keyframes solutionsActiveAura {
    0%, 25%, 100% {
        background:
            radial-gradient(circle at 73% 28%, rgba(246, 205, 83, 0.22), transparent 28%),
            radial-gradient(circle at 64% 72%, rgba(212, 175, 55, 0.14), transparent 32%),
            linear-gradient(100deg, transparent 0 34%, rgba(246, 205, 83, 0.08) 50%, transparent 66%);
    }
    33.333%, 58.333% {
        background:
            radial-gradient(circle at 73% 28%, rgba(26, 118, 197, 0.23), transparent 28%),
            radial-gradient(circle at 64% 72%, rgba(15, 94, 156, 0.14), transparent 32%),
            linear-gradient(100deg, transparent 0 34%, rgba(26, 118, 197, 0.08) 50%, transparent 66%);
    }
    66.666%, 91.666% {
        background:
            radial-gradient(circle at 73% 28%, rgba(77, 134, 255, 0.23), transparent 28%),
            radial-gradient(circle at 64% 72%, rgba(77, 134, 255, 0.14), transparent 32%),
            linear-gradient(100deg, transparent 0 34%, rgba(77, 134, 255, 0.08) 50%, transparent 66%);
    }
}

@keyframes solutionsActiveDock {
    0%, 25%, 100% {
        border-bottom-color: rgba(246, 205, 83, 0.5);
        background:
            radial-gradient(ellipse at center, rgba(246, 205, 83, 0.18), transparent 64%),
            repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(246, 205, 83, 0.15) 19px 20px, transparent 21px 42px);
    }
    33.333%, 58.333% {
        border-bottom-color: rgba(26, 118, 197, 0.5);
        background:
            radial-gradient(ellipse at center, rgba(26, 118, 197, 0.17), transparent 64%),
            repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(26, 118, 197, 0.14) 19px 20px, transparent 21px 42px);
    }
    66.666%, 91.666% {
        border-bottom-color: rgba(77, 134, 255, 0.5);
        background:
            radial-gradient(ellipse at center, rgba(77, 134, 255, 0.17), transparent 64%),
            repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(77, 134, 255, 0.14) 19px 20px, transparent 21px 42px);
    }
}

/* Card selection guidance and featured-panel navigation. */
.solutions-page .solutions-showcase {
    min-width: 0;
}

.solutions-page .solutions-scroll-cue {
    position: relative;
    bottom: auto;
    left: auto;
    z-index: 8;
    display: flex;
    width: fit-content;
    min-height: 44px;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: -25px auto 0;
    padding: 10px 18px;
    color: #d7e5f2;
    background: linear-gradient(135deg, rgba(8, 43, 86, 0.84), rgba(4, 24, 56, 0.9));
    border: 1px solid rgba(246, 205, 83, 0.28);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(1, 11, 29, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-size: 12px;
    letter-spacing: 0.01em;
    text-align: center;
    transform: none;
}

.solutions-page .solutions-scroll-cue strong {
    color: var(--gold-500);
    font-weight: 800;
}

.solutions-page .solutions-scroll-cue i:first-child {
    color: var(--gold-500);
    font-size: 15px;
    animation: solutionCueTap 1.8s ease-in-out infinite;
}

.solutions-page .solutions-scroll-cue i:last-child {
    color: #72b4e5;
    font-size: 11px;
    animation: solutionCueDown 1.8s ease-in-out infinite;
}

.solutions-page .solution-card[role="tab"] {
    outline-offset: 5px;
}

.solutions-page .featured-solution {
    scroll-margin-top: 104px;
}

@keyframes solutionCueTap {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(2px, 2px) scale(0.86); }
    55% { transform: translate(2px, 2px) scale(1.12); }
}

@keyframes solutionCueDown {
    0%, 100% { opacity: 0.55; transform: translateY(-2px); }
    50% { opacity: 1; transform: translateY(3px); }
}

@media (max-width: 860px) {
    .solutions-page .solutions-scroll-cue {
        margin-top: 12px;
    }
}

@media (max-width: 520px) {
    .solutions-page .solutions-scroll-cue {
        width: 100%;
        padding-inline: 14px;
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solutions-scroll-cue i {
        animation: none;
    }
}

/* Interaction fix: old carousel safety rule disabled all card clicks. */
.solutions-page .solution-card,
.solutions-page .solution-card-own,
.solutions-page .solution-card-own.is-active {
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
}

/* Comparison tabs: clearer selected state with quieter inactive options. */
.solutions-page .comparison-filter {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    opacity: 0.66;
    filter: saturate(0.72);
    transition:
        opacity 220ms ease,
        filter 220ms ease,
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease;
}

.solutions-page .comparison-filter::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    background: linear-gradient(105deg, transparent 18%, rgba(255, 224, 122, 0.15) 48%, transparent 76%);
    opacity: 0;
    transform: translateX(-115%);
}

.solutions-page .comparison-filter:not(.is-active):hover {
    opacity: 0.88;
    filter: saturate(0.92);
    transform: translateX(3px);
}

.solutions-page .comparison-filter.is-active,
.solutions-page .comparison-filter.is-active:hover {
    opacity: 1;
    filter: none;
    transform: translateX(5px);
    border-color: rgba(246, 205, 83, 0.82);
    background:
        radial-gradient(circle at 12% 50%, rgba(246, 205, 83, 0.16), transparent 28%),
        linear-gradient(105deg, rgba(212, 175, 55, 0.20), rgba(8, 43, 86, 0.92));
    box-shadow:
        inset 4px 0 0 var(--gold-500),
        0 12px 28px rgba(1, 11, 29, 0.22),
        0 0 18px rgba(212, 175, 55, 0.12);
    animation: comparisonSelectedGlow 2.4s ease-in-out infinite;
}

.solutions-page .comparison-filter.is-active::before {
    opacity: 1;
    animation: comparisonSelectedSweep 2.8s ease-in-out infinite;
}

.solutions-page .comparison-filter.is-active i {
    color: var(--gold-500);
    background: rgba(246, 205, 83, 0.12);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.15);
}

@keyframes comparisonSelectedGlow {
    0%, 100% {
        box-shadow: inset 4px 0 0 var(--gold-500), 0 12px 28px rgba(1, 11, 29, 0.22), 0 0 12px rgba(212, 175, 55, 0.08);
    }
    50% {
        box-shadow: inset 4px 0 0 var(--gold-100), 0 14px 32px rgba(1, 11, 29, 0.27), 0 0 23px rgba(212, 175, 55, 0.18);
    }
}

@keyframes comparisonSelectedSweep {
    0%, 52% { opacity: 0; transform: translateX(-115%); }
    66% { opacity: 0.75; }
    100% { opacity: 0; transform: translateX(115%); }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .comparison-filter.is-active,
    .solutions-page .comparison-filter.is-active::before {
        animation: none;
    }
}

/* Comparison results: make the solutions matching the selected priority unmistakable. */
.solutions-page .comparison-card.is-filter-match {
    z-index: 4;
    opacity: 1;
    filter: none;
    border: 2px solid color-mix(in srgb, var(--comparison-accent) 84%, white);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--comparison-accent) 19%, transparent), rgba(4, 18, 32, 0.82) 48%),
        rgba(5, 23, 39, 0.94);
    box-shadow:
        0 28px 58px rgba(0, 0, 0, 0.36),
        0 0 0 3px color-mix(in srgb, var(--comparison-accent) 13%, transparent),
        0 0 34px color-mix(in srgb, var(--comparison-accent) 24%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: translateY(-8px);
    animation: comparisonMatchGlow 2.2s ease-in-out infinite;
}

.solutions-page .comparison-card.is-filter-match::after {
    position: absolute;
    top: 0;
    left: 18px;
    z-index: 5;
    min-width: 86px;
    padding: 7px 12px;
    content: "Best Match";
    color: var(--navy-900);
    background: linear-gradient(135deg, var(--gold-500), var(--gold-100));
    border-radius: 0 0 7px 7px;
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.24);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.13em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

.solutions-page .comparison-card.is-filter-muted,
.solutions-page .comparison-card.is-filter-muted.is-active {
    z-index: 1;
    opacity: 0.30;
    filter: saturate(0.32) brightness(0.78);
    border-color: rgba(122, 167, 202, 0.14);
    box-shadow: none;
    transform: none;
    animation: none;
}

.solutions-page .comparison-card.is-filter-muted::before {
    opacity: 0;
}

@keyframes comparisonMatchGlow {
    0%, 100% {
        box-shadow: 0 28px 58px rgba(0, 0, 0, 0.36), 0 0 0 3px color-mix(in srgb, var(--comparison-accent) 11%, transparent), 0 0 22px color-mix(in srgb, var(--comparison-accent) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 0 30px 62px rgba(0, 0, 0, 0.40), 0 0 0 4px color-mix(in srgb, var(--comparison-accent) 18%, transparent), 0 0 38px color-mix(in srgb, var(--comparison-accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .comparison-card.is-filter-match {
        animation: none;
    }
}

/* Featured solution: premium gold accents on the light panel. */
.solutions-page .featured-solution {
    border-color: rgba(62, 118, 163, 0.28);
    background:
        radial-gradient(circle at 95% 3%, rgba(26, 118, 197, 0.16), transparent 34%),
        radial-gradient(circle at 30% 100%, rgba(11, 58, 109, 0.055), transparent 40%),
        linear-gradient(145deg, #ffffff 0%, #f5f9fd 60%, #eaf3fa 100%);
    box-shadow:
        0 24px 58px rgba(4, 24, 56, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.92) inset;
}

.solutions-page .featured-solution::after {
    display: none;
}

.solutions-page .featured-solution::before {
    background: linear-gradient(112deg, transparent 27%, rgba(26, 118, 197, 0.09) 49%, transparent 69%);
}

.solutions-page .featured-solution .solutions-kicker {
    color: var(--gold-500);
    font-weight: 900;
    letter-spacing: 0.15em;
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.12);
}

.solutions-page .featured-value-grid article > span {
color: #edba0a;
    background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.72), transparent 34%), linear-gradient(145deg, #fffffd, #ffffff);
    border-color: rgba(212, 175, 55, 0.52);
    box-shadow:
        0 10px 24px rgba(212, 175, 55, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    animation: featuredGoldIconPulse 3.6s ease-in-out infinite;
}

.solutions-page .featured-value-grid article:nth-child(2) > span { animation-delay: 0.35s; }
.solutions-page .featured-value-grid article:nth-child(3) > span { animation-delay: 0.70s; }
.solutions-page .featured-value-grid article:nth-child(4) > span { animation-delay: 1.05s; }

.solutions-page .featured-value-grid h3 {
    color: var(--navy-800);
}

.solutions-page .featured-value-grid article,
.solutions-page .featured-value-grid article + article {
    border: 1px solid rgba(52, 109, 156, 0.14);
}

.solutions-page .featured-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px 0;
    border-block: 1px solid rgba(52, 109, 156, 0.14);
}

.solutions-page .featured-value-grid article,
.solutions-page .featured-value-grid article + article,
.solutions-page .featured-value-grid article:first-child {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-content: center;
    gap: 8px 14px;
    /* min-height: 150px; */
    padding: 18px 20px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(239, 246, 253, 0.74));
    border-radius: 16px;
    box-shadow:
        0 14px 32px rgba(4, 24, 56, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.solutions-page .featured-value-grid article + article {
    padding-left: 18px;
}

.solutions-page .featured-value-grid article > span {
    grid-row: 1 / span 2;
    align-self: start;
    width: 44px;
    height: 44px;
}

.solutions-page .featured-value-grid h3 {
    align-self: start;
    margin: 0;
    font-size: 19px;
    line-height: 1.18;
}

.solutions-page .featured-value-grid p {
    grid-column: 2;
    align-self: start;
    max-width: 34ch;
    margin: 0;
    font-size: 13px;
    line-height: 1.52;
}

.solutions-page .featured-bottom {
    border-top-color: rgba(52, 109, 156, 0.17);
}

.solutions-page .featured-benefits i {
    color: #f5d148;
    filter: drop-shadow(0 4px 8px rgba(212, 175, 55, 0.16));
}

.solutions-page .featured-benefits-label {
    color: var(--navy-900);
}

.solutions-page .featured-cta {
    /* box-shadow: 0 12px 30px rgba(212, 175, 55, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42); */
}

@keyframes featuredGoldIconPulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 10px 22px rgba(212, 175, 55, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }
    50% {
        transform: translateY(-3px);
        box-shadow: 0 14px 28px rgba(212, 175, 55, 0.24), 0 0 18px rgba(246, 205, 83, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .featured-value-grid article > span {
        animation: none;
    }
}

/* Home solution cards: gold icons with a blue-only animated border. */
.services .service-card {
    --service-ring-track: rgba(8, 43, 86, 0.72);
    --service-ring-light: rgba(77, 170, 232, 1);
    --service-ring-ice: rgba(159, 218, 255, 0.98);
}

.services .service-card::after {
    background:
        conic-gradient(
            from var(--service-border-angle),
            rgba(8, 43, 86, 0.72) 0deg 52deg,
            rgba(15, 94, 156, 0.94) 68deg,
            rgba(92, 181, 239, 1) 88deg,
            rgba(194, 231, 255, 1) 104deg,
            rgba(26, 118, 197, 1) 124deg,
            rgba(80, 170, 229, 0.96) 148deg,
            rgba(8, 43, 86, 0.72) 170deg 360deg
        );
    filter:
        drop-shadow(0 0 10px rgba(26, 118, 197, 0.18))
        drop-shadow(0 0 15px rgba(15, 94, 156, 0.18));
}

.services .service-card svg {
    stroke: var(--gold-500);
    color: var(--gold-500);
    background:radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.92), transparent 34%), linear-gradient(145deg, #ffffff, #e2e2e2);
    border-color: rgba(212, 175, 55, 0.28);
    box-shadow:
        0 18px 30px rgba(4, 24, 56, 0.13),
        0 0 0 1px rgba(246, 205, 83, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.services .service-grid .service-card:hover,
.services .service-grid .service-card:focus-within,
.services .service-grid .service-card.is-tilting {
    box-shadow:
        0 42px 82px rgba(4, 24, 56, 0.18),
        0 20px 44px rgba(15, 94, 156, 0.17),
        0 0 0 1px rgba(26, 118, 197, 0.13),
        inset 0 0 0 1px rgba(73, 117, 155, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.services .service-grid .service-card:hover::after,
.services .service-grid .service-card:focus-within::after,
.services .service-grid .service-card.is-tilting::after {
    filter:
        drop-shadow(0 0 20px rgba(15, 94, 156, 0.24))
        drop-shadow(0 0 14px rgba(92, 181, 239, 0.24));
}

.services .service-grid .service-card:hover svg,
.services .service-grid .service-card:focus-within svg,
.services .service-grid .service-card.is-tilting svg {
    stroke: var(--gold-500);
    filter:
        drop-shadow(0 16px 26px rgba(4, 24, 56, 0.14))
        drop-shadow(0 0 14px rgba(212, 175, 55, 0.20));
}

/* Advantage section: blue-only depth with a soft wave texture. */
.trust {
    isolation: isolate;
    background:
        radial-gradient(circle at 78% 18%, rgba(36, 118, 190, 0.18), transparent 34%),
        linear-gradient(112deg, #041838 0%, #062850 46%, #0b396b 74%, #082b56 100%);
}

.trust::before {
    z-index: 0;
    background:
        radial-gradient(120% 70% at 50% -18%, rgba(124, 196, 245, 0.055), transparent 54%),
        repeating-radial-gradient(ellipse at 16% 108%, transparent 0 63px, rgba(151, 213, 255, 0.055) 64px 65px, transparent 66px 96px),
        repeating-radial-gradient(ellipse at 78% 112%, transparent 0 77px, rgba(77, 170, 232, 0.045) 78px 79px, transparent 80px 118px),
        linear-gradient(90deg, rgba(159, 218, 255, 0.022) 1px, transparent 1px),
        linear-gradient(180deg, rgba(159, 218, 255, 0.018) 1px, transparent 1px);
    background-size: auto, auto, auto, 86px 86px, 86px 86px;
    opacity: 0.80;
    animation: trustWaveDrift 18s ease-in-out infinite alternate;
}

.trust::after {
    z-index: 0;
    right: -10%;
    bottom: -18%;
    width: 58%;
    height: 88%;
    background:
        radial-gradient(ellipse at 48% 70%, rgba(68, 153, 219, 0.20), transparent 58%),
        linear-gradient(112deg, transparent, rgba(124, 196, 245, 0.10));
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
    opacity: 0.72;
    animation: trustBeamShift 16s ease-in-out infinite alternate;
}

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

.trust-panel {
    background:
        linear-gradient(145deg, rgba(3, 18, 42, 0.78), rgba(7, 35, 67, 0.68)),
        rgba(3, 18, 42, 0.64);
    border-color: rgba(124, 196, 245, 0.22);
    box-shadow:
        0 30px 78px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.trust-panel::after {
    background:
        radial-gradient(circle, rgba(77, 170, 232, 0.16) 0%, rgba(15, 94, 156, 0.12) 38%, transparent 72%);
    opacity: 0.58;
}

.trust-stats article {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.065)),
        linear-gradient(135deg, rgba(6, 30, 62, 0.78), rgba(15, 71, 124, 0.45));
    border-color: rgba(159, 218, 255, 0.22);
    box-shadow:
        inset 0 0 0 1px rgba(159, 218, 255, 0.07),
        0 16px 32px rgba(2, 12, 30, 0.14);
}

.trust-stats article:hover {
    border-color: rgba(159, 218, 255, 0.36);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.075)),
        linear-gradient(135deg, rgba(6, 30, 62, 0.72), rgba(18, 89, 154, 0.48));
    box-shadow:
        0 22px 44px rgba(2, 12, 30, 0.20),
        inset 0 0 0 1px rgba(159, 218, 255, 0.10);
}

@keyframes trustWaveDrift {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 0 0, 36px -18px, -42px -22px, 18px 0, 0 18px;
    }
}

/* Global network: centered content with the full map underneath. */
.presence#operations {
    padding: 78px 0 88px !important;
   background:linear-gradient(180deg, #061a382e 0%, #061A38 15%, rgb(0 13 38) 30%, rgba(3, 21, 47, 0.75) 48%, rgba(2, 18, 43, 0.45) 65%, rgb(0 16 45) 82%, rgb(1 17 40 / 42%) 100%), url(../images/map-bg-imd.png);
}

.presence#operations .split-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.presence#operations .section-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.presence#operations .section-copy .eyebrow {
    justify-content: center;
    color: var(--gold-500);
}

.presence#operations .section-copy h2 {
    max-width: 920px;
    color: var(--white);
}

.presence#operations .section-copy p:not(.eyebrow) {
    max-width: 760px;
    color: rgba(230, 239, 248, 0.82);
}

.presence#operations .section-copy .button {
    margin-top: 16px;
}

.presence#operations .map-panel {
    width: 100%;
    min-height: clamp(500px, 48vw, 700px);
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.presence#operations .network-map-wrap {
    inset: 0;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.presence#operations .network-map .jvm-container {
    transform: scale(1.08);
    transform-origin: 50% 52%;
}

.presence#operations .vector-network-overlay {
    transform: scale(1.03);
    transform-origin: 50% 52%;
}

.presence#operations .map-legend {
    top: 18px;
    right: 18px;
}

.presence#operations .map-status-card {
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
}

@media (max-width: 860px) {
    .presence#operations {
        padding: 64px 0 72px !important;
    }

    .presence#operations .map-panel {
        min-height: 440px;
    }

    .presence#operations .network-map .jvm-container,
    .presence#operations .vector-network-overlay {
        transform: scale(1);
    }
}

@media (max-width: 560px) {
    .presence#operations .split-layout {
        gap: 26px;
    }

    .presence#operations .map-panel {
        min-height: 360px;
        border-radius: 0;
    }

    .presence#operations .map-legend {
        right: 10px;
        left: 10px;
        justify-content: center;
        max-width: none;
    }

    .presence#operations .map-status-card {
        bottom: 12px;
        max-width: calc(100% - 24px);
    }
}

/* Global network route style: one consistent golden treatment for every arc. */
.presence#operations .vector-route-web:not(.vector-route-web-track) path,
.presence#operations .vector-route-mesh path {
    fill: none;
    stroke: #F2BC2C;
    stroke-dasharray: 6 10;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-width: 0.84;
    opacity: 0.68;
    filter:
        drop-shadow(0 0 2px rgba(245, 193, 22, 0.30))
        drop-shadow(0 0 6px rgba(245, 193, 22, 0.13));
    animation: networkDashFlow 7.6s linear infinite;
}

.presence#operations .vector-route-web path:nth-child(n+10) {
    stroke-width: 0.84;
    opacity: 0.68;
    stroke-dasharray: 6 10;
    filter:
        drop-shadow(0 0 2px rgba(245, 193, 22, 0.30))
        drop-shadow(0 0 6px rgba(245, 193, 22, 0.13));
    animation: networkDashFlow 7.6s linear infinite;
}

.presence#operations .vector-route-web path:nth-child(n+19) {
    display: none;
}

.presence#operations .vector-route-web-track {
    display: block;
}

.presence#operations .vector-route-web-track path {
    stroke: #F2BC2C;
    stroke-dasharray: none;
    stroke-width: 1.4;
    opacity: 0.13;
    filter: blur(0.55px);
    animation: none;
}

.presence#operations .vector-route-web-track path:nth-child(n+19) {
    display: none;
}

.presence#operations .vector-route-sparks circle {
    display: block;
    fill: #FFF7D2;
    stroke: #F2BC2C;
    stroke-width: 0.55;
    opacity: 0.9;
    filter:
        drop-shadow(0 0 3px rgba(255, 247, 210, 0.92))
        drop-shadow(0 0 7px rgba(242, 188, 44, 0.72));
}

.presence#operations .vector-route-sparks circle:nth-child(n+7) {
    display: block;
    opacity: 0.76;
}

.presence#operations .network-map-wrap::before,
.presence#operations .network-map-wrap::after {
    display: none;
}

.presence#operations .vector-route-mesh path:nth-child(3n+2) {
    stroke-dasharray: 6 10;
    stroke-width: 0.84;
    opacity: 0.68;
    animation: networkDashFlow 7.6s linear infinite;
    animation-delay: -2.2s;
}

.presence#operations .vector-route-mesh path:nth-child(3n) {
    stroke-dasharray: 6 10;
    stroke-width: 0.84;
    opacity: 0.68;
    animation: networkDashFlow 7.6s linear infinite;
    animation-delay: -4.4s;
}

.presence#operations .vector-route-mesh path:nth-child(n+37) {
    display: block;
}

.presence#operations .vector-hub-glow {
    opacity: 0.56;
    animation: none;
}

.presence#operations .vector-hub-marker {
    filter:
        drop-shadow(0 0 8px rgba(255, 232, 146, 0.84))
        drop-shadow(0 0 22px rgba(245, 193, 22, 0.34));
}

.presence#operations .vector-hub-marker .hub-orbit,
.presence#operations .vector-hub-marker .hub-core,
.presence#operations .vector-hub-marker .hub-diamond {
    animation: none;
    transform-box: fill-box;
    transform-origin: center;
}

.presence#operations .vector-port-labels text {
    display: none;
}

.presence#operations .vector-map-pin,
.presence#operations .vector-map-tooltip {
    display: none;
}

.presence#operations .map-legend {
    padding: 7px 9px;
    background: rgba(3, 18, 43, 0.76);
    border-color: rgba(234, 183, 40, 0.38);
    border-radius: 999px;
}

.presence#operations .map-status-card {
    min-width: 156px;
    min-height: 38px;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(3, 18, 43, 0.82);
    border-color: rgba(234, 183, 40, 0.32);
    border-radius: 999px;
}

.presence#operations .map-status-card i {
width: 9px;
    height: 9px;
    background: #23D68A;
    border-radius: 50%;
    margin-top: 4px;
    box-shadow: 0 0 8px rgba(35, 214, 138, 0.72);
}

/* Premium global network map — illuminated raster base with live SVG routes. */
.presence#operations .map-panel {
    min-height: 0;
    aspect-ratio: 1916 / 821;
}

.presence#operations .network-map-wrap {
    overflow: hidden;
}

.presence#operations .network-map-base {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    user-select: none;
    pointer-events: none;
}

.presence#operations .network-map {
    opacity: 0;
    pointer-events: none;
}

.presence#operations .vector-network-overlay {
    z-index: 3;
    transform: none;
}

.presence#operations .map-legend,
.presence#operations .map-status-card {
    display: none;
}

.presence#operations .vector-route-web-track path {
    stroke: #F6C846;
    stroke-width: 1.25;
    opacity: 0.16;
    filter: blur(0.35px);
}

.presence#operations .vector-route-web:not(.vector-route-web-track) path {
    stroke: #F7C844;
    stroke-width: 0.9;
    stroke-dasharray: 5 8;
    opacity: 0.82;
    filter: drop-shadow(0 0 2.5px rgba(247, 200, 68, 0.58));
    animation-duration: 6.4s;
}

.presence#operations .vector-route-mesh path,
.presence#operations .vector-route-mesh path:nth-child(3n+2),
.presence#operations .vector-route-mesh path:nth-child(3n) {
    stroke: #48A9FF;
    stroke-width: 0.72;
    stroke-dasharray: 2 7;
    opacity: 0.72;
    filter: drop-shadow(0 0 2px rgba(72, 169, 255, 0.46));
    animation: networkDashFlow 8.8s linear infinite;
}

.presence#operations .vector-route-mesh path:nth-child(3n+2) {
    animation-delay: -2.8s;
}

.presence#operations .vector-route-mesh path:nth-child(3n) {
    animation-delay: -5.6s;
}

.presence#operations .vector-route-sparks circle {
    fill: #FFF6C9;
    stroke: #F7C844;
    stroke-width: 0.45;
    opacity: 1;
    filter: drop-shadow(0 0 3px #FFF2A8) drop-shadow(0 0 7px rgba(247, 200, 68, 0.9));
}

.presence#operations .vector-route-sparks circle:nth-child(n+7):nth-child(-n+12) {
    fill: #DFF4FF;
    stroke: #48A9FF;
    opacity: 0.96;
    filter: drop-shadow(0 0 3px #DFF4FF) drop-shadow(0 0 7px rgba(72, 169, 255, 0.9));
}

.presence#operations .vector-port-markers {
    filter: drop-shadow(0 0 5px rgba(247, 200, 68, 0.74));
}

.presence#operations .vector-port-labels text {
    display: block;
    fill: #F8FBFF;
    font-family: Inter, sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.025em;
    paint-order: stroke fill;
    stroke: rgba(2, 15, 35, 0.96);
    stroke-width: 4px;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}

.presence#operations .vector-port-labels .port-country,
.presence#operations .vector-port-labels .hub-country {
    display: none;
}

.presence#operations .vector-port-labels .hub-name {
    fill: #FFD34F;
    font-size: 10px;
}

.presence#operations .vector-port-labels text:nth-child(4),
.presence#operations .vector-port-labels text:nth-child(9) {
    display: none;
}

.network-info-legend,
.network-route-key {
    position: absolute;
    z-index: 6;
    color: #F6FAFF;
    background: rgba(2, 17, 42, 0.88);
    border: 1px solid rgba(104, 162, 226, 0.32);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
}

.network-info-legend {
    left: 16px;
    bottom: 18px;
    width: 184px;
    padding: 12px 13px;
    border-radius: 10px;
}

.network-info-legend > div {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 9px;
    align-items: start;
}

.network-info-legend > div + div {
    margin-top: 10px;
}

.network-feature-icon {
    color: #F7C844;
    font-size: 17px;
    line-height: 1;
    text-align: center;
    text-shadow: 0 0 10px rgba(247, 200, 68, 0.65);
}

.network-info-legend p {
    margin: 0;
}

.network-info-legend strong,
.network-info-legend small {
    display: block;
}

.network-info-legend strong {
    font-size: 8px;
    line-height: 1.25;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.network-info-legend small {
    margin-top: 2px;
    color: rgba(219, 232, 247, 0.7);
    font-size: 6.7px;
    line-height: 1.35;
}

.network-route-key {
    left: 50%;
    bottom: 18px;
    display: grid;
    gap: 7px;
    min-width: 178px;
    padding: 10px 14px;
    border-radius: 9px;
    transform: translateX(-50%);
}

.network-route-key span {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(242, 247, 253, 0.88);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.network-route-key i {
    width: 30px;
    height: 0;
    border-top: 1px dashed #F7C844;
}

.network-route-key .route-key-secondary {
    border-color: #48A9FF;
    border-top-style: dotted;
}

.network-route-key .route-key-port {
    width: 7px;
    height: 7px;
    margin-left: 11px;
    margin-right: 12px;
    border: 1px solid #FFE58B;
    border-radius: 50%;
    background: #F7C844;
    box-shadow: 0 0 7px rgba(247, 200, 68, 0.85);
}

@media (max-width: 860px) {
    .presence#operations .map-panel {
        min-height: 0;
        aspect-ratio: 1916 / 821;
    }

    .network-info-legend {
        display: none;
    }

    .network-route-key {
        bottom: 10px;
        grid-template-columns: repeat(3, auto);
        min-width: 0;
        width: max-content;
        max-width: calc(100% - 20px);
        padding: 8px 10px;
    }

    .network-route-key span {
        font-size: 6px;
    }

    .network-route-key i {
        width: 20px;
    }
}

@media (max-width: 560px) {
    .presence#operations .map-panel {
        min-height: 0;
        aspect-ratio: 1916 / 821;
    }
    .solutions-page .solution-card-cursor{
        display: none;
    }

    .presence#operations .network-map-base {
        object-fit: cover;
    }

    .presence#operations .vector-port-labels text,
    .network-route-key {
        display: none;
    }
}

/* Contact page */
.contact-page {
    background: #050A18;
    color: var(--white);
}

.contact-page .site-header {
    background: rgba(4, 24, 56, 0.82);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
}

.contact-page .nav-cta.active {
    color: var(--navy-900);
}

.contact-main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 116px 0 52px;
}

.contact-main > .container {
    width: min(100% - 48px, 1180px);
}

.contact-main-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(3, 12, 29, 0.7) 0%, rgba(3, 12, 29, 0.88) 42%, rgba(3, 12, 29, 0.96) 100%),
        linear-gradient(180deg, rgba(5, 10, 24, 0.45) 0%, rgba(5, 10, 24, 0.82) 72%, #050A18 100%),
        url("../images/truck-logistics-operation-dusk.jpg") center 35% / cover no-repeat;
}

.contact-main-bg::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 18% 28%, rgba(238, 164, 45, 0.12), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(26, 118, 197, 0.18), transparent 24%);
    pointer-events: none;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: minmax(330px, 440px) minmax(0, 840px);
    justify-content: center;
    gap: clamp(32px, 2vw, 45px);
    align-items: start;
    min-width: 0;
    padding-top: 40px;
}

.contact-main-grid > * {
    min-width: 0;
}

.contact-intro {
    padding-top: 64px;
}

.contact-intro .eyebrow,
.contact-process .eyebrow,
.contact-faq .eyebrow {
    margin-bottom: 10px;
    color: var(--gold-500);
    letter-spacing: 0.12em;
    font-size: 11px;
}

.contact-intro h1 {
    max-width: 390px;
    margin: 0 0 12px;
    color: var(--white);
    font-family: var(--display);
    font-size: clamp(34px, 2.8vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.contact-intro-lead {
    max-width: 380px;
    margin: 0 0 26px;
    color: rgba(214, 228, 244, 0.78);
    font-size: 13px;
    line-height: 1.6;
}

.contact-value-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-value-list li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
}

.contact-value-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--gold-500);
    background: rgba(238, 164, 45, 0.1);
    border: 1px solid rgba(238, 164, 45, 0.28);
    border-radius: 50%;
}

.contact-value-icon svg {
    width: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-value-list strong {
    display: block;
    margin-bottom: 1px;
    color: var(--white);
    font-size: 12px;
    line-height: 1.25;
}

.contact-value-list p {
    margin: 0;
    color: rgba(203, 219, 236, 0.62);
    font-size: 11px;
    line-height: 1.4;
}

.contact-enquiry {
    width: 100%;
    max-width: 760px;
    justify-self: end;
    min-width: 0;
    overflow: hidden;
    padding: 18px 20px 20px;
    background: linear-gradient(145deg, rgba(7, 24, 51, 0.97), rgba(4, 15, 34, 0.98));
    border: 1px solid rgba(103, 147, 190, 0.28);
    border-radius: 14px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
    scroll-margin-top: 96px;
}

.contact-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 15px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-stepper-item {
    display: grid;
    flex: 1;
    grid-template-columns: 32px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 0;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: opacity 220ms ease, transform 220ms ease;
}

.contact-stepper-item:hover:not(.is-active) {
    transform: translateY(-1px);
}

.contact-stepper-item:focus-visible {
    outline: 2px solid rgba(238, 164, 45, 0.8);
    outline-offset: 4px;
    border-radius: 8px;
}

.contact-stepper-circle {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: rgba(214, 228, 244, 0.72);
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
    transition: background 260ms ease, border-color 260ms ease, color 260ms ease, box-shadow 260ms ease;
}

.contact-stepper-label {
    display: grid;
    gap: 2px;
    /* max-width: 132px; */
    color: rgba(203, 219, 236, 0.58);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.contact-stepper-label small {
    color: rgba(238, 164, 45, 0.72);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-stepper-line {
    flex: 0 0 clamp(20px, 5vw, 44px);
    height: 2px;
    margin-top: 14px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    transition: background 260ms ease;
}

.contact-stepper-line.is-complete {
    background: linear-gradient(90deg, rgba(238, 164, 45, 0.95), rgba(255, 248, 123, 0.85));
}

.contact-stepper-item.is-active .contact-stepper-circle,
.contact-stepper-item.is-complete .contact-stepper-circle {
    color: var(--navy-900);
    background: linear-gradient(148deg, rgba(238, 164, 45, 1) 0%, rgba(255, 248, 123, 1) 42%, rgba(238, 164, 45, 1) 100%);
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(238, 164, 45, 0.14);
}

.contact-stepper-item.is-active .contact-stepper-label,
.contact-stepper-item.is-complete .contact-stepper-label {
    color: rgba(236, 244, 252, 0.92);
}

.contact-steps-viewport {
    overflow: hidden;
    width: 100%;
    min-width: 0;
    transition: height 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-steps-track {
    display: flex;
    width: 300%;
    align-items: stretch;
    transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-step-panel {
    flex: 0 0 33.3333%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 260ms ease;
}

.contact-step-panel.is-active {
    opacity: 1;
    pointer-events: auto;
}

.contact-step-panel fieldset {
    border: 0;
}

.contact-step-heading {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.contact-step-tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    margin-bottom: 4px;
    padding: 0 9px;
    color: var(--gold-500);
    background: rgba(238, 164, 45, 0.1);
    border: 1px solid rgba(238, 164, 45, 0.24);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-step-heading strong {
    display: block;
    margin: 0;
    color: var(--white);
    font-size: clamp(18px, 1.6vw, 21px);
    font-weight: 700;
    line-height: 1.15;
}

.contact-step-heading p {
    margin: 0;
    color: rgba(203, 219, 236, 0.58);
    font-size: 15px;
    line-height: 1.45;
}

.contact-form {
    margin: 0;
    min-width: 0;
    max-width: 100%;
}

.contact-form-shell {
    min-width: 0;
    max-width: 100%;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 14px;
    align-items: start;
}

.contact-form-grid-step1 {
    grid-template-areas:
        "company company"
        "name email"
        "country trn"
        "phone phone";
    gap: 12px 14px;
}

.contact-form-grid-step2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.contact-form-grid-step1 .contact-field:has(#contact-company) { grid-area: company; }
.contact-form-grid-step1 .contact-field:has(#contact-name) { grid-area: name; }
.contact-form-grid-step1 .contact-field:has(#contact-email) { grid-area: email; }
.contact-form-grid-step1 .contact-field:has(#contact-country) { grid-area: country; }
.contact-form-grid-step1 .contact-field:has(#contact-trn) { grid-area: trn; }
.contact-form-grid-step1 .contact-field:has(#contact-phone) { grid-area: phone; }

.contact-field {
    min-width: 0;
}

.contact-field-wide {
    grid-column: 1 / -1;
}

.contact-field label,
.contact-field-label {
    display: block;
    margin-bottom: 4px;
    color: rgba(226, 236, 248, 0.88);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.contact-field label em,
.contact-field-label em {
    color: var(--gold-500);
    font-style: normal;
}

.contact-input-wrap {
    position: relative;
}

.contact-input-wrap svg {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    width: 16px;
    fill: none;
    stroke: rgba(238, 164, 45, 0.82);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(-50%);
    pointer-events: none;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    color: var(--white);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    outline: none;
    font: inherit;
    font-size: 13px;
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.contact-input-wrap input,
.contact-input-wrap select {
    padding-left: 40px;
}

.contact-field input,
.contact-field select {
    height: 42px;
    padding-right: 14px;
}

.contact-field textarea {
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: rgba(167, 184, 204, 0.62);
}

.contact-field select {
    appearance: none;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.04);
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(238, 164, 45, 0.85) 50%),
        linear-gradient(135deg, rgba(238, 164, 45, 0.85) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.contact-field select option {
    color: var(--navy-900);
    background: var(--white);
}

.contact-country-combo [data-country-select] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contact-country-combo {
    position: relative;
}

.contact-country-combo input[data-country-search] {
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(238, 164, 45, 0.85) 50%),
        linear-gradient(135deg, rgba(238, 164, 45, 0.85) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 30px;
}

.contact-country-listbox {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 20;
    max-height: 248px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    background: #0a2140;
    border: 1px solid rgba(238, 164, 45, 0.28);
    border-radius: 12px;
    box-shadow: 0 20px 44px rgba(1, 11, 29, 0.42);
}

.contact-country-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    color: rgba(226, 236, 248, 0.9);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

.contact-country-flag {
    font-size: 15px;
    line-height: 1;
}

.contact-country-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.contact-country-dial {
    color: rgba(226, 236, 248, 0.5);
    font-size: 11px;
}

.contact-country-option:hover,
.contact-country-option.is-active {
    background: rgba(238, 164, 45, 0.16);
    color: #fff;
}

.contact-country-empty {
    padding: 12px 10px;
    color: rgba(226, 236, 248, 0.55);
    font-size: 12px;
    text-align: center;
}

.contact-phone-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}

.contact-phone-prefix {
    padding: 0 14px;
    color: rgba(226, 236, 248, 0.82);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.contact-phone-wrap input {
    height: 42px;
    padding: 0 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.contact-field-note {
    display: block;
    margin-top: 4px;
    color: rgba(167, 184, 204, 0.52);
    font-size: 8px;
    line-height: 1.45;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus,
.contact-phone-wrap:focus-within {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(238, 164, 45, 0.55);
    box-shadow: 0 0 0 4px rgba(238, 164, 45, 0.1);
}

.contact-phone-wrap:focus-within input {
    box-shadow: none;
}

.contact-field.is-invalid input,
.contact-field.is-invalid select,
.contact-field.is-invalid textarea,
.contact-field.is-invalid .contact-phone-wrap,
.contact-field.is-invalid .contact-choice-grid,
.contact-field.is-invalid .contact-chip-group {
    border-color: #D86A6A;
    box-shadow: 0 0 0 3px rgba(216, 106, 106, 0.1);
}

.field-error,
.contact-consent-error {
    display: none;
    margin-top: 4px;
    color: #F0A0A0;
    font-size: 9px;
    font-weight: 600;
}

.contact-field.is-invalid .field-error,
.contact-consent-error.is-visible {
    display: block;
}

.contact-choice-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 12px;
}

.contact-choice-card {
    position: relative;
    display: grid;
    gap: 8px;
    justify-items: center;
    align-content: center;
    min-height: 96px;
    padding: 16px 10px;
    color: rgba(226, 236, 248, 0.82);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.contact-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact-choice-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    background: rgba(238, 164, 45, 0.1);
    border: 1px solid rgba(238, 164, 45, 0.24);
    border-radius: 50%;
    transition: background 220ms ease, border-color 220ms ease;
}

.contact-choice-icon svg {
    width: 18px;
    fill: none;
    stroke: rgba(238, 164, 45, 0.85);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-choice-card:hover,
.contact-choice-card:has(input:checked),
.contact-choice-card:has(input:focus-visible) {
    transform: translateY(-2px);
    background: rgba(238, 164, 45, 0.08);
    border-color: rgba(238, 164, 45, 0.55);
    box-shadow: 0 0 0 4px rgba(238, 164, 45, 0.08);
}

.contact-choice-card:hover .contact-choice-icon,
.contact-choice-card:has(input:checked) .contact-choice-icon,
.contact-choice-card:has(input:focus-visible) .contact-choice-icon {
    background: rgba(238, 164, 45, 0.2);
    border-color: rgba(238, 164, 45, 0.7);
}

.contact-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 10px;
}

.contact-chip {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    cursor: pointer;
}

.contact-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact-chip span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 34px;
    padding: 0 8px;
    color: rgba(226, 236, 248, 0.78);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    transition: border-color 220ms ease, background 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

.contact-chip:hover span,
.contact-chip:has(input:checked) span,
.contact-chip:has(input:focus-visible) span {
    color: var(--white);
    background: rgba(238, 164, 45, 0.1);
    border-color: rgba(238, 164, 45, 0.55);
    box-shadow: 0 0 0 4px rgba(238, 164, 45, 0.08);
}

.contact-textarea-wrap {
    position: relative;
}

.contact-char-count {
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: rgba(167, 184, 204, 0.58);
    font-size: 11px;
    font-weight: 600;
}

.contact-consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
    color: #000;
    font-size: 11px;
    cursor: pointer;
}

.contact-consent a {
    color: var(--gold-500);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.contact-consent input {
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--gold-500);
}

.contact-step-actions {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.contact-step-actions-split {
    grid-template-columns: minmax(96px, 110px) minmax(0, 1fr);
}

.contact-step-actions-primary {
    gap: 8px;
}

.contact-step-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.contact-step-back {
    color: var(--white);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.contact-step-back:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
}

.contact-secure-note {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: rgba(167, 184, 204, 0.52);
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
}

.contact-secure-note svg {
    flex: 0 0 14px;
    width: 14px;
    fill: none;
    stroke: rgba(238, 164, 45, 0.72);
    stroke-width: 1.6;
}

.contact-field-timeline {
    margin-top: 2px;
}

.contact-field-timeline .contact-chip {
    flex: 1 1 calc(25% - 6px);
    min-width: 118px;
}

.contact-field-solution {
    margin-bottom: 8px;
}

.contact-field-solution + .contact-form-grid-step2 {
    margin-top: 0;
}

@media (min-width: 1081px) {
    .contact-field-timeline .contact-chip {
        flex: 1 1 calc(25% - 6px);
    }
}

.contact-form-status {
    display: none;
    margin-top: 16px;
    padding: 12px 14px;
    color: #C9F2DE;
    background: rgba(22, 93, 67, 0.28);
    border: 1px solid rgba(191, 231, 215, 0.28);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.contact-form-status.is-visible {
    display: block;
}

.contact-form-shell.is-hidden {
    display: none;
}

.contact-success {
    display: grid;
    gap: 14px;
    justify-items: center;
    padding: 36px 20px 28px;
    text-align: center;
    animation: contactSuccessIn 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-success[hidden] {
    display: none !important;
}

.contact-success-icon {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    color: var(--navy-900);
    background: linear-gradient(148deg, rgba(238, 164, 45, 1) 0%, rgba(255, 248, 123, 1) 42%, rgba(238, 164, 45, 1) 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(238, 164, 45, 0.14);
}

.contact-success-icon svg {
    width: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-success-eyebrow {
    margin: 0;
    color: var(--gold-500);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.contact-success h2 {
    margin: 0;
    color: var(--white);
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.1;
}

.contact-success > p:not(.contact-success-eyebrow) {
    max-width: 420px;
    margin: 0;
    color: rgba(203, 219, 236, 0.72);
    font-size: 14px;
    line-height: 1.65;
}

.contact-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 8px;
}

.contact-success-actions .button {
    min-width: 148px;
    min-height: 44px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 800;
}

.contact-success-link {
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
}

@keyframes contactSuccessIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-process {
    padding: 36px 0 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(19, 91, 151, 0.22), transparent 42%),
        #041838;
}

.contact-process .container {
    padding: 38px clamp(24px, 4vw, 54px) 42px;
    background: rgba(4, 18, 42, 0.72);
    border: 1px solid rgba(103, 147, 190, 0.22);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.contact-process-heading {
    margin-bottom: 34px;
    text-align: center;
}

.contact-process-heading h2 {
    margin: 0;
    color: var(--white);
    font-family: var(--display);
    font-size: clamp(24px, 2.6vw, 32px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.contact-process-underline {
    display: block;
    width: 54px;
    height: 3px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, rgba(238, 164, 45, 1), rgba(255, 248, 123, 1));
    border-radius: 999px;
}

.contact-process-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-process-flow li {
    position: relative;
    text-align: center;
}

.contact-process-flow li:not(:last-child)::after {
    position: absolute;
    top: 32px;
    right: -24%;
    width: 48%;
    height: 0;
    content: "";
    border-top: 2px dotted rgba(238, 164, 45, 0.34);
    pointer-events: none;
}

.contact-process-icon {
    position: relative;
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    margin: 0 auto 15px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(238, 164, 45, 0.42);
    border-radius: 50%;
}

.contact-process-icon svg {
    width: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-process-icon span {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    color: var(--navy-900);
    background: linear-gradient(148deg, rgba(238, 164, 45, 1) 0%, rgba(255, 248, 123, 1) 42%, rgba(238, 164, 45, 1) 100%);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
}

.contact-process-flow h3 {
    margin: 0 0 6px;
    color: var(--white);
    font-size: 16px;
}

.contact-process-flow p {
    max-width: 220px;
    margin: 0 auto;
    color: rgba(203, 219, 236, 0.64);
    font-size: 13px;
    line-height: 1.55;
}

.contact-faq {
    padding: 18px 0 72px;
    background: #041838;
    color: var(--navy-900);
}

.contact-faq .container {
    padding: 34px clamp(24px, 4vw, 52px) 38px;
    background: #F7F9FC;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
}

.contact-faq-heading {
    max-width: 760px;
    margin: 0 0 22px;
    text-align: left;
}

.contact-faq-heading h2 {
    margin: 0;
    color: var(--navy-900);
    font-family: var(--display);
    font-size: clamp(25px, 2.8vw, 34px);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.contact-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    max-width: none;
    margin: 0;
}

.contact-faq-item {
    overflow: hidden;
    background: var(--white);
    border: 1px solid #D8E3EE;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(4, 24, 56, 0.04);
}

.contact-faq-item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 14px;
    align-items: center;
    padding: 13px 15px;
    list-style: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.contact-faq-item summary:focus-visible {
    outline: 2px solid rgba(238, 164, 45, 0.8);
    outline-offset: -3px;
    border-radius: 8px;
}

.contact-faq-item summary::-webkit-details-marker {
    display: none;
}

.contact-faq-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: var(--navy-900);
    background: rgba(238, 164, 45, 0.14);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
}

.contact-faq-toggle {
    position: relative;
    width: 16px;
    height: 16px;
}

.contact-faq-toggle::before,
.contact-faq-toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    background: #567089;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.contact-faq-toggle::before {
    width: 14px;
    height: 2px;
}

.contact-faq-toggle::after {
    width: 2px;
    height: 14px;
    transition: transform 220ms ease, opacity 220ms ease;
}

.contact-faq-item[open] .contact-faq-toggle::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.contact-faq-body {
    padding: 0 16px 14px 17px;
}

.contact-faq-body p {
    margin: 0;
    color: #5B7086;
    font-size: 11px;
    line-height: 1.65;
}

@media (min-width: 1081px) {
    .contact-main {
        min-height: 100svh;
        display: flex;
        align-items: center;
        padding: 92px 0 40px;
    }
}

@media (max-width: 1080px) {
    .contact-main-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 28px;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .contact-intro {
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding-top: 0;
    }

    .contact-enquiry {
        justify-self: center;
    }

    .contact-choice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contact-process-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 34px;
    }

    .contact-process-flow li:not(:last-child)::after {
        display: none;
    }
}

@media (max-width: 860px) {
    .contact-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .contact-page {
        overflow-x: clip;
    }

    .contact-main {
        padding: 98px 0 36px;
        overflow-x: clip;
    }

    .contact-main > .container {
        width: 100%;
        max-width: 100%;
        padding-inline: 16px;
        box-sizing: border-box;
    }

    .contact-intro {
        padding-top: 0;
    }

    .contact-intro .eyebrow {
        font-size: 10px;
        letter-spacing: 0.1em;
        line-height: 1.45;
    }

    .contact-intro h1 {
        max-width: 100%;
        font-size: clamp(26px, 7.5vw, 32px);
        line-height: 1.12;
    }

    .contact-intro-lead {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.65;
    }

    .contact-page .contact-intro.reveal,
    .contact-page .contact-enquiry.reveal {
        opacity: 1;
        transform: none;
    }

    .contact-value-list {
        gap: 12px;
    }

    .contact-value-list li {
        gap: 10px;
    }

    .contact-value-list strong {
        font-size: 13px;
    }

    .contact-value-list p {
        font-size: 12px;
    }

    .contact-enquiry {
        padding: 18px 14px;
        border-radius: 16px;
    }

    .contact-stepper {
        gap: 0;
        margin-bottom: 20px;
        padding-bottom: 18px;
    }

    .contact-stepper-item {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 6px;
        text-align: center;
    }

    .contact-stepper-line {
        flex-basis: 18px;
    }

    .contact-stepper-label {
        font-size: 10px;
    }

    .contact-step-heading strong {
        font-size: 20px;
    }

    .contact-step-heading p {
        font-size: 13px;
    }

    .contact-step-tag {
        font-size: 10px;
    }

    .contact-field label,
    .contact-field-label {
        font-size: 10px;
    }

    .contact-field input,
    .contact-field select,
    .contact-field textarea {
        font-size: 16px;
    }

    .contact-field input,
    .contact-field select {
        min-height: 46px;
    }

    .contact-choice-card {
        min-height: 74px;
        padding: 12px 8px;
        font-size: 10px;
    }

    .contact-chip span {
        min-height: 40px;
        font-size: 11px;
    }

    .contact-step-btn {
        min-height: 48px;
        font-size: 14px;
    }

    .contact-consent {
        font-size: 12px;
    }

    .contact-form-grid,
    .contact-step-actions-split {
        grid-template-columns: 1fr;
    }

    .contact-form-grid-step1 {
        grid-template-areas:
            "company"
            "name"
            "email"
            "country"
            "trn"
            "phone";
    }

    .contact-form-grid-step2 {
        grid-template-columns: 1fr;
    }

    .contact-field-timeline .contact-chip {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    .contact-field-wide {
        grid-column: auto;
    }

    .contact-choice-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact-process,
    .contact-faq {
        padding: 14px 16px;
    }

    .contact-process > .container,
    .contact-faq > .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 28px 16px 32px;
        border-radius: 12px;
    }

    .contact-page .contact-process .reveal,
    .contact-page .contact-faq .reveal {
        opacity: 1;
        transform: none;
    }

    .contact-process-heading h2,
    .contact-faq-heading h2 {
        font-size: clamp(22px, 6vw, 28px);
        line-height: 1.15;
    }

    .contact-process-flow {
        grid-template-columns: 1fr;
    }

    .contact-process-flow h3 {
        font-size: 17px;
    }

    .contact-process-flow p {
        font-size: 14px;
    }

    .contact-faq-list {
        grid-template-columns: 1fr;
    }

    .contact-faq-item summary {
        font-size: 14px;
        padding: 14px 16px;
    }

    .contact-faq-body {
        padding-left: 20px;
    }

    .contact-faq-body p {
        font-size: 12px;
    }

    .contact-success-actions {
        flex-direction: column;
    }

    .contact-success-actions .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .contact-main > .container {
        padding-inline: 14px;
    }

    .contact-stepper-label small {
        display: none;
    }

    .contact-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .contact-choice-card:nth-child(5) {
        grid-column: 1 / -1;
    }

    .contact-stepper-label {
        font-size: 10px;
        line-height: 1.25;
    }

    .contact-intro h1 {
        font-size: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-steps-track,
    .contact-steps-viewport,
    .contact-step-panel,
    .contact-stepper-item,
    .contact-stepper-circle,
    .contact-stepper-line {
        scroll-behavior: auto;
        transition-duration: 0.01ms !important;
    }
}

/* Final mobile cascade for the Contact page only. */
@media (max-width: 720px) {
    body.contact-page {
        overflow-x: hidden;
    }

    body.contact-page .contact-main {
        padding: 96px 0 34px;
        overflow: hidden;
    }

    body.contact-page .contact-main > .container {
        width: min(100% - 28px, 520px);
        max-width: 100%;
        padding-inline: 0;
        margin-inline: auto;
    }

    body.contact-page .contact-main-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
    }

    body.contact-page .contact-intro {
        text-align: center;
    }

    body.contact-page .contact-intro .eyebrow {
        justify-content: center;
    }

    body.contact-page .contact-intro h1 {
        max-width: 100%;
        margin-inline: auto;
        font-size: clamp(32px, 8.7vw, 40px);
        line-height: 1.06;
        letter-spacing: 0;
    }

    body.contact-page .contact-intro-lead {
        max-width: 100%;
        margin-bottom: 18px;
    }

    body.contact-page .contact-value-list {
        display: grid;
        gap: 10px;
        text-align: left;
    }

    body.contact-page .contact-value-list li {
        padding: 12px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
    }

    body.contact-page .contact-enquiry {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        border-radius: 18px;
        overflow: hidden;
        scroll-margin-top: 94px;
    }

    body.contact-page .contact-stepper {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 18px;
        padding-bottom: 16px;
    }

    body.contact-page .contact-stepper-line {
        display: none;
    }

    body.contact-page .contact-stepper-item {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        min-height: 58px;
        padding: 8px 6px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
    }

    body.contact-page .contact-stepper-circle {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    body.contact-page .contact-stepper-label {
        max-width: 100%;
        font-size: 9px;
        line-height: 1.25;
        text-align: center;
    }

    body.contact-page .contact-steps-viewport {
        height: auto !important;
        min-height: 0;
        overflow: visible;
    }

    body.contact-page .contact-steps-track {
        display: block;
        width: 100%;
        transform: none !important;
    }

    body.contact-page .contact-step-panel {
        display: none;
        width: 100%;
        min-width: 0;
        padding: 0;
        opacity: 0;
        transform: none;
    }

    body.contact-page .contact-step-panel.is-active {
        display: block;
        opacity: 1;
    }

    body.contact-page .contact-step-heading {
        margin-bottom: 14px;
    }

    body.contact-page .contact-step-heading strong {
        font-size: clamp(22px, 6.2vw, 28px);
        line-height: 1.1;
    }

    body.contact-page .contact-step-heading p {
        font-size: 14px;
        line-height: 1.5;
    }

    body.contact-page .contact-form-grid,
    body.contact-page .contact-form-grid-step1,
    body.contact-page .contact-form-grid-step2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: none;
        gap: 13px;
    }

    body.contact-page .contact-form-grid-step1 .contact-field {
        grid-area: auto !important;
    }

    body.contact-page .contact-field-wide {
        grid-column: auto;
    }

    body.contact-page .contact-field label,
    body.contact-page .contact-field-label {
        margin-bottom: 6px;
        font-size: 10px;
        line-height: 1.35;
    }

    body.contact-page .contact-field input,
    body.contact-page .contact-field select,
    body.contact-page .contact-field textarea {
        font-size: 16px;
        border-radius: 12px;
    }

    body.contact-page .contact-field input,
    body.contact-page .contact-field select {
        min-height: 50px;
    }

    body.contact-page .contact-field textarea {
        min-height: 118px;
        line-height: 1.45;
    }

    body.contact-page .contact-choice-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.contact-page .contact-choice-card,
    body.contact-page .contact-choice-card:nth-child(5) {
        grid-column: auto;
        min-height: 64px;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: center;
        justify-items: start;
        gap: 10px;
        padding: 12px;
        text-align: left;
        font-size: 12px;
        line-height: 1.3;
    }

    body.contact-page .contact-choice-icon svg {
        width: 24px;
        height: 24px;
    }

    body.contact-page .contact-chip-group {
        gap: 8px;
    }

    body.contact-page .contact-field-timeline .contact-chip {
        flex: 1 1 100%;
    }

    body.contact-page .contact-chip span {
        min-height: 44px;
        justify-content: center;
        font-size: 12px;
    }

    body.contact-page .contact-consent {
        align-items: flex-start;
        gap: 10px;
        margin-top: 16px;
        font-size: 13px;
        line-height: 1.5;
    }

    body.contact-page .contact-consent input {
        flex: 0 0 auto;
        margin-top: 2px;
    }

    body.contact-page .contact-step-actions,
    body.contact-page .contact-step-actions-split,
    body.contact-page .contact-step-actions-primary {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 20px;
    }

    body.contact-page .contact-step-btn {
        width: 100%;
        min-height: 54px;
        justify-content: center;
        font-size: 13px;
    }

    body.contact-page .contact-secure-note {
        justify-content: center;
        text-align: center;
    }

    body.contact-page .contact-process,
    body.contact-page .contact-faq {
        padding: 18px 0;
    }

    body.contact-page .contact-process > .container,
    body.contact-page .contact-faq > .container {
        width: min(100% - 28px, 520px);
        padding: 26px 16px 30px;
        margin-inline: auto;
        border-radius: 16px;
    }

    body.contact-page .contact-process-heading,
    body.contact-page .contact-faq-heading {
        text-align: center;
    }

    body.contact-page .contact-process-heading .eyebrow,
    body.contact-page .contact-faq-heading .eyebrow {
        justify-content: center;
    }

    body.contact-page .contact-process-flow {
        gap: 14px;
    }

    body.contact-page .contact-process-flow li {
        padding: 16px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
    }

    body.contact-page .contact-faq-item summary {
        grid-template-columns: minmax(0, 1fr) 22px;
        gap: 10px;
        padding: 14px 12px;
    }
}

@media (max-width: 380px) {
    body.contact-page .contact-main > .container,
    body.contact-page .contact-process > .container,
    body.contact-page .contact-faq > .container {
        width: min(100% - 22px, 520px);
    }

    body.contact-page .contact-enquiry {
        padding: 14px;
    }

    body.contact-page .contact-stepper {
        gap: 6px;
    }

    body.contact-page .contact-stepper-item {
        min-height: 54px;
        padding: 7px 4px;
    }

    body.contact-page .contact-stepper-label {
        font-size: 8px;
    }
}

/* Industries hub: compact one-screen desktop experience. */
@media (min-width: 1181px) {
    .industry-hub-section {
        min-height: 100svh;
        padding: 62px 0 62px;
    }

    .industry-hub-section .industry-section-intro {
        margin-bottom: 14px;
    }
/* 
    .industry-hub-section .industry-section-intro .eyebrow {
        margin-bottom: 5px;
        font-size: 10px;
    } */

    /* .industry-hub-section .industry-section-intro h2 {
        font-size: clamp(30px, 2.35vw, 38px);
        line-height: 1.02;
    } */

    /* .industry-hub-section .industry-section-intro p:last-child {
        max-width: 620px;
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.42;
    } */

    .industry-hub-layout {
        height: clamp(600px, calc(100svh - 165px), 650px);
        gap: 16px;
    }

    .industry-list,
    .industry-spotlight {
        height: 100%;
    }

    .industry-list {
        gap: 10px;
    }

    .industry-node {
        grid-template-columns: 22px 42px minmax(0, 1fr) 30px;
        gap: 9px;
        padding: 12px 11px;
        border-radius: 14px;
    }

    .industry-node:hover {
        transform: translateY(-2px);
    }

    .industry-node-icon {
        width: 42px;
        height: 42px;
    }

    .industry-node svg {
        width: 22px;
        height: 22px;
    }

    .industry-node-copy strong h3 {
        font-size: 15px;
        line-height: 1.16;
    }

    .industry-node-copy small {
        display: none;
    }

    .industry-node-action {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    .industry-detail-active {
        grid-template-rows: 156px minmax(0, 1fr);
    }

    .industry-detail-visual {
        height: 156px;
    }

    .industry-detail-heading {
        right: 24px;
        bottom: 17px;
        left: 24px;
    }

    .industry-detail-heading p {
        margin-bottom: 6px;
        font-size: 9.5px;
    }

    .industry-detail-heading h3 {
        margin-bottom: 4px;
        font-size: clamp(27px, 2.25vw, 34px);
    }

    .industry-detail-heading span {
        font-size: 12.5px;
        line-height: 1.35;
    }

    .industry-detail-close {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
    }

    .industry-detail-body {
        gap: 22px;
        padding: 11px 14px 13px;
    }

    .industry-detail-columns,
    .industry-detail-grid {
        gap: 22px;
    }

    .industry-detail-column {
        min-height: 94px;
        padding: 11px 13px;
        border-radius: 12px;
    }

    .industry-detail-column:nth-child(3) {
        min-height: 62px;
        padding: 10px 13px;
    }

    .industry-detail-column h4,
    .industry-detail-list h4 {
        margin-bottom: 6px;
        font-size: 9.2px;
        letter-spacing: 0.14em;
    }

    .industry-detail-column p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 11.7px;
        line-height: 1.42;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 7;
    }

    .industry-detail-column:nth-child(3) p {
        -webkit-line-clamp: 2;
    }

    .industry-detail-list {
        min-height: 96px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .industry-detail-list ul {
        gap: 4px;
    }

    .industry-detail-list li {
        padding-left: 14px;
        font-size: 11.4px;
        line-height: 1.25;
    }

    .industry-detail-list li::before {
        top: 5px;
        width: 5px;
        height: 5px;
        box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
    }

    .industry-detail-footer {
        min-height: 42px;
        padding: 6px 7px 6px 12px;
        border-radius: 12px;
    }

    .industry-detail-footer span {
        font-size: 9.5px;
        letter-spacing: 0.06em;
    }

    .industry-detail-cta {
        min-width: 158px;
        min-height: 34px;
        padding: 8px 13px;
        font-size: 11px;
    }

    .industry-detail-default {
        padding: 24px;
    }

    .industry-detail-default-mark {
        width: 132px;
        height: 132px;
    }

    .industry-detail-default-mark img {
        width: 102px;
    }

    .industry-default-cue {
        bottom: 22px;
    }
}

/* Connect — digital contact / QR page */
.connect-page {
    margin: 0;
    min-height: 100svh;
    color: var(--white);
    background: #020B1C;
}

.connect-shell {
    position: relative;
    isolation: isolate;
    width: min(100%, 520px);
    min-height: 100svh;
    margin: 0 auto;
    background:
        linear-gradient(180deg, rgba(1, 8, 23, 0.05) 0%, rgba(1, 8, 23, 0.12) 29%, rgba(1, 8, 23, 0.54) 48%, rgba(1, 8, 23, 0.88) 72%, #020B1C 100%),
        url("../images/connect-img.png") center top / 100% auto no-repeat,
        #020B1C;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.35);
}

.connect-hero {
    position: relative;
    isolation: isolate;
    min-height: 300px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 16px 24px 58px;
}

.connect-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: none;
    grid-template-columns: 1fr 1fr;
}

.connect-hero-map,
.connect-hero-port {
    display: block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.connect-hero-map {
    background-image:
        linear-gradient(90deg, rgba(7, 29, 73, 0.2), rgba(7, 29, 73, 0.72)),
        url("../images/worldmap.png");
    background-position: 30% 40%;
    background-size: 180% auto;
    opacity: 0.55;
}

.connect-hero-port {
    background-image:
        linear-gradient(270deg, rgba(7, 29, 73, 0.15), rgba(7, 29, 73, 0.82)),
        url("../images/truck-logistics-operation-dusk.jpg");
    background-position: 70% 35%;
}

.connect-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Solid navy behind the logo (no photo showing through at all here),
       so contrast is guaranteed rather than depending on which part of the
       photo happens to sit behind it - then a quick fade at the very
       bottom of the hero so the photo still takes over cleanly below it. */
    /* background: linear-gradient(180deg, #041838 0%, #041838 78%, rgba(4, 24, 56, 0) 100%); */
}

.connect-hero-brand {
    position: relative;
    z-index: 1;
    align-self: start;
    margin-top: 4px;
    text-align: center;
}

.connect-logo {
    display: block;
    width: min(175px, 66vw);
    height: auto;
    margin: 0 auto;
    /* Sits on a solid navy backdrop now, so it just needs a normal soft
       shadow for depth - not fighting a busy photo anymore. */
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

.connect-hero-tagline {
    margin: 0;
    color: #C5A059;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.connect-arc {
    position: relative;
    display: none;
    height: 34px;
    margin-top: -56px;
    margin-bottom: 14px;
    opacity: 0.72;
}

.connect-arc-line {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(92%, 440px);
    height: 35px;
    border: 1px solid rgba(197, 160, 89, 0.55);
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow:
        0 0 18px rgba(197, 160, 89, 0.28),
        0 0 40px rgba(197, 160, 89, 0.12);
    transform: translateX(-50%);
}

.connect-arc-star {
    position: absolute;
    left: 50%;
    bottom: 2px;
    z-index: 1;
    color: #E8C56A;
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 0 12px rgba(232, 197, 106, 0.8);
    transform: translateX(-50%);
}

.connect-body {
    padding: 0 18px 24px;
}

.connect-intro {
    margin-bottom: 18px;
    text-align: center;
}

.connect-eyebrow {
    margin: 0 0 6px;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

.connect-lead {
    margin: 0 auto;
    max-width: 330px;
    color: rgba(242, 247, 255, 0.9);
    font-size: 13px;
    line-height: 1.45;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.connect-actions {
    display: grid;
    gap: 7px;
    width: min(100%, 300px);
    margin: 0 auto;
}

#connect-website { order: 1; }
#connect-linkedin { order: 2; }
#connect-email { order: 3; }
#connect-whatsapp { order: 4; }
#connect-profile { order: 5; }
#connect-vcard { order: 6; }
#connect-meeting { order: 7; }
#connect-location { order: 8; }

.connect-btn {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 12px 14px;
    color: inherit;
    text-align: left;
    text-decoration: none;
    appearance: none;
    background: linear-gradient(90deg, rgba(2, 16, 42, 0.98), rgba(4, 28, 68, 0.94));
    font: inherit;
    border: 1px solid rgba(242, 180, 63, 0.86);
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
    -webkit-tap-highlight-color: transparent;
}

.connect-btn:hover,
.connect-btn:focus-visible {
    transform: translateY(-1px);
    background:linear-gradient(90deg, rgba(2, 16, 42, 0.98), rgba(4, 28, 68, 0.94));
    border-color: rgba(232, 197, 106, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 12px 28px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(232, 197, 106, 0.12);
}

.connect-btn-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #F4B63E;
}

.connect-btn-icon i {
    display: block;
    color: #eebc28;
    font-size: 24px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(244, 182, 62, 0.28));
}

.connect-btn-icon svg {
    width: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.connect-btn:nth-child(2) .connect-btn-icon svg,
.connect-btn:nth-child(2) .connect-btn-icon path:last-child {
    fill: currentColor;
    stroke: none;
}

.connect-btn-text strong {
    display: block;
    color: var(--white);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
}

.connect-btn-text small {
    display: block;
    margin-top: 3px;
    color: rgba(226, 236, 249, 0.72);
    font-size: 11px;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.connect-btn-chevron {
    display: grid;
    place-items: center;
    color: #C5A059;
}

.connect-btn-chevron svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.connect-pillars {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-top: 14px;
    padding: 10px 4px;
    background: rgba(2, 16, 40, 0.72);
    border: 1px solid rgba(232, 174, 67, 0.55);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.connect-pillar {
    display: grid;
    gap: 4px;
    justify-items: center;
    align-content: start;
    min-width: 0;
    padding: 0 4px;
    text-align: center;
}

.connect-pillar + .connect-pillar {
    border-left: 1px solid rgba(232, 174, 67, 0.52);
}

.connect-pillar-value {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    color: #F4B63E;
}

.connect-pillar-value i {
    font-size: 17px;
}

.connect-pillar-value strong {
    color: #F4B63E;
    font-size: 12px;
    line-height: 1;
}

.connect-pillar-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #C5A059;
}

.connect-pillar-icon svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.connect-pillar span:last-child {
    color: rgba(245, 248, 253, 0.88);
    font-size: 6px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

.connect-footer {
    position: relative;
    padding: 0 18px 18px;
    overflow: hidden;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.connect-footer-brand {
    margin: 0 0 6px;
    color: var(--white);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.connect-footer-tagline {
    margin: 16px 0 0px;
    color: #F4B63E;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.connect-footer-ribbon {
display: block;
    width: 100%;
    height: 44px;
    margin: 0 0px -13px;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.connect-socials {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
}

.connect-socials a {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: #F4B63E;
    font-size: 20px;
    text-decoration: none;
    transition: color 180ms ease, transform 180ms ease;
}

.connect-socials a:hover,
.connect-socials a:focus-visible {
    color: #FFFFFF;
    transform: translateY(-1px);
}

.connect-footer-copy {
    margin: 0;
    color: rgba(235, 242, 250, 0.82);
    font-size: 8px;
    line-height: 1.5;
}

@media (min-width: 480px) {
    .connect-hero {
        min-height: 300px;
        padding-top: 20px;
    }

    .connect-body {
        padding-inline: 24px;
    }

    .connect-btn {
        min-height: 65px;
        padding: 14px 16px;
    }

    .connect-btn-text strong {
        font-size: 14px;
    }

    .connect-pillar span:last-child {
        font-size: 9px;
    }
}

@media (max-width: 380px) {
    .connect-pillars {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        row-gap: 0;
    }
}

/* Mobile polish — spacing, typography, touch targets (desktop unchanged) */
@media (max-width: 720px) {
    .connect-shell {
        width: 100%;
        box-shadow: none;
        background:
            linear-gradient(180deg, rgba(1, 8, 23, 0.02) 0%, rgba(1, 8, 23, 0.08) 28%, rgba(1, 8, 23, 0.5) 49%, rgba(1, 8, 23, 0.9) 74%, #020B1C 100%),
            url("../images/connect-bg-mobile-v2.png") center top / 100% auto no-repeat,
            #020B1C;
    }

    .connect-hero {
        min-height: 180px;
        padding: 10px 20px 18px;
    }

    .connect-logo {
        width: min(140px, 64vw);
    }

    .connect-arc {
        display: none;
    }

    .connect-intro {
        margin-bottom: 11px;
    }

    .connect-body {
        padding: 0 14px;
    }

    .connect-eyebrow {
        margin-bottom: 3px;
        font-size: 18px;
    }

    .connect-lead {
        max-width: 300px;
        font-size: 10px;
        line-height: 1.4;
    }

    .connect-btn {
        min-height: 42px;
        grid-template-columns: 32px minmax(0, 1fr) 12px;
        gap: 6px;
        padding: 5px 9px;
        border-color: rgba(245, 180, 58, 0.86);
    }

    .connect-btn-text strong {
        font-size: 9px;
        letter-spacing: 0;
        text-transform: none;
    }

    .connect-btn-text small {
        margin-top: 1px;
        font-size: 7px;
    }

    .connect-footer {
        padding: 0 16px calc(14px + env(safe-area-inset-bottom));
    }

    .connect-footer-brand {
        font-size: 11px;
    }

    .connect-footer-copy {
        font-size: 11px;
    }

    .about-hero {
        padding-top: calc(var(--about-header-height) + 28px);
        padding-bottom: 56px;
    }

    .about-hero-copy h1 {
        font-size: clamp(34px, 9vw, 42px);
    }

    .solutions-hero {
        padding: 118px 0 72px;
    }

    .solutions-hero-copy h1 {
        font-size: clamp(36px, 10vw, 52px);
        line-height: 1.06;
    }

    .solutions-hero-lead {
        font-size: 15px;
        line-height: 1.65;
    }

    .industry-hub-section > .container-fluid,
    .industry-applications > .container-fluid {
        width: min(100% - 32px, 760px);
    }

    .footer {
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 480px) {
    .connect-actions {
        gap: 6px;
    }

    .connect-btn {
        grid-template-columns: 32px minmax(0, 1fr) 12px;
        min-height: 42px;
    }

    .connect-btn-icon {
        width: 32px;
        height: 32px;
    }

    .connect-btn-icon i {
        font-size: 21px;
    }

    .contact-enquiry {
        padding: 16px 12px 18px;
    }

    .contact-field-timeline .contact-chip {
        flex: 1 1 100%;
    }
}

/* =========================================================
   Mobile responsive pass (max-width only — desktop unchanged)
   ========================================================= */
@media (max-width: 920px) {
    body.menu-open::before {
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(3, 12, 29, 0.86);
        content: "";
        pointer-events: none;
    }

    .site-header.menu-active {
        background: #041838;
        box-shadow: 0 10px 36px rgba(0, 0, 0, 0.38);
    }

    .primary-nav {
        z-index: 60;
        background: #041838;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .primary-nav.open {
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48);
    }

    .hero-inner {
        min-height: auto;
        align-items: flex-start;
        padding-top: 104px;
        padding-bottom: 72px;
    }

    .hero-copy {
        max-width: 100%;
    }

    .hero-lead {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    html,
    body {
        overflow-x: clip;
    }

    .container,
    .container-fluid {
        width: min(100% - 40px, 1280px);
    }

    .hero-scene {
        opacity: 0.28;
    }

    .hero-copy .eyebrow {
        margin-bottom: 14px;
        font-size: 10px;
        line-height: 1.45;
        letter-spacing: 0.12em;
    }

    .hero-copy h1 {
        max-width: 100%;
        font-size: clamp(28px, 8.2vw, 38px);
        line-height: 1.1;
    }

    .hero-lead {
        margin: 16px 0 22px;
        font-size: 14px;
        line-height: 1.65;
    }

    .hero-actions {
        gap: 10px;
    }

    .hero-trust-tags {
        margin-top: 18px;
        gap: 8px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 48px 0 32px;
    }

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

    .footer h3 {
        margin-bottom: 14px;
        font-size: 12px;
    }

    .footer-contact {
        max-width: none;
    }

    .footer-contact a,
    .footer-contact > span {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
        padding: 8px 0;
        font-size: 13px;
        line-height: 1.45;
    }

    .footer-contact svg {
        width: 30px;
        height: 30px;
    }

    .footer-bottom {
        align-items: flex-start;
        gap: 10px;
        padding: 18px 0 24px;
    }

    .footer-bottom p,
    .footer-bottom a {
        font-size: 12px;
        line-height: 1.5;
    }

    .section-intro,
    .center-intro {
        margin-bottom: 28px;
    }

    .section-intro h2,
    .center-intro h2 {
        font-size: clamp(28px, 7vw, 34px);
        line-height: 1.12;
    }

    .trust {
        padding: 56px 0;
    }

    .about-section,
    .about-purpose {
        padding: 50px 0;
    }

    .container-catalogue-section {
        padding: 48px 0 36px;
    }
}

@media (max-width: 480px) {
    .header-inner {
        min-height: 68px;
        gap: 12px;
    }

    .logo-heander {
        width: 102px;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .primary-nav {
        top: 85px;
        min-height: calc(100dvh - 68px);
        justify-content: flex-start;
        gap: 2px;
        padding: 24px 20px calc(28px + env(safe-area-inset-bottom));
    }

    .nav-link {
        padding: 11px 0;
        font-size: 13px;
        line-height: 1.35;
    }

    .nav-cta {
        margin-top: 14px;
        min-height: 48px;
    }

    .hero-inner {
        padding-top: 100px;
        padding-bottom: 44px;
    }

    .hero-copy h1 {
        font-size: clamp(25px, 7.6vw, 30px);
    }

    .hero-lead {
        font-size: 13.5px;
    }

    .hero-trust-tags span {
        min-height: 58px;
        padding: 10px 12px;
    }

    .button {
        min-height: 48px;
        font-size: 12px;
    }

    .contact-main > .container {
        padding-inline: 18px;
    }

    .contact-process > .container,
    .contact-faq > .container {
        padding: 24px 14px 28px;
    }

    .footer-grid {
        gap: 22px;
        padding-top: 44px;
    }
    .solutions-page .featured-solution.is-visible .featured-value-grid article {
    animation: featuredCardRise 650ms cubic-bezier(.2, .75, .25, 1) both;
    display: flex !important;
    padding: 12px !important;
    gap: 10px !important;
    flex-direction: column !important;
}

}

@media (max-width: 360px) {
    .container,
    .container-fluid,
    .contact-main > .container {
        width: min(100% - 32px, 1280px);
        /*padding-inline: 16px;*/
    }

    .hero-copy h1 {
        font-size: 24px;
    }

    .hero-copy .eyebrow {
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .presence#operations > .container-fluid {
        width: 100%;
        max-width: none;
        /* padding-inline: 16px; */
        box-sizing: border-box;
    }

    .presence#operations .map-panel,
    .presence#operations .network-map-wrap {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .presence#operations .network-map-base,
    .presence#operations .vector-network-overlay {
        width: 100%;
        max-width: none;
    }

    .presence#operations {
        padding-top: 38px !important;
        padding-bottom: 44px !important;
    }

    .presence#operations .section-copy {
        padding-inline: 8px;
    }

    .presence#operations .section-copy h2 {
        max-width: 420px;
        font-size: clamp(27px, 7.2vw, 32px);
        line-height: 1.06;
        letter-spacing: -0.02em;
    }

    .presence#operations .section-copy p:not(.eyebrow) {
        max-width: 390px;
        font-size: 14px;
        line-height: 1.5;
    }

    .presence#operations .map-panel {
        min-height: 0;
        aspect-ratio: 1916 / 821;
    }
}

/* Home sections: mobile-only spacing and type refinement. */
@media (max-width: 480px) {
    .presence#operations {
        padding: 38px 0 44px !important;
    }

    .presence#operations .section-copy {
        padding-inline: 8px;
    }

    .presence#operations .section-copy h2 {
        width: 100%;
        max-width: 420px;
        font-size: clamp(27px, 7.2vw, 32px);
        line-height: 1.06;
        letter-spacing: -0.02em;
    }

    .presence#operations .section-copy p:not(.eyebrow) {
        max-width: 390px;
        font-size: 14px;
        line-height: 1.5;
    }

    .presence#operations .map-panel {
        aspect-ratio: 1916 / 821;
    }

    .industries {
        padding: 48px 16px 56px;
    }

    .industries .container-fluid {
        width: 100%;
    }

    .industries .center-intro {
        gap: 10px;
        margin-bottom: 28px;
    }

    .industries .center-intro .eyebrow {
        padding-bottom: 7px;
        font-size: 11px;
        letter-spacing: 0.04em;
    }

    .industries .center-intro h2 {
        max-width: 100%;
        font-size: clamp(30px, 8.8vw, 36px);
        line-height: 1.08;
    }

    .industry-track {
        gap: 14px;
    }

    .industry-card {
        min-height: 232px;
        padding: 14px;
        border-radius: 16px;
    }

    .industry-card span {
        min-height: 0;
        padding: 12px 0px;
        font-size: 16px;
        line-height: 1.12;
    }

    .services .section-intro {
        gap: 16px;
        margin-bottom: 30px;
    }

    .services .section-intro h2 {
        max-width: 100%;
        font-size: clamp(28px, 8.4vw, 34px);
        line-height: 1.08;
    }

    .services .section-intro p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.55;
    }

    .services .section-intro .text-link {
        padding: 12px 15px;
        font-size: 11px;
    }

    .presence#operations {
        padding: 52px 0 56px !important;
    }

    .presence#operations .split-layout {
        gap: 24px;
    }

    .presence#operations .section-copy h2 {
        max-width: 100%;
        font-size: clamp(28px, 8.5vw, 34px);
        line-height: 1.08;
    }

    .presence#operations .section-copy p:not(.eyebrow) {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.55;
    }

    .presence#operations .section-copy .button {
        width: 100%;
        max-width: 280px;
    }

    .presence#operations .map-panel {
        min-height: 0;
        aspect-ratio: 1916 / 821;
    }
}

/* Final mobile cascade for the About process timeline. */
@media (max-width: 720px) {
    body.about-page #process.about-process {
        padding: 52px 0 58px;
        overflow: hidden;
    }

    body.about-page #process .container {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        column-gap: 12px;
        align-items: start;
        width: min(100%, 430px);
        padding-inline: 14px;
        margin-inline: auto;
    }

    body.about-page #process .about-section-heading {
        grid-column: 1 / -1;
        margin-bottom: 28px;
        padding-inline: 0;
        text-align: center;
    }

    body.about-page #process .about-section-heading h2 {
        max-width: 100%;
        font-size: clamp(28px, 8vw, 34px);
        line-height: 1.08;
    }

    body.about-page #process .process-timeline {
        grid-column: 1;
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 360px);
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 2px 0;
        overflow: visible;
        box-sizing: border-box;
        gap: 16px;
        align-self: start;
    }

    body.about-page #process .process-timeline-step .about-process-icon,
    body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
        width: 48px;
        height: 48px;
    }

    body.about-page #process .process-timeline-step,
    body.about-page #process .process-timeline-step.is-active-step,
    body.about-page #process .process-timeline-step.is-complete-step {
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 100%;
        height: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        opacity: 1;
    }

    body.about-page #process .process-timeline::before,
    body.about-page #process .process-timeline::after,
    body.about-page #process .process-timeline .process-route-runner,
    body.about-page #process .process-route-spark,
    body.about-page #process .process-active-arrow,
    body.about-page #process .process-timeline-step::after {
        display: none !important;
    }

    body.about-page #process .process-timeline-step::before {
        content: "";
        position: absolute;
        top: 52px;
        bottom: -16px;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: linear-gradient(180deg, rgba(15, 92, 108, 0.32), rgba(246, 186, 47, 0.36));
    }

    body.about-page #process .process-timeline-step:last-of-type::before {
        display: none;
    }

    body.about-page #process .timeline-step-meta {
        width: 100%;
        font-size: 9px;
        letter-spacing: 0.1em;
        line-height: 1.2;
        display: grid;
        grid-template-columns: 26px 1fr;
        align-items: center;
        gap: 5px;
        text-align: left;
        color: #0f5c6c;
    }

    body.about-page #process .timeline-step-meta b {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #ffffff;
        color: #0f5c6c;
        font-size: 10px;
        letter-spacing: 0;
        box-shadow: 0 8px 18px rgba(8, 42, 71, 0.12);
    }

    body.about-page #process .process-timeline-step.is-active-step .timeline-step-meta b,
    body.about-page #process .process-timeline-step.is-complete-step .timeline-step-meta b {
        background: #075f83;
        color: #ffffff;
    }

    body.about-page #process .timeline-step-meta em {
        min-width: 0;
        font-size: 9px;
        font-style: normal;
        font-weight: 800;
        text-transform: uppercase;
        word-break: break-word;
    }

    body.about-page #process .about-process-track {
        grid-column: 2;
        grid-row: 2;
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        width: 100%;
        gap: 16px;
        min-width: 0;
        margin: 0;
    }

    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible,
    body.about-page #process .about-process-step.is-complete-step,
    body.about-page #process .about-process-step.is-active-step {
        display: flex !important;
        flex-direction: column;
        min-width: 0;
        min-height: 360px;
        height: 360px;
        padding: 9px;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        pointer-events: auto;
    }

    body.about-page #process .about-process-step.is-complete-step,
    body.about-page #process .about-process-step.reveal.is-visible.is-complete-step {
        opacity: 1 !important;
        filter: none !important;
    }

    body.about-page #process .about-process-step::before,
    body.about-page #process .about-process-step::after,
    body.about-page #process .about-process-step.reveal.is-visible::before,
    body.about-page #process .about-process-step.reveal.is-visible::after {
        inset: 0;
    }

    body.about-page #process .process-step-image {
        aspect-ratio: 1.42 / 1;
        min-height: 0;
        margin: 0;
        border-radius: 6px;
        overflow: hidden;
    }

    body.about-page #process .process-step-image,
    body.about-page #process .process-step-image img {
        width: 100%;
        max-width: 100%;
    }

    body.about-page #process .process-step-image img {
        height: 100%;
        object-fit: cover;
    }

    body.about-page #process .process-image-status {
        width: 42px;
        height: 42px;
        bottom: -21px;
    }

    body.about-page #process .process-card-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 28px 8px 10px;
        text-align: center;
    }

    body.about-page #process .about-process-step h3,
    body.about-page #process .about-process-step.reveal.is-visible h3 {
        font-size: clamp(19px, 5.4vw, 23px);
        line-height: 1.08;
        margin: 0 0 12px;
    }

    body.about-page #process .about-process-step p,
    body.about-page #process .about-process-step.reveal.is-visible p {
        font-size: 14px;
        line-height: 1.45;
        margin: 0;
    }
}

@media (max-width: 380px) {
    body.about-page #process .container {
        grid-template-columns: 86px minmax(0, 1fr);
        column-gap: 10px;
        padding-inline: 10px;
    }

    body.about-page #process .process-timeline {
        grid-template-rows: repeat(4, 348px);
    }

    body.about-page #process .about-process-step,
    body.about-page #process .about-process-step.reveal,
    body.about-page #process .about-process-step.reveal.is-visible,
    body.about-page #process .about-process-step.is-complete-step,
    body.about-page #process .about-process-step.is-active-step {
        min-height: 348px;
        height: 348px;
    }

    body.about-page #process .process-timeline-step .about-process-icon,
    body.about-page #process .process-timeline-step.is-complete-step .about-process-icon {
        width: 44px;
        height: 44px;
    }

    body.about-page #process .timeline-step-meta {
        grid-template-columns: 24px 1fr;
        gap: 4px;
        font-size: 8px;
        letter-spacing: 0.08em;
    }

    body.about-page #process .timeline-step-meta b {
        width: 24px;
        height: 24px;
        font-size: 9px;
    }
}

/* Final mobile cascade for the Industries page only. */
@media (max-width: 720px) {
    body.industries-page {
        --industries-header-height: 82px;
        overflow-x: hidden;
    }

    body.industries-page main {
        overflow-x: hidden;
    }

    body.industries-page .container,
    body.industries-page .container-fluid {
        width: min(100% - 28px, 520px);
        max-width: 100%;
        padding-inline: 0;
        margin-inline: auto;
    }

    body.industries-page .industry-hero {
        height: auto;
        min-height: 0;
        padding: calc(var(--industries-header-height) + 24px) 0 46px;
    }

    body.industries-page .industry-hero-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: 0;
        padding: 0;
    }

    body.industries-page .industry-hero-copy {
        max-width: 100%;
        padding: 0;
        text-align: center;
    }

    body.industries-page .industry-hero-copy::before,
    body.industries-page .industry-hero-copy::after {
        display: none;
    }

    body.industries-page .industry-hero .eyebrow,
    body.industries-page .industry-section-intro .eyebrow,
    body.industries-page .industry-support .eyebrow {
        justify-content: center;
        margin-bottom: 12px;
        font-size: 11px;
        line-height: 1.35;
        letter-spacing: 0.18em;
    }

    body.industries-page .industry-hero-copy h1 {
        max-width: 100%;
        font-size: clamp(34px, 9.2vw, 44px);
        line-height: 1.04;
        letter-spacing: 0;
    }

    body.industries-page .industry-hero-copy h1::after {
        margin-inline: auto;
    }

    body.industries-page .industry-hero-copy p:not(.eyebrow) {
        max-width: 100%;
        margin-inline: auto;
        font-size: 15px;
        line-height: 1.62;
    }

    body.industries-page .industry-hero-copy p:not(.eyebrow):last-of-type {
        display: none;
    }

    body.industries-page .industry-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        max-width: 320px;
        margin: 22px auto 0;
    }

    body.industries-page .industry-hero-actions .button {
        width: 100%;
        min-height: 50px;
        justify-content: center;
    }

    body.industries-page .industry-hero-showcase {
        width: 100%;
        min-height: 0;
        padding: 0;
    }

    body.industries-page .industry-hero-image {
        aspect-ratio: 1.1 / 0.82;
        border-radius: 20px;
        overflow: hidden;
    }

    body.industries-page .industry-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.industries-page .industry-hero-points {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr))!important;
        gap: 10px;
        width: 100%;
        margin-top: 12px;
    }

    body.industries-page .industry-hero-points::before,
    body.industries-page .industry-hero-points::after {
        display: none;
    }

    body.industries-page .industry-hero-points article {
        min-height: 72px;
        padding: 12px 10px;
        border-radius: 14px;
        text-align: center;
    }

    body.industries-page .industry-hero-points svg,
    body.industries-page .industry-hero-points img {
        width: 60px;
        height: 42px;
    }

    body.industries-page .industry-hero-points span {
        font-size: 11px;
        line-height: 1.25;
    }

    body.industries-page .industry-hub-section,
    body.industries-page .industry-applications,
    body.industries-page .industry-support {
        padding: 54px 0;
    }

    body.industries-page .industry-section-intro {
        max-width: 100%;
        margin-bottom: 24px;
        text-align: center;
    }

    body.industries-page .industry-section-intro h2 {
        max-width: 100%;
        font-size: clamp(29px, 8.2vw, 36px);
        line-height: 1.08;
        letter-spacing: 0;
    }

    body.industries-page .industry-section-intro p:last-child {
        max-width: 100%;
        margin-top: 12px;
        font-size: 15px;
        line-height: 1.58;
    }

    body.industries-page .industry-hub-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        min-height: 0;
        height: auto;
    }

    body.industries-page .industry-hub-layout::before,
    body.industries-page .industry-hub-layout::after {
        display: none;
    }

    body.industries-page .industry-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
        min-width: 0;
        height: auto;
    }

    body.industries-page .industry-list-left {
        order: 1;
    }

    body.industries-page .industry-spotlight {
        order: 2;
        width: 100%;
        min-width: 0;
        min-height: 0;
    }

    body.industries-page .industry-list-right {
        order: 3;
    }

    body.industries-page .industry-node {
        grid-template-columns: 28px 44px minmax(0, 1fr) 34px;
        gap: 10px;
        width: 100%;
        min-height: 68px;
        padding: 12px;
        border-radius: 15px;
        text-align: left;
    }

    body.industries-page .industry-node-index {
        font-size: 11px;
    }

    body.industries-page .industry-node-icon {
        width: 44px;
        height: 44px;
    }

    body.industries-page .industry-node svg {
        width: 23px;
        height: 23px;
    }

    body.industries-page .industry-node-copy strong h3 h3 {
        display: block;
        font-size: 14px;
        line-height: 1.25;
        letter-spacing: 0;
    }

    body.industries-page .industry-node-action {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

    body.industries-page .industry-detail-panel,
    body.industries-page .industry-spotlight {
        height: auto;
        min-height: 260px;
        border-radius: 18px;
    }

    body.industries-page .industry-detail-default {
        min-height: 260px;
        padding: 24px 18px;
    }

    body.industries-page .industry-default-network {
        opacity: 0.32;
    }

    body.industries-page .industry-detail-default-mark {
        width: min(58vw, 190px);
        height: min(58vw, 190px);
    }

    body.industries-page .industry-default-cue {
        bottom: 20px;
        width: calc(100% - 36px);
        padding: 10px 12px;
        border-radius: 14px;
    }

    body.industries-page .industry-default-cue p {
        font-size: 12px;
        line-height: 1.35;
    }

    body.industries-page .industry-detail-active {
        display: grid;
        grid-template-rows: auto auto;
    }

    body.industries-page .industry-detail-visual {
        height: auto;
        aspect-ratio: 1.35 / 0.8;
        min-height: 0;
        border-radius: 16px 16px 0 0;
    }

    body.industries-page .industry-detail-heading {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    body.industries-page .industry-detail-heading h3 {
        font-size: clamp(25px, 7vw, 32px);
        line-height: 1.06;
    }

    body.industries-page .industry-detail-heading span {
        font-size: 13px;
        line-height: 1.4;
    }

    body.industries-page .industry-detail-body {
        padding: 16px;
        gap: 14px;
    }

    body.industries-page .industry-detail-columns,
    body.industries-page .industry-detail-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.industries-page .industry-detail-column,
    body.industries-page .industry-detail-column:nth-child(3),
    body.industries-page .industry-detail-list {
        min-height: 0;
        padding: 14px;
        border-radius: 14px;
    }

    body.industries-page .industry-detail-column p,
    body.industries-page .industry-detail-list li {
        font-size: 13px;
        line-height: 1.5;
    }

    body.industries-page .industry-detail-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
    }

    body.industries-page .industry-detail-cta {
        width: 100%;
        min-height: 46px;
        justify-content: center;
    }

    body.industries-page .application-carousel {
        width: 100%;
        padding: 0;
    }

    body.industries-page .application-carousel::before,
    body.industries-page .application-carousel::after {
        display: none;
    }

    body.industries-page .application-nav {
        display: none;
    }

    body.industries-page .application-scroller {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(244px, 86%);
        gap: 14px;
        width: 100%;
        padding: 4px 2px 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    body.industries-page .application-card {
        min-height: 214px;
        padding: 20px 18px;
        border-radius: 18px;
        scroll-snap-align: start;
    }

    body.industries-page .application-card h3 {
        font-size: 22px;
        line-height: 1.12;
    }

    body.industries-page .application-card p {
        font-size: 14px;
        line-height: 1.5;
    }

    body.industries-page .industry-support-layout {
        width: min(100% - 28px, 520px);
        min-height: 0;
        padding: 0;
        border-radius: 22px;
        overflow: hidden;
    }

    body.industries-page .industry-support-card {
        width: 100%;
        min-height: 0;
        padding: 34px 20px;
        border-radius: 22px;
        text-align: center;
    }

    body.industries-page .industry-support-card h2 {
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.08;
    }

    body.industries-page .industry-support-card p:not(.eyebrow) {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.58;
    }

    body.industries-page .industry-support-map .button-outline {
        width: 100%;
        max-width: 300px;
        margin-inline: auto;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    body.industries-page .container,
    body.industries-page .container-fluid,
    body.industries-page .industry-support-layout {
        width: min(100% - 22px, 520px);
    }

    body.industries-page .industry-hero-copy h1 {
        font-size: 32px;
    }

    body.industries-page .industry-hero-points {
        grid-template-columns: 1fr;
    }

    body.industries-page .industry-node {
        grid-template-columns: 24px 40px minmax(0, 1fr) 30px;
        gap: 8px;
        padding: 11px 10px;
    }

    body.industries-page .industry-node-icon {
        width: 40px;
        height: 40px;
    }

    body.industries-page .industry-node-copy strong h3 h3 {
        font-size: 13px;
    }

    body.industries-page .application-scroller {
        grid-auto-columns: 88%;
    }
}

/* Industries mobile correction: remove faded cards and oversized empty panels. */
@media (max-width: 720px) {
    body.industries-page .industry-hero-showcase {
        display: grid;
        gap: 12px;
    }

    body.industries-page .industry-hero-points article,
    body.industries-page .industry-hero-points article:nth-child(1),
    body.industries-page .industry-hero-points article:nth-child(n + 2),
    body.industries-page .industry-hero-points article:nth-child(2n) {
        position: relative;
        inset: auto;
        transform: none;
        opacity: 1;
        filter: none;
        min-height: 88px;
        display: flex;
        flex-direction: column;
        /*align-items: flex-start;*/
        justify-content: center;
        gap: 9px;
        padding: 16px 14px;
        text-align: left;
        background: linear-gradient(145deg, rgba(4, 24, 56, 0.94), rgba(7, 37, 76, 0.86));
        border: 1px solid rgba(212, 175, 55, 0.52);
        box-shadow: 0 12px 26px rgba(4, 24, 56, 0.18);
                width: 100%;
    }

    body.industries-page .industry-hero-points span {
        color: #ffffff;
        opacity: 1;
    }

    body.industries-page .industry-hero-points svg {
        color: var(--gold-100);
        stroke: currentColor;
        opacity: 1;
    }

    body.industries-page .industry-detail-panel.is-default,
    body.industries-page .industry-detail-panel.is-default .industry-detail-default {
        min-height: 168px;
    }

    body.industries-page .industry-detail-default {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        padding: 18px;
    }

    body.industries-page .industry-default-network {
        display: none;
    }

    body.industries-page .industry-detail-default-mark {
        width: 76px;
        height: 76px;
        margin: 0;
    }

    body.industries-page .industry-detail-default-mark::before {
        display: none;
    }

    body.industries-page .industry-detail-default-mark img {
        max-width: 52px;
    }

    body.industries-page .industry-default-cue {
        position: static;
        width: auto;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        text-align: left;
    }

    body.industries-page .industry-default-cue svg {
        width: 28px;
        height: 28px;
        margin-bottom: 8px;
    }

    body.industries-page .industry-default-cue p {
        margin: 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
    }

    body.industries-page .industry-list-left,
    body.industries-page .industry-list-right {
        gap: 10px;
    }

    body.industries-page .industry-node,
    body.industries-page .industry-node:hover {
        transform: none;
    }

    body.industries-page .industry-support {
        padding-top: 46px;
    }
}

@media (max-width: 380px) {
    body.industries-page .industry-detail-default {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 12px;
        padding: 16px 14px;
    }

    body.industries-page .industry-detail-panel.is-default,
    body.industries-page .industry-detail-panel.is-default .industry-detail-default {
        min-height: 150px;
    }

    body.industries-page .industry-detail-default-mark {
        width: 66px;
        height: 66px;
    }
}

/* Keep the mobile industry hero clean; the full-bleed port image remains on desktop. */
@media (max-width: 720px) {
    body.industries-page .industry-hero-image,
    body.industries-page .industry-hero-image::after {
        display: none;
    }

    body.industries-page .industry-hero-showcase {
        background:
            radial-gradient(circle at 50% 0%, rgba(24, 91, 157, 0.24), transparent 52%),
            linear-gradient(180deg, #061c3d 0%, #03132d 100%);
    }
}

/* =========================================================
   Legal pages (Privacy Policy, Terms & Conditions)
   ========================================================= */
.legal-hero {
    padding: 150px 0 56px;
    background: linear-gradient(135deg, #03142e 0%, var(--navy-900) 55%, var(--navy-800) 100%);
}

.legal-hero h1 {
    max-width: 720px;
    margin-top: 10px;
    color: var(--white);
    font-size: clamp(34px, 4.2vw, 52px);
}

.legal-meta {
    max-width: 640px;
    margin: 16px 0 0;
    color: rgba(203, 219, 236, 0.62);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Industries mobile polish: keep cards readable while preserving the desktop composition. */
@media (max-width: 720px) {
    body.industries-page .industry-applications,
    body.industries-page .industry-support {
        padding-block: 48px;
    }

    body.industries-page .industry-section-intro {
        margin-bottom: 22px;
    }

    body.industries-page .industry-section-intro h2 {
        font-size: clamp(28px, 8vw, 34px);
        line-height: 1.1;
    }

    body.industries-page .industry-section-intro p:last-child {
        font-size: 14px;
        line-height: 1.55;
    }

    body.industries-page .application-scroller {
        grid-auto-columns: calc(100% - 42px);
        gap: 14px;
        padding: 5px 0 16px;
        scroll-padding-inline: 0;
    }

    body.industries-page .application-card {
        min-height: 300px;
        padding: 24px 18px 22px;
        border-radius: 18px;
    }

    body.industries-page .application-icon {
        width: 72px;
        height: 72px;
        margin-bottom: 18px;
    }

    body.industries-page .application-card h3 {
        max-width: 100%;
        font-size: clamp(20px, 5.7vw, 25px);
        line-height: 1.12;
    }

    body.industries-page .application-card p {
        max-width: 270px;
        margin-inline: auto;
        font-size: 14px;
        line-height: 1.5;
    }

    body.industries-page .application-dots {
        margin-top: 14px;
    }

    body.industries-page .industry-support-layout {
        width: min(100% - 24px, 520px);
    }

    body.industries-page .industry-support-card {
        min-height: 0;
        padding: 32px 18px 30px;
    }

    body.industries-page .industry-support-card h2 {
        max-width: 330px;
        margin-inline: auto;
        font-size: clamp(28px, 8vw, 34px);
        line-height: 1.1;
    }

    body.industries-page .industry-support-card p:not(.eyebrow) {
        max-width: 340px;
        margin-inline: auto;
        font-size: 14px;
        line-height: 1.58;
    }

    body.industries-page .industry-support-map .button-outline {
        max-width: 100%;
        min-height: 54px;
        padding-inline: 18px;
    }
}

@media (max-width: 380px) {
    body.industries-page .application-scroller {
        grid-auto-columns: calc(100% - 28px);
    }

    body.industries-page .application-card {
        min-height: 284px;
    }

    body.industries-page .industry-support-card {
        padding-inline: 15px;
    }
}

.legal-content {
    padding: 64px 0 96px;
    background: var(--white);
}

.legal-content-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
    gap: 56px;
}

.legal-toc {
    position: sticky;
    top: 110px;
    padding: 20px;
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: 14px;
}

.legal-toc-label {
    margin: 0 0 10px;
    color: var(--navy-900);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.legal-toc ol {
    display: grid;
    margin: 0;
    padding: 0 0 0 18px;
    gap: 7px;
}

.legal-toc a {
    color: var(--slate-500);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--ease);
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
    color: var(--gold-600);
}

.legal-article {
    min-width: 0;
    max-width: 720px;
}

.legal-article section {
    padding-top: 36px;
    margin-top: 36px;
    border-top: 1px solid var(--slate-200);
    scroll-margin-top: 100px;
}

.legal-article section:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
}

.legal-article h2 {
    margin: 0 0 14px;
    color: var(--navy-900);
    font-family: var(--display);
    font-size: 22px;
    line-height: 1.3;
}

.legal-article p {
    margin: 0 0 14px;
    color: #45566E;
    font-size: 15px;
    line-height: 1.72;
}

.legal-article ul {
    margin: 0 0 16px;
    padding-left: 20px;
    color: #45566E;
    font-size: 15px;
    line-height: 1.72;
}

.legal-article li {
    margin-bottom: 6px;
}

.legal-article a {
    color: var(--gold-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-address {
    margin: 0 0 16px;
    padding: 16px 18px;
    color: var(--navy-900);
    font-style: normal;
    font-size: 15px;
    line-height: 1.7;
    background: var(--slate-50);
    border-left: 3px solid var(--gold-500);
    border-radius: 8px;
}

.legal-address a {
    color: var(--navy-900);
    font-weight: 700;
}

@media (max-width: 860px) {
    .legal-content-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .legal-toc {
        position: static;
    }
}

@media (max-width: 560px) {
    .legal-hero {
        padding: 120px 0 40px;
    }

    .legal-content {
        padding: 44px 0 64px;
    }
}

/* Our Solutions cards: cursor-tracked premium glow (desktop, fine pointer only) */
.solutions-page .solution-card-glow {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255, 255, 255, 0.34), transparent 62%);
    opacity: 0;
    mix-blend-mode: soft-light;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.solutions-page .solution-card.is-glowing .solution-card-glow {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
    .solutions-page .solution-card-glow {
        display: none;
    }
}

/* Featured solution panel: smooth premium transition when switching solutions.
   Image opacity reuses its existing transition; the value-grid's own
   staggered rise/settle animation (is-visible) is replayed by JS on switch. */
.featured-solution-heading,
.featured-overview,
.featured-benefits,
.featured-cta {
    transition: opacity 240ms ease, transform 300ms ease;
}

.featured-benefits,
.featured-cta {
    transition-delay: 70ms;
}

.featured-solution.is-changing .featured-solution-media img {
    opacity: 0;
}

.featured-solution.is-changing .featured-solution-heading,
.featured-solution.is-changing .featured-overview,
.featured-solution.is-changing .featured-benefits,
.featured-solution.is-changing .featured-cta {
    transition-delay: 0ms;
    opacity: 0;
    transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
    .featured-solution-heading,
    .featured-overview,
    .featured-benefits,
    .featured-cta {
        transition: none;
    }
}

/* Our Solutions cards: richer hover state. The shuffle carousel keeps full
   ownership of `transform`, so the shuffle keeps running uninterrupted on
   hover - only box-shadow/border (properties the shuffle never touches) get
   a stronger glow, layered on top of whatever position it's mid-cycle. */
.solutions-page .solution-card {
    transition: border-color 260ms ease, box-shadow 260ms ease;
}

.solutions-page .solution-card:hover,
.solutions-page .solution-card:focus-visible {
    border-color: color-mix(in srgb, var(--solution-accent) 90%, white);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, .58),
        0 0 60px color-mix(in srgb, var(--solution-accent) 42%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--solution-accent) 55%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .16);
}

.solutions-page .solution-card-own:hover,
.solutions-page .solution-card-own.is-active:hover,
.solutions-page .solution-card-own:focus-visible {
    box-shadow:
        0 44px 110px rgba(0, 0, 0, .6),
        0 0 70px rgba(243, 170, 54, .4),
        inset 0 0 0 1px rgba(243, 170, 54, .6),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Choose-a-solution cue: a warmer, breathing pill so it reads as an
   affordance pointing at the clickable cards above, not static caption text. */
.solutions-page .solutions-scroll-cue {
    padding: 12px 22px;
    background: linear-gradient(135deg, rgba(246, 205, 83, .2), rgba(8, 43, 86, .94));
    border-color: rgba(246, 205, 83, .5);
    font-size: 13px;
    font-weight: 600;
    animation: solutionsCuePulse 2.6s ease-in-out infinite;
}

@keyframes solutionsCuePulse {
    0%, 100% {
        box-shadow: 0 14px 34px rgba(1, 11, 29, .3), 0 0 0 rgba(246, 205, 83, 0);
        border-color: rgba(246, 205, 83, .38);
    }
    50% {
        box-shadow: 0 18px 44px rgba(1, 11, 29, .36), 0 0 30px rgba(246, 205, 83, .36);
        border-color: rgba(246, 205, 83, .88);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .solutions-scroll-cue {
        animation: none;
    }
}

/* Featured panel arrival: a large, unmistakable "unveiling" - rises up from
   well below, grows in from noticeably smaller, and pulls into focus from a
   blur, with a brief gold glow as it settles. Runs the full width of the
   scroll (~1050ms) so the panel is still visibly settling as it lands. */
.solutions-page .featured-solution.reveal {
    opacity: 0;
    transform: translateY(90px) scale(0.82);
    filter: blur(16px);
}

.solutions-page .featured-solution.reveal.is-visible {
    animation: featuredPanelArrive 1050ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes featuredPanelArrive {
    0% {
        opacity: 0;
        transform: translateY(90px) scale(0.82);
        filter: blur(16px);
        box-shadow: 0 0 0 rgba(246, 205, 83, 0);
    }
    40% {
        opacity: 1;
    }
    70% {
        filter: blur(0);
    }
    85% {
        box-shadow: 0 0 60px rgba(246, 205, 83, 0.45);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        box-shadow: 0 0 0 rgba(246, 205, 83, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .solutions-page .featured-solution.reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .solutions-page .featured-solution.reveal.is-visible {
        animation: none;
    }
}

/* Connect page: intro splash (logo -> welcome text -> fade into the page),
   then the real page content reveals in a slow, staggered sequence. Pure CSS
   timeline (animation-delay chain) so it always plays on load with no JS
   dependency, and every element uses fill-mode "both" so it stays hidden
   until its own delay elapses rather than flashing visible on paint. */
.connect-splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100svh;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(circle at 50% 42%, #0c2e63 0%, #051636 58%, #020b1c 100%);
}

.connect-splash.is-leaving {
    animation: connectSplashOut 900ms ease both;
}

.connect-splash-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
}

.connect-splash-video {
    position: absolute;
    top: calc(50% - 26px);
    left: 50%;
    display: block;
    width: min(720px, 92vw, 80dvh);
    height: auto;
    opacity: 0;
    object-fit: cover;
    border-radius: 12px;
    animation: connectSplashLogoIn 950ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both;
}

.connect-splash.is-leaving .connect-splash-video {
    animation: connectSplashLogoDepart 1300ms cubic-bezier(0.65, 0, 0.35, 1) both;
}

.dry-container-heading{
        font-size: 20px;
    margin: 0;
    font-weight: 800;
    color: #062552;
}
.data-catalogue-u{
    background:  #062552 !important;
    /* -webkit-background-clip: text; */
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
.connect-splash-welcome {
    position: absolute;
    top: calc(50% + min(122px, 17dvh));
    left: 50%;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0;
    opacity: 0;
    color: #e8c56a;
    font-size: clamp(11px, 3.4vw, 14px);
    font-weight: 700;
    letter-spacing: clamp(0.14em, 0.22em, 0.22em);
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(232, 197, 106, 0.4);
    transform: translateX(-50%);
    animation: connectSplashTextIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 1400ms both;
}

.connect-splash.is-leaving .connect-splash-welcome {
    animation: connectSplashTextOut 500ms ease both;
}

@keyframes connectSplashGlowIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    60%  { opacity: 1; }
    to   { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
}

@keyframes connectSplashGlowOut {
    from { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
    to   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

@keyframes connectSplashGlowPulse {
    from { opacity: 0.72; transform: translate(-50%, -50%) scale(0.94); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes connectSplashLogoIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.64);
        filter: blur(14px) drop-shadow(0 0 22px rgba(232, 197, 106, 0)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0));
    }
    72% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.035);
        filter: blur(0) drop-shadow(0 0 28px rgba(232, 197, 106, 0.52)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0) drop-shadow(0 0 22px rgba(232, 197, 106, 0.4)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
    }
}

@keyframes connectSplashLogoDepart {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    45%  { opacity: 1; transform: translate(-50%, calc(-50% - 92px)) scale(0.82); }
    100% { opacity: 0; transform: translate(-50%, calc(-50% - 210px)) scale(0.46); }
}

@keyframes connectSplashTextIn {
    from { opacity: 0; transform: translate(-50%, 14px); letter-spacing: 0.36em; }
    to   { opacity: 1; transform: translate(-50%, 0); letter-spacing: 0.22em; }
}

@keyframes connectSplashTextOut {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -10px); }
}

@keyframes connectSplashOut {
    0%   { opacity: 1; visibility: visible; }
    99%  { opacity: 0; visibility: visible; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (max-width: 480px) {
    .connect-splash-glow {
        width: min(340px, 88vw);
        height: min(340px, 88vw);
    }
}

/* Real page: the header logo fades/settles in as the splash logo's departure
   finishes, so one hands off to the other; the rest of the content then
   settles in with a slow one-by-one stagger (intro -> each button -> each
   pillar -> footer). */
.connect-logo {
    opacity: 0;
    animation: connectHeaderLogoIn 850ms cubic-bezier(0.22, 1, 0.36, 1) 4300ms both;
}

@keyframes connectHeaderLogoIn {
    from { opacity: 0; transform: translateY(-16px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.connect-intro,
.connect-btn,
.connect-pillar,
.connect-footer {
    animation-name: connectContentIn;
    animation-duration: 850ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
}

@keyframes connectContentIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.connect-intro { animation-delay: 5000ms; }

.connect-btn:nth-of-type(1) { animation-delay: 5250ms; }
.connect-btn:nth-of-type(2) { animation-delay: 5370ms; }
.connect-btn:nth-of-type(3) { animation-delay: 5490ms; }
.connect-btn:nth-of-type(4) { animation-delay: 5610ms; }
.connect-btn:nth-of-type(5) { animation-delay: 5730ms; }
.connect-btn:nth-of-type(6) { animation-delay: 5850ms; }
.connect-btn:nth-of-type(7) { animation-delay: 5970ms; }
.connect-btn:nth-of-type(8) { animation-delay: 6090ms; }

.connect-pillar:nth-of-type(1) { animation-delay: 6250ms; }
.connect-pillar:nth-of-type(2) { animation-delay: 6360ms; }
.connect-pillar:nth-of-type(3) { animation-delay: 6470ms; }
.connect-pillar:nth-of-type(4) { animation-delay: 6580ms; }
.connect-pillar:nth-of-type(5) { animation-delay: 6690ms; }

.connect-footer { animation-delay: 6900ms; }

@media (prefers-reduced-motion: reduce) {
    .connect-splash {
        animation: none;
        display: none;
    }

    .connect-logo,
    .connect-intro,
    .connect-btn,
    .connect-pillar,
    .connect-footer {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Contact page brand theme: navy structure, light-blue surfaces, and gold actions. */
body.contact-page {
    color: var(--navy-900);
    background: #edf5fb;
}

body.contact-page .site-header {
    background: rgba(4, 24, 56, 0.96);
    border-bottom-color: rgba(246, 205, 83, 0.18);
    box-shadow: 0 12px 30px rgba(4, 24, 56, 0.16);
}

body.contact-page .contact-main {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 76% 16%, rgba(26, 118, 197, 0.3), transparent 34%),
        linear-gradient(135deg, #041838 0%, #082b56 54%, #0b477e 100%);
    background-size: 72px 72px, 72px 72px, auto, auto;
}

body.contact-page .contact-main-bg {
    opacity: 0.32;
    background:
        linear-gradient(90deg, rgba(4, 24, 56, 0.88), rgba(8, 43, 86, 0.72)),
        url("../images/truck-logistics-operation-dusk.jpg") center 35% / cover no-repeat;
}

body.contact-page .contact-main-bg::after {
    background:
        radial-gradient(circle at 18% 28%, rgba(246, 205, 83, 0.2), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(26, 118, 197, 0.16), transparent 24%);
}

body.contact-page .contact-intro h1 {
    max-width: 430px;
    margin-bottom: 18px;
    color: var(--white);
    font-size: clamp(38px, 2.4vw, 54px);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

body.contact-page .contact-intro-lead {
    max-width: 430px;
    margin-bottom: 30px;
    color: rgba(226, 238, 249, 0.82);
    font-size: 14px;
    line-height: 1.65;
}

body.contact-page .contact-value-list li {
    position: relative;
    min-height: 64px;
    align-items: center;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid rgba(137, 202, 239, 0.22);
    border-radius: 10px;
    background: linear-gradient(105deg, rgba(19, 78, 132, 0.72), rgba(8, 43, 86, 0.52));
    box-shadow: 0 10px 22px rgba(1, 16, 40, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.contact-page .contact-value-list li::before {
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    content: "";
    background: linear-gradient(180deg, var(--gold-100), var(--gold-500));
    border-radius: 0 4px 4px 0;
}

body.contact-page .contact-value-icon {
    width: 42px;
    height: 42px;
    color: var(--navy-900);
    background: linear-gradient(145deg, var(--gold-100), var(--gold-500));
    border-color: rgba(255, 244, 166, 0.8);
    box-shadow: 0 7px 16px rgba(246, 205, 83, 0.2);
}

body.contact-page .contact-value-icon svg {
    width: 18px;
    stroke-width: 1.8;
}

body.contact-page .contact-value-list strong {
    color: var(--white);
}

body.contact-page .contact-value-list p {
    color: rgba(213, 229, 242, 0.7);
}

body.contact-page .contact-enquiry {
    position: relative;
    color: var(--navy-900);
    background: linear-gradient(145deg, #ffffff 0%, #f4faff 68%, #e6f2fb 100%);
    border: 1px solid rgba(92, 170, 226, 0.58);
    border-radius: 18px;
    box-shadow: 0 30px 72px rgba(1, 16, 40, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.9) inset, 0 0 30px rgba(26, 118, 197, 0.12);
}

body.contact-page .contact-enquiry::before {
    position: absolute;
    top: 0;
    right: 24px;
    left: 24px;
    height: 3px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    border-radius: 0 0 6px 6px;
}

body.contact-page .contact-stepper,
body.contact-page .contact-step-heading,
body.contact-page .contact-step-actions {
    border-color: rgba(11, 58, 109, 0.12);
}

body.contact-page .contact-stepper-circle {
    color: #607589;
    border-color: rgba(11, 58, 109, 0.24);
}

body.contact-page .contact-stepper-label {
    letter-spacing: 0.01em;
    color: #71869a;
}

body.contact-page .contact-stepper-item.is-active .contact-stepper-label,
body.contact-page .contact-stepper-item.is-complete .contact-stepper-label {
    color: var(--navy-900);
}

body.contact-page .contact-stepper-line {
    background: rgba(11, 58, 109, 0.14);
}

body.contact-page .contact-stepper-item.is-active .contact-stepper-label {
    font-weight: 800;
}

body.contact-page .contact-stepper-item.is-complete .contact-stepper-label {
    color: var(--blue-700);
}

body.contact-page .contact-stepper-line.is-complete {
    background: linear-gradient(90deg, var(--gold-500), var(--blue-400));
}

body.contact-page .contact-step-heading strong {
    color: var(--navy-900);
}

body.contact-page .contact-step-heading p {
    color: #607589;
}

body.contact-page .contact-stepper-item.is-active .contact-stepper-circle,
body.contact-page .contact-stepper-item.is-complete .contact-stepper-circle {
    box-shadow: 0 0 0 4px rgba(246, 205, 83, 0.2), 0 0 18px rgba(246, 205, 83, 0.24);
}

body.contact-page .contact-field label,
body.contact-page .contact-field-label {
    color: #3e5870;
}

body.contact-page .contact-field input,
body.contact-page .contact-field select,
body.contact-page .contact-field textarea,
body.contact-page .contact-phone-wrap {
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(26, 118, 197, 0.28);
    box-shadow: 0 3px 10px rgba(4, 24, 56, 0.035) inset;
}

body.contact-page .contact-field input::placeholder,
body.contact-page .contact-field textarea::placeholder {
    color: #8194a6;
}

body.contact-page .contact-field select {
    background-color: rgba(255, 255, 255, 0.92);
}

body.contact-page .contact-phone-prefix {
    color: #526c84;
    border-color: rgba(11, 58, 109, 0.12);
}

body.contact-page .contact-field-note,
body.contact-page .contact-secure-note {
    color: #7890a4;
}

body.contact-page .contact-field input:focus,
body.contact-page .contact-field select:focus,
body.contact-page .contact-field textarea:focus,
body.contact-page .contact-phone-wrap:focus-within {
    background: #ffffff;
    border-color: rgba(15, 94, 156, 0.64);
    box-shadow: 0 0 0 4px rgba(26, 118, 197, 0.12);
}

body.contact-page .contact-country-listbox {
    background: #ffffff;
    border-color: rgba(15, 94, 156, 0.24);
    box-shadow: 0 20px 44px rgba(4, 24, 56, 0.16);
}

body.contact-page .contact-country-option {
    color: #405a72;
}

body.contact-page .contact-country-option:hover,
body.contact-page .contact-country-option.is-active {
    color: var(--navy-900);
    background: rgba(26, 118, 197, 0.1);
}

body.contact-page .contact-choice-card,
body.contact-page .contact-chip span {
    color: #526c84;
    background: rgba(231, 244, 252, 0.7);
    border-color: rgba(26, 118, 197, 0.2);
}

body.contact-page .contact-choice-card:hover,
body.contact-page .contact-choice-card:has(input:checked),
body.contact-page .contact-choice-card:has(input:focus-visible),
body.contact-page .contact-chip:hover span,
body.contact-page .contact-chip:has(input:checked) span,
body.contact-page .contact-chip:has(input:focus-visible) span {
    color: var(--navy-900);
    background: rgba(246, 205, 83, 0.14);
    border-color: rgba(212, 175, 55, 0.68);
    box-shadow: 0 0 0 4px rgba(246, 205, 83, 0.1);
}

body.contact-page .contact-step-back,
body.contact-page .contact-success-link {
    color: var(--navy-900);
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(11, 58, 109, 0.2);
}

body.contact-page .contact-step-back:hover,
body.contact-page .contact-success-link:hover {
    background: #ffffff;
    border-color: rgba(15, 94, 156, 0.48);
}

body.contact-page .contact-success {
    min-height: 390px;
    padding: 42px 28px 34px;
}

body.contact-page .contact-success-eyebrow {
    color: #c28b05;
    font-size: 12px;
    letter-spacing: 0.16em;
}

body.contact-page .contact-success h2 {
    color: var(--navy-900);
    font-size: clamp(32px, 4vw, 44px);
    text-shadow: none;
}

body.contact-page .contact-success > p:not(.contact-success-eyebrow) {
    color: #536f88;
    font-size: 15px;
    line-height: 1.65;
}

body.contact-page .contact-success-link {
    color: var(--navy-900);
    background: #ffffff;
    border-color: rgba(15, 94, 156, 0.3);
    box-shadow: 0 7px 16px rgba(4, 24, 56, 0.06);
}

body.contact-page .contact-step-btn.button-gold {
    min-height: 46px;
    color: var(--navy-900);
    background:linear-gradient(148deg, rgba(238, 164, 45, 1) 0%, rgba(255, 248, 123, 1) 42%, rgba(238, 164, 45, 1) 100%);
    border: 1px solid rgba(212, 175, 55, 0.72);
    box-shadow: 0 10px 22px rgba(212, 175, 55, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

body.contact-page .contact-step-btn.button-gold:hover,
body.contact-page .contact-step-btn.button-gold:focus-visible {
    filter: saturate(1.08);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(212, 175, 55, 0.3), 0 0 0 4px rgba(246, 205, 83, 0.12);
}

body.contact-page .contact-process {
    background:
        radial-gradient(circle at 50% 0%, rgba(26, 118, 197, 0.3), transparent 42%),
        linear-gradient(180deg, #082b56 0%, #041838 100%);
}

body.contact-page .contact-process .container {
    background: rgba(4, 24, 56, 0.58);
    border-color: rgba(125, 191, 234, 0.24);
    box-shadow: 0 18px 48px rgba(0, 8, 24, 0.24);
}

body.contact-page .contact-process-heading h2,
body.contact-page .contact-process-flow h3 {
    color: var(--white);
}

body.contact-page .contact-process-flow p {
    color: rgba(213, 229, 242, 0.72);
}

body.contact-page .contact-process-icon {
    color: #9ed7f7;
    background: rgba(26, 118, 197, 0.18);
    border-color: rgba(212, 175, 55, 0.58);
}

/* Contact workflow: image-backed steps connected by a travelling route. */
body.contact-page .contact-process-flow {
    position: relative;
    gap: clamp(18px, 2.2vw, 34px);
    padding-top: 12px;
}

body.contact-page .contact-process-route {
    position: absolute;
    top: 44px;
    right: 12.5%;
    left: 12.5%;
    height: 2px;
    overflow: visible;
    background: repeating-linear-gradient(90deg, rgba(142, 192, 224, 0.48) 0 7px, transparent 7px 14px);
    pointer-events: none;
}

body.contact-page .contact-process-flow > .contact-process-route {
    display: block;
    min-width: 0;
    padding: 0;
    margin: 0;
}

body.contact-page .contact-process-route::before,
body.contact-page .contact-process-route::after {
    position: absolute;
    top: 50%;
    content: "";
    pointer-events: none;
}

body.contact-page .contact-process-route::before {
    left: 0;
    width: 22%;
    height: 3px;
    background: linear-gradient(90deg, #e4b83f, #7dd7f5);
    transform: translateY(-50%);
    transform-origin: left center;
    animation: contactProcessRouteFill 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

body.contact-page .contact-process-route::after {
    left: 0;
    width: 11px;
    height: 11px;
    background: #ffe27e;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(241, 199, 91, 0.18), 0 0 18px rgba(241, 199, 91, 0.8);
    transform: translate(-50%, -50%);
    animation: contactProcessRouteRunner 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

body.contact-page .contact-process-flow li {
    z-index: 1;
    min-width: 0;
}

body.contact-page .contact-process-icon {
    z-index: 2;
    width: 68px;
    height: 68px;
    margin-bottom: 18px;
    box-shadow: 0 0 0 7px rgba(7, 31, 73, 0.72), 0 12px 28px rgba(0, 0, 0, 0.24);
}

body.contact-page .contact-process-icon img,
body.contact-page .contact-process-icon svg {
    width: 31px;
    height: 31px;
    object-fit: contain;
}

body.contact-page .contact-process-icon img {
    filter: brightness(0) invert(1) sepia(0.15) saturate(1.4);
}

body.contact-page .contact-process-image {
    height: clamp(132px, 12vw, 174px);
    margin: 0 0 18px;
    overflow: hidden;
    background: #0b2b50;
    border: 1px solid rgba(151, 205, 238, 0.35);
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

body.contact-page .contact-process-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 400ms ease;
}

body.contact-page .contact-process-flow li:hover .contact-process-image img {
    filter: saturate(1.12) brightness(1.05);
    transform: scale(1.06);
}

body.contact-page .contact-process-flow h3 {
    /* min-height: 2.4em; */
    margin-bottom: 7px;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.2;
}

@keyframes contactProcessRouteRunner {
    0%, 7% { left: 0; opacity: 0; }
    12% { opacity: 1; }
    30% { left: 33.333%; }
    55% { left: 66.666%; }
    82%, 91% { left: 100%; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes contactProcessRouteFill {
    0%, 7% { width: 0; opacity: 0; }
    12% { width: 12%; opacity: 1; }
    30% { width: 33.333%; }
    55% { width: 66.666%; }
    82%, 91% { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}

@media (max-width: 720px) {
    body.contact-page .contact-process-flow {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 6px 0 0 10px;
    }

    body.contact-page .contact-process-route {
        top: 42px;
        right: auto;
        bottom: 42px;
        left: 43px;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(180deg, rgba(142, 192, 224, 0.48) 0 7px, transparent 7px 14px);
    }

    body.contact-page .contact-process-route::before {
        top: 0;
        left: 50%;
        width: 3px;
        height: 22%;
        transform: translateX(-50%);
        transform-origin: center top;
        animation-name: contactProcessRouteFillMobile;
    }

    body.contact-page .contact-process-route::after {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        animation-name: contactProcessRouteRunnerMobile;
    }

    body.contact-page .contact-process-flow li {
        display: grid;
        grid-template-columns: 68px minmax(0, 1fr);
        column-gap: 16px;
        align-items: start;
        padding: 0;
        text-align: left;
    }

    body.contact-page .contact-process-flow > .contact-process-route {
        display: block;
    }

    body.contact-page .contact-process-icon {
        grid-row: span 3;
        margin: 0;
    }

    body.contact-page .contact-process-image {
        width: 100%;
        height: 145px;
        margin-bottom: 10px;
    }

    body.contact-page .contact-process-flow h3,
    body.contact-page .contact-process-flow p {
        max-width: none;
        margin-left: 0;
        text-align: left;
    }

    body.contact-page .contact-process-flow h3 {
        min-height: 0;
    }
}

@keyframes contactProcessRouteRunnerMobile {
    0%, 7% { top: 0; opacity: 0; }
    12% { opacity: 1; }
    30% { top: 33.333%; }
    55% { top: 66.666%; }
    82%, 91% { top: 100%; opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

@keyframes contactProcessRouteFillMobile {
    0%, 7% { height: 0; opacity: 0; }
    12% { height: 12%; opacity: 1; }
    30% { height: 33.333%; }
    55% { height: 66.666%; }
    82%, 91% { height: 100%; opacity: 1; }
    100% { height: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.contact-page .contact-process-route::before,
    body.contact-page .contact-process-route::after {
        animation: none;
    }
}

body.contact-page .contact-faq {
    background: linear-gradient(180deg, #edf5fb 0%, #ffffff 100%);
}

body.contact-page .contact-value-list li,
body.contact-page .contact-faq-item {
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body.contact-page .contact-value-list li:hover,
body.contact-page .contact-faq-item:hover {
    transform: translateY(-2px);
    border-color: rgba(26, 118, 197, 0.38);
    box-shadow: 0 12px 26px rgba(4, 24, 56, 0.12);
}

body.contact-page .contact-faq .container {
    border-color: rgba(26, 118, 197, 0.2);
    box-shadow: 0 18px 50px rgba(4, 24, 56, 0.1);
}

body.contact-page .contact-faq-item {
    border-color: rgba(26, 118, 197, 0.18);
}

body.contact-page .contact-faq-item summary {
    color: var(--navy-900);
}

/* Connect page welcome copy: visible immediately over the hero image. */
body.connect-page .connect-intro {
    position: relative;
    z-index: 2;
    width: min(100%, 430px);
    margin: -20px auto 22px;
    padding: 0px 18px 16px;
    opacity: 1;
    transform: none;
    animation: none;
    background:linear-gradient(180deg, rgb(2 15 38), rgb(2 15 38 / 72%));
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62);
}

body.connect-page .connect-eyebrow {
    color: #eebc28;
    font-size: clamp(20px, 4vw, 23px);
    font-weight: 800;
    line-height: 1.15;
}

body.connect-page .connect-lead {
    max-width: 390px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

@media (max-width: 720px) {
    body.connect-page .connect-intro {
        width: min(100%, 420px);
        margin-top: -12px;
        margin-bottom: 18px;
        padding: 12px 14px 14px;
    }

    body.connect-page .connect-eyebrow {
        font-size: 20px;
    }

    body.connect-page .connect-lead {
        max-width: 340px;
        font-size: 12px;
    }
}

@media (max-width: 720px) {
    body.contact-page .contact-intro h1 {
        max-width: 360px;
        margin-inline: auto;
        font-size: clamp(32px, 8.7vw, 40px);
    }

    body.contact-page .contact-intro-lead {
        max-width: 390px;
        margin-inline: auto;
    }

    body.contact-page .contact-value-list li {
        min-height: 68px;
        padding: 11px 14px;
    }

    body.contact-page .contact-value-icon {
        width: 40px;
        height: 40px;
    }

    body.contact-page .contact-enquiry {
        border-radius: 16px;
    }
}

/* Final desktop cascade for the industries network spotlight. */
@media (min-width: 721px) {
    body.industries-page .industry-detail-panel.is-default {
        background: radial-gradient(circle at 50% 45%, rgba(16, 72, 139, 0.52), transparent 34%), radial-gradient(circle at 50% 50%, rgba(246, 205, 83, 0.08), transparent 20%), linear-gradient(145deg, #010b1d 0%, #031b3c 48%, #020c20 100%);
        border: 1px solid rgba(246, 205, 83, 0.68);
        box-shadow: 0 28px 68px rgba(0, 5, 18, 0.48), inset 0 0 0 1px rgba(125, 191, 234, 0.14), inset 0 0 80px rgba(7, 61, 126, 0.24);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default {
        overflow: hidden;
        background: radial-gradient(circle at 50% 50%, rgba(19, 85, 164, 0.44), transparent 30%), radial-gradient(circle at 50% 50%, rgba(246, 205, 83, 0.07), transparent 17%), linear-gradient(145deg, #010b1d 0%, #031d43 52%, #020b1d 100%);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default::before {
        width: 430px;
        height: 430px;
        border-color: rgba(255, 220, 77, 0.42);
        box-shadow: 0 0 0 34px rgba(246, 205, 83, 0.07), 0 0 0 70px rgba(32, 125, 220, 0.06), 0 0 46px rgba(246, 205, 83, 0.18);
        animation: industryOrbitSpin 38s linear infinite, industryRingGlow 4.6s ease-in-out infinite;
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default::after {
        width: 600px;
        height: 600px;
        border-color: rgba(246, 205, 83, 0.24);
        box-shadow: 0 0 0 44px rgba(246, 205, 83, 0.04), 0 0 0 92px rgba(32, 125, 220, 0.055), 0 0 70px rgba(246, 205, 83, 0.1);
        animation: industryOrbitSpin 58s linear infinite reverse, industryRingGlow 6.2s ease-in-out infinite reverse;
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default-mark {
        border-width: 3px;
        box-shadow: 0 24px 50px rgba(0, 3, 14, 0.62), 0 0 0 8px rgba(246, 205, 83, 0.24), 0 0 28px rgba(246, 205, 83, 0.62), 0 0 68px rgba(246, 205, 83, 0.22);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default-mark::before {
        inset: -20px;
        border-color: rgba(255, 226, 91, 0.68);
        box-shadow: 0 0 22px rgba(246, 205, 83, 0.36), inset 0 0 12px rgba(246, 205, 83, 0.1);
    }

    body.industries-page .industry-detail-panel.is-default .industry-detail-default-mark::after {
        inset: -72px;
        border-color: rgba(246, 205, 83, 0.32);
        box-shadow: 0 0 0 36px rgba(246, 205, 83, 0.07), 0 0 0 78px rgba(246, 205, 83, 0.035);
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-lines use {
        stroke: #ffdc4d;
        stroke-width: 0.5;
        filter: drop-shadow(0 0 5px rgba(246, 205, 83, 0.7)) drop-shadow(0 0 12px rgba(246, 205, 83, 0.28));
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-endpoints circle {
        fill: #fff0a1;
        filter: drop-shadow(0 0 6px rgba(246, 205, 83, 0.95)) drop-shadow(0 0 14px rgba(246, 205, 83, 0.36));
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-star {
        fill: #fff4a6;
        stroke: #ffdc4d;
        stroke-width: 0.48;
        filter: drop-shadow(0 0 5px rgba(246, 205, 83, 0.82));
        animation: industryStarTravelSpin 7.2s linear infinite;
        will-change: opacity, transform;
        transform-box: fill-box;
        transform-origin: center;
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-star:nth-child(2n) {
        animation-delay: -0.72s;
    }

    body.industries-page .industry-detail-panel.is-default .industry-network-star:nth-child(3n) {
        animation-delay: -1.34s;
    }
}

@keyframes industryStarTwinkle {
    0%, 100% { opacity: 0.72; transform: scale(0.82) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.18) rotate(18deg); }
}

@keyframes industryStarTravelSpin {
    0%, 100% { opacity: 0.82; transform: scale(0.62) rotate(0deg); }
    50% { opacity: 0.96; transform: scale(0.82) rotate(180deg); }
}

@keyframes industryRingGlow {
    0%, 100% { opacity: 0.58; }
    50% { opacity: 1; }
}

/* Final cursor cue: float above the cards without changing the existing tagline. */
.solutions-page .solutions-showcase { position: relative; }
.solutions-page .solution-card-cursor {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 20;
    display: block;
    width: 150px;
    height: 150px;
    margin: 0;
    pointer-events: none;
    transform: translateX(-50%);
}
.solutions-page .solution-card-cursor img {
    display: block;
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(246, 205, 83, .48));
    animation: solutionCardCursorFloat 2.8s ease-in-out infinite;
}
.eyebrow , strong {
   
    font-size: 12px ;
    font-weight: 800;
    text-transform: uppercase;
background: var(--gold-500) !important;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
}
@keyframes solutionCardCursorFloat {
    0%, 100% { opacity: .76; transform: translateY(10px) scale(.94); }
    50% { opacity: 1; transform: translateY(-10px) scale(1); }
}
@media (max-width: 720px) {
    .solutions-page .solution-card-cursor { top: 28px !important; width: 44px; height: 44px; }
    .solutions-page .solution-card-cursor img { width: 44px !important; height: 44px !important; max-width: 44px !important; max-height: 44px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .solutions-page .solution-card-cursor img { animation: none; }
}

/* Final mobile override: keep the chooser in normal document flow. */
@media (max-width: 860px) {
    .solutions-page .solution-card-cursor {
        display: none !important;
    }

    .solutions-page .solution-card,
    .solutions-page .solution-card-own,
    .solutions-page .solution-card-own.is-active {
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        min-height: 390px !important;
        transform: none !important;
        animation: none !important;
    }
}

@media (max-width: 720px) {
    body.about-page #process .about-process-step {
        padding-bottom: 56px !important;
    }

    body.about-page #process .process-card-progress,
    body.about-page #process .about-process-step.is-active-step .process-card-progress,
    body.about-page #process .about-process-step.is-complete-step .process-card-progress {
        left: 50% !important;
        right: auto !important;
        width: 32% !important;
        bottom: 0px !important;
        transform: translateX(-50%) !important;
    }
}
@media (max-width: 720px) {
    .application-scroller {
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        /*touch-action: pan-x; */
    }

    .application-card {
        scroll-snap-align: center;
        scroll-snap-stop: always;  
    }
}