/*
  Synkyn Studios — Home page styles
  Extracted from index.html so it can be cached across navigations.
  Blocks appear in their original document order; the cascade is unchanged.
*/

/* ===== synkyn-responsive-fixes ===== */

.hero-brand {
    font-weight: 600;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-brand {
        font-size: clamp(2.5rem, 8vw, 4.5rem) !important;
        line-height: .95 !important;
    }

    .hero-services {
        font-size: clamp(1.1rem, 3.2vw, 1.8rem) !important;
        line-height: 1.15 !important;
    }

    .hero-tagline {
        font-size: clamp(1.05rem, 2.4vw, 1.5rem) !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 767px) {
    .hero-bottom-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #hero-showreel-wrap {
        order: 1 !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 276px !important;
        margin: clamp(1.25rem, 3.5vh, 2rem) auto clamp(1rem, 2.5vh, 1.5rem) auto !important;
    }

    #hero-tagline-block {
        order: 2 !important;
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    #hero-tagline-block .hero-tagline {
        text-align: center !important;
    }

    #hero-mobile-copyright {
        order: 3 !important;
    }
}

@media (max-width: 767px) {
    #hero .hero-top-layout {
        gap: 1.5rem !important;
        margin-bottom: clamp(1.25rem, 3.5vh, 2rem) !important;
    }

    .hero-brand {
        font-size: clamp(2rem, 10vw, 3rem) !important;
        line-height: .95 !important;
        letter-spacing: -.02em !important;
    }

    .hero-reg {
        font-size: .32em !important;
    }

    .hero-services-list {
        gap: .38rem !important;
        padding-top: 0 !important;
    }

    .hero-services {
        font-size: clamp(.95rem, 4.4vw, 1.35rem) !important;
        line-height: 1.14 !important;
    }

    .hero-tagline {
        font-size: clamp(.98rem, 4vw, 1.2rem) !important;
        line-height: 1.4 !important;
    }

    .hero-copyright {
        font-size: clamp(.72rem, 3vw, .85rem) !important;
    }

    .space-earth-container .section-title {
        font-size: clamp(2rem, 9.5vw, 3.1rem) !important;
        line-height: 1.06 !important;
    }
}

@media (max-width: 430px) {
    .hero-brand {
        font-size: clamp(1.8rem, 9.5vw, 2.5rem) !important;
    }

    .hero-services {
        font-size: clamp(.9rem, 4.4vw, 1.2rem) !important;
    }

    .hero-tagline {
        font-size: clamp(.95rem, 4vw, 1.1rem) !important;
    }
}

@media (max-width: 360px) {
    .hero-brand {
        font-size: clamp(1.6rem, 9vw, 2.2rem) !important;
    }

    .hero-services {
        font-size: clamp(.82rem, 4.3vw, 1.05rem) !important;
    }

    .hero-tagline {
        font-size: clamp(.9rem, 4vw, 1.02rem) !important;
    }
}

@media (min-width: 1024px) {
    .hero-brand {
        font-size: clamp(2.5rem, min(6.5vw, 7.5dvh), 6rem) !important;
        line-height: .9 !important;
    }

    .hero-services {
        font-size: clamp(1.05rem, min(2.35vw, 3dvh), 2rem) !important;
    }

    .hero-tagline {
        font-size: clamp(1.05rem, min(1.5vw, 2.1dvh), 1.6rem) !important;
    }
}


/* ===== synkyn-enhanced-responsive ===== */

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
}

#hero {
    min-height: 100dvh;
    height: auto;
    position: relative;
}

@media (min-width: 1024px) {
    #hero {
        height: 100svh;
    }
}

.hero-inner {
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .hero-inner {
        border-radius: 32px;
        border: 12px solid #000;
    }
}

@media (min-width: 1024px) {
    .hero-inner {
        border-radius: 64px;
        border: 16px solid #000;
    }
}

.hero-brand {
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.04em;
}

#hero-how-it-works-btn {
    display: block !important;
    aspect-ratio: 16 / 9 !important;
    width: 310px !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    position: relative !important;
}

#hero-thumbnail-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    #hero .relative.z-10 {
        padding-top: 5.25rem !important;
        padding-bottom: 2.5rem !important;
    }

    .hero-top-layout {
        gap: 0.75rem !important;
        margin-bottom: clamp(1.25rem, 3.5vh, 2rem) !important;
    }

    .hero-brand {
        font-size: clamp(1.65rem, 8.5vw, 2.8rem) !important;
        line-height: 0.92 !important;
    }

    .hero-services-list {
        gap: 0.25rem !important;
        padding-top: 0 !important;
    }

    .hero-services {
        font-size: clamp(0.85rem, 3.5vw, 1.1rem) !important;
        line-height: 1.15 !important;
    }

    .hero-tagline {
        font-size: clamp(0.9rem, 3.5vw, 1.15rem) !important;
        line-height: 1.32 !important;
        margin-bottom: 0.5rem;
    }

    .hero-showreel-container {
        width: 100%;
        display: flex;
        justify-content: center !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    #hero-how-it-works-btn {
        display: block !important;
        width: 100% !important;
        max-width: 276px !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 auto !important;
        border-width: 4px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.75) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #hero .relative.z-10 {
        padding-top: 7.5rem !important;
        padding-bottom: 4rem !important;
    }

    .hero-brand {
        font-size: clamp(2.8rem, 6.5vw, 4.5rem) !important;
    }

    .hero-services {
        font-size: clamp(1.1rem, 2.4vw, 1.6rem) !important;
    }

    .hero-tagline {
        font-size: clamp(1.05rem, 2.2vw, 1.45rem) !important;
    }

    #hero-how-it-works-btn {
        width: 260px !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

