:root {
    --bg: #020617;
    --bg-soft: rgba(15, 23, 42, 0.96);
    --accent: #38bdf8;
    --accent-soft: rgba(56, 189, 248, 0.18);
    --text: #e5e7eb;
    --muted: #9ca3af;
    --border: rgba(148, 163, 184, 0.25);
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --shadow-card: 0 24px 70px rgba(15, 23, 42, 0.8);
    --max-width: 1280px;
    color-scheme: dark;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    cursor: default;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    position: relative;
}

/* Animated background */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.15), transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(147, 51, 234, 0.12), transparent 55%),
        radial-gradient(circle at 40% 20%, rgba(249, 115, 22, 0.08), transparent 45%);
    pointer-events: none;
    z-index: -1;
    /* animation: gradientShift 20s ease infinite; */
}

@keyframes gradientShift {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(-50px, -30px) scale(1.1);
    }

    66% {
        transform: translate(30px, 20px) scale(0.95);
    }
}

/* Floating particles */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0;
    animation: float 20s infinite;
}

@keyframes float {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-100vh) translateX(100px);
        opacity: 0;
    }
}

.particle:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
    animation-duration: 18s;
}

.particle:nth-child(2) {
    left: 25%;
    animation-delay: 2s;
    animation-duration: 22s;
    width: 3px;
    height: 3px;
}

.particle:nth-child(3) {
    left: 40%;
    animation-delay: 4s;
    animation-duration: 20s;
}

.particle:nth-child(4) {
    left: 55%;
    animation-delay: 1s;
    animation-duration: 24s;
    width: 5px;
    height: 5px;
}

.particle:nth-child(5) {
    left: 70%;
    animation-delay: 3s;
    animation-duration: 19s;
}

.particle:nth-child(6) {
    left: 85%;
    animation-delay: 5s;
    animation-duration: 21s;
    width: 3px;
    height: 3px;
}

.particle:nth-child(7) {
    left: 95%;
    animation-delay: 7s;
    animation-duration: 23s;
}

.particle:nth-child(8) {
    left: 5%;
    animation-delay: 6s;
    animation-duration: 18s;
}

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

.shell {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem 4rem;
    position: relative;
    z-index: 2;
}

/* NAVBAR */
.nav-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    backdrop-filter: blur(20px) saturate(180%);
    background: linear-gradient(to bottom,
            rgba(2, 6, 23, 0.85),
            rgba(2, 6, 23, 0.3),
            transparent);
    border-bottom: 1px solid rgba(56, 189, 248, 0.1);
    transition: all 0.3s ease;
}

.nav-container.scrolled {
    backdrop-filter: blur(30px) saturate(200%);
    background: rgba(2, 6, 23, 0.95);
    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
}

.nav {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-brand-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.nav-title .xr {
    color: #38BDF8;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 30px rgba(56, 189, 248, 0.5);
    }

    50% {
        box-shadow: 0 0 50px rgba(56, 189, 248, 0.8);
    }
}

.nav-title {
    font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    /*background: linear-gradient(20deg, #ffffff, #38bdf8);*/
    -webkit-background-clip: text;
    background-clip: text;
    color: #ffffff;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.nav-links a {
    position: relative;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, #38bdf8, #a855f7);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.nav-links a:hover {
    color: #ffffff;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-cta {
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(147, 51, 234, 0.1));
    border: 1px solid rgba(56, 189, 248, 0.3);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.nav-cta:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(147, 51, 234, 0.2));
    border-color: rgba(56, 189, 248, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(56, 189, 248, 0.3);
}

/* Mobile menu */
.nav-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    background: rgba(2, 6, 23, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 0.65rem;
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.nav-menu-toggle:hover {
    border-color: rgba(56, 189, 248, 0.5);
    background: rgba(2, 6, 23, 0.8);
}

.nav-menu-toggle:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.7);
    outline-offset: 2px;
}

.nav-menu-icon {
    position: relative;
    width: 18px;
    height: 14px;
    display: block;
}

.nav-menu-icon .bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform 0.22s ease, opacity 0.2s ease;
}

.nav-menu-icon .bar:nth-child(1) {
    top: 0;
}

.nav-menu-icon .bar:nth-child(2) {
    top: 6px;
}

.nav-menu-icon .bar:nth-child(3) {
    top: 12px;
}

.nav-menu-toggle.is-open .nav-menu-icon .bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-menu-toggle.is-open .nav-menu-icon .bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
}

.nav-menu-toggle.is-open .nav-menu-icon .bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* HERO */
header.hero {
    margin-top: 72px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(to bottom, rgba(2, 6, 23, 0.1) 0%, rgba(2, 6, 23, 0.4) 50%, rgba(2, 6, 23, 0.7) 100%),
        radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.15), transparent 60%);
    animation: overlayPulse 8s ease-in-out infinite;
}

@keyframes overlayPulse {

    0%,
    100% {
        opacity: 0.9;
    }

    50% {
        opacity: 0.7;
    }
}

.hero-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
    position: relative;
    z-index: 10;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(147, 51, 234, 0.1));
    border: 1px solid rgba(56, 189, 248, 0.2);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
    animation: fadeInUp 0.8s ease;
    backdrop-filter: blur(10px);
}

.hero-badge .badge-icon {
    width: 8px;
    height: 8px;
    background: #38bdf8;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-block;
    aspect-ratio: 1 / 1;
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.hero-heading {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    margin-bottom: 0.8rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-heading .gradient-text {
    background: linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    animation: gradientFlow 8s ease infinite;
}

@keyframes gradientFlow {

    0%,
    100% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(30deg);
    }
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    margin-bottom: 3rem;
    animation: fadeInUp 0.8s ease 0.4s both;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.6rem;
    /* reduce by ~20% */
    line-height: 1.6;
}

.hero-subnote {
    font-size: 0.95rem;
    color: var(--muted);
    margin-top: 0.5rem;
    margin-bottom: 2.2rem;
    animation: fadeInUp 0.8s ease 0.55s both;
}

.work-subnote {
    text-align: center;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    margin-bottom: 2.2rem;
}

.hero-capabilities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto 2.2rem;
    max-width: 520px;
}

.hero-chip {
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.96));
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.hero-cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease 0.6s both;
}

