:root {
    --bg: #121212;
    --bg-elevated: #111111;
    --bg-soft: #1a1a1a;
    --text: #f5f5f5;
    --text-muted: #9a9a9a;
    --text-dim: #666666;
    --border: rgba(255, 255, 255, 0.1);

    /* Neon / saturated palette */
    --neon-pink: #FF2D9E;
    --neon-purple: #7B2DFF;
    --neon-cyan: #00E0FF;
    --neon-orange: #FF6B35;
    --neon-lime: #C7FF00;
    --neon-yellow: #FFD600;

    /* Legacy aliases */
    --accent-purple: var(--neon-purple);
    --accent-pink: var(--neon-pink);
    --accent-cyan: var(--neon-cyan);
    --accent-orange: var(--neon-orange);

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --font-display: 'Syne', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Portfolio project list: alternating editorial rows inspired by the reference portfolio. */
@keyframes portfolioFallbackReveal {
    to { opacity: 1; visibility: visible; transform: none; filter: none; clip-path: inset(0); }
}

body.home-intro .loader {
    animation: portfolioLoaderFailsafe 4.2s ease forwards;
}

@keyframes portfolioLoaderFailsafe {
    0%, 76% { opacity: 1; visibility: visible; pointer-events: auto; }
    100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

body.home-intro:not(.intro-reveal) .nav,
body.home-intro:not(.intro-reveal) .hero__frame,
body.home-intro:not(.intro-reveal) .hero__eyebrow,
body.home-intro:not(.intro-reveal) .hero__name-line,
body.home-intro:not(.intro-reveal) .hero__name-vector,
body.home-intro:not(.intro-reveal) .hero__subtitle,
body.home-intro:not(.intro-reveal) .hero__actions,
body.home-intro:not(.intro-reveal) .hero__image,
body.home-intro:not(.intro-reveal) .hero__orbit,
body.home-intro:not(.intro-reveal) .hero__discipline,
body.home-intro:not(.intro-reveal) .hero__experience,
body.home-intro:not(.intro-reveal) .hero__scroll {
    animation: portfolioFallbackReveal .9s ease 2.5s forwards;
}

#featured .featured__grid,
#works .works__grid {
    display: flex;
    flex-direction: column;
    gap: clamp(5rem, 11vw, 12rem);
}

#featured .project-list-card,
#works .project-list-card {
    display: grid !important;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
    width: 100%;
    height: auto !important;
    min-height: 0;
    aspect-ratio: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
}

#featured .project-list-card:nth-child(even),
#works .project-list-card:nth-child(even) {
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
}

#featured .project-list-card .featured__media,
#works .project-list-card .work-card__media {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: auto !important;
    min-height: 0;
    aspect-ratio: auto !important;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--bg-soft);
}

#featured .project-list-card .project-list-card__text,
#works .project-list-card .project-list-card__text {
    position: static !important;
    order: 1;
    align-self: end;
    padding: 0;
    background: none !important;
    transform: none !important;
    opacity: 1 !important;
}

#featured .project-list-card:nth-child(even) .featured__media,
#works .project-list-card:nth-child(even) .work-card__media {
    order: 1;
}

#featured .project-list-card:nth-child(even) .project-list-card__text,
#works .project-list-card:nth-child(even) .project-list-card__text {
    order: 2;
}

#featured .project-list-card img,
#works .project-list-card img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

#featured .project-list-card .featured__name,
#works .project-list-card .work-card__title {
    max-width: 18ch;
    margin-top: 1rem;
    font-size: clamp(1.8rem, 4vw, 4.6rem);
    line-height: 0.98;
}

#featured .project-list-card .featured__type,
#works .project-list-card .work-card__meta {
    display: block;
    margin-top: 1.25rem;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    #featured .project-list-card,
    #featured .project-list-card:nth-child(even),
    #works .project-list-card,
    #works .project-list-card:nth-child(even) {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    #featured .project-list-card .featured__media,
    #works .project-list-card .work-card__media,
    #featured .project-list-card:nth-child(even) .featured__media,
    #works .project-list-card:nth-child(even) .work-card__media {
        order: 1;
    }

    #featured .project-list-card .project-list-card__text,
    #works .project-list-card .project-list-card__text,
    #featured .project-list-card:nth-child(even) .project-list-card__text,
    #works .project-list-card:nth-child(even) .project-list-card__text {
        order: 2;
    }
}

/* Compact two-column portfolio rhythm: large cards span the full row. */
#featured .featured__grid,
#works .works__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 5vw, 6rem) clamp(1.25rem, 3vw, 3.5rem);
}

#featured .project-list-card,
#works .project-list-card,
#featured .project-list-card:nth-child(even),
#works .project-list-card:nth-child(even) {
    display: flex !important;
    flex-direction: column;
    gap: .8rem;
    align-items: stretch;
    grid-column: auto !important;
    width: 100%;
}

#featured .featured__item--large,
#works .work-card--xl {
    grid-column: span 2 !important;
}

#featured .project-list-card .featured__media,
#works .project-list-card .work-card__media,
#featured .project-list-card:nth-child(even) .featured__media,
#works .project-list-card:nth-child(even) .work-card__media {
    order: 1;
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
}

#featured .project-list-card .project-list-card__text,
#works .project-list-card .project-list-card__text,
#featured .project-list-card:nth-child(even) .project-list-card__text,
#works .project-list-card:nth-child(even) .project-list-card__text {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem .75rem;
}

#featured .project-list-card .featured__tag,
#featured .project-list-card .featured__year {
    font-size: .62rem;
    margin: 0;
}

#featured .project-list-card .featured__name,
#works .project-list-card .work-card__title {
    width: 100%;
    max-width: none;
    margin: .1rem 0 0;
    font-size: clamp(1rem, 1.7vw, 1.55rem);
    line-height: 1.12;
}

#featured .project-list-card .featured__year,
#works .project-list-card .work-card__year {
    display: block;
    margin: 0 0 .28rem;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .05em;
}

#featured .project-list-card .featured__type,
#works .project-list-card .work-card__meta {
    width: 100%;
    margin: .1rem 0 0;
    font-size: .72rem;
    line-height: 1.4;
}

@media (max-width: 700px) {
    #featured .featured__grid,
    #works .works__grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    #featured .featured__item--large,
    #works .work-card--xl {
        grid-column: span 1 !important;
    }
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none;
}

body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 998;
    pointer-events: none;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    animation: grainScroll 12s linear infinite;
}

@keyframes grainScroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-256px, -256px); }
}

@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none;
    }
}

@media (pointer: coarse) {
    body {
        cursor: auto;
    }
    .cursor {
        display: none !important;
    }
}

::selection {
    background: var(--neon-pink);
    color: var(--bg);
}

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

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

button {
    font-family: inherit;
    cursor: pointer;
}

/* ============================================
   UTILITIES
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--scale {
    transform: scale(0.96);
}

.reveal--scale.is-visible {
    transform: scale(1);
}

.reveal--left {
    transform: translateX(-40px);
}

.reveal--left.is-visible {
    transform: translateX(0);
}

.reveal--right {
    transform: translateX(40px);
}

.reveal--right.is-visible {
    transform: translateX(0);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.8rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s, background 0.3s, border-color 0.3s;
    border: 1px solid transparent;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn--primary {
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 12px 32px rgba(255, 255, 255, 0.15);
}

.btn--primary:hover {
    background: #fff;
    box-shadow: 0 18px 40px rgba(255, 255, 255, 0.25);
}

.btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text);
    backdrop-filter: blur(10px);
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

/* ============================================
   LOADER
   ============================================ */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    overflow: hidden;
    transition: opacity 0.9s var(--ease-out-expo), visibility 0.9s;
}

.loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

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

.loader__gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(123, 45, 255, 0.25), transparent 45%),
        radial-gradient(circle at 80% 30%, rgba(255, 45, 158, 0.22), transparent 40%),
        radial-gradient(circle at 40% 80%, rgba(0, 224, 255, 0.2), transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(255, 107, 53, 0.15), transparent 40%);
    animation: loaderGradient 5s ease-in-out infinite alternate;
}

@keyframes loaderGradient {
    0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    100% { transform: scale(1.12) rotate(3deg); opacity: 1; }
}

.loader__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.65;
    animation: loaderBlob 8s ease-in-out infinite;
}

.loader__blob--1 {
    width: 300px;
    height: 300px;
    background: var(--neon-purple);
    top: 5%;
    left: 5%;
}

.loader__blob--2 {
    width: 240px;
    height: 240px;
    background: var(--neon-pink);
    top: 50%;
    right: 2%;
    animation-delay: -2.5s;
}

.loader__blob--3 {
    width: 200px;
    height: 200px;
    background: var(--neon-cyan);
    bottom: 10%;
    left: 25%;
    animation-delay: -5s;
}

.loader__blob--4 {
    width: 160px;
    height: 160px;
    background: var(--neon-orange);
    top: 25%;
    left: 55%;
    border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
    animation-delay: -1.5s;
}

@keyframes loaderBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -35px) scale(1.12); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

.loader__noise {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.loader__flashes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.loader__flash {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1);
    clip-path: inset(50% 50% 50% 50%);
}

.loader__flash:nth-child(1) { animation: flash 0.35s var(--ease-out-expo) 0.8s forwards; }
.loader__flash:nth-child(2) { animation: flash 0.35s var(--ease-out-expo) 1.1s forwards; }
.loader__flash:nth-child(3) { animation: flash 0.35s var(--ease-out-expo) 1.4s forwards; }
.loader__flash:nth-child(4) { animation: flash 0.35s var(--ease-out-expo) 1.7s forwards; }

@keyframes flash {
    0% { opacity: 0; transform: scale(1.1); clip-path: inset(50% 50% 50% 50%); }
    50% { opacity: 0.4; transform: scale(1); clip-path: inset(0 0 0 0); }
    100% { opacity: 0; transform: scale(1.05); clip-path: inset(50% 50% 50% 50%); }
}

.loader__content {
    position: relative;
    text-align: center;
    z-index: 2;
}

.loader__mark {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    position: relative;
    animation: loaderMarkPulse 1.8s ease-in-out infinite;
}

@keyframes loaderMarkPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.loader__mark svg {
    width: 100%;
    height: 100%;
}

.loader__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    overflow: hidden;
}

.loader__word {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 14vw, 8rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.9;
    transform: translateY(115%);
    animation: loaderReveal 0.9s var(--ease-out-expo) forwards;
}

.loader__word:first-child {
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.loader__word:nth-child(2) {
    animation-delay: 0.15s;
    color: transparent;
    -webkit-text-stroke: 2px var(--text);
    position: relative;
}

.loader__word:nth-child(2)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-lime), var(--neon-orange));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    animation: loaderFill 0.8s var(--ease-out-expo) 0.9s forwards;
}

@keyframes loaderFill {
    to { opacity: 0.45; }
}

@keyframes loaderReveal {
    to { transform: translateY(0); }
}

.loader__tagline {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 1.25rem;
    opacity: 0;
    transform: translateY(15px);
    animation: loaderTagline 0.6s var(--ease-out-expo) 0.6s forwards;
}

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

/* ============================================
   PAGE TRANSITION
   ============================================ */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    visibility: hidden;
}

.page-transition.is-active {
    visibility: visible;
    pointer-events: auto;
}

.page-transition__stripe {
    flex: 1;
    background: var(--bg);
    transform: scaleY(0);
    transform-origin: top;
}

.page-transition.is-active .page-transition__stripe {
    animation: stripeReveal 0.7s var(--ease-in-out-expo) forwards;
}

.page-transition.is-exit .page-transition__stripe {
    transform: scaleY(1);
    transform-origin: bottom;
    animation: stripeHide 0.7s var(--ease-in-out-expo) forwards;
}

.page-transition__stripe:nth-child(1) { animation-delay: 0s; }
.page-transition__stripe:nth-child(2) { animation-delay: 0.08s; }
.page-transition__stripe:nth-child(3) { animation-delay: 0.16s; }

@keyframes stripeReveal {
    to { transform: scaleY(1); }
}

