@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    color-scheme: dark;
    --bg: transparent;
    --surface: rgba(255, 255, 255, .04);
    --line: rgba(255, 255, 255, .1);
    --text: #f4f5fa;
    --muted: #c4b8d8;
    --cyan: #2ac6f7;
    --violet: #c084fc;
    --font: 'DM Sans', Arial, sans-serif;
    --display: 'Space Grotesk', Arial, sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px
}

body {
    margin: 0;
    background:
        linear-gradient(125deg,
            #2a003e 0%,
            #4a007a 12%,
            #1a0545 28%,
            #050c30 44%,
            #060a28 58%,
            #1a0040 72%,
            #3a006a 84%,
            #0a0020 100%);
    background-size: 400% 400%;
    background-attachment: fixed;
    animation: wave-bg 14s ease infinite;
    color: var(--text);
    font: 16px/1.65 var(--font);
    -webkit-font-smoothing: antialiased
}

@keyframes wave-bg {
    0% {
        background-position: 0% 50%
    }

    25% {
        background-position: 100% 0%
    }

    50% {
        background-position: 100% 100%
    }

    75% {
        background-position: 0% 100%
    }

    100% {
        background-position: 0% 50%
    }
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
        background-position: 50% 50%
    }
}


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

button,
input,
textarea,
select {
    font: inherit
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent
}

button {
    cursor: pointer
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 5px
}

img {
    max-width: 100%;
    display: block
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.045em
}

h1 {
    font-size: clamp(3.1rem, 5.3vw, 5.6rem);
    margin-bottom: 25px
}

h2 {
    font-size: clamp(2.25rem, 3.4vw, 3.6rem);
    margin-bottom: 0
}

h3 {
    font-size: 1.5rem;
    letter-spacing: -.025em
}

p {
    color: var(--muted)
}

.wrap {
    width: min(1320px, calc(100% - 112px));
    margin-inline: auto
}

.gradient-text {
    background: linear-gradient(110deg, #59d4fb 0%, #79a8ff 45%, #b172f7 85%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.muted {
    color: #8a8c9b
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(10, 4, 25, .75);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

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

.nav-wrap {
    width: min(1440px, calc(100% - 80px));
    height: 100px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px
}

.logo {
    display: block;
    width: 170px;
    flex-shrink: 0
}

.logo img {
    width: 170px;
    height: auto
}

nav {
    display: flex;
    gap: 36px
}

nav a {
    font-size: 14px;
    color: #b4b5c0;
    transition: color .2s
}

nav a:hover,
nav a[aria-current] {
    color: #fff
}

nav a[aria-current]:after {
    content: '';
    display: block;
    height: 2px;
    background: var(--cyan);
    margin-top: 5px
}

/* ── Nav Dropdown ── */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-dropdown-trigger {
    background: transparent;
    border: none;
    color: #b4b5c0;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    transition: color 0.2s;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.is-current,
.nav-dropdown:hover .nav-dropdown-trigger {
    color: #fff;
}

.dropdown-chevron {
    transition: transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-chevron,
.nav-dropdown-trigger[aria-expanded="true"] .dropdown-chevron {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(12, 14, 30, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    width: 600px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 40;
}

/* Invisible bridge to keep menu open while moving mouse */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.nav-dropdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.nav-dropdown-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease;
    text-decoration: none !important;
}

.nav-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.nav-dropdown-icon {
    font-size: 20px;
    color: var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    flex-shrink: 0;
}

.nav-dropdown-item div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-dropdown-item strong {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.nav-dropdown-item span:not(.nav-dropdown-icon) {
    color: #a3a8bf;
    font-size: 13px;
    line-height: 1.4;
}

.nav-dropdown-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
    text-align: center;
}

.nav-dropdown-all {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.nav-dropdown-all:hover {
    color: var(--cyan);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 51px;
    padding: 13px 24px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    line-height: 1.4;
    color: #ffffff;
    background: linear-gradient(90deg, #dc35ff 0%, #4d60ff 100%);
    transition: transform .2s, filter .2s;
    text-decoration: none;
}

.button:hover {
    transform: translateY(-3px);
    filter: brightness(1.1);
}

.button span:last-child {
    margin-left: 7px;
    font-size: 21px;
    line-height: 1;
}

.nav-cta {
    min-height: 44px;
    font-size: 13px;
    padding: 10px 17px;
}

.nav-cta svg {
    color: var(--cyan)
}

.text-link {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    padding-block: 10px
}

.text-link:hover {
    color: var(--cyan)
}

.text-link span {
    font-size: 20px
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font);
    font-size: 12px;
    letter-spacing: .16em;
    font-weight: 600;
    color: #bdc0cd;
    margin-bottom: 28px;
    line-height: 1.6
}

.eyebrow>span {
    width: 6px;
    height: 6px;
    background: var(--cyan);
    box-shadow: 0 0 14px #29c6f764
}

.hero-slider {
    min-height: 700px;
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: 55px;
    align-items: center;
    padding-top: 65px;
    padding-bottom: 80px;
    position: relative
}

.hero-slider:before {
    content: '';
    position: absolute;
    pointer-events: none;
    right: -2%;
    top: 5%;
    width: 60%;
    height: 90%;
    z-index: -1;
    background: radial-gradient(ellipse, #31265e42, transparent 70%)
}

.hero-copy-container {
    position: relative;
    min-height: 480px;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-15px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
}

.hero-slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}


.hero-dots {
    display: flex;
    gap: 8px;
    margin-top: 30px;
}

.hero-dot {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    padding: 0;
    transition: background-color 0.3s;
}

.hero-dot.is-active {
    background: var(--cyan);
}

.hero-slider h1 {
    font-size: clamp(3.3rem, 5.1vw, 5.3rem);
    line-height: 1.08
}

.hero-description {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap
}

.hero-note {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 40px;
    color: #858999;
    font-size: 12px
}

.mini-globe {
    font-size: 20px;
    color: #a1a6b8
}

.hero-showcase {
    padding-top: 10px;
    transform: rotate(-2deg);
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.hero-slider[data-active-slide="1"] .hero-showcase {
    opacity: 1;
    pointer-events: auto;
}

.showcase-meta,
.showcase-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .13em;
    color: #838899;
    margin: 0 4px 15px
}

.showcase-main {
    display: block;
    padding: 9px;
    border: 1px solid #49435c;
    border-radius: 12px;
    background: linear-gradient(135deg, #262939, #151520);
    box-shadow: 0 30px 70px #0005;
    transition: transform .4s
}

.showcase-main:hover {
    transform: translateY(-5px)
}

.hero-art {
    height: 330px !important;
    border-radius: 6px !important;
    aspect-ratio: auto !important
}

.hero-art img {
    object-fit: contain !important;
    padding: 12px
}

.showcase-caption {
    padding: 18px 12px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.showcase-caption small {
    font-size: 10px;
    letter-spacing: .12em;
    color: #a3a8bf
}

.showcase-caption h2 {
    font-size: 22px;
    margin-top: 7px;
    letter-spacing: -.025em
}

.showcase-mini {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #171923;
    border: 1px solid #474052;
    box-shadow: 0 15px 50px #0007;
    border-radius: 8px;
    padding: 9px;
    width: 79%;
    margin: -3px 0 0 auto;
    transform: translate(20px, 12px) rotate(5deg)
}

.showcase-mini img {
    width: 95px;
    height: 72px;
    object-fit: cover;
    border-radius: 4px
}

.showcase-mini strong {
    display: block;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 500
}

.showcase-mini div span {
    font-size: 9px;
    letter-spacing: .14em;
    color: #9da2b5
}

.showcase-mini>span {
    margin-left: auto;
    margin-right: 10px;
    color: #c8b9ff
}

.showcase-bottom {
    margin-top: 36px;
    letter-spacing: .03em
}

.capability-strip {
    border-block: 1px solid var(--line);
    background: rgba(0, 0, 0, .25)
}

.capability-strip .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 24px;
    font-size: 12px;
    letter-spacing: .15em;
    color: #acafbd;
    gap: 20px
}

.capability-strip b {
    color: #64587e;
    font-size: 18px;
    font-weight: 400
}

/* ── Trusted / Marquee ─────────────────────────────────────── */
.trusted-section {
    padding-block: 56px 52px;
    background: rgba(0, 0, 0, .75);
    border-bottom: 1px solid var(--line);
    overflow: hidden
}

.trusted-heading-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: center;
    margin-bottom: 44px
}

.trusted-title {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b6e80;
    margin: 0;
    white-space: nowrap
}

.trusted-line {
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #2d3045)
}

.trusted-line:last-child {
    background: linear-gradient(270deg, transparent, #2d3045)
}

/* Marquee wrapper — clips overflow and adds edge fades */
.marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%)
}

/* The track holds 2× the logos; we animate it moving left by 50% */
@keyframes marquee-scroll {
    from {
        transform: translateX(0)
    }

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

.marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    animation: marquee-scroll 28s linear infinite
}

.marquee:hover .marquee-track {
    animation-play-state: paused
}

.marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 48px;
    border-right: 1px solid #1e2130;
    height: 80px;
    flex-shrink: 0
}

.marquee-item:last-child {
    border-right: none
}

.marquee-item img {
    width: auto;
    height: 46px;
    max-width: 150px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .45;
    transition: opacity .3s, filter .3s
}

.marquee-item:hover img {
    opacity: .9;
    filter: brightness(0) invert(1)
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none
    }
}


.section {
    padding-block: 105px
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 48px
}

.section-heading .eyebrow {
    margin-bottom: 17px
}

.section-heading p {
    margin-bottom: 6px;
    font-size: 15px
}

.section-heading .text-link {
    margin-top: 12px
}

.project-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px 30px
}

.project-card {
    min-width: 0
}

.project-art {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.55;
    border-radius: 8px;
    background: #e8edf0;
    isolation: isolate;
    display: grid;
    place-items: center
}

.project-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s;
    min-height: 0
}