.btn-primary {
    padding: 0.9rem 2.2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 20px 40px rgba(56, 189, 248, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 25px 50px rgba(56, 189, 248, 0.5);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-secondary {
    padding: 0.9rem 2.2rem;
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    border: 1px solid rgba(148, 163, 184, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: rgba(56, 189, 248, 0.5);
    transform: translateY(-3px);
}

/* Floating capabilities */
.floating-capabilities {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.capability-card {
    position: absolute;
    padding: 0.8rem 1.3rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(2, 6, 23, 0.9), rgba(15, 23, 42, 0.9));
    backdrop-filter: blur(30px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0;
    animation: floatCard 20s ease-in-out infinite;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@keyframes floatCard {

    0%,
    100% {
        opacity: 0;
        transform: translate(0, 20px) scale(0.9);
    }

    15%,
    85% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

.capability-card:nth-child(1) {
    top: 25%;
    left: 10%;
    animation-delay: 0s;
}

.capability-card:nth-child(2) {
    top: 25%;
    right: 10%;
    animation-delay: 2s;
}

.capability-card:nth-child(3) {
    bottom: 35%;
    left: 12%;
    animation-delay: 4s;
}

.capability-card:nth-child(4) {
    bottom: 35%;
    right: 12%;
    animation-delay: 6s;
}

/* Stats section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(56, 189, 248, 0.1);
    border-bottom: 1px solid rgba(56, 189, 248, 0.1);
    align-items: flex-start;
    /* NEW */
}

.stat-card {
    text-align: center;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    display: flex;
    /* NEW */
    flex-direction: column;
    /* NEW */
    align-items: center;
    /* NEW */
}

.stat-card:nth-child(1) {
    animation-delay: 0.1s;
}

.stat-card:nth-child(2) {
    animation-delay: 0.2s;
}

.stat-card:nth-child(3) {
    animation-delay: 0.3s;
}

.stat-card:nth-child(4) {
    animation-delay: 0.4s;
}

.stat-number {
    font-size: 2rem;
    /* was 2.5rem */
    font-weight: 700;
    background: linear-gradient(135deg, #38bdf8, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    /* NEW */
    min-height: 2.4rem;
    /* NEW: keeps all headers vertically aligned */
}

.stat-label {
    font-size: 0.9rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mobile-break {
    display: none;
}

/* SECTIONS */
section {
    padding: 5rem 0;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease;
}

/* Tighter contact/footer spacing */
#contact {
    padding-bottom: 2.5rem;
}

#work {
    padding-bottom: 3.5rem;
}

section.animate-in {
    opacity: 0;
    transform: translateY(30px);
}

section.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.section-eyebrow::before,
.section-eyebrow::after {
    content: "";
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

/* Work cards */
.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.work-card {
    border-radius: 1.5rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(56, 189, 248, 0.15);
    transition: all 0.4s ease;
    cursor: pointer;
    position: relative;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.work-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, rgba(2, 6, 23, 0.9));
    z-index: 1;
}

.work-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: brightness(0.6) saturate(1.2);
}

.work-card:hover {
    transform: translateY(-10px);
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 30px 60px rgba(56, 189, 248, 0.2);
}

.work-card:hover .work-card-bg {
    transform: scale(1.1);
    filter: brightness(0.8) saturate(1.3);
}

.work-card-content {
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.work-card-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    /* safety */
    -webkit-overflow-scrolling: touch;
}

.work-card-tags::-webkit-scrollbar {
    display: none;
}

.work-tag {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    white-space: nowrap;
    /* NEVER break text */
    flex: 0 0 auto;
    /* prevent shrinking/stretching */
}

.work-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.work-card-description {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.5;
}

.work-card-hover-hint {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.45);
    font-size: 0.75rem;
    color: var(--muted);
    opacity: 0.25;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
    pointer-events: none;
    z-index: 3;
}

.work-card:hover .work-card-hover-hint {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
    border-color: rgba(56, 189, 248, 0.85);
    background: rgba(15, 23, 42, 0.98);
    color: #e5e7eb;
}

.work-cta {
    text-align: center;
    margin-top: 1rem;
}

.hint-icon {
    font-size: 0.7rem;
}

.hint-text {
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Project modal */
.project-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.project-modal.open {
    display: flex;
}

.project-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(18px);
}

.project-modal-dialog {
    position: relative;
    z-index: 1;
    max-width: 960px;
    width: 90%;
    max-height: 80vh;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.98));
    border-radius: 1.5rem;
    border: 1px solid rgba(56, 189, 248, 0.3);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    overflow: hidden;
}

.project-modal-media {
    position: relative;
    background: #020617;
}

.project-modal-video {
    width: 100%;
    height: 100%;
    max-height: 80vh;
    object-fit: cover;
    display: block;
}

.project-modal-body {
    padding: 1.8rem;
    overflow-y: auto;
}

.project-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.project-modal-tags .tag {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    font-size: 0.75rem;
    color: var(--muted);
}

.project-modal-title {
    font-size: 1.4rem;
    margin: 0 0 0.6rem 0;
}

.project-modal-text {
    font-size: 0.95rem;
    color: var(--muted);
    margin-bottom: 0.6rem;
}

.project-modal-list {
    padding-left: 1.1rem;
    font-size: 0.88rem;
    color: var(--muted);
}

.project-modal-list li+li {
    margin-top: 0.2rem;
}

.project-modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    border: none;
    background: rgba(15, 23, 42, 0.9);
    color: var(--muted);
    border-radius: 999px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.6);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.project-modal-close:hover {
    color: #e5e7eb;
    border-color: rgba(56, 189, 248, 0.8);
}

#process {
    padding: 6rem 0 4rem;
}

.process-grid {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.process-step {
    padding: 2rem;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 1.25rem;
    background: rgba(2, 6, 23, 0.65);
    text-align: center;
    backdrop-filter: blur(12px);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.process-step:hover {
    border-color: rgba(56, 189, 248, 0.6);
    background: rgba(2, 6, 23, 0.85);
}

.process-icon {
    font-size: 2rem;
    margin-bottom: 0.8rem;
}

.process-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.process-text {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.5;
}

.testimonial {
    padding: 2.5rem 1.5rem 3.5rem;
    display: flex;
    justify-content: center;
}

.testimonial-card {
    max-width: 800px;
    padding: 2.5rem 2rem;
    background: rgba(2, 6, 23, 0.4);
    border: 1px solid rgba(56, 189, 248, 0.1);
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    text-align: center;
}

.testimonial-text {
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 1.5rem;
}

.testimonial-author {
    font-size: 0.95rem;
    opacity: 0.7;
}

/* Mobile */
@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .process-step {
        padding: 1.6rem;
    }
}


@media (max-width: 900px) {
    .project-modal-dialog {
        grid-template-columns: 1fr;
        max-height: 90vh;
    }

    .project-modal-media {
        max-height: 45vh;
    }
}

/* Clients marquee */
.clients-marquee {
    padding: 3rem 0 0;
    display: flex;
    justify-content: center;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 3rem;
    align-items: center;
    justify-items: center;
    max-width: 900px;
    width: 100%;
}

.client-logo {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    transition: transform 0.25s ease, opacity 0.25s ease;
    opacity: 1;
}

.client-logo img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.client-logo span {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.client-logo:hover {
    transform: translateY(-2px);
    opacity: 1;
}


/* On tablets/phones: 2 columns */
@media (max-width: 768px) {
    .clients-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 2rem;
    }
}


/* About section */
.about-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 4rem;
}

