/* LONCH motion direction — smooth, editorial and restrained.
   Midu is the behavioural reference: inertia, focus, glass and scene changes. */

:root {
    --motion-ease: cubic-bezier(0.19, 1, 0.22, 1);
    --motion-focus-ease: cubic-bezier(0.44, 0, 0.56, 1);
    --motion-route-ease: cubic-bezier(0.72, 0, 0.2, 1);
    --motion-curtain-ease: cubic-bezier(0.72, 0, 0.2, 1);
    --motion-scene-radius: clamp(24px, 3vw, 42px);
}

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

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
    overscroll-behavior: contain;
}

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

html.motion-ready {
    scroll-behavior: auto !important;
}

/*
   Content is readable without JavaScript. The early motion-capable class is
   applied in the head, so an element never flashes crisp and then jumps back
   into blur when its observer starts.
*/
html:not(.motion-capable) [data-reveal],
html.motion-fallback-visible [data-reveal] {
    opacity: 1;
    filter: none;
    transform: none;
}

html.motion-capable [data-reveal]:not([data-motion-blur]) {
    opacity: 0.001;
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 640ms var(--motion-ease),
        transform 720ms var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-capable
    [data-reveal]:not([data-motion-blur]).is-motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-capable [data-motion-blur] > * {
    opacity: 0.001;
    filter: blur(4px);
    transform: translate3d(0, 10px, 0);
    transition:
        opacity 860ms var(--motion-focus-ease),
        filter 920ms var(--motion-focus-ease),
        transform 920ms var(--motion-focus-ease);
    transition-delay: var(--motion-delay, 0ms);
}

html.motion-capable [data-motion-blur].is-motion-visible > * {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

html.motion-capable [data-motion-blur] > [data-motion-prepared] {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
}

html.motion-capable
    [data-motion-blur].is-motion-visible
    > [data-motion-prepared]
    .motion-word {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

html.motion-capable [data-motion-words]:not([data-motion-prepared]) {
    opacity: 0;
}

html.motion-capable
    [data-motion-blur]
    [data-motion-words]:not([data-motion-prepared]) {
    opacity: 1;
}

html.motion-fallback-visible [data-motion-words],
html.motion-fallback-visible [data-motion-blur] > *,
html.motion-fallback-visible :is(.hero, .page-hero) .hero-aside,
html.motion-fallback-visible :is(.hero, .page-hero) .breadcrumbs,
html.motion-fallback-visible
    :is(.hero, .page-hero)
    :is(.hero-media, .page-hero-media) {
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
}

/* One quiet black curtain owns the complete route change. */
.motion-route-layer {
    position: fixed;
    z-index: 2000;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
}

.motion-route-layer::after {
    position: absolute;
    inset: 0;
    content: '';
}

.motion-route-layer::after {
    background: #050605;
    box-shadow: 0 -30px 70px rgba(0, 0, 0, 0.24);
    transform: translate3d(0, 100%, 0);
    will-change: transform;
}

.route-leaving .motion-route-layer {
    opacity: 1;
}

.route-leaving .motion-route-layer::after {
    animation: lonch-route-cover 480ms var(--motion-curtain-ease) both;
}

html.route-arriving::after {
    position: fixed;
    z-index: 2000;
    inset: 0;
    pointer-events: none;
    background: #050605;
    content: '';
    animation: lonch-route-open 720ms var(--motion-route-ease) both;
    will-change: transform;
}

@keyframes lonch-route-cover {
    from {
        transform: translate3d(0, 100%, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lonch-route-open {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, -101%, 0);
    }
}

.hero-media,
.page-hero-media {
    isolation: isolate;
    clip-path: inset(0 0 0 0);
}

.hero-media > img,
.page-hero-media > img {
    position: relative;
    z-index: 0;
    transform: translate3d(
            0,
            calc(
                var(--motion-parallax-y, 0px) +
                    var(--motion-stack-lag, 0px)
            ),
            0
        )
        scale(1.045) !important;
    transform-origin: center;
    animation: none !important;
}

.hero-media > [data-hero-portal] {
    position: absolute;
    z-index: 0;
    transform: translate3d(
            0,
            calc(
                var(--motion-parallax-y, 0px) +
                    var(--motion-stack-lag, 0px)
            ),
            0
        )
        scale(1.045) !important;
    transform-origin: center;
    animation: none !important;
}

.page-hero-media > img {
    transform: translate3d(0, var(--motion-parallax-y, 0), 0) scale(1.035) !important;
}

.hero-media::after,
.page-hero-media::after {
    z-index: 2;
}

html.motion-capable [data-motion-stack-root] .hero-inner {
    transform: translate3d(0, var(--motion-stack-copy-lag, 0px), 0);
}

html.motion-capable [data-motion-stack-panel] {
    z-index: 2;
}

html.motion-capable
    [data-motion-stack-root].is-scroll-motion-active
    .hero-inner,
html.motion-capable
    [data-motion-stack-root].is-scroll-motion-active
    .hero-media > :is(img, [data-hero-portal]) {
    will-change: transform;
}

html.motion-capable :is(.hero, .page-hero) .hero-aside {
    opacity: 0.001;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 780ms var(--motion-ease) 150ms,
        transform 920ms var(--motion-ease) 150ms;
}

html.motion-capable :is(.hero, .page-hero) .hero-aside.is-motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-capable :is(.hero, .page-hero) .breadcrumbs {
    opacity: 0.001;
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 580ms var(--motion-ease) 40ms,
        transform 700ms var(--motion-ease) 40ms;
}

html.motion-capable :is(.hero, .page-hero) .breadcrumbs.is-motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.motion-capable :is(.hero, .page-hero) :is(.hero-media, .page-hero-media) {
    opacity: 0.001;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 22px, 0) scale(0.99);
    transition:
        opacity 720ms var(--motion-route-ease),
        transform 820ms var(--motion-route-ease);
}

html.motion-capable
    :is(.hero, .page-hero)
    :is(.hero-media, .page-hero-media).is-motion-visible {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0) scale(1);
}

/* During a route curtain reveal the hero settles before the curtain clears. */
html.route-arriving
    :is(.hero, .page-hero)
    .motion-word {
    transition:
        opacity 560ms var(--motion-route-ease),
        filter 600ms var(--motion-route-ease),
        transform 600ms var(--motion-route-ease);
    transition-delay: var(--motion-route-delay, 0ms);
}

html.route-arriving
    :is(.hero, .page-hero)
    .hero-aside {
    transition:
        opacity 560ms var(--motion-route-ease),
        transform 620ms var(--motion-route-ease);
}

html.route-arriving
    :is(.hero, .page-hero)
    .breadcrumbs {
    transition:
        opacity 500ms var(--motion-route-ease),
        transform 580ms var(--motion-route-ease);
}

html.route-arriving
    :is(.hero, .page-hero)
    :is(.hero-media, .page-hero-media) {
    transition:
        opacity 620ms var(--motion-route-ease),
        transform 680ms var(--motion-route-ease);
}

.motion-word {
    display: inline-block;
    opacity: 0.001;
    filter: blur(3px);
    transform: translate3d(0, 10px, 0);
    backface-visibility: hidden;
    transition:
        opacity 900ms var(--motion-focus-ease),
        filter 950ms var(--motion-focus-ease),
        transform 950ms var(--motion-focus-ease);
    transition-delay: var(--motion-delay, 0ms);
}

[data-motion-prepared].is-motion-visible .motion-word {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
}

[data-motion-scene] {
    position: relative;
    z-index: 1;
    overflow: clip;
    border-radius: var(--motion-scene-radius) var(--motion-scene-radius) 0 0;
}

.services[data-motion-scene] {
    border-radius: var(--motion-scene-radius);
}

/* One moving piece of glass carries focus between navigation items. */
.topbar {
    --header-glass-background: rgba(8, 9, 8, 0.58);
    --header-glass-border: 1px solid rgba(241, 239, 233, 0.15);
    --header-glass-filter: blur(10px) saturate(128%);
    --header-glass-shadow:
        0 12px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(241, 239, 233, 0.08);
}

.nav-shell,
.header-panel .nav-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--header-glass-background) !important;
    -webkit-backdrop-filter: var(--header-glass-filter) !important;
    backdrop-filter: var(--header-glass-filter) !important;
    box-shadow: var(--header-glass-shadow) !important;
}

