/* ===========================================================================
   CONTACT PAGE — "Open Channel" (prefix: cx-)
   Standalone design for /contact/. Nothing here reuses the site's existing
   component styles (no glass panels, no lens hero, no parallax rail, no
   directory list). Palette + type stay on theme:
       navy #0A0B2E · violet #7B2FF7 · magenta #B51BB5 · blue #0058FF
       cyan #43D2E0 · gold #F0A400 · Afacad (inherited from style.css)
   Loaded only by templates/contact.html.
   =========================================================================== */

.cx-hero,
.cx-channels,
.cx-brief,
.cx-flow,
.cx-place,
.cx-cta {
    --cx-bg: #0a0b2e;
    --cx-deep: #07081f;
    --cx-ink: #ffffff;
    --cx-mute: rgba(255, 255, 255, .74);
    --cx-faint: rgba(255, 255, 255, .46);
    --cx-line: rgba(255, 255, 255, .13);
    --cx-line-strong: rgba(255, 255, 255, .28);
    --cx-violet: #7b2ff7;
    --cx-magenta: #b51bb5;
    --cx-blue: #0058ff;
    --cx-cyan: #43d2e0;
    --cx-gold: #f0a400;
    --cx-grad: linear-gradient(90deg, #b900ff 0%, #0058ff 100%);
    --cx-grad-soft: linear-gradient(90deg, rgba(185, 0, 255, .85), rgba(0, 88, 255, .85));
    --cx-wrap: min(88%, 1280px);
    --cx-radius: 18px;
    --cx-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- shared shell ---------- */
.cx-wrap {
    width: var(--cx-wrap);
    margin-inline: auto;
}

.cx-eyebrow {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: .82rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--cx-cyan);
    margin-bottom: 1.1rem;
}

.cx-eyebrow__tick {
    width: 26px;
    height: 2px;
    background: var(--cx-grad);
    border-radius: 2px;
}

.cx-eyebrow__sep {
    color: var(--cx-faint);
}

.cx-h2 {
    font-size: clamp(2.15rem, 4.6vw, 3.55rem);
    line-height: 1.06;
    font-weight: 600;
    letter-spacing: -.015em;
    margin-bottom: 1.15rem;
    color: var(--cx-ink);
}

.cx-h2 em,
.cx-cta__mid h2 em {
    font-style: normal;
    background: var(--cx-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cx-lede {
    max-width: 56ch;
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--cx-mute);
}

.cx-head {
    margin-bottom: clamp(2.4rem, 5vw, 3.8rem);
}

.cx-head--center {
    text-align: center;
}

.cx-head--center .cx-eyebrow {
    justify-content: center;
}

.cx-head--center .cx-lede {
    margin-inline: auto;
}

/* reveal-on-scroll (JS adds .is-in). Hidden state only when JS is running,
   so the page stays fully readable without JavaScript. */
.cx-rise {
    opacity: 1;
    transform: none;
}

html.js .cx-rise {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .85s var(--cx-ease), transform .85s var(--cx-ease);
}

html.js .cx-rise.is-in {
    opacity: 1;
    transform: none;
}

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

    .cx-rise,
    .cx-line>span {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- buttons ---------- */
.cx-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .95rem 1.75rem;
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .015em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform .35s var(--cx-ease), box-shadow .35s var(--cx-ease),
        background-color .35s var(--cx-ease), color .35s var(--cx-ease),
        border-color .35s var(--cx-ease);
}

.cx-btn svg {
    width: 19px;
    height: 19px;
    flex: none;
    transition: transform .35s var(--cx-ease);
}

.cx-btn:hover svg {
    transform: translateX(4px);
}

.cx-btn--solid {
    color: #fff;
    background: var(--cx-grad-soft);
    background-size: 160% 100%;
    background-position: 0% 0;
    box-shadow: 0 14px 38px rgba(90, 20, 200, .38);
}

.cx-btn--solid:hover {
    background-position: 100% 0;
    transform: translateY(-3px);
    box-shadow: 0 20px 48px rgba(60, 40, 255, .45);
}

.cx-btn--ghost {
    color: #fff;
    border-color: var(--cx-line-strong);
    background: rgba(255, 255, 255, .04);
}

.cx-btn--ghost:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .1);
}

.cx-btn--lg {
    padding: 1.15rem 2.2rem;
    font-size: 1.12rem;
}

.cx-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--cx-cyan);
    font-weight: 600;
    letter-spacing: .02em;
}

.cx-link svg {
    width: 18px;
    height: 18px;
    transition: transform .35s var(--cx-ease);
}

.cx-link:hover svg {
    transform: translateX(5px);
}

/* ===========================================================================
   1 · SIGNAL HERO
   =========================================================================== */
.cx-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: calc(var(--hdr-full, 120px) + 2rem) 0 7.5rem;
    background:
        radial-gradient(1100px 620px at 82% 18%, rgba(123, 47, 247, .32), transparent 62%),
        radial-gradient(900px 560px at 12% 82%, rgba(0, 88, 255, .26), transparent 60%),
        radial-gradient(700px 420px at 62% 92%, rgba(181, 27, 181, .2), transparent 62%),
        linear-gradient(165deg, #0a0b2e 0%, #12103a 52%, #0a0b2e 100%);
}

.cx-hero__cv {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.cx-hero__glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(58% 48% at 50% 42%, transparent 42%, rgba(6, 7, 26, .58) 100%);
}

.cx-hero__in {
    position: relative;
    z-index: 2;
}

.cx-hero__title {
    font-size: clamp(2.7rem, 7.2vw, 5.9rem);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -.022em;
    margin: .4rem 0 1.6rem;
}

.cx-line {
    display: block;
    overflow: hidden;
    padding-bottom: .06em;
}

.cx-line>span {
    display: block;
}

html.js .cx-line>span {
    transform: translateY(112%);
    opacity: 0;
}

.cx-hero.is-live .cx-line>span {
    animation: cxLineUp .95s var(--cx-ease) forwards;
}

.cx-hero.is-live .cx-line:nth-child(2)>span {
    animation-delay: .12s;
}

.cx-hero.is-live .cx-line:nth-child(3)>span {
    animation-delay: .24s;
}

@keyframes cxLineUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cx-line--grad>span {
    background: linear-gradient(92deg, #d26bff 0%, #7b9bff 48%, #43d2e0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cx-hero__sub {
    max-width: 55ch;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.72;
    color: var(--cx-mute);
}

.cx-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.15rem;
}

.cx-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.75rem;
    margin-top: 2.25rem;
    font-size: .92rem;
    letter-spacing: .06em;
    color: var(--cx-faint);
    text-transform: uppercase;
}

.cx-hero__chips li {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.cx-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cx-cyan);
    box-shadow: 0 0 0 0 rgba(67, 210, 224, .55);
    animation: cxDot 2.2s ease-out infinite;
}

@keyframes cxDot {
    0% {
        box-shadow: 0 0 0 0 rgba(67, 210, 224, .55);
    }

    70% {
        box-shadow: 0 0 0 11px rgba(67, 210, 224, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(67, 210, 224, 0);
    }
}

/* micro-stats ribbon at the fold */
.cx-ribbon {
    position: relative;
    z-index: 2;
    margin-top: clamp(3rem, 6vh, 4.6rem);
    border-top: 1px solid var(--cx-line);
    border-bottom: 1px solid var(--cx-line);
    background: rgba(10, 11, 46, .38);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.cx-ribbon::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cx-grad-soft);
    opacity: .65;
}

.cx-ribbon__in {
    width: var(--cx-wrap);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem 0;
    flex-wrap: wrap;
}

.cx-ribbon__item {
    display: flex;
    align-items: baseline;
    gap: .65rem;
}

.cx-ribbon__item strong {
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    font-weight: 600;
    letter-spacing: -.01em;
}

.cx-ribbon__item span {
    font-size: .88rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cx-faint);
}

.cx-ribbon__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cx-grad-soft);
}

/* scroll cue — floats above the stats ribbon (its height is measured into
   --cx-ribbon-h by contact-redesign.js) */