@media (min-width: 64rem) {
    .lg\:w-\[280px\] {
        width: 280px !important;
        height: 155px !important;
    }

    #hero-how-it-works-btn {
        width: 280px !important;
        height: 155px !important;
        aspect-ratio: 16 / 9 !important;
    }
}

.pipeline-section {
    padding: 0 1rem;
}

.pipeline-section .hero {
    padding: clamp(120px, 18vh, 220px) 1rem 80px;
}

#space-earth-text {
    font-size: clamp(2.2rem, 9vw, 4.2rem);
    line-height: 1.05;
    text-align: center;
}

.footer-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
}

@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1.1fr 1fr;
    }
}

@media (max-width: 640px) {
    .modal-card {
        border-radius: 0 !important;
        max-height: none !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}


/* ===== synkyn-showreel-16x9-fix ===== */

#hero-how-it-works-btn {
    display: block !important;
    position: relative !important;
    width: 310px !important;
    max-width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.75) !important;
}

@media (max-width: 767px) {
    #hero-how-it-works-btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 0 !important;
        padding-bottom: 56.25% !important;
        margin: 0 auto !important;
        border-width: 4px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.75) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #hero-how-it-works-btn {
        width: 260px !important;
        height: 0 !important;
        padding-bottom: 56.25% !important;
    }
}

@media (min-width: 64rem) {
    .lg\:w-\[280px\] {
        width: 280px !important;
        height: 0 !important;
        padding-bottom: 56.25% !important;
    }

    #hero-how-it-works-btn {
        width: 280px !important;
        height: 0 !important;
        padding-bottom: 56.25% !important;
    }
}


/* ===== inline block ===== */

#video-modal.is-open {
    display: flex !important;
}

.cinematic-backdrop {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.85) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.modal-card {
    width: 100%;
    max-width: min(1200px, calc((100vh - 120px) * 16 / 9), 92vw);
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85);
}

@media (max-width: 640px) {
    .modal-card {
        width: 100%;
        max-width: 100vw;
        aspect-ratio: 16 / 9;
        height: auto;
        border-radius: 0;
    }
}

.v-header-title {
    position: relative;
    z-index: 20;
    color: rgba(255, 255, 255, 0.95);
    font-family: inherit;
    font-weight: 900;
    font-size: clamp(1.4rem, 3.8vw, 2.5rem);
    letter-spacing: 0.12em;
    text-align: center;
    pointer-events: none;
    margin-bottom: 24px;
    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 1;
    transform: translateY(0);
}

.v-header-title.hidden-ui {
    opacity: 0;
    transform: translateY(-16px);
}

@media (max-width: 640px) {
    .v-header-title {
        margin-bottom: 14px;
    }
}

.v-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.v-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
}

.v-click {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 4;
}

.v-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 30px 18px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, 0) 100%);
    opacity: 1;
    transition: opacity .35s ease;
    pointer-events: auto;
}

.v-controls.hidden-ui {
    opacity: 0;
    pointer-events: none;
}

.v-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.v-btn:hover {
    background: #f2d400;
    color: #000;
    border-color: #f2d400;
    transform: scale(1.06);
}

.v-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.v-progress {
    position: relative;
    flex: 1 1 auto;
    height: 26px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
    outline: none;
}

.v-track {
    position: relative;
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
    transition: height .15s ease;
}

.v-progress:hover .v-track,
.v-progress:focus-visible .v-track {
    height: 7px;
}

.v-buffered {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: rgba(255, 255, 255, .34);
}

.v-played {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #ffe08a 0%, #f2d400 100%);
}

.v-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(242, 212, 0, .35);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.v-progress:hover .v-thumb,
.v-progress:focus-visible .v-thumb,
.v-progress.scrubbing .v-thumb {
    opacity: 1;
}

.v-time {
    flex: 0 0 auto;
    color: #fff;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    white-space: nowrap;
    min-width: 92px;
    text-align: center;
}

@media (max-width: 640px) {
    .v-controls {
        gap: 8px;
        padding: 26px 10px 10px;
    }

    .v-btn {
        width: 34px;
        height: 34px;
    }

    .v-btn svg {
        width: 16px;
        height: 16px;
    }

    .v-time {
        font-size: 11px;
        min-width: 78px;
    }
}

#modal-content:fullscreen,
#modal-content:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    aspect-ratio: auto;
}


/* ===== inline block ===== */

.actually-area {
    position: relative;
    height: 100vh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    background-color: transparent !important;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.85s cubic-bezier(.16, 1, .3, 1),
        transform 0.85s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
}

.actually-area.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.actually-area-inner {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.space-earth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.actually-area::before,
.actually-area::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(80px, 14vh, 180px);
    pointer-events: none;
    z-index: 5;
}