.header-panel .nav-shell a {
    position: relative;
    z-index: 1;
    background: transparent !important;
    transform: none !important;
    transition: color 240ms var(--motion-ease) !important;
}

.nav-glass-indicator {
    position: absolute;
    z-index: 0;
    top: 7px;
    bottom: 7px;
    left: 0;
    width: var(--nav-indicator-width, 0);
    border: 1px solid rgba(241, 239, 233, 0.1);
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        135deg,
        rgba(241, 239, 233, 0.15),
        rgba(241, 239, 233, 0.055)
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 7px 18px rgba(0, 0, 0, 0.12);
    transform: translate3d(var(--nav-indicator-x, 0), 0, 0);
    transition:
        width 400ms var(--motion-ease),
        transform 400ms var(--motion-ease),
        opacity 180ms ease-out;
    will-change: width, transform;
}

.nav-glass-indicator[data-visible='true'] {
    opacity: 1;
}

.language-switcher--header .language-menu-trigger,
.header-panel .menu-button {
    background: var(--header-glass-background) !important;
    -webkit-backdrop-filter: var(--header-glass-filter) !important;
    backdrop-filter: var(--header-glass-filter) !important;
    box-shadow: var(--header-glass-shadow) !important;
    transition:
        border-color 260ms var(--motion-ease),
        background-color 260ms var(--motion-ease),
        color 260ms var(--motion-ease) !important;
}

