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

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #060707;
    color: #f2f2f0;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

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

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

button,
input,
textarea {
    font: inherit;
}

button {
    border: 0;
}


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

:root {
    --black: #060707;
    --black-soft: #0b0c0c;
    --graphite: #111313;

    --white: #f2f2f0;
    --grey: #929696;
    --grey-dark: #5b6060;

    --line: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.22);

    --red: #d20d17;
    --red-bright: #ff2028;

    --container: 1440px;

    --padding:
        clamp(22px, 4vw, 70px);

    --section:
        clamp(90px, 10vw, 170px);

    --ease:
        cubic-bezier(.2, .8, .2, 1);
}


/* ========================================
   GLOBAL
======================================== */

.container {
    width: min(
        calc(100% - (var(--padding) * 2)),
        var(--container)
    );

    margin-inline: auto;
}

.section {
    padding-block: var(--section);
}

.kicker {
    margin: 0 0 30px;

    color: var(--grey);

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.page-noise {
    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: 0.025;
    z-index: 100;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}


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

.header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    z-index: 50;

    border-bottom: 1px solid transparent;

    transition:
        background .35s ease,
        border-color .35s ease,
        backdrop-filter .35s ease;
}

.header--scrolled {
    background: rgba(6, 7, 7, 0.82);
    border-bottom-color: var(--line);

    backdrop-filter: blur(18px);
}

.header__inner {
    height: 88px;

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

    gap: 40px;
}

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

    gap: 13px;

    flex-shrink: 0;
}

.brand__mark {
    width: 6px;
    height: 29px;

    background: var(--red);
}

.brand__text {
    font-size: 14px;
    font-weight: 700;

    letter-spacing: .08em;
    line-height: 1.15;
}

.brand__text small {
    display: block;

    margin-top: 4px;

    color: #969999;

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

    letter-spacing: .17em;
}

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

    gap: clamp(20px, 2.5vw, 42px);

    margin-left: auto;
}

.nav a {
    position: relative;

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

    font-size: 12px;

    transition: color .2s ease;
}

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

    position: absolute;
    left: 0;
    bottom: -8px;

    width: 100%;
    height: 1px;

    background: var(--red);

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

    transition:
        transform .25s var(--ease);
}

.nav a:hover {
    color: #fff;
}

.nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

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

    gap: 25px;
}

.header__location {
    color: #8e9292;

    font-size: 9px;
    letter-spacing: .18em;
}

.menu-button {
    display: none;

    width: 38px;
    height: 38px;

    position: relative;

    background: transparent;

    cursor: pointer;
}

.menu-button span {
    position: absolute;
    left: 7px;

    width: 24px;
    height: 1px;

    background: #fff;

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

.menu-button span:first-child {
    top: 14px;
}

.menu-button span:last-child {
    top: 22px;
}

.menu-button.is-active span:first-child {
    top: 18px;

    transform: rotate(45deg);
}

.menu-button.is-active span:last-child {
    top: 18px;

    transform: rotate(-45deg);
}


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

.hero {
    position: relative;

    min-height: 100svh;

    overflow: hidden;

    background: #050606;
}

.hero__image {
    position: absolute;
    inset: 0;

    background-image:
        url("assets/hero-optic.webp");

    background-position: center;
    background-size: cover;

    transform: scale(1.015);
}

.hero__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 6, 6, .98) 0%,
            rgba(5, 6, 6, .93) 24%,
            rgba(5, 6, 6, .58) 48%,
            rgba(5, 6, 6, .08) 82%
        ),
        linear-gradient(
            0deg,
            rgba(5, 6, 6, .7) 0%,
            rgba(5, 6, 6, 0) 38%
        );
}

.hero__grid {
    position: absolute;
    inset: 0;

    opacity: .13;

    background-image:
        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;
}

.hero__container {
    position: relative;

    min-height: 100svh;

    z-index: 4;

    display: flex;
    flex-direction: column;
    justify-content: center;

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

.hero__content {
    width: min(690px, 70%);
}

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

    gap: 13px;

    margin-bottom: 30px;

    color: #a0a4a4;

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

    letter-spacing: .17em;
}

.eyebrow span {
    width: 26px;
    height: 1px;

    background: var(--red);
}

.hero h1 {
    margin: 0;

    max-width: 760px;

    font-size:
        clamp(58px, 7.4vw, 125px);

    font-weight: 350;
    letter-spacing: -0.065em;

    line-height: .88;
}

.hero h1 strong {
    color: #fff;

    font-weight: 600;
}