.cx-scrollcue {
    position: absolute;
    z-index: 3;
    right: clamp(1.2rem, 5vw, 3.6rem);
    bottom: calc(7.5rem + var(--cx-ribbon-h, 118px) + 1.4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    color: var(--cx-faint);
    font-size: .74rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.cx-scrollcue svg {
    width: 20px;
    height: 20px;
    animation: cxBob 1.9s ease-in-out infinite;
}

@keyframes cxBob {

    0%,
    100% {
        transform: translateY(0);
    }

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

/* ===========================================================================
   2 · CHANNEL SLATS  (expanding vertical slices)
   =========================================================================== */
.cx-channels {
    position: relative;
    padding: clamp(4.2rem, 9vw, 7rem) 0 0;
    background:
        radial-gradient(900px 420px at 88% 0%, rgba(123, 47, 247, .16), transparent 60%),
        linear-gradient(180deg, #0a0b2e 0%, #0c0b33 100%);
}

.cx-slat {
    display: flex;
    gap: 10px;
    width: var(--cx-wrap);
    margin: 0 auto;
    padding-bottom: clamp(4.2rem, 9vw, 7rem);
}

.cx-slat__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--cx-line);
    border-radius: var(--cx-radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .018) 100%);
    cursor: pointer;
    outline: none;
    transition: flex-grow .65s var(--cx-ease), border-color .45s var(--cx-ease),
        background-color .45s var(--cx-ease), box-shadow .45s var(--cx-ease);
}

.cx-slat__item::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--cx-grad-soft);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .6s var(--cx-ease);
}

.cx-slat__item.is-open,
.cx-slat__item:hover {
    flex-grow: 3.1;
    border-color: var(--cx-line-strong);
    box-shadow: 0 26px 60px rgba(5, 6, 30, .55);
}

.cx-slat__item.is-open::after,
.cx-slat__item:hover::after {
    transform: scaleX(1);
}

.cx-slat__item:focus-visible {
    border-color: var(--cx-cyan);
}

.cx-slat__bar {
    flex: 0 0 clamp(120px, 15%, 190px);
    padding: 1.5rem 1.15rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.3rem;
    min-height: 208px;
}

.cx-slat__no {
    font-size: .82rem;
    letter-spacing: .3em;
    color: var(--cx-cyan);
}

.cx-slat__title {
    font-size: clamp(1.35rem, 1.9vw, 1.8rem);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -.01em;
}

.cx-slat__hint {
    font-size: .74rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--cx-faint);
    transition: color .4s;
}

.cx-slat__item.is-open .cx-slat__hint,
.cx-slat__item:hover .cx-slat__hint {
    color: var(--cx-gold);
}

/* closed columns are literally zero-width (flex-grow 0 + no inline padding),
   so no text can ever render squeezed inside them */
.cx-slat__body {
    flex: 0 1 0;
    min-width: 0;
    overflow: hidden;
    padding: 1.55rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .95rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(18px);
    transition: opacity .45s var(--cx-ease), transform .55s var(--cx-ease), visibility 0s linear .55s;
}

.cx-slat__item.is-open .cx-slat__body,
.cx-slat__item:hover .cx-slat__body {
    flex: 1 1 0;
    padding: 1.55rem 1.75rem 1.55rem .5rem;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .5s var(--cx-ease) .12s, transform .55s var(--cx-ease) .12s, visibility 0s;
}

.cx-slat__body p {
    max-width: 34ch;
    line-height: 1.7;
    color: var(--cx-mute);
    font-size: 1.01rem;
}

.cx-slat__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.cx-slat__meta li {
    padding: .38rem .85rem;
    border: 1px solid var(--cx-line);
    border-radius: 999px;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cx-faint);
    white-space: nowrap;
}

/* --- Direct lines: exactly ONE screen tall (viewport minus the navbar), same
   convention as the site's other full-height sections. The heading takes its
   natural height and the four slats stretch to fill whatever is left — they
   never push the section past the bottom of the screen. Desktop only; phone /
   tablet layouts are untouched. Short windows fall back to a 560px floor so
   nothing is ever clipped. --- */
@media (min-width: 1024px) {
    .cx-channels {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--hdr-compact, 64px));
        height: calc(100svh - var(--hdr-compact, 64px));
        min-height: 560px;
        padding: clamp(1.5rem, 4.5vh, 3.6rem) 0 clamp(1.5rem, 4.5vh, 3.6rem);
        scroll-snap-align: start;
    }

    .cx-channels>.cx-wrap {
        flex: 0 0 auto;
    }

    .cx-channels .cx-head {
        margin-bottom: clamp(1rem, 3vh, 2.2rem);
    }

    .cx-channels .cx-eyebrow {
        margin-bottom: clamp(.5rem, 1.4vh, 1.1rem);
    }

    .cx-channels .cx-h2 {
        font-size: clamp(2rem, 4.6vh + .6rem, 3.3rem);
        margin-bottom: clamp(.5rem, 1.4vh, 1.15rem);
    }

    .cx-channels .cx-lede {
        font-size: clamp(.98rem, 1.6vh + .4rem, 1.08rem);
        line-height: 1.6;
    }

    /* slats take all the remaining height (basis 0 → content can't inflate it) */
    .cx-slat {
        flex: 1 1 0;
        min-height: 300px;
        padding-bottom: 0;
        align-items: stretch;
    }

    .cx-slat__item {
        min-height: 0;
        height: 100%;
    }

    .cx-slat__bar {
        min-height: 0;
        padding-top: clamp(1.1rem, 2.4vh, 1.5rem);
        padding-bottom: clamp(1.1rem, 2.4vh, 1.5rem);
    }

    .cx-slat__body {
        overflow-y: auto;
        scrollbar-width: none;
    }

    .cx-slat__body::-webkit-scrollbar {
        display: none;
    }
}

/* ===========================================================================
   3 · PROJECT BRIEF  (form)
   =========================================================================== */
.cx-brief {
    position: relative;
    padding: clamp(4.2rem, 9vw, 7.4rem) 0;
    background:
        radial-gradient(1000px 520px at 8% 12%, rgba(0, 88, 255, .17), transparent 58%),
        radial-gradient(820px 460px at 94% 88%, rgba(181, 27, 181, .17), transparent 60%),
        linear-gradient(180deg, #0c0b33 0%, #0a0b2e 100%);
}

.cx-brief__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.2rem, 5vw, 4.6rem);
    align-items: start;
}

.cx-brief__aside {
    position: sticky;
    top: calc(var(--hdr-compact, 92px) + 1.6rem);
}

.cx-promises {
    display: grid;
    gap: 1.05rem;
    margin: 2.1rem 0;
}

.cx-promises li {
    display: flex;
    gap: .95rem;
    align-items: flex-start;
}

.cx-promises__ico {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--cx-line);
    background: rgba(255, 255, 255, .05);
    color: var(--cx-cyan);
}

.cx-promises__ico svg {
    width: 20px;
    height: 20px;
}

.cx-promises strong {
    display: block;
    font-size: 1.03rem;
    font-weight: 600;
}

.cx-promises small {
    display: block;
    margin-top: .2rem;
    color: var(--cx-faint);
    font-size: .92rem;
    line-height: 1.55;
}

.cx-aside-card {
    border: 1px solid var(--cx-line);
    border-radius: var(--cx-radius);
    padding: 1.35rem 1.45rem;
    background: rgba(255, 255, 255, .045);
    display: grid;
    gap: .75rem;
}

.cx-aside-card__label {
    font-size: .78rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--cx-faint);
}

.cx-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .78rem 1.05rem;
    border: 1px solid var(--cx-line);
    border-radius: 12px;
    background: rgba(10, 11, 46, .5);
    color: var(--cx-ink);
    font: inherit;
    font-size: 1.02rem;
    cursor: pointer;
    transition: border-color .35s var(--cx-ease), background-color .35s var(--cx-ease);
}

.cx-copy:hover {
    border-color: var(--cx-cyan);
    background: rgba(67, 210, 224, .08);
}

.cx-copy__val {
    font-weight: 600;
    letter-spacing: .015em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cx-copy__act {
    flex: none;
    font-size: .74rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--cx-cyan);
}

.cx-copy.is-copied .cx-copy__act {
    color: var(--cx-gold);
}

/* --- form panel: crisp technical card (corner ticks), not glass.
   On desktop it is sized to the left column by contact-redesign.js and the
   form scrolls INSIDE it (see .cx-panel scrollbar rules). --- */
.cx-panel {
    position: relative;
    border: 1px solid var(--cx-line-strong);
    border-radius: 22px;
    padding: clamp(1.45rem, 3vw, 2.45rem);
    background:
        radial-gradient(720px 320px at 88% 0%, rgba(123, 47, 247, .16), transparent 60%),
        linear-gradient(180deg, rgba(19, 18, 58, .92) 0%, rgba(11, 11, 42, .92) 100%);
    box-shadow: 0 36px 90px rgba(4, 5, 24, .55);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(123, 47, 247, .6) transparent;
}