@keyframes stripeHide {
    to { transform: scaleY(0); }
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    mix-blend-mode: difference;
}

.cursor__dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.15s var(--ease-out-expo);
}

.cursor__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease-out-expo), height 0.3s var(--ease-out-expo), border-color 0.3s, background 0.3s;
}

.cursor__label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    transition: transform 0.3s var(--ease-out-expo);
}

.cursor.is-hover .cursor__ring {
    width: 64px;
    height: 64px;
    border-color: rgba(255, 255, 255, 0.8);
}

.cursor.is-view .cursor__ring {
    width: 84px;
    height: 84px;
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
}

.cursor.is-view .cursor__label {
    transform: translate(-50%, -50%) scale(1);
}

.cursor.is-link .cursor__dot {
    transform: translate(-50%, -50%) scale(0.5);
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 3vw;
    transition: background 0.4s, padding 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
}

.nav.is-scrolled {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1rem 3vw;
}

.nav.is-hidden {
    transform: translateY(-100%);
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
}

.nav__logo-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 0.8rem;
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
}

.nav__logo:hover .nav__logo-mark {
    border-color: var(--neon-pink);
    background: rgba(255, 45, 158, 0.12);
    transform: rotate(15deg);
}

.nav__logo-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s var(--ease-out-expo);
}

.nav__logo:hover .nav__logo-img {
    transform: rotate(15deg) scale(1.05);
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav__link {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    position: relative;
    padding: 0.25rem 0;
}

.nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--neon-pink);
    transition: width 0.3s var(--ease-out-expo);
}

.nav__link:hover::after {
    width: 100%;
}

.nav__cta {
    padding: 0.65rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.nav__cta:hover {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.nav__toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    transition: transform 0.3s, opacity 0.3s;
}

/* Mobile Menu */
.menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
    pointer-events: none;
}

.menu.is-open {
    visibility: visible;
    pointer-events: auto;
}

.menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.5s;
}

.menu.is-open .menu__backdrop {
    opacity: 1;
}

.menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(100%, 420px);
    height: 100%;
    background: var(--bg-elevated);
    padding: 8rem 2.5rem 2.5rem;
    transform: translateX(100%);
    transition: transform 0.6s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu.is-open .menu__panel {
    transform: translateX(0);
}

.menu__links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.menu__link {
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.menu__link::before {
    content: attr(data-index);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
    font-family: var(--font-body);
}

.menu__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink));
    transition: width 0.4s var(--ease-out-expo);
}

.menu__link:hover::after {
    width: 100%;
}

.menu__footer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.menu__socials {
    display: flex;
    gap: 1.5rem;
}

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

/* ============================================
   EXPERIENCE PANEL
   ============================================ */
.experience-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(100%, 560px);
    height: 100%;
    background: var(--bg-elevated);
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.7s var(--ease-out-expo);
    overflow-y: auto;
    border-left: 1px solid var(--border);
}

.experience-panel.is-open {
    transform: translateX(0);
}

.experience-panel__close {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 2;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
}

.experience-panel__close:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--neon-pink);
    transform: rotate(90deg);
}

.experience-panel__close span {
    position: absolute;
    width: 18px;
    height: 2px;
    background: var(--text);
}

.experience-panel__close span:first-child {
    transform: rotate(45deg);
}

.experience-panel__close span:last-child {
    transform: rotate(-45deg);
}

.experience-panel__inner {
    padding: 5rem 2.5rem 4rem;
}

.experience-panel__subtitle {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--neon-pink);
    margin-bottom: 0.75rem;
}

.experience-panel__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    margin-bottom: 3rem;
    line-height: 1;
}

.experience-list {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    position: relative;
}

.experience-list::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, var(--neon-purple), var(--neon-pink), var(--neon-cyan));
    opacity: 0.35;
}

.experience-item {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 1.5rem;
    padding-left: 2rem;
    position: relative;
}

.experience-item::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0.35rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--neon-pink);
    box-shadow: 0 0 20px rgba(255, 45, 158, 0.5);
}

.experience-item__num {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

.experience-item__year {
    display: block;
    font-size: 0.75rem;
    color: var(--neon-cyan);
    margin-bottom: 0.25rem;
    letter-spacing: 0.05em;
}

.experience-item__role {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.experience-item__company {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.experience-item__desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

/* ============================================
   HERO — Editorial collage
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8rem 6vw;
    background: var(--bg);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero__gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 25% 35%, rgba(123, 45, 255, 0.22), transparent 55%),
        radial-gradient(ellipse 70% 55% at 85% 55%, rgba(255, 45, 158, 0.18), transparent 50%),
        radial-gradient(ellipse 60% 50% at 55% 15%, rgba(0, 224, 255, 0.14), transparent 45%),
        radial-gradient(ellipse 50% 45% at 15% 85%, rgba(255, 107, 53, 0.12), transparent 45%);
    transition: transform 0.3s ease-out;
}

.hero__blobs {
    position: absolute;
    inset: -10%;
    pointer-events: none;
}

.hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: blobFloat 10s ease-in-out infinite;
}

.hero__blob--1 {
    width: 450px;
    height: 450px;
    background: var(--neon-purple);
    top: 0%;
    left: 5%;
    animation-delay: -2s;
}

.hero__blob--2 {
    width: 380px;
    height: 380px;
    background: var(--neon-pink);
    top: 45%;
    right: 0%;
    animation-delay: -4s;
}

.hero__blob--3 {
    width: 320px;
    height: 320px;
    background: var(--neon-cyan);
    bottom: 5%;
    left: 20%;
    animation-delay: -1s;
}

.hero__blob--4 {
    width: 280px;
    height: 280px;
    background: var(--neon-orange);
    top: 10%;
    left: 55%;
    animation-delay: -5s;
}

.hero__blob--5 {
    width: 240px;
    height: 240px;
    background: var(--neon-lime);
    bottom: 20%;
    right: 18%;
    opacity: 0.35;
    animation-delay: -3s;
}

@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(35px, -35px) scale(1.08); }
    66% { transform: translate(-25px, 25px) scale(0.95); }
}

.hero__noise {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.hero__collage {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    min-height: 75vh;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
}

.hero__text {
    position: relative;
    z-index: 3;
    max-width: 900px;
    text-align: center;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.1rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    margin-bottom: 1.75rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s var(--ease-out-expo) 2.4s forwards;
}

.hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-pink);
    box-shadow: 0 0 14px var(--neon-pink);
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

.hero__name {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 16vw, 13rem);
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.hero__name-line {
    display: block;
    opacity: 0;
    transform: translateY(60px);
}

.hero__name-line--fill {
    background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink), var(--neon-orange), var(--neon-purple));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: nameReveal 1s var(--ease-out-expo) 2.5s forwards, nameGradientFlow 6s linear 3.5s infinite;
}

.hero__name-line--outline {
    color: transparent;
    -webkit-text-stroke: 2.5px rgba(245, 245, 245, 0.95);
    text-shadow: 0 0 50px rgba(123, 45, 255, 0.3);
    animation: nameReveal 1s var(--ease-out-expo) 2.65s forwards;
}

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

@keyframes nameGradientFlow {
    to { background-position: 200% center; }
}

.hero__subtitle {
    max-width: 520px;
    margin: 0 auto 2rem;
    font-size: clamp(0.95rem, 1.7vw, 1.25rem);
    line-height: 1.7;
    color: rgba(245, 245, 245, 0.7);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s var(--ease-out-expo) 2.85s forwards;
}

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

.hero__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s var(--ease-out-expo) 3s forwards;
}

.hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.8rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s, background 0.3s, border-color 0.3s;
}

.hero__btn:hover {
    transform: translateY(-3px);
}

.hero__btn--primary {
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 12px 32px rgba(255, 255, 255, 0.15);
}

.hero__btn--primary:hover {
    background: #fff;
    box-shadow: 0 18px 40px rgba(255, 255, 255, 0.25);
}

.hero__btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text);
    backdrop-filter: blur(10px);
}

.hero__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

.hero__image {
    position: absolute;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: scale(0.85) rotate(var(--rotate, 0deg));
    animation: imageReveal 1s var(--ease-out-expo) forwards;
    will-change: transform;
}

.hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out-expo);
}

.hero__image:hover img {
    transform: scale(1.08);
}

.hero__image--1 {
    width: clamp(140px, 16vw, 240px);
    height: clamp(180px, 20vw, 300px);
    top: 10%;
    left: 2%;
    --rotate: -8deg;
    animation-delay: 2.6s;
}

.hero__image--2 {
    width: clamp(120px, 14vw, 200px);
    height: clamp(120px, 14vw, 200px);
    top: 15%;
    right: 4%;
    --rotate: 10deg;
    animation-delay: 2.75s;
    border-radius: 50%;
}

.hero__image--3 {
    width: clamp(110px, 12vw, 180px);
    height: clamp(150px, 16vw, 240px);
    bottom: 16%;
    left: 6%;
    --rotate: 6deg;
    animation-delay: 2.9s;
}

.hero__image--4 {
    width: clamp(130px, 15vw, 220px);
    height: clamp(100px, 12vw, 160px);
    bottom: 18%;
    right: 3%;
    --rotate: -5deg;
    animation-delay: 3.05s;
}

@keyframes imageReveal {
    to {
        opacity: 1;
        transform: scale(1) rotate(var(--rotate, 0deg));
    }
}

.hero__orbit {
    position: absolute;
    right: 6vw;
    bottom: 6vh;
    width: 170px;
    height: 170px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 0.8s var(--ease-out-expo) 3.2s forwards;
}

.hero__orbit svg {
    width: 100%;
    height: 100%;
    animation: orbitRotate 22s linear infinite;
}

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

@keyframes fadeIn {
    to { opacity: 1; }
}

.hero__experience {
    position: absolute;
    bottom: 2.5rem;
    left: 3vw;
    z-index: 5;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-out-expo) 3.1s forwards;
}

.experience-trigger {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 0 1.5rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    padding: 1.1rem 1.5rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
}

.experience-trigger:hover {
    border-color: rgba(255, 45, 158, 0.6);
    background: rgba(255, 255, 255, 0.11);
    transform: translateY(-3px);
}

.experience-trigger__label {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(245, 245, 245, 0.6);
}

.experience-trigger__value {
    grid-column: 1;
    grid-row: 2;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.experience-trigger__caption {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.8rem;
    color: rgba(245, 245, 245, 0.6);
    align-self: end;
    padding-bottom: 0.25rem;
}

.experience-trigger__arrow {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    transition: transform 0.3s var(--ease-out-expo);
}

.experience-trigger:hover .experience-trigger__arrow {
    transform: translateX(4px);
}

.hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    right: 3vw;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    animation: fadeIn 0.8s var(--ease-out-expo) 3.3s forwards;
}

.hero__scroll-text {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(245, 245, 245, 0.5);
    writing-mode: vertical-rl;
}

.hero__scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, var(--text), transparent);
    animation: scrollLine 1.5s ease-in-out infinite;
}

@keyframes scrollLine {
    0%, 100% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================
   SECTIONS COMMON
   ============================================ */
section {
    position: relative;
    padding: 8rem 6vw;
}

.section-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 4rem;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

.section-header--sticky {
    position: sticky;
    top: 80px;
    z-index: 10;
    background: linear-gradient(180deg, var(--bg-elevated) 65%, transparent);
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.section-header__num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--neon-pink);
    padding-top: 0.5rem;
}

.section-header__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, 4.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 1rem;
}

.section-header__desc {
    color: var(--text-muted);
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    max-width: 420px;
}

.section-header--light .section-header__title {
    color: var(--bg);
}

.section-header--light .section-header__desc {
    color: rgba(10, 10, 10, 0.6);
}

.section-header--light .section-header__num {
    color: var(--neon-purple);
}

/* ============================================
   FEATURED PROJECTS
   ============================================ */
.featured {
    background: var(--bg);
}

.featured__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
}

.featured__item {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    display: block;
    aspect-ratio: 4/3;
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s;
}

.featured__item:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}

.featured__item--large {
    grid-column: span 8;
    aspect-ratio: 16/10;
}

.featured__item--tall {
    grid-column: span 4;
    grid-row: span 2;
    aspect-ratio: auto;
}