.hero__description {
    width: min(470px, 100%);

    margin: 38px 0 0;

    color: #a6aaaa;

    font-size:
        clamp(14px, 1.2vw, 17px);

    line-height: 1.7;
}

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

    gap: 32px;

    margin-top: 46px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 34px;

    min-height: 52px;

    padding: 0 20px;

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

    letter-spacing: .04em;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.button span {
    font-size: 16px;
}

.button--primary {
    color: #fff;
    background: var(--red);

    border: 1px solid var(--red);
}

.button--primary:hover {
    background: var(--red-bright);

    transform: translateY(-2px);
}

.button--text {
    padding-inline: 0;

    color: #b7b9b9;

    border-bottom: 1px solid #585b5b;
}

.button--text:hover {
    color: #fff;
}

.hero__meta {
    position: absolute;
    right: 0;
    bottom: 145px;

    display: flex;

    border-top: 1px solid var(--line);
}

.hero__meta-item {
    width:
        clamp(145px, 13vw, 200px);

    padding: 16px 20px;

    border-right: 1px solid var(--line);
}

.hero__meta-item span {
    color: var(--red);

    font-size: 9px;
}

.hero__meta-item p {
    margin: 8px 0 0;

    font-size: 11px;
}

.hero__bottom {
    position: absolute;
    left: 0;
    bottom: 0;

    z-index: 5;

    width: 100%;

    border-top: 1px solid var(--line);
}

.hero__bottom-inner {
    min-height: 60px;

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

    color: #707474;

    font-size: 8px;
    letter-spacing: .15em;
}

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

    gap: 9px;

    color: #979b9b;
}

.hero__status i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--red);

    box-shadow:
        0 0 12px rgba(255, 30, 40, .7);
}


/* ========================================
   LASER
======================================== */

.laser {
    pointer-events: none;
}

.laser--hero {
    position: absolute;

    width: 58vw;
    height: 1px;

    right: -9vw;
    top: 59%;

    z-index: 3;

    opacity: .75;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 18, 30, .25),
            #f81621,
            rgba(255, 18, 30, .12),
            transparent
        );

    transform:
        rotate(-16deg);

    box-shadow:
        0 0 9px rgba(255, 20, 30, .24);
}


/* ========================================
   SECTION INDEX
======================================== */

.section-index {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom:
        clamp(70px, 8vw, 125px);

    color: #6f7474;

    font-size: 9px;

    letter-spacing: .17em;

    text-transform: uppercase;
}

.section-index span {
    color: var(--red);
}

.section-index p {
    margin: 0;
}

.section-index--light {
    color: #848888;
}


/* ========================================
   INTRO
======================================== */

.intro {
    background: #f0f0ed;
    color: #0b0c0c;
}

.intro__layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, .75fr);

    gap: clamp(60px, 10vw, 180px);
}

.intro__title h2,
.section-heading h2,
.products__heading h2,
.capabilities__heading h2,
.trust__heading h2 {

    margin: 0;

    font-size:
        clamp(44px, 5.3vw, 85px);

    font-weight: 450;

    letter-spacing: -.055em;

    line-height: .98;
}

.intro__copy {
    align-self: end;
}

.intro__copy p {
    margin: 0 0 28px;

    color: #3f4343;

    font-size:
        clamp(15px, 1.2vw, 18px);

    line-height: 1.75;
}

.intro__line {
    width: 100%;
    height: 1px;

    margin: 45px 0 20px;

    background: rgba(0,0,0,.16);
}

.intro__copy > span {
    color: #777b7b;

    font-size: 8px;

    letter-spacing: .18em;
}


/* ========================================
   DOMAINS
======================================== */

.domains {
    position: relative;

    background: var(--black);
}

.section-heading {
    margin-bottom:
        clamp(70px, 9vw, 140px);
}

.section-heading h2 {
    color: #f0f0ed;
}

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

.domain {
    position: relative;

    border-bottom: 1px solid var(--line);

    overflow: hidden;

    cursor: default;
}

.domain::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(210, 13, 23, .09),
            transparent 55%
        );

    opacity: 0;

    transition: opacity .35s ease;
}

.domain:hover::before {
    opacity: 1;
}

.domain__inner {
    position: relative;

    min-height: 190px;

    display: grid;

    grid-template-columns:
        110px
        1fr
        minmax(300px, 480px);

    align-items: center;

    gap: 40px;

    z-index: 2;
}

.domain__number {
    color: var(--red);

    font-size: 10px;
}

.domain__name span {
    color: #646969;

    font-size: 8px;

    letter-spacing: .18em;
}

.domain__name h3 {
    margin: 12px 0 0;

    font-size:
        clamp(32px, 4vw, 65px);

    font-weight: 450;

    letter-spacing: -.045em;
}

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

    gap: 40px;
}