.actually-area::before {
    top: -1px;
    background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.actually-area::after {
    bottom: -1px;
    background: linear-gradient(to top, #080808 0%, rgba(8, 8, 8, 0) 100%);
}

#space-earth-text {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: background-position;
}

@media (max-width: 768px) {
    .actually-area {
        filter: none !important;
    }

    .actually-area-inner {
        padding-top: clamp(48px, 10vh, 80px) !important;
        padding-bottom: clamp(48px, 10vh, 80px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .actually-area {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* ===== inline block ===== */

.hero-inner {
    border-radius: 0;
}

@media (min-width: 640px) {
    .hero-inner {
        border-radius: 24px;
    }
}

@media (min-width: 768px) {
    .hero-inner {
        border-radius: 40px;
        border: 12px solid #000;
    }
}

@media (min-width: 1024px) {
    .hero-inner {
        border-radius: 64px;
        border: 16px solid #000;
    }
}

.hero-video-bg {
    pointer-events: none;
    background: #000;
}

.hero-video-bg .hero-bg-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

.hero-bg-mobile {
    display: none;
}

@media (max-width:767px) {
    .hero-bg-desktop {
        display: none;
    }

    .hero-bg-mobile {
        display: block;
    }
}

.pipeline-section {
    --gold: #e8b34a;
    --gold-bright: #ffd77e;
    --ink: #f2f3f6;
    --ink-dim: #8f95a0;
    --font-display: "Inter Tight", system-ui, sans-serif;
    --font-body: "Inter Tight", system-ui, sans-serif;
    --ease-soft: cubic-bezier(0.22, 0.61, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    padding: 0;
}

.pipeline-section::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 280px;
    background: linear-gradient(to bottom, transparent 0%, #080808 100%);
    z-index: 5;
    pointer-events: none;
}

.pipeline-section .flecks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.pipeline-section .fleck {
    fill: var(--gold);
    transform-box: fill-box;
    transform-origin: center;
    animation:
        fleck-drift var(--fd, 14s) ease-in-out infinite alternate,
        fleck-fade var(--ff, 5s) ease-in-out infinite alternate;
    will-change: transform, opacity;
}

.pipeline-section .fleck.dust {
    fill: #aab0bd;
}

@keyframes fleck-drift {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    to {
        transform: translate3d(var(--dx, 10px), var(--dy, -14px), 0) rotate(var(--rot, 30deg));
    }
}

@keyframes fleck-fade {
    from {
        opacity: 0.06;
    }

    to {
        opacity: var(--fo, 0.4);
    }
}

.pipeline-section .hero {
    min-height: auto;
    display: grid;
    place-content: center;
    text-align: center;
    padding: clamp(140px, 20vh, 220px) 24px clamp(40px, 6vh, 60px);
    background: transparent;
}

.pipeline-section .hero-eyebrow {
    color: var(--gold);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.46em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.pipeline-section .hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(34px, 5.4vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    display: grid;
    gap: 2px;
}

.pipeline-section .hero-gold {
    background: linear-gradient(100deg, #f6c15e 0%, #ffe3a0 45%, #e0a63e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pipeline-section .hero-white {
    color: var(--ink);
}

.pipeline-section .hero-sub {
    margin-top: 6px;
    color: var(--gold);
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
    max-width: 800px;
    margin-inline: auto;
    text-transform: none;
    text-shadow: none;
}

.pipeline-section .journey {
    position: relative;
    max-width: 1360px;
    margin-inline: auto;
    background: transparent;
    margin-top: 0;
}

.pipeline-section .journey-svg {
    display: block;
    width: min(1200px, 100%);
    height: auto;
    margin-inline: auto;
    overflow: visible;
}

.pipeline-section .trail-dim {
    stroke: #6f5c2f;
    stroke-width: 1.6;
    fill: none;
    opacity: 0.38;
    stroke-linecap: round;
}

.pipeline-section .trail-halo {
    filter: none !important;
    stroke: #b97f22;
    stroke-width: 26;
    fill: none;
    opacity: 0.22;
    stroke-linecap: round;
}

.pipeline-section .trail-glow {
    filter: none !important;
    stroke: #f4b452;
    stroke-width: 12;
    fill: none;
    opacity: 0.45;
    stroke-linecap: round;
}

.pipeline-section .trail-core {
    stroke: url(#g-trail);
    stroke-width: 3.4;
    fill: none;
    stroke-linecap: round;
}

.pipeline-section .trail-halo,
.pipeline-section .trail-glow,
.pipeline-section .trail-core {
    will-change: stroke-dashoffset;
}

.pipeline-section .rocket-traveler {
    will-change: transform, opacity;
    transition: opacity 0.4s ease;
}

.pipeline-section .rocket-traveler .rt-glow {
    animation: rt-breathe 2.2s ease-in-out infinite alternate;
}

@keyframes rt-breathe {
    from {
        opacity: 0.55;
        transform: scale(0.94);
    }

    to {
        opacity: 0.85;
        transform: scale(1.08);
    }
}

.pipeline-section .rocket-traveler .rt-flame-outer,
.pipeline-section .rocket-traveler .rt-flame-core,
.rt-flame-outer,
.rt-flame-core {
    transform-origin: 0 0;
    will-change: transform, opacity;
}

.pipeline-section .rocket-traveler .rt-flame-outer:nth-of-type(1),
.rt-flame-outer:nth-of-type(1) {
    animation: flame-outer-a 0.55s ease-in-out infinite;
}

.pipeline-section .rocket-traveler .rt-flame-outer:nth-of-type(2),
.rt-flame-outer:nth-of-type(2) {
    animation: flame-outer-b 0.4s ease-in-out infinite;
    animation-delay: -0.15s;
}

.pipeline-section .rocket-traveler .rt-flame-core,
.rt-flame-core {
    animation: flame-core 0.25s ease-in-out infinite;
    animation-delay: -0.08s;
}

@keyframes flame-outer-a {
    0% {
        transform: scaleY(1) scaleX(1);
        opacity: .85;
    }

    30% {
        transform: scaleY(1.08) scaleX(0.95);
        opacity: 1;
    }

    55% {
        transform: scaleY(0.94) scaleX(1.05);
        opacity: .8;
    }

    80% {
        transform: scaleY(1.05) scaleX(0.97);
        opacity: .95;
    }

    100% {
        transform: scaleY(1) scaleX(1);
        opacity: .85;
    }
}

@keyframes flame-outer-b {
    0% {
        transform: scaleY(1) translateX(0);
        opacity: .7;
    }

    25% {
        transform: scaleY(1.12) translateX(0.6px);
        opacity: .9;
    }

    50% {
        transform: scaleY(0.9) translateX(-0.4px);
        opacity: .65;
    }

    75% {
        transform: scaleY(1.06) translateX(0.5px);
        opacity: .85;
    }

    100% {
        transform: scaleY(1) translateX(0);
        opacity: .7;
    }
}

@keyframes flame-core {
    0% {
        transform: scaleY(1) scaleX(1);
        opacity: 1;
    }

    20% {
        transform: scaleY(1.15) scaleX(0.9);
        opacity: .9;
    }

    45% {
        transform: scaleY(0.92) scaleX(1.08);
        opacity: 1;
    }

    70% {
        transform: scaleY(1.1) scaleX(0.94);
        opacity: .95;
    }

    100% {
        transform: scaleY(1) scaleX(1);
        opacity: 1;
    }
}

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

    .pipeline-section .rocket-traveler .rt-flame-outer,
    .pipeline-section .rocket-traveler .rt-flame-core,
    .rt-flame-outer,
    .rt-flame-core {
        animation: none;
    }
}

.rocket-rim {
    animation: rim-shimmer 2.4s ease-in-out infinite;
}

@keyframes rim-shimmer {

    0%,
    100% {
        opacity: .25;
    }

    50% {
        opacity: .5;
    }
}

.pipeline-section .clouds,
.pipeline-section .fg-clouds,
.pipeline-section .node-clouds,
.pipeline-section .cloud {
    pointer-events: none;
    will-change: transform;
    transform-origin: center;
}

.pipeline-section .cloud.drift-a {
    animation: cloud-drift-a 18s ease-in-out infinite alternate;
}

.pipeline-section .cloud.drift-b {
    animation: cloud-drift-b 22s ease-in-out infinite alternate;
}

.pipeline-section .cloud.drift-c {
    animation: cloud-drift-c 26s ease-in-out infinite alternate;
}

@keyframes cloud-drift-a {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(24px, -12px, 0) scale(1.03);
    }
}

@keyframes cloud-drift-b {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-24px, 12px, 0) scale(1.03);
    }
}

@keyframes cloud-drift-c {
    from {
        transform: translate3d(0, 0, 0) scale(1) rotate(-1deg);
    }

    to {
        transform: translate3d(16px, 16px, 0) scale(1.04) rotate(1.5deg);
    }
}

.pipeline-section .node {
    opacity: 0.32;
    transition: opacity 0.7s ease;
}

.pipeline-section .node .node-glow {
    opacity: 0;
    transition: opacity 0.9s ease;
}

.pipeline-section .node .node-ring {
    stroke: #7d6a38;
    fill: none;
    stroke-width: 1.6;
    transition: stroke 0.7s ease;
}

.pipeline-section .node .node-core {
    fill: #55503f;
    transition: fill 0.7s ease;
}

.pipeline-section .node.lit {
    opacity: 1;
}

.pipeline-section .node.lit .node-glow {
    opacity: 0.9;
}

.pipeline-section .node.lit .node-ring {
    stroke: var(--gold-bright);
}

.pipeline-section .node.lit .node-core {
    fill: #fffdf4;
}

.pipeline-section .stop {
    position: absolute;
    z-index: 30 !important;
    top: var(--top);
    width: min(420px, 38%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
    will-change: transform, opacity;
}

.pipeline-section .stop.in {
    opacity: 1;
    transform: translateY(0);
}

.pipeline-section .stop.left {
    left: clamp(20px, 7%, 110px);
    text-align: left;
}

.pipeline-section .stop.right {
    right: clamp(20px, 7%, 110px);
    text-align: right;
    align-items: flex-end;
}

.pipeline-section .num {
    color: var(--gold);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.32em;
}

.pipeline-section .eyebrow {
    color: var(--gold);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.pipeline-section .title {
    margin-top: 4px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 3.1vw, 42px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #ffffff;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.95);
}

.pipeline-section .desc {
    margin-top: 4px;
    color: #e2e8f0;
    font-size: 16.5px;
    line-height: 1.75;
    max-width: 44ch;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.pipeline-section .outro {
    padding: 40px 24px 140px;
    text-align: center;
}

.pipeline-section .outro-line {
    color: var(--ink-dim);
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .pipeline-section .hero {
        padding: clamp(100px, 16vh, 180px) 20px 30px !important;
        min-height: auto !important;
    }

    .pipeline-section .hero-title {
        font-size: clamp(28px, 4.2vw, 40px) !important;
    }

    .pipeline-section .journey {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    .pipeline-section .journey-svg {
        display: block !important;
        width: 100% !important;
        max-width: 1000px !important;
        height: auto !important;
        margin-inline: auto !important;
        overflow: visible !important;
    }

    .pipeline-section .fg-clouds {
        opacity: 0.35 !important;
    }

    .pipeline-section .rocket-traveler {
        z-index: 50;
    }

    .pipeline-section .stop {
        width: min(290px, 34%) !important;
        padding: 14px 16px !important;
        background: rgba(10, 12, 18, 0.76) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
        z-index: 25 !important;
    }

    .pipeline-section .stop.left {
        left: clamp(14px, 2.8%, 30px) !important;
        text-align: left !important;
    }

    .pipeline-section .stop.right {
        right: clamp(14px, 2.8%, 30px) !important;
        text-align: right !important;
        align-items: flex-end !important;
    }

    .pipeline-section .stop .title {
        font-size: clamp(19px, 2.4vw, 26px) !important;
        line-height: 1.22 !important;
        margin-top: 2px !important;
    }

    .pipeline-section .stop .desc {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        max-width: 28ch !important;
        margin-top: 4px !important;
    }

    .pipeline-section .stop .num {
        font-size: 11px !important;
        letter-spacing: 0.24em !important;
    }

    .pipeline-section .stop .eyebrow {
        font-size: 11px !important;
        letter-spacing: 0.2em !important;
    }
}

@media (max-width: 767px) {
    .pipeline-section {
        position: relative;
        padding-bottom: 60px !important;
        overflow: hidden;
    }

    .pipeline-section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 160px;
        background: linear-gradient(to bottom, rgba(8, 8, 8, 0) 0%, rgba(8, 8, 8, 0.8) 50%, #080808 100%);
        pointer-events: none;
        z-index: 45;
    }

    .pipeline-section .flecks {
        display: none !important;
    }

    .pipeline-section .journey-svg {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1;
    }

    .pipeline-section .cloud {
        animation: none !important;
    }

    .pipeline-section .hero {
        padding: clamp(80px, 14vh, 140px) 20px 24px !important;
        min-height: auto !important;
    }

    .pipeline-section .hero-title {
        font-size: clamp(28px, 8vw, 42px) !important;
    }

    .pipeline-section .journey {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
        padding: 20px 16px 80px 16px !important;
        margin: 0 auto !important;
        max-width: 600px !important;
    }

    .pipeline-section .mobile-timeline-track {
        display: block !important;
        position: absolute;
        top: 20px;
        bottom: 40px;
        left: 28px;
        width: 2.5px;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        z-index: 5;
        pointer-events: none;
    }

    .pipeline-section .mobile-timeline-bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #fff4d6 0%, #ffd98a 40%, #f2d400 100%);
        border-radius: 999px;
        transform-origin: top;
        transform: scaleY(0);
        will-change: transform;
        box-shadow: 0 0 10px rgba(242, 212, 0, 0.8), 0 0 20px rgba(242, 212, 0, 0.4);
    }

    .pipeline-section .mobile-rocket {
        display: block !important;
        position: absolute;
        top: 20px;
        left: 28px;
        width: 58px;
        height: 140px;
        transform: translate3d(-50%, var(--rocket-y, 0px), 0);
        will-change: transform, opacity;
        transition: opacity 0.2s ease-out;
        z-index: 15;
        pointer-events: none;
    }

    .pipeline-section .stop {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: calc(100% - 48px) !important;
        margin: 0 0 0 48px !important;
        padding: 20px 18px !important;
        background: rgba(12, 14, 20, 0.88) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
        z-index: 20 !important;
        text-align: left !important;
        align-items: flex-start !important;
        opacity: 0.35;
        transform: translate3d(0, 16px, 0);
        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
            border-color 0.4s ease,
            box-shadow 0.4s ease !important;
        will-change: transform, opacity;
    }

    .pipeline-section .stop.in {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
        border-color: rgba(242, 212, 0, 0.32) !important;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.75), 0 0 20px -8px rgba(242, 212, 0, 0.25) !important;
    }

    .pipeline-section .stop .num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.2em;
        color: var(--gold);
        padding: 3px 10px;
        background: rgba(242, 212, 0, 0.08);
        border: 1px solid rgba(242, 212, 0, 0.2);
        border-radius: 999px;
        margin-bottom: 4px;
    }

    .pipeline-section .stop.in .num {
        background: rgba(242, 212, 0, 0.16);
        border-color: rgba(242, 212, 0, 0.45);
        color: #fff;
        text-shadow: 0 0 10px rgba(242, 212, 0, 0.8);
    }

    .pipeline-section .stop .title {
        font-size: clamp(18px, 5.2vw, 23px) !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
        line-height: 1.2 !important;
        margin-top: 4px !important;
    }

    .pipeline-section .stop .eyebrow {
        font-size: 11px !important;
        letter-spacing: 0.18em !important;
    }

    .pipeline-section .stop .desc {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        color: rgba(255, 255, 255, 0.72) !important;
        margin-top: 6px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pipeline-section .stop {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 1024px) {
    .pipeline-graphic {
        mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
    }
}


/* ===== inline block ===== */

/* ===== Showcase Section is styled via assets/logo-showcase.css ===== */


/* ===== inline block ===== */

#final-talk-cta {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 10;
}

#final-talk-cta .cta-eyebrow {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffd84d;
    margin-bottom: 0.85rem;
}

#final-talk-cta .cta-heading {
    color: #ffffff;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 auto 1rem;
    max-width: 760px;
}

#final-talk-cta .cta-desc {
    color: rgba(255, 255, 255, 0.68);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.65;
    max-width: 520px;
    margin: 0 auto 2.25rem;
}

.synkyn-final-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2.3rem;
    border-radius: 9999px;
    background-color: #f2d400;
    color: #0a0a0a !important;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 12px 36px rgba(242, 212, 0, 0.28);
    border: 1px solid #f2d400;
    cursor: pointer;
}

.synkyn-final-cta-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    transition: transform 0.25s ease;
}

.synkyn-final-cta-btn:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #0a0a0a !important;
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(255, 255, 255, 0.25);
}

.synkyn-final-cta-btn:hover svg {
    transform: translateX(4px);
}

@media (max-width: 640px) {
    .synkyn-final-cta-btn {
        width: 100%;
        max-width: 340px;
        padding: 0.95rem 1.6rem;
    }
}


/* ===== synkyn-final-responsive ===== */

/* Mobile Touch & Cross-Platform Instant Tap */
a,
button,
input,
textarea,
select,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

* {
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Apple trackpad swipe navigation fix */
html,
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overscroll-behavior-x: none;
}

/* Lenis buttery-smooth scroll engine */
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;
}

