/* ==========================================================================
   SERVICE PAGE
   Part 1 of 7
   Global variables, reset, base layout, typography and visual foundations
   ========================================================================== */

/* ==========================================================================
   1. ROOT VARIABLES
   ========================================================================== */

:root {
    --color-black: #000000;
    --color-background: #030303;
    --color-background-soft: #080808;
    --color-background-raised: #0c0c0c;

    --color-white: #ffffff;
    --color-text: #f4f4f4;
    --color-text-soft: #b5b5b5;
    --color-text-muted: #777777;
    --color-text-dark: #292929;

    --color-border: rgba(255, 255, 255, 0.11);
    --color-border-soft: rgba(255, 255, 255, 0.06);
    --color-border-bright: rgba(255, 255, 255, 0.22);

    --color-surface: rgba(255, 255, 255, 0.025);
    --color-surface-hover: rgba(255, 255, 255, 0.055);
    --color-glass: rgba(12, 12, 12, 0.72);

    --shadow-soft:
        0 20px 60px rgba(0, 0, 0, 0.45);

    --shadow-deep:
        0 40px 120px rgba(0, 0, 0, 0.7);

    --shadow-light:
        0 0 80px rgba(255, 255, 255, 0.08);

    --font-primary:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-display:
        "Manrope",
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --container-width: 1480px;
    --container-padding: clamp(22px, 4vw, 72px);

    --header-height: 94px;

    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-large: 30px;
    --radius-pill: 999px;

    --transition-fast:
        180ms cubic-bezier(0.22, 1, 0.36, 1);

    --transition-medium:
        420ms cubic-bezier(0.22, 1, 0.36, 1);

    --transition-slow:
        800ms cubic-bezier(0.16, 1, 0.3, 1);

    --ease-cinematic:
        cubic-bezier(0.16, 1, 0.3, 1);

    --ease-expo:
        cubic-bezier(0.19, 1, 0.22, 1);

    --z-background: -10;
    --z-canvas: 0;
    --z-content: 5;
    --z-header: 50;
    --z-overlay: 100;
    --z-loader: 500;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

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

html {
    min-height: 100%;
    background: var(--color-background);
    color-scheme: dark;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255, 255, 255, 0.035),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #030303 0%,
            #020202 50%,
            #000000 100%
        );

    color: var(--color-text);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
}

body.is-loading {
    overflow: hidden;
}

body.menu-open {
    overflow: hidden;
}

main,
header,
footer,
section,
article,
aside,
nav {
    display: block;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

button,
input,
textarea,
select {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
}

button,
select {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.9);
    outline-offset: 5px;
}

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

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure {
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
}

::selection {
    background: rgba(255, 255, 255, 0.92);
    color: #000000;
}

/* ==========================================================================
   3. GLOBAL PAGE STRUCTURE
   ========================================================================== */

.service-page {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
}

.service-page::before {
    position: fixed;
    z-index: -20;
    inset: 0;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(255, 255, 255, 0.018),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.01),
            transparent 25%
        );
    pointer-events: none;
    content: "";
}

main {
    position: relative;
    z-index: var(--z-content);
}

section {
    position: relative;
}

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

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 18px;
    left: 18px;
    padding: 12px 18px;
    border: 1px solid var(--color-border-bright);
    border-radius: var(--radius-pill);
    background: #ffffff;
    color: #000000;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transform: translateY(-180%);
    transition: transform var(--transition-medium);
}

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

/* ==========================================================================
   4. TYPOGRAPHY UTILITIES
   ========================================================================== */

.section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border-soft);
    color: var(--color-text-muted);
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

.section-label span:last-child {
    text-align: right;
}

.split-text {
    will-change: transform, opacity, filter;
}

.reveal-element {
    will-change: transform, opacity, filter;
}

.js .split-text,
.js .reveal-element {
    opacity: 0;
}

.no-js .split-text,
.no-js .reveal-element {
    opacity: 1;
}

/* ==========================================================================
   5. GLOBAL VISUAL LAYERS
   ========================================================================== */

.noise-layer {
    position: fixed;
    z-index: 80;
    inset: -50%;
    width: 200%;
    height: 200%;
    opacity: 0.035;
    pointer-events: none;
    transform: translateZ(0);

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

    animation: noise-shift 0.24s steps(2) infinite;
}

.vignette-layer {
    position: fixed;
    z-index: 75;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            transparent 32%,
            rgba(0, 0, 0, 0.38) 75%,
            rgba(0, 0, 0, 0.86) 100%
        );
}

.cursor-glow {
    position: fixed;
    z-index: 45;
    top: 0;
    left: 0;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform:
        translate3d(-50%, -50%, 0)
        scale(0.8);

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.065) 0%,
            rgba(255, 255, 255, 0.022) 32%,
            transparent 72%
        );

    filter: blur(4px);
    transition:
        opacity 500ms ease,
        transform 500ms var(--ease-cinematic);
    will-change: transform;
}

body.has-pointer .cursor-glow {
    opacity: 1;
    transform:
        translate3d(-50%, -50%, 0)
        scale(1);
}

/* ==========================================================================
   6. WEBGL CANVAS
   ========================================================================== */

.webgl-canvas {
    position: fixed;
    z-index: var(--z-canvas);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    pointer-events: none;
    touch-action: none;
}

.webgl-fallback {
    position: fixed;
    z-index: 90;
    right: 24px;
    bottom: 24px;
    width: min(360px, calc(100vw - 48px));
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: rgba(8, 8, 8, 0.88);
    box-shadow: var(--shadow-soft);
    color: var(--color-text-soft);
    font-size: 0.82rem;
    line-height: 1.55;
    backdrop-filter: blur(16px);
}

/* ==========================================================================
   7. PAGE LOADER
   ========================================================================== */

.page-loader {
    position: fixed;
    z-index: var(--z-loader);
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 45%,
            #0b0b0b 0%,
            #030303 36%,
            #000000 78%
        );

    color: #ffffff;
    transition:
        opacity 900ms var(--ease-cinematic),
        visibility 900ms var(--ease-cinematic);
}

.page-loader.is-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.page-loader::before {
    position: absolute;
    inset: 0;
    opacity: 0.34;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent calc(20% - 1px),
            rgba(255, 255, 255, 0.025) 20%
        );
    content: "";
}

.page-loader::after {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at center,
            transparent 0%,
            rgba(0, 0, 0, 0.36) 55%,
            rgba(0, 0, 0, 0.92) 100%
        );
    content: "";
}

.page-loader__spotlight {
    position: absolute;
    z-index: 1;
    top: -30%;
    left: 50%;
    width: min(980px, 90vw);
    height: 120%;
    opacity: 0.72;
    pointer-events: none;
    transform: translateX(-50%) perspective(800px) rotateX(18deg);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.17) 0%,
            rgba(255, 255, 255, 0.035) 30%,
            transparent 76%
        );

    clip-path:
        polygon(
            44% 0%,
            56% 0%,
            88% 100%,
            12% 100%
        );

    filter: blur(20px);
    animation: loader-spotlight 5s ease-in-out infinite alternate;
}

.page-loader__content {
    position: relative;
    z-index: 3;
    width: min(500px, calc(100vw - 48px));
}

.page-loader__brand {
    display: block;
    margin-bottom: 26px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.45rem);
    font-weight: 600;
    letter-spacing: 0.34em;
    line-height: 1;
    text-align: center;
}

.page-loader__progress {
    position: relative;
    width: 100%;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
}

.page-loader__progress::after {
    position: absolute;
    top: -4px;
    right: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    opacity: 0;
    background: #ffffff;
    box-shadow:
        0 0 18px rgba(255, 255, 255, 0.8);
    content: "";
}

.page-loader__progress-bar {
    display: block;
    width: 0%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.25),
            rgba(255, 255, 255, 1)
        );

    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.46);

    transition: width 280ms ease;
}

.page-loader__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 13px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
}

#loader-percentage {
    min-width: 38px;
    color: rgba(255, 255, 255, 0.88);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ==========================================================================
   8. SCROLLBAR
   ========================================================================== */

* {
    scrollbar-color:
        rgba(255, 255, 255, 0.22)
        #050505;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    border: 2px solid #050505;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   9. FIXED SCROLL PROGRESS
   ========================================================================== */

.scroll-progress {
    position: fixed;
    z-index: 40;
    top: 50%;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    transform: translateY(-50%);
}

.scroll-progress__label {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.scroll-progress__track {
    position: relative;
    display: block;
    width: 1px;
    height: 120px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
}

.scroll-progress__bar {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 0%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.55);
    transform-origin: top;
}

.section-counter {
    position: fixed;
    z-index: 40;
    right: 30px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, 0.48);
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#current-section-number {
    min-width: 18px;
    color: rgba(255, 255, 255, 0.95);
    text-align: right;
}

.section-counter__divider {
    width: 24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.24);
}

/* ==========================================================================
   10. MAGNETIC BUTTON FOUNDATION
   ========================================================================== */

.magnetic-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: translateZ(0);
    transition:
        border-color var(--transition-medium),
        background-color var(--transition-medium),
        color var(--transition-medium),
        box-shadow var(--transition-medium);
    will-change: transform;
}

.magnetic-button::before {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
    content: "";
    transform:
        translate(-50%, -50%)
        scale(0);
    transition: transform 650ms var(--ease-cinematic);
}

.magnetic-button:hover::before {
    transform:
        translate(-50%, -50%)
        scale(1);
}

/* ==========================================================================
   11. JAVASCRIPT WARNING
   ========================================================================== */

.javascript-warning {
    position: fixed;
    z-index: 1000;
    right: 18px;
    bottom: 18px;
    width: min(420px, calc(100vw - 36px));
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: #111111;
    color: #dddddd;
    font-size: 0.8rem;
    line-height: 1.5;
    box-shadow: var(--shadow-soft);
}

/* ==========================================================================
   12. EARLY GLOBAL RESPONSIVE RULES
   ========================================================================== */

@media (max-width: 1024px) {
    :root {
        --header-height: 82px;
    }

    .scroll-progress {
        right: 14px;
    }

    .section-counter {
        right: 18px;
    }
}

@media (max-width: 767px) {
    :root {
        --container-padding: 20px;
        --header-height: 74px;
    }

    .noise-layer {
        opacity: 0.022;
    }

    .cursor-glow {
        display: none;
    }

    .scroll-progress,
    .section-counter {
        display: none;
    }

    .section-label {
        gap: 18px;
        padding-bottom: 16px;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .page-loader__content {
        width: calc(100vw - 40px);
    }

    .page-loader__brand {
        margin-bottom: 22px;
        letter-spacing: 0.23em;
    }
}

@media (hover: none), (pointer: coarse) {
    .cursor-glow {
        display: none !important;
    }
}

/* ==========================================================================
   13. TEMPORARY KEYFRAMES USED BY PART 1
   ========================================================================== */

@keyframes noise-shift {
    0% {
        transform: translate3d(-2%, -3%, 0);
    }

    20% {
        transform: translate3d(3%, 1%, 0);
    }

    40% {
        transform: translate3d(-4%, 4%, 0);
    }

    60% {
        transform: translate3d(5%, -2%, 0);
    }

    80% {
        transform: translate3d(-1%, 5%, 0);
    }

    100% {
        transform: translate3d(2%, -4%, 0);
    }
}

@keyframes loader-spotlight {
    0% {
        opacity: 0.45;
        transform:
            translateX(-53%)
            perspective(800px)
            rotateX(18deg)
            rotateZ(-2deg);
    }

    100% {
        opacity: 0.8;
        transform:
            translateX(-47%)
            perspective(800px)
            rotateX(18deg)
            rotateZ(2deg);
    }
}

/* ==========================================================================
   SERVICE PAGE
   Part 2 of 7
   Header, navigation, hero section and introduction
   ========================================================================== */

/* ==========================================================================
   14. SITE HEADER
   ========================================================================== */

.site-header {
    position: fixed;
    z-index: var(--z-header);
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    border-bottom: 1px solid transparent;
    transition:
        height var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        backdrop-filter var(--transition-medium),
        transform var(--transition-medium);
}

.site-header.is-scrolled {
    height: 76px;
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(3, 3, 3, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header.is-hidden {
    transform: translateY(-110%);
}

.site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );
    height: 100%;
    margin-inline: auto;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 12px;
    width: fit-content;
}

.site-logo__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.025) 42%,
            transparent 70%
        );
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.04),
        0 0 30px rgba(255, 255, 255, 0.025);
}

.site-logo__text {
    color: rgba(255, 255, 255, 0.94);
    font-family: var(--font-display);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    line-height: 1;
}

.primary-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 3.2vw, 50px);
}

.primary-navigation a {
    position: relative;
    padding-block: 8px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.primary-navigation a::after {
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.92);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 380ms var(--ease-cinematic);
}

.primary-navigation a:hover,
.primary-navigation a.is-active {
    color: rgba(255, 255, 255, 0.98);
}

.primary-navigation a:hover::after,
.primary-navigation a.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-cta {
    justify-self: end;
    gap: 16px;
    min-height: 44px;
    padding: 0 18px 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.header-cta:hover {
    border-color: #ffffff;
    color: #000000;
    box-shadow:
        0 12px 36px rgba(255, 255, 255, 0.12);
}

.header-cta svg {
    flex: 0 0 auto;
    transition: transform var(--transition-medium);
}

.header-cta:hover svg {
    transform: translateX(4px);
}

.menu-toggle {
    display: none;
    position: relative;
    justify-self: end;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.025);
}

.menu-toggle span {
    position: absolute;
    left: 50%;
    width: 17px;
    height: 1px;
    background: rgba(255, 255, 255, 0.95);
    transform: translateX(-50%);
    transition:
        top var(--transition-medium),
        transform var(--transition-medium);
}

.menu-toggle span:first-child {
    top: 18px;
}

.menu-toggle span:last-child {
    top: 25px;
}

.menu-toggle[aria-expanded="true"] span:first-child {
    top: 21px;
    transform:
        translateX(-50%)
        rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
    top: 21px;
    transform:
        translateX(-50%)
        rotate(-45deg);
}

/* ==========================================================================
   15. HERO SECTION
   ========================================================================== */

.service-hero {
    min-height: 100svh;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.008),
            transparent 18%
        );
}

.service-hero::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(255, 255, 255, 0.032),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.35) 70%,
            #020202 100%
        );
    content: "";
}

.service-hero__container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100svh;
    padding-top: calc(var(--header-height) + clamp(50px, 8vh, 100px));
    padding-bottom: clamp(38px, 5vh, 70px);
}

.service-hero__spotlight {
    position: absolute;
    z-index: -1;
    top: -34%;
    left: 50%;
    width: min(1380px, 116vw);
    height: 132%;
    opacity: 0.78;
    pointer-events: none;
    transform:
        translateX(-50%)
        perspective(1000px)
        rotateX(15deg);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.07) 19%,
            rgba(255, 255, 255, 0.018) 50%,
            transparent 80%
        );

    clip-path:
        polygon(
            45.5% 0%,
            54.5% 0%,
            84% 100%,
            16% 100%
        );

    filter: blur(32px);
    transform-origin: top center;
    will-change: transform, opacity;
}

.service-hero__spotlight::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );
    content: "";
    filter: blur(24px);
    mix-blend-mode: screen;
}

.service-hero__spotlight::after {
    position: absolute;
    right: 18%;
    bottom: 10%;
    left: 18%;
    height: 11%;
    border-radius: 50%;
    opacity: 0.65;
    background:
        radial-gradient(
            ellipse,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.025) 38%,
            transparent 72%
        );
    content: "";
    filter: blur(22px);
}

.service-hero__ambient {
    position: absolute;
    z-index: -3;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.service-hero__orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0.3;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.025) 32%,
            transparent 72%
        );
    filter: blur(14px);
}

.service-hero__orb--one {
    top: 12%;
    left: -14%;
    width: 52vw;
    min-width: 420px;
    aspect-ratio: 1;
    animation:
        hero-orb-one 14s ease-in-out infinite alternate;
}

.service-hero__orb--two {
    right: -18%;
    bottom: -28%;
    width: 62vw;
    min-width: 520px;
    aspect-ratio: 1;
    opacity: 0.2;
    animation:
        hero-orb-two 18s ease-in-out infinite alternate;
}

/* ==========================================================================
   16. HERO EYEBROW
   ========================================================================== */

.service-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    width: fit-content;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    line-height: 1;
    text-transform: uppercase;
}



/* ==========================================================================
   17. HERO TITLE
   ========================================================================== */

.service-hero__title-wrap {
    position: relative;
    width: 100%;
    margin-block: auto;
    padding-block: clamp(30px, 4vh, 70px);
}

.service-hero__title {
    position: relative;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    font-size: clamp(6.5rem, 18vw, 18rem);
    font-weight: 600;
    letter-spacing: -0.085em;
    line-height: 0.68;
    text-transform: uppercase;
    perspective: 1200px;
}

.service-hero__title::before {
    position: absolute;
    top: 48%;
    right: -10%;
    left: -10%;
    height: 1px;
    opacity: 0.34;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.12),
            transparent
        );
    content: "";
}

.service-hero__title-line {
    position: relative;
    display: block;
    align-self: flex-start;
    overflow: hidden;
    padding: 0.09em 0.08em 0.15em 0;
}

.service-hero__title-line--offset {
    align-self: flex-end;
    margin-top: 0.08em;
    padding-right: 0;
    padding-left: 0.08em;
}

.service-hero__title-word {
    display: block;
    color: transparent;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f0f0f0 38%,
            #9e9e9e 78%,
            #4b4b4b 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    filter:
        drop-shadow(0 12px 38px rgba(255, 255, 255, 0.06));
    transform-origin: 50% 100%;
    will-change: transform, opacity, filter;
}

.service-hero__title-line:first-child .service-hero__title-word {
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.5),
        0 20px 70px rgba(255, 255, 255, 0.04);
}

.service-hero__title-line--offset .service-hero__title-word {
    background:
        linear-gradient(
            180deg,
            #f5f5f5 0%,
            #bdbdbd 46%,
            #646464 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
}

/* ==========================================================================
   18. HERO FOOTER
   ========================================================================== */

.service-hero__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(30px, 8vw, 130px);
}

.service-hero__description {
    width: min(520px, 44vw);
    color: rgba(255, 255, 255, 0.58);
    font-size: clamp(0.95rem, 1.2vw, 1.08rem);
    line-height: 1.75;
}

.hero-scroll-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    flex: 0 0 auto;
}

.hero-scroll-link__text {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.hero-scroll-link__circle {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 40% 30%,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.015) 58%
        );
    transition:
        border-color var(--transition-medium),
        background-color var(--transition-medium),
        color var(--transition-medium),
        transform var(--transition-medium);
}

.hero-scroll-link__circle::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #ffffff;
    content: "";
    transform: translateY(-105%);
    transition: transform 520ms var(--ease-cinematic);
}

.hero-scroll-link__circle svg {
    position: relative;
    z-index: 2;
    animation:
        scroll-arrow 1.8s ease-in-out infinite;
}

.hero-scroll-link:hover .hero-scroll-link__text {
    color: rgba(255, 255, 255, 0.96);
}

.hero-scroll-link:hover .hero-scroll-link__circle {
    border-color: #ffffff;
    color: #000000;
    transform: scale(1.05);
}

.hero-scroll-link:hover .hero-scroll-link__circle::before {
    transform: translateY(0);
}

/* ==========================================================================
   19. HERO COORDINATES
   ========================================================================== */

.service-hero__coordinates {
    position: absolute;
    right: var(--container-padding);
    bottom: clamp(105px, 12vh, 150px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    color: rgba(255, 255, 255, 0.24);
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* ==========================================================================
   20. INTRODUCTION SECTION
   ========================================================================== */

.services-introduction {
    min-height: 94vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #020202 0%,
            #050505 52%,
            #030303 100%
        );
}

.services-introduction::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(255, 255, 255, 0.032),
            transparent 28%
        ),
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.009),
            transparent
        );
    content: "";
}

.services-introduction::after {
    position: absolute;
    right: -14vw;
    bottom: -28vw;
    width: 58vw;
    min-width: 520px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    box-shadow:
        inset 0 0 80px rgba(255, 255, 255, 0.015),
        0 0 120px rgba(255, 255, 255, 0.01);
    content: "";
}

.services-introduction__container {
    position: relative;
    z-index: 2;
    padding-block: clamp(120px, 16vh, 220px);
}

.services-introduction__content {
    display: grid;
    grid-template-columns:
        minmax(180px, 0.7fr)
        minmax(0, 2.3fr);
    gap: clamp(50px, 8vw, 130px);
    align-items: start;
    margin-top: clamp(70px, 10vh, 140px);
}

.services-introduction__small-copy {
    max-width: 260px;
    padding-top: 10px;
    color: rgba(255, 255, 255, 0.44);
    font-size: 0.78rem;
    line-height: 1.7;
}

.services-introduction__title {
    max-width: 1080px;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(3.1rem, 6.2vw, 7.8rem);
    font-weight: 500;
    letter-spacing: -0.058em;
    line-height: 0.98;
}

.services-introduction__line {
    width: 100%;
    height: 1px;
    margin-top: clamp(80px, 12vh, 150px);
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.02),
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.02)
        );
    transform: scaleX(0);
    transform-origin: left;
}

/* ==========================================================================
   21. HOVER AND MOTION DETAILS
   ========================================================================== */

.site-logo:hover .site-logo__mark {
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 0.075),
        0 0 30px rgba(255, 255, 255, 0.045);
}

.site-logo:hover .site-logo__text {
    color: #ffffff;
}

/* ==========================================================================
   22. HERO KEYFRAMES
   ========================================================================== */

@keyframes hero-orb-one {
    0% {
        transform:
            translate3d(-4%, -2%, 0)
            scale(0.92);
    }

    100% {
        transform:
            translate3d(12%, 9%, 0)
            scale(1.08);
    }
}

@keyframes hero-orb-two {
    0% {
        transform:
            translate3d(4%, 6%, 0)
            scale(0.9);
    }

    100% {
        transform:
            translate3d(-12%, -5%, 0)
            scale(1.12);
    }
}

@keyframes scroll-arrow {
    0%,
    100% {
        transform: translateY(-3px);
    }

    50% {
        transform: translateY(4px);
    }
}

/* ==========================================================================
   23. TABLET ADJUSTMENTS
   ========================================================================== */

@media (max-width: 1180px) {
    .site-header__inner {
        grid-template-columns: 1fr auto;
    }

    .primary-navigation {
        display: none;
    }

    .header-cta {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .service-hero__title {
        font-size: clamp(6rem, 19vw, 13rem);
    }

    .service-hero__footer {
        padding-right: 70px;
    }

    .services-introduction__content {
        grid-template-columns:
            minmax(150px, 0.55fr)
            minmax(0, 2.2fr);
    }
}

/* ==========================================================================
   24. MOBILE HERO AND INTRODUCTION
   ========================================================================== */

@media (max-width: 767px) {
    .site-header.is-scrolled {
        height: 68px;
    }

    .site-header__inner {
        width: calc(100% - 40px);
    }

    .site-logo {
        gap: 10px;
    }

    .site-logo__mark {
        width: 31px;
        height: 31px;
        font-size: 0.56rem;
    }

    .site-logo__text {
        font-size: 0.76rem;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }

    .menu-toggle span:first-child {
        top: 16px;
    }

    .menu-toggle span:last-child {
        top: 23px;
    }

    .menu-toggle[aria-expanded="true"] span:first-child,
    .menu-toggle[aria-expanded="true"] span:last-child {
        top: 19px;
    }

    .service-hero {
        min-height: 100svh;
    }

    .service-hero__container {
        min-height: 100svh;
        padding-top: calc(var(--header-height) + 40px);
        padding-bottom: 28px;
    }

    .service-hero__eyebrow {
        gap: 12px;
        margin-left: 0;
        font-size: 0.57rem;
        letter-spacing: 0.13em;
    }

    

    .service-hero__title-wrap {
        margin-block: auto;
        padding-block: 30px;
    }

    .service-hero__title {
        font-size: clamp(5.1rem, 28vw, 8.4rem);
        line-height: 0.74;
        letter-spacing: -0.09em;
    }

    .service-hero__title-line {
        padding-right: 0.03em;
    }

    .service-hero__title-line--offset {
        margin-top: 0.16em;
        padding-left: 0.02em;
    }

    .service-hero__footer {
        align-items: flex-start;
        gap: 26px;
        padding-right: 0;
    }

    .service-hero__description {
        width: auto;
        max-width: 310px;
        font-size: 0.82rem;
        line-height: 1.65;
    }

    .hero-scroll-link {
        gap: 10px;
    }

    .hero-scroll-link__text {
        display: none;
    }

    .hero-scroll-link__circle {
        width: 46px;
        height: 46px;
    }

    .service-hero__coordinates {
        display: none;
    }

    .service-hero__spotlight {
        top: -20%;
        width: 190vw;
        height: 112%;
        opacity: 0.62;
        clip-path:
            polygon(
                47% 0%,
                53% 0%,
                88% 100%,
                12% 100%
            );
        filter: blur(24px);
    }

    .services-introduction {
        min-height: auto;
    }

    .services-introduction__container {
        padding-block: 100px 120px;
    }

    .services-introduction__content {
        display: block;
        margin-top: 62px;
    }

    .services-introduction__small-copy {
        max-width: 280px;
        margin-bottom: 36px;
        padding-top: 0;
        font-size: 0.72rem;
    }

    .services-introduction__title {
        font-size: clamp(2.75rem, 12vw, 4.8rem);
        line-height: 1;
    }

    .services-introduction__line {
        margin-top: 76px;
    }

    .services-introduction::after {
        right: -70vw;
        bottom: -50vw;
        width: 130vw;
    }
}

@media (max-width: 420px) {
    .service-hero__title {
        font-size: clamp(4.5rem, 27vw, 7rem);
    }

    .service-hero__description {
        max-width: 265px;
    }
}

/* ==========================================================================
   SERVICE PAGE
   Part 3 of 7
   Sticky service panels, 3D object zones and cinematic section transitions
   ========================================================================== */

/* ==========================================================================
   25. SERVICES SHOWCASE WRAPPER
   ========================================================================== */

.services-showcase {
    position: relative;
    z-index: 2;
    background: #020202;
}

.services-showcase::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.006),
            transparent 24%,
            transparent 76%,
            rgba(255, 255, 255, 0.006)
        );
    pointer-events: none;
    content: "";
}

/* ==========================================================================
   26. SERVICE PANEL FOUNDATION
   ========================================================================== */

.service-panel {
    position: relative;
    min-height: 220vh;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
    background: #020202;
}

.service-panel:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.service-panel__sticky {
    position: sticky;
    top: 0;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

.service-panel__container {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100svh;
    padding-top: calc(var(--header-height) + 34px);
    padding-bottom: 30px;
}

/* ==========================================================================
   27. SERVICE PANEL BACKGROUND
   ========================================================================== */

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

.service-panel__background::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.012),
            transparent 24%,
            transparent 72%,
            rgba(255, 255, 255, 0.008)
        );
    content: "";
}

.service-panel__glow {
    position: absolute;
    top: 50%;
    left: 66%;
    width: min(860px, 72vw);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.28;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.19) 0%,
            rgba(255, 255, 255, 0.06) 24%,
            rgba(255, 255, 255, 0.012) 46%,
            transparent 72%
        );
    filter: blur(26px);
    will-change: transform, opacity;
}

.service-panel__grid {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );
    background-size: 84px 84px;
    mask-image:
        radial-gradient(
            circle at 67% 50%,
            #000000 0%,
            transparent 66%
        );
    -webkit-mask-image:
        radial-gradient(
            circle at 67% 50%,
            #000000 0%,
            transparent 66%
        );
    transform: perspective(900px) rotateX(64deg) scale(1.7);
    transform-origin: center bottom;
}

.service-panel__shadow {
    position: absolute;
    right: 8%;
    bottom: 2%;
    width: 50%;
    height: 17%;
    border-radius: 50%;
    opacity: 0.78;
    background:
        radial-gradient(
            ellipse,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.72) 38%,
            transparent 76%
        );
    filter: blur(22px);
}

.service-panel:nth-child(even) .service-panel__glow {
    left: 35%;
}

.service-panel:nth-child(even) .service-panel__grid {
    mask-image:
        radial-gradient(
            circle at 35% 50%,
            #000000 0%,
            transparent 66%
        );
    -webkit-mask-image:
        radial-gradient(
            circle at 35% 50%,
            #000000 0%,
            transparent 66%
        );
}

.service-panel:nth-child(even) .service-panel__shadow {
    right: auto;
    left: 8%;
}

/* ==========================================================================
   28. SERVICE PANEL TOP META
   ========================================================================== */

.service-panel__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.service-panel__number,
.service-panel__eyebrow,
.service-panel__status {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
}

.service-panel__number {
    color: rgba(255, 255, 255, 0.94);
    font-variant-numeric: tabular-nums;
}

.service-panel__eyebrow {
    color: rgba(255, 255, 255, 0.38);
}

.service-panel__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    justify-self: end;
    color: rgba(255, 255, 255, 0.46);
}

.service-panel__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 0 14px rgba(255, 255, 255, 0.44);
    animation: service-status-pulse 2.2s ease-in-out infinite;
}

/* ==========================================================================
   29. SERVICE PANEL MAIN LAYOUT
   ========================================================================== */

.service-panel__body {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.88fr)
        minmax(420px, 1.42fr);
    align-items: center;
    gap: clamp(70px, 10vw, 170px);
    flex: 1;
    padding-block: clamp(52px, 7vh, 90px);
}

.service-panel:nth-child(even) .service-panel__copy {
    order: 2;
}

.service-panel:nth-child(even) .service-panel__visual {
    order: 1;
}

.service-panel__copy {
    position: relative;
    z-index: 8;
    max-width: 590px;
}