.project-card:hover .project-art img {
    transform: scale(1.035)
}

.project-art.ice img {
    object-fit: contain;
    padding: 25px
}

.project-art.ice {
    background: #e9eff0
}

.project-art.sand {
    background: #ded4c5
}

.project-art.rose {
    background: #382d35
}

.project-art.emerald {
    background: linear-gradient(130deg, #0c332d, #1d6250)
}

.project-art.blue {
    background: linear-gradient(130deg, #0c254b, #235a7f)
}

.project-art.violet {
    background: linear-gradient(130deg, #242344, #55508a)
}

.art-label {
    position: absolute;
    bottom: 15px;
    left: 16px;
    padding: 6px 10px;
    border: 1px solid #fff4;
    border-radius: 4px;
    background: #0d142bbd;
    color: #fff;
    font-size: 9px;
    letter-spacing: .12em;
    backdrop-filter: blur(8px)
}

.project-wordmark {
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 4rem);
    padding: 35px;
    text-align: center;
    font-weight: 500;
    color: #fff;
    letter-spacing: -.04em
}

.ice .project-wordmark,
.sand .project-wordmark {
    color: #192432
}

.project-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 21px
}

.project-caption p {
    font-size: 12px;
    margin-bottom: 7px
}

.project-caption h3 {
    font-size: 23px;
    margin: 0
}

.services-section {
    background: rgba(0, 0, 0, .2);
    border-block: 1px solid rgba(255, 255, 255, .06)
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden
}

.service-card {
    padding: 28px 25px;
    display: flex;
    flex-direction: column;
    min-height: 290px;
    border-right: 1px solid var(--line);
    transition: background .3s
}

.service-card:last-child {
    border-right: 0
}

.service-card:hover {
    background: #161725
}

.service-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 42px;
    font-size: 12px;
    color: #6f778b
}

.service-icon {
    font-size: 28px;
    line-height: 1;
    color: #a495e7
}

.service-card h3 {
    font-size: 23px;
    margin-bottom: 14px
}

