:root {
    --opening-blue: #52d5ff;
    --opening-ice: #dff8ff;
    --opening-night: #03080d;
}

html:has(body[data-page="home"]) {
    overflow-x: clip;
}

body[data-page="home"] {
    overflow-x: clip;
    overflow-y: visible;
}

body[data-page="home"] .site-header {
    mix-blend-mode: normal;
}

body[data-page="home"] .site-noise {
    display: none;
}

body[data-page="home"] .page-signal,
body[data-page="home"] .whatsapp-fab {
    transition: opacity .35s ease, transform .35s var(--ease), visibility .35s;
}

body[data-page="home"].is-opening-finale .page-signal,
body[data-page="home"].is-opening-finale .whatsapp-fab {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body[data-page="home"].is-opening-finale .whatsapp-fab {
    transform: translate3d(0, 18px, 0);
}

body[data-page="home"] .fluid-header.is-fixed {
    background: rgba(7, 16, 25, .98);
    backdrop-filter: none;
}

body[data-page="home"] main {
    overflow: visible;
}

.engineering-opening {
    --opening-progress: 0;
    --opening-one: 1;
    --opening-two: 0;
    --opening-three: 0;
    --opening-canvas-opacity: 1;
    --opening-transition: 0;
    --opening-transition-scale: .18;
    --opening-transition-wash: 0;
    --opening-light-a-x: 0;
    --opening-light-a-y: 0;
    --opening-light-b-x: 0;
    --opening-light-b-y: 0;
    --finale-reveal: 0;
    --finale-dim: 0;
    --opening-hud-opacity: 1;
    position: relative;
    z-index: 2;
    height: 390svh;
    color: #fff;
    background: var(--opening-night);
}

.opening-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    min-height: 680px;
    overflow: hidden;
    background: #050b10;
    isolation: isolate;
}

.opening-sticky::after {
    position: absolute;
    z-index: 10;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    content: "";
    pointer-events: none;
    opacity: var(--opening-transition);
    background: linear-gradient(90deg, transparent 3%, rgba(196, 243, 255, .94) 50%, transparent 97%);
    box-shadow: 0 0 30px rgba(71, 208, 249, .78);
    transform: scaleX(var(--opening-transition-scale));
}

.opening-viewport,
.opening-viewport canvas,
.opening-depth,
.opening-scan {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.opening-viewport {
    z-index: -4;
    overflow: hidden;
    opacity: var(--opening-canvas-opacity);
    background: #050b10;
    transform: none;
    transition: opacity .16s linear;
}

.opening-viewport canvas {
    display: block;
    filter: none;
}

.engineering-opening[data-render-quality="balanced"] .opening-viewport canvas {
    filter: saturate(1.04) contrast(1.015);
}

.engineering-opening[data-render-quality="high"] .opening-viewport canvas {
    filter: saturate(1.12) contrast(1.045) brightness(1.025);
}

.opening-depth {
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at 58% 49%, transparent 0 26%, rgba(2, 7, 11, .14) 53%, rgba(2, 7, 11, .84) 100%),
        linear-gradient(90deg, rgba(2, 7, 11, .9) 0%, rgba(2, 7, 11, .54) 31%, rgba(2, 7, 11, .05) 67%, rgba(2, 7, 11, .34) 100%),
        linear-gradient(0deg, rgba(2, 7, 11, .72) 0%, transparent 28%, transparent 72%, rgba(2, 7, 11, .42) 100%);
}

.opening-depth::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: var(--finale-dim);
    background: radial-gradient(ellipse 46% 30% at 50% 44%, rgba(2, 7, 11, .03) 0 42%, rgba(2, 7, 11, .7) 76%, rgba(2, 7, 11, .94) 100%);
}

.opening-depth::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: var(--opening-transition-wash);
    background: linear-gradient(90deg, transparent, rgba(89, 216, 252, .6), transparent);
}