.service-panel__title {
    color: #ffffff;
    font-size: clamp(4.2rem, 7.6vw, 10rem);
    font-weight: 500;
    letter-spacing: -0.068em;
    line-height: 0.9;
    text-wrap: balance;
}

.service-panel__description {
    max-width: 500px;
    margin-top: clamp(28px, 4vh, 44px);
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(0.92rem, 1.2vw, 1.08rem);
    line-height: 1.8;
}

/* ==========================================================================
   30. SERVICE LINK
   ========================================================================== */

.service-panel__link {
    gap: 22px;
    margin-top: clamp(34px, 5vh, 56px);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.94);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.service-panel__link::before {
    display: none;
}

.service-panel__link::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: #ffffff;
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 500ms var(--ease-cinematic);
}

.service-panel__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.service-panel__link-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    transition:
        transform var(--transition-medium),
        background-color var(--transition-medium),
        color var(--transition-medium),
        border-color var(--transition-medium);
}

.service-panel__link:hover .service-panel__link-icon {
    border-color: #ffffff;
    background: #ffffff;
    color: #000000;
    transform: translateX(5px);
}

/* ==========================================================================
   31. 3D VISUAL ZONE
   ========================================================================== */

.service-panel__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: min(68vh, 760px);
    perspective: 1200px;
}

.service-panel__visual::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(580px, 44vw);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
    box-shadow:
        inset 0 0 80px rgba(255, 255, 255, 0.015),
        0 0 100px rgba(255, 255, 255, 0.012);
}

.service-panel__visual::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(430px, 34vw);
    aspect-ratio: 1;
    border: 1px dashed rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
    animation: service-ring-spin 38s linear infinite;
}

.service-panel__visual-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(680px, 52vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(255, 255, 255, 0.04) 44deg,
            transparent 82deg,
            rgba(255, 255, 255, 0.08) 162deg,
            transparent 208deg,
            rgba(255, 255, 255, 0.025) 300deg,
            transparent 360deg
        );
    mask-image:
        radial-gradient(
            circle,
            transparent 59%,
            #000000 60%,
            #000000 61.5%,
            transparent 62.5%
        );
    -webkit-mask-image:
        radial-gradient(
            circle,
            transparent 59%,
            #000000 60%,
            #000000 61.5%,
            transparent 62.5%
        );
    transform: translate(-50%, -50%);
    animation: service-ring-spin-reverse 46s linear infinite;
}

.service-panel__object-anchor {
    position: relative;
    z-index: 5;
    width: min(700px, 50vw);
    height: min(620px, 58vh);
    pointer-events: none;
}

.service-panel__object-anchor::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.34;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.025) 36%,
            transparent 74%
        );
    content: "";
    transform: translate(-50%, -50%);
    filter: blur(18px);
}

.service-panel__visual-label {
    position: absolute;
    z-index: 7;
    right: 0;
    bottom: 11%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
}

.service-panel__visual-label span:first-child {
    color: rgba(255, 255, 255, 0.86);
}

/* ==========================================================================
   32. SERVICE PANEL BOTTOM PROGRESS
   ========================================================================== */

.service-panel__bottom {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    color: rgba(255, 255, 255, 0.34);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
}

.service-panel__progress {
    position: relative;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
}

.service-panel__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 0 14px rgba(255, 255, 255, 0.34);
}

/* ==========================================================================
   33. INDIVIDUAL PANEL ATMOSPHERES
   ========================================================================== */

.service-panel[data-object="laptop"] .service-panel__background {
    background:
        radial-gradient(
            circle at 67% 52%,
            rgba(190, 205, 255, 0.035),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #020202,
            #050505 50%,
            #020202
        );
}

.service-panel[data-object="phone"] .service-panel__background {
    background:
        radial-gradient(
            circle at 34% 50%,
            rgba(210, 220, 255, 0.032),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #020202,
            #040404 48%,
            #010101
        );
}

.service-panel[data-object="server"] .service-panel__background {
    background:
        radial-gradient(
            circle at 67% 50%,
            rgba(180, 210, 255, 0.028),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #010101,
            #060606 50%,
            #010101
        );
}

.service-panel[data-object="ai-core"] .service-panel__background {
    background:
        radial-gradient(
            circle at 35% 50%,
            rgba(230, 235, 255, 0.035),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #020202,
            #050505 46%,
            #000000
        );
}

/* ==========================================================================
   34. PANEL EDGE LIGHTS
   ========================================================================== */

.service-panel::before,
.service-panel::after {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    width: 1px;
    opacity: 0.24;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, 0.18) 28%,
            rgba(255, 255, 255, 0.06) 68%,
            transparent
        );
    pointer-events: none;
    content: "";
}

.service-panel::before {
    left: var(--container-padding);
}

.service-panel::after {
    right: var(--container-padding);
}

/* ==========================================================================
   35. PANEL ACTIVE STATES
   ========================================================================== */

.service-panel.is-active .service-panel__glow {
    opacity: 0.42;
}

.service-panel.is-active .service-panel__visual-label span:first-child {
    text-shadow:
        0 0 18px rgba(255, 255, 255, 0.18);
}

.service-panel.is-active .service-panel__status-dot {
    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   36. SERVICE PANEL HOVER DETAILS
   ========================================================================== */

.service-panel__copy:hover .service-panel__title {
    text-shadow:
        0 0 54px rgba(255, 255, 255, 0.035);
}

.service-panel__visual:hover .service-panel__visual-ring {
    animation-duration: 24s;
}

/* ==========================================================================
   37. SERVICE PANEL KEYFRAMES
   ========================================================================== */

@keyframes service-status-pulse {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.85);
    }

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

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

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

@keyframes service-ring-spin-reverse {
    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

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

/* ==========================================================================
   38. LARGE DESKTOP ADJUSTMENTS
   ========================================================================== */

@media (min-width: 1600px) {
    .service-panel__body {
        grid-template-columns:
            minmax(420px, 0.9fr)
            minmax(620px, 1.5fr);
    }

    .service-panel__visual {
        min-height: 720px;
    }

    .service-panel__object-anchor {
        width: 760px;
        height: 660px;
    }
}

/* ==========================================================================
   39. TABLET SERVICE PANELS
   ========================================================================== */

@media (max-width: 1180px) {
    .service-panel {
        min-height: 190vh;
    }

    .service-panel__container {
        padding-top: calc(var(--header-height) + 26px);
    }

    .service-panel__body {
        grid-template-columns:
            minmax(260px, 0.88fr)
            minmax(360px, 1.18fr);
        gap: 50px;
    }

    .service-panel__title {
        font-size: clamp(3.8rem, 7vw, 7.3rem);
    }

    .service-panel__visual {
        min-height: 58vh;
    }

    .service-panel__object-anchor {
        width: 46vw;
        height: 50vh;
    }

    .service-panel__visual-label {
        right: 10px;
    }
}

/* ==========================================================================
   40. MOBILE SERVICE PANELS
   ========================================================================== */

@media (max-width: 767px) {
    .service-panel {
        min-height: 160vh;
    }

    .service-panel__sticky {
        min-height: 100svh;
    }

    .service-panel__container {
        min-height: 100svh;
        padding-top: calc(var(--header-height) + 22px);
        padding-bottom: 20px;
    }

    .service-panel__top {
        grid-template-columns: auto 1fr;
        gap: 16px;
        padding-bottom: 14px;
    }

    .service-panel__status {
        display: none;
    }

    .service-panel__number,
    .service-panel__eyebrow {
        font-size: 0.55rem;
        letter-spacing: 0.12em;
    }

    .service-panel__body {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 18px;
        padding-block: 24px;
    }

    .service-panel:nth-child(even) .service-panel__copy,
    .service-panel:nth-child(even) .service-panel__visual {
        order: initial;
    }

    .service-panel__copy {
        max-width: none;
    }

    

    .service-panel__title {
        font-size: clamp(3.1rem, 15vw, 5.3rem);
        line-height: 0.92;
    }

    .service-panel__description {
        max-width: 340px;
        margin-top: 20px;
        font-size: 0.78rem;
        line-height: 1.65;
    }

    .service-panel__link {
        gap: 14px;
        margin-top: 24px;
        padding-bottom: 9px;
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }

    .service-panel__link-icon {
        width: 25px;
        height: 25px;
    }

    .service-panel__visual {
        min-height: 35vh;
        margin-top: 4px;
    }

    .service-panel__visual::before {
        width: 74vw;
    }

    .service-panel__visual::after {
        width: 58vw;
    }

    .service-panel__visual-ring {
        width: 88vw;
    }

    .service-panel__object-anchor {
        width: 88vw;
        height: 34vh;
        max-height: 330px;
    }

    .service-panel__visual-label {
        right: 0;
        bottom: 1%;
        gap: 5px;
        font-size: 0.48rem;
    }

    .service-panel__bottom {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        padding-top: 14px;
        font-size: 0.48rem;
        letter-spacing: 0.1em;
    }

    .service-panel__glow {
        top: 63%;
        left: 50%;
        width: 110vw;
    }

    .service-panel:nth-child(even) .service-panel__glow {
        left: 50%;
    }

    .service-panel__grid {
        background-size: 54px 54px;
        mask-image:
            radial-gradient(
                circle at 50% 64%,
                #000000 0%,
                transparent 64%
            );
        -webkit-mask-image:
            radial-gradient(
                circle at 50% 64%,
                #000000 0%,
                transparent 64%
            );
    }

    .service-panel:nth-child(even) .service-panel__grid {
        mask-image:
            radial-gradient(
                circle at 50% 64%,
                #000000 0%,
                transparent 64%
            );
        -webkit-mask-image:
            radial-gradient(
                circle at 50% 64%,
                #000000 0%,
                transparent 64%
            );
    }

    .service-panel__shadow,
    .service-panel:nth-child(even) .service-panel__shadow {
        right: 10%;
        bottom: 10%;
        left: 10%;
        width: auto;
        height: 12%;
    }

    .service-panel::before,
    .service-panel::after {
        display: none;
    }
}

@media (max-width: 420px) {
    .service-panel__title {
        font-size: clamp(2.8rem, 14.6vw, 4.5rem);
    }

    .service-panel__visual {
        min-height: 31vh;
    }

    .service-panel__object-anchor {
        height: 30vh;
    }

    .service-panel__bottom > span:first-child {
        display: none;
    }

    .service-panel__bottom {
        grid-template-columns: 1fr auto;
    }
}

/* ==========================================================================
   SERVICE PAGE
   Part 4 of 7
   Capabilities and process sections
   ========================================================================== */

/* ==========================================================================
   41. CAPABILITIES SECTION
   ========================================================================== */

.capabilities-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #020202 0%,
            #050505 45%,
            #030303 100%
        );
}

.capabilities-section::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(255, 255, 255, 0.028),
            transparent 28%
        ),
        radial-gradient(
            circle at 86% 78%,
            rgba(255, 255, 255, 0.024),
            transparent 30%
        );
    pointer-events: none;
    content: "";
}

.capabilities-section::after {
    position: absolute;
    top: 10%;
    right: -20%;
    width: 58vw;
    min-width: 620px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.025);
    border-radius: 50%;
    box-shadow:
        inset 0 0 100px rgba(255, 255, 255, 0.01),
        0 0 140px rgba(255, 255, 255, 0.008);
    pointer-events: none;
    content: "";
}

.capabilities-section__container {
    position: relative;
    z-index: 2;
    padding-block: clamp(130px, 17vh, 230px);
}

.capabilities-section__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(280px, 0.65fr);
    gap: clamp(60px, 9vw, 150px);
    align-items: end;
    margin-top: clamp(70px, 10vh, 140px);
}

.capabilities-section__title {
    max-width: 950px;
    color: rgba(255, 255, 255, 0.96);
    font-size: clamp(3.6rem, 7vw, 8.8rem);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 0.94;
}

.capabilities-section__intro {
    max-width: 410px;
    padding-bottom: 10px;
    color: rgba(255, 255, 255, 0.48);
    font-size: clamp(0.88rem, 1vw, 1rem);
    line-height: 1.8;
}

/* ==========================================================================
   42. CAPABILITIES GRID
   ========================================================================== */

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(90px, 12vh, 150px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.capability-card {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    padding: clamp(30px, 3vw, 48px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.018),
            rgba(255, 255, 255, 0.004)
        );
    transition:
        background-color var(--transition-medium),
        transform var(--transition-medium),
        box-shadow var(--transition-medium);
    isolation: isolate;
}

.capability-card::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(255, 255, 255, 0.11),
            transparent 34%
        );
    content: "";
    transition: opacity 520ms var(--ease-cinematic);
}

.capability-card::after {
    position: absolute;
    z-index: -2;
    top: 50%;
    left: 50%;
    width: 180%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.04),
            transparent 60%
        );
    content: "";
    transform:
        translate(-50%, -50%)
        scale(0.55);
    opacity: 0;
    transition:
        transform 700ms var(--ease-cinematic),
        opacity 700ms var(--ease-cinematic);
}

.capability-card:hover {
    background: rgba(255, 255, 255, 0.028);
    box-shadow:
        inset 0 0 70px rgba(255, 255, 255, 0.015);
    transform: translateY(-4px);
}

.capability-card:hover::before {
    opacity: 1;
}

.capability-card:hover::after {
    opacity: 1;
    transform:
        translate(-50%, -50%)
        scale(1);
}

.capability-card__number {
    display: block;
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1;
}

.capability-card__content {
    position: absolute;
    right: clamp(30px, 3vw, 48px);
    bottom: clamp(30px, 3vw, 48px);
    left: clamp(30px, 3vw, 48px);
}

.capability-card__content h3 {
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.8rem, 2.6vw, 3.2rem);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 1;
}

.capability-card__content p {
    max-width: 360px;
    margin-top: 22px;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.82rem;
    line-height: 1.7;
    transition: color var(--transition-medium);
}

.capability-card:hover .capability-card__content p {
    color: rgba(255, 255, 255, 0.6);
}

.capability-card__corner {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 22px;
    height: 22px;
}

.capability-card__corner::before,
.capability-card__corner::after {
    position: absolute;
    background: rgba(255, 255, 255, 0.18);
    content: "";
    transition:
        background-color var(--transition-medium),
        transform var(--transition-medium);
}

.capability-card__corner::before {
    top: 0;
    right: 0;
    width: 100%;
    height: 1px;
    transform-origin: right;
}

.capability-card__corner::after {
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    transform-origin: top;
}

.capability-card:hover .capability-card__corner::before,
.capability-card:hover .capability-card__corner::after {
    background: rgba(255, 255, 255, 0.72);
}

.capability-card:hover .capability-card__corner::before {
    transform: scaleX(1.4);
}

.capability-card:hover .capability-card__corner::after {
    transform: scaleY(1.4);
}

/* ==========================================================================
   43. PROCESS SECTION
   ========================================================================== */

.process-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #030303 0%,
            #050505 50%,
            #010101 100%
        );
}

.process-section::before {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 62vw;
    min-width: 680px;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.38;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.012) 34%,
            transparent 70%
        );
    filter: blur(24px);
    pointer-events: none;
    content: "";
}

.process-section::after {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px
        );
    background-size: 100% 92px;
    mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000000 15%,
            #000000 85%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000000 15%,
            #000000 85%,
            transparent
        );
    pointer-events: none;
    content: "";
}

.process-section__container {
    position: relative;
    z-index: 2;
    padding-block: clamp(130px, 18vh, 240px);
}

.process-section__layout {
    display: grid;
    grid-template-columns:
        minmax(360px, 0.95fr)
        minmax(480px, 1.35fr);
    gap: clamp(80px, 12vw, 190px);
    align-items: start;
    margin-top: clamp(80px, 11vh, 150px);
}

.process-section__intro {
    position: sticky;
    top: calc(var(--header-height) + 60px);
}

.process-section__title {
    max-width: 690px;
    color: rgba(255, 255, 255, 0.96);
    font-size: clamp(3.5rem, 6.8vw, 8.1rem);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 0.95;
}

.process-section__description {
    max-width: 440px;
    margin-top: 34px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.92rem;
    line-height: 1.8;
}

/* ==========================================================================
   44. PROCESS LIST
   ========================================================================== */

.process-list {
    position: relative;
}

.process-list::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18px;
    width: 1px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.04)
        );
    content: "";
}

.process-item {
    position: relative;
    min-height: 260px;
    padding: 8px 0 64px 78px;
}

.process-item:last-child {
    padding-bottom: 0;
}

.process-item::before {
    position: absolute;
    top: 7px;
    left: 12px;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;
    background: #050505;
    box-shadow:
        0 0 0 5px rgba(5, 5, 5, 0.95);
    content: "";
    transition:
        background-color var(--transition-medium),
        border-color var(--transition-medium),
        box-shadow var(--transition-medium),
        transform var(--transition-medium);
}

.process-item:hover::before,
.process-item.is-active::before {
    border-color: rgba(255, 255, 255, 0.95);
    background: #ffffff;
    box-shadow:
        0 0 0 5px rgba(5, 5, 5, 0.95),
        0 0 24px rgba(255, 255, 255, 0.34);
    transform: scale(1.12);
}

.process-item__heading {
    display: flex;
    align-items: baseline;
    gap: clamp(20px, 3vw, 40px);
}

.process-item__heading span {
    color: rgba(255, 255, 255, 0.28);
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
}

.process-item__heading h3 {
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(2.2rem, 4.3vw, 5.4rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
    transition:
        color var(--transition-medium),
        transform var(--transition-medium);
}

.process-item p {
    max-width: 540px;
    margin-top: 26px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    line-height: 1.75;
    transition:
        color var(--transition-medium),
        transform var(--transition-medium);
}

.process-item:hover .process-item__heading h3,
.process-item.is-active .process-item__heading h3 {
    color: #ffffff;
    transform: translateX(5px);
}

.process-item:hover p,
.process-item.is-active p {
    color: rgba(255, 255, 255, 0.62);
    transform: translateX(5px);
}

.process-item__line {
    position: absolute;
    right: 0;
    bottom: 32px;
    left: 78px;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.075);
}

.process-item__line::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.8),
            rgba(255, 255, 255, 0.12),
            transparent
        );
    content: "";
    transform: translateX(-102%);
    transition: transform 850ms var(--ease-cinematic);
}

.process-item:hover .process-item__line::after,
.process-item.is-active .process-item__line::after {
    transform: translateX(0);
}

/* ==========================================================================
   45. CAPABILITY AND PROCESS ACTIVE STATES
   ========================================================================== */

.capability-card.is-visible {
    box-shadow:
        inset 0 0 60px rgba(255, 255, 255, 0.01);
}

.capability-card.is-visible .capability-card__corner::before,
.capability-card.is-visible .capability-card__corner::after {
    background: rgba(255, 255, 255, 0.36);
}

.process-section.is-active .process-list::before {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.32),
            rgba(255, 255, 255, 0.04)
        );
}

/* ==========================================================================
   46. TABLET CAPABILITIES AND PROCESS
   ========================================================================== */

@media (max-width: 1180px) {
    .capabilities-section__header {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(250px, 0.75fr);
        gap: 60px;
    }

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

    .capability-card {
        min-height: 310px;
    }

    .process-section__layout {
        grid-template-columns:
            minmax(300px, 0.85fr)
            minmax(420px, 1.15fr);
        gap: 70px;
    }

    .process-section__title {
        font-size: clamp(3.2rem, 6vw, 6.4rem);
    }
}

/* ==========================================================================
   47. MOBILE CAPABILITIES AND PROCESS
   ========================================================================== */

@media (max-width: 767px) {
    .capabilities-section__container {
        padding-block: 100px 120px;
    }

    .capabilities-section__header {
        display: block;
        margin-top: 62px;
    }

    .capabilities-section__title {
        font-size: clamp(2.8rem, 12vw, 4.9rem);
        line-height: 1;
    }

    .capabilities-section__intro {
        max-width: 320px;
        margin-top: 30px;
        padding-bottom: 0;
        font-size: 0.78rem;
        line-height: 1.7;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
        margin-top: 70px;
    }

    .capability-card {
        min-height: 260px;
        padding: 26px;
    }

    .capability-card__content {
        right: 26px;
        bottom: 26px;
        left: 26px;
    }

    .capability-card__content h3 {
        font-size: 2.25rem;
    }

    .capability-card__content p {
        margin-top: 16px;
        font-size: 0.76rem;
        line-height: 1.65;
    }

    .process-section__container {
        padding-block: 100px 130px;
    }

    .process-section__layout {
        display: block;
        margin-top: 62px;
    }

    .process-section__intro {
        position: relative;
        top: auto;
    }

    .process-section__title {
        font-size: clamp(2.8rem, 12vw, 4.9rem);
        line-height: 1;
    }

    .process-section__description {
        max-width: 320px;
        margin-top: 26px;
        font-size: 0.78rem;
        line-height: 1.7;
    }

    .process-list {
        margin-top: 72px;
    }

    .process-list::before {
        left: 10px;
    }

    .process-item {
        min-height: 220px;
        padding: 4px 0 54px 46px;
    }

    .process-item::before {
        top: 3px;
        left: 4px;
        width: 13px;
        height: 13px;
    }

    .process-item__heading {
        gap: 16px;
    }

    .process-item__heading h3 {
        font-size: clamp(2.2rem, 10vw, 3.8rem);
    }

    .process-item p {
        margin-top: 20px;
        font-size: 0.76rem;
        line-height: 1.65;
    }

    .process-item__line {
        left: 46px;
        bottom: 26px;
    }
}

/* ==========================================================================
   SERVICE PAGE
   Part 5 of 7
   Statistics, technology marquee and final call to action
   ========================================================================== */

/* ==========================================================================
   48. STATISTICS SECTION
   ========================================================================== */

.statistics-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #010101 0%,
            #040404 46%,
            #010101 100%
        );
}

.statistics-section__background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.statistics-section__light {
    position: absolute;
    top: -35%;
    left: 50%;
    width: min(1500px, 125vw);
    height: 120%;
    opacity: 0.54;
    transform:
        translateX(-50%)
        perspective(1000px)
        rotateX(18deg);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.035) 28%,
            transparent 76%
        );

    clip-path:
        polygon(
            46% 0%,
            54% 0%,
            84% 100%,
            16% 100%
        );

    filter: blur(34px);
}

.statistics-section__light::after {
    position: absolute;
    right: 20%;
    bottom: 8%;
    left: 20%;
    height: 13%;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.025) 42%,
            transparent 74%
        );
    content: "";
    filter: blur(20px);
}

.statistics-section__grid {
    position: absolute;
    inset: 0;
    opacity: 0.13;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 96px 96px;

    mask-image:
        radial-gradient(
            circle at 50% 54%,
            #000000 0%,
            transparent 68%
        );

    -webkit-mask-image:
        radial-gradient(
            circle at 50% 54%,
            #000000 0%,
            transparent 68%
        );
}

.statistics-section__container {
    position: relative;
    z-index: 2;
    padding-block: clamp(130px, 18vh, 240px);
}

.statistics-section__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, 0.55fr);
    gap: clamp(60px, 9vw, 145px);
    align-items: end;
    margin-top: clamp(70px, 10vh, 140px);
}

.statistics-section__title {
    max-width: 980px;
    color: rgba(255, 255, 255, 0.96);
    font-size: clamp(3.6rem, 7vw, 8.7rem);
    font-weight: 500;
    letter-spacing: -0.06em;
    line-height: 0.95;
}

.statistics-section__description {
    max-width: 390px;
    padding-bottom: 10px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.9rem;
    line-height: 1.8;
}

/* ==========================================================================
   49. STATISTICS GRID
   ========================================================================== */

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(90px, 13vh, 165px);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.statistic-card {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    padding: clamp(28px, 3vw, 46px);
    border-right: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.016),
            rgba(255, 255, 255, 0.002)
        );
    transition:
        transform var(--transition-medium),
        background-color var(--transition-medium),
        box-shadow var(--transition-medium);
}

.statistic-card::before {
    position: absolute;
    top: -24%;
    left: -18%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.1),
            transparent 68%
        );
    content: "";
    filter: blur(10px);
    transition: opacity var(--transition-slow);
}

.statistic-card:hover {
    background: rgba(255, 255, 255, 0.024);
    transform: translateY(-5px);
    box-shadow:
        inset 0 0 70px rgba(255, 255, 255, 0.012);
}

.statistic-card:hover::before {
    opacity: 1;
}

.statistic-card__value {
    position: relative;
    z-index: 2;
    display: block;
    color: #ffffff;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 5.4vw, 6.8rem);
    font-weight: 500;
    letter-spacing: -0.07em;
    line-height: 0.95;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 0 42px rgba(255, 255, 255, 0.035);
}

.statistic-card__label {
    position: absolute;
    right: clamp(28px, 3vw, 46px);
    bottom: clamp(28px, 3vw, 46px);
    left: clamp(28px, 3vw, 46px);
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.45;
    text-transform: uppercase;
}

/* ==========================================================================
   50. TECHNOLOGY MARQUEE
   ========================================================================== */

.technology-marquee {
    position: relative;
    z-index: 3;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: #020202;
}

.technology-marquee::before,
.technology-marquee::after {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    width: min(180px, 14vw);
    pointer-events: none;
    content: "";
}

.technology-marquee::before {
    left: 0;
    background:
        linear-gradient(
            90deg,
            #020202 0%,
            rgba(2, 2, 2, 0.86) 34%,
            transparent 100%
        );
}

.technology-marquee::after {
    right: 0;
    background:
        linear-gradient(
            270deg,
            #020202 0%,
            rgba(2, 2, 2, 0.86) 34%,
            transparent 100%
        );
}

.technology-marquee__track {
    display: flex;
    width: max-content;
    animation: technology-marquee-scroll 28s linear infinite;
    will-change: transform;
}

.technology-marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: clamp(28px, 3vw, 54px);
    min-width: max-content;
    padding:
        clamp(28px, 4vh, 46px)
        clamp(28px, 3vw, 54px);
}

.technology-marquee__group span:not(.technology-marquee__dot) {
    color: rgba(255, 255, 255, 0.46);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.6rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.technology-marquee__dot {
    flex: 0 0 auto;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.36);
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.18);
}

.technology-marquee:hover .technology-marquee__track {
    animation-play-state: paused;
}

.technology-marquee:hover
.technology-marquee__group span:not(.technology-marquee__dot) {
    color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   51. FINAL CTA SECTION
   ========================================================================== */

.final-cta {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            #010101 0%,
            #030303 48%,
            #000000 100%
        );
}

.final-cta::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        radial-gradient(
            circle at 50% 53%,
            rgba(255, 255, 255, 0.025),
            transparent 28%
        );
    pointer-events: none;
    content: "";
}

.final-cta__visuals {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.final-cta__spotlight {
    position: absolute;
    top: -38%;
    left: 50%;
    width: min(1500px, 130vw);
    height: 140%;
    opacity: 0.72;
    transform:
        translateX(-50%)
        perspective(1000px)
        rotateX(15deg);

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.05) 28%,
            rgba(255, 255, 255, 0.012) 54%,
            transparent 80%
        );

    clip-path:
        polygon(
            46.5% 0%,
            53.5% 0%,
            84% 100%,
            16% 100%
        );

    filter: blur(34px);
    will-change: transform, opacity;
}

.final-cta__halo {
    position: absolute;
    top: 51%;
    left: 50%;
    width: min(760px, 62vw);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow:
        inset 0 0 100px rgba(255, 255, 255, 0.018),
        0 0 140px rgba(255, 255, 255, 0.01);
}

.final-cta__halo::before,
.final-cta__halo::after {
    position: absolute;
    top: 50%;
    left: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
}

.final-cta__halo::before {
    width: 72%;
    border: 1px dashed rgba(255, 255, 255, 0.055);
    animation: final-halo-spin 42s linear infinite;
}

.final-cta__halo::after {
    width: 44%;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.012) 44%,
            transparent 72%
        );
    filter: blur(18px);
}

.final-cta__floor {
    position: absolute;
    right: 16%;
    bottom: 3%;
    left: 16%;
    height: 18%;
    border-radius: 50%;
    opacity: 0.74;
    background:
        radial-gradient(
            ellipse,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.01) 38%,
            transparent 72%
        );
    filter: blur(22px);
    transform: perspective(900px) rotateX(68deg);
}

.final-cta__container {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: clamp(130px, 18vh, 220px);
    text-align: center;
}

.final-cta__eyebrow {
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.17em;
    line-height: 1;
    text-transform: uppercase;
}

.final-cta__title {
    max-width: 1160px;
    margin-top: clamp(34px, 5vh, 58px);
    color: #ffffff;
    font-size: clamp(4rem, 8.5vw, 10.8rem);
    font-weight: 500;
    letter-spacing: -0.072em;
    line-height: 0.9;
    text-wrap: balance;
    text-shadow:
        0 0 56px rgba(255, 255, 255, 0.035);
}

.final-cta__description {
    max-width: 560px;
    margin-top: clamp(30px, 4vh, 42px);
    color: rgba(255, 255, 255, 0.48);
    font-size: clamp(0.88rem, 1.1vw, 1rem);
    line-height: 1.8;
}

.final-cta__button {
    gap: 28px;
    min-height: 64px;
    margin-top: clamp(38px, 6vh, 62px);
    padding: 0 12px 0 30px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 255, 255, 0.96);
    box-shadow:
        inset 0 0 30px rgba(255, 255, 255, 0.015),
        0 22px 70px rgba(0, 0, 0, 0.34);
}

.final-cta__button:hover {
    border-color: #ffffff;
    color: #000000;
    box-shadow:
        0 20px 60px rgba(255, 255, 255, 0.12);
}

.final-cta__button-label {
    position: relative;
    z-index: 2;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.final-cta__button-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    transition:
        border-color var(--transition-medium),
        background-color var(--transition-medium),
        color var(--transition-medium),
        transform var(--transition-medium);
}

.final-cta__button:hover .final-cta__button-icon {
    border-color: rgba(0, 0, 0, 0.18);
    background: #000000;
    color: #ffffff;
    transform: translateX(4px);
}