.service-card p {
    font-size: 14px;
    line-height: 1.7;
    max-width: 205px
}

.service-link {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #c9c8d3;
    padding-top: 20px
}

.quality-intro {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    column-gap: 90px;
    align-items: center
}

.quality-intro .eyebrow {
    grid-column: 1/-1;
    margin-bottom: 18px
}

.quality-intro>p {
    margin: 0;
    font-size: 16px
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 64px
}

.process-grid article {
    border-top: 1px solid #363241;
    padding-top: 25px
}

.step {
    font-size: 12px;
    color: #b09ae4
}

.process-grid h3 {
    font-size: 21px;
    margin: 27px 0 14px
}

.process-grid p {
    font-size: 14px;
    line-height: 1.8;
    margin: 0
}

.closing {
    padding: 70px 55px;
    margin-bottom: 90px;
    border: 1px solid #48415a;
    border-radius: 12px;
    background: radial-gradient(ellipse at 10% 100%, #24294c65, transparent 70%), linear-gradient(120deg, #14131f, #13101c);
    position: relative;
    overflow: hidden
}

.closing:after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 8px;
    color: #776789;
    font: 24px var(--display)
}

.closing>div {
    display: flex;
    justify-content: space-between;
    gap: 45px;
    align-items: center
}

.closing h2 {
    font-size: clamp(3rem, 4.7vw, 5rem);
    line-height: 1.08
}

.closing p {
    font-size: 15px;
    margin-bottom: 24px
}

.closing .text-link {
    display: flex;
    font-size: 12px;
    margin-top: 8px
}

.footer-top {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    gap: 40px;
    padding: 10px 0 60px
}

.footer-top p {
    font-size: 14px;
    margin-top: 20px
}

.footer-top>div>a:not(.logo) {
    display: block;
    margin-top: 13px;
    font-size: 14px;
    color: #a9aaba
}

.footer-top>div>a:hover {
    color: var(--cyan)
}

.footer-label {
    font-size: 11px;
    letter-spacing: .13em;
    color: #767b8e
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-block: 24px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    color: #767c8c
}

.page-intro {
    padding-block: 90px 65px
}

.page-intro h1 {
    max-width: 970px
}

.page-intro>p:not(.eyebrow) {
    font-size: 18px;
    max-width: 680px
}

.work-section {
    padding-bottom: 100px
}

.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding-bottom: 25px;
    margin-bottom: 40px;
    gap: 20px
}

.filter-bar>div {
    display: flex;
    gap: 8px
}

.filter-bar button {
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #a1a5b5;
    font-size: 14px;
    padding: 11px 16px
}

.filter-bar button span {
    margin-left: 10px;
    font-size: 11px;
    color: #83889d
}

.filter-bar button[aria-pressed=true] {
    background: #1a1b29;
    border-color: #383145;
    color: #fff
}

.filter-bar>span {
    font-size: 12px;
    color: #8b8f9f
}

.project-card[hidden] {
    display: none
}

.project-intro>.text-link {
    margin-bottom: 32px
}

.project-intro .button {
    margin-top: 15px
}

.project-detail>.project-art {
    aspect-ratio: 2;
    max-height: 600px
}

.project-detail .project-wordmark {
    font-size: clamp(2.8rem, 6vw, 6rem)
}

.project-facts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    border-bottom: 1px solid var(--line);
    padding-block: 37px
}

.project-facts span {
    font-size: 11px;
    letter-spacing: .12em;
    color: #8b8c9e
}

.project-facts h3 {
    font-size: 18px;
    letter-spacing: -.015em;
    margin-top: 12px
}

.detail-story {
    padding-block: 70px 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px
}

.detail-story p {
    font-size: 17px
}

.service-detail {
    display: grid;
    grid-template-columns: 60px 1.4fr 1fr;
    gap: 30px;
    padding-block: 65px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 100px
}

.detail-number {
    font-family: var(--display);
    font-size: 18px;
    color: #a08bd0
}

.service-detail h2 {
    font-size: 42px;
    margin-bottom: 20px
}

.service-detail p {
    max-width: 530px
}

.service-summary {
    color: #e0deeb;
    font-size: 19px
}

.service-detail ul {
    align-self: center;
    list-style: none;
    padding: 0 0 0 30px;
    font-size: 15px
}

.service-detail li {
    border-bottom: 1px solid var(--line);
    padding: 17px 0
}

.service-detail li:before {
    content: '+';
    color: var(--cyan);
    margin-right: 16px
}

.service-details {
    padding-bottom: 50px
}

.about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    padding-block: 40px 70px
}

.about-statement {
    font-family: var(--display);
    font-size: clamp(2.5rem, 4.3vw, 4.5rem);
    letter-spacing: -.05em;
    line-height: 1.15;
    border-left: 2px solid #7b71c1;
    padding-left: 35px
}

.about-story p {
    font-size: 17px
}

.about-story .button {
    margin-top: 20px
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 85px;
    padding-block: 85px 100px
}

.contact-copy h1 {
    font-size: clamp(2.8rem, 4vw, 4.2rem);
    line-height: 1.13
}

.contact-copy>p {
    font-size: 17px;
    max-width: 410px
}

.contact-direct {
    padding-top: 40px
}

.contact-direct h3 {
    font-size: 20px;
    margin-bottom: 20px
}

.contact-direct>.text-link {
    display: flex;
    margin-top: 18px
}

.booking-note {
    display: flex;
    gap: 15px;
    align-items: center;
    border-top: 1px solid var(--line);
    margin-top: 45px;
    padding-top: 25px
}

.booking-note>span {
    font-size: 30px;
    color: #a49bc5
}

.booking-note p {
    font-size: 13px;
    margin: 0
}

.consultation-form {
    padding: 35px;
    background: #10121b;
    border: 1px solid #2f3041;
    border-radius: 12px
}

.consultation-form h2 {
    font-size: 27px;
    margin-bottom: 10px
}

.consultation-form>p {
    font-size: 14px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px
}