.studio-credibility {
    margin-top: 1.2rem;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    font-style: italic;
    opacity: 0.75;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}



.about-founder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.05), rgba(147, 51, 234, 0.05));
    border: 1px solid rgba(56, 189, 248, 0.1);
    backdrop-filter: blur(10px);
}

.founder-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(148, 163, 184, 0.7);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

.founder-info {
    text-align: left;
    max-width: 460px;
}

.founder-name {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.founder-role {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.founder-bio {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.6;
}

/* Contact section */
.contact-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-methods {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
}

.contact-method {
    padding: 1.5rem 2.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
    border: 1px solid rgba(56, 189, 248, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.contact-method:hover {
    transform: translateY(-5px);
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 20px 40px rgba(56, 189, 248, 0.2);
}

.contact-method-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.contact-method-label {
    font-size: 0.9rem;
    color: var(--muted);
}

.contact-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: -1rem auto 2rem;
    margin-top: 1rem;
}

.contact-chip {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.15), rgba(15, 23, 42, 0.95));
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.contact-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0 auto 3rem;
    max-width: 780px;
}

.contact-step {
    display: flex;
    gap: 0.9rem;
    text-align: left;
}

.contact-step-number {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #e5e7eb;
    background: radial-gradient(circle at 30% 0%, rgba(56, 189, 248, 0.5), rgba(15, 23, 42, 1));
}

.contact-step-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.contact-step-text {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
}

.contact-method-sub {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

.contact-footnote {
    margin-top: 2rem;
    font-size: 0.8rem;
    color: var(--muted);
}

/* Mobile layout */
@media (max-width: 768px) {
    .contact-steps {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .contact-step {
        align-items: flex-start;
    }
}


/* Footer */
.footer {
    padding: 2rem 0;
    text-align: center;
    border-top: 1px solid rgba(56, 189, 248, 0.1);
    margin-top: 2.5rem;
}

.footer-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: var(--muted);
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--text);
}

.footer-copyright {
    color: var(--muted);
    font-size: 0.85rem;
    width: 100%;
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {

    .nav-links,
    .nav-cta {
        display: none;
    }

    .nav-left {
        order: 1;
    }

    .nav-brand-icon {
        width: 24px;
        height: 24px;
    }

    .nav-menu-toggle {
        display: flex;
        order: 2;
        margin-left: auto;
    }

    .nav-links {
        order: 3;
    }

    .nav-cta {
        order: 4;
    }

    .hero-content {
        padding-top: 4.5rem;
        padding-bottom: 3.5rem;
    }

    .hero {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
        margin-top: 56px;
        align-items: center;
        /* bring hero content back toward center on mobile */
    }

    .hero h1 {
        font-size: 2rem;
        /* improves spacing & legibility */
        line-height: 1.15;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.9rem;
        gap: 0.35rem;
    }

    .hero-badge .badge-icon {
        width: 6px;
        height: 6px;
    }

    .work-grid {
        grid-template-columns: 1fr;
    }

    .work-card-tags {
        flex-wrap: wrap;
        overflow-x: visible;
        max-width: 100%;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        align-items: stretch;
    }

    .stat-number {
        white-space: normal;
    }

    .stat-card {
        display: grid;
        grid-template-rows: auto 1fr;
        justify-items: center;
        row-gap: 0.35rem;
        height: 100%;
        text-align: center;
    }

    .stat-label {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 3.2rem;
        line-height: 1.25;
    }

    .mobile-break {
        display: inline;
    }

    .about-founder {
        flex-direction: column;
        text-align: center;
    }

    .founder-info {
        text-align: center;
    }

    .contact-methods {
        flex-direction: column;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .floating-capabilities {
        display: none;
    }

    /* Disable large background / overlay animations on mobile */
    body::before {
        animation: none !important;
        transform: none !important;
    }

    .particles {
        display: none;
    }

    .hero-video-overlay {
        animation: none !important;
        opacity: 0.85;
    }

    .capability-card {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .clients-marquee {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .marquee-track {
        animation: none;
        transform: none;
        width: max-content;
    }

    .client-logo {
        flex: 0 0 auto;
        padding: 1.5rem 1.4rem;
    }

    /* Mobile nav open state */
    .nav-container.mobile-open {
        background: rgba(2, 6, 23, 0.98);
        border-bottom: 1px solid rgba(56, 189, 248, 0.4);
    }

    .nav-container.mobile-open .nav {
        flex-wrap: wrap;
        align-items: center;
    }

    .nav-container.mobile-open .nav-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
        gap: 1rem;
    }

    .nav-container.mobile-open .nav-cta {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 1rem;
    }

    .nav-container.mobile-open .nav-menu-toggle {
        transform: rotate(0deg);
    }

    .duplicate {
        display: none !important;
    }

}

/* Touch devices (no hover): make images bright by default and pill always visible */
@media (hover: none) and (pointer: coarse) {

    .work-card-bg {
        filter: none !important;
        transform: none !important;
    }

    .work-card:hover .work-card-bg {
        filter: none !important;
        transform: none !important;
    }

    .work-card-hover-hint {
        opacity: 0.6;
        border-color: rgba(56, 189, 248, 0.85);
        background: rgba(15, 23, 42, 0.96);
        color: #e5e7eb;
    }

    .work-card:hover .work-card-hover-hint {
        opacity: 0.9;
        transform: translate(-50%, -50%);
    }
}


/* ============================================================================
   REDESIGN — two-pipeline layout
   Extends the system above; nothing here overrides existing components.
   ========================================================================== */

:root {
    /* Same purple the hero gradient and buttons use, so the site carries one
       violet rather than two competing ones. */
    --violet: #a855f7;
    --violet-soft: rgba(168, 85, 247, 0.14);
    --violet-line: rgba(168, 85, 247, 0.32);
    --panel: rgba(15, 23, 42, 0.55);
    /* Engineering register for stage numbers, formats and figures. */
    --mono: "SF Mono", ui-monospace, Menlo, "Cascadia Mono", monospace;
}

/* --- shared -------------------------------------------------------------- */
.eyebrow-mono {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

.lede {
    max-width: 62ch;
    margin: 0 auto;
    color: var(--muted);
    line-height: 1.65;
}

/* --- proof strip (directly under the hero) ------------------------------- */
.proof {
    padding: 3rem 0 1rem;
    text-align: center;
}

.proof-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.75;
    margin-bottom: 1.75rem;
}

/* --- two avenues --------------------------------------------------------- */
.avenues {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin: 1rem 0 2rem;
}

.avenue {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--panel);
    backdrop-filter: blur(14px);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.avenue:hover,
.avenue:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.avenue--products:hover,
.avenue--products:focus-within {
    border-color: var(--violet-line);
}

.avenue--spaces:hover,
.avenue--spaces:focus-within {
    border-color: rgba(56, 189, 248, 0.32);
}

.avenue-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b1220;
}

.avenue-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.avenue:hover .avenue-media img {
    transform: scale(1.04);
}

.avenue-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.9), transparent 55%);
}

