/* =========================================================
   STELLA SPECTRUM
   HOMEPAGE — CLEAN MASTER
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --ice: #dce6ee;
    --silver: #c5d2dd;
    --steel: #526777;
    --slate: #263d4c;
    --dark: #172b38;
    --gold: #c89527;
    --light-gold: #ffe49a;
    --white: #f5f8fa;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    width: 100%;
    min-height: 100%;

    overflow-x: hidden;
    overflow-y: auto;

    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;
    overflow-y: auto;

    color: var(--slate);

    font-family:
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif;
}

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

button {
    font: inherit;
}


/* =========================================================
   WEBSITE
   ========================================================= */

.site {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 100vh;

    background:
        radial-gradient(
            ellipse at 69% 40%,
            rgba(255,255,255,.98) 0%,
            rgba(255,255,255,.72) 18%,
            rgba(230,240,246,.30) 39%,
            transparent 58%
        ),
        radial-gradient(
            ellipse at 48% 18%,
            rgba(255,255,255,.52),
            transparent 45%
        ),
        linear-gradient(
            122deg,
            #cbdbe5 0%,
            #e9f1f5 39%,
            #d7e4ec 68%,
            #aec2cf 100%
        );
}


/* =========================================================
   LOADER INTEGRATION

   The loading overlay itself is transparent.
   The completed vault doors provide the cover.
   The website therefore exists underneath from frame one.
   ========================================================= */

.loading-screen {
    z-index: 9999 !important;
    background: transparent !important;
}

.loading-screen::before,
.loading-screen::after {
    display: none !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: absolute;
    inset: 0 0 auto 0;

    z-index: 20;

    width: 100%;
}

.header-inner {
    width: min(calc(100% - 110px), 1360px);
    height: 128px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 34px;
}


/* =========================================================
   LOGO
   ========================================================= */

.brand {
    display: flex;
    align-items: center;

    margin-right: auto;
}

.brand-logo {
    display: block;

    width: auto;
    height: 118px;

    object-fit: contain;

    transform: scale(1.16);
    transform-origin: left center;
}


/* =========================================================
   LOGO AREA
   ========================================================= */