label {
    font-size: 13px;
    font-weight: 500;
    color: #d7d8e1
}

label>span:not(.consent span) {
    color: #a498cf
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.form-grid label>span {
    display: none
}

.full {
    grid-column: 1/-1
}

input,
select,
textarea {
    width: 100%;
    min-width: 0;
    padding: 12px 13px;
    color: #eee;
    background: #0b0d14;
    border: 1px solid #343747;
    border-radius: 5px;
    font-size: 14px;
    outline-offset: 2px
}

textarea {
    resize: vertical;
    min-height: 100px
}

input::placeholder,
textarea::placeholder {
    color: #727789
}

input:hover,
select:hover,
textarea:hover {
    border-color: #55536b
}

label small {
    font-size: 11px;
    color: #969aab;
    font-weight: 400
}

.consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12px;
    margin: 24px 0
}

.consent input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: #8c90f6
}

.consent a {
    text-decoration: underline;
    text-underline-offset: 3px
}

.submit {
    width: 100%;
    border: 0
}

.submit:disabled {
    opacity: .65;
    cursor: wait
}

.form-footnote {
    font-size: 11px !important;
    text-align: center;
    margin: 15px 0 0
}

.honey {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

#form-status:empty {
    display: none
}

#form-status {
    padding: 15px;
    border: 1px solid #43615f;
    background: #162822;
    color: #bce3d5;
    border-radius: 6px;
    margin-bottom: 0;
    margin-top: 20px
}

#form-status.error {
    border-color: #82545d;
    background: #29191e;
    color: #f2bdc7
}

.narrow {
    max-width: 800px;
    padding-bottom: 100px
}

.narrow h2 {
    font-size: 26px;
    margin: 40px 0 15px
}

.narrow a {
    text-decoration: underline
}

.skip {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 100;
    background: var(--cyan);
    color: #000;
    padding: 10px
}

.skip:focus {
    top: 10px
}

.menu-toggle {
    display: none
}

::selection {
    background: #7761bf;
    color: #fff
}

@media(min-width:1600px) {
    .hero {
        min-height: 760px
    }

    .hero-art {
        height: 380px !important
    }
}

@media(max-width:1100px) {
    .wrap {
        width: calc(100% - 64px)
    }

    .nav-wrap {
        width: calc(100% - 48px)
    }

    nav {
        gap: 24px
    }

    .hero {
        gap: 32px;
        min-height: 650px
    }

    .hero h1 {
        font-size: 4rem
    }

    .hero-art {
        height: 280px !important
    }

    .hero-actions {
        gap: 15px
    }

    .hero-actions>.text-link {
        font-size: 13px
    }

    .showcase-mini {
        width: 90%;
        transform: translate(7px, 12px) rotate(4deg)
    }

    .service-card {
        padding: 25px 18px
    }

    .service-card h3 {
        font-size: 21px
    }

    .quality-intro {
        gap: 40px
    }

    .contact-layout {
        gap: 35px
    }

    .consultation-form {
        padding: 26px
    }

    .service-detail {
        grid-template-columns: 40px 1.3fr 1fr
    }
}

@media(max-width:800px) {
    .nav-wrap {
        height: 80px
    }

    .logo,
    .logo img {
        width: 145px
    }

    nav {
        gap: 20px
    }

    .nav-cta {
        display: none
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 55px;
        gap: 50px
    }

    .hero h1 {
        font-size: clamp(3rem, 8vw, 4.8rem)
    }

    .hero-description br:first-child {
        display: none
    }

    .hero-showcase {
        width: 90%;
        max-width: 530px;
        margin: 0 auto
    }

    .hero-art {
        height: 320px !important
    }

    .hero-note {
        margin-top: 25px
    }

    .capability-strip .wrap {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
        font-size: 10px;
        padding-block: 20px
    }

    .capability-strip b:last-child {
        display: none
    }

    .section {
        padding-block: 70px
    }

    .section-heading {
        align-items: flex-start
    }

    .section-heading p br {
        display: none
    }

    .section-heading>div:last-child:not(:first-child) {
        max-width: 230px
    }

    .project-grid {
        gap: 32px 20px
    }

    .service-grid {
        grid-template-columns: 1fr 1fr
    }

    .service-card:nth-child(2) {
        border-right: 0
    }

    .service-card:nth-child(-n+2) {
        border-bottom: 1px solid var(--line)
    }

    .service-card {
        padding: 25px;
        min-height: 260px
    }

    .service-top {
        margin-bottom: 27px
    }

    .process-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px
    }

    .quality-intro {
        grid-template-columns: 1fr
    }

    .quality-intro>p {
        margin-top: 25px
    }

    .closing {
        padding: 40px 30px;
        margin-bottom: 65px
    }

    .closing>div {
        align-items: flex-start;
        gap: 30px
    }

    .closing h2 {
        font-size: 3rem
    }

    .closing .button {
        font-size: 12px;
        padding: 12px 15px
    }

    .footer-top {
        grid-template-columns: 1.3fr 1fr 1.2fr;
        gap: 20px
    }

    .footer-top>div>a:not(.logo) {
        font-size: 12px
    }

    .footer-bottom {
        flex-wrap: wrap;
        font-size: 11px
    }

    .page-intro {
        padding-block: 60px 45px
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-block: 55px 75px
    }

    .contact-copy>p {
        max-width: 600px
    }

    .contact-direct {
        padding-top: 15px
    }

    .booking-note {
        margin-top: 25px
    }

    .consultation-form {
        padding: 30px
    }

    .service-detail {
        grid-template-columns: 35px 1fr;
        gap: 20px;
        padding-block: 40px
    }

    .service-detail ul {
        grid-column: 2;
        padding-left: 0;
        margin: 0
    }

    .service-detail h2 {
        font-size: 34px
    }

    .about-story {
        gap: 35px
    }

    .about-statement {
        padding-left: 22px
    }

    .detail-story {
        gap: 35px
    }

    .project-facts h3 {
        font-size: 16px
    }

    .project-caption h3 {
        font-size: 20px
    }
}