.avenue-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    flex: 1;
}

.avenue-kicker {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.avenue--products .avenue-kicker {
    color: var(--violet);
}

.avenue--spaces .avenue-kicker {
    color: var(--accent);
}

.avenue-title {
    font-size: clamp(1.5rem, 2.6vw, 1.95rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.avenue-text {
    color: var(--muted);
    line-height: 1.65;
}

.avenue-points {
    list-style: none;
    display: grid;
    gap: 0.55rem;
    margin-top: 0.2rem;
}

.avenue-points li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.55;
}

.avenue-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.avenue--products .avenue-points li::before {
    background: var(--violet);
}

.avenue--spaces .avenue-points li::before {
    background: var(--accent);
}

.avenue-link {
    margin-top: auto;
    padding-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.avenue--products .avenue-link {
    color: var(--violet);
}

.avenue--spaces .avenue-link {
    color: var(--accent);
}

.avenue-link .arrow {
    transition: transform 0.25s ease;
}

.avenue:hover .avenue-link .arrow {
    transform: translateX(4px);
}

.avenue-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 3px;
}

/* Makes the whole card clickable while keeping one real link for a11y. */
.avenue-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* --- pipeline ------------------------------------------------------------ */
.pipeline {
    margin: 1rem 0 2rem;
}

.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    counter-reset: stage;
}

.stage {
    position: relative;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--panel);
    backdrop-filter: blur(14px);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.35s ease, transform 0.35s ease, background 0.35s ease;
}

.stage.is-active {
    border-color: rgba(56, 189, 248, 0.45);
    transform: translateY(-3px);
    background: rgba(15, 23, 42, 0.75);
}

.stage-num {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--accent);
    font-weight: 600;
}

.stage-title {
    font-size: 1.12rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.stage-text {
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.6;
    flex: 1;
}

.stage-io {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    opacity: 0.8;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
    line-height: 1.5;
}

.stage-io b {
    color: var(--accent);
    font-weight: 600;
}

/* Connector between stages on wide screens */
.stage:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.1rem;
    right: -1rem;
    width: 1rem;
    height: 1px;
    background: var(--border);
}

.pipeline-note {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.95rem;
    color: var(--muted);
}

.pipeline-note b {
    color: var(--text);
    font-weight: 600;
}

/* --- figures band (airport scale) ---------------------------------------- */
.figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 1.5rem 0 0;
}

.figure {
    background: rgba(2, 6, 23, 0.82);
    padding: 1.35rem 1rem;
    text-align: center;
}

.figure-value {
    font-family: var(--mono);
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.figure-label {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 0.35rem;
}

/* --- section spacing ----------------------------------------------------- */
.section {
    padding: 4.5rem 0 0;
}

.section-header--tight {
    margin-bottom: 2.25rem;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .pipeline-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stage:nth-child(2)::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .avenues {
        grid-template-columns: 1fr;
    }

    .pipeline-grid {
        grid-template-columns: 1fr;
    }

    .stage::after {
        display: none !important;
    }

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

    .section {
        padding: 3rem 0 0;
    }
}

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

    .avenue,
    .avenue-media img,
    .stage,
    .avenue-link .arrow {
        transition: none;
    }

    .avenue:hover {
        transform: none;
    }

    .avenue:hover .avenue-media img {
        transform: none;
    }

    .stage.is-active {
        transform: none;
    }
}

/* --- nav: five items need more room than four ---------------------------- */
/* "Case Studies" was wrapping to two lines and colliding with the wordmark
   and CTA between ~770px and ~1100px. Keep labels on one line, and switch to
   the hamburger before the row runs out of space rather than after. */
.nav-links a {
    white-space: nowrap;
}

.nav-cta {
    white-space: nowrap;
}

@media (max-width: 1100px) {

    .nav-links,
    .nav-cta {
        display: none;
    }

    .nav-menu-toggle {
        display: flex;
        order: 2;
        margin-left: auto;
    }

    .nav-left {
        order: 1;
    }

    .nav-links {
        order: 3;
    }

    .nav-cta {
        order: 4;
    }

    .nav-container.mobile-open {
        background: rgba(2, 6, 23, 0.98);
        border-bottom: 1px solid rgba(56, 189, 248, 0.4);
    }

    .nav-container.mobile-open .nav {
        flex-wrap: wrap;
        align-items: center;
    }

    .nav-container.mobile-open .nav-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
        gap: 1rem;
    }

    .nav-container.mobile-open .nav-cta {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: 1rem;
    }
}


/* ============================================================================
   PRODUCTS PAGE
   ========================================================================== */

/* Sub-page hero: shorter than the homepage, image rather than video. */
.subhero {
    position: relative;
    min-height: 68vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: 1rem;
}

.subhero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.subhero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

.subhero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.97) 4%, rgba(2, 6, 23, 0.35) 55%, rgba(2, 6, 23, 0.7) 100%);
}

.subhero-content {
    position: relative;
    z-index: 2;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem 4rem;
    width: 100%;
}

.subhero-kicker {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 1rem;
}