/* Eliminate hover recalculations and repaints during active scroll for 60-120 FPS */
html.lenis-scrolling iframe,
html.lenis-scrolling video,
html.lenis-scrolling .hero-video-bg,
.lenis.lenis-scrolling iframe,
.lenis.lenis-scrolling video,
.lenis.lenis-scrolling .hero-video-bg {
    pointer-events: none !important;
}


/* WebKit SVG GPU compositing for Safari */
.pipeline-section .journey-svg {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Minimalist premium dark scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    border: 2px solid #080808;
    transition: background 0.25s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(242, 212, 0, 0.7);
}

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

/* Reading / Scroll progress indicator at top edge */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    width: 100%;
    height: 2.5px;
    background: linear-gradient(90deg, #f2d400 0%, #ffb700 50%, #ffe45c 100%);
    box-shadow: 0 0 10px rgba(242, 212, 0, 0.6), 0 0 20px rgba(242, 212, 0, 0.25);
    z-index: 1000000;
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    transition: transform 0.05s linear;
}

/* Floating back-to-top button */
.back-to-top-btn {
    position: fixed;
    bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 20px));
    right: max(32px, calc(env(safe-area-inset-right, 0px) + 20px));
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(14, 14, 14, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffd633;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InVwU2hhZG93IiB4PSItMzAlIiB5PSItMzAlIiB3aWR0aD0iMTYwJSIgaGVpZ2h0PSIxNjAlIj4KICAgICAgPGZlRHJvcFNoYWRvdyBkeD0iMCIgZHk9IjEuNSIgc3RkRGV2aWF0aW9uPSIxLjUiIGZsb29kLWNvbG9yPSIjMDAwMDAwIiBmbG9vZC1vcGFjaXR5PSIwLjg1Ii8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcgZmlsdGVyPSJ1cmwoI3VwU2hhZG93KSI+CiAgICA8cGF0aCBkPSJNMTYgMiBMMjYgMTQgTDIwIDE0IEwyMCAyNiBMMTIgMjYgTDEyIDE0IEw2IDE0IFoiIGZpbGw9IiMwODA4MDgiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMTYgMy41IEwyNC41IDEzLjUgTDE5IDEzLjUgTDE5IDI0LjUgTDEzIDI0LjUgTDEzIDEzLjUgTDcuNSAxMy41IFoiIGZpbGw9IiNmZmQ2MzMiLz4KICAgIDxwYXRoIGQ9Ik0xNiA2IEwyMiAxMyBMMTcuNSAxMyBMMTcuNSAyMi41IEwxNC41IDIyLjUgTDE0LjUgMTMgTDEwIDEzIFoiIGZpbGw9IiNmZmZmZmYiLz4KICAgIDxwb2x5Z29uIHBvaW50cz0iMTYsOC41IDE5LDEzIDEzLDEzIiBmaWxsPSIjZjJkNDAwIi8+CiAgPC9nPgo8L3N2Zz4=') 16 2, pointer !important;
    z-index: 9000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.85);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s, background-color 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 15px rgba(242, 212, 0, 0.12);
}