.featured__item--wide {
    grid-column: span 7;
    aspect-ratio: 16/9;
}

.featured__item--medium {
    grid-column: span 5;
    aspect-ratio: 4/3;
}

.featured__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.featured__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ease-out-expo), filter 0.4s;
}

.featured__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s var(--ease-out-expo), filter 0.4s;
}

.featured__item:hover .featured__media img {
    transform: scale(1.08);
    filter: brightness(0.85) saturate(1.15);
}

.featured__item:hover .featured__media video {
    transform: scale(1.08);
    filter: brightness(0.85) saturate(1.15);
}

.featured__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.8) 100%);
    opacity: 0.5;
    transition: opacity 0.4s;
}

.featured__item:hover .featured__overlay {
    opacity: 0.85;
}

.featured__meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    transform: translateY(8px);
    transition: transform 0.4s var(--ease-out-expo);
}

.featured__item:hover .featured__meta {
    transform: translateY(0);
}

.featured__tag {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.8rem;
    background: var(--neon-pink);
    color: var(--bg);
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.75rem;
}

.featured__year {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--neon-cyan);
    margin-bottom: 0.75rem;
}

.featured__name {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.featured__type {
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s var(--ease-out-expo);
}

.featured__item:hover .featured__type {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   WORKS ARCHIVE
   ============================================ */
.works {
    background: var(--bg-elevated);
    min-height: 100vh;
}

.works__controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    max-width: 1600px;
    margin: 0 auto 2.5rem;
}

.works__mode {
    display: flex;
    gap: 0.5rem;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 100px;
}

.works__mode-btn {
    padding: 0.5rem 1.1rem;
    background: transparent;
    border: none;
    border-radius: 100px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
}

.works__mode-btn:hover {
    color: var(--text);
}

.works__mode-btn.is-active {
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
}

.works__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.works__count {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    align-self: center;
}

.works__filter-btn {
    padding: 0.55rem 1.1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s var(--ease-out-expo);
}

.works__filter-btn:hover {
    border-color: var(--neon-pink);
    color: var(--neon-pink);
    transform: translateY(-2px);
}

.works__filter-btn.is-active {
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
    color: var(--bg);
    border-color: transparent;
    font-weight: 600;
}

.works__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 180px;
    gap: 1.25rem;
    max-width: 1600px;
    margin: 0 auto;
}

.work-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: var(--bg-soft);
    display: block;
    transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s, opacity 0.4s;
}

.work-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.work-card--xl {
    grid-column: span 2;
    grid-row: span 2;
}

.work-card--wide {
    grid-column: span 2;
    grid-row: span 1;
}

.work-card--tall {
    grid-column: span 1;
    grid-row: span 2;
}

.work-card--square {
    grid-column: span 1;
    grid-row: span 1;
}

.work-card--small {
    grid-column: span 1;
    grid-row: span 1;
}

.work-card--poster {
    grid-column: span 1;
    grid-row: span 2;
}

.work-card__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.work-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo), filter 0.4s;
}

.work-card:hover .work-card__media img {
    transform: scale(1.1);
    filter: brightness(0.88) saturate(1.1);
}

.work-card__info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.4s, transform 0.4s var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
    .work-card__info {
        transform: translateY(12px);
        opacity: 0;
    }

    .work-card:hover .work-card__info {
        opacity: 1;
        transform: translateY(0);
    }
}

.work-card__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.work-card__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.work-card.is-hidden {
    display: none;
}

.work-card.is-fading {
    animation: cardFade 0.4s var(--ease-out-expo) forwards;
}

@keyframes cardFade {
    to { opacity: 0; transform: scale(0.96); }
}

.works__footer {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

/* ============================================
   ABOUT
   ============================================ */
.about {
    background: var(--bg);
}

.about__layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

.about__visual {
    position: relative;
}

.about__photo {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/4;
}

.about__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(25%) contrast(1.05);
    transition: filter 0.6s, transform 0.8s var(--ease-out-expo);
}

.about__photo:hover img {
    filter: grayscale(0%) contrast(1.05);
    transform: scale(1.03);
}

.about__badge {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.about__badge-num {
    display: block;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.about__badge-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.about__content {
    padding-top: 2rem;
}

.about__intro {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.about__lead {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 1.5rem;
}

.about__intro p:not(.about__lead) {
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1.85;
    margin-top: 0.75rem;
}

.about__intro-kicker {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.about__intro-sign {
    width: clamp(120px, 18vw, 180px);
    height: auto;
    color: var(--text);
    opacity: 0.85;
}

.about__intro-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5.2vw, 4.2rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.01em;
    margin: 0;
}

.about__intro-title span {
    display: block;
}

.about__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stat__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat__label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.about__career {
    margin-bottom: 2.5rem;
}

.about__career-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.career-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.career-item {
    display: grid;
    grid-template-columns: 110px 1fr 1fr;
    gap: 1rem;
    align-items: baseline;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
}

.career-item__year {
    color: var(--neon-cyan);
    font-weight: 500;
    font-size: 0.85rem;
}

.career-item__role {
    font-weight: 600;
}

.career-item__company {
    color: var(--text-muted);
    text-align: right;
}

/* ============================================
   CAPABILITIES
   ============================================ */
.capabilities {
    background: #f5f5f5;
    color: var(--bg);
    overflow: hidden;
}

.capabilities__bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 90% 10%, rgba(123, 45, 255, 0.1), transparent 40%),
        radial-gradient(circle at 10% 90%, rgba(255, 45, 158, 0.1), transparent 40%);
    pointer-events: none;
}

.capabilities__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-left: 1px solid rgba(0,0,0,0.1);
}

.capability {
    padding: 3rem;
    border-right: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    transition: background 0.4s, transform 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.capability::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(123, 45, 255, 0.08), rgba(255, 45, 158, 0.08));
    opacity: 0;
    transition: opacity 0.4s;
}

.capability:hover {
    transform: translateY(-4px);
}

.capability:hover::before {
    opacity: 1;
}

.capability__num {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--neon-purple);
    margin-bottom: 1rem;
    position: relative;
}

.capability__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
    transition: color 0.3s;
    position: relative;
}

.capability:hover .capability__title {
    color: var(--neon-purple);
}

.capability__desc {
    color: rgba(10, 10, 10, 0.6);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 400px;
    position: relative;
}

/* Profile skill matrix */
.skills-panel {
    position: relative;
    isolation: isolate;
    max-width: 1400px;
    margin: clamp(4rem, 8vw, 8rem) auto 0;
    padding: clamp(2rem, 4vw, 4.25rem);
    overflow: hidden;
    border: 1px solid rgba(10, 10, 10, 0.12);
    border-radius: clamp(1.4rem, 2.4vw, 2.4rem);
    background: rgba(255, 255, 255, 0.52);
    box-shadow: 0 2rem 6rem rgba(68, 35, 105, 0.09);
    backdrop-filter: blur(20px);
}

.skills-panel__glow {
    position: absolute;
    z-index: -1;
    width: 34rem;
    height: 34rem;
    right: -14rem;
    top: -18rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123, 45, 255, 0.18), transparent 68%);
    pointer-events: none;
}

.skills-panel__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
    align-items: end;
    gap: 2rem;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.skills-panel__eyebrow {
    display: block;
    margin-bottom: .85rem;
    color: var(--neon-purple);
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
}

.skills-panel__title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5vw, 5.4rem);
    font-weight: 700;
    line-height: .92;
    letter-spacing: -.045em;
}

.skills-panel__intro {
    max-width: 34rem;
    color: rgba(10, 10, 10, .58);
    font-size: clamp(.9rem, 1.15vw, 1.05rem);
    line-height: 1.75;
}

.skills-panel__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2.1rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem);
}

.skill-bar {
    min-width: 0;
    opacity: .45;
    transform: translateY(18px);
    transition: opacity .65s ease var(--delay), transform .65s var(--ease-out-expo) var(--delay);
}

.skills-panel.is-active .skill-bar {
    opacity: 1;
    transform: translateY(0);
}

.skill-bar__top {
    display: grid;
    grid-template-columns: 2.55rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.skill-bar__icon {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border: 1px solid color-mix(in srgb, var(--skill-color), transparent 48%);
    border-radius: .7rem;
    color: var(--skill-color);
    background: color-mix(in srgb, var(--skill-color), transparent 90%);
    font-family: var(--font-display);
    font-size: .8rem;
    font-weight: 800;
}

.skill-bar__name {
    overflow: hidden;
    color: rgba(10, 10, 10, .78);
    font-family: var(--font-display);
    font-size: clamp(.9rem, 1.3vw, 1.08rem);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-bar__top strong {
    color: rgba(10, 10, 10, .42);
    font-family: var(--font-display);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.skill-bar__track {
    position: relative;
    height: .58rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(10, 10, 10, .1);
}

.skill-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--level);
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--skill-color), #111 12%), var(--skill-color));
    box-shadow: 0 0 1.5rem color-mix(in srgb, var(--skill-color), transparent 48%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.15s var(--ease-out-expo) calc(var(--delay) + 120ms);
}

.skill-bar__fill::after {
    content: '';
    position: absolute;
    top: 50%;
    right: .18rem;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 .8rem #fff;
    transform: translateY(-50%);
}

.skills-panel.is-active .skill-bar__fill {
    transform: scaleX(1);
}

@media (max-width: 960px) {
    .skills-panel__head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .skills-panel__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 580px) {
    .skills-panel {
        padding: 1.5rem;
    }

    .skills-panel__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skill-bar,
    .skill-bar__fill {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================
   CONTACT
   ============================================ */
.contact {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6rem 6vw;
    overflow: hidden;
}

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

.contact__gradient {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 50% 50%, rgba(123, 45, 255, 0.25), transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(255, 45, 158, 0.18), transparent 40%);
    filter: blur(60px);
}

.contact__noise {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.contact__content {
    position: relative;
    z-index: 1;
}

.contact__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.contact__title {
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 13vw, 11rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.05em;
    margin-bottom: 2.5rem;
}

.contact__title span {
    display: block;
}

.contact__title--outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--text);
}

.contact__email {
    display: flex;
    align-items: center;
    gap: .7em;
    width: fit-content;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.4vw, 2.55rem);
    font-weight: 600;
    margin: 0 auto 1rem;
    position: relative;
}

.contact__email::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease-out-expo);
}

.contact__email:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.contact__phone {
    display: flex;
    align-items: center;
    gap: .7em;
    width: fit-content;
    margin: 0 auto 3rem;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3.4vw, 2.55rem);
    font-weight: 600;
    letter-spacing: 0;
    transition: color .3s ease;
}

.contact__phone:hover {
    color: #fff;
}

.contact__detail-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1em;
    height: 1em;
    color: rgba(255, 255, 255, .72);
}

.contact__detail-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.contact__socials {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.contact__socials a {
    font-size: 0.85rem;
    color: var(--text-muted);
    position: relative;
    transition: color 0.3s;
}

.contact__socials a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--text);
    transition: width 0.3s var(--ease-out-expo);
}

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

.contact__socials a:hover::after {
    width: 100%;
}

.contact__qr {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact__qr img {
    display: block;
    width: clamp(13rem, 18vw, 17rem);
    height: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.footer {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 6vw;
    font-size: 0.75rem;
    color: var(--text-dim);
    z-index: 1;
}

/* ============================================
   PROJECT DETAIL PAGES
   ============================================ */
.project-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10rem 6vw 4rem;
    position: relative;
    overflow: hidden;
}

.project-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.project-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4) saturate(1.15);
}

.project-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.95) 100%);
}

.project-hero__content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.project-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.project-hero__meta span strong {
    color: var(--text);
    display: block;
    font-size: 0.9rem;
    margin-top: 0.25rem;
    text-transform: none;
    letter-spacing: 0;
}

.project-hero__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
}

.project-hero__desc {
    max-width: 640px;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.project-hero__back {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2rem;
    padding: 0.75rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease-out-expo);
}

.project-hero__back:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateX(-4px);
}

.project-hero__back svg {
    transition: transform 0.3s var(--ease-out-expo);
}