.cx-panel::-webkit-scrollbar {
    width: 8px;
}

.cx-panel::-webkit-scrollbar-track {
    background: transparent;
}

.cx-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(185, 0, 255, .55), rgba(0, 88, 255, .55));
    border-radius: 8px;
}

/* corner ticks sit inside the scroll container so they never get clipped */
.cx-panel__corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid var(--cx-cyan);
    opacity: .8;
}

.cx-panel__corner--tl {
    top: 6px;
    left: 6px;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: 8px;
}

.cx-panel__corner--tr {
    top: 6px;
    right: 6px;
    border-left: 0;
    border-bottom: 0;
    border-top-right-radius: 8px;
}

.cx-panel__corner--bl {
    bottom: 6px;
    left: 6px;
    border-right: 0;
    border-top: 0;
    border-bottom-left-radius: 8px;
}

.cx-panel__corner--br {
    bottom: 6px;
    right: 6px;
    border-left: 0;
    border-top: 0;
    border-bottom-right-radius: 8px;
}

.cx-form__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.15rem;
    margin-bottom: 1.55rem;
    border-bottom: 1px solid var(--cx-line);
}

.cx-form__no {
    font-size: .82rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--cx-cyan);
}

.cx-form__note {
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cx-faint);
}

.cx-form__note i {
    color: var(--cx-gold);
    font-style: normal;
}

/* honeypot */
.cx-hp {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0;
    height: 0;
    width: 0;
}

.cx-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.05rem 1.45rem;
}

.cx-field {
    position: relative;
    padding-top: .55rem;
}

.cx-field input,
.cx-field textarea,
.cx-field select {
    width: 100%;
    padding: .95rem 0 .75rem;
    font: inherit;
    font-size: 1.02rem;
    color: var(--cx-ink);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--cx-line-strong);
    border-radius: 0;
    outline: none;
    transition: border-color .35s var(--cx-ease);
}

.cx-field textarea {
    resize: vertical;
    min-height: 130px;
}

.cx-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .2rem center;
    background-size: 18px;
    padding-right: 1.8rem;
}

.cx-field select option {
    background: #12103a;
    color: #fff;
}

.cx-field label {
    position: absolute;
    top: 1.35rem;
    left: 0;
    font-size: 1.02rem;
    color: var(--cx-faint);
    pointer-events: none;
    transition: all .32s var(--cx-ease);
}

.cx-field input:focus,
.cx-field textarea:focus,
.cx-field select:focus {
    border-bottom-color: transparent;
}

.cx-field input:focus~label,
.cx-field input:not(:placeholder-shown)~label,
.cx-field textarea:focus~label,
.cx-field textarea:not(:placeholder-shown)~label,
.cx-field--select label {
    top: -0.15rem;
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cx-cyan);
}

.cx-field::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--cx-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--cx-ease);
}

.cx-field:focus-within::after {
    transform: scaleX(1);
}

.cx-field.is-bad input,
.cx-field.is-bad textarea {
    border-bottom-color: #ff5470;
}

.cx-field__hint {
    display: block;
    margin-top: .45rem;
    font-size: .82rem;
    letter-spacing: .03em;
    color: var(--cx-faint);
}

.cx-field__err {
    display: block;
    min-height: 1.05rem;
    margin-top: .38rem;
    font-size: .82rem;
    letter-spacing: .04em;
    color: #ff8095;
}

.cx-field--area {
    margin-top: 1.55rem;
}

/* --- pill pickers --- */
.cx-pick {
    border: 0;
    margin: 1.85rem 0 0;
    padding: 0;
}

.cx-pick legend {
    padding: 0;
    margin-bottom: .95rem;
    font-size: .8rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--cx-faint);
}

.cx-pick__note {
    color: var(--cx-cyan);
    letter-spacing: .18em;
}

.cx-pick__row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.cx-pick__row input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.cx-pick__row label {
    padding: .58rem 1.15rem;
    border: 1px solid var(--cx-line-strong);
    border-radius: 999px;
    font-size: .94rem;
    color: var(--cx-mute);
    cursor: pointer;
    user-select: none;
    transition: all .32s var(--cx-ease);
}

.cx-pick__row label:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

.cx-pick__row input:checked+label {
    color: #fff;
    border-color: transparent;
    background: var(--cx-grad-soft);
    box-shadow: 0 10px 26px rgba(80, 20, 210, .38);
}

.cx-pick__row input:focus-visible+label {
    outline: 2px solid var(--cx-cyan);
    outline-offset: 2px;
}

.cx-pick--half {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.65rem;
}

.cx-pick__group {
    border: 0;
    margin: 1.85rem 0 0;
    padding: 0;
}

.cx-pick__group legend {
    padding: 0;
    margin-bottom: .95rem;
    font-size: .8rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--cx-faint);
}

/* --- newsletter switch --- */
.cx-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2.15rem;
    flex-wrap: wrap;
}

.cx-switch {
    display: flex;
    align-items: center;
    gap: .85rem;
    cursor: pointer;
    max-width: 46ch;
}

.cx-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.cx-switch__track {
    flex: none;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--cx-line-strong);
    background: rgba(255, 255, 255, .07);
    position: relative;
    transition: background-color .35s var(--cx-ease), border-color .35s var(--cx-ease);
}

.cx-switch__track i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform .35s var(--cx-ease);
}

.cx-switch input:checked+.cx-switch__track {
    background: var(--cx-grad-soft);
    border-color: transparent;
}

.cx-switch input:checked+.cx-switch__track i {
    transform: translateX(24px);
}

.cx-switch input:focus-visible+.cx-switch__track {
    outline: 2px solid var(--cx-cyan);
    outline-offset: 2px;
}

.cx-switch__text {
    font-size: .93rem;
    line-height: 1.55;
    color: var(--cx-mute);
}

.cx-btn--submit {
    border: 0;
    font-family: inherit;
}

.cx-btn--submit.is-busy {
    pointer-events: none;
    opacity: .72;
}

.cx-form__fine {
    margin-top: 1.35rem;
    font-size: .84rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .58);
    max-width: 62ch;
}

/* --- success state --- */
.cx-success {
    text-align: center;
    padding: clamp(2.2rem, 5vw, 4.2rem) 1rem;
}

.cx-success__ring {
    width: 92px;
    height: 92px;
    margin: 0 auto 1.65rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--cx-grad-soft);
    box-shadow: 0 0 0 0 rgba(123, 47, 247, .45);
    animation: cxPulse 2.1s ease-out infinite;
}

.cx-success__ring svg {
    width: 40px;
    height: 40px;
}

@keyframes cxPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(123, 47, 247, .45);
    }

    75% {
        box-shadow: 0 0 0 26px rgba(123, 47, 247, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(123, 47, 247, 0);
    }
}

.cx-success h3 {
    font-size: clamp(1.75rem, 3.2vw, 2.45rem);
    font-weight: 600;
    letter-spacing: -.015em;
    margin-bottom: .85rem;
}

.cx-success p {
    max-width: 44ch;
    margin: 0 auto 1.85rem;
    color: var(--cx-mute);
    line-height: 1.72;
}

/* ===========================================================================
   4 · WHAT HAPPENS NEXT  (scroll-driven rail)
   =========================================================================== */
.cx-flow {
    position: relative;
    padding: clamp(4.2rem, 9vw, 7.2rem) 0;
    background:
        radial-gradient(880px 420px at 82% 18%, rgba(67, 210, 224, .13), transparent 60%),
        linear-gradient(180deg, #0a0b2e 0%, #0c0b33 100%);
}

.cx-flow__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.6vw, 2.25rem);
    margin-top: clamp(2.6rem, 5vw, 3.8rem);
    list-style: none;
    padding: 0;
}

.cx-flow__rail {
    position: absolute;
    top: 26px;
    left: 3%;
    right: 3%;
    height: 2px;
    background: var(--cx-line);
    overflow: hidden;
}

.cx-flow__fill {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--cx-grad);
    transform: scaleX(var(--cx-flow, 0));
    transform-origin: left;
    transition: transform .25s linear;
}

.cx-flow__step {
    position: relative;
    padding-top: 4.15rem;
}

.cx-flow__no {
    position: absolute;
    top: 0;
    left: 0;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    border: 1px solid var(--cx-line-strong);
    background: #12103a;
    font-size: .92rem;
    letter-spacing: .18em;
    color: var(--cx-cyan);
    transition: all .5s var(--cx-ease);
}