.back-to-top-btn * {
    cursor: inherit !important;
}

.back-to-top-btn svg,
.back-to-top-btn svg * {
    pointer-events: none !important;
}

.back-to-top-btn svg {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.back-to-top-btn:hover {
    background: rgba(26, 26, 26, 0.92);
    border-color: rgba(242, 212, 0, 0.6);
    color: #ffffff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 24px rgba(242, 212, 0, 0.35);
}

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

.back-to-top-btn:active {
    transform: translateY(0) scale(0.96);
    cursor: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9InVwU2hhZG93QWN0aXZlIiB4PSItMzAlIiB5PSItMzAlIiB3aWR0aD0iMTYwJSIgaGVpZ2h0PSIxNjAlIj4KICAgICAgPGZlRHJvcFNoYWRvdyBkeD0iMCIgZHk9IjEiIHN0ZERldmlhdGlvbj0iMi41IiBmbG9vZC1jb2xvcj0iI2ZmZDYzMyIgZmxvb2Qtb3BhY2l0eT0iMC43NSIvPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxnIGZpbHRlcj0idXJsKCN1cFNoYWRvd0FjdGl2ZSkiPgogICAgPHBhdGggZD0iTTE2IDEgTDI3IDEzIEwyMSAxMyBMMjEgMjQgTDExIDI0IEwxMSAxMyBMNSAxMyBaIiBmaWxsPSIjMDAwMDAwIiBzdHJva2U9IiNmMmQ0MDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgICA8cGF0aCBkPSJNMTYgMyBMMjQuNSAxMi41IEwxOS41IDEyLjUgTDE5LjUgMjIuNSBMMTIuNSAyMi41IEwxMi41IDEyLjUgTDcuNSAxMi41IFoiIGZpbGw9IiNmZmQ2MzMiLz4KICAgIDxwYXRoIGQ9Ik0xNiA1LjUgTDIyIDEyIEwxNy41IDEyIEwxNy41IDIwLjUgTDE0LjUgMjAuNSBMMTQuNSAxMiBMMTAgMTIgWiIgZmlsbD0iI2ZmZmZmZiIvPgogIDwvZz4KPC9zdmc+') 16 1, pointer !important;
}

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

@media (max-width: 768px) {
    .back-to-top-btn {
        bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
        right: max(20px, calc(env(safe-area-inset-right, 0px) + 12px));
        width: 42px;
        height: 42px;
    }
}

main,
main>section {
    max-width: 100%;
}

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

.scroll-bar,
.sidebar {
    -webkit-overflow-scrolling: touch;
}

#hero {
    height: 100svh;
    height: 100dvh;
    min-height: 560px;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    #hero {
        min-height: 640px;
    }

    .pipeline-section .stop {
        width: min(360px, 46%);
    }

    .pipeline-section .title {
        font-size: clamp(22px, 3.4vw, 30px);
    }

    .pipeline-section .desc {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    #hero {
        min-height: 520px;
    }

    .pipeline-section .hero {
        padding-top: clamp(70px, 12vh, 120px);
    }
}