.project-hero__back:hover svg {
    transform: translateX(-3px);
}

.project-gallery {
    padding: 4rem 6vw;
    background: var(--bg);
}

.project-gallery__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
}

.project-gallery__item {
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-soft);
}

.project-gallery__item--full {
    grid-column: span 12;
    aspect-ratio: 21/9;
}

.project-gallery__item--half {
    grid-column: span 6;
    aspect-ratio: 16/10;
}

.project-gallery__item--third {
    grid-column: span 4;
    aspect-ratio: 4/5;
}

.project-gallery__item--two-thirds {
    grid-column: span 8;
    aspect-ratio: 16/9;
}

.project-gallery__item--quarter {
    grid-column: span 3;
    aspect-ratio: 3/4;
}

.project-gallery__item img,
.project-gallery__item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s var(--ease-out-expo);
}

.project-gallery__item:hover img,
.project-gallery__item:hover video {
    transform: scale(1.04);
}

.project-next {
    padding: 6rem 6vw;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    display: block;
}

.project-next__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.project-next__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.project-next__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 1.5rem;
}

.project-next__media {
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.project-next__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

.project-next:hover .project-next__media img {
    transform: scale(1.06);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1400px) {
    .hero__image--1 {
        width: clamp(100px, 12vw, 160px);
        height: clamp(130px, 15vw, 200px);
        left: 1%;
    }

    .hero__image--2 {
        width: clamp(90px, 10vw, 140px);
        height: clamp(90px, 10vw, 140px);
        right: 2%;
    }

    .hero__image--3 {
        width: clamp(85px, 9vw, 130px);
        height: clamp(115px, 12vw, 170px);
        left: 3%;
    }

    .hero__image--4 {
        width: clamp(95px, 11vw, 150px);
        height: clamp(75px, 9vw, 120px);
        right: 1%;
    }

    .hero__text {
        max-width: 760px;
    }
}

@media (max-width: 1200px) {
    .works__grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 160px;
    }

    .work-card--xl {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 992px) {
    .nav__links,
    .nav__cta {
        display: none;
    }

    .nav__toggle {
        display: flex;
    }

    .hero__image {
        display: none;
    }

    .hero__orbit {
        width: 120px;
        height: 120px;
        right: 4vw;
        bottom: 10vh;
    }

    .hero__experience {
        left: 50%;
        transform: translateX(-50%);
        bottom: 6rem;
    }

    .hero__scroll {
        display: none;
    }

    .featured__item--large { grid-column: span 12; }
    .featured__item--tall { grid-column: span 6; grid-row: span 1; aspect-ratio: 4/3; }
    .featured__item--wide { grid-column: span 12; }
    .featured__item--medium { grid-column: span 6; }

    .works__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
    }

    .work-card--xl,
    .work-card--wide,
    .work-card--tall,
    .work-card--square,
    .work-card--small,
    .work-card--poster {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: auto;
    }

    .work-card--xl,
    .work-card--wide {
        grid-column: span 2;
    }

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

    .about__visual {
        max-width: 400px;
        margin: 0 auto;
    }

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

    .project-next__inner {
        grid-template-columns: 1fr;
    }

    .project-gallery__item--full { aspect-ratio: 16/10; }
    .project-gallery__item--half { grid-column: span 12; aspect-ratio: 16/10; }
    .project-gallery__item--third { grid-column: span 6; }
    .project-gallery__item--two-thirds { grid-column: span 12; }
    .project-gallery__item--quarter { grid-column: span 6; }
}

@media (max-width: 640px) {
    section {
        padding: 5rem 5vw;
    }

    .hero {
        padding: 7rem 5vw 10rem;
        align-items: flex-start;
        padding-top: 10rem;
    }

    .hero__name {
        font-size: clamp(3.5rem, 17vw, 6rem);
    }

    .hero__name-line--outline {
        -webkit-text-stroke-width: 1.5px;
    }

    .hero__subtitle {
        font-size: 1rem;
    }

    .hero__actions {
        width: 100%;
    }

    .hero__btn {
        flex: 1;
        justify-content: center;
        padding: 0.9rem 1.2rem;
    }

    .hero__experience {
        width: 90%;
        max-width: 320px;
    }

    .experience-trigger__caption {
        display: none;
    }

    .section-header {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .section-header--sticky {
        top: 60px;
    }

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

    .featured__item,
    .featured__item--large,
    .featured__item--tall,
    .featured__item--wide,
    .featured__item--medium {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 4/3;
    }

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

    .works__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .work-card,
    .work-card--xl,
    .work-card--wide,
    .work-card--tall,
    .work-card--square,
    .work-card--small,
    .work-card--poster {
        grid-column: span 1;
        grid-row: span 1;
        aspect-ratio: 4/3;
    }

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

    .career-item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .career-item__company {
        text-align: left;
    }

    .contact__title {
        font-size: clamp(2.8rem, 14vw, 5rem);
    }

    .footer {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .project-hero__meta {
        gap: 1.25rem;
    }

    .project-gallery__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .project-gallery__item--half,
    .project-gallery__item--third,
    .project-gallery__item--two-thirds,
    .project-gallery__item--quarter {
        grid-column: span 1;
        aspect-ratio: 4/3;
    }
}

/* ============================================
   HOME INTRO / HERO — 2026 EDITORIAL DIRECTION
   ============================================ */
:root {
    --intro-coral: #e7a297;
    --intro-ink: #090909;
    --intro-cream: #f5eee6;
    --intro-blue: #a8e7f5;
    --intro-pink: #ff9aad;
}

.home-intro {
    background: var(--intro-ink);
}

.home-intro .nav {
    opacity: 0;
    transform: translateY(-18px);
}

.home-intro.intro-reveal .nav {
    animation: introNavIn 0.8s var(--ease-out-expo) 0.32s forwards;
}

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

/* Intro: small identity fragments become a dark architectural wipe. */
.loader {
    display: block;
    background: var(--intro-coral);
    color: var(--intro-ink);
    isolation: isolate;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.68s var(--ease-out-expo), visibility 0s linear 0.68s;
}

.loader.is-exiting {
    opacity: 0;
    pointer-events: none;
}

.loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader__atmosphere,
.loader__grain {
    position: absolute;
    inset: 0;
}

.loader__atmosphere {
    overflow: hidden;
    z-index: 0;
    background:
        linear-gradient(115deg, rgba(255,255,255,0.08), transparent 38%),
        radial-gradient(circle at 74% 24%, rgba(255, 229, 204, 0.3), transparent 30%),
        var(--intro-coral);
}

.loader__halo {
    position: absolute;
    width: 42vw;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.28;
    mix-blend-mode: screen;
    animation: loaderHaloDrift 3.2s ease-in-out infinite alternate;
}

.loader__halo--one {
    top: -24vw;
    left: -10vw;
    background: var(--intro-pink);
}

.loader__halo--two {
    right: -16vw;
    bottom: -28vw;
    background: var(--intro-blue);
    animation-delay: -1.4s;
}

@keyframes loaderHaloDrift {
    to { transform: translate3d(5vw, 3vw, 0) scale(1.12); }
}

.loader__grain,
.hero__noise {
    opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    pointer-events: none;
}

.loader__meta {
    position: absolute;
    left: clamp(1.25rem, 3vw, 3.5rem);
    right: clamp(1.25rem, 3vw, 3.5rem);
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0;
    animation: loaderMetaIn 0.55s var(--ease-out-expo) 0.16s forwards;
}

.loader__meta--top { top: clamp(1.5rem, 4vh, 3rem); }
.loader__meta--bottom { bottom: clamp(1.5rem, 4vh, 3rem); }

@keyframes loaderMetaIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 0.72; transform: translateY(0); }
}

.loader__sequence {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-items: center;
}

.loader__glyph {
    position: absolute;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    line-height: 1;
    opacity: 0;
    filter: blur(7px);
    transform: scale(0.55) rotate(-10deg);
    animation: loaderGlyph 0.3s var(--ease-out-expo) both;
}

.loader__glyph:nth-child(1) { animation-delay: 0.08s; }
.loader__glyph:nth-child(2) { animation-delay: 0.25s; }
.loader__glyph:nth-child(3) { animation-delay: 0.42s; }
.loader__glyph:nth-child(4) { animation-delay: 0.59s; }
.loader__glyph:nth-child(5) { animation-delay: 0.76s; }
.loader__glyph:nth-child(6) { animation-delay: 0.93s; }
.loader__glyph:nth-child(7) { animation: loaderMark 0.72s var(--ease-out-expo) 1.16s both; }

.loader__glyph--mark {
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-family: 'Oswald', Impact, 'Arial Narrow', sans-serif;
    font-size: clamp(2.4rem, 4.4vw, 4.6rem);
    font-weight: 500;
    letter-spacing: 0.02em;
}

@keyframes loaderGlyph {
    0% { opacity: 0; filter: blur(7px); transform: scale(0.55) rotate(-10deg); }
    30%, 68% { opacity: 1; filter: blur(0); transform: scale(1) rotate(0); }
    100% { opacity: 0; filter: blur(4px); transform: scale(1.55) rotate(7deg); }
}

@keyframes loaderMark {
    0% { opacity: 0; filter: blur(7px); transform: scale(0.5) rotate(-12deg); }
    35%, 100% { opacity: 1; filter: blur(0); transform: scale(1) rotate(0); }
}

.loader__panels {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    pointer-events: none;
}

.loader__panel {
    display: block;
    width: calc(100% + 1px);
    height: 100%;
    margin-left: -1px;
    background: var(--intro-ink);
    transform: scaleY(0);
    transform-origin: bottom;
    animation: loaderPanelRise 0.64s var(--ease-in-out-expo) forwards;
}

.loader__panel:nth-child(1) { animation-delay: 1.08s; }
.loader__panel:nth-child(2) { animation-delay: 1.23s; transform-origin: top; }
.loader__panel:nth-child(3) { animation-delay: 1.18s; }
.loader__panel:nth-child(4) { animation-delay: 1.37s; transform-origin: top; }
.loader__panel:nth-child(5) { animation-delay: 1.3s; }

@keyframes loaderPanelRise {
    to { transform: scaleY(1); }
}

/* Hero stage */
.hero {
    min-height: 100svh;
    padding: 7.5rem 3vw 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--intro-ink);
    overflow: hidden;
    isolation: isolate;
}

.hero__bg {
    background: var(--intro-ink);
}

.hero__gradient {
    inset: -10%;
    background:
        radial-gradient(circle at 50% 48%, rgba(123,45,255,0.21), transparent 28%),
        radial-gradient(circle at 76% 24%, rgba(255,45,158,0.13), transparent 22%),
        radial-gradient(circle at 25% 70%, rgba(0,224,255,0.09), transparent 24%);
    filter: blur(10px);
    opacity: 0.95;
    will-change: transform;
}

.hero__beam {
    position: absolute;
    z-index: 0;
    width: 42vw;
    height: 140vh;
    top: -28vh;
    left: 47%;
    background: linear-gradient(90deg, transparent, rgba(231,162,151,0.07), transparent);
    transform: rotate(21deg);
    filter: blur(14px);
}

.hero__grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 8.333vw 8.333vw;
    mask-image: linear-gradient(to bottom, transparent 4%, #000 28%, #000 72%, transparent 97%);
}

.hero__blobs { opacity: 0.7; }

.hero__blob {
    filter: blur(90px);
    opacity: 0.22;
    animation: none;
}

.hero__blob--1 {
    width: 34vw;
    height: 22vw;
    left: 4%;
    top: 20%;
    background: var(--neon-purple);
    border-radius: 50%;
}

.hero__blob--2 {
    width: 26vw;
    height: 26vw;
    right: 5%;
    top: 18%;
    background: var(--neon-pink);
    border-radius: 50%;
}

.hero__blob--3 {
    width: 30vw;
    height: 18vw;
    left: 38%;
    bottom: 4%;
    background: var(--neon-cyan);
    border-radius: 50%;
}

.hero__noise {
    z-index: 2;
}