.domain__description p {
    max-width: 340px;

    margin: 0;

    color: #868a8a;

    font-size: 13px;

    line-height: 1.7;
}

.domain__arrow {
    margin-left: auto;

    color: #585c5c;

    font-size: 22px;

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

.domain:hover .domain__arrow {
    color: var(--red);

    transform:
        translate(4px, -4px);
}

.domain-preview {
    position: fixed;

    width: min(360px, 28vw);
    aspect-ratio: 1.15;

    top: 0;
    left: 0;

    z-index: 25;

    opacity: 0;

    overflow: hidden;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(.96);

    transition:
        opacity .18s ease,
        transform .25s ease;
}

.domain-preview.is-visible {
    opacity: 1;

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

.domain-preview img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.65)
        contrast(1.08);
}


/* ========================================
   NETWORK
======================================== */

.network {
    position: relative;

    background:
        #090a0a;

    overflow: hidden;
}

.network__background {
    position: absolute;
    inset: 0;

    opacity: .18;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(255, 0, 20, .08),
            transparent 38%
        );
}

.network__layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        .75fr
        1.25fr;

    gap: 80px;

    align-items: center;
}

.network__content h2 {
    margin: 0;

    font-size:
        clamp(50px, 6vw, 94px);

    font-weight: 430;

    letter-spacing: -.055em;

    line-height: .94;
}

.network__content > p:last-child {
    max-width: 440px;

    margin-top: 38px;

    color: #818686;

    font-size: 14px;

    line-height: 1.75;
}

.network__map {
    min-height: 570px;
}

.map {
    position: relative;

    width: 100%;
    height: 570px;

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

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #0d0f0f,
            #070808
        );
}

.map::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 47% 64%,
            rgba(210, 13, 23, .12),
            transparent 12%
        );
}

.map__grid {
    position: absolute;
    inset: 0;

    opacity: .28;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}

.map__node {
    position: absolute;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #777c7c;

    font-size: 8px;

    letter-spacing: .13em;
}

.map__node i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #646969;
}

.map__node--hk {
    left: 46%;
    top: 62%;

    color: #fff;
}

.map__node--hk i {
    background: var(--red);

    box-shadow:
        0 0 18px rgba(255, 20, 30, .8);
}

.map__node--cn {
    left: 30%;
    top: 35%;
}

.map__node--tw {
    left: 65%;
    top: 55%;
}

.map__node--kr {
    left: 70%;
    top: 30%;
}

.map__node--jp {
    left: 80%;
    top: 16%;
}

.map__line {
    position: absolute;

    left: 47%;
    top: 63%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(210,13,23,.7),
            rgba(210,13,23,0)
        );

    transform-origin: left center;
}

.map__line--1 {
    width: 180px;

    transform: rotate(-135deg);
}

.map__line--2 {
    width: 145px;

    transform: rotate(-15deg);
}

.map__line--3 {
    width: 260px;

    transform: rotate(-44deg);
}

.map__line--4 {
    width: 360px;

    transform: rotate(-49deg);
}

.map__pulse {
    position: absolute;

    left: calc(47% - 20px);
    top: calc(63% - 20px);

    width: 40px;
    height: 40px;

    border:
        1px solid rgba(255, 30, 40, .5);

    border-radius: 50%;

    animation:
        mapPulse 2.8s ease-out infinite;
}

@keyframes mapPulse {
    0% {
        opacity: 1;
        transform: scale(.2);
    }

    100% {
        opacity: 0;
        transform: scale(2.6);
    }
}