.final-cta__coordinates {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: clamp(80px, 12vh, 150px);
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

/* ==========================================================================
   52. SECTION ACTIVE STATES
   ========================================================================== */

.statistics-section.is-active .statistics-section__light {
    opacity: 0.72;
}

.final-cta.is-active .final-cta__spotlight {
    opacity: 0.9;
}

.final-cta.is-active .final-cta__halo {
    box-shadow:
        inset 0 0 120px rgba(255, 255, 255, 0.024),
        0 0 170px rgba(255, 255, 255, 0.016);
}

/* ==========================================================================
   53. KEYFRAMES
   ========================================================================== */

@keyframes technology-marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

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

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

/* ==========================================================================
   54. TABLET STATISTICS AND CTA
   ========================================================================== */

@media (max-width: 1180px) {
    .statistics-section__header {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(250px, 0.8fr);
        gap: 60px;
    }

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

    .statistic-card {
        min-height: 280px;
    }

    .final-cta__title {
        max-width: 900px;
        font-size: clamp(4rem, 8vw, 8.2rem);
    }
}

/* ==========================================================================
   55. MOBILE STATISTICS AND CTA
   ========================================================================== */

@media (max-width: 767px) {
    .statistics-section__container {
        padding-block: 100px 120px;
    }

    .statistics-section__header {
        display: block;
        margin-top: 62px;
    }

    .statistics-section__title {
        font-size: clamp(2.8rem, 12vw, 4.9rem);
        line-height: 1;
    }

    .statistics-section__description {
        max-width: 320px;
        margin-top: 28px;
        padding-bottom: 0;
        font-size: 0.78rem;
        line-height: 1.7;
    }

    .statistics-grid {
        grid-template-columns: 1fr;
        margin-top: 70px;
    }

    .statistic-card {
        min-height: 220px;
        padding: 26px;
    }

    .statistic-card__value {
        font-size: clamp(3.2rem, 16vw, 5.4rem);
    }

    .statistic-card__label {
        right: 26px;
        bottom: 26px;
        left: 26px;
        font-size: 0.58rem;
    }

    .technology-marquee__group {
        gap: 28px;
        padding: 26px 28px;
    }

    .technology-marquee__group span:not(.technology-marquee__dot) {
        font-size: 1rem;
    }

    .technology-marquee::before,
    .technology-marquee::after {
        width: 54px;
    }

    .final-cta {
        min-height: 100svh;
    }

    .final-cta__container {
        padding-block: 110px 70px;
    }

    .final-cta__eyebrow {
        font-size: 0.56rem;
        letter-spacing: 0.13em;
    }

    .final-cta__title {
        margin-top: 30px;
        font-size: clamp(3rem, 14vw, 5.6rem);
        line-height: 0.94;
    }

    .final-cta__description {
        max-width: 320px;
        margin-top: 24px;
        font-size: 0.78rem;
        line-height: 1.7;
    }

    .final-cta__button {
        gap: 18px;
        min-height: 56px;
        margin-top: 34px;
        padding: 0 9px 0 22px;
    }

    .final-cta__button-label {
        font-size: 0.62rem;
        letter-spacing: 0.1em;
    }

    .final-cta__button-icon {
        width: 38px;
        height: 38px;
    }

    .final-cta__coordinates {
        margin-top: 72px;
        padding-top: 16px;
        font-size: 0.48rem;
        letter-spacing: 0.1em;
    }

    .final-cta__halo {
        width: 118vw;
    }

    .final-cta__spotlight {
        top: -20%;
        width: 210vw;
        height: 120%;
        clip-path:
            polygon(
                48% 0%,
                52% 0%,
                90% 100%,
                10% 100%
            );
        filter: blur(26px);
    }

    .final-cta__floor {
        right: 4%;
        left: 4%;
    }
}

@media (max-width: 420px) {
    .final-cta__coordinates span:last-child {
        display: none;
    }

    .final-cta__coordinates {
        justify-content: center;
    }

    .final-cta__button {
        width: 100%;
        max-width: 310px;
        justify-content: space-between;
    }
}

/* ==========================================================================
   SERVICE PAGE
   Part 6 of 7
   Footer, mobile navigation overlay and interaction components
   ========================================================================== */

/* ==========================================================================
   56. SITE FOOTER
   ========================================================================== */

.site-footer {
    position: relative;
    z-index: 4;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background:
        linear-gradient(
            180deg,
            #020202 0%,
            #000000 100%
        );
}

.site-footer::before {
    position: absolute;
    top: -42%;
    left: 50%;
    width: min(1200px, 100vw);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.18;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.055),
            transparent 68%
        );
    pointer-events: none;
    content: "";
    transform: translateX(-50%);
    filter: blur(30px);
}

.site-footer__container {
    position: relative;
    z-index: 2;
    padding-top: clamp(80px, 11vh, 140px);
    padding-bottom: clamp(34px, 5vh, 60px);
}

.site-footer__top {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.8fr)
        minmax(360px, 1.2fr);
    gap: clamp(60px, 10vw, 170px);
    align-items: end;
}

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    width: fit-content;
}

.site-footer__brand-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.15),
            transparent 65%
        );
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.site-footer__brand-name {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.site-footer__statement {
    max-width: 720px;
    justify-self: end;
    color: rgba(255, 255, 255, 0.52);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 4.5rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1.06;
}

.site-footer__divider {
    width: 100%;
    height: 1px;
    margin-block: clamp(70px, 10vh, 120px) 28px;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.03)
        );
}

.site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
    color: rgba(255, 255, 255, 0.32);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
}

.site-footer__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vw, 42px);
}

.site-footer__navigation a {
    position: relative;
    padding-block: 8px;
    color: rgba(255, 255, 255, 0.38);
    transition: color var(--transition-fast);
}

.site-footer__navigation a::after {
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.86);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 360ms var(--ease-cinematic);
}

.site-footer__navigation a:hover {
    color: rgba(255, 255, 255, 0.9);
}

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

/* ==========================================================================
   57. BACK TO TOP
   ========================================================================== */

.back-to-top {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 12px;
    width: fit-content;
    padding: 9px 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

.back-to-top svg {
    transition: transform var(--transition-medium);
}

.back-to-top:hover {
    color: rgba(255, 255, 255, 0.94);
}

.back-to-top:hover svg {
    transform: translateY(-4px);
}

/* ==========================================================================
   58. MOBILE NAVIGATION OVERLAY
   ========================================================================== */

.mobile-navigation-overlay {
    position: fixed;
    z-index: var(--z-overlay);
    inset: 0;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 500ms var(--ease-cinematic),
        visibility 500ms var(--ease-cinematic);
}

.mobile-navigation-overlay.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.mobile-navigation-overlay__background {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 78% 14%,
            rgba(255, 255, 255, 0.055),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            rgba(4, 4, 4, 0.98),
            rgba(0, 0, 0, 0.99)
        );
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.mobile-navigation-overlay__background::before {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.028) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
    content: "";
}

.mobile-navigation-overlay__menu {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );
    margin-inline: auto;
    padding-top: var(--header-height);
    padding-bottom: 90px;
}

.mobile-navigation-overlay__menu a {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 24px;
    padding: clamp(17px, 2.5vh, 28px) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    transform: translateY(34px);
    opacity: 0;
    transition:
        color var(--transition-fast),
        transform 700ms var(--ease-cinematic),
        opacity 700ms var(--ease-cinematic);
}

.mobile-navigation-overlay.is-open
.mobile-navigation-overlay__menu a {
    transform: translateY(0);
    opacity: 1;
}

.mobile-navigation-overlay.is-open
.mobile-navigation-overlay__menu a:nth-child(1) {
    transition-delay: 80ms;
}

.mobile-navigation-overlay.is-open
.mobile-navigation-overlay__menu a:nth-child(2) {
    transition-delay: 140ms;
}

.mobile-navigation-overlay.is-open
.mobile-navigation-overlay__menu a:nth-child(3) {
    transition-delay: 200ms;
}

.mobile-navigation-overlay.is-open
.mobile-navigation-overlay__menu a:nth-child(4) {
    transition-delay: 260ms;
}

.mobile-navigation-overlay__menu a > span {
    color: rgba(255, 255, 255, 0.25);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
}

.mobile-navigation-overlay__menu strong {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 5.4rem);
    font-weight: 500;
    letter-spacing: -0.055em;
    line-height: 1;
    transition:
        color var(--transition-fast),
        transform var(--transition-medium);
}

.mobile-navigation-overlay__menu a:hover strong,
.mobile-navigation-overlay__menu a[aria-current="page"] strong {
    color: #ffffff;
    transform: translateX(8px);
}

.mobile-navigation-overlay__menu a[aria-current="page"] > span {
    color: rgba(255, 255, 255, 0.76);
}

.mobile-navigation-overlay__footer {
    position: absolute;
    z-index: 2;
    right: var(--container-padding);
    bottom: 30px;
    left: var(--container-padding);
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

/* ==========================================================================
   59. REUSABLE GLASS SURFACES
   ========================================================================== */

.glass-surface {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 22px 80px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ==========================================================================
   60. GENERIC INTERACTION STATES
   ========================================================================== */

.is-interactive {
    transition:
        transform var(--transition-medium),
        opacity var(--transition-medium),
        border-color var(--transition-medium),
        background-color var(--transition-medium);
}

.is-interactive:hover {
    transform: translateY(-3px);
}

[data-magnetic-inner] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

/* ==========================================================================
   61. LOADING AND READY STATES
   ========================================================================== */

body:not(.is-ready) .site-header,
body:not(.is-ready) .scroll-progress,
body:not(.is-ready) .section-counter {
    opacity: 0;
}

body.is-ready .site-header,
body.is-ready .scroll-progress,
body.is-ready .section-counter {
    opacity: 1;
    transition:
        opacity 800ms var(--ease-cinematic),
        transform var(--transition-medium),
        background-color var(--transition-medium),
        border-color var(--transition-medium);
}

body.is-ready .site-header {
    transition-delay: 100ms;
}

body.is-ready .scroll-progress,
body.is-ready .section-counter {
    transition-delay: 220ms;
}

/* ==========================================================================
   62. GLOBAL DISABLED STATES
   ========================================================================== */

[disabled],
.is-disabled {
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
}

/* ==========================================================================
   63. TOUCH FEEDBACK
   ========================================================================== */

@media (hover: none) {
    .magnetic-button:active,
    .capability-card:active,
    .statistic-card:active {
        transform: scale(0.985);
    }

    .service-panel__link:hover .service-panel__link-icon,
    .final-cta__button:hover .final-cta__button-icon {
        transform: none;
    }
}

/* ==========================================================================
   64. TABLET FOOTER AND OVERLAY
   ========================================================================== */

@media (max-width: 1180px) {
    .site-footer__top {
        grid-template-columns:
            minmax(220px, 0.7fr)
            minmax(320px, 1.3fr);
        gap: 60px;
    }

    .site-footer__bottom {
        grid-template-columns: 1fr auto;
    }

    .site-footer__navigation {
        display: none;
    }
}

/* ==========================================================================
   65. MOBILE FOOTER AND OVERLAY
   ========================================================================== */

@media (max-width: 767px) {
    .site-footer__container {
        padding-top: 86px;
        padding-bottom: 28px;
    }

    .site-footer__top {
        display: block;
    }

    .site-footer__brand {
        gap: 12px;
    }

    .site-footer__brand-mark {
        width: 40px;
        height: 40px;
        font-size: 0.65rem;
    }

    .site-footer__statement {
        max-width: 480px;
        margin-top: 50px;
        font-size: clamp(2rem, 9vw, 3.4rem);
        line-height: 1.05;
    }

    .site-footer__divider {
        margin-block: 66px 24px;
    }

    .site-footer__bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 22px;
        font-size: 0.5rem;
        letter-spacing: 0.09em;
    }

    .back-to-top {
        flex: 0 0 auto;
        font-size: 0.5rem;
        letter-spacing: 0.09em;
    }

    .mobile-navigation-overlay__menu {
        width: calc(100% - 40px);
        padding-bottom: 84px;
    }

    .mobile-navigation-overlay__menu a {
        grid-template-columns: 34px 1fr;
        gap: 14px;
        padding: 19px 0;
    }

    .mobile-navigation-overlay__menu a > span {
        font-size: 0.52rem;
    }

    .mobile-navigation-overlay__menu strong {
        font-size: clamp(2.5rem, 13vw, 4.4rem);
    }

    .mobile-navigation-overlay__footer {
        right: 20px;
        bottom: 24px;
        left: 20px;
        font-size: 0.48rem;
    }
}

@media (max-width: 430px) {
    .site-footer__bottom > span {
        max-width: 180px;
        line-height: 1.5;
    }

    .back-to-top span {
        display: none;
    }
}

/* ==========================================================================
   SERVICE PAGE
   Part 7 of 7
   Final animation helpers, responsive corrections, accessibility,
   performance fallbacks and browser fixes
   ========================================================================== */

/* ==========================================================================
   66. ANIMATION PREPARATION STATES
   ========================================================================== */

.js .service-hero__title-word {
    opacity: 0;
    filter: blur(18px);
    transform:
        translateY(110%)
        rotateX(-18deg);
}

.js .service-hero__eyebrow,
.js .service-hero__description,
.js .hero-scroll-link {
    opacity: 0;
    transform: translateY(24px);
}

.js .service-panel__top,
.js .service-panel__bottom {
    opacity: 0;
}

.js .service-panel__title {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(64px);
}

.js .service-panel__description,
.js .service-panel__link {
    opacity: 0;
    transform: translateY(28px);
}

.js .service-panel__visual {
    opacity: 0;
    transform:
        translateY(40px)
        scale(0.94);
}

.js .capability-card {
    opacity: 0;
    transform: translateY(50px);
}

.js .process-item {
    opacity: 0;
    transform: translateY(36px);
}

.js .statistic-card {
    opacity: 0;
    transform: translateY(42px);
}

.js .final-cta__button {
    opacity: 0;
    transform: translateY(24px);
}

/* ==========================================================================
   67. GENERIC REVEAL HELPERS
   ========================================================================== */

.reveal-up {
    opacity: 0;
    transform: translateY(42px);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-42px);
}

.reveal-right {
    opacity: 0;
    transform: translateX(42px);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
}

.is-revealed {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* ==========================================================================
   68. TEXT SPLITTING SUPPORT
   ========================================================================== */

.split-line {
    display: block;
    overflow: hidden;
}

.split-line__inner {
    display: block;
    will-change: transform, opacity, filter;
}

.split-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.split-word__inner {
    display: inline-block;
    will-change: transform, opacity;
}

.split-character {
    display: inline-block;
    will-change: transform, opacity, filter;
}

/* ==========================================================================
   69. CINEMATIC MASKS
   ========================================================================== */

.cinematic-mask {
    position: relative;
    overflow: hidden;
}

.cinematic-mask::after {
    position: absolute;
    z-index: 8;
    inset: 0;
    background: #000000;
    content: "";
    transform: translateY(0);
    transform-origin: bottom;
    will-change: transform;
}

.light-sweep {
    position: relative;
    overflow: hidden;
}

.light-sweep::after {
    position: absolute;
    top: -40%;
    left: -30%;
    width: 30%;
    height: 180%;
    opacity: 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.16),
            transparent
        );
    content: "";
    filter: blur(12px);
    transform: rotate(12deg);
    pointer-events: none;
}

.light-sweep.is-active::after {
    animation: light-sweep-pass 1.4s var(--ease-cinematic) forwards;
}

/* ==========================================================================
   70. PARALLAX AND 3D HELPERS
   ========================================================================== */

[data-parallax] {
    will-change: transform;
}

[data-depth] {
    transform-style: preserve-3d;
    will-change: transform;
}

.preserve-3d {
    transform-style: preserve-3d;
}

.hardware-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.no-pointer-events {
    pointer-events: none;
}

.pointer-events {
    pointer-events: auto;
}

/* ==========================================================================
   71. CANVAS VISIBILITY STATES
   ========================================================================== */

.webgl-canvas.is-hidden {
    visibility: hidden;
    opacity: 0;
}

.webgl-canvas.is-visible {
    visibility: visible;
    opacity: 1;
}

.webgl-canvas {
    transition: opacity 700ms var(--ease-cinematic);
}

body.webgl-unavailable .webgl-canvas {
    display: none;
}

body.webgl-unavailable .service-panel__object-anchor::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78%;
    height: 60%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.01) 42%,
            transparent 72%
        );
    box-shadow:
        inset 0 0 60px rgba(255, 255, 255, 0.015),
        0 30px 90px rgba(0, 0, 0, 0.5);
    content: "";
    transform: translate(-50%, -50%);
}

/* ==========================================================================
   72. FOCUS AND KEYBOARD ACCESSIBILITY
   ========================================================================== */

body.is-keyboard-user a:focus-visible,
body.is-keyboard-user button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 6px;
}

body:not(.is-keyboard-user) a:focus,
body:not(.is-keyboard-user) button:focus {
    outline: none;
}

.menu-toggle:focus-visible {
    border-color: rgba(255, 255, 255, 0.72);
}

.mobile-navigation-overlay__menu a:focus-visible {
    outline-offset: -5px;
}

/* ==========================================================================
   73. BODY SCROLL LOCK FALLBACK
   ========================================================================== */

html.is-locked,
html.is-locked body {
    overflow: hidden;
    overscroll-behavior: none;
}

body.menu-open .site-header {
    border-color: transparent;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.menu-open .site-logo,
body.menu-open .menu-toggle {
    position: relative;
    z-index: calc(var(--z-overlay) + 2);
}

/* ==========================================================================
   74. SECTION TRANSITION OVERLAYS
   ========================================================================== */

.section-transition-overlay {
    position: fixed;
    z-index: 38;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at center,
            transparent 0%,
            rgba(0, 0, 0, 0.26) 54%,
            rgba(0, 0, 0, 0.88) 100%
        );
    transition: opacity var(--transition-medium);
}

.section-transition-overlay.is-active {
    opacity: 1;
}

.page-flash {
    position: fixed;
    z-index: 90;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.94);
    mix-blend-mode: screen;
}

.page-flash.is-active {
    animation: page-flash 520ms ease-out forwards;
}

/* ==========================================================================
   75. LOADER COMPLETION DETAILS
   ========================================================================== */

.page-loader.is-completing .page-loader__brand {
    animation: loader-brand-exit 800ms var(--ease-cinematic) forwards;
}

.page-loader.is-completing .page-loader__progress,
.page-loader.is-completing .page-loader__meta {
    animation: loader-meta-exit 600ms var(--ease-cinematic) forwards;
}

.page-loader.is-completing .page-loader__spotlight {
    animation: loader-light-exit 900ms var(--ease-cinematic) forwards;
}

/* ==========================================================================
   76. OPTIONAL CUSTOM CURSOR STATES
   ========================================================================== */

body.has-pointer {
    cursor: default;
}

body.has-pointer a,
body.has-pointer button {
    cursor: pointer;
}

.cursor-glow.is-hovering {
    width: 430px;
    height: 430px;
    opacity: 0.92;
}

.cursor-glow.is-pressed {
    transform:
        translate3d(-50%, -50%, 0)
        scale(0.82);
}

.cursor-glow.is-dark {
    opacity: 0.35;
}

/* ==========================================================================
   77. STICKY BROWSER FIXES
   ========================================================================== */

.service-panel,
.service-panel__sticky,
.process-section__intro {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@supports (-webkit-touch-callout: none) {
    .service-hero,
    .service-hero__container,
    .service-panel__sticky,
    .service-panel__container,
    .final-cta {
        min-height: -webkit-fill-available;
    }
}

/* ==========================================================================
   78. BACKDROP FILTER FALLBACKS
   ========================================================================== */

@supports not ((backdrop-filter: blur(1px))) {
    .site-header.is-scrolled {
        background: rgba(3, 3, 3, 0.96);
    }

    .mobile-navigation-overlay__background {
        background: rgba(0, 0, 0, 0.985);
    }

    .glass-surface,
    .webgl-fallback {
        background: rgba(10, 10, 10, 0.96);
    }
}

/* ==========================================================================
   79. LARGE SCREEN CORRECTIONS
   ========================================================================== */

@media (min-width: 1920px) {
    :root {
        --container-width: 1640px;
    }

    .service-hero__title {
        font-size: min(18vw, 21rem);
    }

    .service-panel__title {
        font-size: min(7.4vw, 11rem);
    }

    .service-panel__body {
        gap: 180px;
    }

    .capability-card {
        min-height: 380px;
    }

    .statistic-card {
        min-height: 350px;
    }
}

/* ==========================================================================
   80. MEDIUM DESKTOP CORRECTIONS
   ========================================================================== */

@media (max-width: 1366px) {
    :root {
        --container-padding: clamp(28px, 3.4vw, 52px);
    }

    .service-hero__title {
        font-size: clamp(6rem, 17vw, 14rem);
    }

    .service-panel__title {
        font-size: clamp(3.8rem, 7vw, 8rem);
    }

    .service-panel__body {
        gap: 70px;
    }

    .capability-card {
        min-height: 300px;
    }
}

/* ==========================================================================
   81. LANDSCAPE TABLET FIXES
   ========================================================================== */

@media
    (max-width: 1180px)
    and (orientation: landscape)
    and (max-height: 760px) {

    .service-hero__container {
        padding-top: calc(var(--header-height) + 26px);
        padding-bottom: 24px;
    }

    .service-hero__title {
        font-size: clamp(5rem, 15vw, 9rem);
    }

    .service-hero__description {
        font-size: 0.82rem;
    }

    .service-panel__container {
        padding-top: calc(var(--header-height) + 18px);
        padding-bottom: 16px;
    }

    .service-panel__body {
        gap: 36px;
        padding-block: 18px;
    }

    .service-panel__title {
        font-size: clamp(3rem, 6vw, 5.4rem);
    }

    .service-panel__description {
        margin-top: 20px;
        font-size: 0.78rem;
    }

    .service-panel__link {
        margin-top: 22px;
    }

    .service-panel__visual {
        min-height: 48vh;
    }

    .service-panel__object-anchor {
        height: 46vh;
    }
}

/* ==========================================================================
   82. SMALL MOBILE CORRECTIONS
   ========================================================================== */

@media (max-width: 360px) {
    :root {
        --container-padding: 16px;
    }

    .site-header__inner,
    .mobile-navigation-overlay__menu {
        width: calc(100% - 32px);
    }

    .service-hero__title {
        font-size: 4.25rem;
    }

    .service-hero__description {
        max-width: 240px;
        font-size: 0.76rem;
    }

    .service-panel__title {
        font-size: 2.75rem;
    }

    .service-panel__description {
        font-size: 0.72rem;
    }

    .service-panel__visual {
        min-height: 28vh;
    }

    .capability-card {
        min-height: 240px;
    }

    .final-cta__title {
        font-size: 2.8rem;
    }

    .site-footer__statement {
        font-size: 1.9rem;
    }
}

/* ==========================================================================
   83. LOW HEIGHT DEVICE FIXES
   ========================================================================== */

@media (max-height: 680px) and (min-width: 768px) {
    .service-hero__container {
        padding-top: calc(var(--header-height) + 26px);
        padding-bottom: 24px;
    }

    .service-hero__title {
        font-size: clamp(5rem, 14vw, 9rem);
    }

    .service-hero__title-wrap {
        padding-block: 18px;
    }

    .service-panel__container {
        padding-top: calc(var(--header-height) + 16px);
        padding-bottom: 16px;
    }

    .service-panel__body {
        padding-block: 18px;
    }

    .service-panel__visual {
        min-height: 48vh;
    }
}

/* ==========================================================================
   84. REDUCED MOTION
   ========================================================================== */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .noise-layer,
    .cursor-glow,
    .service-hero__orb,
    .service-panel__visual-ring,
    .service-panel__visual::after,
    .service-panel__status-dot,
    .technology-marquee__track,
    .final-cta__halo::before {
        animation: none !important;
    }

    .js .split-text,
    .js .reveal-element,
    .js .service-hero__title-word,
    .js .service-hero__eyebrow,
    .js .service-hero__description,
    .js .hero-scroll-link,
    .js .service-panel__top,
    .js .service-panel__bottom,
    .js .service-panel__title,
    .js .service-panel__description,
    .js .service-panel__link,
    .js .service-panel__visual,
    .js .capability-card,
    .js .process-item,
    .js .statistic-card,
    .js .final-cta__button {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }

    .service-panel {
        min-height: 100vh;
    }

    .service-panel__sticky {
        position: relative;
    }

    .process-section__intro {
        position: relative;
        top: auto;
    }

    .webgl-canvas {
        opacity: 0.4;
    }
}

/* ==========================================================================
   85. DATA SAVER AND LOW POWER MODE
   ========================================================================== */

body.low-performance-mode .noise-layer,
body.low-performance-mode .cursor-glow,
body.low-performance-mode .service-hero__orb,
body.low-performance-mode .service-panel__grid,
body.low-performance-mode .service-panel__visual-ring,
body.low-performance-mode .final-cta__halo::before {
    display: none;
}

body.low-performance-mode .service-panel {
    min-height: 135vh;
}

body.low-performance-mode .webgl-canvas {
    opacity: 0.72;
}

body.low-performance-mode .site-header.is-scrolled,
body.low-performance-mode .mobile-navigation-overlay__background {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.low-performance-mode .capability-card,
body.low-performance-mode .statistic-card,
body.low-performance-mode .final-cta__button {
    box-shadow: none;
}

/* ==========================================================================
   86. HIGH CONTRAST SUPPORT
   ========================================================================== */

@media (prefers-contrast: more) {
    :root {
        --color-text-soft: #d6d6d6;
        --color-text-muted: #a9a9a9;
        --color-border: rgba(255, 255, 255, 0.3);
        --color-border-soft: rgba(255, 255, 255, 0.18);
    }

    .service-panel__description,
    .capabilities-section__intro,
    .process-section__description,
    .statistics-section__description,
    .final-cta__description,
    .site-footer__statement {
        color: rgba(255, 255, 255, 0.76);
    }

    .primary-navigation a,
    .site-footer__navigation a {
        color: rgba(255, 255, 255, 0.72);
    }
}

/* ==========================================================================
   87. FORCED COLORS SUPPORT
   ========================================================================== */

@media (forced-colors: active) {
    .noise-layer,
    .vignette-layer,
    .cursor-glow,
    .service-hero__spotlight,
    .statistics-section__light,
    .final-cta__spotlight,
    .service-panel__glow,
    .service-panel__grid,
    .service-panel__visual-ring {
        display: none;
    }

    .magnetic-button,
    .capability-card,
    .statistic-card,
    .service-panel__link-icon,
    .final-cta__button-icon {
        border: 1px solid CanvasText;
    }

    .service-hero__title-word {
        color: CanvasText;
        background: none;
    }
}

/* ==========================================================================
   88. PRINT FALLBACK
   ========================================================================== */

@media print {
    * {
        box-shadow: none !important;
        text-shadow: none !important;
        animation: none !important;
        transition: none !important;
    }

    html,
    body {
        overflow: visible !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    .page-loader,
    .webgl-canvas,
    .noise-layer,
    .vignette-layer,
    .cursor-glow,
    .site-header,
    .scroll-progress,
    .section-counter,
    .hero-scroll-link,
    .technology-marquee,
    .mobile-navigation-overlay,
    .final-cta__visuals,
    .back-to-top {
        display: none !important;
    }

    main,
    section,
    article,
    .service-panel,
    .service-panel__sticky,
    .process-section__intro {
        position: static !important;
        min-height: auto !important;
        overflow: visible !important;
        background: transparent !important;
        color: #000000 !important;
    }

    .service-hero,
    .services-introduction,
    .capabilities-section,
    .process-section,
    .statistics-section,
    .final-cta,
    .site-footer {
        padding: 36px 0 !important;
        break-inside: avoid;
        border-bottom: 1px solid #cccccc;
    }

    .service-hero__container,
    .service-panel__container,
    .capabilities-section__container,
    .process-section__container,
    .statistics-section__container,
    .final-cta__container,
    .site-footer__container {
        min-height: auto !important;
        padding: 0 !important;
    }

    .service-hero__title,
    .services-introduction__title,
    .service-panel__title,
    .capabilities-section__title,
    .process-section__title,
    .statistics-section__title,
    .final-cta__title,
    .site-footer__statement {
        color: #000000 !important;
        background: none !important;
        font-size: 36px !important;
    }

    p,
    span,
    a {
        color: #222222 !important;
    }

    a::after {
        content: " (" attr(href) ")";
        font-size: 10px;
    }

    .service-panel__visual,
    .service-panel__background {
        display: none !important;
    }

    .service-panel__body,
    .capabilities-section__header,
    .process-section__layout,
    .statistics-section__header,
    .site-footer__top {
        display: block !important;
    }

    .capabilities-grid,
    .statistics-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   89. FINAL KEYFRAMES
   ========================================================================== */

@keyframes light-sweep-pass {
    0% {
        left: -35%;
        opacity: 0;
    }

    20% {
        opacity: 0.7;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}

@keyframes page-flash {
    0% {
        opacity: 0;
    }

    18% {
        opacity: 0.22;
    }

    100% {
        opacity: 0;
    }
}

@keyframes loader-brand-exit {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(-28px);
    }
}

@keyframes loader-meta-exit {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(18px);
    }
}

@keyframes loader-light-exit {
    0% {
        opacity: 0.72;
        transform:
            translateX(-50%)
            perspective(800px)
            rotateX(18deg)
            scale(1);
    }

    100% {
        opacity: 0;
        transform:
            translateX(-50%)
            perspective(800px)
            rotateX(18deg)
            scale(1.35);
    }
}

/* ==========================================================================
   90. FINAL SAFETY RULES
   ========================================================================== */

[hidden] {
    display: none !important;
}

svg {
    overflow: visible;
}

canvas {
    user-select: none;
    -webkit-user-select: none;
}

iframe {
    border: 0;
}

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

body.is-ready .page-loader {
    pointer-events: none;
}

.service-page,
.service-page main,
.service-page section {
    width: 100%;
}

.service-page main {
    overflow: clip;
}

@supports not (overflow: clip) {
    .service-page main {
        overflow: hidden;
    }
}

/* ========================================================================== 
   89. PRODUCTION LAYOUT CORRECTIONS
   Corrects hero framing, text clipping, scroll pacing, wordmark and marquee.
   ========================================================================== */

/* Clean text-only studio wordmark. */
.site-logo--wordmark {
    gap: 0;
}

.site-logo--wordmark .site-logo__text {
    font-family: var(--font-display);
    font-size: clamp(0.72rem, 0.82vw, 0.9rem);
    font-weight: 650;
    letter-spacing: 0.22em;
    line-height: 1;
    white-space: nowrap;
}

/* Keep large animated text inside its visible bounds. */
.service-hero,
.service-hero__container,
.service-hero__title-wrap,
.services-introduction,
.statistics-section {
    overflow-x: clip;
}

.service-hero {
    min-height: 100svh;
    background:
        radial-gradient(
            ellipse at 50% 43%,
            rgba(255, 255, 255, 0.025) 0%,
            transparent 38%
        ),
        linear-gradient(180deg, #020202 0%, #030303 58%, #010101 100%);
}

.service-hero::before {
    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(255, 255, 255, 0.035),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.18) 64%,
            #020202 100%
        );
}

/* Softer, narrower light with no hard triangular slab. */
.service-hero__spotlight {
    top: -18%;
    width: min(880px, 72vw);
    height: 112%;
    opacity: 0.42;
    transform: translateX(-50%);
    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.055) 22%,
            rgba(255, 255, 255, 0.015) 48%,
            transparent 74%
        );
    clip-path: none;
    filter: blur(30px);
    mix-blend-mode: screen;
}