.subhero-title {
    font-size: clamp(2.1rem, 5.2vw, 3.8rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.025em;
    max-width: 18ch;
    text-wrap: balance;
}

.subhero-title .accent {
    color: var(--accent);
}

.subhero-sub {
    margin-top: 1.1rem;
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    color: var(--muted);
    max-width: 54ch;
    line-height: 1.6;
}

/* Prose block */
.prose {
    max-width: 68ch;
    margin: 0 auto;
}

.prose p+p {
    margin-top: 1rem;
}

.prose p {
    color: var(--muted);
    line-height: 1.7;
}

.prose strong {
    color: var(--text);
    font-weight: 600;
}

/* --- annotated screenshots ----------------------------------------------- */
.shots {
    display: grid;
    gap: 2.5rem;
}

.shot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}

.shot:nth-child(even) .shot-copy {
    order: -1;
}

.shot-figure {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0b1220;
    box-shadow: var(--shadow-card);
}

.shot-figure img {
    width: 100%;
    height: auto;
    display: block;
}

.shot-step {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.6rem;
}

.shot-copy h3 {
    font-size: 1.4rem;
    font-weight: 650;
    letter-spacing: -0.018em;
    margin-bottom: 0.7rem;
    text-wrap: balance;
}

.shot-copy p {
    color: var(--muted);
    line-height: 1.7;
}

.shot-list {
    list-style: none;
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.shot-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.93rem;
    color: var(--muted);
    line-height: 1.55;
}

.shot-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* --- app callout --------------------------------------------------------- */
.appcard {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
    border: 1px solid rgba(56, 189, 248, 0.32);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 0.6));
    backdrop-filter: blur(14px);
    padding: 2rem;
}

.appcard h3 {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
    text-wrap: balance;
}

.appcard p {
    color: var(--muted);
    line-height: 1.65;
    max-width: 52ch;
}

.appcard-meta {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-top: 0.9rem;
}

.appstore-badge {
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.appstore-badge:hover {
    transform: translateY(-2px);
}

.appstore-badge:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 10px;
}

.appstore-badge svg {
    display: block;
    height: 56px;
    width: auto;
}

/* --- spec table ---------------------------------------------------------- */
.spec-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(2, 6, 23, 0.55);
}

.spec {
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;
    font-size: 0.95rem;
}

.spec th,
.spec td {
    text-align: left;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.spec thead th {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    background: rgba(15, 23, 42, 0.7);
}

.spec tbody th {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    width: 1%;
}

.spec td {
    color: var(--text);
}

.spec tr:last-child th,
.spec tr:last-child td {
    border-bottom: 0;
}

.spec .hi {
    color: var(--accent);
    font-weight: 600;
}

/* --- page CTA ------------------------------------------------------------ */
.endcta {
    text-align: center;
    padding: 4rem 0 1rem;
}

.endcta h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.8rem;
    text-wrap: balance;
}

.endcta p {
    color: var(--muted);
    max-width: 52ch;
    margin: 0 auto 1.8rem;
    line-height: 1.65;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {

    .matpick,
    .shot {
        grid-template-columns: 1fr;
    }

    .shot:nth-child(even) .shot-copy {
        order: 0;
    }

    .appcard {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .appcard p {
        margin-inline: auto;
    }

    .subhero {
        min-height: 56vh;
    }
}

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

    .matpick-stage img,
    .swatch,
    .appstore-badge {
        transition: none;
    }

    .swatch:hover,
    .appstore-badge:hover {
        transform: none;
    }
}


/* ============================================================================
   SPACES PAGE
   ========================================================================== */

/* --- before / after wipe ------------------------------------------------- */
.compare {
    --pos: 50%;
    position: relative;
    width: 100%;
    aspect-ratio: 3400 / 1902;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: #0b1220;
}

.compare-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Source sits underneath; the delivered render occupies everything right of
   the handle, so the pair reads left-to-right as before -> after. */
.compare-after {
    clip-path: inset(0 0 0 var(--pos));
}

.compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    background: var(--accent);
    transform: translateX(-1px);
    pointer-events: none;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.75);
}

.compare-knob {
    position: absolute;
    top: 50%;
    left: var(--pos);
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: rgba(2, 6, 23, 0.85);
    border: 2px solid var(--accent);
    backdrop-filter: blur(6px);
    pointer-events: none;
    display: grid;
    place-items: center;
    color: var(--accent);
    font-size: 0.85rem;
    letter-spacing: -0.08em;
}

/* A real range input drives it: keyboard, touch and screen readers for free. */
.compare-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: col-resize;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.compare-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 44px;
    height: 100%;
}

.compare-range::-moz-range-thumb {
    width: 44px;
    height: 100%;
    border: 0;
    background: transparent;
}

.compare-range:focus-visible+.compare-divider {
    outline: none;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.45), 0 0 18px rgba(56, 189, 248, 0.75);
}

.compare-tag {
    position: absolute;
    bottom: 0.9rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.75);
    border: 1px solid var(--border);
    color: var(--muted);
    pointer-events: none;
    backdrop-filter: blur(6px);
}

.compare-tag--before {
    left: 0.9rem;
}

.compare-tag--after {
    right: 0.9rem;
    color: var(--accent);
    border-color: rgba(56, 189, 248, 0.4);
}

.compare-hint {
    margin-top: 0.9rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted);
}

/* --- state toggle (day / evening) ---------------------------------------- */
.statepair {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    aspect-ratio: 16 / 9;
    background: #0b1220;
}

.statepair img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.statepair img.is-shown {
    opacity: 1;
}

.state-controls {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}

/* Overlaid variant, for toggles that sit on top of card media. */
.state-controls--overlay {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    margin: 0;
    justify-content: flex-start;
    z-index: 3;
    gap: 0.4rem;
}

.state-controls--overlay .state-btn {
    font-size: 0.68rem;
    padding: 0.38rem 0.85rem;
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(8px);
}

.stateful {
    position: relative;
}

/* When a state pair drives card media it must fill the frame. */
.avenue-media .statepair {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
}

.state-btn {
    font: inherit;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.55rem 1.3rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(2, 6, 23, 0.6);
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.state-btn:hover {
    border-color: rgba(56, 189, 248, 0.5);
    color: var(--text);
}

.state-btn[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--text);
    background: rgba(56, 189, 248, 0.12);
}

.state-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* --- feature trio -------------------------------------------------------- */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.feature {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--panel);
    backdrop-filter: blur(14px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.feature-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b1220;
}

.feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feature-body {
    padding: 1.25rem;
    display: grid;
    gap: 0.5rem;
}

.feature-kicker {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.feature-body h3 {
    font-size: 1.1rem;
    font-weight: 650;
    letter-spacing: -0.012em;
}

.feature-body p {
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.6;
}

/* --- sector chips -------------------------------------------------------- */
.sectors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
    .features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .compare-tag {
        font-size: 0.6rem;
        letter-spacing: 0.1em;
    }

    .compare-knob {
        width: 36px;
        height: 36px;
        margin: -18px 0 0 -18px;
    }
}

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

    .statepair img,
    .state-btn {
        transition: none;
    }
}