.cx-flow__step.is-in .cx-flow__no {
    border-color: transparent;
    background: var(--cx-grad-soft);
    color: #fff;
    box-shadow: 0 14px 34px rgba(80, 20, 210, .4);
}

.cx-flow__step h3 {
    font-size: 1.32rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: .6rem;
}

.cx-flow__step p {
    color: var(--cx-mute);
    line-height: 1.68;
    font-size: .985rem;
}

.cx-flow__step small {
    display: inline-block;
    margin-top: .85rem;
    padding: .34rem .85rem;
    border: 1px solid var(--cx-line);
    border-radius: 999px;
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cx-gold);
}

/* ===========================================================================
   5 · STUDIO / RADAR
   =========================================================================== */
.cx-place {
    position: relative;
    padding: clamp(4.2rem, 9vw, 7.2rem) 0;
    background:
        radial-gradient(900px 520px at 14% 20%, rgba(0, 88, 255, .18), transparent 60%),
        linear-gradient(180deg, #0c0b33 0%, #0a0b2e 100%);
}

.cx-place__grid {
    display: grid;
    grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr);
    gap: clamp(2.2rem, 5vw, 4.5rem);
    align-items: center;
}

.cx-radar {
    position: relative;
    aspect-ratio: 1.16 / 1;
    border: 1px solid var(--cx-line);
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(520px 320px at 50% 56%, rgba(123, 47, 247, .28), transparent 66%),
        linear-gradient(160deg, #10103c 0%, #0a0b2e 78%);
    box-shadow: 0 36px 90px rgba(4, 5, 24, .5);
}

.cx-radar__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(78% 78% at 50% 52%, #000 58%, transparent 100%);
    -webkit-mask-image: radial-gradient(78% 78% at 50% 52%, #000 58%, transparent 100%);
}

/* soft "roads" crossing near the pin */
.cx-radar__grid::before,
.cx-radar__grid::after {
    content: "";
    position: absolute;
    background: rgba(67, 210, 224, .13);
    border-radius: 3px;
}

.cx-radar__grid::before {
    left: -6%;
    right: -6%;
    top: 50%;
    height: 8px;
    transform: rotate(-7deg);
}

.cx-radar__grid::after {
    top: -6%;
    bottom: -6%;
    left: 50%;
    width: 8px;
    transform: rotate(9deg);
}

.cx-radar__sweep {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 165%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, rgba(67, 210, 224, .3) 0deg, rgba(67, 210, 224, 0) 62deg, transparent 360deg);
    border-radius: 50%;
    animation: cxSweep 7s linear infinite;
}

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

.cx-radar__rings {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 72%;
    aspect-ratio: 1;
}

.cx-radar__rings i {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
}

.cx-radar__rings i:nth-child(2) {
    inset: 17%;
}

.cx-radar__rings i:nth-child(3) {
    inset: 34%;
}

.cx-radar__pin {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
}

.cx-radar__core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 18px rgba(255, 255, 255, .85);
}

.cx-radar__pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--cx-cyan);
    transform: translate(-50%, -50%);
    animation: cxRadar 2.6s ease-out infinite;
}

@keyframes cxRadar {
    0% {
        opacity: .9;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(5.2);
    }
}

.cx-radar__tag {
    position: absolute;
    padding: .42rem .85rem;
    border: 1px solid var(--cx-line-strong);
    border-radius: 8px;
    background: rgba(10, 11, 46, .78);
    font-size: .78rem;
    letter-spacing: .22em;
    color: var(--cx-mute);
    white-space: nowrap;
}

.cx-radar__tag--1 {
    top: 13%;
    left: 8%;
    color: var(--cx-cyan);
}

.cx-radar__tag--2 {
    bottom: 12%;
    right: 8%;
}

.cx-radar__tag--3 {
    top: 30%;
    right: 11%;
    color: var(--cx-gold);
}

.cx-address {
    font-style: normal;
    font-size: 1.16rem;
    line-height: 1.85;
    color: var(--cx-ink);
    margin: 1.65rem 0;
    padding-left: 1.15rem;
    border-left: 3px solid transparent;
    border-image: var(--cx-grad-soft) 1;
}

.cx-hours {
    display: grid;
    gap: .55rem;
    margin-bottom: 2.15rem;
}

.cx-hours div {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 420px;
    padding: .85rem 0;
    border-bottom: 1px dashed var(--cx-line);
}

.cx-hours dt {
    color: var(--cx-mute);
    letter-spacing: .04em;
}

.cx-hours dd {
    margin: 0;
    font-weight: 600;
    letter-spacing: .04em;
}

.cx-place__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ===========================================================================
   6 · KINETIC CTA
   =========================================================================== */
.cx-cta {
    position: relative;
    overflow: hidden;
    padding: clamp(3.6rem, 8vw, 6.2rem) 0 clamp(4.4rem, 9vw, 7.2rem);
    background:
        radial-gradient(760px 380px at 50% 12%, rgba(123, 47, 247, .3), transparent 62%),
        radial-gradient(760px 420px at 50% 100%, rgba(0, 88, 255, .26), transparent 62%),
        linear-gradient(180deg, #0a0b2e 0%, #0d0c38 100%);
    text-align: center;
}

.cx-marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: .45rem 0;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.cx-marquee__row {
    display: inline-flex;
    align-items: center;
    gap: 1.65rem;
    padding-right: 1.65rem;
    will-change: transform;
}

.cx-marquee--left .cx-marquee__row {
    animation: cxSlide 26s linear infinite;
}

.cx-marquee--right .cx-marquee__row {
    animation: cxSlide 30s linear infinite reverse;
}

@keyframes cxSlide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.cx-marquee span {
    font-size: clamp(2.15rem, 5.6vw, 4.4rem);
    font-weight: 600;
    letter-spacing: -.012em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .5);
}

.cx-marquee--right span {
    color: rgba(255, 255, 255, .92);
    -webkit-text-stroke: 0;
    background: var(--cx-grad);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: .92;
}

.cx-marquee i {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cx-gold);
}

.cx-cta__mid {
    margin-top: clamp(2.2rem, 5vw, 3.4rem);
    padding: 0 1.25rem;
}

.cx-cta__mid h2 {
    font-size: clamp(1.85rem, 3.8vw, 2.85rem);
    font-weight: 600;
    letter-spacing: -.018em;
}

.cx-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.85rem;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1180px) {
    .cx-slat__bar {
        flex-basis: 150px;
    }
}

@media (max-width: 1024px) {
    .cx-brief__grid {
        grid-template-columns: 1fr;
    }

    .cx-brief__aside {
        position: static;
    }

    /* stacked layout: the form keeps its natural height and the page scrolls */
    .cx-panel {
        height: auto !important;
    }

    .cx-place__grid {
        grid-template-columns: 1fr;
    }

    .cx-flow__track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.15rem 1.65rem;
    }

    .cx-flow__rail {
        display: none;
    }
}

@media (max-width: 860px) {
    .cx-slat {
        flex-direction: column;
    }

    .cx-slat__item {
        flex-direction: column;
    }

    .cx-slat__bar {
        flex: none;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        gap: 1.15rem;
        padding: 1.25rem 1.35rem;
    }

    .cx-slat__title br {
        display: none;
    }

    .cx-slat__title {
        font-size: 1.28rem;
    }

    .cx-slat__hint {
        margin-left: auto;
    }

    .cx-slat__body {
        flex: 1 1 auto;
        padding: 0 1.35rem;
        max-height: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: max-height .55s var(--cx-ease), padding .55s var(--cx-ease);
    }

    .cx-slat__item.is-open .cx-slat__body {
        max-height: 460px;
        padding: 0 1.35rem 1.55rem;
    }

    .cx-form__grid {
        grid-template-columns: 1fr;
    }

    .cx-pick--half {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cx-scrollcue {
        display: none;
    }
}

@media (max-width: 640px) {
    .cx-hero {
        padding-bottom: 5.5rem;
    }

    .cx-hero__title {
        font-size: clamp(2.35rem, 10.5vw, 3.25rem);
    }

    .cx-ribbon__in {
        justify-content: flex-start;
        gap: 1.15rem 1.75rem;
    }

    .cx-ribbon__dot {
        display: none;
    }

    .cx-ribbon__item strong {
        font-size: 1.45rem;
    }

    .cx-flow__track {
        grid-template-columns: 1fr;
    }

    .cx-form__foot {
        flex-direction: column;
        align-items: stretch;
    }

    .cx-btn--submit {
        justify-content: center;
    }

    .cx-marquee span {
        font-size: 2.15rem;
    }
}

/* ===========================================================================
   2026 CONTACT EXPERIENCE REFRESH
   Hero signal desk + alternating light / dark section rhythm.
   =========================================================================== */
.cx-hero__in {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
    gap: clamp(2.4rem, 5vw, 5.4rem);
    align-items: center;
}

.cx-hero__copy { min-width: 0; }

.cx-signaldesk {
    --cx-desk-x: 0px;
    --cx-desk-y: 0px;
    position: relative;
    min-height: clamp(440px, 48vw, 560px);
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(10, 11, 46, .46);
    box-shadow: 0 34px 90px rgba(3, 4, 24, .42), inset 0 1px 0 rgba(255,255,255,.06);
    overflow: hidden;
    isolation: isolate;
    transform: translate3d(var(--cx-desk-x), var(--cx-desk-y), 0);
    transition: transform .8s var(--cx-ease), border-color .4s ease;
}

.cx-signaldesk::before,
.cx-signaldesk::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.cx-signaldesk::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 50% 48%, #000 36%, transparent 86%);
    -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 36%, transparent 86%);
    opacity: .56;
}