.service-hero__spotlight::before {
    inset: 7% 18% 8%;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.018) 45%,
            transparent 72%
        );
    filter: blur(38px);
}

.service-hero__spotlight::after {
    right: 25%;
    bottom: 11%;
    left: 25%;
    height: 8%;
    opacity: 0.32;
    filter: blur(30px);
}

.service-hero__container {
    padding-top: calc(var(--header-height) + clamp(30px, 5vh, 64px));
    padding-bottom: clamp(28px, 4vh, 52px);
}

.service-hero__title-wrap {
    padding-block: clamp(20px, 3vh, 44px);
}

.service-hero__title {
    width: 100%;
    max-width: 100%;
    padding-inline: 0.025em;
    font-size: clamp(5rem, 15.2vw, 14.5rem);
    letter-spacing: -0.075em;
    line-height: 0.78;
}

.service-hero__title-line {
    max-width: 100%;
    overflow: visible;
    padding: 0.08em 0.09em 0.13em;
}

.service-hero__title-line--offset {
    margin-top: -0.01em;
}

.service-hero__title-word {
    max-width: 100%;
    padding-inline: 0.015em;
}

.service-hero__footer {
    margin-top: clamp(34px, 5vh, 72px);
}

/* Prevent large section statements from clipping at either edge. */
.services-introduction__title,
.capabilities-section__title,
.process-section__title,
.statistics-section__title,
.final-cta__title,
.site-footer__statement {
    max-width: min(100%, 1120px);
    padding-block: 0.08em 0.14em;
    overflow: visible;
    line-height: 1.02;
    text-wrap: balance;
}

.services-introduction__title {
    font-size: clamp(2.8rem, 5.35vw, 6.4rem);
    letter-spacing: -0.052em;
}

.statistics-section__title {
    font-size: clamp(3rem, 6vw, 6.8rem);
}

.split-word {
    overflow: visible;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

/* Faster service storytelling: less empty sticky-scroll distance. */
.service-panel {
    min-height: 145vh;
}

.service-panel__container {
    padding-top: calc(var(--header-height) + 24px);
    padding-bottom: 22px;
}

.service-panel__title {
    max-width: 100%;
    font-size: clamp(3.6rem, 7.4vw, 8.2rem);
    line-height: 0.94;
    overflow: visible;
    text-wrap: balance;
}

.service-panel__visual {
    min-height: min(58vh, 620px);
}

body.low-performance-mode .service-panel {
    min-height: 125vh;
}

/* Truly seamless marquee: each copy fills at least one viewport. */
.technology-marquee__track {
    display: flex;
    width: max-content;
    animation-duration: 20s;
}

.technology-marquee__group {
    flex: 0 0 auto;
    justify-content: space-around;
    gap: clamp(24px, 2.4vw, 44px);
    min-width: 100vw;
    padding:
        clamp(24px, 3vh, 36px)
        clamp(24px, 3vw, 48px);
}

@keyframes technology-marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 1180px) {
    .service-hero__title {
        font-size: clamp(4.8rem, 14.6vw, 10.5rem);
        line-height: 0.8;
    }

    .service-panel {
        min-height: 132vh;
    }

    .service-panel__title {
        font-size: clamp(3.25rem, 7.8vw, 6.4rem);
    }

    .technology-marquee__group {
        min-width: 125vw;
    }
}

@media (max-width: 767px) {
    .site-logo--wordmark .site-logo__text {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }

    .service-hero__spotlight {
        top: -8%;
        width: 104vw;
        height: 85%;
        opacity: 0.3;
    }

    .service-hero__container {
        padding-top: calc(var(--header-height) + 22px);
    }

    .service-hero__title {
        font-size: clamp(4.2rem, 23vw, 7.4rem);
        line-height: 0.82;
        letter-spacing: -0.068em;
    }

    .service-hero__title-line,
    .service-hero__title-line--offset {
        align-self: flex-start;
        padding-inline: 0.04em;
    }

    .service-hero__footer {
        margin-top: 28px;
    }

    .services-introduction__title {
        font-size: clamp(2.45rem, 12vw, 4.5rem);
        line-height: 1.03;
    }

    .service-panel {
        min-height: 118vh;
    }

    .service-panel__title {
        font-size: clamp(2.9rem, 14vw, 4.8rem);
        line-height: 0.98;
    }

    .service-panel__visual {
        min-height: 42vh;
    }

    .technology-marquee__track {
        animation-duration: 16s;
    }

    .technology-marquee__group {
        min-width: 180vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .technology-marquee__track {
        animation: none;
        transform: none;
    }
}


/* ========================================================================== 
   CINEMATIC DAWN HERO — replacement override
   ========================================================================== */
.service-hero--dawn {
    isolation: isolate;
    min-height: 100svh;
    background: #010101;
}

.service-hero--dawn::before {
    z-index: -5;
    background:
        radial-gradient(ellipse at 50% 72%, rgba(255,255,255,.055), transparent 28%),
        radial-gradient(ellipse at 50% 16%, rgba(255,255,255,.045), transparent 33%),
        linear-gradient(180deg, #020202 0%, #050505 48%, #010101 100%);
}

.service-hero--dawn::after {
    position: absolute;
    z-index: 8;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.38) 76%, rgba(0,0,0,.92) 100%),
        linear-gradient(90deg, rgba(0,0,0,.52), transparent 22%, transparent 78%, rgba(0,0,0,.52));
    content: "";
}

.service-hero--dawn .service-hero__container {
    position: relative;
    z-index: 12;
    width: min(calc(100% - (var(--container-padding) * 2)), 1120px);
    min-height: 100svh;
    padding-top: clamp(180px, 25vh, 280px);
    padding-bottom: clamp(76px, 9vh, 110px);
}

.service-hero--dawn .service-hero__spotlight {
    z-index: 1;
    top: -34%;
    width: min(920px, 74vw);
    height: 126%;
    opacity: .68;
    background: linear-gradient(180deg, rgba(255,255,255,.19), rgba(255,255,255,.065) 27%, rgba(255,255,255,.012) 61%, transparent 84%);
    clip-path: polygon(35% 0, 65% 0, 88% 100%, 12% 100%);
    filter: blur(28px);
    mix-blend-mode: screen;
}

.service-hero__front-light {
    position: absolute;
    z-index: 5;
    top: 25%;
    left: 50%;
    width: min(1000px, 74vw);
    height: 55%;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(.78);
    background: radial-gradient(ellipse at center, rgba(255,255,255,.16), rgba(255,255,255,.045) 31%, transparent 69%);
    filter: blur(24px);
    mix-blend-mode: screen;
    will-change: opacity, transform;
}

.service-hero__gleam {
    position: absolute;
    z-index: 18;
    top: 27%;
    left: -35%;
    width: 34%;
    height: 42%;
    opacity: 0;
    pointer-events: none;
    transform: skewX(-13deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), rgba(255,255,255,.42), rgba(255,255,255,.08), transparent);
    filter: blur(16px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.service-hero__horizon {
    position: absolute;
    z-index: 4;
    left: -8%;
    right: -8%;
    bottom: -24%;
    height: 46%;
    border-radius: 50% 50% 0 0 / 24% 24% 0 0;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.15) 0, rgba(255,255,255,.055) 1.2%, rgba(255,255,255,.012) 3.3%, transparent 7%),
        #020202;
    box-shadow:
        0 -2px 8px rgba(255,255,255,.26),
        0 -14px 48px rgba(255,255,255,.10),
        0 -46px 110px rgba(255,255,255,.055);
    transform: translateY(28px) scaleX(.92);
    will-change: opacity, transform;
}

.service-hero--dawn .service-hero__eyebrow {
    align-self: flex-start;
    margin: 0 0 clamp(24px, 3vh, 42px);
    color: rgba(255,255,255,.78);
    letter-spacing: .28em;
}

.service-hero--dawn 

.service-hero--dawn .service-hero__title-wrap {
    margin: 0;
    padding: 0;
}

.service-hero--dawn .service-hero__title {
    display: block;
    max-width: 980px;
    font-family: var(--font-primary);
    font-size: clamp(4.6rem, 8.1vw, 9.1rem);
    font-weight: 400;
    letter-spacing: -.075em;
    line-height: .92;
    text-transform: none;
}

.service-hero--dawn .service-hero__title::before { display: none; }

.service-hero--dawn .service-hero__title-line {
    display: block;
    overflow: visible;
    padding: .02em .08em .10em 0;
}

.service-hero--dawn .service-hero__title-word {
    position: relative;
    display: inline-block;
    color: transparent;
    background: linear-gradient(180deg, #fff 0%, #f4f4f4 38%, #ababab 72%, #595959 100%);
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: 0 0 32px rgba(255,255,255,.055);
}

.service-hero--dawn .service-hero__title-line:nth-child(2) .service-hero__title-word {
    background: linear-gradient(180deg, #f8f8f8 0%, #d7d7d7 35%, #888 72%, #434343 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

.service-hero--dawn .service-hero__footer {
    position: relative;
    z-index: 10;
    align-items: flex-end;
    margin-top: clamp(24px, 4vh, 48px);
}

.service-hero--dawn .service-hero__description {
    width: min(560px, 62vw);
    color: rgba(255,255,255,.58);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(.78rem, .9vw, .95rem);
    letter-spacing: .025em;
    line-height: 1.65;
}

.service-hero--dawn .hero-scroll-link {
    position: absolute;
    left: 50%;
    bottom: -4px;
    flex-direction: column;
    gap: 13px;
    transform: translateX(-50%);
}

.service-hero--dawn .service-hero__coordinates {
    z-index: 14;
    right: 2.4vw;
    bottom: 6vh;
    writing-mode: horizontal-tb;
    transform: none;
    color: rgba(255,255,255,.42);
}

@media (max-width: 900px) {
    .service-hero--dawn .service-hero__container { padding-top: 190px; }
    .service-hero--dawn .service-hero__title { font-size: clamp(4rem, 12vw, 7rem); }
    .service-hero--dawn .service-hero__description { width: min(520px, 78vw); }
    .service-hero__horizon { bottom: -18%; height: 38%; }
}

@media (max-width: 620px) {
    .service-hero--dawn .service-hero__container { padding-top: 150px; padding-bottom: 105px; }
    .service-hero--dawn .service-hero__title { font-size: clamp(3.25rem, 16vw, 5.6rem); line-height: .96; }
    .service-hero--dawn .service-hero__footer { display: block; margin-top: 24px; }
    .service-hero--dawn .service-hero__description { width: 100%; font-size: .72rem; }
    .service-hero--dawn .hero-scroll-link { bottom: -78px; }
    .service-hero__gleam { top: 31%; height: 30%; }
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__gleam { display: none; }
    .service-hero__front-light,
    .service-hero__horizon { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   CINEMATIC HERO COMPACT LAYOUT + IMAGE/VIDEO BACKGROUNDS
   ========================================================================== */

.service-hero {
    position: relative;
    min-height: clamp(700px, 92svh, 980px);
    isolation: isolate;
    background: #020202;
}

.service-hero__image {
    position: absolute;
    z-index: -5;
    inset: 0;
    background-image: url("./hero-background.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0;
    transform: scale(1.035);
    filter: brightness(0.82) contrast(1.08);
    animation: hero-background-reveal 1.8s 1.55s var(--ease-cinematic) forwards;
    will-change: opacity, transform, filter;
}

.service-hero__image::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.20) 0%, transparent 22%, transparent 66%, rgba(0,0,0,.34) 100%),
        radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.58) 100%);
    content: "";
}

.service-hero::before {
    z-index: -3;
    background:
        linear-gradient(90deg, rgba(0,0,0,.28), transparent 22%, transparent 78%, rgba(0,0,0,.28)),
        linear-gradient(180deg, rgba(0,0,0,.08), transparent 36%, rgba(0,0,0,.18));
}

.service-hero__container {
    min-height: clamp(700px, 92svh, 980px);
    justify-content: flex-start;
    padding-top: calc(var(--header-height) + clamp(54px, 7vh, 82px));
    padding-bottom: clamp(30px, 4vh, 48px);
}

.service-hero__eyebrow {
    margin-right: auto;
    margin-left: 0;
}

.service-hero__title-wrap {
    width: min(1050px, 76vw);
    margin: clamp(28px, 5.8vh, 68px) 0 0;
    padding: 0;
}

.service-hero__title {
    gap: 0;
    font-size: clamp(4.6rem, 9.35vw, 10.9rem);
    font-weight: 500;
    letter-spacing: -0.07em;
    line-height: 0.84;
    text-transform: none;
}

.service-hero__title-line {
    align-self: flex-start;
    padding: 0.05em 0.08em 0.09em 0;
}

.service-hero__title-line + .service-hero__title-line {
    margin-top: -0.015em;
}

.service-hero__title-word {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #eeeeee 38%,
            #a7a7a7 78%,
            #666666 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
}

.service-hero__footer {
    align-items: flex-end;
    width: min(1050px, 76vw);
    margin-top: clamp(20px, 3.2vh, 36px);
}

.service-hero__description {
    width: min(520px, 54vw);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(.78rem, .88vw, .96rem);
    line-height: 1.58;
}

.hero-scroll-link {
    position: absolute;
    bottom: clamp(24px, 3.4vh, 42px);
    left: 50%;
    flex-direction: column;
    gap: 12px;
    transform: translateX(-50%);
}

.service-hero__coordinates {
    bottom: clamp(40px, 5vh, 58px);
}

.service-hero__spotlight {
    z-index: -2;
    top: -28%;
    width: min(960px, 72vw);
    height: 110%;
    opacity: .24;
    filter: blur(35px);
}

.service-hero__front-light,
.service-hero__gleam,
.service-hero__horizon {
    pointer-events: none;
}

.service-hero__front-light {
    position: absolute;
    z-index: 2;
    top: 34%;
    left: 14%;
    width: min(900px, 70vw);
    height: 38%;
    opacity: 0;
    background:
        radial-gradient(
            ellipse at 42% 50%,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.06) 28%,
            transparent 68%
        );
    filter: blur(18px);
    mix-blend-mode: screen;
    animation: hero-front-flash 2.1s 1.7s var(--ease-cinematic) forwards;
}

.service-hero__gleam {
    position: absolute;
    z-index: 3;
    top: 26%;
    bottom: 20%;
    left: -30%;
    width: 18%;
    opacity: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        rgba(255,255,255,.82),
        rgba(255,255,255,.18),
        transparent
    );
    filter: blur(14px);
    transform: skewX(-16deg);
    mix-blend-mode: screen;
    animation: hero-gleam-sweep 1.75s 2s var(--ease-cinematic) forwards;
}

.service-hero__horizon {
    display: none;
}

@keyframes hero-background-reveal {
    0% {
        opacity: 0;
        transform: scale(1.055);
        filter: brightness(.28) contrast(1.12);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(.82) contrast(1.08);
    }
}

@keyframes hero-front-flash {
    0% { opacity: 0; transform: scale(.88); }
    42% { opacity: .9; transform: scale(1); }
    100% { opacity: .14; transform: scale(1.08); }
}

@keyframes hero-gleam-sweep {
    0% { left: -30%; opacity: 0; }
    18% { opacity: .9; }
    82% { opacity: .5; }
    100% { left: 112%; opacity: 0; }
}

/* Shared cinematic background videos */
.section-video-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.section-video-background__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .34;
    filter: grayscale(1) brightness(.52) contrast(1.18);
    transform: scale(1.04);
}

.section-video-background__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, #020202 0%, transparent 17%, transparent 78%, #030303 100%),
        linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.24) 46%, rgba(0,0,0,.70)),
        radial-gradient(ellipse at center, transparent 16%, rgba(0,0,0,.46) 82%);
}

.services-introduction,
.process-section {
    isolation: isolate;
    background: #030303;
}

.services-introduction::before,
.process-section::before {
    z-index: 1;
}

.services-introduction__container,
.process-section__container {
    position: relative;
    z-index: 2;
}

.section-video-background--process .section-video-background__media {
    opacity: .28;
    filter: grayscale(1) brightness(.48) contrast(1.22);
}

@media (max-width: 900px) {
    .service-hero,
    .service-hero__container {
        min-height: 780px;
    }

    .service-hero__container {
        padding-top: calc(var(--header-height) + 44px);
    }

    .service-hero__title-wrap,
    .service-hero__footer {
        width: 100%;
    }

    .service-hero__title {
        font-size: clamp(4.3rem, 14vw, 8.2rem);
        line-height: .87;
    }

    .service-hero__description {
        width: min(520px, 82vw);
    }

    .service-hero__coordinates {
        display: none;
    }
}

@media (max-width: 600px) {
    .service-hero,
    .service-hero__container {
        min-height: 720px;
    }

    .service-hero__title-wrap {
        margin-top: 64px;
    }

    .service-hero__title {
        font-size: clamp(3.55rem, 17.5vw, 5.8rem);
        letter-spacing: -.075em;
    }

    .service-hero__footer {
        margin-top: 18px;
    }

    .service-hero__description {
        width: 100%;
        font-size: .74rem;
    }

    .hero-scroll-link {
        bottom: 22px;
    }

    .service-hero__image {
        background-position: 50% center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__image,
    .service-hero__front-light,
    .service-hero__gleam {
        animation: none !important;
    }

    .service-hero__image {
        opacity: 1;
        transform: none;
        filter: brightness(.82) contrast(1.08);
    }

    .service-hero__front-light,
    .service-hero__gleam {
        display: none;
    }
}


/* ==========================================================================
   FINAL VISIBILITY AND VIDEO CLARITY PATCH
   ========================================================================== */

/*
 * The original global film grain and vignette were fixed above the full page
 * content. That made text and background videos look muddy. Keep only an
 * extremely subtle cinematic texture behind the actual content.
 */
.noise-layer {
    z-index: 1 !important;
    opacity: 0.004 !important;
    animation-duration: 0.8s !important;
    mix-blend-mode: soft-light;
}

.vignette-layer {
    z-index: 2 !important;
    opacity: 0.32 !important;
    background:
        radial-gradient(
            ellipse at center,
            transparent 55%,
            rgba(0, 0, 0, 0.18) 82%,
            rgba(0, 0, 0, 0.42) 100%
        ) !important;
}

/* Ensure all real page content remains above the global atmosphere. */
.site-header,
.scroll-progress,
.section-counter,
main,
.site-footer,
.mobile-navigation-overlay {
    position: relative;
    z-index: 5;
}

.site-header,
.scroll-progress,
.section-counter,
.mobile-navigation-overlay {
    z-index: 50;
}

/* --------------------------------------------------------------------------
   HERO: clean image, bright typography, controlled spotlight
   -------------------------------------------------------------------------- */

.service-hero {
    min-height: clamp(680px, 90svh, 940px) !important;
    background: #020202 !important;
}

.service-hero__container {
    min-height: clamp(680px, 90svh, 940px) !important;
    padding-top: calc(var(--header-height) + clamp(42px, 5.5vh, 68px)) !important;
    padding-bottom: clamp(28px, 3.5vh, 42px) !important;
}

.service-hero__image {
    opacity: 1;
    background-position: center center !important;
    filter: brightness(1.03) contrast(1.04) !important;
}

.service-hero__image::after {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.09) 0%,
            transparent 24%,
            transparent 70%,
            rgba(0, 0, 0, 0.18) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.14) 0%,
            transparent 24%,
            transparent 76%,
            rgba(0, 0, 0, 0.14) 100%
        ) !important;
}

.service-hero::before {
    opacity: 0.28 !important;
}

.service-hero__ambient {
    opacity: 0.18 !important;
}

.service-hero__spotlight {
    opacity: 0.28 !important;
    filter: blur(28px) !important;
}

.service-hero__front-light {
    z-index: 1 !important;
    max-width: 820px;
    opacity: 0.16;
    mix-blend-mode: screen;
}

.service-hero__gleam {
    z-index: 2 !important;
    mix-blend-mode: screen;
}

.service-hero__title-wrap {
    width: min(1080px, 78vw) !important;
    margin-top: clamp(22px, 4vh, 50px) !important;
}

.service-hero__title {
    font-size: clamp(4.6rem, 9.1vw, 10.5rem) !important;
    line-height: 0.87 !important;
    font-weight: 500 !important;
}

.service-hero__title-line,
.service-hero__title-line--offset {
    opacity: 1;
}

.service-hero__title-word,
.service-hero__title-line--offset .service-hero__title-word {
    color: #f7f7f7 !important;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 38%,
            #e6e6e6 73%,
            #bdbdbd 100%
        ) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    filter:
        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.55))
        drop-shadow(0 14px 38px rgba(0, 0, 0, 0.58)) !important;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 24px rgba(255, 255, 255, 0.06) !important;
}

.service-hero__eyebrow,
.service-hero__description,
.hero-scroll-link,
.service-hero__coordinates {
    color: rgba(255, 255, 255, 0.91) !important;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.95),
        0 8px 26px rgba(0, 0, 0, 0.75);
}

.service-hero__eyebrow {
    font-weight: 650 !important;
}

.service-hero__description {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: clamp(0.8rem, 0.9vw, 0.98rem) !important;
    font-weight: 500;
}

.hero-scroll-link__text {
    color: rgba(255, 255, 255, 0.9) !important;
}

.hero-scroll-link__circle {
    border-color: rgba(255, 255, 255, 0.48) !important;
    background: rgba(0, 0, 0, 0.24) !important;
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.48),
        inset 0 0 20px rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   BACKGROUND VIDEOS: drastically clearer with readable foreground content
   -------------------------------------------------------------------------- */

.section-video-background {
    z-index: 0 !important;
    background: #030303;
}

.section-video-background__media {
    opacity: 0.78 !important;
    filter:
        grayscale(0.16)
        brightness(0.82)
        contrast(1.08)
        saturate(0.82) !important;
    transform: scale(1.015) !important;
}

.section-video-background--process .section-video-background__media {
    opacity: 0.72 !important;
    filter:
        grayscale(0.18)
        brightness(0.78)
        contrast(1.1)
        saturate(0.8) !important;
}

/* A restrained overlay: dark enough for text, not enough to hide the video. */
.section-video-background__shade {
    background:
        linear-gradient(
            180deg,
            rgba(2, 2, 2, 0.52) 0%,
            rgba(2, 2, 2, 0.10) 20%,
            rgba(2, 2, 2, 0.12) 76%,
            rgba(2, 2, 2, 0.58) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.46) 0%,
            rgba(0, 0, 0, 0.13) 45%,
            rgba(0, 0, 0, 0.32) 100%
        ) !important;
}

.services-introduction::before,
.process-section::before {
    opacity: 0.16 !important;
}

.services-introduction__container,
.process-section__container {
    z-index: 3 !important;
}

/* High-contrast text specifically where moving video sits behind it. */
.services-introduction .section-label,
.process-section .section-label {
    color: rgba(255, 255, 255, 0.82) !important;
    border-bottom-color: rgba(255, 255, 255, 0.23) !important;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.94);
}

.services-introduction__small-copy,
.process-section__intro,
.process-item p,
.process-item__number {
    color: rgba(255, 255, 255, 0.78) !important;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.98),
        0 8px 26px rgba(0, 0, 0, 0.82);
}

.services-introduction__title,
.process-section__title,
.process-item h3 {
    color: #ffffff !important;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.98),
        0 15px 42px rgba(0, 0, 0, 0.78);
}

.services-introduction__title .split-word__inner,
.process-section__title .split-word__inner {
    color: #ffffff !important;
}

.process-item {
    background:
        linear-gradient(
            135deg,
            rgba(7, 7, 7, 0.62),
            rgba(7, 7, 7, 0.24)
        ) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(7px);
}

/* Avoid browser paint/compositing artefacts around autoplaying videos. */
.section-video-background__media {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   RESPONSIVE CLARITY
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .noise-layer {
        display: none !important;
    }

    .vignette-layer {
        opacity: 0.22 !important;
    }

    .service-hero,
    .service-hero__container {
        min-height: 760px !important;
    }

    .service-hero__title-wrap,
    .service-hero__footer {
        width: 100% !important;
    }

    .service-hero__title {
        font-size: clamp(4rem, 13.5vw, 7.8rem) !important;
    }

    .section-video-background__media,
    .section-video-background--process .section-video-background__media {
        opacity: 0.72 !important;
        filter:
            grayscale(0.12)
            brightness(0.78)
            contrast(1.08) !important;
    }
}

@media (max-width: 600px) {
    .service-hero,
    .service-hero__container {
        min-height: 700px !important;
    }

    .service-hero__container {
        padding-top: calc(var(--header-height) + 34px) !important;
    }

    .service-hero__title {
        font-size: clamp(3.35rem, 16.8vw, 5.5rem) !important;
        line-height: 0.91 !important;
    }

    .service-hero__description {
        max-width: 94%;
        font-size: 0.76rem !important;
    }

    .section-video-background__shade {
        background:
            linear-gradient(
                180deg,
                rgba(2, 2, 2, 0.58),
                rgba(2, 2, 2, 0.18) 24%,
                rgba(2, 2, 2, 0.18) 74%,
                rgba(2, 2, 2, 0.62)
            ) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .noise-layer {
        display: none !important;
    }

    .section-video-background__media {
        transform: none !important;
    }
}


/* ==========================================================================
   FINAL CLEAN HERO FIX — FULL BLEED, NO SHRINKING, VALID CSS
   ========================================================================== */

.service-hero {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: #020202 !important;
}

.service-hero__image {
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;

    width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;

    background-image: url("./hero-background.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;

    opacity: 0;
    transform: translateX(-50%) !important;
    transform-origin: center center !important;

    filter: brightness(1.02) contrast(1.04) !important;
    animation:
        hero-background-fullbleed-reveal
        1.35s
        1.05s
        var(--ease-cinematic)
        forwards !important;

    pointer-events: none;
    will-change: opacity;
}

.service-hero__image::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            transparent 22%,
            transparent 72%,
            rgba(0, 0, 0, 0.20) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.13) 0%,
            transparent 22%,
            transparent 78%,
            rgba(0, 0, 0, 0.13) 100%
        );
    content: "";
}

@keyframes hero-background-fullbleed-reveal {
    from {
        opacity: 0;
        filter: brightness(0.48) contrast(1.04);
    }

    to {
        opacity: 1;
        filter: brightness(1.02) contrast(1.04);
    }
}

/* Keep every hero effect and all copy above the image. */
.service-hero::before {
    z-index: 1 !important;
}

.service-hero__spotlight {
    z-index: 2 !important;
}

.service-hero__ambient {
    z-index: 2 !important;
}

.service-hero__front-light {
    z-index: 3 !important;
}

.service-hero__gleam {
    z-index: 4 !important;
}

.service-hero__container {
    position: relative !important;
    z-index: 6 !important;

    min-height: 100svh !important;
    padding-top:
        calc(var(--header-height) + clamp(38px, 5vh, 64px))
        !important;
    padding-bottom: clamp(30px, 4vh, 48px) !important;
}

.service-hero__coordinates {
    z-index: 7 !important;
}

/* The heading must stay readable without hiding the artwork. */
.service-hero__title-word {
    color: #f7f7f7 !important;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f7f7 42%,
            #dedede 76%,
            #b9b9b9 100%
        ) !important;

    background-clip: text !important;
    -webkit-background-clip: text !important;

    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.72))
        drop-shadow(0 12px 32px rgba(0, 0, 0, 0.62))
        !important;
}

.service-hero__eyebrow,
.service-hero__description,
.hero-scroll-link,
.service-hero__coordinates {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.96),
        0 8px 24px rgba(0, 0, 0, 0.76)
        !important;
}

/* Retain only a nearly invisible texture. */
.noise-layer {
    opacity: 0.0025 !important;
    z-index: 1 !important;
    animation-duration: 1.2s !important;
}

.vignette-layer {
    z-index: 2 !important;
    opacity: 0.22 !important;
}

/* Clearer section videos. */
.section-video-background__media {
    opacity: 0.80 !important;
    filter:
        grayscale(0.10)
        brightness(0.86)
        contrast(1.06)
        saturate(0.90)
        !important;
}