/* ============================================================================
   CASE STUDIES PAGE
   ========================================================================== */

/* Page header for pages with no hero - clears the fixed navbar. */
.pagehead {
    padding: 9rem 0 0;
    text-align: center;
}

.pagehead .section-title {
    margin-bottom: 1rem;
}

.pagehead-kicker {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 1rem;
}

/* Case study cards carry an era label, since the work spans ten years and
   HoloLens-era projects shouldn't read as current platform work. */
.work-card-era {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.8);
    border: 1px solid var(--border);
    color: var(--muted);
    backdrop-filter: blur(6px);
}

.casegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 2rem;
}

@media (max-width: 768px) {
    .pagehead {
        padding-top: 7rem;
    }

    .casegrid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================================
   POLICY PAGES
   ========================================================================== */
.nav-back {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    transition: color 0.3s ease;
}

.nav-back:hover {
    color: #ffffff;
}

.policy {
    max-width: 720px;
    margin: 0 auto;
    padding: 9rem 2rem 5rem;
    position: relative;
    z-index: 2;
}

.policy h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}

.policy-meta {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 2.5rem;
}

.policy-meta strong {
    color: var(--text);
    font-weight: 600;
}

.policy p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 1.1rem;
}

.policy h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 2.4rem 0 0.9rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(56, 189, 248, 0.12);
}

.policy a.text-link {
    color: var(--accent);
    border-bottom: 1px solid rgba(56, 189, 248, 0.35);
    transition: border-color 0.2s ease;
}

.policy a.text-link:hover {
    border-color: var(--accent);
}

.policy address {
    font-style: normal;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--muted);
}

@media (max-width: 768px) {
    .policy {
        padding-top: 7rem;
    }
}

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

    .nav-back,
    .policy a.text-link {
        transition: none;
    }
}

/* --- inline finish strip -------------------------------------------------
   Textures only read as materials at small sizes; shown large they are just
   flat colour. So they sit inline with the copy as a palette, not a hero. */
.finishes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.1rem;
}

.finish {
    width: 74px;
}

.finish img {
    width: 100%;
    height: 46px;
    object-fit: cover;
    border-radius: 0.45rem;
    border: 1px solid var(--border);
    display: block;
}

.finish span {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-align: center;
    line-height: 1.3;
}


/* ============================================================================
   DESIGN PASS - fixes only visible once rendered
   ========================================================================== */

/* Client logos arrived as a jumble: Apple a white glyph, Microsoft and FormaXR
   in full colour, Pearson on a white plate, GigXR in bright yellow. On a dark
   ground they fought each other and read as clip-art. Normalising to a single
   luminance lets the names carry the weight. */
.clients-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 100%;
    gap: 1.5rem 2rem;
}