.cx-signaldesk::after {
    width: 230px;
    height: 230px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123,47,247,.24), rgba(0,88,255,.08) 46%, transparent 72%);
    filter: blur(2px);
    animation: cxDeskGlow 4.8s ease-in-out infinite;
}

@keyframes cxDeskGlow {
    0%,100% { opacity: .62; transform: translate(-50%, -50%) scale(.92); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

.cx-signaldesk__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(68%, 360px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cx-signaldesk__halo i {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(123,47,247,.28);
    border-radius: 50%;
    animation: cxDeskRing 9s linear infinite;
}
.cx-signaldesk__halo i:nth-child(2) { inset: 16%; border-color: rgba(67,210,224,.22); animation-direction: reverse; animation-duration: 12s; }
.cx-signaldesk__halo i:nth-child(3) { inset: 32%; border-style: dashed; border-color: rgba(255,255,255,.2); animation-duration: 7s; }

@keyframes cxDeskRing { to { transform: rotate(360deg); } }

.cx-signaldesk__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.cx-signaldesk__links path {
    fill: none;
    stroke: rgba(123,47,247,.42);
    stroke-width: 1.5;
    stroke-dasharray: 6 12;
    animation: cxSignalFlow 3.5s linear infinite;
    filter: drop-shadow(0 0 6px rgba(67,210,224,.2));
}
.cx-signaldesk__links path:nth-child(2) { animation-delay: -.8s; }
.cx-signaldesk__links path:nth-child(3) { animation-delay: -1.6s; }
.cx-signaldesk__links path:nth-child(4) { animation-delay: -2.4s; }
@keyframes cxSignalFlow { to { stroke-dashoffset: -72; } }

.cx-signaldesk__core {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: clamp(164px, 16vw, 204px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    display: grid;
    place-content: center;
    text-align: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.22);
    background: #11103d;
    box-shadow: 0 0 0 12px rgba(123,47,247,.06), 0 22px 60px rgba(0,0,0,.34);
}
.cx-signaldesk__core strong { display:block; font-size: clamp(1.8rem, 3vw, 2.45rem); letter-spacing: .08em; }
.cx-signaldesk__core small { display:block; margin-top:.45rem; color: rgba(255,255,255,.62); line-height:1.42; }
.cx-signaldesk__live { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-bottom:.45rem; color:var(--cx-cyan); font-size:.68rem; letter-spacing:.2em; }
.cx-signaldesk__live i { width:7px; height:7px; border-radius:50%; background:var(--cx-cyan); box-shadow:0 0 14px rgba(67,210,224,.9); animation:cxDeskLive 1.8s ease-in-out infinite; }
@keyframes cxDeskLive { 50% { opacity:.35; transform:scale(.72); } }

.cx-signal {
    position: absolute;
    z-index: 4;
    width: clamp(124px, 12vw, 154px);
    min-height: 90px;
    padding: 1rem 1.05rem;
    display: grid;
    align-content: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    color: #fff;
    text-decoration: none;
    background: #171449;
    box-shadow: 0 18px 44px rgba(2,3,20,.28);
    transition: transform .45s var(--cx-ease), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.cx-signal:hover,
.cx-signal:focus-visible {
    transform: translateY(-6px) scale(1.025);
    border-color: rgba(67,210,224,.55);
    background: #21175f;
    box-shadow: 0 24px 58px rgba(12,7,50,.44), 0 0 0 1px rgba(67,210,224,.08);
}
.cx-signal span { font-size:.67rem; letter-spacing:.18em; color:var(--cx-cyan); }
.cx-signal strong { margin-top:.22rem; font-size:1.05rem; }
.cx-signal small { margin-top:.2rem; color:rgba(255,255,255,.54); font-size:.78rem; }
.cx-signal--brief { left: 5%; top: 7%; }
.cx-signal--mail { right: 5%; top: 7%; }
.cx-signal--call { left: 5%; bottom: 17%; }
.cx-signal--studio { right: 5%; bottom: 17%; }

.cx-signaldesk__status {
    position: absolute;
    z-index: 5;
    left: clamp(1rem, 4%, 1.5rem);
    right: clamp(1rem, 4%, 1.5rem);
    bottom: 1.15rem;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .72rem .9rem;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    background: rgba(7,8,31,.82);
    color: rgba(255,255,255,.72);
}
.cx-signaldesk__status span { flex:none; color:var(--cx-cyan); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }
.cx-signaldesk__status b { font-size:.84rem; font-weight:500; line-height:1.4; }

/* Alternating surface rhythm below the hero. */
.cx-channels {
    --cx-ink: #201346;
    --cx-mute: #5f5579;
    --cx-faint: #817691;
    --cx-line: #ddd6e9;
    --cx-line-strong: #c9bfda;
    color: var(--cx-ink);
    background: #f7f4fb;
}
.cx-channels .cx-slat__item {
    background: #fff;
    box-shadow: 0 16px 44px rgba(49,28,84,.07);
}
.cx-channels .cx-slat__item.is-open,
.cx-channels .cx-slat__item:hover { box-shadow: 0 24px 58px rgba(49,28,84,.13); }
.cx-channels .cx-slat__no,
.cx-channels .cx-link { color: #6f35da; }
.cx-channels .cx-slat__item.is-open .cx-slat__hint,
.cx-channels .cx-slat__item:hover .cx-slat__hint { color: #8b32c8; }

.cx-brief { color:#fff; background:#0b0b31; }

.cx-flow {
    --cx-ink: #201346;
    --cx-mute: #5d5478;
    --cx-faint: #80758f;
    --cx-line: #ded7e9;
    --cx-line-strong: #c8beda;
    color: var(--cx-ink);
    background: #f4f0fa;
}
.cx-flow .cx-flow__no { background:#fff; color:#6230c8; border-color:#d4cce1; box-shadow:0 10px 28px rgba(46,25,80,.07); }
.cx-flow .cx-flow__step.is-in .cx-flow__no { color:#fff; }
.cx-flow .cx-flow__step small { color:#6f35da; background:#fff; }

.cx-place { color:#fff; background:#0b0b31; }

.cx-cta {
    --cx-ink: #201346;
    --cx-mute: #62577c;
    --cx-faint: #857a94;
    --cx-line: #dcd4e8;
    --cx-line-strong: #c3b8d4;
    color: var(--cx-ink);
    background: #f7f4fb;
}
.cx-cta__mid h2 { color: var(--cx-ink); }
.cx-cta .cx-marquee span {
    -webkit-text-stroke: 1px rgba(32,19,70,.28);
}
.cx-cta .cx-marquee--right span {
    color: #6f35da;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-stroke: 0;
}
.cx-cta .cx-marquee i { background:#6f35da; }
.cx-cta .cx-btn--ghost {
    color:#201346;
    border-color:#bdb1cf;
    background:#fff;
}
.cx-cta .cx-btn--ghost:hover { background:#eee8f6; border-color:#927caf; }

@media (max-width: 1060px) {
    .cx-hero__in { grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap:2rem; }
    .cx-signaldesk { min-height: 470px; }
}

@media (max-width: 900px) {
    .cx-hero__in { grid-template-columns: 1fr; }
    .cx-signaldesk { width:min(100%, 620px); margin:1.4rem auto 0; min-height:500px; }
}

@media (max-width: 620px) {
    .cx-signaldesk { min-height: 440px; border-radius:24px; }
    .cx-signaldesk__core { width:142px; }
    .cx-signal { width:112px; min-height:78px; padding:.8rem; border-radius:15px; }
    .cx-signal strong { font-size:.95rem; }
    .cx-signal small { font-size:.7rem; }
    .cx-signal--brief,.cx-signal--mail { top:5%; }
    .cx-signal--call,.cx-signal--studio { bottom:19%; }
    .cx-signaldesk__status { bottom:.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cx-signaldesk,
    .cx-signaldesk::after,
    .cx-signaldesk__halo i,
    .cx-signaldesk__links path,
    .cx-signaldesk__live i { animation:none !important; transition:none !important; transform:none; }
    .cx-signaldesk__core { transform:translate(-50%, -50%); }
}

/* ==========================================================================
   Contact · channel section enrichment
   ========================================================================== */
.cx-channels {
    overflow: hidden;
}

.cx-channels::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(111, 53, 218, .05) 1px, transparent 1px),
        linear-gradient(rgba(111, 53, 218, .05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.5) 18%, rgba(0,0,0,.75) 70%, transparent);
    opacity: .55;
}

.cx-channels::after {
    content: "";
    position: absolute;
    inset: 8% auto auto 6%;
    width: clamp(280px, 36vw, 540px);
    height: clamp(280px, 36vw, 540px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 57, 219, .12) 0%, rgba(138, 57, 219, 0) 68%);
    filter: blur(8px);
    animation: cxFloatGlow 14s ease-in-out infinite;
    pointer-events: none;
}

.cx-channels__field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.cx-channels__glow,
.cx-channels__spark {
    position: absolute;
    display: block;
}

.cx-channels__glow {
    border-radius: 999px;
    filter: blur(18px);
    opacity: .55;
}

.cx-channels__glow--a {
    width: clamp(220px, 22vw, 340px);
    height: clamp(220px, 22vw, 340px);
    left: 2%;
    top: 30%;
    background: radial-gradient(circle, rgba(135, 71, 232, .18) 0%, rgba(135, 71, 232, 0) 72%);
    animation: cxFloatGlow 16s ease-in-out infinite;
}

.cx-channels__glow--b {
    width: clamp(260px, 26vw, 420px);
    height: clamp(180px, 18vw, 260px);
    right: -4%;
    top: 12%;
    background: radial-gradient(circle, rgba(58, 120, 255, .16) 0%, rgba(58, 120, 255, 0) 72%);
    animation: cxFloatGlow 12s ease-in-out infinite reverse;
}

.cx-channels__glow--c {
    width: 520px;
    height: 140px;
    left: 24%;
    bottom: 6%;
    background: linear-gradient(90deg, rgba(183, 70, 224, .08), rgba(66, 103, 255, .08));
    filter: blur(40px);
    animation: cxSlideGlow 18s linear infinite;
}

.cx-channels__spark {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9b39f7, #2b7fff);
    box-shadow: 0 0 0 6px rgba(111, 53, 218, .08), 0 0 24px rgba(82, 98, 255, .25);
}

.cx-channels__spark::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px solid rgba(117, 72, 225, .22);
    animation: cxPulseRing 2.8s ease-out infinite;
}

.cx-channels__spark--1 { left: 18%; top: 40%; animation: cxDriftSpark 10s linear infinite; }
.cx-channels__spark--2 { left: 58%; top: 22%; animation: cxDriftSpark 12s linear infinite reverse; }
.cx-channels__spark--3 { right: 12%; bottom: 18%; animation: cxDriftSpark 13s linear infinite; }

.cx-channelmeta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
    margin-top: clamp(1.25rem, 2vw, 1.7rem);
}

.cx-channelmeta__chip {
    padding: .95rem 1rem;
    border: 1px solid rgba(111, 53, 218, .14);
    border-radius: 18px;
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(52, 36, 95, .06);
}

.cx-channelmeta__chip strong {
    display: block;
    color: #281554;
    font-size: .96rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.cx-channelmeta__chip span {
    display: block;
    margin-top: .28rem;
    color: #675d81;
    font-size: .8rem;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cx-slat {
    position: relative;
    z-index: 2;
}

.cx-slat__item {
    isolation: isolate;
}

.cx-slat__item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0));
    opacity: .9;
    pointer-events: none;
}

.cx-slat__bar {
    justify-content: flex-start;
    gap: .95rem;
}

.cx-slat__hint {
    margin-top: auto;
}

.cx-slat__icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(169, 46, 201, .11), rgba(63, 111, 255, .11));
    border: 1px solid rgba(111, 53, 218, .14);
    color: #6c35da;
    font-size: 1.15rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.cx-slat__scene {
    position: relative;
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid rgba(111, 53, 218, .1);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(248,245,253,.98), rgba(242,238,250,.94));
    overflow: hidden;
    min-height: 132px;
}

.cx-slat__scene::before {
    content: "";
    position: absolute;
    inset: -30% 45% auto -10%;
    height: 100%;
    background: radial-gradient(circle, rgba(164, 74, 233, .18) 0%, rgba(164, 74, 233, 0) 72%);
    animation: cxFloatGlow 10s ease-in-out infinite;
}

.cx-mini-card {
    height: 42px;
    border-radius: 14px;
    border: 1px dashed rgba(111, 53, 218, .2);
    background: rgba(255,255,255,.65);
}

.cx-mini-card--ghost {
    position: relative;
}

.cx-mini-card--ghost::before,
.cx-mini-card--ghost::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    border-radius: 999px;
    background: rgba(111, 53, 218, .18);
}

.cx-mini-card--ghost::before { top: 11px; height: 8px; width: 38%; }
.cx-mini-card--ghost::after { top: 25px; height: 6px; width: 64%; background: rgba(43, 127, 255, .16); }

.cx-chipline {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.cx-chipline span {
    padding: .38rem .68rem;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(111, 53, 218, .12);
    color: #5f2ec7;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.cx-flowmini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
}

.cx-flowmini span,
.cx-mailstack i,
.cx-wave span {
    display: block;
}

.cx-flowmini span {
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(175, 70, 224, .45), rgba(56, 109, 255, .34));
    animation: cxBarPulse 2.5s ease-in-out infinite;
}

.cx-flowmini span:nth-child(2) { animation-delay: .18s; }
.cx-flowmini span:nth-child(3) { animation-delay: .36s; }

.cx-mailstack {
    position: relative;
    height: 56px;
}

.cx-mailstack i {
    position: absolute;
    inset: 0 auto auto 0;
    width: 76%;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(111, 53, 218, .13);
    background: rgba(255,255,255,.88);
    box-shadow: 0 10px 18px rgba(56, 39, 98, .06);
}

.cx-mailstack i::before,
.cx-mailstack i::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    border-radius: 999px;
    background: rgba(111, 53, 218, .15);
}

.cx-mailstack i::before { top: 11px; height: 8px; width: 42%; }
.cx-mailstack i::after { top: 24px; height: 6px; width: 62%; }

.cx-mailstack i:nth-child(1) { transform: translate(0, 12px) rotate(-5deg); }
.cx-mailstack i:nth-child(2) { transform: translate(20px, 5px) rotate(1.5deg); }
.cx-mailstack i:nth-child(3) { transform: translate(44px, 0) rotate(6deg); }

.cx-wave {
    display: flex;
    align-items: end;
    gap: .35rem;
    height: 58px;
}

.cx-wave span {
    flex: 1 1 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(175, 70, 224, .7), rgba(56, 109, 255, .5));
    animation: cxWave 1.6s ease-in-out infinite;
    min-height: 14px;
}

.cx-wave span:nth-child(1) { height: 26px; }
.cx-wave span:nth-child(2) { height: 40px; animation-delay: .08s; }
.cx-wave span:nth-child(3) { height: 18px; animation-delay: .16s; }
.cx-wave span:nth-child(4) { height: 52px; animation-delay: .24s; }
.cx-wave span:nth-child(5) { height: 28px; animation-delay: .32s; }
.cx-wave span:nth-child(6) { height: 44px; animation-delay: .4s; }
.cx-wave span:nth-child(7) { height: 22px; animation-delay: .48s; }
.cx-wave span:nth-child(8) { height: 34px; animation-delay: .56s; }

.cx-mapmini {
    position: relative;
    height: 60px;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(248,245,252,.95)),
        linear-gradient(90deg, rgba(111, 53, 218, .08) 1px, transparent 1px),
        linear-gradient(rgba(111, 53, 218, .08) 1px, transparent 1px);
    background-size: auto, 22px 22px, 22px 22px;
    border: 1px solid rgba(111, 53, 218, .13);
    overflow: hidden;
}

.cx-mapmini .route {
    position: absolute;
    left: 12px;
    right: 18px;
    top: 31px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(175, 70, 224, .85), rgba(56, 109, 255, .85));
}

.cx-mapmini .pin,
.cx-mapmini .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(111, 53, 218, .08);
}