.opening-scan {
    z-index: 3;
    pointer-events: none;
    opacity: .22;
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .055) 0, rgba(255, 255, 255, .055) 1px, transparent 1px, transparent 4px);
    mix-blend-mode: soft-light;
}

.opening-scan::before {
    position: absolute;
    top: calc(-10% + var(--opening-progress) * 110%);
    right: 0;
    left: 0;
    height: 1px;
    content: "";
    opacity: .72;
    background: linear-gradient(90deg, transparent 10%, rgba(115, 226, 255, .78) 50%, transparent 90%);
    box-shadow: 0 0 30px rgba(75, 207, 255, .6);
}

.opening-light {
    position: absolute;
    z-index: 1;
    width: 34vw;
    height: 34vw;
    border-radius: 50%;
    pointer-events: none;
    filter: none;
    opacity: .12;
}

.opening-light-a {
    right: -10vw;
    top: 11vh;
    background: radial-gradient(circle, rgba(66, 203, 255, .82), rgba(66, 203, 255, 0) 70%);
    transform: none;
}

.opening-light-b {
    left: 21vw;
    bottom: -24vw;
    background: radial-gradient(circle, rgba(39, 164, 206, .68), rgba(39, 164, 206, 0) 70%);
    opacity: .08;
    transform: none;
}

.engineering-opening[data-render-quality="high"] .opening-light {
    opacity: .18;
    filter: blur(48px);
    mix-blend-mode: screen;
    will-change: transform;
}

.engineering-opening[data-render-quality="high"] .opening-light-a {
    transform: translate3d(var(--opening-light-a-x), var(--opening-light-a-y), 0);
}

.engineering-opening[data-render-quality="high"] .opening-light-b {
    transform: translate3d(var(--opening-light-b-x), var(--opening-light-b-y), 0);
}

.engineering-opening[data-render-quality="low"] .opening-scan {
    display: none;
}

.opening-interface {
    position: absolute;
    z-index: 6;
    inset: 0;
    pointer-events: none;
    color: rgba(219, 246, 255, .58);
    font: 700 8px/1.2 "Space Grotesk", sans-serif;
    letter-spacing: .16em;
    opacity: var(--opening-hud-opacity);
}

.opening-interface-top {
    position: absolute;
    top: 124px;
    right: max(24px, calc((100vw - var(--container)) / 2));
    left: max(24px, calc((100vw - var(--container)) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(174, 230, 246, .18);
}

.opening-interface-top span:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
}

.opening-interface-top i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8ae76f;
    box-shadow: 0 0 14px rgba(138, 231, 111, .7);
}

.opening-axis {
    position: absolute;
    opacity: .23;
    background: var(--opening-blue);
}

.opening-axis::after {
    position: absolute;
    content: "";
    background: var(--opening-blue);
    box-shadow: 0 0 18px rgba(82, 213, 255, .74);
}

.opening-axis-x {
    right: 4vw;
    bottom: 18vh;
    width: 24vw;
    height: 1px;
}

.opening-axis-x::after {
    right: calc((1 - var(--opening-progress)) * 100%);
    top: -3px;
    width: 7px;
    height: 7px;
}

.opening-axis-y {
    right: 10vw;
    top: 24vh;
    width: 1px;
    height: 24vh;
}

.opening-axis-y::after {
    left: -3px;
    top: calc(var(--opening-progress) * 100%);
    width: 7px;
    height: 7px;
}

.opening-corner {
    position: absolute;
    width: 46px;
    height: 46px;
    border-color: rgba(118, 217, 246, .32);
}

.opening-corner-a {
    left: 26px;
    top: 49%;
    border-top: 1px solid;
    border-left: 1px solid;
}