.brand-area {
    position: relative;

    margin-right: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================================
   LOGO SLOGAN
   Independent from logo image
   ========================================================= */

.brand-slogan {
    position: absolute;

    left: 60%;
    top: 108px;

    transform: translateX(-50%);

    width: 290px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    white-space: nowrap;

    pointer-events: none;
}


.slogan-text {
    color: #526777;

    font-size: 7px;
    font-weight: 500;

    letter-spacing: .32em;

    text-transform: uppercase;
}


.slogan-line {
    width: 30px;
    height: 1px;

    flex-shrink: 0;

    background: #c89527;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.main-nav {
    display: flex;
    align-items: center;

    gap: clamp(24px, 2.35vw, 40px);
}

.main-nav a {
    position: relative;

    padding: 42px 0 36px;

    color: rgba(23,43,56,.88);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 29px;

    width: 0;
    height: 1px;

    background: var(--gold);

    transition: width .3s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}


/* =========================================================
   LET'S TALK
   ========================================================= */

.header-button {
    min-width: 142px;
    height: 44px;

    padding: 0 18px 0 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    border: 1px solid var(--gold);
    border-radius: 999px;

    color: var(--dark);

    background: rgba(255,255,255,.08);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;

    transition:
        background .3s ease,
        transform .3s ease;
}

.header-button:hover {
    background: rgba(255,255,255,.45);

    transform: translateY(-1px);
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.menu-button {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}

.menu-button span {
    display: block;

    width: 24px;
    height: 1px;

    margin: 6px auto;

    background: var(--dark);
}

.mobile-nav {
    display: none;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 100svh;

    overflow: hidden;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr)
        auto;

    padding-top: 128px;
}


/* =========================================================
   HERO STAGE
   ========================================================= */

.hero-stage {
    position: relative;

    z-index: 5;

    width: min(calc(100% - 110px), 1360px);
    min-height: 560px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(500px, .88fr)
        minmax(530px, 1.12fr);

    align-items: center;

    gap: 34px;

    padding: 16px 0 26px;
}


/* =========================================================
   HERO COPY
   ========================================================= */

.hero-copy {
    position: relative;

    z-index: 6;

    align-self: center;

    max-width: 640px;

    padding-bottom: 8px;

    transform: translate(2px, 8px);
}

.hero-eyebrow {
    margin-bottom: 24px;

    color: #a57619;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .36em;

    text-transform: uppercase;
}

.hero h1 {
    max-width: 650px;

    margin: 0;

    color: #102b3b;

    font-size: clamp(60px, 5.22vw, 80px);
    font-weight: 320;

    line-height: .91;

    letter-spacing: -.055em;
}

.hero h1 span {
    display: block;
}

.hero h1 .headline-accent {
    color: #c18b1b;
}

.hero-description {
    margin: 24px 0 0;

    color: rgba(23,43,56,.76);

    font-size: 16px;

    line-height: 1.55;

    letter-spacing: .002em;
}


/* =========================================================
   HERO BUTTON
   ========================================================= */

.hero-button {
    width: fit-content;

    min-width: 265px;
    height: 48px;

    margin-top: 30px;

    padding: 0 18px 0 23px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    border: 1px solid var(--gold);
    border-radius: 999px;

    color: var(--dark);

    background: rgba(255,255,255,.13);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

    transition:
        background .3s ease,
        transform .3s ease;
}

.hero-button:hover {
    background: rgba(255,255,255,.48);

    transform: translateY(-2px);
}

.hero-button-arrow {
    font-size: 22px;
    font-weight: 300;

    line-height: 1;
}


/* =========================================================
   LARGE CORNER ARCS
   ========================================================= */

.corner-arc {
    position: absolute;

    z-index: 2;

    border: 2px solid rgba(205,151,34,.98);
    border-radius: 50%;

    pointer-events: none;

    box-shadow:
        0 0 0 2px rgba(255,255,255,.86),
        0 0 8px rgba(255,255,255,.40);
}

.corner-arc-top {
    width: 650px;
    height: 650px;

    left: -520px;
    top: -525px;
}

.corner-arc-bottom {
    width: 820px;
    height: 820px;

    right: -625px;
    bottom: -555px;
}


/* =========================================================
   BACKGROUND TECHNICAL LINES
   ========================================================= */

.technical-line {
    position: absolute;

    z-index: 1;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(65,93,110,.12),
            transparent
        );
}

.technical-line-one {
    width: 45%;

    right: 3%;
    top: 35%;

    transform: rotate(-18deg);
}

.technical-line-two {
    width: 38%;

    right: 8%;
    top: 65%;

    transform: rotate(20deg);
}


/* =========================================================
   ORB
   ========================================================= */

.orb-zone {
    position: relative;
    width: min(50vw, 690px);
    aspect-ratio: 1;
    justify-self: center;
    display: grid;
    place-items: center;
    transform: translateX(-24px);
}


/* =========================================================
   ORB BACKGROUND GLOW
   ========================================================= */

.orb-aura {
    position: absolute;
    left: 50%;
    top: 49%;

    width: 90%;
    height: 90%;

    transform: translate(-50%, -50%);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.88) 23%,
            rgba(220,235,243,.42) 49%,
            transparent 73%
        );

    filter: blur(16px);
}


/* =========================================================
   FLOOR SHADOW
   ========================================================= */

.orb-floor-shadow {
    position: absolute;
    z-index: 0;

    left: 50%;
    bottom: 4%;

    width: 52%;
    height: 6%;

    transform: translateX(-50%);

    border-radius: 50%;

    background: rgba(35,64,82,.23);

    filter: blur(16px);

    opacity: .75;
}


/* =========================================================
   ORB SCULPTURE
   ========================================================= */

.orb-sculpture {
    position: relative;
    z-index: 3;

    width: 79%;
    height: 79%;

    border-radius: 50%;

    animation: orbFloat 7s ease-in-out infinite;
}