@media(max-width:560px) {
    .wrap {
        width: calc(100% - 40px)
    }

    .nav-wrap {
        width: calc(100% - 40px);
        height: 76px
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 6px;
        background: transparent;
        border: 1px solid #3b3c4c;
        border-radius: 5px;
        padding: 12px;
        width: 44px;
        height: 40px
    }

    .menu-toggle span {
        display: block;
        height: 1px;
        background: #eee;
        width: 18px
    }

    nav {
        display: none;
        position: absolute;
        top: 75px;
        left: 0;
        right: 0;
        padding: 20px;
        background: #10121c;
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        gap: 0
    }

    nav.is-open {
        display: flex
    }

    nav a {
        padding: 12px
    }

    nav a[aria-current]:after {
        display: none
    }

    .hero {
        padding-top: 38px;
        padding-bottom: 45px;
        gap: 40px
    }

    .eyebrow {
        font-size: 10px;
        margin-bottom: 20px
    }

    .hero h1 {
        font-size: clamp(2.7rem, 10vw, 3.55rem)
    }

    .hero-description {
        font-size: 15px
    }

    .hero-description br {
        display: none
    }

    .hero-actions {
        gap: 14px
    }

    .hero-actions .button {
        padding: 13px 16px;
        font-size: 12px
    }

    .hero-actions .text-link {
        font-size: 12px
    }

    .hero-note {
        font-size: 11px
    }

    .hero-showcase {
        width: 95%;
        padding-top: 0
    }

    .hero-art {
        height: 240px !important
    }

    .showcase-caption h2 {
        font-size: 20px
    }

    .showcase-mini {
        width: 85%
    }

    .showcase-mini img {
        width: 72px;
        height: 57px
    }

    .showcase-mini strong {
        font-size: 14px
    }

    .showcase-mini div span {
        font-size: 8px
    }

    .showcase-bottom {
        font-size: 8px
    }

    .capability-strip .wrap {
        gap: 9px 12px;
        font-size: 9px;
        letter-spacing: .07em
    }

    .capability-strip b {
        font-size: 12px
    }

    .section {
        padding-block: 55px
    }

    .section-heading {
        display: block;
        margin-bottom: 28px
    }

    .section-heading>div:last-child:not(:first-child) {
        max-width: none;
        margin-top: 24px
    }

    .section-heading>p {
        margin-top: 22px
    }

    .section-heading h2 {
        font-size: 2.4rem
    }

    .project-grid {
        grid-template-columns: 1fr;
        gap: 32px
    }

    .project-caption {
        padding-top: 15px
    }

    .project-caption p {
        font-size: 11px
    }

    .project-caption h3 {
        font-size: 21px
    }

    .service-grid {
        grid-template-columns: 1fr
    }

    .service-card {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        min-height: 230px;
        padding: 25px
    }

    .service-card:last-child {
        border-bottom: 0
    }

    .service-card p {
        max-width: none
    }

    .service-card h3 {
        font-size: 25px
    }

    .service-top {
        margin-bottom: 23px
    }

    .service-link {
        padding-top: 8px
    }

    .quality-intro h2 {
        font-size: 2.2rem
    }

    .quality-intro>p {
        font-size: 15px
    }

    .process-grid {
        margin-top: 40px;
        gap: 30px 22px
    }

    .process-grid h3 {
        font-size: 19px;
        margin-top: 20px
    }

    .process-grid p {
        font-size: 13px
    }

    .closing {
        padding: 32px 24px;
        margin-bottom: 50px
    }

    .closing>div {
        display: block
    }

    .closing h2 {
        font-size: 3rem;
        margin-bottom: 27px
    }

    .closing p {
        font-size: 14px
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding-bottom: 35px
    }

    .footer-top>div:first-child {
        grid-column: 1/-1
    }

    .footer-top p {
        margin-top: 15px
    }

    .footer-label {
        font-size: 10px
    }

    .footer-bottom {
        gap: 12px;
        padding-block: 20px
    }

    .footer-bottom>span:first-child {
        width: 100%
    }

    .page-intro h1 {
        font-size: 2.8rem
    }

    .page-intro>p:not(.eyebrow) {
        font-size: 16px
    }

    .filter-bar {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column
    }

    .filter-bar button {
        padding: 10px 12px;
        font-size: 12px
    }

    .filter-bar button span {
        margin-left: 6px
    }

    .filter-bar>div {
        gap: 3px
    }

    .project-detail>.project-art {
        aspect-ratio: 1.3
    }

    .project-facts {
        grid-template-columns: 1fr;
        gap: 15px;
        padding-block: 25px
    }

    .project-facts h3 {
        margin-bottom: 0
    }

    .detail-story {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-block: 45px 60px
    }

    .detail-story h2 {
        font-size: 2rem
    }

    .detail-story p {
        font-size: 15px
    }

    .service-detail {
        gap: 15px;
        grid-template-columns: 25px 1fr
    }

    .service-detail h2 {
        font-size: 29px
    }

    .service-detail p {
        font-size: 15px
    }

    .service-detail .text-link {
        font-size: 12px
    }

    .service-detail ul {
        font-size: 14px
    }

    .about-story {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-bottom: 25px
    }

    .about-story p {
        font-size: 16px
    }

    .contact-copy h1 {
        font-size: 2.8rem
    }

    .contact-copy h1 br {
        display: none
    }

    .contact-copy>p {
        font-size: 15px
    }

    .consultation-form {
        padding: 24px 20px
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .full {
        grid-column: auto
    }

    input,
    select,
    textarea {
        font-size: 16px
    }

    .consultation-form h2 {
        font-size: 24px
    }

    .narrow h2 {
        font-size: 23px
    }
}

.trusted-section {
    padding: 55px 0 48px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #0d0f18, var(--bg))
}

.trusted-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 30px
}

.trusted-heading h2 {
    font: 500 16px/1.5 var(--font);
    letter-spacing: .035em;
    color: #bfc3d2;
    text-align: center
}