@media (max-width: 400px) {
    .pipeline-section .stop {
        width: min(300px, 82%);
    }
}

@media (hover: none) and (pointer: coarse) {

    .btn,
    a.btn,
    button.btn {
        min-height: 44px;
    }

    .nav-hamburger {
        min-height: 48px;
    }
}

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


/* ==========================================================================
   FULL-BLEED VIEWPORT
   --------------------------------------------------------------------------
   The 8px scrollbar defined above is what shows as a strip down the right
   edge (gold on hover). Hiding it makes the page edge-to-edge. Scrolling
   still works by wheel, trackpad, touch, keyboard and Lenis — only the
   visual track is removed.

   This is safe here because #scroll-progress-bar already gives a position
   cue at the top edge. Without that affordance, hiding the scrollbar would
   leave people no way to judge page length.
   ========================================================================== */
html {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body {
    scrollbar-width: none !important;
    margin: 0 !important;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Inner scrollers (mobile menu, dropdowns) keep a slim visible bar so they
   don't become undiscoverable. */
.sidebar::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    display: block !important;
}

/* ==========================================================================
   HERO REVEAL FAILSAFE
   --------------------------------------------------------------------------
   main.css holds .reveal-text / .reveal-wipe / [data-ns-animate] at
   opacity:0 until the GSAP reveal runs. If the animation stack is slow or
   fails, the hero stays black. The inline head script adds .fx-failsafe when
   the engine has not initialised in time; !important here beats any inline
   opacity GSAP may later write, so content cannot be re-hidden.
   ========================================================================== */
html.fx-failsafe .reveal-text,
html.fx-failsafe .reveal-wipe,
html.fx-failsafe [data-ns-animate],
html.fx-failsafe .actually-area,
html.fx-failsafe .hero-brand,
html.fx-failsafe .hero-services,
html.fx-failsafe .hero-tagline {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    visibility: visible !important;
}

/* ==========================================================================
   HERO REVEAL — CSS-FIRST, NO JS DEPENDENCY
   --------------------------------------------------------------------------
   THE PROBLEM THIS SOLVES

   main.css contains:
       [data-ns-animate] { opacity: 0 }
       .reveal-wipe      { clip-path: inset(0 100% 0 0) }

   and only reveals them via `.in-view`, which main.js adds through an
   IntersectionObserver. So the hero stayed invisible until 137 KB of main.js
   plus 272 KB of GSAP vendors had downloaded and executed — which is the
   black screen, not the page "loading slowly".

   The hero is ALWAYS in view at load. There is no reason to ask an
   IntersectionObserver whether the first thing on the page is visible.
   These rules animate it from CSS the moment the stylesheet lands, so the
   hero paints on first render regardless of what JavaScript is doing.

   `!important` on the animation shorthand means main.css's later `.in-view`
   rule cannot re-trigger and restart the animation, so there is no flash
   when main.js eventually arrives. Below-the-fold content is untouched and
   still uses the normal scroll-triggered path.

   The existing .delay-100 ... .delay-700 classes set `animation-delay`, so
   the original stagger is preserved automatically.
   ========================================================================== */

@keyframes synkynHeroRise {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes synkynHeroWipe {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

#hero .reveal-text,
#hero [data-ns-animate] {
    opacity: 1;
    animation: synkynHeroRise .9s cubic-bezier(.2, .8, .2, 1) both !important;
}

#hero .reveal-wipe {
    clip-path: inset(0 0 0 0);
    animation: synkynHeroWipe 1.1s cubic-bezier(.22, 1, .36, 1) both !important;
}

/* The header is chrome, not content — it must never wait on an observer. */
.header-two,
.header-two [data-ns-animate] {
    opacity: 1 !important;
    animation: none !important;
    clip-path: none !important;
}

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

    #hero .reveal-text,
    #hero [data-ns-animate],
    #hero .reveal-wipe {
        animation: none !important;
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   HERO BACKGROUND VIDEO — POSTER-FIRST RENDERING
   --------------------------------------------------------------------------
   The visible "Vimeo is loading" delay is not the video downloading. It is
   the gap between first paint and the player's first decoded frame, during
   which the hero is empty black. A still frame under the iframe removes
   that gap entirely: the hero looks correct from the first paint and the
   video crossfades in when it is genuinely ready.

   The gradient sits under the poster so that even a missing or slow poster
   never shows black.
   ========================================================================== */
.hero-video-bg {
    background:
        radial-gradient(120% 90% at 50% 0%, #14140c 0%, #080808 60%),
        #080808;
}

.hero-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    opacity: 1;
    transition: opacity .6s ease;
    pointer-events: none;
}

/* Iframe starts transparent and fades in over the poster — no hard cut, no
   flash, and nothing visible if the player never arrives. */
.hero-video-bg .hero-bg-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    border: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity .7s ease;
    pointer-events: none;
}