/* =========================================================
   PRECISION / TECHNICAL CIRCLES
   ========================================================= */

.precision-circle,
.rear-ring,
.front-ring,
.gold-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    pointer-events: none;
}


.precision-circle {
    z-index: 1;

    border: 1px dashed rgba(77,104,120,.18);

    opacity: .45;
}


/* Main outer technical circle */

.precision-circle-a {
    width: 111%;
    height: 111%;

    transform: translate(-50%, -50%);
}


/* Inner technical circle */

.precision-circle-b {
    width: 98%;
    height: 98%;

    transform: translate(-50%, -50%);

    border-style: solid;

    border-color: rgba(201,150,39,.14);
}


/* Outer dotted guide */

.precision-circle-c {
    width: 116%;
    height: 116%;

    transform: translate(-50%, -50%);

    border-style: dotted;

    border-color: rgba(77,104,120,.14);
}


/* =========================================================
   REAR SILVER / STEEL ORBITS
   These sit BEHIND the glass.
   ========================================================= */

.rear-ring {
    z-index: 2;

    border-style: solid;
}


/* Dark steel diagonal orbit */

.rear-ring-a {
    width: 110%;
    height: 55%;

    transform:
        translate(-50%, -50%)
        rotate(-20deg);

    border-width: 2px;

    border-color: rgba(52,80,97,.48);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.22),
        0 0 8px rgba(255,255,255,.32);
}


/* Tall bright silver orbit */

.rear-ring-b {
    width: 60%;
    height: 108%;

    transform:
        translate(-50%, -50%)
        rotate(31deg);

    border-width: 2px;

    border-color: rgba(255,255,255,.80);

    border-left-color: rgba(73,101,118,.34);

    box-shadow:
        0 0 7px rgba(255,255,255,.72);
}


/* Secondary steel orbit */

.rear-ring-c {
    width: 93%;
    height: 69%;

    transform:
        translate(-50%, -50%)
        rotate(49deg);

    border-width: 1.5px;

    border-color: rgba(69,97,114,.33);

    border-right-color: rgba(255,255,255,.62);

    box-shadow:
        0 0 6px rgba(255,255,255,.30);
}


/* =========================================================
   GLASS ORB
   THIS IS THE APPROVED GLASS ARTWORK.
   DO NOT ALTER THE IMAGE.
   ========================================================= */

.glass-body {
    position: absolute;
    z-index: 4;

    left: 50%;
    top: 50%;

    width: 88%;
    height: 88%;

    transform: translate(-50%, -50%);

    overflow: visible;

    border: 0;

    background: transparent;

    box-shadow: none;

    pointer-events: none;
}


.glass-photo {
    position: absolute;
    z-index: 5;

    left: 50%;
    top: 50%;

    width: 106%;
    height: 106%;

    transform:
        translate(-50%, -50%)
        scale(1.035);

    object-fit: contain;

    opacity: .97;

    pointer-events: none;

    filter:
        contrast(1.035)
        brightness(1.025)
        saturate(.92)
        drop-shadow(
            0 12px 12px
            rgba(255,255,255,.72)
        )
        drop-shadow(
            0 22px 25px
            rgba(46,65,83,.20)
        );
}


/* =========================================================
   FRONT SILVER ORBITS
   These sit IN FRONT of the glass.
   ========================================================= */

.front-ring {
    z-index: 7;

    border-style: solid;

    pointer-events: none;

    filter:
        drop-shadow(
            0 1px 3px
            rgba(52,80,97,.24)
        );
}


/* Wide silver orbit */

.front-ring-a {
    width: 110%;
    height: 49%;

    transform:
        translate(-50%, -50%)
        rotate(16deg);

    border-width: 2.5px;

    border-color: rgba(255,255,255,.84);

    border-left-color: rgba(69,98,115,.50);

    border-bottom-color: rgba(59,87,104,.38);

    box-shadow:
        0 0 7px rgba(255,255,255,.55);
}


/* Tall diagonal silver orbit */