.client-logo img {
    height: 30px;
    filter: grayscale(1) brightness(1.9) contrast(0.85);
    opacity: 0.72;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

.client-logo:hover img {
    opacity: 1;
    filter: grayscale(1) brightness(2.1) contrast(0.9);
}

.client-logo span {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    opacity: 0.85;
}

@media (max-width: 860px) {
    .clients-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .clients-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Headline was breaking mid-clause and orphaning "scale,". */
.hero-heading,
.section-title,
.subhero-title,
.avenue-title {
    text-wrap: balance;
}

.hero-subtitle,
.lede {
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    .hero-heading .gradient-text {
        animation: none;
    }
}

/* Chips were wrapping 3 + 1 and centring the orphan. */
.hero-capabilities {
    max-width: 640px;
}

/* Case study art was sitting under a heavy grey wash, and the hover hint
   showed through the middle of the card. */
.work-card-bg {
    filter: brightness(0.82) saturate(1.05);
}

.work-card:hover .work-card-bg {
    filter: brightness(0.95) saturate(1.1);
}

.work-card-content {
    background: linear-gradient(to top,
            rgba(2, 6, 23, 0.96) 0%,
            rgba(2, 6, 23, 0.82) 45%,
            rgba(2, 6, 23, 0) 100%);
}

/* Cards were different heights with tags landing at different baselines. */
.casegrid,
.work-grid {
    align-items: stretch;
}

.work-card {
    display: flex;
    flex-direction: column;
    min-height: 340px;
}

.work-card-content {
    margin-top: auto;
}

/* Pipeline stages had ragged bottoms where stage 01 carries less copy. */
.pipeline-grid {
    align-items: stretch;
}

.stage-io {
    margin-top: auto;
}

/* ============================================================================
   CONSOLIDATION — single-page layout
   ========================================================================== */

/* The App Store badge sits beside a text button in the hero. */
.hero-cta-group {
    align-items: center;
}

/* Asset Manager screenshot inside the pipeline section. */
.pipeline-shot {
    margin-top: 3.5rem;
}

/* Flagship case study: the airport wipe leads the work section. */
.case-flagship {
    margin-bottom: 3.5rem;
}

.case-flagship-head {
    max-width: 720px;
    margin: 0 auto 1.75rem;
    text-align: center;
}

.case-flagship-title {
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    letter-spacing: -0.01em;
    margin: 0.6rem 0 0.5rem;
    text-wrap: balance;
}

.case-flagship-text {
    color: var(--muted);
    line-height: 1.6;
    text-wrap: pretty;
}

.case-flagship .compare {
    box-shadow: var(--shadow-card);
}

.case-flagship .figures {
    margin-top: 1.25rem;
}

/* Four cards read as a deliberate 2x2, not auto-fit's 3+1. */
@media (min-width: 769px) {
    #work .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Pointer input on the wipe is handled by script on the container, so a drag
   can start anywhere on the image; the range keeps keyboard and AT support.
   pan-y leaves vertical scrolling over the image alone. */
.compare {
    touch-action: pan-y;
    cursor: col-resize;
}

.compare-range {
    pointer-events: none;
}

/* The pipeline read heavy on a phone: four tall cards of dense copy. */
@media (max-width: 768px) {
    .pipeline-grid {
        gap: 0.75rem;
    }

    .stage {
        padding: 1.1rem 1rem;
        gap: 0.45rem;
    }

    .stage-text {
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .pipeline-shot {
        margin-top: 2.25rem;
    }
}

/* The hover hint sat at opacity .25 by default, so "View preview" floated
   half-visible over every card at rest and read as a rendering fault. It only
   needs to exist on hover; keyboard focus gets it too. */
.work-card-hover-hint {
    opacity: 0;
}

.work-card:focus-visible .work-card-hover-hint {
    opacity: 1;
}

.work-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Contact steps were squeezed into three narrow columns at desktop width. */
.contact-steps {
    max-width: 780px;
    margin-inline: auto;
    gap: 1.5rem;
}

/* ============================================================================
   REORDER + CONTACT REBUILD
   The airport wipe moved into "What we do"; the Asset Manager block and the
   YachtXR card are commented out in index.html; contact was rebuilt around a
   single primary action.
   ========================================================================== */

/* --- airport wipe, now inline under the two avenue cards ----------------- */
.case-flagship--inline {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- work grid: three cards while YachtXR is held back -------------------
   Restore `repeat(2, ...)` when the fourth card comes back, or four cards
   will read as an awkward 3 + 1. */
@media (min-width: 769px) {
    #work .work-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 769px) and (max-width: 1080px) {
    #work .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- the studio: two people ---------------------------------------------- */
.team {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 1040px;
    margin-inline: auto;
    align-items: stretch;
}

/* The card was built for one centred person; in a pair it needs to sit left
   so the two bios share a reading edge. */
.team .about-founder {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 1.6rem;
    text-align: left;
}

.team .founder-info {
    text-align: left;
    max-width: none;
}

.team .founder-avatar-img {
    flex: 0 0 auto;
}

@media (max-width: 820px) {
    .team {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .team .about-founder {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }

    .team .founder-avatar-img {
        width: 64px;
        height: 64px;
    }
}

/* .about-container caps at 800px, which squeezed two bios into ~215px columns.
   Widen the studio section only; keep the intro line at a readable measure. */
#studio .about-container {
    max-width: 1040px;
}

#studio .about-text {
    max-width: 62ch;
    margin-inline: auto;
    margin-bottom: 3rem;
}

/* --- contact -------------------------------------------------------------
   Deliberately short: a heading, one line, and two things to press. The old
   version was two low-contrast boxes of identical weight with no primary
   action, and the global `a { color: inherit; text-decoration: none }` meant
   anything not explicitly styled read as plain prose rather than as a link.
   Both controls here are styled pills, so neither can be mistaken for text. */
.contact-box {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
}

.contact-lede {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--muted);
}

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.75rem;
}

/* Solid accent with a near-black label: 9.4:1, versus 2.1:1 for the
   white-on-accent gradient the old buttons used. */
.cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.95rem 1.7rem;
    border-radius: 999px;
    background: var(--accent);
    color: #020617;
    font-weight: 650;
    font-size: 0.98rem;
    border: 1px solid var(--accent);
    box-shadow: 0 14px 34px rgba(56, 189, 248, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.cta-primary:hover {
    background: #7dd3fc;
    border-color: #7dd3fc;
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(56, 189, 248, 0.34);
}

.cta-arrow {
    transition: transform 0.25s ease;
}

.cta-primary:hover .cta-arrow {
    transform: translateX(3px);
}

.cta-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.95rem 1.7rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    background: rgba(2, 6, 23, 0.5);
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--text);
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.cta-secondary:hover {
    border-color: var(--accent);
    background: rgba(56, 189, 248, 0.12);
    transform: translateY(-2px);
}

.cta-primary:focus-visible,
.cta-secondary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.contact-foot {
    margin-top: 2rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.8;
}

#contact {
    padding-bottom: 2rem;
}

@media (max-width: 420px) {
    .contact-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-primary,
    .cta-secondary {
        justify-content: center;
        text-align: center;
    }
}

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

    .cta-primary,
    .cta-secondary,
    .cta-arrow {
        transition: none;
    }

    .cta-primary:hover,
    .cta-secondary:hover {
        transform: none;
    }

    .cta-primary:hover .cta-arrow {
        transform: none;
    }
}

/* --- app card: a download strip, not a panel -----------------------------
   It was ~215px tall to carry a badge and two sentences. Tighter padding, a
   smaller heading and a single line bring it down to roughly half that. */
.appcard {
    padding: 1.3rem 1.6rem;
    gap: 1.5rem;
}

.appcard h3 {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    margin-bottom: 0.3rem;
}

.appcard p {
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 68ch;
}

/* Scoped so the hero badge keeps its full size. */
.appcard .appstore-badge svg {
    height: 46px;
}

/* Firefox ignores -webkit-user-drag, so the images are also marked
   draggable="false" in markup; this keeps selection off the whole frame. */
.compare {
    user-select: none;
    -webkit-user-select: none;
}

.compare-img {
    -moz-user-select: none;
    pointer-events: none;
}

/* ============================================================================
   HERO SCRIM — for the brighter showreel
   ==========================================================================
   The new hero footage is a white classical interior: mean luma in the headline
   zone is 139/255 against 117 for the old cut, and it peaks at 174. The old
   brightness(0.7) plus a linear top-to-bottom gradient was tuned for darker
   footage and leaves the headline washing out against the ceiling.

   Rather than crushing the whole frame — which would waste the footage — this
   darkens the middle where the type sits and lets the edges stay bright. */
.hero-video {
    filter: brightness(0.62) saturate(1.06);
}

.hero-video-overlay {
    background:
        radial-gradient(ellipse 78% 58% at 50% 52%,
            rgba(2, 6, 23, 0.62) 0%,
            rgba(2, 6, 23, 0.42) 45%,
            rgba(2, 6, 23, 0.12) 78%,
            transparent 100%),
        linear-gradient(to bottom,
            rgba(2, 6, 23, 0.30) 0%,
            rgba(2, 6, 23, 0.34) 50%,
            rgba(2, 6, 23, 0.72) 100%),
        radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.12), transparent 60%);
}

/* The pulse dipped the scrim to 70% opacity, which is exactly when the
   headline lost contrast. Hold it steady. */
.hero-video-overlay {
    animation: none;
    opacity: 1;
}

/* The airport lost its project name when the wipe moved into its own section —
   the old eyebrow read "Flagship — Airport XR · 2024". Put the credit back
   under the title so the work is attributable, not just a demo. */
.flagship-credit {
    margin: 0.6rem 0 0.9rem;
}

/* The pipeline section restated the Products card almost verbatim — three of its
   four stages, near word for word — so it was cut. Its two original claims live
   here instead, directly under the pair they describe. */
.avenues-note {
    max-width: 62ch;
    margin: 2rem auto 0;
    text-align: center;
    color: var(--muted);
    line-height: 1.65;
    text-wrap: pretty;
}