.cx-mapmini .pin {
    left: 18px;
    top: 20px;
    background: #8a39f7;
    animation: cxPulseSpot 2.6s ease-in-out infinite;
}

.cx-mapmini .dot {
    right: 22px;
    top: 20px;
    background: #2b7fff;
}

.cx-slat__points {
    display: grid;
    gap: .55rem;
    margin: -.15rem 0 .1rem;
}

.cx-slat__points li {
    position: relative;
    padding-left: 1rem;
    color: var(--cx-ink);
    line-height: 1.55;
    font-size: .93rem;
}

.cx-slat__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b32c8, #3877ff);
}

@media (max-width: 1023px) {
    .cx-channelmeta {
        grid-template-columns: 1fr;
    }

    .cx-channels__glow--c {
        left: 8%;
        width: 360px;
    }
}

@media (max-width: 767px) {
    .cx-slat__scene {
        min-height: 120px;
        padding: .9rem;
    }

    .cx-slat__icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }
}

@keyframes cxFloatGlow {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(10px, -16px, 0) scale(1.04); }
}

@keyframes cxSlideGlow {
    0% { transform: translateX(-4%); }
    50% { transform: translateX(5%); }
    100% { transform: translateX(-4%); }
}

@keyframes cxPulseRing {
    0% { transform: scale(.9); opacity: .7; }
    80%, 100% { transform: scale(2.2); opacity: 0; }
}