.section-video-background--process
.section-video-background__media {
    opacity: 0.76 !important;
    filter:
        grayscale(0.12)
        brightness(0.82)
        contrast(1.08)
        saturate(0.86)
        !important;
}

.section-video-background__shade {
    background:
        linear-gradient(
            180deg,
            rgba(2, 2, 2, 0.44) 0%,
            rgba(2, 2, 2, 0.08) 22%,
            rgba(2, 2, 2, 0.10) 76%,
            rgba(2, 2, 2, 0.50) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.38) 0%,
            rgba(0, 0, 0, 0.10) 48%,
            rgba(0, 0, 0, 0.28) 100%
        ) !important;
}

@media (max-width: 900px) {
    .service-hero,
    .service-hero__container {
        min-height: 780px !important;
    }

    .service-hero__image {
        width: 100vw !important;
        height: 100% !important;
        background-position: center center !important;
        transform: translateX(-50%) !important;
    }

    .noise-layer {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .service-hero,
    .service-hero__container {
        min-height: 720px !important;
    }

    .service-hero__container {
        padding-top:
            calc(var(--header-height) + 30px)
            !important;
    }

    .service-hero__image {
        background-position: 50% 50% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__image {
        opacity: 1 !important;
        transform: translateX(-50%) !important;
        animation: none !important;
    }
}


/* ==========================================================================
   HERO IMAGE / VIDEO BLEED FINAL FIX
   ========================================================================== */

/*
 * Hide the fixed WebGL scene while the hero is visible.
 * This prevents particles or animated backgrounds from appearing above
 * and around the hero artwork.
 */
.webgl-canvas {
    transition: opacity 420ms ease;
}

body.hero-is-visible .webgl-canvas {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* The hero forms a completely opaque clipping context. */
.service-hero {
    position: relative !important;
    z-index: 10 !important;

    width: 100% !important;
    min-height: 100svh !important;
    overflow: clip !important;
    isolation: isolate !important;

    background: #000000 !important;
}

/*
 * A real image element is used instead of a CSS background.
 * object-fit: cover preserves the original aspect ratio and never stretches.
 */
.service-hero__image {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;

    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;

    object-fit: cover !important;
    object-position: 50% 50% !important;

    opacity: 0;
    transform: none !important;
    scale: none !important;

    filter: brightness(0.98) contrast(1.03) !important;

    animation:
        hero-image-opacity-reveal
        1.35s
        1.05s
        var(--ease-cinematic)
        forwards !important;

    pointer-events: none;
    user-select: none;
}

/* Remove old pseudo overlay that only worked on the former div. */
img.service-hero__image::after {
    display: none !important;
}

@keyframes hero-image-opacity-reveal {
    from {
        opacity: 0;
        filter: brightness(0.52) contrast(1.03);
    }

    to {
        opacity: 1;
        filter: brightness(0.98) contrast(1.03);
    }
}

/* One controlled overlay above the image. */
.service-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.14) 0%,
            rgba(0, 0, 0, 0.02) 25%,
            rgba(0, 0, 0, 0.02) 70%,
            rgba(0, 0, 0, 0.19) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.11) 0%,
            transparent 22%,
            transparent 78%,
            rgba(0, 0, 0, 0.11) 100%
        );

    pointer-events: none;
    content: "";
}

/* Place every hero component above the artwork and overlay. */
.service-hero::before {
    z-index: 2 !important;
}

.service-hero__spotlight,
.service-hero__ambient {
    z-index: 3 !important;
}

.service-hero__front-light {
    z-index: 4 !important;
}

.service-hero__gleam {
    z-index: 5 !important;
}

.service-hero__container {
    position: relative !important;
    z-index: 7 !important;
    min-height: 100svh !important;
}

.service-hero__coordinates {
    z-index: 8 !important;
}

/* Prevent the next section's video from ever painting into the hero. */
.services-introduction,
.process-section {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    contain: paint !important;
}

.section-video-background {
    inset: 0 !important;
    overflow: hidden !important;
    clip-path: inset(0) !important;
}

/* Disable old hero background declarations that may still exist earlier. */
.service-hero__image {
    background: none !important;
    background-image: none !important;
}

/* Desktop ultrawide: preserve composition without distortion. */
@media (min-aspect-ratio: 19 / 10) {
    .service-hero__image {
        object-fit: cover !important;
        object-position: 50% 50% !important;
    }
}

/* Taller displays need slight side crop rather than vertical stretching. */
@media (max-aspect-ratio: 4 / 3) {
    .service-hero__image {
        object-fit: cover !important;
        object-position: 50% 50% !important;
    }
}

@media (max-width: 900px) {
    .service-hero {
        min-height: 780px !important;
    }

    .service-hero__container {
        min-height: 780px !important;
    }

    .service-hero__image {
        object-position: 50% 50% !important;
    }
}

@media (max-width: 600px) {
    .service-hero,
    .service-hero__container {
        min-height: 720px !important;
    }

    .service-hero__image {
        object-position: 50% 50% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__image {
        opacity: 1 !important;
        animation: none !important;
    }
}


/* ==========================================================================
   TRUE EDGE-TO-EDGE HERO FIX
   Removes the visible dark top band and preserves image proportions.
   ========================================================================== */

html,
body,
.service-page,
.service-page main {
    margin: 0 !important;
    padding-top: 0 !important;
}

.service-page main {
    position: relative !important;
    top: 0 !important;
}

.service-hero {
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    background: #000 !important;
}

/*
 * Uniform scaling only: no width/height distortion.
 * The image is enlarged and shifted upward so the spotlight begins at
 * the top edge instead of leaving a dark horizontal band.
 */
.service-hero__image {
    position: absolute !important;
    z-index: 0 !important;

    top: -13vh !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;

    width: 100vw !important;
    max-width: none !important;
    height: calc(100% + 13vh) !important;
    min-height: calc(100% + 13vh) !important;

    object-fit: cover !important;
    object-position: 50% 0% !important;

    transform: translateX(-50%) scale(1.055) !important;
    transform-origin: 50% 0% !important;

    background: none !important;
    opacity: 1 !important;
    filter: brightness(1.02) contrast(1.03) !important;
    animation: none !important;
}

/* Remove competing old hero backgrounds that create the top slab. */
.service-hero--dawn::before,
.service-hero::before {
    z-index: 1 !important;
    background:
        radial-gradient(
            ellipse at 50% 20%,
            rgba(255, 255, 255, 0.025),
            transparent 45%
        ) !important;
}

.service-hero--dawn::after,
.service-hero::after {
    z-index: 2 !important;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 0%,
            transparent 18%,
            transparent 73%,
            rgba(0, 0, 0, 0.18) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.10),
            transparent 20%,
            transparent 80%,
            rgba(0, 0, 0, 0.10)
        ) !important;
}

/* Do not add a separate CSS spotlight over the image's built-in spotlight. */
.service-hero__spotlight {
    opacity: 0.08 !important;
}

.service-hero__ambient {
    opacity: 0.08 !important;
}

/* Header stays transparent over the image from the very top. */
.site-header {
    background: transparent !important;
    border-bottom-color: transparent !important;
}

.site-header:not(.is-scrolled) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Keep hero content above the corrected image. */
.service-hero__front-light {
    z-index: 3 !important;
}

.service-hero__gleam {
    z-index: 4 !important;
}

.service-hero__container {
    position: relative !important;
    z-index: 6 !important;
    min-height: 100svh !important;
    margin-top: 0 !important;
}

.service-hero__coordinates {
    z-index: 7 !important;
}

/* Prevent all video/WebGL layers from showing through the hero. */
body.hero-is-visible .webgl-canvas,
body.hero-is-visible .section-video-background {
    visibility: hidden !important;
    opacity: 0 !important;
}

.services-introduction .section-video-background,
.process-section .section-video-background {
    visibility: visible !important;
}

/* Very wide monitors: enlarge uniformly instead of stretching. */
@media (min-aspect-ratio: 21 / 9) {
    .service-hero__image {
        top: -17vh !important;
        height: calc(100% + 17vh) !important;
        min-height: calc(100% + 17vh) !important;
        transform: translateX(-50%) scale(1.09) !important;
    }
}

@media (max-width: 900px) {
    .service-hero__image {
        top: -8vh !important;
        height: calc(100% + 8vh) !important;
        min-height: calc(100% + 8vh) !important;
        transform: translateX(-50%) scale(1.04) !important;
        object-position: 50% 0% !important;
    }
}

@media (max-width: 600px) {
    .service-hero__image {
        top: -4vh !important;
        height: calc(100% + 4vh) !important;
        min-height: calc(100% + 4vh) !important;
        transform: translateX(-50%) scale(1.02) !important;
    }
}


/* ==========================================================================
   VIDEO-ONLY HERO — FINAL REPLACEMENT
   ========================================================================== */

/* Remove the old image implementation completely. */
.service-hero__image {
    display: none !important;
}

/* Full-screen hero, starting at the very top of the viewport. */
html,
body,
.service-page,
.service-page main {
    margin: 0 !important;
    padding-top: 0 !important;
}

.service-hero {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    min-height: 100svh !important;
    margin: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: #000000 !important;
}

/* Video wrapper always fills the hero without a top gap. */
.service-hero__video-wrap {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;

    background: #000000;
    pointer-events: none;
}

/* Preserve video aspect ratio; crop instead of stretching. */
.service-hero__video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    opacity: 0;
    transform: translate(-50%, -50%) scale(1.015) !important;
    transform-origin: center center !important;

    filter:
        brightness(0.82)
        contrast(1.08)
        saturate(0.88);

    animation:
        hero-video-reveal
        1.45s
        0.9s
        var(--ease-cinematic)
        forwards;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: opacity;
}

/* A restrained overlay keeps the text readable without hiding the video. */
.service-hero__video-shade {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.20) 0%,
            rgba(0, 0, 0, 0.04) 24%,
            rgba(0, 0, 0, 0.08) 68%,
            rgba(0, 0, 0, 0.35) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.04) 34%,
            rgba(0, 0, 0, 0.04) 68%,
            rgba(0, 0, 0, 0.25) 100%
        );

    pointer-events: none;
}

@keyframes hero-video-reveal {
    from {
        opacity: 0;
        filter:
            brightness(0.30)
            contrast(1.08)
            saturate(0.82);
    }

    to {
        opacity: 1;
        filter:
            brightness(0.82)
            contrast(1.08)
            saturate(0.88);
    }
}

/* Remove image-specific and duplicated dark overlays. */
.service-hero::before {
    z-index: 2 !important;
    opacity: 0.18 !important;
    background:
        radial-gradient(
            ellipse at 50% 22%,
            rgba(255, 255, 255, 0.045),
            transparent 46%
        ) !important;
}

.service-hero::after {
    display: none !important;
}

/* Existing cinematic effects and content stay above the video. */
.service-hero__spotlight,
.service-hero__ambient {
    z-index: 3 !important;
}

.service-hero__front-light {
    z-index: 4 !important;
}

.service-hero__gleam {
    z-index: 5 !important;
}

.service-hero__container {
    position: relative !important;
    z-index: 7 !important;

    min-height: 100svh !important;
    margin-top: 0 !important;
    padding-top:
        calc(var(--header-height) + clamp(38px, 5vh, 64px))
        !important;
    padding-bottom: clamp(28px, 4vh, 48px) !important;
}

.service-hero__coordinates {
    z-index: 8 !important;
}

/* Header remains transparent over the hero video. */
.site-header {
    background: transparent !important;
    border-bottom-color: transparent !important;
}

.site-header:not(.is-scrolled) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Keep the hero clean and remove the old heavy film layer. */
body.hero-is-visible .noise-layer {
    opacity: 0.0015 !important;
}

body.hero-is-visible .vignette-layer {
    opacity: 0.16 !important;
}

/* Hide WebGL only while the hero is visible. */
body.hero-is-visible .webgl-canvas {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Do not hide the hero's own video through broad section selectors. */
body.hero-is-visible .service-hero__video-wrap,
body.hero-is-visible .service-hero__video {
    visibility: visible !important;
}

/* Strong but clean text contrast. */
.service-hero__title-word {
    color: #ffffff !important;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f4f4 48%,
            #d6d6d6 80%,
            #b8b8b8 100%
        ) !important;

    background-clip: text !important;
    -webkit-background-clip: text !important;

    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.76))
        drop-shadow(0 14px 34px rgba(0, 0, 0, 0.62))
        !important;
}

.service-hero__eyebrow,
.service-hero__description,
.hero-scroll-link,
.service-hero__coordinates {
    color: rgba(255, 255, 255, 0.92) !important;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.98),
        0 8px 26px rgba(0, 0, 0, 0.78)
        !important;
}

@media (max-width: 900px) {
    .service-hero,
    .service-hero__container {
        min-height: 780px !important;
    }

    .service-hero__video {
        transform:
            translate(-50%, -50%)
            scale(1.025)
            !important;
    }
}

@media (max-width: 600px) {
    .service-hero,
    .service-hero__container {
        min-height: 720px !important;
    }

    .service-hero__container {
        padding-top:
            calc(var(--header-height) + 30px)
            !important;
    }

    .service-hero__video {
        object-position: 50% 50% !important;
        transform:
            translate(-50%, -50%)
            scale(1.035)
            !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__video {
        opacity: 1 !important;
        animation: none !important;
    }
}


/* Minimal back button */
.site-header,.primary-navigation,.menu-toggle,.header-cta,.scroll-progress,.section-counter{display:none!important;}
.back-to-website{
position:fixed;top:28px;left:28px;z-index:200;
display:inline-flex;align-items:center;gap:10px;
padding:10px 16px;border:1px solid rgba(255,255,255,.14);
border-radius:999px;background:rgba(0,0,0,.28);
backdrop-filter:blur(12px);
color:rgba(255,255,255,.82);
font:500 14px/1 Inter,sans-serif;
transition:.25s ease;
}
.back-to-website:hover{
color:#fff;
border-color:rgba(255,255,255,.35);
background:rgba(0,0,0,.42);
transform:translateX(-4px);
}


/* ==========================================================================
   FINAL CINEMATIC SERVICES PAGE LAYOUT
   Header removed, video-only hero, centered composition
   ========================================================================== */

:root {
    --header-height: 0px;
}

html,
body,
.service-page,
#main-content {
    margin: 0 !important;
    padding: 0 !important;
}

body {
    overflow-x: hidden;
}

/* Remove every legacy navigation/fixed counter element. */
.site-header,
.primary-navigation,
.menu-toggle,
.header-cta,
.scroll-progress,
.section-counter,
.mobile-navigation-overlay {
    display: none !important;
}

/* Minimal website return control. */
.back-to-website {
    position: fixed;
    z-index: 300;
    top: clamp(18px, 2.4vw, 32px);
    left: clamp(18px, 2.4vw, 32px);

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.32);
    color: rgba(255, 255, 255, 0.84);

    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;

    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        transform 220ms var(--ease-cinematic);

    opacity: 0;
    animation: back-link-reveal 700ms 1.8s var(--ease-cinematic) forwards;
}

.back-to-website:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(0, 0, 0, 0.54);
    transform: translateX(-4px);
}

.back-to-website__arrow {
    display: inline-block;
    font-size: 1rem;
    transition: transform 220ms var(--ease-cinematic);
}

.back-to-website:hover .back-to-website__arrow {
    transform: translateX(-3px);
}

@keyframes back-link-reveal {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Full viewport hero with true vertical centering. */
.service-hero {
    position: relative !important;
    width: 100% !important;
    min-height: 100svh !important;
    margin: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: #000000 !important;
}

.service-hero__video-wrap {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #000000;
    pointer-events: none;
}

.service-hero__video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    opacity: 0;
    transform: translate(-50%, -50%) scale(1.015) !important;

    filter:
        brightness(0.84)
        contrast(1.08)
        saturate(0.90);

    animation:
        final-hero-video-reveal
        1.5s
        0.8s
        var(--ease-cinematic)
        forwards !important;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@keyframes final-hero-video-reveal {
    from {
        opacity: 0;
        filter:
            brightness(0.28)
            contrast(1.08)
            saturate(0.84);
    }

    to {
        opacity: 1;
        filter:
            brightness(0.84)
            contrast(1.08)
            saturate(0.90);
    }
}

.service-hero__video-shade {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.03) 22%,
            rgba(0, 0, 0, 0.05) 68%,
            rgba(0, 0, 0, 0.32) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.22) 0%,
            rgba(0, 0, 0, 0.03) 32%,
            rgba(0, 0, 0, 0.03) 68%,
            rgba(0, 0, 0, 0.22) 100%
        );

    pointer-events: none;
}

/* Remove old competing image/background implementations. */
.service-hero__image {
    display: none !important;
}

.service-hero::after {
    display: none !important;
}

.service-hero::before {
    z-index: 2 !important;
    opacity: 0.12 !important;
    background:
        radial-gradient(
            ellipse at 50% 28%,
            rgba(255, 255, 255, 0.035),
            transparent 48%
        ) !important;
}

.service-hero__spotlight,
.service-hero__ambient {
    z-index: 3 !important;
    opacity: 0.12 !important;
}

.service-hero__front-light {
    z-index: 4 !important;
}

.service-hero__gleam {
    z-index: 5 !important;
}

/*
 * This is the key fix:
 * the entire hero composition is centered as one group instead of being
 * pushed down by the removed header or pinned near the top.
 */
.service-hero__container {
    position: relative !important;
    z-index: 7 !important;

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

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

    min-height: 100svh !important;
    margin-inline: auto !important;

    padding-top: clamp(72px, 8vh, 104px) !important;
    padding-bottom: clamp(90px, 10vh, 130px) !important;
}

/* Keep the whole copy block visually balanced. */
.service-hero__eyebrow {
    margin: 0 0 clamp(24px, 3.5vh, 42px) !important;
}

.service-hero__title-wrap {
    width: min(1080px, 78vw) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.service-hero__title {
    gap: 0 !important;
    margin: 0 !important;

    font-size: clamp(4.5rem, 8.9vw, 10.4rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.07em !important;
    line-height: 0.87 !important;
}

.service-hero__title-line {
    display: block !important;
    margin: 0 !important;
    padding: 0.035em 0.08em 0.075em 0 !important;
}

.service-hero__title-line + .service-hero__title-line {
    margin-top: -0.015em !important;
}

.service-hero__title-word {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f7f7 44%,
            #dddddd 78%,
            #bdbdbd 100%
        ) !important;

    background-clip: text !important;
    -webkit-background-clip: text !important;

    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.78))
        drop-shadow(0 15px 36px rgba(0, 0, 0, 0.62))
        !important;
}

.service-hero__footer {
    position: relative !important;

    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: clamp(28px, 6vw, 100px) !important;

    width: min(1080px, 78vw) !important;
    margin-top: clamp(20px, 3vh, 34px) !important;
}

.service-hero__description {
    width: min(520px, 52vw) !important;
    color: rgba(255, 255, 255, 0.82) !important;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace !important;

    font-size: clamp(0.78rem, 0.88vw, 0.96rem) !important;
    font-weight: 500 !important;
    line-height: 1.58 !important;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.98),
        0 8px 24px rgba(0, 0, 0, 0.78)
        !important;
}

.hero-scroll-link {
    position: static !important;

    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 11px !important;

    transform: none !important;
}

.hero-scroll-link__text {
    color: rgba(255, 255, 255, 0.90) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.hero-scroll-link__circle {
    border-color: rgba(255, 255, 255, 0.46) !important;
    background: rgba(0, 0, 0, 0.24) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.service-hero__coordinates {
    display: none !important;
}

/* Nearly invisible global texture. */
.noise-layer {
    opacity: 0.002 !important;
    z-index: 1 !important;
    animation-duration: 1.1s !important;
}

.vignette-layer {
    z-index: 2 !important;
    opacity: 0.18 !important;
}

/* Videos in later sections remain contained and clear. */
.services-introduction,
.process-section {
    overflow: hidden !important;
    isolation: isolate !important;
}

.section-video-background {
    inset: 0 !important;
    overflow: hidden !important;
}

.section-video-background__media {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    opacity: 0.76 !important;

    filter:
        grayscale(0.10)
        brightness(0.82)
        contrast(1.07)
        saturate(0.88)
        !important;
}

.section-video-background--process
.section-video-background__media {
    opacity: 0.72 !important;
}

.section-video-background__shade {
    background:
        linear-gradient(
            180deg,
            rgba(2, 2, 2, 0.44) 0%,
            rgba(2, 2, 2, 0.10) 22%,
            rgba(2, 2, 2, 0.12) 76%,
            rgba(2, 2, 2, 0.52) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.38) 0%,
            rgba(0, 0, 0, 0.10) 48%,
            rgba(0, 0, 0, 0.28) 100%
        ) !important;
}

@media (max-width: 900px) {
    .service-hero,
    .service-hero__container {
        min-height: 780px !important;
    }

    .service-hero__container {
        padding-top: 82px !important;
        padding-bottom: 92px !important;
    }

    .service-hero__title-wrap,
    .service-hero__footer {
        width: 100% !important;
    }

    .service-hero__title {
        font-size: clamp(4rem, 13.5vw, 7.8rem) !important;
    }

    .service-hero__footer {
        align-items: flex-start !important;
    }

    .service-hero__description {
        width: min(520px, 78vw) !important;
    }

    .noise-layer {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .back-to-website {
        top: 14px;
        left: 14px;
        padding: 9px 13px;
        font-size: 0.72rem;
    }

    .service-hero,
    .service-hero__container {
        min-height: 720px !important;
    }

    .service-hero__container {
        justify-content: center !important;
        padding-top: 78px !important;
        padding-bottom: 84px !important;
    }

    .service-hero__eyebrow {
        margin-bottom: 22px !important;
    }

    .service-hero__title {
        font-size: clamp(3.4rem, 16.8vw, 5.6rem) !important;
        line-height: 0.91 !important;
    }

    .service-hero__footer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 24px !important;
        margin-top: 18px !important;
    }

    .service-hero__description {
        width: 100% !important;
        font-size: 0.75rem !important;
    }

    .hero-scroll-link {
        align-self: center !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__video {
        opacity: 1 !important;
        animation: none !important;
    }

    .back-to-website {
        opacity: 1 !important;
        animation: none !important;
    }
}


/* ==========================================================================
   HERO TYPOGRAPHY — GEOMETRIC VIDEO MATCH + LOAD-ON-OPEN
   ========================================================================== */

/*
 * The hero should be fully initialized as soon as the page opens.
 * These declarations prevent generic scroll-reveal rules from hiding it.
 */
.service-hero .service-hero__eyebrow,
.service-hero .service-hero__title,
.service-hero .service-hero__title-line,
.service-hero .service-hero__title-word,
.service-hero .service-hero__description,
.service-hero .hero-scroll-link {
    visibility: visible !important;
}

.service-hero .service-hero__eyebrow,
.service-hero .service-hero__description,
.service-hero .hero-scroll-link {
    opacity: 1;
}

/*
 * Geometric, technical typography that visually follows the sharp diagonal
 * lines in Video1.mp4.
 */
.service-hero__title {
    font-family:
        "Space Grotesk",
        "Manrope",
        "Inter",
        sans-serif !important;

    font-size: clamp(4.3rem, 8.45vw, 9.8rem) !important;
    font-weight: 500 !important;
    line-height: 0.88 !important;
    letter-spacing: -0.075em !important;

    text-transform: none !important;
}

.service-hero__title-line {
    position: relative;
    display: block !important;
    overflow: visible !important;
}

/* Brighter metallic text with a subtle directional edge light. */
.service-hero__title-word {
    position: relative;
    display: inline-block;

    color: #f6f6f6 !important;

    background:
        linear-gradient(
            112deg,
            #8f8f8f 0%,
            #f8f8f8 17%,
            #ffffff 43%,
            #cfcfcf 68%,
            #777777 100%
        ) !important;

    background-size: 180% 100% !important;
    background-position: 48% 50% !important;

    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    text-shadow: none !important;

    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.88))
        drop-shadow(0 18px 42px rgba(0, 0, 0, 0.62))
        drop-shadow(0 0 18px rgba(255, 255, 255, 0.035))
        !important;

    transform-origin: 50% 100%;
}

/* Thin luminous rule echoing the geometry in the video. */
.service-hero__title-line:first-child::after {
    position: absolute;
    right: -7%;
    bottom: 0.08em;

    width: clamp(72px, 9vw, 170px);
    height: 1px;

    opacity: 0.34;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.72),
            rgba(255, 255, 255, 0)
        );

    box-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
    content: "";
}