.opening-corner-b {
    right: 26px;
    bottom: 24%;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

.opening-story {
    position: relative;
    z-index: 7;
    height: 100%;
    pointer-events: none;
}

.opening-beat {
    --beat-opacity: 0;
    --beat-shift: 36px;
    --beat-reveal: 0;
    --beat-hidden: 100%;
    --beat-head-x: -26px;
    --beat-copy-y: 18px;
    position: absolute;
    top: 50%;
    left: 0;
    width: min(1050px, 75vw);
    opacity: var(--beat-opacity);
    transform: translate3d(0, calc(-50% + var(--beat-shift)), 0);
    will-change: opacity, transform;
}

.opening-beat-one {
    --beat-opacity: var(--opening-one);
}

.opening-beat-two {
    --beat-opacity: var(--opening-two);
    right: 0;
    left: auto;
    width: min(930px, 67vw);
    text-align: right;
}

.opening-beat-three {
    --beat-opacity: var(--opening-three);
    width: min(900px, 58vw);
}

.opening-beat > p:first-child {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0 0 27px;
    color: rgba(224, 245, 251, .62);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.opening-beat-two > p:first-child {
    justify-content: flex-end;
}

.opening-beat > p:first-child span {
    color: var(--opening-blue);
}

.opening-beat h1,
.opening-beat h2 {
    max-width: none;
    margin: 0;
    color: #f5fbfd;
    font-family: "Manrope", sans-serif;
    font-size: clamp(60px, min(6vw, 10.5vh), 106px);
    font-weight: 500;
    letter-spacing: -.075em;
    line-height: .86;
    text-wrap: balance;
    text-shadow: 0 20px 80px rgba(0, 0, 0, .38);
    clip-path: inset(0 var(--beat-hidden) 0 0);
    transform: translate3d(var(--beat-head-x), 0, 0);
}

.opening-beat-two h2 {
    clip-path: inset(0 0 0 var(--beat-hidden));
}

.opening-beat h1 em,
.opening-beat h2 em {
    color: var(--opening-blue);
    font-family: "Newsreader", Georgia, serif;
    font-weight: 400;
    letter-spacing: -.045em;
}

.opening-beat-foot {
    display: grid;
    grid-template-columns: minmax(260px, 510px) auto;
    align-items: end;
    gap: 50px;
    margin-top: 34px;
}

.opening-beat-foot > p {
    margin: 0;
    color: rgba(231, 246, 250, .68);
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.7;
}

.opening-beat-copy {
    max-width: 650px;
    margin: 32px 0 0;
    color: rgba(231, 246, 250, .72);
    font-size: clamp(16px, 1.18vw, 19px);
    line-height: 1.7;
}

.opening-beat-two .opening-beat-copy {
    margin-left: auto;
}

.opening-beat > p:first-child,
.opening-beat-foot,
.opening-beat-copy,
.opening-disciplines,
.opening-cta {
    opacity: var(--beat-reveal);
    transform: translate3d(0, var(--beat-copy-y), 0);
}

.opening-beat-foot a,
.opening-cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-width: 156px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(226, 246, 251, .48);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
    pointer-events: auto;
    text-transform: uppercase;
}

.opening-beat-foot a span,
.opening-cta span {
    color: var(--opening-blue);
    font-size: 17px;
}

.opening-disciplines {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 38px;
    color: rgba(234, 248, 252, .76);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.opening-disciplines i {
    width: 24px;
    height: 1px;
    background: rgba(103, 213, 245, .6);
}

.opening-cta {
    min-width: 230px;
    margin-top: 42px;
}

.opening-telemetry {
    position: absolute;
    z-index: 8;
    bottom: 31px;
    left: max(24px, calc((100vw - var(--container)) / 2));
    display: grid;
    width: min(740px, calc(100vw - 330px));
    grid-template-columns: minmax(260px, 1.45fr) minmax(180px, .85fr) 92px;
    border-top: 1px solid rgba(185, 230, 243, .2);
    color: #fff;
    opacity: var(--opening-hud-opacity);
    transition: opacity .25s ease;
}

.opening-telemetry > div {
    min-width: 0;
    padding: 15px 20px 0 0;
}

.opening-telemetry > div + div {
    padding-left: 20px;
    border-left: 1px solid rgba(185, 230, 243, .16);
}

.opening-telemetry span,
.opening-telemetry small {
    display: block;
    overflow: hidden;
    color: rgba(197, 228, 237, .47);
    font: 700 7px/1.3 "Space Grotesk", sans-serif;
    letter-spacing: .13em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.opening-telemetry b {
    display: block;
    overflow: hidden;
    margin: 8px 0 5px;
    color: rgba(244, 252, 255, .92);
    font: 600 10px/1.25 "Space Grotesk", sans-serif;
    letter-spacing: .035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opening-status > div {
    height: 1px;
    margin-top: 11px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
}

.opening-status > div i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--opening-blue);
    box-shadow: 0 0 12px rgba(82, 213, 255, .85);
    transition: width .18s linear;
}

.opening-cycle b {
    color: var(--opening-blue);
    font-size: 22px;
    line-height: 1;
}

.opening-progress {
    position: absolute;
    z-index: 8;
    right: max(24px, calc((100vw - var(--container)) / 2));
    bottom: 104px;
    display: grid;
    width: 208px;
    grid-template-columns: 1fr auto auto;
    align-items: end;
    gap: 7px;
    color: rgba(220, 241, 247, .46);
    font: 700 7px/1 "Space Grotesk", sans-serif;
    letter-spacing: .14em;
    opacity: var(--opening-hud-opacity);
}

.opening-progress > span {
    grid-column: 1 / 4;
}

.opening-progress > div {
    height: 1px;
    margin-bottom: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, .18);
}

.opening-progress > div i {
    display: block;
    width: calc(var(--opening-progress) * 100%);
    height: 100%;
    background: var(--opening-blue);
}

.opening-progress b {
    color: #fff;
    font-size: 16px;
}

.opening-progress small {
    padding-bottom: 1px;
    font-size: 8px;
}

body[data-page="home"] .engineering-opening + .cinematic-hero {
    position: relative;
    z-index: 3;
    margin-top: -1px;
}

body[data-page="home"] .engineering-opening + .cinematic-hero::before {
    position: absolute;
    z-index: 6;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(84, 213, 251, .64), transparent);
    box-shadow: 0 0 32px rgba(84, 213, 251, .28);
}