.avenues-note b {
    color: var(--text);
    font-weight: 600;
}

/* --- flagship outcome ----------------------------------------------------
   The figures band is measured data in tabular mono. This is a specific thing
   that happened, so it reads as prose in a panel rather than borrowing the
   numeric register — an accent rule marks it as evidence, not marketing. */
.outcome {
    margin-top: 1.25rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    background: var(--panel);
    backdrop-filter: blur(14px);
}

.outcome-title {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-bottom: 0.6rem;
    text-wrap: balance;
}

.outcome-text {
    color: var(--muted);
    line-height: 1.7;
    max-width: 68ch;
    text-wrap: pretty;
}

@media (max-width: 560px) {
    .outcome {
        padding: 1.25rem 1.2rem;
    }
}

/* Outcome as scannable points rather than a paragraph — nobody reads prose
   wedged between a figures band and the next section. */
.outcome-points {
    list-style: none;
    display: grid;
    /* 9px between rows against a 24.8px line height read as cramped; the label
       also sat only 14px clear of the list, so it looked like a fourth row. */
    gap: 0.85rem;
    margin-top: 1.15rem;
}

.outcome-points li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--muted);
    line-height: 1.55;
    text-wrap: pretty;
}

.outcome-points li::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.58em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* --- footer social ------------------------------------------------------- */
.footer-social {
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.footer-social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.footer-social a:hover {
    color: var(--text);
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(56, 189, 248, 0.1);
}

.footer-social a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .footer-social a {
        transition: none;
    }
}

/* On a phone the panel is narrow and the points fill it. On desktop the same
   list left two-thirds of a 1216px panel empty, which is why the spacing read
   as wrong — the layout was the cause, not the gaps. Three columns fill the
   width and rhyme with the four-column figures band directly above. */
@media (min-width: 860px) {
    .outcome-points {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.75rem;
        margin-top: 1.25rem;
    }

    .outcome-points li {
        padding-left: 1.15rem;
    }
}

/* --- app card with the App Store preview ---------------------------------
   The section was a heading, a line and a badge — pure ask, no give. The
   preview is the reason to press the button, and sitting next to it is the
   only place on the page that is actually about the app. preload="none" plus
   a poster means it costs nothing until someone chooses to watch. */
.appcard--video {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding: 1.75rem;
}

.appcard-media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #0b1220;
    line-height: 0;
}

.appcard-video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    object-fit: cover;
}

.appcard-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.appcard--video .appcard-body .appstore-badge {
    margin-top: 0.7rem;
}

@media (max-width: 900px) {
    .appcard--video {
        grid-template-columns: 1fr;
        text-align: left;
        justify-items: stretch;
        padding: 1.25rem;
    }

    .appcard--video .appcard-body {
        align-items: flex-start;
    }

    .appcard--video .appcard-body p {
        margin-inline: 0;
    }
}

/* --- live demo (Rock & Soar configurator embed) ------------------------- */
/* live demo section: the Journey of Leaves configurator as a card, with a click-to-activate
   gate so the configurator cannot capture the page scroll until asked. Sky accent only. */
#live .lede strong{color:var(--text);font-weight:600}
.live-card{border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;background:var(--panel);backdrop-filter:blur(14px);box-shadow:var(--shadow-card)}
.live-frame{position:relative;width:100%;background:#0b1220;aspect-ratio:16/9;max-height:70vh;min-height:360px;overflow:hidden}
.live-frame iframe{position:absolute;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;min-height:0!important;max-height:none!important;display:block;pointer-events:none}
.live-card.is-active .live-frame iframe{pointer-events:auto}
.live-gate{position:absolute;inset:0;z-index:2;border:0;padding:0;background:transparent;cursor:pointer;font:inherit}
.live-gate:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
.live-card.is-active .live-gate{display:none}
.live-badge{position:absolute;left:1rem;top:1rem;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;pointer-events:none}
.live-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .8rem;border-radius:999px;border:1px solid rgba(56,189,248,.4);background:rgba(2,6,23,.72);backdrop-filter:blur(8px);font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(56,189,248,.6);animation:liveDot 2s ease-out infinite}
@keyframes liveDot{0%{box-shadow:0 0 0 0 rgba(56,189,248,.6)}70%{box-shadow:0 0 0 9px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}
.live-hint{display:inline-block;padding:.3rem .65rem;border-radius:.5rem;background:rgba(2,6,23,.6);backdrop-filter:blur(8px);font-size:.8rem;color:var(--text);letter-spacing:.01em;transition:opacity .25s ease}
.live-hint .on,.live-hint .tap{display:none}
.live-card.is-active .live-hint .idle{display:none}
.live-card.is-active .live-hint .on{display:inline}
.live-card.is-active .live-hint{color:var(--muted)}
@media(hover:none) and (pointer:coarse){.live-hint .click{display:none}.live-hint .tap{display:inline}.live-card.is-active .live-hint .idle .tap{display:none}}
.live-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.25rem;border-top:1px solid var(--border)}
.live-attrib{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live-attrib b{color:var(--text);font-weight:600}
.live-open{display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;font-weight:600;font-size:.9rem;color:var(--accent);white-space:nowrap}
.live-open .arrow{transition:transform .25s ease}.live-open:hover .arrow{transform:translate(2px,-2px)}
.live-open:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
.live-after{display:grid;grid-template-columns:1fr 1.15fr;gap:2.5rem;align-items:start;margin-top:2.25rem;padding-top:2rem;border-top:1px solid var(--border)}
.live-after h3{font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.live-after-lead p{margin-top:.8rem;color:var(--muted);line-height:1.65;max-width:46ch}
.live-after-lead p b{color:var(--text);font-weight:600}
.live-after-points{list-style:none;display:grid;gap:.9rem}
.live-after-points li{position:relative;padding-left:1.4rem;color:var(--muted);line-height:1.6;font-size:.95rem}
.live-after-points li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.live-after-points b{color:var(--text);font-weight:600}
@media(max-width:768px){
    .live-card{margin-inline:-1rem;border-radius:var(--radius-lg)}
    .live-frame{aspect-ratio:3/4;max-height:78vh;min-height:0}
    .live-bar{padding:.75rem 1.75rem}
    .live-open .label{display:none}
    .live-attrib .long{display:none}
    .live-after{grid-template-columns:1fr;gap:1.5rem;margin-top:1.75rem}
}
@media(prefers-reduced-motion:reduce){.live-dot{animation:none}.live-gate,.live-open .arrow{transition:none}}