.front-ring-b {
    width: 55%;
    height: 110%;

    transform:
        translate(-50%, -50%)
        rotate(-36deg);

    border-width: 2.5px;

    border-color: rgba(255,255,255,.88);

    border-right-color: rgba(62,91,108,.48);

    border-bottom-color: rgba(255,255,255,.62);

    box-shadow:
        0 0 7px rgba(255,255,255,.55);
}


/* Secondary bright orbit */

.front-ring-c {
    width: 89%;
    height: 75%;

    transform:
        translate(-50%, -50%)
        rotate(-58deg);

    border-width: 1.5px;

    border-color: rgba(255,255,255,.65);

    border-top-color: rgba(65,93,110,.38);

    border-left-color: rgba(255,255,255,.30);

    opacity: .86;

    box-shadow:
        0 0 5px rgba(255,255,255,.42);
}


/* =========================================================
   GOLD ORBIT 01
   Main wide orbit.
   ========================================================= */

.gold-ring {
    z-index: 8;

    border-style: solid;

    pointer-events: none;
}


.gold-ring-a {
    width: 113%;
    height: 58%;

    transform:
        translate(-50%, -50%)
        rotate(14deg);

    border-width: 3px;

    border-color: #d19b27;

    border-left-color: #f1ca5d;

    border-bottom-color: #f4d46c;

    box-shadow:
        0 0 3px rgba(255,255,255,.75),
        0 0 9px rgba(207,151,31,.35);
}


/* =========================================================
   GOLD ORBIT 02
   Tall diagonal orbit.
   ========================================================= */

.gold-ring-b {
    width: 64%;
    height: 108%;

    transform:
        translate(-50%, -50%)
        rotate(41deg);

    border-width: 2px;

    border-color: rgba(214,164,46,.86);

    border-top-color: rgba(255,226,137,.90);

    border-right-color: rgba(190,132,19,.65);

    box-shadow:
        0 0 3px rgba(255,255,255,.55),
        0 0 7px rgba(207,151,31,.24);
}


/* =========================================================
   CROSSHAIR AXES
   ========================================================= */

.axis {
    position: absolute;
    z-index: 9;

    left: 50%;
    top: 50%;

    pointer-events: none;
}


/* Horizontal axis */

.axis-x {
    width: 108%;
    height: 1px;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(201,150,39,.08) 7%,
            rgba(201,150,39,.45) 18%,
            rgba(201,150,39,.24) 50%,
            rgba(201,150,39,.52) 82%,
            rgba(201,150,39,.08) 93%,
            transparent 100%
        );
}


/* Vertical gold axis */

.axis-y {
    width: 1px;
    height: 116%;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(201,150,39,.12) 4%,
            rgba(201,150,39,.72) 17%,
            rgba(201,150,39,.32) 50%,
            rgba(201,150,39,.75) 83%,
            rgba(201,150,39,.12) 96%,
            transparent 100%
        );
}


/* =========================================================
   GOLD NODES
   ========================================================= */

.gold-node {
    position: absolute;
    z-index: 12;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,244,194,1);

    background:
        radial-gradient(
            circle at 28% 22%,
            #ffffff 0 8%,
            #fff4c5 14%,
            #f2c95e 32%,
            #c78a17 62%,
            #7a4a05 100%
        );

    box-shadow:
        0 0 5px rgba(255,255,255,1),
        0 0 13px rgba(211,157,39,.72),
        inset -4px -5px 7px rgba(91,54,3,.34),
        inset 4px 3px 5px rgba(255,255,255,.60);
}


/* Left node */

.node-a {
    left: -1%;
    top: 39%;
}


/* Right node */

.node-b {
    right: -1%;
    top: 43%;
}


/* Top axis point */

.node-c {
    left: calc(50% - 4px);
    top: -7%;

    width: 8px;
    height: 8px;
}


/* Bottom axis point */

.node-d {
    left: calc(50% - 4px);
    bottom: -7%;

    width: 8px;
    height: 8px;
}


/* Lower gold node */

.node-e {
    left: 34%;
    bottom: 2%;

    width: 20px;
    height: 20px;
}