@keyframes cxDriftSpark {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(16px, -8px, 0); }
    50% { transform: translate3d(0, -18px, 0); }
    75% { transform: translate3d(-14px, -8px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes cxBarPulse {
    0%, 100% { transform: scaleX(.92); opacity: .55; }
    50% { transform: scaleX(1); opacity: 1; }
}

@keyframes cxWave {
    0%, 100% { transform: scaleY(.7); opacity: .72; }
    50% { transform: scaleY(1.03); opacity: 1; }
}

@keyframes cxPulseSpot {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(111, 53, 218, .14); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(111, 53, 218, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .cx-channels::after,
    .cx-channels__glow,
    .cx-channels__spark,
    .cx-channels__spark::after,
    .cx-slat__scene::before,
    .cx-flowmini span,
    .cx-wave span,
    .cx-mapmini .pin {
        animation: none !important;
    }
}

/* ==========================================================================
   Contact · what happens next redesign
   ========================================================================== */
.cx-flow {
    --cx-ink: #201346;
    --cx-mute: #62597c;
    --cx-faint: #877c96;
    --cx-line: rgba(111, 53, 218, .12);
    --cx-line-strong: rgba(111, 53, 218, .18);
    position: relative;
    overflow: hidden;
    color: var(--cx-ink);
    background:
        radial-gradient(760px 340px at 9% 90%, rgba(173, 92, 233, .12), transparent 62%),
        radial-gradient(640px 320px at 88% 14%, rgba(68, 124, 255, .10), transparent 62%),
        #f4f0fa;
}

.cx-flow::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(111, 53, 218, .05) 1px, transparent 1px),
        linear-gradient(rgba(111, 53, 218, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 18%, rgba(0,0,0,.8) 80%, transparent);
    pointer-events: none;
    opacity: .38;
}

.cx-flow::after {
    content: "";
    position: absolute;
    right: -80px;
    top: 50px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(82, 111, 255, .13), rgba(82, 111, 255, 0) 72%);
    filter: blur(16px);
    pointer-events: none;
    animation: cxFloatGlow 14s ease-in-out infinite;
}

.cx-flow .cx-head {
    position: relative;
    z-index: 1;
}

.cx-flowlab {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    gap: clamp(1.4rem, 2.8vw, 2.2rem);
    align-items: stretch;
    margin-top: clamp(2.2rem, 4vw, 3.4rem);
}

.cx-flowlab__visual {
    display: flex;
}

.cx-flowlab__panel {
    position: relative;
    width: 100%;
    padding: clamp(1.4rem, 2.5vw, 1.9rem);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,247,254,.96));
    border: 1px solid rgba(111, 53, 218, .12);
    box-shadow: 0 22px 56px rgba(44, 28, 88, .08);
    overflow: hidden;
}

.cx-flowlab__panel::before {
    content: "";
    position: absolute;
    inset: -20% auto auto -10%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(175, 70, 224, .12), rgba(175, 70, 224, 0) 70%);
    animation: cxFloatGlow 12s ease-in-out infinite;
}

.cx-flowlab__panel::after {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -30px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(67, 120, 255, .11), rgba(67, 120, 255, 0) 72%);
    animation: cxFloatGlow 15s ease-in-out infinite reverse;
}

.cx-flowlab__eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .48rem .72rem;
    border-radius: 999px;
    border: 1px solid rgba(111, 53, 218, .16);
    background: rgba(255,255,255,.9);
    color: #6b33da;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.cx-flowlab__eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8a39f7, #397cff);
    box-shadow: 0 0 0 6px rgba(111, 53, 218, .08);
}

.cx-flowlab__panel h3 {
    position: relative;
    margin: 1rem 0 .8rem;
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.18;
    letter-spacing: -.03em;
}

.cx-flowlab__panel p {
    position: relative;
    color: var(--cx-mute);
    line-height: 1.7;
    max-width: 38ch;
}

.cx-flowlab__bar {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1.55rem;
    padding-top: 2.15rem;
}

.cx-flowlab__barbase,
.cx-flowlab__barfill {
    position: absolute;
    left: .8rem;
    right: .8rem;
    top: .76rem;
    height: 4px;
    border-radius: 999px;
}

.cx-flowlab__barbase {
    background: rgba(111, 53, 218, .12);
}

.cx-flowlab__barfill {
    background: linear-gradient(90deg, #a42eda, #4d72ff);
    transform: scaleX(var(--cx-flow, 0));
    transform-origin: left center;
    transition: transform .25s linear;
}

.cx-flowlab__bar span {
    position: relative;
    display: grid;
    justify-items: start;
    gap: .6rem;
    color: #413564;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
}

.cx-flowlab__bar span::before {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid rgba(111, 53, 218, .18);
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255,255,255,.9);
}

.cx-flowlab__stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1.4rem;
}

.cx-flowlab__stat {
    padding: .95rem .95rem .9rem;
    border-radius: 18px;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(111, 53, 218, .12);
    backdrop-filter: blur(12px);
}

.cx-flowlab__stat strong {
    display: block;
    font-size: 1.05rem;
    color: #24144d;
    letter-spacing: -.02em;
}

.cx-flowlab__stat span {
    display: block;
    margin-top: .28rem;
    font-size: .76rem;
    color: #72688d;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.4;
}

.cx-flow__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.25rem);
    margin-top: 0;
    list-style: none;
    padding: 0;
}

.cx-flow__rail {
    display: none;
}

.cx-flow__step {
    position: relative;
    padding: 1.28rem 1.22rem 1.16rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(248,245,253,.95));
    border: 1px solid rgba(111, 53, 218, .12);
    box-shadow: 0 16px 44px rgba(46, 25, 80, .06);
    min-height: 100%;
    transition: transform .45s var(--cx-ease), box-shadow .45s var(--cx-ease), border-color .45s var(--cx-ease);
    overflow: hidden;
}

.cx-flow__step::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(162, 49, 216, .95), rgba(61, 112, 255, .95));
    opacity: .9;
}

.cx-flow__step::after {
    content: "";
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(111, 53, 218, .1), rgba(111, 53, 218, 0) 70%);
    pointer-events: none;
}

.cx-flow__step:hover,
.cx-flow__step.is-in {
    transform: translateY(-4px);
    border-color: rgba(111, 53, 218, .22);
    box-shadow: 0 20px 54px rgba(58, 34, 105, .1);
}

.cx-flow__cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    margin-bottom: 1rem;
}

.cx-flow__no {
    position: static;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    border: 1px solid rgba(111, 53, 218, .16);
    background: #fff;
    color: #6b33da;
    font-size: .88rem;
    letter-spacing: .18em;
    box-shadow: 0 10px 28px rgba(46, 25, 80, .07);
}