.trusted-heading>span {
    height: 1px;
    width: 85px;
    background: linear-gradient(90deg, transparent, #505064)
}

.trusted-heading>span:last-child {
    transform: rotate(180deg)
}

.trusted-logos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px
}

.trusted-logo {
    flex: 0 0 calc((100% - 96px)/5);
    min-width: 0;
    height: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px
}

.trusted-logo img {
    width: 100%;
    max-width: 180px;
    height: 66px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .65;
    transition: opacity .2s, transform .2s
}

.trusted-logo:hover img {
    opacity: 1;
    transform: translateY(-3px)
}

.trusted-logo--detailed img {
    filter: grayscale(1) brightness(1.65);
    opacity: .85
}

@media(max-width:900px) {
    .trusted-logo {
        flex-basis: calc((100% - 48px)/3)
    }

    .trusted-logos {
        gap: 14px 24px
    }
}

@media(max-width:560px) {
    .trusted-section {
        padding: 35px 0 30px
    }

    .trusted-heading {
        gap: 12px;
        margin-bottom: 20px
    }

    .trusted-heading h2 {
        font-size: 14px
    }

    .trusted-heading>span {
        width: 25px
    }

    .trusted-logos {
        gap: 12px 10px
    }

    .trusted-logo {
        flex-basis: calc((100% - 20px)/3);
        height: 73px;
        padding: 9px 5px
    }

    .trusted-logo img {
        height: 50px
    }
}

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

    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important
    }
}

/* ── Portfolio Screenshot Cards & Overlays ── */
.project-sc {
    position: relative !important;
    overflow: hidden !important;
    background: #090a14 !important;
}

.project-sc .sc-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    opacity: 1 !important;
    filter: brightness(0.92) contrast(1.02);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
    z-index: 1;
}

.project-sc .sc-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    background: linear-gradient(180deg, rgba(8, 10, 22, 0.40) 0%, rgba(8, 10, 22, 0.76) 100%) !important;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    transition: background 0.4s ease;
    pointer-events: none;
}

.project-sc .sc-overlay a.sc-cta {
    pointer-events: auto;
}

.sc-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #f1f3f9;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.sc-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 9999px;
    background: linear-gradient(110deg, #58cefb, #9390fb);
    color: #08091a !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 22px rgba(88, 206, 251, 0.4);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.sc-cta span {
    font-size: 15px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.25s ease;
}

.project-card:hover .project-sc .sc-img,
.showcase-main:hover .project-sc .sc-img,
.project-sc.hero-art:hover .sc-img {
    transform: scale(1.045);
    filter: brightness(0.85);
}

.project-card:hover .project-sc .sc-overlay,
.showcase-main:hover .project-sc .sc-overlay,
.project-sc.hero-art:hover .sc-overlay {
    background: linear-gradient(180deg, rgba(8, 10, 22, 0.30) 0%, rgba(8, 10, 22, 0.82) 100%) !important;
}

.project-card:hover .sc-cta,
.showcase-main:hover .sc-cta,
.sc-cta:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 10px 32px rgba(88, 206, 251, 0.55), 0 0 28px rgba(147, 144, 251, 0.45);
}

.project-card:hover .sc-cta span,
.showcase-main:hover .sc-cta span,
.sc-cta:hover span {
    transform: translate(2px, -2px);
}

/* Bookshelf Grid Accordion with 3D Overlap (Facing Right) */
.bookshelf-grid {
    display: flex;
    gap: 0;
    height: 520px;
    padding-left: 10px;
    perspective: 1500px;
}

.bookshelf-card {
    flex: 1;
    min-width: 0;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    background: #111420;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    margin-left: -25px;
    transform: rotateY(-15deg) rotateZ(4deg) scale(0.96);
    transform-origin: bottom center;
    box-shadow: -15px 0 35px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.bookshelf-card:first-child {
    margin-left: 0;
}

.bookshelf-card a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Screenshot image always fills the card background */
.bookshelf-card .cover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.bookshelf-card .cover .project-art {
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
}

.bookshelf-card .cover .sc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s, filter 0.6s;
    filter: brightness(0.5);
}

/* Spine: name label overlay, always on top of the image */
.bookshelf-card .spine {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 32px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: opacity 0.45s ease;
    background: linear-gradient(180deg, rgba(8, 10, 22, 0) 30%, rgba(8, 10, 22, 0.92) 100%);
    pointer-events: none;
}

.bookshelf-card .spine h3 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    margin: 0;
    font-size: 22px;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.bookshelf-card .spine span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--cyan);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 18px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

/* On hover: expand card, flatten, reveal image in full brightness */
.bookshelf-card:hover,
.bookshelf-card:focus-within {
    flex: 9;
    transform: rotateY(0deg) rotateZ(0deg) scale(1);
    transform-origin: bottom center;
    margin-left: 0;
    margin-right: 15px;
    z-index: 50;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
}

.bookshelf-card:hover .spine,
.bookshelf-card:focus-within .spine {
    opacity: 0;
}

/* Hide badge and button on bookshelf cards entirely since we use custom hover content */
.bookshelf-card .sc-badge,
.bookshelf-card .sc-cta {
    display: none !important;
}