.language-menu-options {
    overflow: clip;
    pointer-events: none;
    opacity: 0.001;
    filter: blur(4px);
    background: rgba(11, 12, 10, 0.76) !important;
    -webkit-backdrop-filter: blur(10px) saturate(132%);
    backdrop-filter: blur(10px) saturate(132%);
    box-shadow:
        0 22px 56px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    animation: none !important;
    transform: translate3d(0, -8px, 0) scale(0.985);
    transform-origin: top right;
    transition:
        opacity 300ms var(--motion-focus-ease),
        filter 350ms var(--motion-focus-ease),
        transform 350ms var(--motion-focus-ease);
}

.language-switcher--header.is-open .language-menu-options {
    pointer-events: auto;
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

.language-menu-options button {
    transition:
        color 220ms var(--motion-ease),
        background-color 220ms var(--motion-ease) !important;
}

.language-menu-options button:hover,
.language-menu-options button:focus-visible {
    background: rgba(241, 239, 233, 0.1) !important;
}

.language-menu-options button[aria-selected='true'] {
    color: var(--ink) !important;
    background: var(--acid) !important;
}

/* Buttons focus their label instead of moving the whole control. */
.motion-button-label {
    display: inline-block;
    backface-visibility: hidden;
}

.motion-button:is(:hover, :focus-visible) .motion-button-label {
    animation: lonch-button-focus 240ms var(--motion-ease) both;
}

@keyframes lonch-button-focus {
    0% {
        opacity: 1;
        filter: blur(0);
    }
    38% {
        opacity: 0.7;
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

.nav-cta,
.button,
.button-dark,
.button-outline,
.round-link,
.submit-button,
.filter-button,
.round-control,
.review-control {
    transform: none !important;
    transition-duration: 260ms !important;
    transition-timing-function: var(--motion-ease) !important;
}

.nav-cta svg,
.button svg,
.button-dark svg,
.button-outline svg,
.round-link svg,
.services-index-link svg,
.case-tile-arrow svg {
    transition: transform 360ms var(--motion-ease);
}

.nav-cta:hover svg,
.nav-cta:focus-visible svg,
.button:hover svg,
.button:focus-visible svg,
.button-dark:hover svg,
.button-dark:focus-visible svg,
.button-outline:hover svg,
.button-outline:focus-visible svg {
    transform: translate3d(3px, 0, 0);
}

.round-link:hover svg,
.round-link:focus-visible svg,
.services-index-link:hover svg,
.services-index-link:focus-visible svg,
.case-tile:hover .case-tile-arrow svg,
.case-tile:focus-visible .case-tile-arrow svg {
    transform: translate3d(2px, -2px, 0);
}

.cases-progress span,
.review-progress span {
    transition: none !important;
}

.case-track {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.review-grid {
    scroll-snap-type: inline proximity;
    scroll-behavior: auto;
}

.motion-filter-in {
    animation: lonch-filter-focus 460ms var(--motion-focus-ease) both;
    animation-delay: var(--motion-delay, 0ms);
}

@keyframes lonch-filter-focus {
    from {
        opacity: 0.25;
        filter: blur(3px);
        transform: translate3d(0, 6px, 0);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
    }
}

@media (hover: hover) {
    .process-step,
    .case-device,
    .portfolio-cover img,
    .blog-media img {
        transition-duration: 520ms !important;
        transition-timing-function: var(--motion-ease) !important;
    }

    .process-step:hover {
        transform: translate3d(8px, 0, 0);
    }

    .case-card:hover .case-device,
    .case-card:focus-visible .case-device,
    .case-tile:hover .case-device,
    .case-tile:focus-visible .case-device {
        transform: translate3d(0, -6px, 0) rotate(var(--device-rotate));
    }

    .blog-card:hover .blog-media img,
    .case-card:hover .portfolio-cover img,
    .case-tile:hover .portfolio-cover img {
        transform: scale(1.018);
    }
}

.process-step > * {
    min-width: 0;
}

.process-step h3,
.process-step p {
    overflow-wrap: anywhere;
    hyphens: auto;
}

@media (max-width: 980px) {
    html.motion-ready {
        scroll-behavior: smooth !important;
    }

    .section[id],
    section[id] {
        scroll-margin-top: 84px;
    }

    .topbar {
        top: 0;
        left: 0;
        right: 0;
        min-height: 84px;
        padding: 18px var(--edge);
        border-bottom: 1px solid rgba(241, 239, 233, 0.1);
        background: rgba(8, 9, 8, 0.96);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .topbar .brand,
    .topbar[data-theme='light'] .brand,
    .topbar[data-theme='acid'] .brand {
        color: var(--paper);
    }

    .nav-glass-indicator {
        display: none;
    }

    .topbar .nav-shell {
        position: fixed !important;
        inset: 0 !important;
        z-index: -1 !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        gap: 6px;
        padding: 100px var(--edge) 60px;
        border: 0 !important;
        border-radius: 0 !important;
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        background: rgba(8, 9, 8, 0.98) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        clip-path: inset(0 0 100% 0);
        transition:
            clip-path 520ms var(--motion-curtain-ease),
            opacity 180ms ease-out,
            visibility 0s linear 520ms;
    }

    .topbar.is-open .nav-shell {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
        clip-path: inset(0 round 0);
        transition:
            clip-path 520ms var(--motion-curtain-ease),
            opacity 180ms ease-out,
            visibility 0s linear 0s;
    }

    .topbar .nav-shell a {
        padding: 14px 0;
        border-bottom: 1px solid var(--line-dark, rgba(241, 239, 233, 0.14));
        border-radius: 0;
        font-family: var(--display);
        font-size: clamp(28px, 7vw, 48px);
        color: var(--paper);
    }

    .language-switcher--header .language-menu-trigger,
    .header-panel .menu-button {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .process-step {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 16px 24px;
    }

    .process-step p {
        grid-column: 2;
    }

    .hero-media > :is(img, [data-hero-portal]) {
        transform: translate3d(0, var(--motion-stack-lag, 0px), 0)
            scale(1.035) !important;
        will-change: auto;
    }

    .page-hero-media > img {
        transform: scale(1.035) !important;
        will-change: auto;
    }
}

@media (max-width: 680px) {
    .section[id],
    section[id] {
        scroll-margin-top: 76px;
    }

    .topbar {
        min-height: 76px;
        padding-block: 16px;
    }

    .topbar .nav-shell {
        padding-top: 92px;
        clip-path: inset(0 0 100% 0);
    }

    .process-step {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    html.motion-ready {
        scroll-behavior: auto !important;
    }

    .motion-route-layer,
    html.route-arriving::after {
        display: none;
    }

    .topbar .nav-shell,
    .topbar.is-open .nav-shell,
    .motion-button-label,
    .motion-word,
    .motion-filter-in,
    [data-motion-scene] {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal],
    [data-motion-blur] > *,
    [data-motion-words],
    .hero-aside,
    .breadcrumbs,
    .hero-media,
    .page-hero-media,
    .motion-word {
        opacity: 1 !important;
        filter: none !important;
        clip-path: none !important;
        transform: none !important;
    }

    .hero-media > :is(img, [data-hero-portal]),
    .page-hero-media > img {
        transform: none !important;
        will-change: auto;
    }
}