/* Small heading adopts the same technical language. */
.service-hero__eyebrow {
    font-family:
        "Space Grotesk",
        "Inter",
        sans-serif !important;

    font-size: clamp(0.64rem, 0.68vw, 0.76rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.24em !important;

    color: rgba(255, 255, 255, 0.78) !important;
}



/* Supporting copy becomes cleaner and more integrated with the video. */
.service-hero__description {
    font-family:
        "Space Grotesk",
        "Inter",
        sans-serif !important;

    max-width: 470px;
    color: rgba(255, 255, 255, 0.62) !important;

    font-size: clamp(0.74rem, 0.80vw, 0.88rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.025em !important;
    line-height: 1.62 !important;
}

/* Explore control uses the same crisp geometric font. */
.hero-scroll-link__text {
    font-family:
        "Space Grotesk",
        "Inter",
        sans-serif !important;

    font-size: 0.63rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
}

/*
 * Page-load reveal only.
 * It runs immediately after the loader and never waits for scrolling.
 */
body.is-ready .service-hero__eyebrow {
    animation:
        hero-copy-load
        780ms
        80ms
        var(--ease-cinematic)
        both;
}

body.is-ready .service-hero__title-line:first-child
.service-hero__title-word {
    animation:
        hero-title-load
        1.05s
        120ms
        var(--ease-cinematic)
        both;
}

body.is-ready .service-hero__title-line--offset
.service-hero__title-word {
    animation:
        hero-title-load
        1.05s
        235ms
        var(--ease-cinematic)
        both;
}

body.is-ready .service-hero__description {
    animation:
        hero-copy-load
        850ms
        430ms
        var(--ease-cinematic)
        both;
}

body.is-ready .hero-scroll-link {
    animation:
        hero-copy-load
        850ms
        520ms
        var(--ease-cinematic)
        both;
}

@keyframes hero-title-load {
    from {
        opacity: 0;
        transform:
            translate3d(0, 42px, 0)
            skewY(2deg);
        filter:
            blur(9px)
            drop-shadow(0 18px 42px rgba(0, 0, 0, 0.62));
    }

    to {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            skewY(0deg);
        filter:
            blur(0)
            drop-shadow(0 2px 2px rgba(0, 0, 0, 0.88))
            drop-shadow(0 18px 42px rgba(0, 0, 0, 0.62));
    }
}

@keyframes hero-copy-load {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* Stop any old scroll code or inline transforms from moving the hero afterward. */
body.is-ready .service-hero__title-line,
body.is-ready .service-hero__title,
body.is-ready .service-hero__footer {
    opacity: 1 !important;
}

@media (max-width: 900px) {
    .service-hero__title {
        font-size: clamp(3.9rem, 13vw, 7.3rem) !important;
        letter-spacing: -0.07em !important;
    }

    .service-hero__title-line:first-child::after {
        display: none;
    }
}

@media (max-width: 600px) {
    .service-hero__title {
        font-size: clamp(3.25rem, 16vw, 5.25rem) !important;
        line-height: 0.92 !important;
        letter-spacing: -0.065em !important;
    }

    .service-hero__description {
        font-size: 0.73rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.is-ready .service-hero__eyebrow,
    body.is-ready .service-hero__title-word,
    body.is-ready .service-hero__description,
    body.is-ready .hero-scroll-link {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}


/* ==========================================================================
   SINGLE HERO RENDER FIX
   The hero now reveals once through GSAP after the loader.
   No duplicate CSS animation and no scroll-triggered hero replay.
   ========================================================================== */

body.is-ready .service-hero__eyebrow,
body.is-ready .service-hero__title-line:first-child
.service-hero__title-word,
body.is-ready .service-hero__title-line--offset
.service-hero__title-word,
body.is-ready .service-hero__description,
body.is-ready .hero-scroll-link {
    animation: none !important;
}

/*
 * Initial visibility is controlled by createHeroIntroTimeline().
 * This prevents the small text from appearing first and then animating again.
 */
.service-hero__eyebrow,
.service-hero__description,
.hero-scroll-link,
.service-hero__title-word {
    opacity: 0;
}

/* After GSAP finishes, keep everything stable and visible. */
body.is-ready .service-hero__eyebrow,
body.is-ready .service-hero__description,
body.is-ready .hero-scroll-link,
body.is-ready .service-hero__title-word {
    visibility: visible !important;
}

/* No scroll-based hero replay or movement. */
.service-hero__title,
.service-hero__title-line,
.service-hero__footer,
.service-hero__eyebrow,
.service-hero__description,
.hero-scroll-link {
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__eyebrow,
    .service-hero__description,
    .hero-scroll-link,
    .service-hero__title-word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}


/* ==========================================================================
   CLEAN HERO REBUILD — VIDEO FADE + SYNE TYPOGRAPHY
   ========================================================================== */

/* Remove all obsolete hero light effects. */
.service-hero__gleam,
.service-hero__front-light,
.service-hero__spotlight,
.service-hero__horizon,
.service-hero__ambient {
    display: none !important;
}

/* Hero video is always available and fades through the GSAP load timeline. */
.service-hero__video {
    opacity: 0;
    animation: none !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;

    transform: translate(-50%, -50%) scale(1.01) !important;

    filter:
        brightness(0.88)
        contrast(1.06)
        saturate(0.94)
        !important;
}

/* Light, controlled overlay that does not hide the video. */
.service-hero__video-shade {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.58) 0%,
            rgba(0, 0, 0, 0.30) 30%,
            rgba(0, 0, 0, 0.06) 66%,
            rgba(0, 0, 0, 0.18) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12) 0%,
            transparent 25%,
            transparent 72%,
            rgba(0, 0, 0, 0.24) 100%
        ) !important;
}

/* Remove competing pseudo backgrounds. */
.service-hero::before,
.service-hero::after {
    display: none !important;
}

/* Balanced hero layout. */
.service-hero__container {
    justify-content: center !important;
    padding-top: clamp(70px, 8vh, 100px) !important;
    padding-bottom: clamp(88px, 10vh, 126px) !important;
}

/* New premium, editorial hero typography. */
.service-hero__title {
    font-family:
        "Syne",
        "Manrope",
        "Inter",
        sans-serif !important;

    font-size: clamp(4.25rem, 8vw, 9.3rem) !important;
    font-weight: 500 !important;
    line-height: 0.89 !important;
    letter-spacing: -0.062em !important;
}

.service-hero__title-line {
    overflow: visible !important;
}

.service-hero__title-word,
.service-hero__title-line--offset .service-hero__title-word {
    display: inline-block;

    color: #f4f3ef !important;
    -webkit-text-fill-color: #f4f3ef !important;

    background: none !important;
    background-image: none !important;

    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.78),
        0 12px 30px rgba(0, 0, 0, 0.42)
        !important;

    filter: none !important;
    -webkit-filter: none !important;

    opacity: 0;
    transform: translate3d(0, 24px, 0);
}

.service-hero__title-line:first-child::after {
    display: none !important;
}

/* Refined small copy. */
.service-hero__eyebrow {
    font-family:
        "Syne",
        "Inter",
        sans-serif !important;

    color: rgba(255, 255, 255, 0.72) !important;
    font-size: clamp(0.60rem, 0.64vw, 0.70rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;

    filter: none !important;
}

.service-hero__description {
    font-family:
        "Inter",
        sans-serif !important;

    max-width: 470px;
    color: rgba(255, 255, 255, 0.67) !important;

    font-size: clamp(0.73rem, 0.78vw, 0.84rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.62 !important;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.88) !important;
    filter: none !important;
}

.hero-scroll-link {
    right: clamp(24px, 4vw, 72px) !important;
    bottom: clamp(28px, 4vw, 58px) !important;
}

.hero-scroll-link__text {
    font-family:
        "Syne",
        "Inter",
        sans-serif !important;

    font-size: 0.62rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.18em !important;
}

/* Prevent previous CSS animations from replaying the hero. */
body.is-ready .service-hero__eyebrow,
body.is-ready .service-hero__title-word,
body.is-ready .service-hero__description,
body.is-ready .hero-scroll-link {
    animation: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Keep the background visible after the one-time fade completes. */
body.is-ready .service-hero__video {
    animation: none !important;
}

@media (max-width: 900px) {
    .service-hero__title {
        font-size: clamp(3.8rem, 12.4vw, 6.9rem) !important;
        letter-spacing: -0.055em !important;
    }
}

@media (max-width: 600px) {
    .service-hero__container {
        padding-top: 74px !important;
        padding-bottom: 96px !important;
    }

    .service-hero__title {
        font-size: clamp(3rem, 15.4vw, 4.9rem) !important;
        line-height: 0.94 !important;
        letter-spacing: -0.048em !important;
    }

    .hero-scroll-link {
        right: 18px !important;
        bottom: 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__video,
    .service-hero__title-word,
    .service-hero__eyebrow,
    .service-hero__description,
    .hero-scroll-link {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ==========================================================================
   RICH INTRODUCTION + REFINED PAGE REVEALS
   ========================================================================== */

/* Initial page content is available immediately; hero handles its own fade. */
.page-loader {
    display: none !important;
}

body.is-loading {
    overflow: auto !important;
}

/* Back link is plain text, not a pill/button. */
.back-to-website {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    color: rgba(255, 255, 255, 0.70) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.04em !important;
}

.back-to-website:hover {
    background: transparent !important;
    color: #ffffff !important;
    transform: none !important;
}

.back-to-website:hover .back-to-website__arrow {
    transform: translateX(-4px);
}

/* Give the introduction meaningful visual density. */
.services-introduction {
    min-height: auto !important;
    padding:
        clamp(110px, 12vw, 190px)
        0
        clamp(120px, 14vw, 220px)
        !important;
}

.services-introduction__container {
    display: block !important;
}

.services-introduction__content {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(380px, 0.92fr)
        !important;
    gap: clamp(70px, 8vw, 150px) !important;
    align-items: start !important;

    margin-top: clamp(72px, 8vw, 130px) !important;
}

.services-introduction__lead {
    position: sticky;
    top: clamp(90px, 12vh, 150px);
}

.services-introduction__small-copy {
    max-width: 320px !important;
    margin-bottom: clamp(34px, 4vw, 62px) !important;
}

.services-introduction__title {
    max-width: 920px !important;
    font-size: clamp(3.5rem, 5.7vw, 7.1rem) !important;
    line-height: 0.98 !important;
}

.services-introduction__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.intro-detail {
    position: relative;
    min-height: 250px;
    padding: clamp(26px, 2.6vw, 42px);

    border-right: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );

    transition:
        background 500ms ease,
        transform 500ms var(--ease-cinematic);
}

.intro-detail:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.015)
        );
    transform: translateY(-5px);
}

.intro-detail::after {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 26px;
    height: 26px;
    border-right: 1px solid rgba(255, 255, 255, 0.24);
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
    content: "";
}

.intro-detail__number {
    display: block;
    margin-bottom: clamp(52px, 6vw, 88px);

    color: rgba(255, 255, 255, 0.38);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.intro-detail h3 {
    margin-bottom: 18px;
    color: #ffffff;
    font-size: clamp(1.2rem, 1.45vw, 1.7rem);
    font-weight: 500;
    letter-spacing: -0.035em;
}

.intro-detail p {
    max-width: 310px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.84rem;
    line-height: 1.72;
}

.services-introduction__metrics {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: clamp(54px, 6vw, 96px);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.intro-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    min-height: 120px;
    padding: 28px clamp(22px, 2.5vw, 42px);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.intro-metric:last-child {
    border-right: 0;
}

.intro-metric strong {
    color: #ffffff;
    font-family: "Syne", "Manrope", sans-serif;
    font-size: clamp(2rem, 3.2vw, 4rem);
    font-weight: 500;
    letter-spacing: -0.06em;
}

.intro-metric span {
    color: rgba(255, 255, 255, 0.47);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.services-introduction__line {
    margin-top: clamp(70px, 8vw, 130px) !important;
}

/* Keep footer clean after removing its navigation. */
.site-footer__bottom {
    grid-template-columns: 1fr auto !important;
}

.site-footer__navigation {
    display: none !important;
}

@media (max-width: 1050px) {
    .services-introduction__content {
        grid-template-columns: 1fr !important;
    }

    .services-introduction__lead {
        position: relative;
        top: auto;
    }
}

@media (max-width: 700px) {
    .services-introduction__details {
        grid-template-columns: 1fr;
    }

    .intro-detail {
        min-height: 220px;
    }

    .services-introduction__metrics {
        grid-template-columns: 1fr;
    }

    .intro-metric {
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .intro-metric:last-child {
        border-bottom: 0;
    }
}


/* ==========================================================================
   MINIMAL STABLE FOOTER WORDMARK
   ========================================================================== */

/*
 * Remove the previous circular SP mark, large statement and any visual jump.
 * The footer now presents one quiet, lightweight wordmark.
 */
.site-footer {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.site-footer__top--minimal {
    display: block !important;
    min-height: 0 !important;
}

.site-footer__brand,
.site-footer__brand-mark,
.site-footer__brand-name,
.site-footer__statement {
    display: none !important;
}

.site-footer__wordmark {
    display: inline-block;

    color: rgba(255, 255, 255, 0.58);
    font-family:
        "Inter",
        sans-serif;
    font-size: clamp(0.92rem, 1.15vw, 1.18rem);
    font-weight: 300;
    letter-spacing: 0.015em;
    line-height: 1.3;

    opacity: 1 !important;
    transform: none !important;
    filter: none !important;

    transition: color 220ms ease;
}

.site-footer__wordmark:hover {
    color: rgba(255, 255, 255, 0.92);
}

/* Compact the footer now that the oversized branding has been removed. */
.site-footer__container {
    padding-top: clamp(58px, 7vh, 88px) !important;
    padding-bottom: clamp(28px, 4vh, 44px) !important;
}

.site-footer__divider {
    margin-block:
        clamp(34px, 4.5vh, 54px)
        clamp(22px, 3vh, 34px)
        !important;
}

.site-footer__top,
.site-footer__bottom,
.site-footer__divider,
.site-footer__wordmark {
    animation: none !important;
    transition-property: color !important;
}

@media (max-width: 767px) {
    .site-footer__container {
        padding-top: 54px !important;
        padding-bottom: 24px !important;
    }

    .site-footer__divider {
        margin-block: 34px 22px !important;
    }

    .site-footer__wordmark {
        font-size: 0.92rem;
    }
}


/* ==========================================================================
   SLOWER SERVICE SCENES + ABSTRACT 3D OBJECTS
   ========================================================================== */

/*
 * Each service now has more scroll distance, so the scene has time to reveal,
 * hold, move and exit instead of flashing past.
 */
.service-panel {
    min-height: 320vh !important;
}

.service-panel__sticky {
    perspective: 1400px;
}

.service-panel__body {
    padding-block: clamp(64px, 8vh, 110px) !important;
}

/* Richer visual zone. */
.service-panel__visual {
    min-height: min(74vh, 820px) !important;
    transform-style: preserve-3d;
}

.service-panel__object-anchor {
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
}

.service-core {
    position: absolute;
    z-index: 7;
    width: clamp(108px, 9vw, 172px);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    opacity: 0;
    animation: service-core-float 5.8s ease-in-out infinite;
}

.service-core__face {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.018)
        );
    box-shadow:
        inset 0 0 42px rgba(255, 255, 255, 0.025),
        0 0 30px rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(3px);
}

.service-core__face--front {
    transform: translateZ(clamp(54px, 4.5vw, 86px));
}

.service-core__face--back {
    transform:
        rotateY(180deg)
        translateZ(clamp(54px, 4.5vw, 86px));
}

.service-core__face--left {
    transform:
        rotateY(-90deg)
        translateZ(clamp(54px, 4.5vw, 86px));
}

.service-core__face--right {
    transform:
        rotateY(90deg)
        translateZ(clamp(54px, 4.5vw, 86px));
}

.service-core__face--top {
    transform:
        rotateX(90deg)
        translateZ(clamp(54px, 4.5vw, 86px));
}

.service-core__face--bottom {
    transform:
        rotateX(-90deg)
        translateZ(clamp(54px, 4.5vw, 86px));
}

.service-orbit {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
}

.service-orbit::before {
    position: absolute;
    top: 50%;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.65);
    content: "";
}

.service-orbit--outer {
    width: min(520px, 39vw);
    aspect-ratio: 1;
    transform:
        translate(-50%, -50%)
        rotateX(68deg)
        rotateZ(18deg);
    animation: service-orbit-spin 18s linear infinite;
}

.service-orbit--middle {
    width: min(390px, 30vw);
    aspect-ratio: 1;
    transform:
        translate(-50%, -50%)
        rotateY(64deg)
        rotateZ(-20deg);
    animation: service-orbit-spin-reverse 14s linear infinite;
}

.service-orbit--inner {
    width: min(265px, 21vw);
    aspect-ratio: 1;
    border-style: dashed;
    transform:
        translate(-50%, -50%)
        rotateX(38deg)
        rotateY(50deg);
    animation: service-orbit-spin 10s linear infinite;
}

.service-particle {
    position: absolute;
    z-index: 8;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    background: #ffffff;
    box-shadow:
        0 0 14px rgba(255, 255, 255, 0.9),
        0 0 38px rgba(255, 255, 255, 0.28);
}

.service-particle--one {
    top: 28%;
    left: 24%;
}

.service-particle--two {
    top: 62%;
    right: 20%;
    width: 5px;
    height: 5px;
}

.service-particle--three {
    right: 30%;
    bottom: 18%;
    width: 11px;
    height: 11px;
}

/* Service-specific object personalities. */
.service-panel[data-object="phone"] .service-core {
    width: clamp(82px, 6vw, 116px);
    height: clamp(170px, 15vw, 260px);
    aspect-ratio: auto;
}

.service-panel[data-object="server"] .service-core {
    width: clamp(150px, 12vw, 220px);
    height: clamp(110px, 9vw, 165px);
    aspect-ratio: auto;
}

.service-panel[data-object="ai-core"] .service-core {
    border-radius: 50%;
    animation:
        service-core-float 5.8s ease-in-out infinite,
        service-core-pulse 2.8s ease-in-out infinite;
}

.service-panel[data-object="ai-core"] .service-core__face {
    border-radius: 50%;
}

@keyframes service-core-float {
    0%,
    100% {
        transform: translateY(-8px);
    }

    50% {
        transform: translateY(10px);
    }
}

@keyframes service-core-pulse {
    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.08));
    }

    50% {
        filter: drop-shadow(0 0 28px rgba(255, 255, 255, 0.22));
    }
}

@keyframes service-orbit-spin {
    to {
        rotate: 360deg;
    }
}

@keyframes service-orbit-spin-reverse {
    to {
        rotate: -360deg;
    }
}

/* Slow the bottom progress motion visually. */
.service-panel__progress-bar {
    transition: width 160ms linear;
}

@media (max-width: 900px) {
    .service-panel {
        min-height: 250vh !important;
    }

    .service-orbit--outer {
        width: min(460px, 66vw);
    }

    .service-orbit--middle {
        width: min(340px, 52vw);
    }

    .service-orbit--inner {
        width: min(230px, 36vw);
    }
}

@media (max-width: 600px) {
    .service-panel {
        min-height: 210vh !important;
    }

    .service-core {
        width: 96px;
    }

    .service-orbit--outer {
        width: 290px;
    }

    .service-orbit--middle {
        width: 220px;
    }

    .service-orbit--inner {
        width: 150px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-core,
    .service-orbit {
        animation: none !important;
    }
}


/* ==========================================================================
   SMOOTH 3D MOTION FIX + EXPLORE REPOSITION
   ========================================================================== */

/*
 * The previous snapping happened because GSAP and CSS were both writing to the
 * same transform property. Continuous motion now uses the independent
 * translate/rotate properties, while GSAP handles scale and reveal transforms.
 */
.service-core {
    animation: service-core-float-smooth 6.8s ease-in-out infinite !important;
    will-change: transform, translate;
}

.service-panel[data-object="ai-core"] .service-core {
    animation:
        service-core-float-smooth 6.8s ease-in-out infinite,
        service-core-pulse 3.4s ease-in-out infinite
        !important;
}

.service-orbit--outer {
    animation: service-orbit-spin-smooth 22s linear infinite !important;
    will-change: rotate, opacity;
}

.service-orbit--middle {
    animation: service-orbit-spin-reverse-smooth 18s linear infinite !important;
    will-change: rotate, opacity;
}

.service-orbit--inner {
    animation: service-orbit-spin-smooth 14s linear infinite !important;
    will-change: rotate, opacity;
}

@keyframes service-core-float-smooth {
    0%,
    100% {
        translate: 0 -8px;
    }

    50% {
        translate: 0 10px;
    }
}

@keyframes service-orbit-spin-smooth {
    from {
        rotate: 0deg;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes service-orbit-spin-reverse-smooth {
    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }
}

/* Smoother compositing for all abstract 3D elements. */
.service-core,
.service-core__face,
.service-orbit,
.service-particle {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

.service-core__face {
    transition:
        border-color 700ms ease,
        background 700ms ease,
        box-shadow 700ms ease;
}

/* Move Explore to a clean bottom-center position. */
.hero-scroll-link {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: clamp(24px, 3.4vh, 42px) !important;
    transform: translateX(-50%) !important;
}

.hero-scroll-link:hover {
    transform: translateX(-50%) translateY(-4px) !important;
}

@media (max-width: 600px) {
    .hero-scroll-link {
        left: 50% !important;
        right: auto !important;
        bottom: 18px !important;
        transform: translateX(-50%) !important;
    }

    .hero-scroll-link:hover {
        transform: translateX(-50%) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-core,
    .service-orbit {
        animation: none !important;
        translate: none !important;
        rotate: none !important;
    }
}


/* ==========================================================================
   CHROMATIC TYPE + SECTION VIDEO FADE + CTA STRIP REMOVAL
   ========================================================================== */

/* Remove the unwanted final CTA coordinate strip. */
.final-cta__coordinates {
    display: none !important;
}

/*
 * Subtle chromatic aberration for major display typography.
 * It adds a cinematic RGB edge without making the copy unreadable.
 */
.service-hero__title,
.services-introduction__title,
.service-panel__title,
.capabilities-section__title,
.process-section__title,
.statistics-section__title,
.final-cta__title {
    text-shadow:
        -1.2px 0 rgba(255, 52, 76, 0.34),
        1.2px 0 rgba(31, 216, 255, 0.30),
        0 12px 34px rgba(0, 0, 0, 0.54)
        !important;
}

.service-hero__title-word,
.service-panel__title .split-word__inner,
.services-introduction__title .split-word__inner,
.capabilities-section__title .split-word__inner,
.process-section__title .split-word__inner,
.statistics-section__title .split-word__inner,
.final-cta__title .split-word__inner {
    filter:
        drop-shadow(-0.8px 0 rgba(255, 52, 76, 0.28))
        drop-shadow(0.8px 0 rgba(31, 216, 255, 0.25))
        !important;
}

/* Slightly stronger RGB separation during hover/focus moments. */
.service-panel__copy:hover .service-panel__title,
.final-cta__title:hover {
    text-shadow:
        -2px 0 rgba(255, 52, 76, 0.42),
        2px 0 rgba(31, 216, 255, 0.38),
        0 14px 36px rgba(0, 0, 0, 0.58)
        !important;
}

/* Supporting large copy receives a lighter treatment. */
.services-introduction__small-copy,
.capabilities-section__intro,
.process-section__description,
.final-cta__eyebrow {
    text-shadow:
        -0.45px 0 rgba(255, 52, 76, 0.20),
        0.45px 0 rgba(31, 216, 255, 0.18),
        0 5px 16px rgba(0, 0, 0, 0.50)
        !important;
}

/*
 * Non-hero videos no longer pop in.
 * The wrapper fades in only when its section reaches the viewport.
 */
.section-video-background {
    opacity: 0 !important;
    transform: scale(1.025);
    transition:
        opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1)
        !important;
}

.section-video-background.is-video-visible {
    opacity: 1 !important;
    transform: scale(1);
}

.section-video-background__media {
    opacity: 0.76 !important;
    transition:
        opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.15s ease
        !important;
}

/* Introduction video gets a slightly longer cinematic fade. */
.services-introduction .section-video-background {
    transition-duration: 1.45s, 1.8s !important;
}

/* Process video uses the same controlled entrance. */
.process-section .section-video-background {
    transition-duration: 1.25s, 1.65s !important;
}

/* Keep text readable while the video is fading in. */
.services-introduction,
.process-section {
    background: #030303 !important;
}

@media (max-width: 700px) {
    .service-hero__title,
    .services-introduction__title,
    .service-panel__title,
    .capabilities-section__title,
    .process-section__title,
    .statistics-section__title,
    .final-cta__title {
        text-shadow:
            -0.75px 0 rgba(255, 52, 76, 0.26),
            0.75px 0 rgba(31, 216, 255, 0.24),
            0 10px 28px rgba(0, 0, 0, 0.54)
            !important;
    }
}

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


/* ==========================================================================
   PERSISTENT SECTION VIDEO REVEAL
   Prevents videos from popping out when scrolling back upward.
   ========================================================================== */

/*
 * After a section video has revealed once, keep its visual layer rendered.
 * The video may pause far off-screen for performance, but its last frame
 * remains visible and the background never snaps to black.
 */
.section-video-background.has-video-revealed,
.section-video-background.is-video-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Use a gentle transition in both directions for any state changes. */
.section-video-background {
    transition:
        opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.65s cubic-bezier(0.22, 1, 0.36, 1)
        !important;
}

/*
 * Keep the last decoded video frame visible while playback is paused.
 * Do not hide or reset the media element when it leaves the viewport.
 */
.section-video-background__media {
    visibility: visible !important;
    opacity: 0.76 !important;
}

/* The first entrance still fades in normally. */
.section-video-background:not(.has-video-revealed) {
    opacity: 0 !important;
    transform: scale(1.025) !important;
}

.section-video-background.has-video-revealed {
    opacity: 1 !important;
    transform: scale(1) !important;
}

@media (prefers-reduced-motion: reduce) {
    .section-video-background,
    .section-video-background:not(.has-video-revealed),
    .section-video-background.has-video-revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   MARQUEE HOVER CONTINUITY FIX
   ========================================================================== */

/* Keep the technology marquee moving even while hovered. */
.technology-marquee:hover .technology-marquee__track,
.technology-marquee:focus-within .technology-marquee__track {
    animation-play-state: running !important;
}

/* Preserve smooth GPU-composited movement. */
.technology-marquee__track {
    animation-play-state: running !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}


/* Remove hero Explore prompt completely */
.hero-scroll-link,
.hero-scroll,
.hero-explore,
.scroll-indicator,
.hero-scroll-indicator{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}


/* ==========================================================================
   WORKING BUILT-IN PROJECT REQUEST WINDOW
   ========================================================================== */

.service-panel__link {
    display: none !important;
}

.site-footer__top--minimal {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.site-footer__actions {
    display: flex;
    align-items: center;
    gap: 34px;
}

.site-footer__action {
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.52);
    font: 400 .78rem/1.2 "Inter", sans-serif;
    cursor: pointer;
    transition: color .22s ease;
}

.site-footer__action:hover {
    color: #fff;
}

.project-modal {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

.project-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.project-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.project-modal__panel {
    position: relative;
    z-index: 2;
    width: min(980px, 100%);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    padding: clamp(28px, 4vw, 58px);
    border: 1px solid rgba(255,255,255,.14);
    background: #080808;
    box-shadow: 0 40px 140px rgba(0,0,0,.85);
    opacity: 0;
    transform: translateY(28px) scale(.98);
    transition: opacity .36s ease, transform .5s var(--ease-cinematic);
}

.project-modal.is-open .project-modal__panel {
    opacity: 1;
    transform: none;
}

.project-modal__close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.35rem;
    cursor: pointer;
}

.project-modal__header {
    max-width: 700px;
    margin-bottom: 42px;
}

.project-modal__header > span {
    color: rgba(255,255,255,.45);
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.project-modal__header h2 {
    margin-top: 16px;
    color: #f5f4ef;
    font-family: "Syne", "Manrope", sans-serif;
    font-size: clamp(2.8rem, 5.5vw, 5.8rem);
    font-weight: 500;
    letter-spacing: -.06em;
    line-height: .92;
}

.project-modal__header p {
    max-width: 600px;
    margin-top: 20px;
    color: rgba(255,255,255,.55);
    line-height: 1.7;
}

.project-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(255,255,255,.12);
    border-left: 1px solid rgba(255,255,255,.12);
}

.project-field {
    display: grid;
    gap: 12px;
    padding: 21px;
    border-right: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.project-field--wide {
    grid-column: 1 / -1;
}

.project-field span {
    color: rgba(255,255,255,.42);
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.project-field input,
.project-field textarea,
.project-field select {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: 400 1rem/1.5 "Inter", sans-serif;
}

.project-field select {
    color-scheme: dark;
}

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

.project-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
}

.project-form__message {
    min-height: 22px;
    color: rgba(255,255,255,.6);
    font-size: .82rem;
}

.project-form__message.is-error {
    color: #ff95a2;
}

.project-form__message.is-success {
    color: #afe2c0;
}

.project-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.55);
    background: transparent;
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    cursor: pointer;
}

.project-form__submit:disabled {
    opacity: .45;
    cursor: wait;
}

body.project-modal-open {
    overflow: hidden !important;
}

@media (max-width: 700px) {
    .site-footer__top--minimal {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-modal {
        padding: 0;
    }

    .project-modal__panel {
        width: 100%;
        max-height: 100dvh;
        min-height: 100dvh;
        padding: 70px 18px 28px;
    }

    .project-form-grid {
        grid-template-columns: 1fr;
    }

    .project-field--wide {
        grid-column: auto;
    }

    .project-form__footer {
        align-items: stretch;
        flex-direction: column;
    }
}


/* ==========================================================================
   FINAL PROJECT FORM — SINGLE COLUMN + CUSTOM PICKERS
   ========================================================================== */

.project-modal__panel {
    width: min(760px, 100%) !important;
}

.project-form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

.project-field,
.project-field--wide {
    grid-column: 1 !important;
}

.project-field {
    min-height: 104px;
    padding: 23px 24px !important;
    overflow: visible !important;
}

.project-field:has(textarea) {
    min-height: 215px;
}

.project-picker {
    position: relative;
    width: 100%;
}

.project-picker__trigger {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: 400 1rem/1.5 "Inter", sans-serif;
    text-align: left;
    cursor: pointer;
}

.project-picker__trigger svg {
    width: 18px;
    height: 18px;
    color: rgba(255,255,255,.55);
    transition: transform .25s ease;
}

.project-picker.is-open .project-picker__trigger svg {
    transform: rotate(180deg);
}

.project-picker__menu {
    position: absolute;
    z-index: 100;
    top: calc(100% + 12px);
    left: 0;
    width: 100%;
    max-height: 310px;
    overflow: hidden;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.16);
    background: #0c0c0e;
    box-shadow: 0 24px 70px rgba(0,0,0,.72);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.985);
    transform-origin: top;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease, transform .25s var(--ease-cinematic);
}

.project-picker.is-open .project-picker__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.project-picker__search {
    display: block;
    padding: 5px 5px 9px;
}

.project-picker__search input {
    width: 100%;
    min-height: 42px;
    padding: 0 12px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.035) !important;
    color: #fff !important;
    font-size: .86rem !important;
}

.project-picker__options {
    max-height: 238px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.22) transparent;
}

.project-picker__option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 13px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.72);
    font: 400 .86rem/1.35 "Inter", sans-serif;
    text-align: left;
    cursor: pointer;
}

.project-picker__option:hover,
.project-picker__option:focus-visible {
    outline: none;
    color: #fff;
    background: rgba(255,255,255,.075);
}

.project-picker__option[aria-selected="true"] {
    color: #fff;
    background: rgba(255,255,255,.11);
}

.project-picker__option strong {
    color: rgba(255,255,255,.42);
    font-size: .78rem;
    font-weight: 500;
}

.project-field textarea {
    min-height: 145px !important;
}

@media (max-width: 700px) {
    .project-picker__menu {
        position: fixed;
        z-index: 5100;
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        max-height: min(62dvh, 520px);
        transform: translateY(24px);
    }

    .project-picker.is-open .project-picker__menu {
        transform: translateY(0);
    }

    .project-picker__options {
        max-height: min(48dvh, 390px);
    }

    .project-field {
        min-height: 96px;
        padding: 20px 18px !important;
    }
}


/* ==========================================================================
   COMPACT SINGLE-WINDOW PROJECT MODAL
   No modal scrolling and no background-page scrolling.
   ========================================================================== */

html.project-modal-open,
body.project-modal-open {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
}