.hero__frame {
    position: absolute;
    inset: 6.75rem 3vw 2.5rem;
    z-index: 4;
    border: 1px solid rgba(255,255,255,0.12);
    pointer-events: none;
    opacity: 0;
}

.hero__frame::before,
.hero__frame::after {
    content: '';
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    border-color: rgba(255,255,255,0.45);
}

.hero__frame::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid;
    border-left: 2px solid;
}

.hero__frame::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid;
    border-bottom: 2px solid;
}

.hero__frame-index,
.hero__frame-year {
    position: absolute;
    top: 1rem;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245,245,245,0.55);
}

.hero__frame-index { left: 1rem; }
.hero__frame-year { right: 1rem; }

.hero__collage {
    z-index: 3;
    width: 100%;
    max-width: none;
    min-height: calc(100svh - 10rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__text {
    z-index: 5;
    width: min(94vw, 1800px);
    max-width: none;
    text-align: center;
}

.hero__eyebrow {
    display: inline-flex;
    gap: 0.65rem;
    padding: 0;
    margin-bottom: clamp(1.5rem, 3.6vh, 2.75rem);
    background: transparent;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: rgba(245,245,245,0.66);
    opacity: 0;
    transform: translateY(14px);
    animation: none;
}

.hero__dot {
    width: 6px;
    height: 6px;
    background: var(--intro-coral);
    box-shadow: 0 0 18px rgba(231,162,151,0.9);
}

.hero__name {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.08em;
    font-family: 'Oswald', Impact, sans-serif;
    font-size: clamp(6.5rem, 16.5vw, 20rem);
    font-weight: 600;
    line-height: 0.8;
    letter-spacing: -0.055em;
    white-space: nowrap;
}

.hero__name-line {
    position: relative;
    display: inline-block;
    color: transparent;
    background: linear-gradient(105deg, var(--intro-blue) 4%, var(--intro-cream) 45%, var(--intro-pink) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    transform: translateY(105%);
    filter: blur(9px);
    animation: none;
}

.hero__name-line::before,
.hero__name-line::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
    color: var(--intro-blue);
    -webkit-text-fill-color: var(--intro-blue);
    opacity: 0;
    pointer-events: none;
}

.hero__name-line::after {
    color: var(--intro-pink);
    -webkit-text-fill-color: var(--intro-pink);
}

.hero__lower {
    width: min(68vw, 980px);
    margin: clamp(1.8rem, 4vh, 3rem) auto 0;
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto;
    align-items: end;
    gap: 2.5rem;
}

.hero__subtitle {
    max-width: 520px;
    margin: 0;
    padding-left: 1rem;
    border-left: 1px solid rgba(255,255,255,0.3);
    text-align: left;
    font-size: clamp(0.78rem, 1.05vw, 0.98rem);
    line-height: 1.65;
    color: rgba(245,245,245,0.64);
    opacity: 0;
    transform: translateY(18px);
    animation: none;
}

.hero__actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    opacity: 0;
    transform: translateY(18px);
    animation: none;
}

.hero__btn {
    min-height: 2.9rem;
    padding: 0.8rem 1.35rem;
    border-radius: 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero__btn--primary {
    background: var(--intro-cream);
    color: var(--intro-ink);
    box-shadow: 7px 7px 0 var(--intro-coral);
}

.hero__btn--primary:hover {
    background: #fff;
    box-shadow: 3px 3px 0 var(--intro-blue);
    transform: translate(4px, 4px);
}

.hero__btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.28);
}

.hero__image {
    z-index: 1;
    border-radius: 0;
    opacity: 0;
    filter: saturate(0.85) contrast(1.12);
    box-shadow: 0 30px 80px rgba(0,0,0,0.55);
    clip-path: inset(100% 0 0 0);
    animation: none;
}

.hero__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(168,231,245,0.18), transparent 45%, rgba(255,154,173,0.2));
    mix-blend-mode: color;
    pointer-events: none;
}

.hero__image--1 {
    width: clamp(8rem, 13vw, 13.5rem);
    height: clamp(14rem, 38vh, 25rem);
    top: 21%;
    left: 5%;
    --rotate: -3deg;
}

.hero__image--2 {
    width: clamp(7.5rem, 12vw, 12.5rem);
    height: clamp(9rem, 25vh, 16rem);
    top: auto;
    right: 5.5%;
    bottom: 17%;
    border-radius: 50% 50% 0 0;
    --rotate: 4deg;
}

.hero__orbit {
    left: 7vw;
    right: auto;
    bottom: 5vh;
    width: 112px;
    height: 112px;
    opacity: 0;
    animation: none;
}

.hero__discipline {
    position: absolute;
    left: 50%;
    bottom: 3.05rem;
    z-index: 5;
    display: flex;
    gap: 2rem;
    transform: translateX(-50%);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(245,245,245,0.38);
    opacity: 0;
}

.hero__discipline span {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    white-space: nowrap;
}

.hero__discipline span:not(:last-child)::after {
    content: '';
    width: 2.2rem;
    height: 1px;
    background: rgba(255,255,255,0.18);
}

.hero__experience {
    bottom: 2.25rem;
    left: 4.5vw;
    opacity: 0;
    animation: none;
}

.experience-trigger {
    gap: 0 0.9rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0;
    background: rgba(9,9,9,0.35);
    border-color: rgba(255,255,255,0.18);
    backdrop-filter: blur(12px);
}

.experience-trigger__value {
    font-size: 1.55rem;
    background: linear-gradient(135deg, var(--intro-blue), var(--intro-pink));
    -webkit-background-clip: text;
    background-clip: text;
}

.hero__scroll {
    bottom: 2.25rem;
    right: 4vw;
    opacity: 0;
    animation: none;
}

/* Loader and hero share the same dark surface during this reveal. */
.home-intro.intro-reveal .hero__frame {
    animation: heroFrameIn 1s var(--ease-out-expo) 0.18s forwards;
}

.home-intro.intro-reveal .hero__eyebrow {
    animation: heroElementIn 0.75s var(--ease-out-expo) 0.1s forwards;
}

.home-intro.intro-reveal .hero__name-line {
    animation: heroNameIn 1.05s var(--ease-out-expo) forwards;
}

.home-intro.intro-reveal .hero__name-line:nth-child(1) { animation-delay: 0.04s; }
.home-intro.intro-reveal .hero__name-line:nth-child(2) { animation-delay: 0.13s; }

.home-intro.intro-reveal .hero__name-line::before {
    animation: heroGlitchBlue 1.1s steps(2, end) 0.14s both;
}

.home-intro.intro-reveal .hero__name-line::after {
    animation: heroGlitchPink 1.05s steps(2, end) 0.2s both;
}

.home-intro.intro-reveal .hero__subtitle {
    animation: heroElementIn 0.8s var(--ease-out-expo) 0.42s forwards;
}

.home-intro.intro-reveal .hero__actions {
    animation: heroElementIn 0.8s var(--ease-out-expo) 0.5s forwards;
}

.home-intro.intro-reveal .hero__image--1 {
    animation: heroImageIn 1.05s var(--ease-out-expo) 0.34s forwards;
}

.home-intro.intro-reveal .hero__image--2 {
    animation: heroImageIn 1.05s var(--ease-out-expo) 0.48s forwards;
}

.home-intro.intro-reveal .hero__orbit,
.home-intro.intro-reveal .hero__discipline,
.home-intro.intro-reveal .hero__experience,
.home-intro.intro-reveal .hero__scroll {
    animation: heroSoftIn 0.8s var(--ease-out-expo) 0.68s forwards;
}

@keyframes heroFrameIn {
    from { opacity: 0; clip-path: inset(0 50% 0 50%); }
    to { opacity: 1; clip-path: inset(0); }
}

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

@keyframes heroSoftIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes heroNameIn {
    0% { opacity: 0; transform: translateY(105%); filter: blur(9px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes heroGlitchBlue {
    0%, 12% { opacity: 0; transform: translate(0); clip-path: inset(0); }
    18% { opacity: 0.7; transform: translate(-8px, 3px); clip-path: inset(8% 0 58% 0); }
    34% { opacity: 0.5; transform: translate(5px, -2px); clip-path: inset(61% 0 14% 0); }
    48%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0); }
}

@keyframes heroGlitchPink {
    0%, 19% { opacity: 0; transform: translate(0); clip-path: inset(0); }
    24% { opacity: 0.65; transform: translate(7px, -2px); clip-path: inset(48% 0 18% 0); }
    41% { opacity: 0.45; transform: translate(-4px, 2px); clip-path: inset(17% 0 64% 0); }
    54%, 100% { opacity: 0; transform: translate(0); clip-path: inset(0); }
}

@keyframes heroImageIn {
    from { opacity: 0; clip-path: inset(100% 0 0 0); }
    to { opacity: 0.72; clip-path: inset(0); }
}

@media (max-width: 1200px) {
    .hero__name { font-size: clamp(5.6rem, 17vw, 13rem); }
    .hero__lower { width: min(74vw, 860px); }
    .hero__image--1 { left: 3%; }
    .hero__image--2 { right: 3%; }
    .hero__discipline { display: none; }
}

@media (max-width: 992px) {
    .hero {
        padding: 7.5rem 5vw 3.5rem;
    }

    .hero__frame { inset: 6.75rem 4vw 2rem; }
    .hero__image { display: none; }
    .hero__orbit { display: none; }
    .hero__lower { width: min(78vw, 690px); }
    .hero__experience { display: none; }
    .hero__name { font-size: clamp(5.4rem, 18vw, 11rem); }
}

@media (max-width: 640px) {
    .loader__meta {
        align-items: flex-start;
        font-size: 0.5rem;
        letter-spacing: 0.12em;
    }

    .loader__meta span:last-child { text-align: right; }
    .loader__panels { grid-template-columns: repeat(4, 1fr); }
    .loader__panel:last-child { display: none; }

    .hero {
        min-height: 100svh;
        padding: 7rem 6vw 3rem;
        align-items: center;
    }

    .hero__frame { inset: 6rem 4vw 1.5rem; }
    .hero__frame-year { display: none; }
    .hero__text { width: 88vw; }
    .hero__eyebrow { margin-bottom: 1.6rem; }

    .hero__name {
        display: block;
        font-size: clamp(5.5rem, 27vw, 8.5rem);
        line-height: 0.76;
        white-space: normal;
    }

    .hero__name-line {
        display: block;
    }

    .hero__name-line--accent { margin-left: 0.2em; }

    .hero__lower {
        width: 82vw;
        margin-top: 2.4rem;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hero__subtitle {
        padding: 0;
        border: 0;
        text-align: center;
        font-size: 0.82rem;
    }

    .hero__actions {
        width: 100%;
        justify-content: center;
    }

    .hero__btn {
        flex: 0 1 auto;
        padding: 0.78rem 1rem;
        font-size: 0.62rem;
    }

    .hero__scroll { display: none; }
}

@media (max-width: 390px) {
    .hero__actions { flex-direction: column; }
    .hero__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .loader__halo,
    .loader__meta,
    .loader__glyph,
    .loader__panel,
    .home-intro .nav,
    .home-intro .hero__frame,
    .home-intro .hero__eyebrow,
    .home-intro .hero__name-line,
    .home-intro .hero__name-vector,
    .home-intro .hero__name-line::before,
    .home-intro .hero__name-line::after,
    .home-intro .hero__subtitle,
    .home-intro .hero__actions,
    .home-intro .hero__image,
    .home-intro .hero__orbit,
    .home-intro .hero__discipline,
    .home-intro .hero__experience,
    .home-intro .hero__scroll {
        animation: none !important;
    }

    .loader__glyph { display: none; }
    .loader__glyph--mark { display: grid; opacity: 1; filter: none; transform: none; }
    .loader__panel { transform: scaleY(1); }

    .home-intro .nav,
    .home-intro .hero__frame,
    .home-intro .hero__eyebrow,
    .home-intro .hero__name-line,
    .home-intro .hero__name-vector,
    .home-intro .hero__subtitle,
    .home-intro .hero__actions,
    .home-intro .hero__orbit,
    .home-intro .hero__discipline,
    .home-intro .hero__experience,
    .home-intro .hero__scroll {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
    }
}

/* ============================================
   CAREER PATH — VERTICAL BLINDS
   ============================================ */
.about__layout {
    row-gap: 4rem;
}

.about__career {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 3rem);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 10%, rgba(123,45,255,0.12), transparent 28rem),
        radial-gradient(circle at 88% 90%, rgba(0,224,255,0.07), transparent 25rem),
        #0c0c0e;
    overflow: hidden;
}