.cx-flow__step.is-in .cx-flow__no,
.cx-flow__step:hover .cx-flow__no {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #a42eda, #4d72ff);
    box-shadow: 0 14px 34px rgba(80, 20, 210, .25);
}

.cx-flow__tag {
    display: inline-flex;
    align-items: center;
    padding: .48rem .72rem;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(111, 53, 218, .12);
    color: #6d35da;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.cx-flow__step h3 {
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: .6rem;
}

.cx-flow__step p {
    color: var(--cx-mute);
    line-height: 1.68;
    font-size: .96rem;
}

.cx-flow__list {
    display: grid;
    gap: .55rem;
    margin: .9rem 0 0;
}

.cx-flow__list li {
    position: relative;
    padding-left: 1rem;
    color: #3f355c;
    font-size: .9rem;
    line-height: 1.55;
}

.cx-flow__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .56rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8a39f7, #397cff);
}

.cx-flow__step small {
    display: inline-block;
    margin-top: 1rem;
    padding: .42rem .82rem;
    border: 1px solid rgba(111, 53, 218, .14);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6f35da;
    background: rgba(255,255,255,.95);
}

@media (max-width: 1080px) {
    .cx-flowlab {
        grid-template-columns: 1fr;
    }

    .cx-flowlab__panel p {
        max-width: none;
    }
}

@media (max-width: 860px) {
    .cx-flow__track {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .cx-flowlab__bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1rem;
    }

    .cx-flowlab__stats {
        grid-template-columns: 1fr;
    }

    .cx-flow__cardhead {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cx-flow::after,
    .cx-flowlab__panel::before,
    .cx-flowlab__panel::after {
        animation: none !important;
    }
}

/* ==========================================================================
   Contact · studio map refresh + truly seamless CTA marquees
   ========================================================================== */
.cx-studiomap {
    position: relative;
    min-height: 520px;
    aspect-ratio: 1.16 / 1;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(420px 280px at 26% 26%, rgba(46, 118, 255, .18), transparent 70%),
        radial-gradient(380px 260px at 74% 72%, rgba(142, 57, 247, .20), transparent 72%),
        #0b0b2f;
    box-shadow: 0 34px 88px rgba(4, 5, 24, .46);
    isolation: isolate;
}

.cx-studiomap::before,
.cx-studiomap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cx-studiomap::before {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: .85;
}

.cx-studiomap::after {
    z-index: 9;
    box-shadow: inset 0 0 80px rgba(0,0,0,.26);
    border-radius: inherit;
}

.cx-studiomap__mesh {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.06) 0 1px, transparent 1.5px) 0 0 / 28px 28px,
        radial-gradient(circle at 68% 72%, rgba(64, 211, 224, .05) 0 1px, transparent 1.5px) 0 0 / 34px 34px;
    opacity: .7;
}

.cx-studiomap__roads {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cx-studiomap__roadset path {
    fill: none;
    stroke: rgba(93, 154, 255, .22);
    stroke-width: 10;
    stroke-linecap: round;
}

.cx-studiomap__minor path {
    fill: none;
    stroke: rgba(255,255,255,.09);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 7 12;
}

.cx-studiomap__route {
    fill: none;
    stroke: url(#cxStudioRouteGrad);
    stroke: #5b7cff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 12 11;
    filter: drop-shadow(0 0 8px rgba(104, 102, 255, .6));
    animation: cxStudioRouteDash 7s linear infinite;
}

.cx-studiomap__traveller {
    fill: #43d2e0;
    filter: drop-shadow(0 0 8px rgba(67,210,224,.9));
}

.cx-studiomap__district {
    position: absolute;
    z-index: 4;
    padding: .4rem .7rem;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    background: rgba(7,8,31,.68);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,.55);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.cx-studiomap__district--a { left: 8%; bottom: 17%; }
.cx-studiomap__district--b { right: 15%; top: 15%; }
.cx-studiomap__district--c { right: 8%; bottom: 23%; }

.cx-studiomap__pin {
    position: absolute;
    z-index: 6;
    left: 53.5%;
    top: 54%;
    width: 26px;
    height: 26px;
    transform: translate(-50%, -50%);
}

.cx-studiomap__core {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 0 6px rgba(67,210,224,.12),
        0 0 30px rgba(67,210,224,.65);
}

.cx-studiomap__pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(67,210,224,.76);
    transform: translate(-50%, -50%);
    animation: cxStudioPulse 2.7s ease-out infinite;
}

.cx-studiomap__pinlabel {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    padding: .48rem .72rem;
    border: 1px solid rgba(67,210,224,.28);
    border-radius: 10px;
    background: rgba(8,9,35,.88);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.cx-studiomap__hud {
    position: absolute;
    z-index: 7;
    display: grid;
    gap: .24rem;
    padding: .72rem .85rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 13px;
    background: rgba(8,9,35,.78);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

.cx-studiomap__hud span,
.cx-studiomap__eta small {
    color: #43d2e0;
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.cx-studiomap__hud b,
.cx-studiomap__eta strong {
    color: rgba(255,255,255,.9);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.cx-studiomap__hud--top { left: 5%; top: 6%; }
.cx-studiomap__hud--bottom { right: 5%; bottom: 6%; }

.cx-studiomap__eta {
    position: absolute;
    z-index: 7;
    left: 5%;
    bottom: 6%;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .68rem .82rem;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;
    background: rgba(8,9,35,.78);
    backdrop-filter: blur(10px);
}

.cx-studiomap__eta div {
    display: grid;
    gap: .16rem;
}

.cx-studiomap__eta-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #43d2e0;
    box-shadow: 0 0 0 6px rgba(67,210,224,.1), 0 0 20px rgba(67,210,224,.7);
    animation: cxStudioEta 2.1s ease-in-out infinite;
}

.cx-studiomap__compass {
    position: absolute;
    z-index: 7;
    right: 5%;
    top: 6%;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(8,9,35,.72);
    color: rgba(255,255,255,.8);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.cx-studiomap__compass i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 15px;
    transform: translate(-50%, -35%) rotate(18deg);
    transform-origin: center bottom;
    background: linear-gradient(#43d2e0 0 50%, rgba(255,255,255,.25) 50% 100%);
    border-radius: 999px;
}

@keyframes cxStudioRouteDash {
    to { stroke-dashoffset: -46; }
}

@keyframes cxStudioPulse {
    0% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(6); }
}

@keyframes cxStudioEta {
    0%,100% { transform: scale(.88); opacity: .72; }
    50% { transform: scale(1.12); opacity: 1; }
}

/* Seamless marquees: two equal groups form one continuous track. */
.cx-marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: .45rem 0;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.cx-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.cx-marquee__group {
    display: flex;
    flex: none;
    align-items: center;
    gap: 1.65rem;
    padding-right: 1.65rem;
}

.cx-marquee--left .cx-marquee__track {
    animation: cxMarqueeSeamless 26s linear infinite;
}

.cx-marquee--right .cx-marquee__track {
    animation: cxMarqueeSeamless 30s linear infinite reverse;
}

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

@keyframes cxMarqueeSeamless {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(-50%,0,0); }
}

@media (max-width: 1080px) {
    .cx-studiomap {
        min-height: 460px;
    }
}

@media (max-width: 860px) {
    .cx-studiomap {
        min-height: 400px;
        aspect-ratio: 1.25 / 1;
    }

    .cx-studiomap__district--b,
    .cx-studiomap__district--c {
        display: none;
    }
}

@media (max-width: 560px) {
    .cx-studiomap {
        min-height: 330px;
        border-radius: 22px;
    }

    .cx-studiomap__hud--bottom,
    .cx-studiomap__eta {
        display: none;
    }

    .cx-studiomap__pinlabel {
        font-size: .62rem;
        padding: .4rem .58rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cx-studiomap__route,
    .cx-studiomap__pulse,
    .cx-studiomap__eta-dot,
    .cx-marquee__track {
        animation: none !important;
    }
}

/* Measured seamless marquee override: JS sets the exact width of one complete
   repeated phrase group, so there is no viewport-size-dependent dead zone. */
.cx-marquee__track {
    animation-name: cxMarqueeMeasured !important;
    animation-duration: var(--cx-marquee-duration, 26s) !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
}

.cx-marquee--left .cx-marquee__track {
    animation-direction: normal !important;
}

.cx-marquee--right .cx-marquee__track {
    animation-direction: reverse !important;
}

.cx-marquee__group {
    flex-shrink: 0;
    width: max-content;
}

@keyframes cxMarqueeMeasured {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(var(--cx-marquee-shift, -50%), 0, 0); }
}