.project-modal {
    padding: 14px !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.project-modal__panel {
    width: min(760px, calc(100vw - 28px)) !important;
    height: min(94dvh, 860px) !important;
    max-height: min(94dvh, 860px) !important;
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;

    padding:
        clamp(20px, 2.2vw, 30px)
        clamp(20px, 2.5vw, 34px)
        !important;
}

.project-modal__header {
    flex: 0 0 auto;
    max-width: 650px !important;
    margin-bottom: 18px !important;
}

.project-modal__header > span {
    font-size: 0.57rem !important;
}

.project-modal__header h2 {
    margin-top: 8px !important;
    font-size: clamp(2rem, 4vw, 3.65rem) !important;
    line-height: 0.92 !important;
}

.project-modal__header p {
    max-width: 590px !important;
    margin-top: 10px !important;
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
}

.project-request-form {
    min-height: 0;
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
}

.project-form-grid {
    min-height: 0;
    flex: 1 1 auto;

    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows:
        repeat(4, minmax(52px, 0.72fr))
        minmax(96px, 1.35fr)
        repeat(3, minmax(52px, 0.72fr))
        !important;
}

.project-field,
.project-field--wide {
    min-height: 0 !important;
    padding: 10px 16px !important;
    gap: 4px !important;
}

.project-field > span,
.project-field > label,
.project-field .project-picker + span {
    font-size: 0.53rem !important;
    letter-spacing: 0.14em !important;
}

.project-field input,
.project-field textarea,
.project-field select,
.project-picker__trigger {
    min-height: 28px !important;
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
}

.project-field textarea {
    min-height: 58px !important;
    max-height: 72px !important;
    resize: none !important;
}

.project-picker__trigger {
    padding: 0 !important;
}

.project-form__footer {
    flex: 0 0 auto;
    margin-top: 14px !important;
    gap: 16px !important;
}

.project-form__message {
    font-size: 0.74rem !important;
    min-height: 18px !important;
}

.project-form__submit {
    padding: 9px 0 !important;
    font-size: 0.63rem !important;
}

.project-modal__close {
    top: 12px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 1.05rem !important;
}

/* Keep picker menus inside the viewport without forcing modal scrolling. */
.project-picker__menu {
    max-height: min(42dvh, 300px) !important;
}

.project-picker__options {
    max-height: min(31dvh, 220px) !important;
}

/* Desktop and laptop: everything remains visible in one modal window. */
@media (min-width: 701px) and (max-height: 820px) {
    .project-modal__panel {
        height: calc(100dvh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        padding: 16px 24px !important;
    }

    .project-modal__header {
        margin-bottom: 12px !important;
    }

    .project-modal__header h2 {
        font-size: clamp(1.8rem, 3.4vw, 3rem) !important;
    }

    .project-modal__header p {
        margin-top: 7px !important;
        font-size: 0.72rem !important;
    }

    .project-form-grid {
        grid-template-rows:
            repeat(4, minmax(45px, 0.66fr))
            minmax(78px, 1.15fr)
            repeat(3, minmax(45px, 0.66fr))
            !important;
    }

    .project-field,
    .project-field--wide {
        padding: 7px 14px !important;
    }

    .project-field textarea {
        min-height: 48px !important;
        max-height: 58px !important;
    }

    .project-form__footer {
        margin-top: 10px !important;
    }
}

/* Mobile uses the entire viewport but still locks the page behind it. */
@media (max-width: 700px) {
    .project-modal {
        padding: 0 !important;
    }

    .project-modal__panel {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 54px 14px 14px !important;
        border: 0 !important;
    }

    .project-modal__header {
        margin-bottom: 12px !important;
    }

    .project-modal__header h2 {
        font-size: clamp(1.85rem, 9vw, 3rem) !important;
    }

    .project-modal__header p {
        margin-top: 8px !important;
        font-size: 0.72rem !important;
    }

    .project-form-grid {
        grid-template-rows:
            repeat(4, minmax(42px, 0.62fr))
            minmax(72px, 1.05fr)
            repeat(3, minmax(42px, 0.62fr))
            !important;
    }

    .project-field,
    .project-field--wide {
        padding: 7px 12px !important;
    }

    .project-field textarea {
        min-height: 44px !important;
        max-height: 52px !important;
    }

    .project-form__footer {
        margin-top: 9px !important;
    }

    .project-picker__menu {
        position: fixed !important;
        z-index: 5200 !important;
        right: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
        max-height: min(58dvh, 440px) !important;
    }

    .project-picker__options {
        max-height: min(43dvh, 320px) !important;
    }
}


/* ==========================================================================
   COMBINED COUNTRY/MOBILE + CURRENCY/BUDGET
   ========================================================================== */

.project-field--combined {
    min-height: 92px !important;
    overflow: visible !important;
}

.project-combined-row {
    display: grid;
    grid-template-columns:
        minmax(210px, 0.75fr)
        minmax(0, 1.25fr);
    align-items: center;
    min-width: 0;
}

.project-combined-row__prefix,
.project-combined-row__value {
    min-width: 0;
}

.project-combined-row__prefix {
    padding-right: 18px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.project-combined-row__value {
    padding-left: 18px;
}

.project-combined-row__value input {
    width: 100%;
}

.project-field--combined .project-picker__trigger {
    min-height: 40px !important;
}

.project-field--combined [data-picker-label] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dropdowns remain independently scrollable while the page is locked. */
.project-picker__menu,
.project-picker__options {
    pointer-events: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

.project-picker__menu {
    overflow: hidden !important;
}

.project-picker__options {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 240px !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.project-picker__options::-webkit-scrollbar {
    width: 8px;
}

.project-picker__options::-webkit-scrollbar-track {
    background: transparent;
}

.project-picker__options::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.25);
}

/* Let open menus extend beyond the compact field without clipping. */
.project-modal__panel,
.project-request-form,
.project-form-grid {
    overflow: visible !important;
}

.project-field--combined:has(.project-picker.is-open) {
    position: relative;
    z-index: 300;
}

.project-picker.is-open {
    z-index: 320;
}

/* Updated compact rows after merging two field pairs. */
.project-form-grid {
    grid-template-rows:
        repeat(2, minmax(52px, 0.72fr))
        minmax(84px, 0.95fr)
        minmax(96px, 1.35fr)
        minmax(84px, 0.95fr)
        minmax(52px, 0.72fr)
        !important;
}

@media (min-width: 701px) {
    .project-picker__menu {
        width: min(390px, 75vw) !important;
        max-height: 320px !important;
    }

    .project-picker__options {
        max-height: 245px !important;
    }
}

@media (min-width: 701px) and (max-height: 820px) {
    .project-form-grid {
        grid-template-rows:
            repeat(2, minmax(44px, 0.64fr))
            minmax(68px, 0.88fr)
            minmax(76px, 1.08fr)
            minmax(68px, 0.88fr)
            minmax(44px, 0.64fr)
            !important;
    }

    .project-field--combined {
        min-height: 68px !important;
    }
}

@media (max-width: 700px) {
    .project-combined-row {
        grid-template-columns:
            minmax(150px, 0.9fr)
            minmax(0, 1.1fr);
    }

    .project-combined-row__prefix {
        padding-right: 10px;
    }

    .project-combined-row__value {
        padding-left: 10px;
    }

    .project-picker__menu {
        position: fixed !important;
        z-index: 5400 !important;
        top: auto !important;
        right: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-height: min(62dvh, 470px) !important;
    }

    .project-picker__options {
        max-height: min(46dvh, 340px) !important;
        overflow-y: auto !important;
        touch-action: pan-y !important;
    }

    .project-form-grid {
        grid-template-rows:
            repeat(2, minmax(42px, 0.62fr))
            minmax(76px, 0.92fr)
            minmax(70px, 1.02fr)
            minmax(76px, 0.92fr)
            minmax(42px, 0.62fr)
            !important;
    }
}

@media (max-width: 460px) {
    .project-combined-row {
        grid-template-columns: 1fr;
    }

    .project-combined-row__prefix {
        padding-right: 0;
        padding-bottom: 7px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .project-combined-row__value {
        padding-top: 7px;
        padding-left: 0;
    }

    .project-field--combined {
        min-height: 104px !important;
    }
}


/* ==========================================================================
   FORM HINTS + STATUS REMOVAL + FINAL CTA VIDEO
   ========================================================================== */

/* Remove all remaining availability text and dot styling. */
.service-panel__status,
.service-panel__status-dot {
    display: none !important;
}

/* Clear, subtle hint text inside the combined fields. */
.project-combined-row__value input::placeholder {
    color: rgba(255, 255, 255, 0.28) !important;
    opacity: 1;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
}

/* Final CTA becomes a cinematic video-backed section. */
.final-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #020202 !important;
}

.final-cta .section-video-background--final {
    z-index: 0 !important;
    opacity: 0 !important;
    transform: scale(1.045) !important;
    transition:
        opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.7s cubic-bezier(0.22, 1, 0.36, 1)
        !important;
}

.final-cta .section-video-background--final.is-final-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.final-cta .section-video-background--final .section-video-background__media {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0.74 !important;
    filter:
        grayscale(0.16)
        brightness(0.72)
        contrast(1.12)
        saturate(0.84)
        !important;
}

.final-cta .section-video-background--final .section-video-background__shade {
    background:
        radial-gradient(
            ellipse at 50% 42%,
            rgba(0, 0, 0, 0.04) 0%,
            rgba(0, 0, 0, 0.18) 45%,
            rgba(0, 0, 0, 0.48) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.34) 0%,
            rgba(0, 0, 0, 0.08) 30%,
            rgba(0, 0, 0, 0.18) 72%,
            rgba(0, 0, 0, 0.55) 100%
        ) !important;
}

.final-cta__visuals {
    z-index: 1 !important;
    opacity: 0.48;
    mix-blend-mode: screen;
}

.final-cta__container {
    position: relative !important;
    z-index: 3 !important;
}

/* Fade the final video out again when the section leaves the viewport. */
.final-cta
.section-video-background--final.has-video-revealed:not(.is-final-visible),
.final-cta
.section-video-background--final.is-video-visible:not(.is-final-visible) {
    opacity: 0 !important;
    transform: scale(1.045) !important;
}

@media (prefers-reduced-motion: reduce) {
    .final-cta .section-video-background--final,
    .final-cta .section-video-background--final.is-final-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   FINAL FOOTER LAYOUT
   Left: copyright | Center: Support / Request a project | Right: Back to top
   ========================================================================== */

/* Remove the old upper wordmark row completely. */
.site-footer__top,
.site-footer__top--minimal,
.site-footer__wordmark,
.site-footer__actions {
    display: none !important;
}

.site-footer__container {
    padding-top: clamp(44px, 5.5vh, 70px) !important;
    padding-bottom: clamp(26px, 3.5vh, 40px) !important;
}

.site-footer__divider {
    margin-top: 0 !important;
    margin-bottom: clamp(28px, 3.5vh, 42px) !important;
}

/* Perfect three-column balance. */
.site-footer__bottom--three-column {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(24px, 4vw, 70px) !important;
    width: 100%;
}

.site-footer__copyright {
    justify-self: start;
    color: rgba(255, 255, 255, 0.34) !important;
    font-family: "Inter", sans-serif;
    font-size: 0.64rem !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
}

.site-footer__center-actions {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: clamp(26px, 3vw, 46px);
}

.site-footer__center-actions .site-footer__action {
    position: relative;
    display: inline-flex !important;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.48);
    font-family: "Inter", sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    transition: color 220ms ease;
}

.site-footer__center-actions .site-footer__action::after {
    position: absolute;
    right: 0;
    bottom: -6px;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.72);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 320ms var(--ease-cinematic);
    content: "";
}

.site-footer__center-actions .site-footer__action:hover {
    color: #ffffff;
}

.site-footer__center-actions .site-footer__action:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-footer__bottom--three-column .back-to-top {
    justify-self: end;
}

/* Keep the back-to-top control visually quiet. */
.site-footer__bottom--three-column .back-to-top {
    color: rgba(255, 255, 255, 0.38) !important;
}

.site-footer__bottom--three-column .back-to-top:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Tablet layout. */
@media (max-width: 900px) {
    .site-footer__bottom--three-column {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "copyright back"
            "actions actions";
        row-gap: 28px !important;
    }

    .site-footer__copyright {
        grid-area: copyright;
    }

    .site-footer__center-actions {
        grid-area: actions;
        justify-self: center;
    }

    .site-footer__bottom--three-column .back-to-top {
        grid-area: back;
    }
}

/* Mobile layout. */
@media (max-width: 560px) {
    .site-footer__bottom--three-column {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "actions"
            "copyright"
            "back";
        justify-items: center;
        text-align: center;
        row-gap: 24px !important;
    }

    .site-footer__copyright,
    .site-footer__center-actions,
    .site-footer__bottom--three-column .back-to-top {
        justify-self: center !important;
    }

    .site-footer__center-actions {
        gap: 28px;
    }

    .site-footer__copyright {
        max-width: 320px;
    }
}


/* ==========================================================================
   ARTIFACT CLEANUP — REMOVE DEFAULT GUIDE LINES
   ========================================================================== */

/* Remove the small orphan horizontal line shown before content reveals. */
.service-hero__eyebrow::before,
.service-hero__eyebrow::after,
.service-hero__title-line:first-child::after,
.hero-eyebrow-line,
.hero-label::before,
.hero-label::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
    animation: none !important;
}

/*
 * Remove the vertical process guide line.
 * This was the 1px line rendered through the centre/right side of the section.
 */
.process-list::before,
.process-section__layout::before,
.process-section__layout::after,
.process-section__intro::before,
.process-section__intro::after,
.process-divider,
.process-center-line {
    display: none !important;
    width: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    content: none !important;
    animation: none !important;
}

/* Stop active-state CSS from recreating the process guide. */
.process-section.is-active .process-list::before {
    display: none !important;
    background: none !important;
}

/* Keep the process cards aligned naturally after removing the guide line. */
.process-item {
    padding-left: clamp(0px, 1vw, 18px) !important;
}

.process-item::before {
    display: none !important;
    content: none !important;
}

.process-item__line {
    left: 0 !important;
}

/* Remove faint layout/debug lines that can appear before reveal animations. */
.service-hero canvas,
.process-section canvas {
    outline: 0 !important;
    border: 0 !important;
}


/* ==========================================================================
   FINAL REQUEST TRIGGER RELIABILITY + UPPERCASE FOOTER
   ========================================================================== */

/* The old upper footer row must never exist visually or intercept clicks. */
.site-footer__top,
.site-footer__top--minimal,
.site-footer__wordmark,
.site-footer__actions {
    display: none !important;
    pointer-events: none !important;
}

/* Footer words are fully uppercase. */
.site-footer__center-actions .site-footer__action,
.site-footer__bottom--three-column .back-to-top,
.site-footer__copyright {
    text-transform: uppercase !important;
}

/* Keep the working centered controls above all footer decoration. */
.site-footer__center-actions {
    position: relative;
    z-index: 40;
    pointer-events: auto !important;
}

.site-footer__center-actions .site-footer__action {
    position: relative;
    z-index: 41;
    pointer-events: auto !important;
}

/* Modal must always render over the complete website. */
.project-modal {
    z-index: 99999 !important;
}

.project-modal.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.project-modal.is-open .project-modal__panel,
.project-modal.is-open .project-modal__backdrop {
    pointer-events: auto !important;
}


/* ==========================================================================
   MODAL CLOSE SCROLL-POSITION FIX
   ========================================================================== */

/*
 * Do not allow global smooth-scroll rules to animate the restoration point
 * when the project window closes.
 */
html.project-modal-restoring,
html.project-modal-restoring body {
    scroll-behavior: auto !important;
}

/* The fixed body preserves the exact page frame behind the popup. */
body.project-modal-open {
    overscroll-behavior: none !important;
}


/* ==========================================================================
   FINAL FOOTER — THREE CENTER LINKS + CENTERED COPYRIGHT
   ========================================================================== */

/* Eliminate every obsolete footer row from earlier builds. */
.site-footer__top,
.site-footer__top--minimal,
.site-footer__wordmark,
.site-footer__actions,
.site-footer__bottom,
.site-footer__bottom--three-column {
    display: none !important;
}

.site-footer__container {
    padding-top: clamp(42px, 5.5vh, 68px) !important;
    padding-bottom: clamp(28px, 4vh, 44px) !important;
}

.site-footer__divider {
    margin: 0 0 clamp(30px, 4vh, 46px) !important;
}

/*
 * Equal left and right columns keep the three actions precisely centered,
 * while Back to Top remains aligned to the right.
 */
.site-footer__action-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 70px);
    width: 100%;
}

.site-footer__action-spacer {
    justify-self: start;
}

.site-footer__center-actions {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 3.2vw, 52px);
    white-space: nowrap;
}

.site-footer__center-actions .site-footer__action {
    position: relative;
    z-index: 5;

    display: inline-flex !important;
    align-items: center;

    padding: 0;
    border: 0;
    background: transparent;

    color: rgba(255, 255, 255, 0.47);
    font-family: "Inter", sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;

    cursor: pointer;
    pointer-events: auto !important;

    transition: color 220ms ease;
}

.site-footer__center-actions .site-footer__action::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;

    height: 1px;

    background: rgba(255, 255, 255, 0.72);

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

    transition: transform 320ms var(--ease-cinematic);

    content: "";
}

.site-footer__center-actions .site-footer__action:hover {
    color: #ffffff;
}

.site-footer__center-actions .site-footer__action:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-footer__action-row .back-to-top {
    justify-self: end;
    color: rgba(255, 255, 255, 0.38) !important;
}

.site-footer__action-row .back-to-top:hover {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Copyright sits below all three actions, centred across the full footer. */
.site-footer__copyright--centered {
    display: block !important;

    width: 100%;
    margin:
        clamp(32px, 4.5vh, 52px)
        auto
        0;

    color: rgba(255, 255, 255, 0.28) !important;

    font-family: "Inter", sans-serif;
    font-size: 0.60rem !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.55;
    text-align: center;
    text-transform: uppercase;
}

/* Tablet */
@media (max-width: 900px) {
    .site-footer__action-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "actions back";
    }

    .site-footer__action-spacer {
        display: none;
    }

    .site-footer__center-actions {
        grid-area: actions;
        justify-self: start;
    }

    .site-footer__action-row .back-to-top {
        grid-area: back;
    }
}

/* Mobile */
@media (max-width: 650px) {
    .site-footer__action-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "actions"
            "back";
        justify-items: center;
        row-gap: 30px;
    }

    .site-footer__center-actions {
        grid-area: actions;
        justify-self: center;

        flex-wrap: wrap;
        gap: 22px 28px;
    }

    .site-footer__action-row .back-to-top {
        grid-area: back;
        justify-self: center;
    }

    .site-footer__copyright--centered {
        max-width: 340px;
        margin-top: 30px;
    }
}


/* ==========================================================================
   FINAL SINGLE-ROW FOOTER
   ========================================================================== */

.site-footer__top,
.site-footer__top--minimal,
.site-footer__wordmark,
.site-footer__actions,
.site-footer__bottom,
.site-footer__bottom--three-column,
.site-footer__action-row,
.site-footer__copyright--centered {
    display: none !important;
}

.site-footer__container {
    padding-top: clamp(36px, 4.5vh, 58px) !important;
    padding-bottom: clamp(24px, 3.4vh, 38px) !important;
}

.site-footer__divider {
    margin: 0 0 clamp(26px, 3.4vh, 38px) !important;
}

.site-footer__single-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(22px, 3vw, 54px);
    width: 100%;
}

.site-footer__single-row .site-footer__copyright {
    display: block !important;
    justify-self: start;
    margin: 0;

    color: rgba(255, 255, 255, 0.28) !important;

    font-family: "Inter", sans-serif;
    font-size: 0.58rem !important;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.45;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-footer__single-row .site-footer__center-actions {
    justify-self: center;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 2.7vw, 44px);

    white-space: nowrap;
}

.site-footer__single-row .site-footer__action {
    position: relative;
    display: inline-flex !important;
    align-items: center;

    padding: 0;
    border: 0;
    background: transparent;

    color: rgba(255, 255, 255, 0.46);

    font-family: "Inter", sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;

    cursor: pointer;
    pointer-events: auto !important;

    transition: color 220ms ease;
}

.site-footer__single-row .site-footer__action::after {
    position: absolute;
    right: 0;
    bottom: -6px;
    left: 0;

    height: 1px;

    background: rgba(255, 255, 255, 0.72);

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

    transition: transform 300ms var(--ease-cinematic);

    content: "";
}

.site-footer__single-row .site-footer__action:hover {
    color: #ffffff;
}

.site-footer__single-row .site-footer__action:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-footer__single-row .back-to-top {
    justify-self: end;
    color: rgba(255, 255, 255, 0.36) !important;
}