.about__career-heading {
    width: min(100%, 52rem);
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);
    text-align: center;
}

/* About alignment: keep the copy level with the portrait and stats in one row. */
.about__layout {
    align-items: start;
}

.about__content {
    padding-top: 0;
}

.about__stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

@media (min-width: 901px) {
    .about__stats {
        /* The layout reserves a 4rem row gap for the career section; pull the
           full-width bar back up so it sits directly below the portrait. */
        margin-top: -4rem;
    }
}

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

.about__career-kicker {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neon-cyan);
}

.about__career-title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 4.8vw, 4.2rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--text);
    text-transform: none;
}

.about__career-heading p {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.career-list {
    width: 100%;
    height: 27rem;
    padding: 0.6rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 0.65rem;
    overflow: hidden;
}

.career-item {
    --blind-accent: var(--neon-cyan);
    position: relative;
    isolation: isolate;
    width: 5.1rem;
    height: 100%;
    flex: 0 0 5.1rem;
    display: grid;
    grid-template-columns: 5.1rem minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    background: linear-gradient(165deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025) 55%, rgba(255,255,255,0.055));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 20px 55px rgba(0,0,0,0.22);
    color: var(--text);
    font-size: 0.95rem;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    transition:
        width 0.68s var(--ease-out-expo),
        flex-basis 0.68s var(--ease-out-expo),
        border-color 0.45s,
        background 0.45s,
        transform 0.45s var(--ease-out-expo);
}

.career-item::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 18rem;
    height: 18rem;
    right: -8rem;
    bottom: -9rem;
    border-radius: 50%;
    background: var(--blind-accent);
    opacity: 0.1;
    filter: blur(58px);
    transition: opacity 0.5s, transform 0.7s var(--ease-out-expo);
}

.career-item::after {
    content: '';
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--blind-accent), transparent 78%);
    opacity: 0.38;
    transform: scaleX(0.45);
    transform-origin: left;
    transition: opacity 0.45s, transform 0.68s var(--ease-out-expo);
}

.career-item.is-active,
.career-item:focus-visible {
    width: clamp(21rem, 34vw, 29rem);
    flex-basis: clamp(21rem, 34vw, 29rem);
    border-color: rgba(255,255,255,0.22);
    background: linear-gradient(150deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035) 56%, rgba(255,255,255,0.075));
    transform: translateY(-0.35rem);
}

@media (min-width: 993px) and (hover: hover) {
    .career-item:hover {
        width: clamp(21rem, 34vw, 29rem);
        flex-basis: clamp(21rem, 34vw, 29rem);
        border-color: rgba(255,255,255,0.22);
        background: linear-gradient(150deg, rgba(255,255,255,0.1), rgba(255,255,255,0.035) 56%, rgba(255,255,255,0.075));
        transform: translateY(-0.35rem);
    }
}

.career-item.is-active::before,
.career-item:focus-visible::before,
.career-item:hover::before {
    opacity: 0.22;
    transform: translate(-3rem, -2rem) scale(1.18);
}

.career-item.is-active::after,
.career-item:focus-visible::after,
.career-item:hover::after {
    opacity: 0.9;
    transform: scaleX(1);
}

.career-item__rail {
    position: relative;
    z-index: 2;
    width: 5.1rem;
    min-width: 5.1rem;
    height: 100%;
    padding: 1.15rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid rgba(255,255,255,0.075);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}

.career-item__index,
.career-item__mark {
    font-family: var(--font-display);
    font-size: 0.64rem;
    line-height: 1;
    letter-spacing: 0.1em;
    color: rgba(245,245,245,0.42);
}

.career-item__role {
    flex: 1;
    margin: 1.15rem 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.035em;
    text-align: left;
    white-space: nowrap;
    align-self: flex-start;
    margin-left: 0.7rem;
}

.career-item__mark {
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    color: var(--blind-accent);
    transition: transform 0.5s var(--ease-out-expo), border-color 0.4s;
}

.career-item.is-active .career-item__mark,
.career-item:focus-visible .career-item__mark,
.career-item:hover .career-item__mark {
    transform: rotate(45deg);
    border-color: var(--blind-accent);
}

.career-item__panel {
    position: relative;
    z-index: 2;
    min-width: 15.5rem;
    padding: 2rem 2rem 1.8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateX(-1.2rem);
    transition:
        opacity 0.3s ease 0s,
        transform 0.5s var(--ease-out-expo) 0s;
    pointer-events: none;
}

.career-item.is-active .career-item__panel,
.career-item:focus-visible .career-item__panel,
.career-item:hover .career-item__panel {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.16s;
}

.career-item__year {
    margin-bottom: auto;
    color: var(--blind-accent);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.career-item__company {
    margin-bottom: 0.8rem;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.05;
    text-align: left;
}

.career-item__desc {
    max-width: 25rem;
    margin-bottom: 1.25rem;
    color: rgba(245,245,245,0.62);
    font-size: 0.78rem;
    line-height: 1.65;
}

.career-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.career-item__tags span {
    padding: 0.35rem 0.58rem;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 100px;
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245,245,245,0.58);
}

.about__experience-btn {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: -1.8rem;
}

@media (max-width: 1200px) and (min-width: 993px) {
    .career-list { height: 25rem; }

    .career-item,
    .career-item__rail {
        width: 4.55rem;
        min-width: 4.55rem;
    }

    .career-item {
        flex-basis: 4.55rem;
        grid-template-columns: 4.55rem minmax(0, 1fr);
    }

    .career-item.is-active,
    .career-item:focus-visible,
    .career-item:hover {
        width: 22rem;
        flex-basis: 22rem;
    }
}

@media (max-width: 992px) {
    .about__career {
        grid-column: 1;
        padding: 1.5rem;
        border-radius: 22px;
    }

    .career-list {
        height: auto;
        padding: 0;
        flex-direction: column;
        gap: 0.65rem;
        overflow: visible;
    }

    .career-item,
    .career-item.is-active,
    .career-item:focus-visible,
    .career-item:hover {
        width: 100%;
        height: auto;
        min-height: 4.5rem;
        max-height: 4.5rem;
        flex: none;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 4.5rem auto;
        overflow: hidden;
        transform: none;
        transition: max-height 0.65s var(--ease-out-expo), border-color 0.4s, background 0.4s;
    }

    .career-item.is-active,
    .career-item:focus-visible {
        max-height: 40rem;
    }

    .career-item__rail {
        width: 100%;
        min-width: 0;
        height: 4.5rem;
        padding: 0 1rem;
        flex-direction: row;
        gap: 1rem;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.075);
    }

    .career-item__role {
        order: 2;
        margin: 0;
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 0.78rem;
        white-space: normal;
        align-self: center;
    }

    .career-item__index { order: 1; }
    .career-item__mark { order: 3; margin-left: auto; }

    .career-item__panel {
        min-width: 0;
        padding: 1.25rem 1rem 1.4rem;
        transform: translateY(-0.75rem);
    }

    .career-item.is-active .career-item__panel,
    .career-item:focus-visible .career-item__panel {
        transform: translateY(0);
    }

    .career-item__year { margin-bottom: 1.6rem; }
    .career-item__company { font-size: 1.5rem; }

    .about__experience-btn {
        grid-column: 1;
        margin-top: -1.5rem;
    }
}

@media (max-width: 640px) {
    .about__career { padding: 1.1rem; }
    .about__career-heading { margin-bottom: 1.5rem; }
    .about__career-heading p { font-size: 0.78rem; }
    .career-item.is-active,
    .career-item:focus-visible { max-height: 42rem; }
}

@media (prefers-reduced-motion: reduce) {
    .career-item,
    .career-item__panel,
    .career-item::before,
    .career-item::after,
    .career-item__mark {
        transition: none !important;
    }
}

/* ============================================
   HERO POINTER FIELD / SCROLL-ZOOM TRANSITION
   ============================================ */
.hero {
    height: 140svh;
    min-height: 140svh;
    padding: 0;
    display: block;
    overflow: visible;
    background: var(--intro-ink);
}

.hero__sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100svh;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--intro-ink);
    overflow: hidden;
    isolation: isolate;
}

.hero__motion {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 7.5rem 3vw 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.hero__name {
    position: absolute;
    inset: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
}

.hero__name-vector {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    transform: translateY(8%);
    filter: blur(9px);
}

.hero__name-vector-text {
    fill: url(#hero-name-gradient);
    font-family: 'Oswald', Impact, 'Arial Narrow', sans-serif;
    font-weight: 500;
    letter-spacing: -0.065em;
    text-rendering: geometricPrecision;
}

.home-intro.intro-reveal .hero__name-vector {
    animation: heroNameVectorIn 1.05s var(--ease-out-expo) 0.04s forwards;
}

@keyframes heroNameVectorIn {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: none;
    }
}

.hero__text {
    transform: translateY(clamp(14rem, 14vw, 17rem));
}

.hero__lower {
    width: min(43vw, 600px);
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    will-change: opacity;
}

.hero__subtitle {
    margin: 0 auto;
    padding: 0;
    border: 0;
    text-align: center;
}

.hero__actions,
.hero__image {
    display: none !important;
}

.hero__pointer {
    --pointer-tilt: 0deg;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 0;
    height: 0;
    opacity: 0;
    transform: translate3d(50vw, 50vh, 0);
    pointer-events: none;
    will-change: transform, opacity;
}

.home-intro.intro-reveal .hero__pointer {
    animation: pointerFieldIn 0.9s var(--ease-out-expo) 0.55s forwards;
}

.hero__pointer-aura,
.hero__pointer-ring,
.hero__pointer-cross,
.hero__pointer-label {
    position: absolute;
    display: block;
}

.hero__pointer-aura {
    width: clamp(18rem, 30vw, 34rem);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 42%, rgba(255,255,255,0.11), transparent 7%),
        radial-gradient(circle, rgba(168,231,245,0.17), rgba(123,45,255,0.09) 38%, rgba(255,154,173,0.055) 58%, transparent 72%);
    filter: blur(18px);
    mix-blend-mode: screen;
    transform: translate(-50%, -50%);
    animation: pointerAuraPulse 4.6s ease-in-out infinite alternate;
}

.hero__pointer-ring {
    width: 8.5rem;
    height: 8.5rem;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(245,245,245,0.16);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(var(--pointer-tilt));
}

.hero__pointer-ring::before,
.hero__pointer-ring::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}

.hero__pointer-ring::before {
    inset: 1rem;
    border: 1px dashed rgba(168,231,245,0.18);
    animation: pointerRingRotate 10s linear infinite;
}

.hero__pointer-ring::after {
    width: 7px;
    height: 7px;
    top: -4px;
    left: calc(50% - 3px);
    background: var(--intro-coral);
    box-shadow: 0 0 18px rgba(231,162,151,0.9);
}

.hero__pointer-cross {
    left: 50%;
    top: 50%;
    background: linear-gradient(90deg, transparent, rgba(245,245,245,0.2), transparent);
    transform: translate(-50%, -50%);
}

.hero__pointer-cross--x {
    width: 14rem;
    height: 1px;
}

.hero__pointer-cross--y {
    width: 1px;
    height: 14rem;
    background: linear-gradient(180deg, transparent, rgba(245,245,245,0.2), transparent);
}

.hero__pointer-label {
    left: 4.9rem;
    top: 4.15rem;
    width: max-content;
    font-size: 0.48rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: rgba(245,245,245,0.42);
    transform: rotate(var(--pointer-tilt));
}

@keyframes pointerFieldIn {
    to { opacity: 0.82; }
}