.network__footer {
    position: relative;

    z-index: 2;

    display: grid;

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

    margin-top: 90px;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.network__footer > div {
    min-height: 105px;

    padding: 22px;

    border-right: 1px solid var(--line);
}

.network__footer > div:last-child {
    border-right: 0;
}

.network__footer span {
    color: var(--red);

    font-size: 8px;
}

.network__footer p {
    margin: 20px 0 0;

    font-size: 12px;
}


/* ========================================
   PRODUCTS
======================================== */

.products {
    background: #eeeeeb;
    color: #090a0a;
}

.products__heading {
    margin-bottom:
        clamp(70px, 9vw, 130px);
}

.products__matrix {
    display: grid;

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

    border-top:
        1px solid rgba(0,0,0,.16);

    border-bottom:
        1px solid rgba(0,0,0,.16);
}

.product-column {
    min-height: 500px;

    padding:
        32px
        clamp(24px, 3vw, 48px);

    border-right:
        1px solid rgba(0,0,0,.16);
}

.product-column:first-child {
    padding-left: 0;
}

.product-column:last-child {
    border-right: 0;
}

.product-column__number {
    color: var(--red);

    font-size: 9px;
}

.product-column h3 {
    margin: 65px 0 70px;

    font-size:
        clamp(30px, 3vw, 48px);

    font-weight: 500;

    letter-spacing: -.04em;
}

.product-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.product-column li {
    padding: 16px 0;

    border-top:
        1px solid rgba(0,0,0,.11);

    color: #494d4d;

    font-size: 13px;
}

.product-column li:last-child {
    border-bottom:
        1px solid rgba(0,0,0,.11);
}


/* ========================================
   CAPABILITIES
======================================== */

.capabilities {
    background: #0a0b0b;
}

.capabilities__layout {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: clamp(80px, 10vw, 170px);
}

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

.capability {
    display: grid;

    grid-template-columns:
        70px 1fr;

    padding: 35px 0;

    border-bottom: 1px solid var(--line);
}

.capability > span {
    color: var(--red);

    font-size: 9px;
}

.capability h3 {
    margin: 0;

    font-size: 20px;
    font-weight: 500;
}

.capability p {
    max-width: 460px;

    margin: 14px 0 0;

    color: #777c7c;

    font-size: 13px;

    line-height: 1.75;
}


/* ========================================
   HONG KONG
======================================== */

.hongkong {
    position: relative;

    min-height: 82vh;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.hongkong__image {
    position: absolute;
    inset: 0;

    background:
        url("assets/hong-kong.webp")
        center / cover no-repeat;

    transform: scale(1.01);
}

.hongkong__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,6,6,.93),
            rgba(5,6,6,.48) 50%,
            rgba(5,6,6,.1)
        ),
        linear-gradient(
            0deg,
            rgba(5,6,6,.68),
            transparent 50%
        );
}

.hongkong__content {
    position: relative;

    z-index: 4;
}

.hongkong__small {
    display: block;

    margin-bottom: 40px;

    color: #848888;

    font-size: 9px;
    letter-spacing: .18em;
}

.hongkong h2 {
    margin: 0;

    font-size:
        clamp(56px, 7vw, 112px);

    font-weight: 420;

    letter-spacing: -.06em;

    line-height: .9;
}

.hongkong p {
    margin: 45px 0 0;

    color: #adafaf;

    font-size: 14px;

    line-height: 1.8;
}

.laser--hk {
    position: absolute;

    width: 70vw;
    height: 1px;

    right: -10vw;
    bottom: 33%;

    z-index: 3;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--red),
            transparent
        );

    opacity: .45;

    transform: rotate(-7deg);
}


/* ========================================
   TRUST
======================================== */

.trust {
    background: #efefec;
    color: #0b0c0c;
}

.trust__layout {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: clamp(80px, 12vw, 190px);
}

.trust__items {
    border-top:
        1px solid rgba(0,0,0,.15);
}

.trust-item {
    display: grid;

    grid-template-columns:
        70px 1fr;

    align-items: center;

    min-height: 94px;

    border-bottom:
        1px solid rgba(0,0,0,.15);
}

.trust-item span {
    color: var(--red);

    font-size: 9px;
}

.trust-item p {
    margin: 0;

    font-size: 14px;
}


/* ========================================
   CONTACT
======================================== */

.contact {
    position: relative;

    background: #070808;

    overflow: hidden;
}

.contact__grid {
    position: absolute;
    inset: 0;

    opacity: .14;

    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;
}

.contact__layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: clamp(70px, 11vw, 180px);
}

.contact__heading h2 {
    margin: 0;

    font-size:
        clamp(56px, 6vw, 95px);

    font-weight: 430;

    line-height: .92;

    letter-spacing: -.055em;
}

.contact__heading > p:not(.kicker) {
    max-width: 420px;

    margin-top: 36px;

    color: #777c7c;

    font-size: 14px;

    line-height: 1.75;
}

.contact__emails {
    display: flex;
    flex-direction: column;

    gap: 20px;

    margin-top: 55px;
}

.contact__emails a {
    display: flex;
    flex-direction: column;

    gap: 4px;

    font-size: 13px;
}

.contact__emails span {
    color: #666a6a;

    font-size: 8px;

    letter-spacing: .15em;
}

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

.field {
    padding: 23px 0;

    border-bottom: 1px solid var(--line);
}

.field label {
    display: block;

    margin-bottom: 12px;

    color: #707575;

    font-size: 8px;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.field input,
.field textarea {
    width: 100%;

    padding: 0;

    border: 0;
    outline: none;

    resize: vertical;

    color: #fff;
    background: transparent;

    font-size: 15px;
}

.field input::placeholder,
.field textarea::placeholder {
    color: #464a4a;
}

.rfq__row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 40px;
}