/* Larger, calmer corporate type scale across the home page. */
body[data-page="home"] .fluid-header .primary-nav > a,
body[data-page="home"] .fluid-header .nav-dropdown > button,
body[data-page="home"] .fluid-header .nav-cta {
    font-size: 12px;
}

body[data-page="home"] .hero-motion-title {
    max-width: 1120px;
    font-size: clamp(60px, 5.7vw, 98px);
    line-height: .92;
}

body[data-page="home"] .cinematic-lead {
    max-width: 760px;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.72;
}

body[data-page="home"] .section-heading-row h2,
body[data-page="home"] .about-precision h2,
body[data-page="home"] .home-contact-fluid h2 {
    font-size: clamp(48px, 5.45vw, 86px);
    line-height: .96;
}

body[data-page="home"] .section-heading-row > p,
body[data-page="home"] .about-precision-copy > p:not(.section-label),
body[data-page="home"] .home-contact-copy > p:not(.section-label) {
    font-size: clamp(17px, 1.22vw, 19px);
}

body[data-page="home"] .service-card-copy h3 {
    font-size: clamp(31px, 2.65vw, 45px);
}

body[data-page="home"] .service-card-copy p {
    font-size: 15.5px;
    line-height: 1.72;
}

body[data-page="home"] .work-frame span,
body[data-page="home"] .line-link {
    font-size: 11.5px;
}

@media (max-height: 900px) and (min-width: 981px) {
    .opening-beat {
        top: 48.5%;
    }

    .opening-beat > p:first-child {
        margin-bottom: 18px;
    }

    .opening-beat-foot {
        margin-top: 22px;
    }

    .opening-telemetry,
    .opening-progress {
        bottom: 20px;
    }

    .opening-telemetry > div {
        padding-top: 12px;
    }
}