@keyframes pointerAuraPulse {
    from { transform: translate(-50%, -50%) scale(0.9); opacity: 0.62; }
    to { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

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

.featured {
    --featured-overlap: 50svh;
    --featured-offset: var(--featured-overlap);
    position: relative;
    z-index: 12;
    margin-top: calc(0px - var(--featured-overlap));
    border-top: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(circle at 50% 0, rgba(168,231,245,0.06), transparent 28rem),
        var(--bg);
    box-shadow: 0 -35px 90px rgba(0,0,0,0.46);
    transform: translate3d(0, var(--featured-offset), 0);
    will-change: transform;
}

@media (max-width: 640px) {
    .featured { --featured-overlap: 35svh; }
}

@media (pointer: coarse) {
    .hero__pointer { display: none; }
}

@media (max-width: 992px) {
    .hero {
        height: 135svh;
        min-height: 135svh;
        padding: 0;
    }

    .hero__sticky {
        min-height: 0;
        padding: 0;
    }

    .hero__motion { padding: 7.5rem 5vw 3rem; }

    .hero__lower { width: min(72vw, 570px); }
}

@media (max-width: 640px) {
    .hero {
        height: 130svh;
        min-height: 130svh;
        padding: 0;
    }

    .hero__sticky {
        padding: 0;
    }

    .hero__motion { padding: 7rem 6vw 3rem; }

    .hero__text { transform: translateY(8.5rem); }

    .hero__lower {
        width: 80vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero {
        height: 100svh;
        min-height: 100svh;
    }

    .hero__sticky {
        position: relative;
    }

    .hero__motion {
        transform: none !important;
    }

    .hero__name {
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }

    .hero__pointer {
        display: none;
    }

    .featured {
        margin-top: -1px;
        transform: none;
    }
}

/* Restore the original interleaved archive grid for All Works only. */
#works .works__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(150px, 11vw);
    gap: 1.5rem;
}

#works .project-list-card,
#works .project-list-card:nth-child(even) {
    position: relative;
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
    height: auto !important;
    min-height: 0;
    aspect-ratio: auto;
    overflow: hidden;
    border-radius: 18px;
}

#works .work-card--xl { grid-column: span 2 !important; grid-row: span 2 !important; }
#works .work-card--wide { grid-column: span 2 !important; grid-row: span 1 !important; }
#works .work-card--tall { grid-column: span 1 !important; grid-row: span 2 !important; }
#works .work-card--square { grid-column: span 1 !important; grid-row: span 1 !important; }
#works .work-card--small { grid-column: span 1 !important; grid-row: span 1 !important; }
#works .work-card--poster { grid-column: span 1 !important; grid-row: span 2 !important; }

#works .project-list-card .work-card__media,
#works .project-list-card:nth-child(even) .work-card__media {
    position: absolute;
    inset: 0;
    display: block;
    order: initial;
    width: auto;
    height: auto !important;
    aspect-ratio: auto !important;
    border-radius: 0;
}

#works .project-list-card .work-card__media img {
    width: 100%;
    height: 100% !important;
    /* Keep each selected cover's original proportions instead of cropping it. */
    object-fit: contain !important;
    background: var(--bg-soft);
}

#works .project-list-card .project-list-card__text,
#works .project-list-card:nth-child(even) .project-list-card__text {
    position: absolute !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: block;
    order: initial;
    padding: 1.25rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.9)) !important;
    transform: translateY(12px) !important;
    opacity: 0 !important;
    transition: opacity .35s ease, transform .35s ease;
}

#works .project-list-card:hover .project-list-card__text,
#works .project-list-card:focus-visible .project-list-card__text {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

#works .project-list-card .work-card__title {
    margin: 0;
    font-size: clamp(.95rem, 1.35vw, 1.25rem);
    line-height: 1.1;
}

#works .project-list-card .work-card__meta {
    margin: .45rem 0 0;
    font-size: .68rem;
}

@media (max-width: 900px) {
    #works .works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: minmax(140px, 22vw); }
}

/* Natural-ratio two-column rhythm: no filler panels, no full-width project. */
#featured .featured__grid,
#works .works__grid {
    display: block !important;
    column-count: 2;
    column-gap: clamp(1.25rem, 3vw, 3rem);
}

#featured .project-list-card,
#works .project-list-card,
#featured .project-list-card:nth-child(even),
#works .project-list-card:nth-child(even) {
    display: inline-block !important;
    position: relative !important;
    width: 100%;
    height: auto !important;
    min-height: 0;
    margin: 0 0 clamp(2.5rem, 5vw, 5rem);
    padding: 0;
    vertical-align: top;
    break-inside: avoid;
    overflow: visible;
    border-radius: 0;
    background: transparent !important;
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: auto !important;
}

#featured .project-list-card .featured__media,
#works .project-list-card .work-card__media,
#featured .project-list-card:nth-child(even) .featured__media,
#works .project-list-card:nth-child(even) .work-card__media {
    position: relative !important;
    inset: auto !important;
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0;
    aspect-ratio: auto !important;
    overflow: hidden;
    border-radius: 1rem;
    background: transparent !important;
}

#featured .project-list-card video,
#works .project-list-card video {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none;
    aspect-ratio: auto !important;
    object-fit: contain;
    background: transparent !important;
}

#featured .project-list-card img,
#works .project-list-card img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    transform: none;
    background: transparent !important;
}

#featured .project-list-card .featured__overlay {
    display: none;
}

#featured .project-list-card .project-list-card__text,
#works .project-list-card .project-list-card__text,
#featured .project-list-card:nth-child(even) .project-list-card__text,
#works .project-list-card:nth-child(even) .project-list-card__text {
    position: static !important;
    display: block;
    padding: .7rem 0 0;
    background: none !important;
    transform: none !important;
    opacity: 1 !important;
}

#featured .project-list-card .featured__name,
#works .project-list-card .work-card__title {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: clamp(.95rem, 1.35vw, 1.25rem);
    line-height: 1.12;
}

#featured .project-list-card .featured__type,
#works .project-list-card .work-card__meta {
    display: block;
    width: 100%;
    margin: .35rem 0 0;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    #featured .featured__grid,
    #works .works__grid {
        column-count: 1;
    }
}

/* Brief premium lift for every work tile. */
@keyframes portfolioWorkLiftIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

#featured .project-list-card,
#works .project-list-card {
    transition: transform .45s cubic-bezier(.2,.75,.25,1), box-shadow .45s ease;
    will-change: transform;
}

#featured .project-list-card:hover,
#featured .project-list-card:focus-visible,
#works .project-list-card:hover,
#works .project-list-card:focus-visible {
    z-index: 3;
    transform: translateY(-8px);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

@media (prefers-reduced-motion: no-preference) {
    #featured .project-list-card,
    #works .project-list-card {
        animation: portfolioWorkLiftIn .7s cubic-bezier(.2,.75,.25,1) both;
    }

    #featured .project-list-card:nth-child(2),
    #works .project-list-card:nth-child(2) { animation-delay: .05s; }
    #featured .project-list-card:nth-child(3),
    #works .project-list-card:nth-child(3) { animation-delay: .1s; }
    #featured .project-list-card:nth-child(4),
#works .project-list-card:nth-child(4) { animation-delay: .15s; }
}

/* Restore the original hover interaction above the natural-ratio overrides. */
#featured .project-list-card:hover,
#featured .project-list-card:focus-visible,
#works .project-list-card:hover,
#works .project-list-card:focus-visible {
    transform: translateY(-8px) scale(1.01) !important;
    box-shadow: 0 24px 54px rgba(0, 0, 0, .34);
}

#featured .project-list-card img,
#featured .project-list-card video,
#works .project-list-card img,
#works .project-list-card video {
    transition: transform .6s var(--ease-out-expo), filter .4s ease;
}

#featured .project-list-card:hover img,
#featured .project-list-card:hover video,
#featured .project-list-card:focus-visible img,
#featured .project-list-card:focus-visible video,
#works .project-list-card:hover img,
#works .project-list-card:hover video,
#works .project-list-card:focus-visible img,
#works .project-list-card:focus-visible video {
    transform: scale(1.045) !important;
    filter: brightness(.9) saturate(1.08);
}

/* Scroll-triggered lift: the existing IntersectionObserver toggles .is-visible. */
#featured .project-list-card.reveal,
#works .project-list-card.reveal {
    opacity: 0;
    transform: translateY(28px);
    animation: none !important;
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.25,1), box-shadow .45s ease;
}

#featured .project-list-card.reveal.is-visible,
#works .project-list-card.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#featured .project-list-card.reveal.is-visible:hover,
#featured .project-list-card.reveal.is-visible:focus-visible,
#works .project-list-card.reveal.is-visible:hover,
#works .project-list-card.reveal.is-visible:focus-visible {
    transform: translateY(-8px) scale(1.01) !important;
}

/* Persistent contact QR panel, readable on both dark and light sections. */
.floating-contact {
    position: fixed;
    left: clamp(12px, 2vw, 28px);
    bottom: clamp(12px, 2vw, 28px);
    z-index: 120;
    width: clamp(162px, 18vw, 252px);
    padding: clamp(9px, 1.2vw, 15px);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 18px;
    background: rgba(10, 11, 14, .9);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .46), 0 0 0 1px rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    overflow: hidden;
    transition: transform .35s var(--ease-out-expo), box-shadow .35s ease;
}

.floating-contact img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 11px;
}

.floating-contact:hover,
.floating-contact:focus-within {
    transform: translateY(-5px) scale(1.025);
    box-shadow: 0 20px 44px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .1);
}

@media (max-width: 700px) {
    .floating-contact {
        left: 10px;
        bottom: 10px;
        width: clamp(132px, 37.5vw, 198px);
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .floating-contact { transition: none; }
}

/* Keep every career blind's vertical date label optically centered. */
.career-item__role {
    align-self: stretch;
    width: 100%;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Keep the small circular markers visible at the foot of every career blind. */
.career-item__mark {
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    visibility: visible;
    opacity: 1;
    background: rgba(0, 0, 0, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Interleave Selected Works in two natural-ratio columns without empty grid cells. */
#featured .featured__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0 clamp(1.25rem, 3vw, 3rem);
}

#featured .featured__column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 5rem);
}

#featured .featured__column > .project-list-card {
    display: flex !important;
    width: 100%;
    margin: 0 !important;
}

@media (max-width: 700px) {
    #featured .featured__grid {
        display: flex !important;
        flex-direction: column;
        gap: 2.5rem;
    }

    #featured .featured__column {
        display: contents;
    }

    #featured .featured__grid > .project-list-card {
        order: var(--featured-order);
    }
}

/* Keep every desktop career rail's role area from pushing its bottom marker out. */
@media (min-width: 993px) {
    .career-item__role {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        margin: 1.15rem 0;
    }

    .career-item__mark {
        flex: 0 0 1.45rem;
        margin: 0 auto;
    }
}

/* Render one identical, fixed-position marker on every desktop career rail. */
@media (min-width: 993px) {
    .career-item__mark {
        display: none !important;
    }

    .career-item__rail::after {
        content: '+';
        position: absolute;
        left: 50%;
        bottom: 1.15rem;
        z-index: 5;
        width: 1.45rem;
        height: 1.45rem;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.14);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 0 1px rgba(0, 0, 0, 0.12);
        color: var(--blind-accent);
        font-family: var(--font-display);
        font-size: 0.64rem;
        line-height: 1;
        transform: translateX(-50%);
        transition: transform 0.5s var(--ease-out-expo), border-color 0.4s;
        pointer-events: none;
    }

    .career-item.is-active .career-item__rail::after,
    .career-item:focus-visible .career-item__rail::after,
    .career-item:hover .career-item__rail::after {
        border-color: var(--blind-accent);
        transform: translateX(-50%) rotate(45deg);
    }
}

/* Use the real marker element on every desktop rail so no individual blind
   can lose its bottom marker when the pseudo-element is clipped. */
@media (min-width: 993px) {
    .career-item__rail::after {
        display: none !important;
    }

    .career-item__mark {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Selected Works follows the numbered folder order visually, while All Works
   keeps its natural-ratio interleaved columns below. */
#featured .featured__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-count: initial;
    gap: clamp(2.5rem, 5vw, 6rem) clamp(1.25rem, 3vw, 3rem);
}

#featured .project-list-card,
#featured .project-list-card:nth-child(even) {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin: 0;
}