.site-footer__single-row .back-to-top:hover {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Keep footer in one row on desktop and laptop. */
@media (min-width: 801px) {
    .site-footer__single-row {
        min-height: 24px;
    }
}

/* Tablet and mobile can wrap cleanly. */
@media (max-width: 800px) {
    .site-footer__single-row {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 24px;
        text-align: center;
    }

    .site-footer__single-row .site-footer__copyright,
    .site-footer__single-row .site-footer__center-actions,
    .site-footer__single-row .back-to-top {
        justify-self: center;
    }

    .site-footer__single-row .site-footer__center-actions {
        flex-wrap: wrap;
    }
}

/* Ensure video layers are visible when active. */
.section-video-background video,
.section-video-background__media {
    display: block !important;
    visibility: visible !important;
}


/* ==========================================================================
   AUTHORITATIVE VIDEO VISIBILITY FIX
   ========================================================================== */

/*
 * Earlier animation layers left the hero video at opacity: 0 when the GSAP
 * reveal did not run. These rules make video visibility independent from GSAP.
 */
.service-hero__video-wrap {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.service-hero__video {
    display: block !important;
    visibility: visible !important;

    width: 100% !important;
    height: 100% !important;

    opacity: 1 !important;

    object-fit: cover !important;
    object-position: center center !important;

    animation: spi-hero-video-fade 850ms ease-out both !important;

    filter:
        brightness(0.86)
        contrast(1.08)
        saturate(0.92)
        !important;
}

@keyframes spi-hero-video-fade {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.035);
    }

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

/* All non-hero video backgrounds remain visible once JavaScript initializes. */
.section-video-background,
.section-video-background.video-force-visible,
.section-video-background.has-video-revealed,
.section-video-background.is-video-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.section-video-background__media,
.section-video-background video {
    display: block !important;
    visibility: visible !important;

    width: 100% !important;
    height: 100% !important;

    opacity: 0.78 !important;

    object-fit: cover !important;
    object-position: center center !important;
}

/* Prevent older selectors from hiding video layers again. */
.section-video-background:not(.has-video-revealed),
.final-cta .section-video-background--final,
.final-cta .section-video-background--final.has-video-revealed,
.final-cta .section-video-background--final.is-video-visible {
    visibility: visible !important;
}

.section-video-background:not(.has-video-revealed) {
    opacity: 1 !important;
    transform: none !important;
}

/* Final CTA still gets a gentle reveal instead of remaining black. */
.final-cta .section-video-background--final {
    opacity: 1 !important;
    transform: scale(1) !important;
    animation: spi-section-video-fade 1s ease-out both;
}

@keyframes spi-section-video-fade {
    from {
        opacity: 0;
        transform: scale(1.025);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Video wrappers never intercept interaction. */
.service-hero__video-wrap,
.section-video-background {
    pointer-events: none !important;
}


/* ==========================================================================
   FINAL FOOTER ALIGNMENT
   Copyright centered above, actions spaced below.
   ========================================================================== */

.site-footer__single-row,
.site-footer__action-row,
.site-footer__bottom,
.site-footer__bottom--three-column,
.site-footer__top,
.site-footer__top--minimal,
.site-footer__wordmark,
.site-footer__actions {
    display: none !important;
}

.site-footer__container {
    padding-top: clamp(36px, 4.5vh, 58px) !important;
    padding-bottom: clamp(28px, 3.8vh, 44px) !important;
}

.site-footer__divider {
    margin: 0 0 clamp(26px, 3.4vh, 38px) !important;
}

.site-footer__copyright--top-centered {
    display: block !important;
    width: 100%;
    margin: 0 auto clamp(22px, 3vh, 34px);

    color: rgba(255,255,255,.30) !important;

    font-family: "Inter", sans-serif;
    font-size: .60rem !important;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.site-footer__bottom-actions {
    position: relative;

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

    width: 100%;
    min-height: 24px;
}

.site-footer__center-actions {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: clamp(34px, 4vw, 72px) !important;

    white-space: nowrap;
}

.site-footer__center-actions .site-footer__action {
    position: relative;
    display: inline-flex !important;
    align-items: center;

    padding: 0;
    border: 0;
    background: transparent;

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

    font-family: "Inter", sans-serif;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;

    cursor: pointer;
    pointer-events: auto !important;

    transition: color 220ms ease;
}

.site-footer__center-actions .site-footer__action::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;

    height: 1px;

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

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

    transition: transform 300ms var(--ease-cinematic);

    content: "";
}

.site-footer__center-actions .site-footer__action:hover {
    color: #fff;
}

.site-footer__center-actions .site-footer__action:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.site-footer__bottom-actions .back-to-top {
    position: absolute;
    right: 0;

    color: rgba(255,255,255,.38) !important;
}

.site-footer__bottom-actions .back-to-top:hover {
    color: rgba(255,255,255,.92) !important;
}

/* Tablet */
@media (max-width: 900px) {
    .site-footer__bottom-actions {
        flex-direction: column;
        gap: 28px;
    }

    .site-footer__bottom-actions .back-to-top {
        position: static;
    }
}

/* Mobile */
@media (max-width: 620px) {
    .site-footer__center-actions {
        flex-wrap: wrap;
        gap: 22px 30px !important;
    }

    .site-footer__copyright--top-centered {
        max-width: 340px;
    }
}


/* ==========================================================================
   FINAL RESPONSIVE PLATFORM SUPPORT
   Desktop / laptop / tablet / mobile
   ========================================================================== */

/* ---------- Footer: centered copyright, actions below, back-to-top far right ---------- */

.site-footer__container {
    width: min(1480px, calc(100% - 48px)) !important;
    margin-inline: auto !important;
}

.site-footer__copyright--top-centered {
    display: block !important;
    width: 100% !important;
    margin: 0 auto clamp(24px, 3vh, 36px) !important;
    text-align: center !important;
}

.site-footer__bottom-actions {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 28px !important;
}

.site-footer__center-actions {
    grid-column: 2 !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(30px, 4vw, 72px) !important;
    white-space: nowrap !important;
}

.site-footer__bottom-actions .back-to-top {
    position: static !important;
    grid-column: 3 !important;
    justify-self: end !important;
    margin: 0 !important;
}

/* Keep footer actions easy to tap and visually balanced. */
.site-footer__center-actions .site-footer__action,
.site-footer__bottom-actions .back-to-top {
    min-height: 32px;
    display: inline-flex !important;
    align-items: center !important;
}

/* ---------- Tablet ---------- */

@media (max-width: 980px) {
    .site-footer__container {
        width: min(100% - 36px, 1180px) !important;
    }

    .site-footer__bottom-actions {
        grid-template-columns: 1fr !important;
        row-gap: 28px !important;
        justify-items: center !important;
    }

    .site-footer__center-actions {
        grid-column: 1 !important;
        justify-self: center !important;
        flex-wrap: wrap !important;
        gap: 22px 38px !important;
    }

    .site-footer__bottom-actions .back-to-top {
        grid-column: 1 !important;
        justify-self: center !important;
    }
}

/* ---------- Mobile: no scroll-triggered text animations ---------- */

@media (max-width: 700px) {
    /*
     * Mobile uses immediate, readable content.
     * All scroll reveal classes are forced visible.
     */
    .reveal,
    .is-reveal,
    .scroll-reveal,
    .split-line,
    .split-word,
    .split-char,
    [data-reveal],
    [data-scroll-reveal],
    [data-animate],
    .service-panel__title,
    .service-panel__description,
    .service-panel__index,
    .process-section__title,
    .process-section__copy,
    .process-item,
    .intro-detail,
    .final-cta__title,
    .final-cta__copy,
    .section-heading,
    .section-copy {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        translate: none !important;
        rotate: none !important;
        scale: 1 !important;
        transition: none !important;
        animation: none !important;
    }

    /* Disable animated pseudo-text duplicates and chromatic motion on mobile. */
    .chromatic-title::before,
    .chromatic-title::after,
    .service-panel__title::before,
    .service-panel__title::after,
    .final-cta__title::before,
    .final-cta__title::after,
    [data-text]::before,
    [data-text]::after {
        display: none !important;
        content: none !important;
        animation: none !important;
    }

    /* Stop marquee and decorative motion on mobile. */
    .tech-marquee,
    .tech-marquee__track,
    .marquee-track,
    .ticker-track,
    .process-orbit,
    .floating-object,
    .three-object,
    canvas {
        animation: none !important;
        transition: none !important;
    }

    /* Keep background videos visible but static-feeling and lightweight. */
    video {
        animation: none !important;
        transition: none !important;
    }

    .service-hero__video,
    .section-video-background__media {
        transform: none !important;
        filter: brightness(.78) contrast(1.04) !important;
    }

    /* Responsive hero typography and spacing. */
    .service-hero {
        min-height: 100svh !important;
        padding-inline: 18px !important;
    }

    .service-hero__content {
        width: 100% !important;
        max-width: 100% !important;
        padding-top: clamp(110px, 18vh, 160px) !important;
        padding-bottom: 70px !important;
    }

    .service-hero__title {
        max-width: 100% !important;
        font-size: clamp(3.2rem, 16vw, 5.6rem) !important;
        line-height: .9 !important;
        letter-spacing: -.06em !important;
    }

    .service-hero__description {
        max-width: 34rem !important;
        font-size: .92rem !important;
        line-height: 1.65 !important;
    }

    /* Service sections become single-column and readable. */
    .service-panel,
    .service-panel__inner,
    .service-panel__layout,
    .services-introduction__container,
    .process-section__layout,
    .final-cta__container {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .service-panel {
        min-height: auto !important;
        padding: 90px 18px !important;
    }

    .service-panel__title {
        font-size: clamp(2.8rem, 13vw, 5rem) !important;
        line-height: .92 !important;
    }

    .service-panel__copy,
    .service-panel__description {
        max-width: 100% !important;
    }

    /* Popup remains usable on small phones. */
    .project-modal__panel {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .project-picker__menu {
        max-width: calc(100vw - 20px) !important;
    }

    /* Footer mobile layout. */
    .site-footer__container {
        width: min(100% - 28px, 1180px) !important;
    }

    .site-footer__copyright--top-centered {
        max-width: 330px !important;
        font-size: .56rem !important;
        line-height: 1.7 !important;
    }

    .site-footer__center-actions {
        gap: 18px 28px !important;
    }

    .site-footer__center-actions .site-footer__action,
    .site-footer__bottom-actions .back-to-top {
        font-size: .62rem !important;
    }
}

/* ---------- Very small phones ---------- */

@media (max-width: 420px) {
    .service-hero__title {
        font-size: clamp(2.9rem, 15vw, 4.4rem) !important;
    }

    .service-panel__title {
        font-size: clamp(2.5rem, 12.5vw, 4rem) !important;
    }

    .site-footer__center-actions {
        flex-direction: column !important;
        gap: 18px !important;
    }
}

/* ---------- Reduced motion on every platform ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }

    [data-reveal],
    [data-scroll-reveal],
    [data-animate],
    .reveal {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}


/* ==========================================================================
   FINAL FOOTER — CENTRED COPYRIGHT, ACTIONS BELOW, BACK TO TOP FAR RIGHT
   ========================================================================== */

.site-footer {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    background: #020202 !important;
}

.site-footer__container {
    width: min(1480px, calc(100% - 48px)) !important;
    margin-inline: auto !important;
    padding-top: clamp(38px, 5vh, 64px) !important;
    padding-bottom: clamp(30px, 4vh, 48px) !important;
}

.site-footer__divider {
    width: 100% !important;
    height: 1px !important;
    margin: 0 0 clamp(28px, 3.8vh, 42px) !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

.site-footer__copyright {
    display: block !important;
    width: 100% !important;
    margin: 0 auto clamp(24px, 3vh, 34px) !important;

    color: rgba(255, 255, 255, 0.30) !important;

    font-family: var(--font-primary) !important;
    font-size: 0.60rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.09em !important;
    line-height: 1.6 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.site-footer__navigation-row {
    position: relative !important;

    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 38px !important;
}

.site-footer__center-actions {
    grid-column: 2 !important;
    justify-self: center !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: clamp(34px, 4vw, 74px) !important;

    white-space: nowrap !important;
}

.site-footer__action {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    background: transparent !important;
    color: rgba(255, 255, 255, 0.48) !important;

    font-family: var(--font-primary) !important;
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.09em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;

    cursor: pointer !important;
    pointer-events: auto !important;

    transition: color 220ms ease !important;
}

.site-footer__action::after {
    position: absolute !important;
    right: 0 !important;
    bottom: 1px !important;
    left: 0 !important;

    height: 1px !important;

    background: rgba(255, 255, 255, 0.72) !important;

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

    transition: transform 300ms var(--ease-cinematic) !important;

    content: "" !important;
}

.site-footer__action:hover {
    color: #ffffff !important;
}

.site-footer__action:hover::after {
    transform: scaleX(1) !important;
    transform-origin: left !important;
}

.site-footer__navigation-row > .back-to-top {
    grid-column: 3 !important;
    justify-self: end !important;

    position: static !important;
    right: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;

    margin: 0 !important;

    color: rgba(255, 255, 255, 0.38) !important;
}

.site-footer__navigation-row > .back-to-top:hover {
    color: rgba(255, 255, 255, 0.94) !important;
}

/* ==========================================================================
   MOBILE SERVICE PAGE — STATIC, CLEAN AND PLATFORM-SAFE
   ========================================================================== */

@media (max-width: 767px) {
    html.mobile-static-service {
        scroll-behavior: auto !important;
    }

    body.mobile-static-service {
        overflow-x: hidden !important;
        background: #030303 !important;
    }

    body.mobile-static-service .page-loader,
    body.mobile-static-service .webgl-canvas,
    body.mobile-static-service .webgl-fallback,
    body.mobile-static-service .cursor-glow,
    body.mobile-static-service .noise-layer,
    body.mobile-static-service .vignette-layer,
    body.mobile-static-service .scroll-progress,
    body.mobile-static-service .section-counter,
    body.mobile-static-service .service-hero__spotlight,
    body.mobile-static-service .service-hero__front-light,
    body.mobile-static-service .service-hero__ambient,
    body.mobile-static-service .service-hero__coordinates,
    body.mobile-static-service .hero-scroll-link,
    body.mobile-static-service .process-orbit,
    body.mobile-static-service .floating-object {
        display: none !important;
    }

    body.mobile-static-service *,
    body.mobile-static-service *::before,
    body.mobile-static-service *::after {
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
    }

    body.mobile-static-service .split-text,
    body.mobile-static-service .reveal-element,
    body.mobile-static-service .service-hero__title-word,
    body.mobile-static-service .service-panel__title,
    body.mobile-static-service .service-panel__description,
    body.mobile-static-service .service-panel__visual,
    body.mobile-static-service .intro-detail,
    body.mobile-static-service .intro-metric,
    body.mobile-static-service .capability-card,
    body.mobile-static-service .process-item,
    body.mobile-static-service .statistic-card,
    body.mobile-static-service .final-cta__title,
    body.mobile-static-service .final-cta__copy,
    body.mobile-static-service .final-cta__button {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: 1 !important;
        filter: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Hero becomes a compact, phone-first composition. */
    .service-hero {
        min-height: 100svh !important;
        height: auto !important;
        padding: 0 18px !important;
    }

    .service-hero__video-wrap {
        opacity: 1 !important;
    }

    .service-hero__video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        opacity: 0.74 !important;
        filter: brightness(0.68) contrast(1.08) !important;
    }

    .service-hero__container {
        width: 100% !important;
        min-height: 100svh !important;
        padding: 118px 0 58px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .service-hero__eyebrow {
        margin-bottom: 22px !important;
    }

    .service-hero__title {
        width: 100% !important;
        max-width: 100% !important;

        font-size: clamp(3.35rem, 16vw, 5.15rem) !important;
        line-height: 0.88 !important;
        letter-spacing: -0.065em !important;
    }

    .service-hero__title-line,
    .service-hero__title-line--offset {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .service-hero__footer {
        display: block !important;
        margin-top: 34px !important;
    }

    .service-hero__description {
        max-width: 31rem !important;
        font-size: 0.88rem !important;
        line-height: 1.65 !important;
    }

    /* Introduction becomes a simple vertical narrative. */
    .services-introduction {
        min-height: auto !important;
        padding: 82px 0 !important;
    }

    .services-introduction__container,
    .services-introduction__content,
    .services-introduction__lead {
        display: block !important;
        width: 100% !important;
    }

    .section-label {
        gap: 18px !important;
        padding-bottom: 15px !important;
        font-size: 0.60rem !important;
    }

    .services-introduction__small-copy {
        max-width: 100% !important;
        margin: 34px 0 24px !important;
    }

    .services-introduction__title {
        max-width: 100% !important;
        font-size: clamp(2.55rem, 11vw, 4rem) !important;
        line-height: 0.98 !important;
    }

    .services-introduction__details {
        display: grid !important;
        grid-template-columns: 1fr !important;
        margin-top: 48px !important;
    }

    .intro-detail {
        min-height: 0 !important;
        padding: 26px 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    }

    .services-introduction__metrics {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-top: 42px !important;
    }

    .intro-metric {
        padding: 24px 0 !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    }

    /* Each service becomes a normal vertical card/section. */
    .services-showcase,
    .service-panel,
    .service-panel__inner,
    .service-panel__layout,
    .service-panel__content,
    .service-panel__visual {
        width: 100% !important;
        max-width: 100% !important;
    }

    .service-panel {
        min-height: auto !important;
        height: auto !important;
        padding: 84px 18px !important;
        overflow: hidden !important;
    }

    .service-panel__inner,
    .service-panel__layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 42px !important;
    }

    .service-panel__title {
        max-width: 100% !important;
        font-size: clamp(2.9rem, 13vw, 4.7rem) !important;
        line-height: 0.92 !important;
        letter-spacing: -0.055em !important;
    }

    .service-panel__description {
        max-width: 100% !important;
        font-size: 0.92rem !important;
        line-height: 1.7 !important;
    }

    .service-panel__visual {
        position: relative !important;
        inset: auto !important;
        min-height: 230px !important;
        order: 2 !important;
    }

    /* General large sections become content-height. */
    .capabilities,
    .process-section,
    .statistics,
    .final-cta {
        min-height: auto !important;
        height: auto !important;
        padding: 84px 0 !important;
    }

    .capabilities__grid,
    .process-section__layout,
    .process-list,
    .statistics__grid,
    .final-cta__container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .capability-card,
    .process-item,
    .statistic-card {
        min-height: 0 !important;
        padding: 26px 0 !important;
    }

    .final-cta__title {
        font-size: clamp(3rem, 14vw, 5rem) !important;
        line-height: 0.9 !important;
    }

    /* Popup fills the phone and never scrolls the page behind. */
    .project-modal__panel {
        width: 100vw !important;
        height: 100dvh !important;
        max-width: none !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    /* Mobile footer: copyright, actions, then back-to-top. */
    .site-footer__container {
        width: calc(100% - 30px) !important;
        padding-top: 38px !important;
        padding-bottom: 34px !important;
    }

    .site-footer__copyright {
        max-width: 330px !important;
        margin-bottom: 28px !important;
        font-size: 0.55rem !important;
    }

    .site-footer__navigation-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 28px !important;
    }

    .site-footer__center-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        white-space: normal !important;
    }

    .site-footer__navigation-row > .back-to-top {
        align-self: center !important;
    }
}

/* Tablet uses a balanced two-column adaptation. */
@media (min-width: 768px) and (max-width: 1100px) {
    .service-hero__title {
        font-size: clamp(5rem, 10vw, 8.5rem) !important;
    }

    .services-introduction__details,
    .capabilities__grid,
    .statistics__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .service-panel__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr) !important;
    }

    .site-footer__navigation-row {
        grid-template-columns: 1fr !important;
        row-gap: 26px !important;
        justify-items: center !important;
    }

    .site-footer__center-actions,
    .site-footer__navigation-row > .back-to-top {
        grid-column: 1 !important;
        justify-self: center !important;
    }
}

/* Reduced-motion users get the same immediate content treatment. */
@media (prefers-reduced-motion: reduce) {
    .split-text,
    .reveal-element,
    [data-reveal],
    [data-scroll-reveal],
    [data-animate] {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   FINAL FOOTER POSITIONING
   Left: SUPPORT / NEW USER? / REQUEST A PROJECT
   Center: copyright only
   Right: BACK TO TOP
   ========================================================================== */

.site-footer__navigation-row,
.site-footer__center-actions {
    display: none !important;
}

.site-footer__single-row {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr) !important;

    align-items: center !important;
    column-gap: clamp(28px, 4vw, 72px) !important;

    width: 100% !important;
    min-height: 42px !important;
}

.site-footer__left-actions {
    grid-column: 1 !important;
    justify-self: start !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: clamp(28px, 3vw, 56px) !important;

    white-space: nowrap !important;
}

.site-footer__single-row .site-footer__copyright {
    grid-column: 2 !important;
    justify-self: center !important;

    display: block !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 !important;

    text-align: center !important;
    white-space: nowrap !important;
}

.site-footer__single-row > .back-to-top {
    grid-column: 3 !important;
    justify-self: end !important;

    position: static !important;
    right: auto !important;

    display: inline-flex !important;
    align-items: center !important;

    margin: 0 !important;
}

/* Laptop/tablet: preserve all three regions where space allows. */
@media (min-width: 901px) and (max-width: 1180px) {
    .site-footer__single-row {
        column-gap: 24px !important;
    }

    .site-footer__left-actions {
        gap: 24px !important;
    }

    .site-footer__action {
        font-size: 0.60rem !important;
    }

    .site-footer__single-row .site-footer__copyright {
        font-size: 0.54rem !important;
    }
}

/* Tablet: copyright remains centered, actions get their own row. */
@media (max-width: 900px) {
    .site-footer__single-row {
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "actions back"
            "copyright copyright" !important;

        row-gap: 28px !important;
    }

    .site-footer__left-actions {
        grid-area: actions !important;
        justify-self: start !important;

        flex-wrap: wrap !important;
        gap: 20px 30px !important;
    }

    .site-footer__single-row .site-footer__copyright {
        grid-area: copyright !important;
        justify-self: center !important;
    }

    .site-footer__single-row > .back-to-top {
        grid-area: back !important;
        justify-self: end !important;
    }
}

/* Mobile: clean stacked layout with copyright still visually central. */
@media (max-width: 600px) {
    .site-footer__single-row {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "actions"
            "copyright"
            "back" !important;

        justify-items: center !important;
        row-gap: 26px !important;
    }

    .site-footer__left-actions {
        grid-area: actions !important;
        justify-self: center !important;

        flex-direction: column !important;
        align-items: center !important;

        gap: 16px !important;
    }

    .site-footer__single-row .site-footer__copyright {
        grid-area: copyright !important;
        justify-self: center !important;

        max-width: 330px !important;
        white-space: normal !important;
    }

    .site-footer__single-row > .back-to-top {
        grid-area: back !important;
        justify-self: center !important;
    }
}


/* ==========================================================================
   MOBILE HERO VIDEO POSITION + FINAL CTA BUTTON REMOVAL
   ========================================================================== */

.final-cta__button,
.final-cta .magnetic-button {
    display: none !important;
}

/*
 * Keep the video centered inside the absolute full-screen wrapper.
 * The previous mobile transform:none rule caused top:50% / left:50%
 * to push the video away from the hero.
 */
@media (max-width: 767px) {
    body.mobile-static-service .service-hero__video-wrap,
    .service-hero__video-wrap {
        position: absolute !important;
        inset: 0 !important;

        width: 100% !important;
        height: 100% !important;

        overflow: hidden !important;
    }

    body.mobile-static-service .service-hero__video,
    .service-hero__video {
        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 100% !important;

        object-fit: cover !important;
        object-position: 50% 50% !important;

        transform:
            translate3d(-50%, -50%, 0)
            scale(1.01) !important;

        opacity: 0.76 !important;

        filter:
            brightness(0.68)
            contrast(1.08)
            saturate(0.90)
            !important;

        animation: none !important;
        transition: none !important;
    }

    /* Ensure the text remains above the restored video. */
    .service-hero__container {
        position: relative !important;
        z-index: 4 !important;
    }

    .service-hero__video-shade {
        position: absolute !important;
        z-index: 2 !important;
        inset: 0 !important;

        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.34) 0%,
                rgba(0, 0, 0, 0.12) 38%,
                rgba(0, 0, 0, 0.48) 100%
            ) !important;
    }

    /*
     * With the CTA button removed, reduce excess space in the final section.
     */
    .final-cta__container {
        padding-bottom: 0 !important;
    }

    .final-cta__description {
        margin-bottom: 0 !important;
    }
}


/* ==========================================================================
   MOBILE STATISTICS FIX
   ========================================================================== */

@media (max-width: 767px) {
    .statistics-section {
        padding-top: 78px !important;
        padding-bottom: 78px !important;
    }

    .statistics-section__header {
        display: block !important;
        margin-bottom: 42px !important;
    }

    .statistics-section__title {
        max-width: 100% !important;
        font-size: clamp(2.6rem, 11vw, 4.2rem) !important;
        line-height: 0.98 !important;
    }

    .statistics-section__description {
        max-width: 100% !important;
        margin-top: 22px !important;
        font-size: 0.92rem !important;
        line-height: 1.7 !important;
    }

    .statistics-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        width: 100% !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
    }

    .statistic-card {
        position: relative !important;

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

        width: 100% !important;
        min-height: 190px !important;

        padding: 30px 22px !important;

        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;

        overflow: hidden !important;
    }

    .statistic-card:last-child {
        border-bottom: 0 !important;
    }

    .statistic-card__value {
        position: static !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        color: #ffffff !important;

        font-size: clamp(4.6rem, 21vw, 7.4rem) !important;
        font-weight: 400 !important;
        letter-spacing: -0.075em !important;
        line-height: 0.86 !important;

        white-space: nowrap !important;
        overflow: visible !important;
    }

    .statistic-card__label {
        position: static !important;

        display: block !important;

        margin-top: 18px !important;

        color: rgba(255, 255, 255, 0.46) !important;

        font-size: 0.69rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.19em !important;
        line-height: 1.35 !important;

        text-transform: uppercase !important;

        transform: none !important;
    }
}

@media (max-width: 390px) {
    .statistic-card {
        min-height: 172px !important;
        padding-inline: 18px !important;
    }

    .statistic-card__value {
        font-size: clamp(4rem, 20vw, 6.2rem) !important;
    }
}

/* ==========================================
   MOBILE POPUP SAFE AREA FIX
========================================== */
@media (max-width:767px){

    .project-request-modal,
    .project-request-popup{
        display:flex;
        align-items:flex-start;
        justify-content:center;
    }

    .project-request-content,
    .project-request-window,
    .project-request-body{

        height:100vh !important;
        max-height:100vh !important;

        overflow-y:auto !important;

        padding-bottom:140px !important;   /* <- keeps content above browser bar */

        box-sizing:border-box;

        -webkit-overflow-scrolling:touch;
    }

    .project-request__actions{
        display:flex;
        justify-content:center;
        align-items:center;

        margin-top:40px;
        margin-bottom:0;
    }

    .project-request__submit,
    .project-request button[type="submit"]{

        width:90%;
        max-width:340px;
        margin:0 auto;
    }
}

/* ==========================================================================
   FINAL MOBILE FORM SCROLL INDICATOR + VIDEO REVEAL
   ========================================================================== */

@media (max-width: 767px) {
    /*
     * The field area is the only scrolling part of the popup.
     * Keep a native scrollbar where supported.
     */
    .project-form-grid {
        position: relative !important;

        overflow-y: scroll !important;
        overflow-x: hidden !important;

        scrollbar-width: thin !important;
        scrollbar-color:
            rgba(255, 255, 255, 0.62)
            rgba(255, 255, 255, 0.08)
            !important;
    }

    .project-form-grid::-webkit-scrollbar {
        width: 5px !important;
    }

    .project-form-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.06) !important;
    }

    .project-form-grid::-webkit-scrollbar-thumb {
        border: 0 !important;
        border-radius: 999px !important;

        background: rgba(255, 255, 255, 0.62) !important;
    }

    /*
     * Persistent custom indicator for mobile browsers that auto-hide
     * native scrollbars.
     */
    .project-modal__scroll-indicator {
        position: absolute !important;
        z-index: 40 !important;

        top: 290px !important;
        right: 5px !important;
        bottom:
            max(
                122px,
                calc(env(safe-area-inset-bottom, 0px) + 104px)
            )
            !important;

        display: block !important;

        width: 3px !important;

        border-radius: 999px !important;

        opacity: 0 !important;
        visibility: hidden !important;

        background: rgba(255, 255, 255, 0.10) !important;

        pointer-events: none !important;

        transition:
            opacity 220ms ease,
            visibility 220ms ease
            !important;
    }

    .project-modal__scroll-indicator.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .project-modal__scroll-thumb {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        display: block !important;

        width: 100% !important;
        min-height: 44px !important;

        border-radius: inherit !important;

        background: rgba(255, 255, 255, 0.78) !important;

        box-shadow:
            0 0 8px rgba(255, 255, 255, 0.18)
            !important;

        will-change: transform, height !important;
    }

    .project-modal__scroll-indicator.is-at-bottom {
        opacity: 0.42 !important;
    }

    /*
     * Keep the submit footer compact so more fields are visible,
     * while remaining above the browser gesture area.
     */
    .project-form__footer {
        padding:
            10px
            0
            max(
                30px,
                calc(env(safe-area-inset-bottom, 0px) + 18px)
            )
            !important;
    }

    .project-request__submit {
        min-height: 46px !important;
    }

    /*
     * Override older rules that forced every section video visible instantly.
     * The introduction video now fades both in and out based on viewport state.
     */
    body.mobile-service-static
    .services-introduction
    .section-video-background,
    body.mobile-service-static
    .process-section
    .section-video-background,
    body.mobile-service-static
    .final-cta
    .section-video-background {
        opacity: 0 !important;
        visibility: visible !important;

        transform: scale(1.025) !important;

        transition:
            opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 1200ms cubic-bezier(0.22, 1, 0.36, 1)
            !important;
    }

    body.mobile-service-static
    .services-introduction.mobile-video-in-view
    .section-video-background,
    body.mobile-service-static
    .process-section.mobile-video-in-view
    .section-video-background,
    body.mobile-service-static
    .final-cta.mobile-video-in-view
    .section-video-background {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    body.mobile-service-static
    .section-video-background__media {
        opacity: 0.76 !important;

        animation: none !important;

        transition:
            filter 900ms ease
            !important;
    }

    body.mobile-service-static
    .services-introduction:not(.mobile-video-in-view)
    .section-video-background__media,
    body.mobile-service-static
    .process-section:not(.mobile-video-in-view)
    .section-video-background__media,
    body.mobile-service-static
    .final-cta:not(.mobile-video-in-view)
    .section-video-background__media {
        filter:
            brightness(0.42)
            contrast(1.05)
            blur(2px)
            !important;
    }

    body.mobile-service-static
    .services-introduction.mobile-video-in-view
    .section-video-background__media,
    body.mobile-service-static
    .process-section.mobile-video-in-view
    .section-video-background__media,
    body.mobile-service-static
    .final-cta.mobile-video-in-view
    .section-video-background__media {
        filter:
            brightness(0.72)
            contrast(1.08)
            blur(0)
            !important;
    }
}

@media (max-width: 767px) and (max-height: 740px) {
    .project-modal__scroll-indicator {
        top: 226px !important;
        bottom:
            max(
                104px,
                calc(env(safe-area-inset-bottom, 0px) + 88px)
            )
            !important;
    }
}


/* ==========================================================================
   FINAL MOBILE STATIC SERVICE EXPERIENCE
   Phones keep text and video backgrounds only.
   ========================================================================== */

@media (max-width: 767px) {
    /*
     * Remove all decorative/interactive 3D systems from service panels.
     * Videos are intentionally NOT included in this list.
     */
    .webgl-canvas,
    .webgl-fallback,
    .cursor-glow,
    .service-object-stage,
    .service-object,
    .service-object__anchor,
    .service-object__core,
    .service-object__frame,
    .service-object__face,
    .service-object__ring,
    .service-object__orbit,
    .service-object__particle,
    .service-object__particles,
    .service-panel__visual,
    .service-panel__visual-ring,
    .service-panel__visual-label,
    .service-panel__scene,
    .service-panel__scene-object,
    .service-panel__interactive-object,
    .service-panel__orbit,
    .service-panel__orbits,
    .service-panel__particle,
    .service-panel__particles,
    .service-panel__sphere,
    .service-panel__cube,
    .service-panel__server,
    .service-panel__laptop,
    .floating-geometry,
    .floating-particle,
    .floating-particles,
    [data-service-object],
    [data-webgl-object],
    [class*="service-orbit"],
    [class*="service-particle"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;

        width: 0 !important;
        height: 0 !important;

        animation: none !important;
        transition: none !important;
        transform: none !important;

        pointer-events: none !important;
    }

    /*
     * Remove the panel scroll/progress interface shown in the supplied image.
     */
    .services-scroll,
    .service-scroll,
    .scroll-to-explore,
    .scroll-progress,
    .service-progress,
    .service-panel__progress,
    .service-panel__counter,
    .service-panel__scroll-label,
    .service-panels__progress,
    .service-panels__footer,
    .service-panels__rail,
    .service-panels__timeline {
        display: none !important;
    }

    /*
     * Service sections become clean text/video sections on mobile.
     */
    .service-panel,
    .service-panel__inner,
    .service-panel__container,
    .service-panel__content,
    .service-panel__copy,
    .service-panel__text,
    .service-panel__top,
    .service-panel__bottom {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;

        transform: none !important;
    }

    .service-panel {
        min-height: auto !important;
        padding:
            clamp(76px, 16vw, 112px)
            20px
            !important;

        overflow: hidden !important;
    }

    .service-panel__inner,
    .service-panel__container {
        padding: 0 !important;
    }

    .service-panel__content,
    .service-panel__copy,
    .service-panel__text {
        z-index: 4 !important;
    }

    /*
     * No text reveal, split animation, blur, clipping or scroll translation.
     */
    body.mobile-service-static .service-panel *,
    body.mobile-static-service .service-panel *,
    .service-panel .split-text,
    .service-panel .reveal-element,
    .service-panel [data-reveal],
    .service-panel [data-scroll],
    .service-panel [data-animation],
    .service-panel .service-panel__title,
    .service-panel .service-panel__description,
    .service-panel .service-panel__eyebrow,
    .service-panel .service-panel__index {
        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;

        filter: none !important;
        clip-path: none !important;
        mask-image: none !important;

        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    /*
     * Prevent pinned/sticky desktop panel behavior.
     */
    .services-showcase,
    .service-panels,
    .service-panels__track,
    .service-panels__viewport,
    .service-panels__pin,
    .service-showcase {
        position: relative !important;

        top: auto !important;
        left: auto !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        overflow: visible !important;

        transform: none !important;
    }

    /*
     * Preserve video backgrounds as static cinematic media.
     */
    .service-panel video,
    .service-panel__video,
    .section-video-background,
    .section-video-background__media {
        visibility: visible !important;
        pointer-events: none !important;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    /*
     * Even when the user permits motion, panel content remains static.
     * Only background videos may play.
     */
    .service-panel *,
    .service-object-stage *,
    .service-panel__visual * {
        animation: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   FINAL SERVICE TOP BAR
   Back link on the left; standalone request-page link on the right.
   ========================================================================== */

.service-topbar {
    position: fixed;
    z-index: 700;

    top: 0;
    left: 0;

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

    width: 100%;
    padding: 22px 26px;

    pointer-events: none;
}

.service-topbar > * {
    pointer-events: auto;
}

.service-topbar .back-to-website {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
}

.service-topbar__request {
    position: relative;

    color: rgba(255, 255, 255, 0.66);

    font-family: var(--font-primary);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;

    transition:
        color 200ms ease,
        transform 200ms ease;
}

.service-topbar__request::after {
    position: absolute;

    right: 0;
    bottom: -7px;
    left: 0;

    height: 1px;

    background: rgba(255, 255, 255, 0.74);

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

    transition:
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1);

    content: "";
}

.service-topbar__request:hover,
.service-topbar__request:focus-visible {
    color: #ffffff;
    transform: translateY(-1px);
}

.service-topbar__request:hover::after,
.service-topbar__request:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* The project form exists only on service_request.php. */
.project-modal,
#project-request-modal {
    display: none !important;
}

@media (max-width: 767px) {
    .service-topbar {
        padding:
            max(17px, env(safe-area-inset-top, 0px))
            18px
            17px;
    }

    .service-topbar__request {
        max-width: 47vw;

        font-size: 0.55rem;
        letter-spacing: 0.10em;
        line-height: 1.35;
        text-align: right;
        white-space: normal;
    }
}

/* Remove every decorative hero line */
.service-hero__eyebrow::before,
.service-hero__title::before,
.service-hero::before,
.service-hero__spotlight,
.service-hero__spotlight::before,
.service-hero__spotlight::after{
    display:none !important;
    content:none !important;
    background:none !important;
    border:none !important;
}

/* ========================================================================== 
   FINAL OVERRIDE — REMOVE DECORATIVE LINES THROUGHOUT THE SERVICE PAGE
   Keeps the page content, videos, lighting, objects and animations intact.
   ========================================================================== */

/* Dedicated line, divider, track and rule elements. */
.service-page :is(
    .services-introduction__line,
    .process-item__line,
    .process-divider,
    .site-footer__divider,
    .section-counter__divider,
    .scroll-progress,
    .scroll-progress__track,
    .scroll-progress__bar,
    .service-panel__progress,
    .service-panel__progress-bar,
    .service-progress,
    .service-progress__track,
    .service-progress__bar,
    .service-panels__progress,
    .service-panels__track,
    .service-hero__horizon,
    .service-hero__eyebrow-line
) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    content: none !important;
    pointer-events: none !important;
}

/* Remove horizontal separator borders without affecting layout. */
.service-page :is(
    .section-label,
    .site-header,
    .service-panel,
    .service-panel__top,
    .service-panel__copy,
    .service-panel__bottom,
    .capability-card,
    .process-item,
    .statistic-card,
    .technology-marquee,
    .final-cta,
    .site-footer,
    .mobile-navigation-overlay,
    .mobile-navigation-overlay__header,
    .mobile-navigation-overlay__footer,
    .intro-detail,
    .services-introduction__metrics,
    .project-picker,
    .project-picker__option
) {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* Remove short title accents and animated link underlines. */
.service-page :is(
    .service-hero__eyebrow,
    .service-hero__title,
    .service-hero__title-line:first-child,
    .service-panel__copy,
    .service-panel__title,
    .services-introduction,
    .process-section,
    .process-section__layout,
    .process-section__intro,
    .process-list,
    .capabilities-section,
    .statistics-section,
    .technology-marquee,
    .site-footer,
    .service-topbar__request,
    .primary-navigation a,
    .site-footer__navigation a,
    .site-footer__action,
    .site-footer__center-actions .site-footer__action,
    .site-footer__single-row .site-footer__action,
    .hero-label
)::before,
.service-page :is(
    .service-hero__eyebrow,
    .service-hero__title,
    .service-hero__title-line:first-child,
    .service-panel__copy,
    .service-panel__title,
    .services-introduction,
    .process-section,
    .process-section__layout,
    .process-section__intro,
    .process-list,
    .capabilities-section,
    .statistics-section,
    .technology-marquee,
    .site-footer,
    .service-topbar__request,
    .primary-navigation a,
    .site-footer__navigation a,
    .site-footer__action,
    .site-footer__center-actions .site-footer__action,
    .site-footer__single-row .site-footer__action,
    .hero-label
)::after {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    content: none !important;
    transform: none !important;
    animation: none !important;
}

/* Vertical guide lines around panels/cards. */
.service-page .service-panel::before,
.service-page .service-panel::after,
.service-page .capability-card__corner,
.service-page .capability-card__corner::before,
.service-page .capability-card__corner::after,
.service-page .process-list::before {
    display: none !important;
    content: none !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}


/* ========================================================================== 
   FINAL FIX V2 — REMOVE THE SHORT LINE ABOVE EVERY SERVICE TITLE
   The line comes from the service panel top/meta layer. Remove that layer
   completely because its labels are not shown in the final visual layout.
   ========================================================================== */
.service-page .service-panel__top {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.service-page .service-panel__top::before,
.service-page .service-panel__top::after,
.service-page .service-panel__number::before,
.service-page .service-panel__number::after,
.service-page .service-panel__eyebrow::before,
.service-page .service-panel__eyebrow::after,
.service-page .service-panel__status::before,
.service-page .service-panel__status::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* ========================================================================== 
   FINAL MOBILE CTA CENTERING FIX V3
   Keeps the CTA description inside a centered, phone-safe text column and
   neutralizes transforms/positioning left by reveal and grid rules.
   ========================================================================== */
@media (max-width: 767px) {
    .service-page .final-cta__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .service-page .final-cta__eyebrow,
    .service-page .final-cta__title,
    .service-page .final-cta__description {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        inset-inline: auto !important;
        justify-self: center !important;
        align-self: center !important;
        translate: none !important;
        transform: none !important;
        text-align: center !important;
    }

    .service-page .final-cta__description {
        display: block !important;
        width: min(100%, 340px) !important;
        min-width: 0 !important;
        max-width: 340px !important;
        margin: 24px auto 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        line-height: 1.7 !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .service-page .final-cta__description *,
    .service-page .final-cta__description .line,
    .service-page .final-cta__description .word,
    .service-page .final-cta__description .char {
        position: static !important;
        left: auto !important;
        right: auto !important;
        translate: none !important;
        transform: none !important;
        text-align: inherit !important;
    }
}