/* =========================================================
   SMALL TECHNICAL DOTS
   ========================================================= */

.micro-dot {
    position: absolute;
    z-index: 11;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        rgba(201,150,39,.85);
}


.dot-a {
    right: 8%;
    top: 10%;
}


.dot-b {
    left: 8%;
    top: 27%;
}


.dot-c {
    right: 13%;
    bottom: 14%;
}


/* =========================================================
   ORB LABELS
   ========================================================= */

.orb-note {
    position: absolute;
    z-index: 12;

    display: flex;
    flex-direction: column;

    gap: 7px;

    color:
        rgba(25,51,67,.72);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: .30em;

    line-height: 1;

    text-transform: uppercase;
}


.orb-note i {
    width: 18px;
    height: 1px;

    margin-top: 5px;

    background: var(--gold);
}


.orb-note-left {
    left: -9%;
    top: 55%;
}


.orb-note-right {
    right: -9%;
    top: 28%;
}


/* =========================================================
   ORB FLOAT
   ========================================================= */

@keyframes orbFloat {

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

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


/* =========================================================
   CAPABILITY BAND
   ========================================================= */

.capability-band {
    position: relative;

    z-index: 6;

    width: 100%;

    min-height: 168px;

    padding:
        22px
        max(55px, calc((100vw - 1360px) / 2));

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr))
        150px;

    background:
        linear-gradient(
            90deg,
            rgba(224,235,241,.72),
            rgba(245,249,251,.58) 50%,
            rgba(213,228,237,.64)
        );

    border-top:
        1px solid rgba(255,255,255,.80);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.68);

    backdrop-filter: blur(10px);
}


/* =========================================================
   CAPABILITY ITEMS
   ========================================================= */

.capability-item {
    position: relative;

    min-height: 122px;

    padding:
        4px
        28px
        2px
        42px;

    display: grid;

    grid-template-columns:
        44px
        1fr;

    grid-template-rows:
        30px
        48px
        auto;

    column-gap: 14px;

    border-right:
        1px solid rgba(50,79,96,.22);
}

.capability-number {
    position: absolute;

    left: 0;
    top: 6px;

    color: #a67618;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: .08em;
}

.capability-number::after {
    content: "";

    display: block;

    width: 21px;
    height: 1px;

    margin-top: 8px;

    background: var(--gold);
}

.capability-icon {
    grid-column: 1;
    grid-row: 1 / 3;

    align-self: center;

    width: 38px;
    height: 38px;

    color: #1d3949;
}

.capability-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.capability-title {
    grid-column: 2;
    grid-row: 2;

    align-self: center;

    color: #142d3d;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.05;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.capability-description {
    grid-column: 2;
    grid-row: 3;

    color: rgba(32,59,75,.64);

    font-size: 10px;

    line-height: 1.35;
}


/* =========================================================
   SPECTRUM TAG
   ========================================================= */

.spectrum-tag {
    align-self: center;

    padding-left: 28px;

    display: flex;
    flex-direction: column;

    gap: 7px;

    color: rgba(28,57,73,.56);

    font-size: 8px;
    font-weight: 600;

    letter-spacing: .28em;

    text-transform: uppercase;
}

.spectrum-tag i {
    width: 18px;
    height: 1px;

    margin-top: 4px;

    background: var(--gold);
}


/* =========================================================
   FUTURE SECTIONS
   ========================================================= */

.future-section {
    display: none;
}


/* =========================================================
   ORB MOTION
   ========================================================= */

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

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


/* =========================================================
   SHORT DESKTOP / LAPTOP
   ========================================================= */