#featured .project-list-card,
#featured .project-list-card:nth-child(even),
#featured .featured__item--large,
#featured .featured__item--tall,
#featured .featured__item--wide,
#featured .featured__item--medium {
    grid-column: span 1 !important;
}

@media (max-width: 700px) {
    #featured .featured__grid {
        grid-template-columns: 1fr;
    }

    #featured .featured__item--large,
    #featured .featured__item--tall,
    #featured .featured__item--wide,
    #featured .featured__item--medium {
        grid-column: span 1 !important;
    }
}

/* All Works: true row-by-row two-column grid with equal-height covers. */
#works .works__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    column-count: initial !important;
    align-items: start;
    justify-items: stretch;
    gap: clamp(2rem, 4vw, 4.5rem) clamp(1.25rem, 3vw, 3rem) !important;
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
}

#works .project-list-card,
#works .project-list-card:nth-child(even),
#works .work-card--xl,
#works .work-card--wide,
#works .work-card--tall,
#works .work-card--square,
#works .work-card--small,
#works .work-card--poster {
    display: flex !important;
    flex-direction: column;
    grid-column: span 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    break-inside: auto;
}

#works .project-list-card .work-card__media,
#works .project-list-card:nth-child(even) .work-card__media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: clamp(7rem, 19vw, 22rem) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1rem;
    background: transparent !important;
}

#works .project-list-card .work-card__media img,
#works .project-list-card .work-card__media video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

#works .project-list-card .project-list-card__text,
#works .project-list-card:nth-child(even) .project-list-card__text {
    position: static !important;
    width: 100%;
    padding: .7rem 0 0 !important;
    background: none !important;
    transform: none !important;
    opacity: 1 !important;
}

@media (max-width: 700px) {
    #works .works__grid {
        grid-template-columns: 1fr !important;
    }

    #works .project-list-card .work-card__media,
    #works .project-list-card:nth-child(even) .work-card__media {
        height: clamp(11rem, 56vw, 22rem) !important;
    }
}

/* Keep the requested ABSOLUT and Audi covers together on one equal-height row. */
#featured .featured__pair-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1.25rem, 3vw, 3rem);
}

#featured .featured__pair-row > .project-list-card,
#featured .featured__pair-row > .project-list-card:nth-child(even) {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
    grid-column: span 1 !important;
}

#featured .featured__pair-row .featured__media,
#featured .featured__pair-row .project-list-card:nth-child(even) .featured__media {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden;
    border-radius: 1rem;
    background: transparent !important;
}

#featured .featured__pair-row .featured__media img,
#featured .featured__pair-row .featured__media video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

@media (max-width: 700px) {
    #featured .featured__pair-row {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* Curated five-project waterfall: two wide cards, then three compact cards. */
#featured .featured__mosaic {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: clamp(2.75rem, 5vw, 5.5rem) clamp(1.1rem, 2.4vw, 2.5rem);
    width: 100%;
}

#featured .featured__mosaic > .project-list-card,
#featured .featured__mosaic > .project-list-card:nth-child(even) {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
    grid-row: auto !important;
}

#featured .featured__mosaic > a[href="project-005.html"] {
    grid-column: span 6 !important;
}

#featured .featured__mosaic > a[href="project-007.html"] {
    grid-column: span 6 !important;
    margin-top: 0 !important;
}

#featured .featured__mosaic > a[href="project-009.html"],
#featured .featured__mosaic > a[href="project-011.html"],
#featured .featured__mosaic > a[href="project-010.html"] {
    display: grid !important;
    grid-template-rows: auto minmax(3.2rem, auto);
    grid-column: span 4 !important;
    align-self: stretch;
}

#featured .featured__mosaic > a[href="project-011.html"] {
    margin-top: 0 !important;
}

#featured .featured__mosaic > a[href="project-010.html"] {
    margin-top: 0 !important;
}

#featured .featured__mosaic .featured__media,
#featured .featured__mosaic .project-list-card:nth-child(even) .featured__media {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
    border-radius: 1rem;
    background: transparent !important;
}

#featured .featured__mosaic > a[href="project-005.html"] .featured__media,
#featured .featured__mosaic > a[href="project-007.html"] .featured__media {
    aspect-ratio: 16 / 9 !important;
}

#featured .featured__mosaic > a[href="project-009.html"] .featured__media,
#featured .featured__mosaic > a[href="project-011.html"] .featured__media,
#featured .featured__mosaic > a[href="project-010.html"] .featured__media {
    height: clamp(7rem, 15vw, 15rem) !important;
    aspect-ratio: auto !important;
}

#featured .featured__mosaic > a[href="project-009.html"] .project-list-card__text,
#featured .featured__mosaic > a[href="project-011.html"] .project-list-card__text,
#featured .featured__mosaic > a[href="project-010.html"] .project-list-card__text {
    min-height: 3.2rem;
    align-self: start;
}

#featured .featured__mosaic .featured__media img,
#featured .featured__mosaic .featured__media video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
}

@media (max-width: 800px) {
    #featured .featured__mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.5rem 1rem;
    }

    #featured .featured__mosaic > .project-list-card,
    #featured .featured__mosaic > a[href="project-005.html"],
    #featured .featured__mosaic > a[href="project-007.html"],
    #featured .featured__mosaic > a[href="project-009.html"],
    #featured .featured__mosaic > a[href="project-011.html"],
    #featured .featured__mosaic > a[href="project-010.html"] {
        grid-column: span 1 !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 520px) {
    #featured .featured__mosaic {
        grid-template-columns: 1fr;
    }
}

/* Final curated Selected Works columns requested by the portfolio owner. */
#featured .featured__column > a[href="project-009.html"],
#featured .featured__column > a[href="project-010.html"] {
    width: 58% !important;
    align-self: flex-start;
    margin-right: auto !important;
}

#featured .featured__column > a[href="project-009.html"] .featured__media,
#featured .featured__column > a[href="project-010.html"] .featured__media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
}

#featured .featured__column > a[href="project-009.html"] .featured__media img,
#featured .featured__column > a[href="project-009.html"] .featured__media video,
#featured .featured__column > a[href="project-010.html"] .featured__media img,
#featured .featured__column > a[href="project-010.html"] .featured__media video {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

@media (max-width: 700px) {
    #featured .featured__column > a[href="project-009.html"],
    #featured .featured__column > a[href="project-010.html"] {
        width: 100% !important;
    }
}

/* Keep every homepage project label aligned with the left edge of its artwork. */
#featured .project-list-card .project-list-card__text,
#featured .project-list-card:nth-child(even) .project-list-card__text,
#works .project-list-card .project-list-card__text,
#works .project-list-card:nth-child(even) .project-list-card__text {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    align-self: stretch !important;
    justify-self: start !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

#featured .project-list-card .featured__year,
#featured .project-list-card .featured__name,
#works .project-list-card .work-card__year,
#works .project-list-card .work-card__title,
#works .project-list-card .work-card__meta {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
}

/* Two portrait Selected Works share the full Bacardi column without dead space. */
#featured .featured__poster-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 5rem);
    width: 100%;
}

#featured .featured__poster-pair > .project-list-card,
#featured .featured__poster-pair > .project-list-card:nth-child(even) {
    display: flex !important;
    flex-direction: column;
    grid-column: span 1 !important;
    align-self: start !important;
    min-width: 0;
    width: 100% !important;
    margin: 0 !important;
}

#featured .featured__poster-pair .featured__media,
#featured .featured__poster-pair .featured__media img,
#featured .featured__poster-pair .featured__media video {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

/* Stagger the Budweiser Black Gold poster beneath the first portrait poster. */
#featured .featured__poster-pair > a[href="project-009.html"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

#featured .featured__poster-pair > a[href="project-010.html"] {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

/* ============================================
   LOGO WALL — six oversized, alternating lanes
   ============================================ */
.logo-wall {
    --logo-row-height: clamp(39px, 3.75vw, 59px);
    --logo-tile-width: 4500px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 0;
    padding: clamp(3rem, 6vw, 6rem) 0 clamp(7rem, 13vw, 13rem);
    background: transparent;
    color: var(--bg);
}

.logo-wall::before {
    display: none;
}

.logo-wall__header {
    width: min(1280px, calc(100% - clamp(2rem, 9vw, 11rem)));
    margin: 0 auto clamp(3rem, 7vw, 7rem);
}

.logo-wall__kicker {
    display: block;
    margin-bottom: 1.2rem;
    color: #a8a1b8;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.logo-wall__title {
    margin: 0;
    color: #f6f4f8;
    font-family: var(--font-display, "Syne", sans-serif);
    font-size: clamp(3.2rem, 8vw, 9rem);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 0.9;
}

.logo-wall__desc {
    max-width: 34rem;
    margin: 1.5rem 0 0;
    color: rgba(235, 232, 240, 0.58);
    font-size: clamp(0.92rem, 1.2vw, 1.08rem);
    line-height: 1.7;
}

.logo-wall__lanes {
    display: flex;
    flex-direction: column;
    gap: clamp(0.7rem, 1.8vw, 1.5rem);
}

.logo-wall__row {
    position: relative;
    height: var(--logo-row-height);
    overflow: hidden;
    border-top: 0;
    border-bottom: 1px solid rgba(10,10,10,0.1);
    background: transparent;
    isolation: isolate;
}

.logo-wall__row::before {
    display: none;
}

.logo-wall__row::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        circle 22rem at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(185, 102, 255, 0.68) 0%,
        rgba(48, 174, 255, 0.36) 24%,
        rgba(255, 55, 193, 0.22) 40%,
        transparent 70%
    );
    mix-blend-mode: screen;
    transition: opacity 0.32s ease;
}

.logo-wall__row:hover::after {
    opacity: 1;
}

.logo-wall__track {
    display: flex;
    width: max-content;
    height: 100%;
    animation-name: logo-wall-slide-left;
    animation-duration: var(--logo-speed, 24s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
    filter: saturate(0.94);
    transition: filter 0.3s ease;
    -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%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.logo-wall__row:hover .logo-wall__track {
    filter: saturate(1.18) contrast(1.06);
}

.logo-wall__row[data-direction="right"] .logo-wall__track {
    animation-name: logo-wall-slide-right;
}

.logo-wall__tile {
    display: block;
    flex: 0 0 var(--logo-tile-width);
    width: var(--logo-tile-width);
    height: 100%;
    background-image: url("logo-wall-1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.logo-wall__row--1 .logo-wall__tile { background-image: url("logo-wall-1.png"); }
.logo-wall__row--2 .logo-wall__tile { background-image: url("logo-wall-2.png"); }
.logo-wall__row--3 .logo-wall__tile { background-image: url("logo-wall-3.png"); }
.logo-wall__row--4 .logo-wall__tile { background-image: url("logo-wall-4.png"); }
.logo-wall__row--5 .logo-wall__tile { background-image: url("logo-wall-5.png"); }
.logo-wall__row--6 .logo-wall__tile { background-image: url("logo-wall-6.png"); }

@keyframes logo-wall-slide-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes logo-wall-slide-right {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@media (max-width: 700px) {
    .logo-wall__header {
        width: calc(100% - 2.2rem);
        margin-bottom: 2.8rem;
    }

    .logo-wall__title {
        font-size: clamp(3.2rem, 16vw, 5.6rem);
    }

    .logo-wall__desc {
        max-width: 22rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-wall__track {
        animation-play-state: paused;
    }
}


/* Filing information follows the existing quiet footer styling. */
.footer[data-site-footer] {
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
}
.icp-filing {
    display: inline-block;
    color: #a8a8a8;
    font-size: .875rem;
    line-height: 1.7;
    text-decoration: none;
    white-space: nowrap;
}
.icp-filing:hover { color: #f5f5f5; text-decoration: underline; }
.icp-filing:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.project-filing-footer {
    padding: 2rem 6vw;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: center;
}
body.site-footer-visible .floating-contact {
    visibility: hidden;
    pointer-events: none;
}
@media (max-width: 700px) {
    .contact { padding-bottom: 10rem; }
    .footer[data-site-footer] { flex-direction: column; }
}