@media (max-width: 980px) {
    body[data-page="home"] .fluid-header .primary-nav > a,
    body[data-page="home"] .fluid-header .nav-dropdown > button {
        font-size: clamp(24px, 4.6vw, 34px);
    }

    .engineering-opening {
        height: 350svh;
    }

    .opening-beat,
    .opening-beat-two,
    .opening-beat-three {
        right: auto;
        left: 0;
        width: min(760px, calc(100vw - 48px));
        text-align: left;
    }

    .opening-beat-two > p:first-child,
    .opening-disciplines {
        justify-content: flex-start;
    }

    .opening-telemetry {
        width: calc(100vw - 310px);
        grid-template-columns: minmax(220px, 1fr) 92px;
    }

    .opening-product {
        display: none;
    }
}

@media (max-width: 680px) {
    .engineering-opening {
        height: 330svh;
    }

    .opening-sticky {
        min-height: 620px;
    }

    .opening-interface-top {
        top: 100px;
        right: 16px;
        left: 16px;
    }

    .opening-interface-top span:last-child,
    .opening-axis,
    .opening-corner,
    .opening-product,
    .opening-cycle {
        display: none;
    }

    .opening-depth {
        background:
            linear-gradient(90deg, rgba(2, 7, 11, .84) 0%, rgba(2, 7, 11, .52) 58%, rgba(2, 7, 11, .18) 100%),
            linear-gradient(0deg, rgba(2, 7, 11, .82) 0%, transparent 36%, rgba(2, 7, 11, .3) 100%);
    }

    .opening-story {
        width: calc(100% - 32px);
    }

    .opening-beat,
    .opening-beat-two,
    .opening-beat-three {
        width: 100%;
    }

    .opening-beat {
        top: 46%;
    }

    .opening-beat h1,
    .opening-beat h2 {
        font-size: clamp(52px, 15vw, 72px);
        line-height: .9;
    }

    .opening-beat > p:first-child {
        margin-bottom: 20px;
        font-size: 7px;
    }

    .opening-beat-foot {
        display: block;
        margin-top: 26px;
    }

    .opening-beat-foot > p {
        max-width: 88%;
        font-size: 13px;
    }

    .opening-beat-copy {
        max-width: 92%;
        margin-top: 22px;
        font-size: 13px;
        line-height: 1.62;
    }

    .opening-beat-two .opening-beat-copy {
        margin-left: 0;
    }

    .opening-beat-foot a {
        width: 154px;
        margin-top: 22px;
    }

    .opening-disciplines {
        flex-wrap: wrap;
        gap: 9px;
        margin-top: 26px;
        font-size: 7px;
    }

    .opening-disciplines i {
        width: 12px;
    }

    .opening-telemetry {
        bottom: 26px;
        left: 16px;
        width: calc(100% - 125px);
        grid-template-columns: 1fr;
    }

    .opening-telemetry > div {
        padding-right: 12px;
    }

    .opening-progress {
        right: 16px;
        bottom: 26px;
        width: 88px;
    }

    .opening-progress > span {
        display: none;
    }

    .opening-progress > div {
        grid-column: 1 / 2;
    }

    body[data-page="home"] .hero-motion-title {
        font-size: clamp(44px, 11.5vw, 58px);
    }

    body[data-page="home"] .cinematic-lead {
        font-size: 16px;
    }

    body[data-page="home"] .section-heading-row h2,
    body[data-page="home"] .about-precision h2,
    body[data-page="home"] .home-contact-fluid h2 {
        font-size: clamp(43px, 11vw, 58px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .engineering-opening {
        height: 220svh;
    }

    .opening-viewport,
    .opening-light {
        transform: none !important;
    }

    .opening-scan {
        display: none;
    }
}