@media (min-width: 1101px) and (max-height: 760px) {

    .header-inner {
        height: 104px;
    }

    .brand-logo {
        height: 150px;

        transform: translateY(40px) scale(1.20);
    }
    
    .brand-slogan {
        top: 210px;
    }

    .main-nav a {
        padding-top: 32px;
        padding-bottom: 29px;
    }

    .main-nav a::after {
        bottom: 22px;
    }

    .hero {
        padding-top: 104px;
    }

    .hero-stage {
        min-height: 390px;

        padding: 5px 0 12px;
    }

    .hero-eyebrow {
        margin-bottom: 14px;

        font-size: 9px;
    }

    .hero h1 {
        font-size: clamp(48px, 4.4vw, 63px);
    }

    .hero-description {
        margin-top: 15px;

        font-size: 13px;
    }

    .hero-button {
        min-width: 235px;
        height: 40px;

        margin-top: 18px;

        font-size: 9px;
    }

    .orb-zone {
        width: min(42vw, 520px);

        transform: translateX(-18px);
    }

    .capability-band {
        min-height: 126px;

        padding-top: 12px;
        padding-bottom: 12px;
    }

    .capability-item {
        min-height: 100px;

        grid-template-rows:
            22px
            40px
            auto;
    }

    .capability-icon {
        width: 31px;
        height: 31px;
    }

    .capability-title {
        font-size: 12px;
    }

    .capability-description {
        font-size: 8px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .header-inner {
        width: calc(100% - 48px);
        height: 112px;
    }

    .brand-logo {
        height: 100px;

        transform: none;
    }

    .main-nav {
        display: none;
    }

    .header-button {
        margin-left: auto;
    }

    .menu-button {
        display: block;
    }

    .mobile-nav {
        position: absolute;

        top: 104px;
        left: 24px;
        right: 24px;

        padding: 16px;

        flex-direction: column;

        background: rgba(237,244,247,.97);

        border:
            1px solid rgba(38,61,76,.15);

        box-shadow:
            0 18px 40px rgba(38,61,76,.12);

        backdrop-filter: blur(16px);
    }

    .mobile-nav.open {
        display: flex;
    }

    .mobile-nav a {
        padding: 12px 10px;

        border-bottom:
            1px solid rgba(38,61,76,.10);

        font-size: 12px;
    }

    .hero {
        padding-top: 112px;
    }

    .hero-stage {
        width: calc(100% - 48px);

        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, .9fr);

        gap: 10px;
    }

    .hero h1 {
        font-size: clamp(48px, 6vw, 68px);
    }

    .orb-zone {
        width: min(48vw, 500px);

        transform: none;
    }

    .capability-band {
        padding-left: 24px;
        padding-right: 24px;

        grid-template-columns:
            repeat(4, 1fr);
    }

    .spectrum-tag {
        display: none;
    }

    .capability-item {
        padding-right: 14px;
        padding-left: 32px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .header-inner {
        width: calc(100% - 32px);
        height: 92px;
    }

    .brand-logo {
        height: 82px;

        transform: none;
    }

    .header-button {
        display: none;
    }

    .mobile-nav {
        top: 88px;
        left: 16px;
        right: 16px;
    }

    .hero {
        padding-top: 92px;

        display: block;
    }

    .hero-stage {
        width: calc(100% - 32px);

        min-height: auto;

        grid-template-columns: 1fr;

        padding: 38px 0 20px;

        gap: 14px;
    }

    .hero-copy {
        max-width: 100%;

        transform: none;
    }

    .hero-eyebrow {
        margin-bottom: 17px;

        font-size: 9px;

        letter-spacing: .27em;
    }

    .hero h1 {
        font-size: clamp(44px, 13vw, 64px);
    }

    .hero-description {
        font-size: 14px;
    }

    .orb-zone {
        width: min(94vw, 500px);

        margin: 0 auto;

        transform: none;
    }

    .glass-body {
        width: 84%;
        height: 84%;
    }

    .glass-photo {
        width: 103%;
        height: 103%;
    }

    .orb-note-left {
        left: 2%;
    }

    .orb-note-right {
        right: 2%;
    }

    .capability-band {
        grid-template-columns:
            1fr
            1fr;

        padding: 14px 16px;
    }

    .capability-item {
        min-height: 120px;

        padding-left: 36px;

        border-bottom:
            1px solid rgba(50,79,96,.18);
    }

    .corner-arc-top {
        width: 480px;
        height: 480px;

        left: -400px;
        top: -390px;
    }

    .corner-arc-bottom {
        width: 570px;
        height: 570px;

        right: -460px;
        bottom: -380px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .brand-logo {
        height: 74px;
    }

    .hero h1 {
        font-size: clamp(40px, 12.5vw, 56px);
    }

    .hero-button {
        width: 100%;
    }

    .orb-note {
        font-size: 6px;
    }

    .capability-band {
        grid-template-columns: 1fr;
    }

    .capability-item {
        border-right: 0;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    .orb-sculpture {
        animation: none;
    }
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    position: relative;
    z-index: 8;
    overflow: hidden;
    color: rgba(238,245,248,.78);
    background:
        radial-gradient(circle at 16% 22%, rgba(83,122,145,.18), transparent 31%),
        radial-gradient(circle at 83% 30%, rgba(200,149,39,.08), transparent 25%),
        linear-gradient(135deg, #0d202c 0%, #132b39 48%, #0a1b25 100%);
    border-top: 1px solid rgba(200,149,39,.45);
}

.footer-glow {
    position: absolute;
    right: 7%;
    top: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    pointer-events: none;
    opacity: .48;
    filter: blur(26px);
    background:
        radial-gradient(circle at 44% 45%, rgba(255,255,255,.18), transparent 18%),
        conic-gradient(from 210deg, rgba(79,156,199,.08), rgba(184,111,210,.09), rgba(232,173,58,.08), rgba(80,170,187,.08), rgba(79,156,199,.08));
}

.footer-inner {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 110px), 1360px);
    margin: 0 auto;
    padding: 70px 0 56px;
    display: grid;
    grid-template-columns: minmax(300px, .95fr) minmax(560px, 1.25fr);
    gap: clamp(70px, 9vw, 150px);
}

.footer-brand {
    max-width: 390px;
}

.footer-logo-link {
    display: inline-block;
}

.footer-logo {
    display: block;
    width: min(330px, 100%);
    height: auto;
    object-fit: contain;
}

.footer-statement {
    margin: 10px 0 0;
    color: rgba(240,246,249,.88);
    font-size: clamp(12px, 1.05vw, 16px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.footer-statement span {
    color: #d2a037;
}

.footer-links {
    display: grid;
    grid-template-columns: .8fr 1.35fr .8fr;
    gap: clamp(34px, 5vw, 80px);
    padding-top: 16px;
}

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

.footer-column h2 {
    position: relative;
    margin: 0 0 26px;
    padding-bottom: 13px;
    color: #d2a037;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .30em;
    text-transform: uppercase;
}

.footer-column h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25px;
    height: 1px;
    background: #c89527;
}

.footer-column a {
    position: relative;
    width: fit-content;
    margin-bottom: 14px;
    color: rgba(235,243,247,.70);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .045em;
    transition: color .25s ease, transform .25s ease;
}

.footer-column a:hover {
    color: #ffffff;
    transform: translateX(3px);
}

.footer-bottom {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(216,229,236,.13);
}

.footer-bottom-inner {
    width: min(calc(100% - 110px), 1360px);
    min-height: 72px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.footer-legal,
.footer-credentials {
    display: flex;
    align-items: center;
    gap: 20px;
    color: rgba(219,231,237,.48);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.footer-legal a {
    transition: color .25s ease;
}

.footer-legal a:hover {
    color: rgba(255,255,255,.92);
}

.footer-credentials {
    color: rgba(226,236,241,.62);
}

.footer-credentials i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c89527;
}

@media (max-width: 1100px) {
    .footer-inner,
    .footer-bottom-inner {
        width: calc(100% - 48px);
    }

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

    .footer-brand {
        max-width: 460px;
    }

    .footer-links {
        max-width: 760px;
    }
}

@media (max-width: 760px) {
    .footer-inner,
    .footer-bottom-inner {
        width: calc(100% - 32px);
    }

    .footer-inner {
        padding: 48px 0 40px;
        gap: 42px;
    }

    .footer-logo {
        width: min(280px, 86vw);
    }

    .footer-statement {
        margin-top: 26px;
    }

    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 38px 26px;
    }

    .footer-services {
        grid-row: span 2;
    }

    .footer-bottom-inner {
        min-height: 0;
        padding: 24px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .footer-legal,
    .footer-credentials {
        flex-wrap: wrap;
        gap: 10px 16px;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .footer-links {
        grid-template-columns: 1fr;
    }

    .footer-services {
        grid-row: auto;
    }

    .footer-glow {
        right: -180px;
    }
}



/* =========================================================
   FLOATING DESKTOP NAVIGATION
   Same behaviour used on Services / Solutions.
   This does not alter the approved homepage header.
   ========================================================= */

.floating-nav-shell {
    position: fixed;
    z-index: 900;

    top: 22px;
    left: 50%;

    transform:
        translate(-50%, -18px)
        scale(.985);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .28s ease,
        transform .28s ease,
        visibility .28s ease;
}

.floating-nav-shell.is-visible {
    transform:
        translate(-50%, 0)
        scale(1);

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.floating-nav {
    min-height: 54px;

    padding:
        6px
        7px
        6px
        23px;

    display: flex;
    align-items: center;

    gap: clamp(20px, 2vw, 34px);

    border:
        1px solid rgba(255,255,255,.76);

    border-radius: 999px;

    background:
        rgba(245,248,250,.88);

    box-shadow:
        0 15px 38px rgba(23,43,56,.13),
        inset 0 1px 0 rgba(255,255,255,.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.floating-nav > a:not(.floating-nav-talk) {
    position: relative;

    padding:
        15px
        0
        14px;

    color:
        rgba(23,43,56,.78);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;

    white-space: nowrap;
}

.floating-nav > a:not(.floating-nav-talk)::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 8px;

    height: 1px;

    transform: scaleX(0);
    transform-origin: center;

    background:
        var(--gold);

    transition:
        transform .25s ease;
}

.floating-nav > a:not(.floating-nav-talk):hover::after,
.floating-nav > a:not(.floating-nav-talk).active::after {
    transform: scaleX(1);
}

.floating-nav > a.active {
    color:
        var(--dark);
}

.floating-nav-talk {
    min-width: 128px;
    height: 42px;

    padding:
        0
        16px
        0
        19px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 19px;

    border:
        1px solid var(--gold);

    border-radius:
        999px;

    color:
        var(--dark);

    background:
        rgba(255,255,255,.42);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;

    white-space: nowrap;

    transition:
        background .25s ease,
        transform .25s ease;
}

.floating-nav-talk:hover {
    background:
        rgba(255,255,255,.82);

    transform:
        translateY(-1px);
}

@media (max-width: 1100px) {
    .floating-nav-shell {
        display: none !important;
    }
}

.footer-certificate-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-certificate-link:hover {
    color: var(--gold);
}

/* ==========================================================
   MOBILE HEADER BRAND SIZE FIX
   Desktop / main site remains completely unchanged
   ========================================================== */

@media (max-width: 820px) {

    .brand-area {
        width: auto;
        max-width: 100%;
        align-items: flex-start;
    }

    .brand {
        width: auto;
    }

    .brand-logo {
        width: auto;
        height: 82px;
        max-width: 150px;
        object-fit: contain;
    }

    .brand-slogan {
        width: auto;
        max-width: 190px;

        margin-top: 2px;
        margin-left: 8px;

        gap: 7px;
    }

    .slogan-text {
        font-size: 5.5px;
        letter-spacing: 0.16em;
        white-space: nowrap;
    }

    .slogan-line {
        width: 18px;
        min-width: 18px;
    }

}

@media (max-width: 420px) {

    .brand-logo {
        height: 72px;
        max-width: 130px;
    }

    .brand-slogan {
        max-width: 175px;
        margin-left: 10px;
    }

    .slogan-text {
        font-size: 5px;
        letter-spacing: 0.13em;
    }

    .slogan-line {
        width: 14px;
        min-width: 14px;
    }

}