.hero-video-bg.is-playing .hero-bg-iframe {
    opacity: 1;
}

/* Hold the poster underneath rather than removing it — it covers any
   momentary gap if the player stalls or re-buffers. */
.hero-video-bg.is-playing .hero-video-poster {
    opacity: 0;
    transition: opacity .7s ease .25s;
}

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

    /* Still frame only. No autoplaying background motion. */
    .hero-video-bg .hero-bg-iframe {
        display: none !important;
    }

    .hero-video-bg .hero-video-poster {
        opacity: 1 !important;
    }
}

/* ==========================================================================
   SECTION 2 — "AI Generated. Human Directed."
   --------------------------------------------------------------------------
   WHY IT STUTTERED

   The heading carried Tailwind's `transition-all duration-1000`, and
   `transition-all` includes background-position. GSAP scrubs
   background-position on that same element every single frame, so CSS was
   trying to interpolate each new value over a full second while GSAP
   overwrote it on the next frame. Two engines fighting for one property.

   That is also why it got worse the faster you scrolled: bigger per-frame
   deltas mean the CSS transition is further behind each time, so the
   gradient visibly drags.

   THE FIX

   GSAP owns background-position exclusively. CSS only transitions the
   properties it actually owns — transform for the hover lift, and nothing
   else. Both are compositor properties, so the hover and the scrub can run
   at once without either touching layout or paint.
   ========================================================================== */
.space-earth-title {
    display: inline-block;
    text-align: center;
    transform-origin: center center;
    transition: none !important;
    will-change: background-position, transform, opacity;
    transform: translate3d(0, 0, 0) scale(1);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0 20px rgba(242, 194, 0, 0.45);
    filter: none !important;
}

.space-earth-glow {
    display: none !important;
}

/* Keep the container off the main thread during the scrub. */
.space-earth-container {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

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

    .space-earth-title,
    .space-earth-glow {
        transition: none !important;
        will-change: auto !important;
    }
}

/* ==========================================================================
   BACK-TO-TOP — make it independent of Lenis
   The button is positioned by .back-to-top-btn above; these only guarantee
   it sits above every other fixed layer and is never caught by a stale
   loader rule.
   ========================================================================== */
.back-to-top-btn {
    z-index: 99998;
}

html.show-loader .back-to-top-btn {
    opacity: 0 !important;
    visibility: hidden !important;
}