.rfq__submit {
    margin-top: 35px;
}

.rfq__message {
    min-height: 20px;

    margin: 20px 0 0;

    color: #929696;

    font-size: 12px;
}


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

.footer {
    padding: 65px 0 35px;

    background: #050606;

    border-top: 1px solid var(--line);
}

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

    padding-bottom: 65px;
}

.footer__top-link {
    color: #6f7373;

    font-size: 9px;

    letter-spacing: .15em;

    transition: color .2s ease;
}

.footer__top-link:hover {
    color: #fff;
}

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

    padding-top: 25px;

    border-top: 1px solid var(--line);

    color: #5e6262;

    font-size: 8px;

    letter-spacing: .12em;
}


/* ========================================
   REVEAL ANIMATION
======================================== */

.reveal {
    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity .75s var(--ease),
        transform .75s var(--ease);
}

.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}

.reveal--delay {
    transition-delay: .15s;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1100px) {

    .nav {
        position: fixed;

        inset: 0;

        z-index: 40;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 25px;

        padding:
            100px
            var(--padding);

        background: rgba(6, 7, 7, .98);

        opacity: 0;
        visibility: hidden;

        transform:
            translateY(-15px);

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

    .nav.is-open {
        opacity: 1;
        visibility: visible;

        transform:
            translateY(0);
    }

    .nav a {
        font-size:
            clamp(30px, 6vw, 56px);

        letter-spacing: -.04em;
    }

    .menu-button {
        display: block;

        z-index: 60;
    }

    .header__location {
        display: none;
    }

    .hero__meta {
        display: none;
    }

    .hero__content {
        width: 80%;
    }

    .domain-preview {
        display: none;
    }

}


@media (max-width: 900px) {

    .intro__layout,
    .network__layout,
    .capabilities__layout,
    .trust__layout,
    .contact__layout {

        grid-template-columns: 1fr;

        gap: 75px;
    }

    .domain__inner {
        grid-template-columns:
            55px
            1fr;

        gap: 25px;

        padding-block: 30px;
    }

    .domain__description {
        grid-column: 2 / -1;
    }

    .network__map {
        min-height: 470px;
    }

    .map {
        height: 470px;
    }

    .products__matrix {
        grid-template-columns: 1fr;
    }

    .product-column {
        min-height: auto;

        padding: 45px 0;

        border-right: 0;
        border-bottom:
            1px solid rgba(0,0,0,.16);
    }

    .product-column:last-child {
        border-bottom: 0;
    }

    .product-column h3 {
        margin: 35px 0 45px;
    }

}


@media (max-width: 650px) {

    .header__inner {
        height: 72px;
    }

    .brand__text {
        font-size: 12px;
    }

    .hero__container {
        justify-content: flex-end;

        padding-bottom: 125px;
    }

    .hero__content {
        width: 100%;
    }

    .hero__image {
        background-position: 64% center;
    }

    .hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(5,6,6,.98) 0%,
                rgba(5,6,6,.88) 42%,
                rgba(5,6,6,.25) 100%
            );
    }

    .hero h1 {
        font-size:
            clamp(54px, 17vw, 84px);
    }

    .hero__description {
        font-size: 13px;
    }

    .hero__actions {
        align-items: flex-start;
        flex-direction: column;

        gap: 25px;
    }

    .hero__bottom-inner span:first-child,
    .hero__bottom-inner span:last-child {
        display: none;
    }

    .hero__bottom-inner {
        justify-content: center;
    }

    .section-index {
        margin-bottom: 65px;
    }

    .intro__title h2,
    .section-heading h2,
    .products__heading h2,
    .capabilities__heading h2,
    .trust__heading h2 {

        font-size:
            clamp(42px, 12vw, 64px);
    }

    .domain__inner {
        min-height: 180px;

        grid-template-columns:
            40px 1fr;
    }

    .domain__description p {
        font-size: 12px;
    }

    .domain__arrow {
        display: none;
    }

    .network__map {
        min-height: 390px;
    }

    .map {
        height: 390px;
    }

    .network__footer {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .network__footer > div {
        border-bottom: 1px solid var(--line);
    }

    .rfq__row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .hongkong {
        min-height: 70vh;
    }

    .hongkong h2 {
        font-size:
            clamp(54px, 16vw, 80px);
    }

    .footer__top {
        align-items: flex-start;
        flex-direction: column;

        gap: 35px;
    }

    .footer__bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 10px;
    }

}


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

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

}