/* Custom hover content for brand name and field */
.bookshelf-hover-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 35px 30px;
    z-index: 10;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.bookshelf-hover-content h3 {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.bookshelf-hover-content span {
    font-size: 11px;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bookshelf-card:hover .bookshelf-hover-content,
.bookshelf-card:focus-within .bookshelf-hover-content {
    opacity: 1;
    transform: translateY(0);
}

.bookshelf-card:hover .cover .sc-img,
.bookshelf-card:focus-within .cover .sc-img {
    filter: brightness(0.85);
    transform: scale(1.04);
}

.bookshelf-card:hover .cover .sc-overlay,
.bookshelf-card:focus-within .cover .sc-overlay {
    background: linear-gradient(180deg, rgba(8, 10, 22, 0.25) 0%, rgba(8, 10, 22, 0.75) 100%) !important;
}

@media (max-width: 900px) {
    .bookshelf-grid {
        flex-direction: column;
        height: auto;
        padding-left: 0;
    }

    .bookshelf-card {
        margin-left: 0;
        transform: none;
        flex: none;
        height: 160px;
    }

    .bookshelf-card:hover {
        height: 400px;
        margin-right: 0;
    }

    .bookshelf-card .spine h3,
    .bookshelf-card .spine span {
        writing-mode: horizontal-tb;
        transform: none;
        margin: 0;
    }

    .bookshelf-card .spine {
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 12px;
        padding: 0 24px 24px;
    }
}

}


/* ── Footer ────────────────────────────────────────────── */

footer {
    padding-top: 80px;
    padding-bottom: 80px;
    margin-top: 160px;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1.5fr;
    gap: 40px;
    margin-bottom: 80px;
}

.footer-brand .footer-logo {
    font-family: var(--display);
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.footer-brand .footer-logo span {
    color: #9f82d7;
    font-weight: 500;
}

.footer-brand p {
    color: #a1a6b8;
    font-size: 14px;
    line-height: 1.8;
    max-width: 320px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-label {
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #6b6e80;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.footer-col a {
    color: #a1a6b8;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: #fff;
}

.footer-cta-card {
    margin-top: 8px;
    background: rgba(20, 28, 43, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    backdrop-filter: blur(10px);
}

.footer-cta-card p {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
}

.footer-cta-card .button {
    font-size: 13px;
    padding: 8px 18px;
    min-height: auto;
    border-radius: 20px;
}

.footer-bottom {
    display: flex;
    justify-content: flex-start;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    color: #6b6e80;
}

@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr;
    }
}/* Interactive services showcase */
.service-explorer { padding-top: 65px; padding-bottom: 70px; }
.sx-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:38px; }
.sx-intro h2 { font:500 clamp(32px,4vw,56px)/1.1 var(--display); letter-spacing:-.04em; margin:14px 0 0; }
.sx-intro > p { color:var(--muted); margin:0 0 4px; font-size:15px; }
.sx-stage { padding:30px 48px 20px; border:1px solid #ffffff20; border-radius:24px; background:radial-gradient(ellipse at 10% 95%,#28bcd33b,transparent 60%),radial-gradient(ellipse at 85% 10%,#a14aed55,transparent 60%),linear-gradient(140deg,#172a50,#21163f 60%,#101b35); overflow:hidden; }
.sx-tabs { display:flex; width:fit-content; max-width:100%; margin:0 auto 30px; padding:6px; gap:4px; border:1px solid #ffffff26; border-radius:40px; background:#080c2966; }
.sx-tabs button { border:0; border-radius:30px; background:transparent; color:#d2d3e6; font:500 13px var(--font); padding:13px 23px; cursor:pointer; transition:background .2s,color .2s; white-space:nowrap; }
.sx-tabs button:hover { background:#ffffff15; color:#fff; }
.sx-tabs button[aria-selected="true"] { background:#f7f5ff; color:#24133e; box-shadow:0 3px 14px #06081930; }
.sx-tabs button:focus-visible,.sx-panel:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.sx-panel[hidden] { display:none; }
.sx-panel { animation:sx-reveal .35s ease both; }
.sx-copy { display:flex; align-items:center; justify-content:space-between; gap:30px; margin:0 auto 24px; max-width:1080px; }
.sx-kicker { font-size:10px; letter-spacing:.16em; color:#a9c6ef; font-weight:600; }
.sx-copy h3 { font:500 clamp(23px,2.5vw,32px)/1.2 var(--display); letter-spacing:-.035em; margin:8px 0; }
.sx-copy p { font-size:13px; color:#c9c9df; max-width:580px; line-height:1.65; margin:0; }
.sx-copy .button { flex-shrink:0; font-size:12px; min-height:44px; padding:10px 16px; gap:18px; background:#ffffff0c; }
.sx-window { max-width:1080px; margin:auto; overflow:hidden; border-radius:12px; border:1px solid #ffffff35; background:#0d1529; box-shadow:0 24px 55px #03061750; }
.sx-window-bar { height:38px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:#141c33; color:#a7b2cb; font-size:10px; }
.sx-window-dots { display:flex; gap:5px; }
.sx-window-dots i { width:6px; height:6px; border-radius:50%; background:#59627d; }
.sx-window-dots i:first-child { background:#be84c8; }
.sx-site-preview { aspect-ratio: 2.22; overflow:hidden; background:#edece8; }
.sx-site-preview img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.sx-caption { text-align:center; color:#b6bed4; font-size:10px; letter-spacing:.04em; margin:16px 0 0; }
.sx-workflow { min-height:440px; padding:30px 38px; background:radial-gradient(circle at center,#42296755,transparent 70%),radial-gradient(#ffffff14 1px,transparent 1px); background-size:auto,20px 20px; }
.sx-demo-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:10px; letter-spacing:.1em; color:#aab9d3; }
.sx-status { font-size:9px; letter-spacing:0; border:1px solid #5ce2ba35; color:#84ddc4; border-radius:20px; padding:4px 10px; }
.sx-workflow h4,.sx-dashboard h4 { font:500 clamp(19px,2.2vw,28px)/1.3 var(--display); letter-spacing:-.03em; margin:28px 0 6px; }
.sx-workflow > p { color:#9daac2; font-size:12px; margin:0; }
.sx-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; margin:44px 0; }
.sx-node { position:relative; padding:20px 14px; border:1px solid #9b7fce55; border-radius:12px; background:#1d2440; box-shadow:0 8px 20px #0002; }
.sx-node:not(:last-child):after { content:''; position:absolute; width:26px; height:1px; background:#9276ce; right:-26px; top:50%; }
.sx-node > span { display:block; width:30px; height:30px; padding-top:5px; text-align:center; background:#9c6cf32a; border-radius:8px; color:#bd9cff; font-size:11px; margin-bottom:16px; }
.sx-node strong { display:block; font-size:12px; font-weight:500; }
.sx-node small { display:block; color:#9facbf; font-size:10px; margin-top:5px; }
.sx-node i { position:absolute; right:14px; top:22px; color:#72d7c0; font-style:normal; font-size:12px; }
.sx-run { border-top:1px solid #ffffff15; padding-top:17px; font-size:10px; color:#b9c6dc; display:flex; align-items:center; gap:8px; }
.sx-run > span:last-child { margin-left:auto; color:#8d9ab3; }
.sx-pulse { width:6px; height:6px; border-radius:50%; background:#70dcc1; box-shadow:0 0 12px #70dcc177; }
.sx-workspace { display:grid; grid-template-columns:165px 1fr; min-height:440px; background:#101a30; }
.sx-workspace aside { display:flex; flex-direction:column; gap:10px; padding:28px 18px; background:#1e2545; font-size:11px; color:#a9b3cd; }
.sx-workspace aside strong { font:600 20px var(--display); color:white; margin-bottom:24px; }
.sx-workspace aside strong span { color:#b496f1; }
.sx-workspace aside > span { padding:7px 10px; }
.sx-side-active { background:#9c7be52b; color:#e3d8ff; border-radius:6px; }
.sx-workspace aside small { margin-top:auto; padding:15px 10px 0; font-size:10px; }
.sx-dashboard { min-width:0; padding:26px; }
.sx-dashboard h4 { margin-top:20px; }
.sx-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.sx-metrics > div { background:#1b2941; border:1px solid #ffffff0d; border-radius:8px; padding:12px; }
.sx-metrics small { display:block; font-size:10px; color:#a4b3ce; }
.sx-metrics strong { font:500 24px var(--display); display:block; margin-top:5px; }
.sx-metrics strong span { font-size:12px; color:#8593ac; }
.sx-board { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sx-board h5 { font-size:10px; font-weight:500; margin:0 0 10px; color:#b9c9e2; }
.sx-task { padding:12px; background:#1b2941; border:1px solid #ffffff0c; border-radius:6px; margin-bottom:9px; font-size:10px; }
.sx-task small { display:block; font-size:8px; color:#9ba9c0; margin-top:6px; }
.sx-task-line { display:block; width:40%; height:3px; background:#a38bdd; border-radius:2px; margin-top:12px; }
.sx-board > div:nth-child(2) .sx-task-line { width:65%; background:#53b9d4; }
.sx-board > div:nth-child(3) .sx-task-line { width:90%; background:#6ad0b1; }
@keyframes sx-reveal { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:900px) { .sx-stage{padding:24px;} .sx-tabs button{padding:12px 15px;} .sx-workflow{padding:24px;min-height:380px;} .sx-flow{gap:15px;margin:30px 0;} .sx-node:not(:last-child):after{width:16px;right:-16px;} .sx-workspace{grid-template-columns:130px 1fr;min-height:380px;} .sx-dashboard{padding:20px;} .sx-copy{align-items:flex-start;} }
@media(max-width:600px) {
 .service-explorer{padding-top:40px;padding-bottom:40px;} .sx-intro{display:block;margin-bottom:25px;} .sx-intro > p{margin-top:18px;font-size:13px;}
 .sx-stage{padding:16px 12px;border-radius:16px;} .sx-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:18px;margin-bottom:24px;} .sx-tabs button{font-size:11px;padding:11px 8px;}
 .sx-copy{display:block;padding:0 4px;} .sx-copy h3{font-size:24px;} .sx-copy p{font-size:12px;} .sx-copy .button{margin-top:16px;} .sx-kicker{font-size:8px;}
 .sx-site-preview{aspect-ratio:1.25;} .sx-site-preview img{object-fit:cover;object-position:left top;}
 .sx-workflow{padding:18px 14px;min-height:0;} .sx-demo-heading{font-size:8px;letter-spacing:.04em;} .sx-status{font-size:8px;padding:3px 6px;} .sx-workflow h4{margin-top:22px;} .sx-flow{grid-template-columns:1fr 1fr;gap:12px;margin:24px 0;} .sx-node{padding:14px 10px;} .sx-node:not(:last-child):after{display:none;} .sx-node strong{font-size:11px;} .sx-node small{font-size:9px;} .sx-run{flex-wrap:wrap;font-size:9px;} .sx-run > span:last-child{margin-left:14px;}
 .sx-workspace{grid-template-columns:1fr;min-height:0;} .sx-workspace aside{display:none;} .sx-dashboard{padding:18px 12px;} .sx-metrics{gap:6px;} .sx-metrics > div{padding:8px;} .sx-metrics small{font-size:8px;} .sx-metrics strong{font-size:21px;} .sx-board{gap:6px;} .sx-task{padding:8px;font-size:9px;overflow-wrap:anywhere;} .sx-task small{font-size:8px;} .sx-board h5{font-size:8px;} .sx-caption{font-size:9px;}
}
@media(prefers-reduced-motion:reduce) { .sx-panel{animation:none;} .sx-tabs button{transition:none;} }

/* Locally hosted service demo films. */
.sx-video-wrap { position:relative; background:#10172c; }
.sx-video { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; }
.sx-playback { position:absolute; right:16px; bottom:66px; border:1px solid #ffffff40; background:#090e24dc; color:#fff; border-radius:24px; padding:10px 17px; font:500 12px var(--font); cursor:pointer; box-shadow:0 4px 18px #0003; }
.sx-playback:hover { background:#40305f; }
.sx-playback:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
@media(max-width:600px) { .sx-playback{right:8px;bottom:32px;padding:6px 10px;font-size:10px;} }

/* Phone country selector precedes the national number. */
.phone-field { min-width:0; display:flex; flex-direction:column; gap:9px; }
.phone-input-group { display:grid; grid-template-columns:minmax(100px, .9fr) minmax(110px, 1.1fr); gap:8px; }
.phone-input-group select { text-overflow:ellipsis; padding-left:9px; padding-right:7px; }
.phone-field small { color:#a1a6b8; font-size:11px; line-height:1.5; }
@media(max-width:380px) { .phone-input-group {grid-template-columns:1fr;} }