/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --gold: #B89968;
    --gold-light: #E2C478;
    --gold-dim: #c9b99a;
    --white: #F4F1EC;
    --white-dim: rgba(245,242,236,0.7);
    --white-faint: rgba(245,242,236,0.12);
    --text-muted: rgba(240,237,232,0.45);
    --dark: #0B0B0B;
    --dark-mid: #161618;
    --overlay: rgba(10,9,5,0.62);
    --nav-h-mob: 80px;
    --nav-h-desk: 90px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --border: rgba(245,242,236,0.1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Barlow', sans-serif;
    background: var(--dark);
    color: var(--white);
    overflow-x: hidden;
    min-height: 100vh;
}

/* ─── HERO SECTION ─────────────────────────────────────────── */
.hero {
    position: relative;
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: var(--nav-h-mob);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--dark); /* fallback while video loads */
    overflow: hidden;
}

.hero__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    animation: videoSlowZoom 6s ease-out forwards;
}

@keyframes videoSlowZoom {
    to {
        transform: scale(1);
    }
}

.hero__bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 100% at 60% 0%, transparent 30%, rgba(10,9,5,0.85) 75%, rgba(10,9,5,0.85) 100%), linear-gradient(to right, rgba(10,9,5,0.78) 0%, rgba(10,9,5,0.28) 50%, rgba(10,9,5,0.78) 100%);
    pointer-events: none;
    /* vignette overlay */
    /* radial-gradient(ellipse 120% 100% at 100% 100%,
          transparent 0%,
          rgba(10,9,5,0.75) 75%,
          rgba(10,9,5,0.85) 100%),  */
    /* dark overlay */
    /* linear-gradient(to right,
          rgba(10,9,5,0.72) 0%,
          rgba(10,9,5,0.35) 50%,
          rgba(10,9,5,0.72) 100%),  */
    /* placeholder – replace src with real image */
    /* url('assets/images/hero-bg-wedding.jpg') center/cover no-repeat; */
    z-index: 0;
    transform-origin: center;
    /* animation: bgSlowZoom 18s ease-out forwards; */
}


@keyframes bgSlowZoom {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }
}


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

/* ─── NAV ─────────────────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    height: var(--nav-h-mob);
    gap: 1rem;
    background: transparent;
    transition: background 0.35s ease, backdrop-filter 0.35s ease;
}

.nav--scrolled {
    background: #1a1a1a;
    /* backdrop-filter: blur(12px); */
    /* -webkit-backdrop-filter: blur(12px); */
}

/* Logo */
.nav__logo {
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 4vw, 1.25rem);
    letter-spacing: -0.5px;
    text-decoration: none;
    color: var(--white);
    display: flex;
    gap: 0.3em;
    opacity: 0;
    animation: slideDown 0.7s 0.2s var(--ease-out) forwards;
}

    .nav__logo em {
        font-style: normal;
        color: var(--gold);
    }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

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

/* Desktop nav links — hidden on mobile */
.nav__links {
    display: none;
    list-style: none;
    gap: 2.5rem;
}

    .nav__links a {
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 0.75rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--white);
        text-decoration: none;
        transition: color 0.2s;
    }

        .nav__links a:hover {
            color: var(--white-dim);
        }

/* CTA button */
.nav__cta {
    display: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    border: 1px solid var(--white);
    border-radius: 9999px;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.2s, background 0.2s;
    white-space: nowrap;
    opacity: 0;
    animation: slideDown 0.7s 0.5s var(--ease-out) forwards;
}

    .nav__cta:hover {
        border-color: var(--white);
        background: var(--white-faint);
    }

/* Hamburger (mobile) */
.nav__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 110;
    opacity: 0;
    animation: slideDown 0.7s 0.4s var(--ease-out) forwards;
}

    .nav__burger span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: var(--white);
        transition: transform 0.3s var(--ease-out), opacity 0.3s;
        transform-origin: center;
    }

    .nav__burger.is-open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }

    .nav__burger.is-open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .nav__burger.is-open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

/* Mobile menu drawer */
.nav__drawer {
    position: fixed;
    inset: 0;
    background: #0B0B0B;
    z-index: 105;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease-out), visibility 0.35s;
    overflow-y: auto;
}

    .nav__drawer.is-open {
        opacity: 1;
        visibility: visible;
    }

/* Topbar — logo centred, X button pinned right */
.drawer__topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 1.5rem;
    height: 80px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(245,242,236,0.07);
}


.drawer__logo-text {
    font-family: 'Arial Bold', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.12em;
    color: var(--white);
    text-decoration: none;
    display: flex;
    gap: 0.3em;
}

    .drawer__logo-text em {
        font-style: normal;
        color: var(--gold);
    }

/* X close button */
.drawer__close {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(245,242,236,0.07);
    border: 1px solid rgba(245,242,236,0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}

    .drawer__close:hover {
        background: rgba(245,242,236,0.13);
        border-color: rgba(245,242,236,0.3);
    }

    .drawer__close:active {
        background: rgba(245,242,236,0.2);
    }

    .drawer__close svg {
        width: 15px;
        height: 15px;
        flex-shrink: 0;
    }

.drawer__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem 1.5rem;
}

/* "STUDIO" section label */
.drawer__section-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245,242,236,0.3);
    margin-bottom: 1.5rem;
    display: block;
}

/* Nav links */
.drawer__nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

    .drawer__nav li a {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: clamp(0.875rem, 8vw, 1rem);
        line-height: 1.15;
        color: var(--white);
        text-decoration: none;
        display: block;
        letter-spacing: -0.01em;
        transition: color 0.2s;
    }

        .drawer__nav li a:hover {
            color: var(--gold-light);
        }

/* Bottom action buttons */
.drawer__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    flex-shrink: 0;
}

.drawer__btn {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-radius: 9999px;
    padding: 1rem 1.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    border: none;
    font-family: inherit;
}

.drawer__btn--primary {
    background: var(--white);
    color: var(--dark);
}

    .drawer__btn--primary:hover {
        background: var(--gold-light);
    }

.drawer__btn--close {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(245,242,236,0.25);
}

    .drawer__btn--close:hover {
        border-color: rgba(245,242,236,0.6);
        background: var(--white-faint);
    }

/* Staggered link reveal when drawer opens */
.drawer__section-label,
.drawer__nav li,
.drawer__actions {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.nav__drawer.is-open .drawer__section-label {
    opacity: 1;
    transform: none;
    transition-delay: 0.1s;
}

.nav__drawer.is-open .drawer__nav li:nth-child(1) {
    opacity: 1;
    transform: none;
    transition-delay: 0.15s;
}

.nav__drawer.is-open .drawer__nav li:nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: 0.2s;
}

.nav__drawer.is-open .drawer__nav li:nth-child(3) {
    opacity: 1;
    transform: none;
    transition-delay: 0.25s;
}

.nav__drawer.is-open .drawer__nav li:nth-child(4) {
    opacity: 1;
    transform: none;
    transition-delay: 0.3s;
}

.nav__drawer.is-open .drawer__actions {
    opacity: 1;
    transform: none;
    transition-delay: 0.32s;
}

/* ─── HERO CONTENT ─────────────────────────────────────────── */
.hero__content {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 1.25rem 3rem;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.hero__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0;
    animation: slideUp 0.8s 0.7s var(--ease-out) forwards;
    margin-bottom: 1.25rem;
}

    .hero__eyebrow span {
        color: var(--white-dim);
        margin: 0 0.5em;
    }

.hero__headline {
    font-family: 'Arial Bold', serif;
    font-weight: 700;
    font-size: clamp(3rem, 13vw, 7.5rem);
    line-height: 0.73;
    letter-spacing: -0.1em;
    color: var(--white);
    margin-bottom: 2.5rem;
}

    .hero__headline em {
        font-family: 'Arial Italic', serif;
        font-weight: 600;
        color: var(--gold);
    }

    .hero__headline .line {
        display: block;
        overflow: hidden;
    }

        .hero__headline .line span {
            display: block;
            opacity: 0;
            transform: translateY(110%);
        }

        .hero__headline .line:nth-child(1) span {
            animation: lineReveal 0.9s 0.85s var(--ease-out) forwards;
        }

        .hero__headline .line:nth-child(2) span {
            animation: lineReveal 0.9s 1.05s var(--ease-out) forwards;
            line-height: normal;
        }

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

.hero__body-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.75rem;
    opacity: 0;
    animation: slideUp 0.8s 1.3s var(--ease-out) forwards;
}

.hero__description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.875rem, 2vw, 1rem);
    line-height: 32.5px;
    color: var(--white-dim);
    max-width: 580px;
}

.hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 9999px;
    padding: 0.8rem 1.75rem;
    transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s;
    cursor: pointer;
    border: none;
    display: inline-block;
    white-space: nowrap;
}

    .btn:active {
        transform: scale(0.97);
    }

.btn--primary {
    background: var(--white);
    color: var(--dark);
}

    .btn--primary:hover {
        background: var(--gold);
        color: var(--dark);
    }

.btn--outline {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}

    .btn--outline:hover {
        background: var(--white-faint);
        border-color: var(--white-dim);
    }

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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


/* ─── DESKTOP BREAKPOINTS ──────────────────────────────────── */
@media (min-width: 640px) {
    .nav {
        padding: 0 2.5rem;
    }

    .hero__content {
        padding: 0 2.5rem 3.5rem;
    }
}

@media (min-width: 900px) {
    .nav {
        padding: 0 3rem;
        height: var(--nav-h-desk);
    }

    .nav__links {
        display: flex;
    }

    .nav__cta {
        display: inline-block;
    }

    .nav__burger {
        display: none;
    }

    .hero__content {
        padding: 0 3rem 4.5rem;
    }
}

@media (min-width: 1280px) {
    .nav {
        padding: 0 5rem;
    }

    .hero__content {
        padding: 0 5rem 5rem;
    }
}


/* ─── MARQUEE ──────────────────────────────────────────────── */
.marquee-strip {
    background: var(--dark);
    border-top: 1px solid rgba(245,242,236,0.08);
    border-bottom: 1px solid rgba(245,242,236,0.08);
    overflow: hidden;
    padding: 1.25rem 0;
    position: relative;
}

    /* Fade edges */
    .marquee-strip::before,
    .marquee-strip::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 6rem;
        z-index: 2;
        pointer-events: none;
    }

    .marquee-strip::before {
        left: 0;
        background: linear-gradient(to right, var(--dark), transparent);
    }

    .marquee-strip::after {
        right: 0;
        background: linear-gradient(to left, var(--dark), transparent);
    }

.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 22s linear infinite;
}

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

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

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

.marquee-item {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    font-family: 'Arial ', sans-serif;
    font-weight: 600;
    font-size: clamp(0.85rem, 2vw, 1rem);
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--white);
    padding: 0 2rem;
}

.marquee-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    margin-left: 2rem;
    flex-shrink: 0;
}

/* ─── WHO WE ARE ──────────────────────────────────────────── */
.who {
    background: var(--dark);
    padding: 5rem 1.25rem 5.5rem;
    position: relative;
}

.who__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
    /* align-items: center; */
}



.who__label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--white);
    /* writing-mode: vertical-rl; */
    /* transform: rotate(180deg); */
    user-select: none;
    opacity: 0.4;
}

/* Right — content */

.who__headline {
    font-family: 'Arial Bold', serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 6vw, 3.75rem);
    line-height: 1.15;
    color: var(--white);
    letter-spacing: -0.01em;
    margin-bottom: 1.75rem;
}

    .who__headline em {
        font-style: italic;
        font-weight: 700;
        color: var(--gold);
    }

.who__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white-dim);
    text-decoration: none;
    border-bottom: 1px solid rgba(245,242,236,0.3);
    padding-bottom: 0.2rem;
    transition: color 0.2s, gap 0.2s;
}

    .who__link:hover {
        color: var(--gold);
        gap: 0.75rem;
        border-bottom: 1px solid var(--gold);
    }

    .who__link svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
        transition: transform 0.2s var(--ease-out);
    }

    .who__link:hover svg {
        transform: translateX(3px);
    }


/* Scroll-triggered reveal */
.who__headline,
.who__link {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

    .who__headline.revealed,
    .who__link.revealed {
        opacity: 1;
        transform: translateY(0);
    }


.who__link {
    transition-delay: 0.2s;
}

/* ─── DESKTOP ─────────────────────────────────────────────── */
@media (min-width: 640px) {
    .who {
        padding: 5.5rem 2.5rem 6rem;
    }
}

@media (min-width: 900px) {
    .who {
        padding: 6.5rem 3rem 7rem;
    }

    .who__inner {
        grid-template-columns: 200px 1fr;
        gap: 3rem;
    }

    .who__label-col {
        display: flex;
        align-items: flex-start;
        padding-top: 0.5rem;
    }
}

@media (min-width: 1280px) {
    .who {
        padding: 7rem 5rem 8rem;
    }

    .who__inner {
        gap: 4rem;
    }
}

/* WHAT WE DO — styles */
/* ─── Section wrapper ──────────────────────────────────────── */
.wwd {
    background: #1A1A1A;
    padding: 3.375rem 1.25rem;
}

.wwd__inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* ─── Header row ───────────────────────────────────────────── */
.wwd__header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.wwd__title {
    font-family: 'Arial Bold', serif;
    font-weight: 700;
    font-size: clamp(2.6rem, 9vw, 4.5rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--white);
    /* reveal */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

    .wwd__title.revealed {
        opacity: 1;
        transform: translateY(0);
    }

.wwd__intro {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 24px;
    color: var(--white-dim);
    max-width: 340px;
    /* reveal */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s 0.15s var(--ease-out), transform 0.9s 0.15s var(--ease-out);
}

    .wwd__intro.revealed {
        opacity: 1;
        transform: translateY(0);
    }

/* ─── Grid of service cards ────────────────────────────────── */
.wwd__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* ─── Single service card ──────────────────────────────────── */
.svc-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    cursor: pointer;
    /* reveal */
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

    .svc-card.revealed {
        opacity: 1;
        transform: translateY(0);
    }

/* Background image */
.svc-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-out);
    transform-origin: center;
}

.svc-card:hover .svc-card__img {
    transform: scale(1.04);
}

/* Gradient overlay */
.svc-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    transition: background 0.4s;
}

.svc-card:hover .svc-card__overlay {
    background: rgba(0,0,0,0.4);
}

/* Card number badge */
.svc-card__num {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-family: 'Consolas', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--gold);
    user-select: none;
}

/* Card text content */
.svc-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
}

.svc-card__name {
    font-family: 'Arial Bold', serif;
    font-weight: 700;
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.svc-card__desc {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(245,242,236,0.65);
    max-width: 260px;
}

/* ─── RESPONSIVE GRID ──────────────────────────────────────── */
@media (min-width: 480px) {
    .wwd {
        padding: 3.5rem 1.5rem;
    }

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

    /* First card spans full width on 2-col */
    .svc-card:first-child {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 7;
    }
}

@media (min-width: 768px) {
    .wwd {
        padding: 4rem 2.5rem 5rem;
    }

    .wwd__header {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 3.75rem;
    }

    .wwd__intro {
        max-width: 380px;
    }

    .wwd__grid {
        gap: 1rem;
    }

    .svc-card__name {
        font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    }

    .svc-card__desc {
        font-size: 0.825rem;
    }
}

@media (min-width: 900px) {
    .wwd {
        padding: 5rem 3rem 6rem;
    }

    .wwd__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Remove the 2-col span — let all cards be equal on 3-col */
    .svc-card:first-child {
        grid-column: auto;
        aspect-ratio: 4 / 5;
    }
}

@media (min-width: 1280px) {
    .wwd {
        padding: 6rem 5rem 8rem;
    }

    .wwd__grid {
        gap: 1.25rem;
    }
}



/* SUPPORT SECTION — styles */

/* ── Section wrapper ───────────────────────────────────────── */
.support {
    background: var(--dark);
    padding: 5rem 1.25rem 5.5rem;
}

.support__inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Header row ─────────────────────────────────────────────── */
.support__header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.support__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
}

.support__title {
    font-family: 'Arial Italic', serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.4rem, 8vw, 4.5rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--white);
}

.support__subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--white-dim);
    max-width: 364px;
    align-self: end;
}

/* ── 3-tab toggle row ───────────────────────────────────────── */
.support__tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* ── Single tab card ────────────────────────────────────────── */
.svc-tab {
    border: 1px solid rgba(245,242,236,0.1);
    border-radius: 14px;
    padding: 1.5rem;
    cursor: pointer;
    background: rgba(26,26,26,0.4);
    transition: background 0.3s, border-color 0.3s;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 220px;
}

    /* Active state — cream card */
    .svc-tab.is-active {
        background: var(--white);
        border-color: #F0EDE6;
    }

.svc-tab__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.svc-tab__counter {
    font-family: 'Consolas', sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--gold);
    transition: color 0.3s;
}

.svc-tab.is-active .svc-tab__counter {
    color: rgba(17,16,9,0.6);
}

/* +/× toggle icon */
.svc-tab__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(245,242,236,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.3s;
}

.svc-tab.is-active .svc-tab__icon {
    background: #111009;
}

.svc-tab__icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--white);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke 0.3s, transform 0.3s var(--ease-out);
}

.svc-tab.is-active .svc-tab__icon svg {
    stroke: var(--white);
}

/* Rotate the plus to × when active */
.svc-tab__icon .icon-plus {
    display: block;
}

.svc-tab__icon .icon-close {
    display: none;
}

.svc-tab.is-active .svc-tab__icon .icon-plus {
    display: none;
}

.svc-tab.is-active .svc-tab__icon .icon-close {
    display: block;
}

.svc-tab__body {
    margin-top: auto;
}

.svc-tab__name {
    font-family: 'Arial Bold', sans-serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 3.5vw, 1.85rem);
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.svc-tab.is-active .svc-tab__name {
    color: #0B0B0B;
}

.svc-tab__tagline {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--white-dim);
    margin-bottom: 0.85rem;
    transition: color 0.3s;
}

.svc-tab.is-active .svc-tab__tagline {
    color: rgba(17,16,9,0.7);
}

.svc-tab__state-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: color 0.3s;
}

    /* "VIEWING" shown when active, "LEARN MORE" when inactive */
    .svc-tab__state-label.label-viewing {
        display: none;
        color: rgba(17,16,9,0.75);
    }

    .svc-tab__state-label.label-learn {
        color: rgba(245,242,236,0.4);
    }

.svc-tab.is-active .svc-tab__state-label.label-viewing {
    display: block;
}

.svc-tab.is-active .svc-tab__state-label.label-learn {
    display: none;
}

/* ── Detail panel ───────────────────────────────────────────── */
.support__detail {
    border-radius: 16px;
    overflow: hidden;
    background: rgba(26,26,26,0.4);
    border: 1px solid rgba(245,242,236,0.07);
    display: grid;
    grid-template-columns: 1fr;
}

/* Left image */
.support__detail-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

    .support__detail-img img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s var(--ease-out);
    }

.support__detail-img-overlay {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    pointer-events: none;
}

.support__detail:hover .support__detail-img img {
    transform: scale(1.03);
}

.support__detail-img-label {
    position: absolute;
    bottom: 1rem;
    left: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white);
}

/* Right copy */
.support__detail-copy {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.support__detail-tag {
    font-family: 'Consolas', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

.support__detail-title {
    font-family: 'Arial Bold', sans-serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 5vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--white);
}

.support__detail-desc {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--white-dim);
}

/* What's included */
.support__detail-included-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245,242,236,0.3);
    margin-bottom: 0.75rem;
}

.support__detail-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem 1rem;
    list-style: none;
}

    .support__detail-features li {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 0.82rem;
        color: var(--white-dim);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .support__detail-features li::before {
            content: '✓';
            font-size: 0.7rem;
            color: var(--gold);
            flex-shrink: 0;
        }

/* CTA button */
.support__detail-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.6rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dark);
    background: var(--white);
    text-decoration: none;
    border-radius: 9999px;
    padding: 0.85rem 1.75rem;
    transition: background 0.2s;
    align-self: flex-start;
    border: none;
    cursor: pointer;
}

    .support__detail-cta:hover {
        background: var(--gold-light);
    }

/* Detail panel transition */
.support__detail-copy > * {
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.support__detail.is-switching .support__detail-copy > * {
    opacity: 0;
    transform: translateY(10px);
}

/* Reveal */
.support__header,
.support__tabs,
.support__detail {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

.support__tabs {
    transition-delay: 0.1s;
}

.support__detail {
    transition-delay: 0.2s;
}

    .support__header.revealed,
    .support__tabs.revealed,
    .support__detail.revealed {
        opacity: 1;
        transform: translateY(0);
    }

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 640px) {
    .support {
        padding: 5rem 2.5rem 5.5rem;
    }

    .support__tabs {
        grid-template-columns: repeat(3, 1fr);
    }

    .svc-tab {
        min-height: 250px;
        padding: 2rem;
    }

    .support__detail-features {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .support__header {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 2rem;
    }
}

@media (min-width: 900px) {
    .support {
        padding: 6rem 3rem 7rem;
    }

    .support__detail {
        grid-template-columns: 5fr 7fr;
    }

    .support__detail-img {
        aspect-ratio: auto;
        min-height: 420px;
    }
}

@media (min-width: 1280px) {
    .support {
        padding: 7rem 5rem 8rem;
    }

    .support__detail-copy {
        padding: 3rem 3rem;
    }
}

/* FEATURED EXPERIENCES — styles */

.feat {
    background: var(--dark);
    padding: 5rem 1.25rem 5.5rem;
}

.feat__inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────── */
.feat__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
    gap: 1rem;
}

.feat__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.75rem;
}

.feat__title {
    font-family: 'Arial', serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 8vw, 4.5rem);
    line-height: 1.0;
    letter-spacing: -0.02em;
    color: var(--white);
}

    .feat__title em {
        font-family: 'Arial Italic', serif;
        display: block;
    }

.feat__all-link {
    display: none; /* shown ≥640px */
    align-items: center;
    gap: 0.5rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white-dim);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, gap 0.2s;
    flex-shrink: 0;
    padding-bottom: 0.25rem; /* align to baseline */
}

    .feat__all-link:hover {
        color: var(--white);
        gap: 0.75rem;
    }

    .feat__all-link svg {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.2s var(--ease-out);
    }

    .feat__all-link:hover svg {
        transform: translateX(3px);
    }

/* ── Mosaic grid ──────────────────────────────────────────────
       Mobile  : 1 col stack
       ≥640px  : 2 col, rows shaped by grid-row spans
       ≥900px  : same 2 col but wider gutters
       The bottom "full-width" card always spans both columns.
    ────────────────────────────────────────────────────────────── */
.feat__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* ── Event card ─────────────────────────────────────────────── */
.ev-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    /* default aspect — overridden per card below */
    aspect-ratio: 4 / 3;
    /* reveal */
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

    .ev-card.revealed {
        opacity: 1;
        transform: translateY(0);
    }

.ev-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-out);
}

.ev-card:hover .ev-card__img {
    transform: scale(1.04);
}

.ev-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(10,9,5,0.04) 0%, rgba(10,9,5,0.12) 40%, rgba(10,9,5,0.68) 78%, rgba(10,9,5,0.88) 100% );
}

.ev-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem 1.25rem 1.25rem;
}

.ev-card__name {
    font-family: 'Arial Bold', serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 3.5vw, 1.65rem);
    line-height: 1.1;
    color: var(--white);
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}

.ev-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.ev-card__type {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}

.ev-card__year {
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: rgba(245,242,236,0.35);
    flex-shrink: 0;
}

/* Mobile all-work link (shown only on mobile) */
.feat__all-link-mob {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white-dim);
    text-decoration: none;
    transition: color 0.2s, gap 0.2s;
}

    .feat__all-link-mob:hover {
        color: var(--white);
        gap: 0.75rem;
    }

    .feat__all-link-mob svg {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 640px) {
    .feat {
        padding: 5.5rem 2.5rem 6rem;
    }

    .feat__all-link {
        display: flex;
    }

    .feat__all-link-mob {
        display: none;
    }

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

    /* Row 1: left card taller, right card shorter */
    .ev-card--aurora {
        aspect-ratio: 1.35 / 1;
        grid-row: span 1;
    }

    .ev-card--eden {
        aspect-ratio: 1.35 / 1;
        align-self: end;
    }

    /* Row 2 */
    .ev-card--concrete {
        aspect-ratio: 1.35 / 1;
    }

    .ev-card--archive {
        aspect-ratio: 1.35 / 1;
    }

    /* Row 3: full-width */
    .ev-card--volt {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 6;
    }
}

@media (min-width: 900px) {
    .feat {
        padding: 6rem 3rem 7rem;
    }

    .feat__grid {
        grid-template-columns: repeat(12, 1fr);
        gap: 1.25rem;
    }

    /* Row 1: make left card taller so Eden sits lower, matching screenshot */
    .ev-card--aurora {
        aspect-ratio: 7/4;
        min-height: unset;
        grid-column: span 7;
    }

    .ev-card--eden {
        aspect-ratio: auto;
        min-height: 480px;
        grid-column: span 5;
    }

    .ev-card--concrete {
        aspect-ratio: auto;
        min-height: 480px;
        grid-column: span 5;
    }

    .ev-card--archive {
        aspect-ratio: 7/4;
        min-height: unset;
        grid-column: span 7;
    }

    .ev-card--volt {
        aspect-ratio: 16 / 5.5;
        min-height: unset;
    }
}

@media (min-width: 1280px) {
    .feat {
        padding: 7rem 5rem 8rem;
    }
}

/* WHY CTY — styles */

/* ── Section ────────────────────────────────────────────────── */
.why {
    background: #F0EDE6;
    padding: 4rem 1.25rem 5rem;
}

.why__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.why__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(17,16,9,0.5);
    margin-bottom: 2.5rem;
}

/* ── List of properties ─────────────────────────────────────── */
.why__list {
    list-style: none;
    border-bottom: 1px solid rgba(17,16,9,0.1);
}

.why__item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    border-bottom: 1px solid rgba(17,16,9,0.1);
    padding: 1.5rem 0;
    /* reveal */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

    .why__item.revealed {
        opacity: 1;
        transform: translateY(0);
    }

.why__num {
    font-family: 'Consolas', sans-serif;
    font-size: 0.825rem;
    font-weight: 700;
    letter-spacing: -0.12em;
    color: rgba(17,16,9,0.3);
    flex-shrink: 0;
    min-width: 1.5rem;
    padding-top: 0.2rem;
}

.why__text {
    font-family: 'Arial Bold', sans-serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 6.5vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #111009;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 640px) {
    .why {
        padding: 5rem 2.5rem 5.5rem
    }

    .why__item {
        padding: 1.75rem 0;
    }
}

@media (min-width: 900px) {
    .why {
        padding: 6rem 3rem 7rem;
    }

    .why__item {
        padding: 2rem 0;
        gap: 1.5rem
    }
}

@media (min-width: 1280px) {
    .why {
        padding: 7rem 5rem 8rem;
    }
}

/* DESTINATION EVENTS — styles */

/* ── Section ────────────────────────────────────────────────── */
.dest {
    background: var(--dark);
    padding: 5rem 1.25rem 5.5rem;
}

.dest__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

/* ── Left copy ───────────────────────────────────────────────── */

.dest__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.25rem;
}

.dest__headline {
    font-family: 'Arial Bold', serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 8vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 1.5rem;
}

    .dest__headline em {
        font-style: italic;
        font-weight: 600;
        color: var(--gold-light);
    }

.dest__body {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--white-dim);
    max-width: 400px;
    margin-bottom: 2rem;
}

.dest__cta {
    display: inline-flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    border: 1px solid rgba(245,242,236,0.4);
    border-radius: 9999px;
    padding: 0.85rem 1.75rem;
    transition: border-color 0.2s, background 0.2s;
}

    .dest__cta:hover {
        border-color: var(--white);
        background: var(--white-faint);
    }

/* ── Right image ─────────────────────────────────────────────── */
.dest__image-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.dest__image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    transition: background 0.3s;
}

.dest__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease-out);
}

.dest__image-wrap:hover img {
    transform: scale(1.04);
}

/* Location badge */
.dest__badge {
    position: absolute;
    bottom: 1.75rem;
    left: 1.25rem;
    font-family: 'Consolas', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245,242,236,0.8);
}

    .dest__badge span {
        margin: 0 0.4em;
        color: inherit;
    }

/* Reveal */
.dest__copy,
.dest__image-wrap {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.dest__image-wrap {
    transition-delay: 0.15s;
}

    .dest__copy.revealed,
    .dest__image-wrap.revealed {
        opacity: 1;
        transform: translateY(0);
    }

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 640px) {
    .dest {
        padding: 5.5rem 2.5rem 6rem;
    }
}

@media (min-width: 900px) {
    .dest {
        padding: 6rem 3rem 7rem;
    }

    .dest__inner {
        grid-template-columns: 5fr 7fr;
        gap: 2.5rem;
    }

    .dest__image-wrap {
        aspect-ratio: 73 / 54;
    }
}

@media (min-width: 1280px) {
    .dest {
        padding: 7rem 5rem 8rem;
    }

    .dest__inner {
        gap: 6rem;
    }
}


/* TESTIMONIALS — styles */

.testi {
    background: #1a1a1a;
    padding: 5rem 1.25rem 5.5rem;
}

.testi__inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Header ─────────────────────────────────────────────────── */
.testi__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.75rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

    .testi__eyebrow.revealed {
        opacity: 1;
        transform: translateY(0);
    }

.testi__title {
    font-family: 'Arial Bold', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 7vw, 4.5rem);
    line-height: 1.0;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s 0.1s var(--ease-out), transform 0.8s 0.1s var(--ease-out);
}

    .testi__title em {
        font-style: italic;
        font-weight: 700;
    }

    .testi__title.revealed {
        opacity: 1;
        transform: translateY(0);
    }

/* ── Slider card ─────────────────────────────────────────────── */
.testi__card {
    background: #0A0A0A66;
    border: 1px solid rgba(245,242,236,0.1);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.85s 0.2s var(--ease-out), transform 0.85s 0.2s var(--ease-out);
    backface-visibility: hidden; /* helps with text rendering during transitions */
}

    .testi__card.revealed {
        opacity: 1;
        transform: translateY(0);
    }

/* Quote text */
.testi__quote {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 3.2vw, 1.75rem);
    line-height: 1.45;
    color: var(--white);
    max-width: 900px;
    /* Slide transition between quotes */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

    .testi__quote.is-leaving {
        opacity: 0;
        transform: translateX(-20px);
    }

    .testi__quote.is-entering {
        opacity: 0;
        transform: translateX(20px);
    }

/* Bottom row: attribution + dots + arrows */
.testi__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.testi__author {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: rgba(245,242,236,0.45);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

    .testi__author::before {
        content: '';
        display: inline-block;
        width: 0.75rem;
        height: 1px;
        background: rgba(245,242,236,0.35);
    }

/* Dot progress indicators */
.testi__dots {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.testi__dot {
    height: 2px;
    border-radius: 2px;
    background: rgba(245,242,236,0.25);
    width: 0.875rem;
    transition: background 0.3s, width 0.3s;
    cursor: pointer;
    border: none;
    padding: 0;
}

    .testi__dot.active {
        background: var(--gold);
        width: 1.5rem;
    }

/* Arrow buttons */
.testi__arrows {
    display: flex;
    gap: 2rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.testi__arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(245,242,236,0.2);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}

    .testi__arrow:hover {
        border-color: var(--white-dim);
        background: var(--white-faint);
    }

    .testi__arrow svg {
        width: 16px;
        height: 16px;
        stroke: var(--white);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ── Responsive ─────────────────────────────────────────────── */
@media (min-width: 640px) {
    .testi {
        padding: 5.5rem 2.5rem 6rem;
    }

    .testi__card {
        padding: 3rem 2.5rem 2.25rem;
        min-height: 300px;
    }
}

@media (min-width: 900px) {
    .testi {
        padding: 6rem 3rem 7rem;
    }

    .testi__card {
        padding: 3.5rem 3rem 2.5rem;
        min-height: 320px;
    }

    .testi__dots {
        gap: 0.5rem;
    }

    .testi__dot {
        width: 2rem;
    }

        .testi__dot.active {
            width: 2rem;
        }

    .testi__arrows {
        margin-top: 3.5rem;
    }
}

@media (min-width: 1280px) {
    .testi {
        padding: 7rem 5rem 8rem;
    }
}

/* ─── GET IN TOUCH ────────────────────────── */
.contact {
    background: var(--dark);
    padding: 5rem 1.25rem 5.5rem;
}

.contact__inner {
    max-width: 1280px;
    margin: 0 auto;
}

.contact__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

    .contact__eyebrow.revealed {
        opacity: 1;
        transform: translateY(0);
    }

.contact__headline {
    font-family: 'Arial', sans-serif;
    font-weight: 700;
    font-size: clamp(2.75rem, 9vw, 5.5rem);
    line-height: 1.0;
    letter-spacing: -0.03em;
    color: var(--white);
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s 0.08s var(--ease-out), transform 0.8s 0.08s var(--ease-out);
}

    .contact__headline em {
        font-style: italic;
        color: var(--white);
    }

    .contact__headline.revealed {
        opacity: 1;
        transform: translateY(0);
    }

/* 3-col cards grid */
.contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.85s 0.18s var(--ease-out), transform 0.85s 0.18s var(--ease-out);
}

    .contact__grid.revealed {
        opacity: 1;
        transform: translateY(0);
    }

/* Individual contact card */
.contact-card {
    border: 1px solid rgba(245,242,236,0.1);
    border-radius: 12px;
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: rgba(255,255,255,0.02);
    transition: border-color 0.25s, background 0.25s;
    text-decoration: none;
}

    .contact-card:hover {
        border-color: rgba(245,242,236,0.22);
        background: rgba(255,255,255,0.04);
    }

.contact-card__label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245,242,236,0.35);
    display: block;
}

.contact-card__value {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    color: var(--white);
    line-height: 1.3;
}

.contact-card__open {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245,242,236,0.4);
    transition: color 0.2s, gap 0.2s;
    margin-top: auto;
}

.contact-card:hover .contact-card__open {
    color: var(--white);
    gap: 0.75rem;
}

.contact-card__open svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s var(--ease-out);
}

.contact-card:hover .contact-card__open svg {
    transform: translateX(3px);
}

@media (min-width: 640px) {
    .contact {
        padding: 5.5rem 2.5rem 6rem;
    }

    .contact__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 900px) {
    .contact {
        padding: 6rem 3rem 7rem;
    }

    .contact-card {
        padding: 2rem 1.75rem 1.75rem;
    }
}

@media (min-width: 1280px) {
    .contact {
        padding: 7rem 5rem 8rem;
    }

    .contact__grid {
        gap: 1.25rem;
    }
}

/* ── Footer wrapper ─────────────────────────────────────────── */
.site-footer {
    background: var(--dark);
    padding: 5rem 1.25rem 2.5rem;
    border-top: 1px solid rgba(245,242,236,0.07);
}

.site-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
}

/* ── Top block: CTA headline + nav columns ──────────────────── */
.footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem;
    padding-bottom: 4rem;
}

/* CTA headline */
.footer__cta-headline {
    font-family: 'Arial Bold', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: 0.93;
    letter-spacing: -0.03em;
    color: var(--white);
}

    .footer__cta-headline em {
        font-style: italic;
        color: var(--gold);
        display: block;
    }

/* Send brief link */
.footer__brief-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 2.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid rgba(245,242,236,0.3);
    padding-bottom: 0.2rem;
    transition: color 0.2s, border-color 0.2s, gap 0.2s;
}

    .footer__brief-link:hover {
        color: var(--gold);
        border-color: var(--gold);
        gap: 0.9rem;
    }

    .footer__brief-link svg {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

/* Nav columns wrapper */
.footer__nav-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* Column label */
.footer__nav-col-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245,242,236,0.3);
    margin-bottom: 1rem;
    display: block;
}

/* Nav list */
.footer__nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .footer__nav-list a {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 0.875rem;
        color: var(--white);
        text-decoration: none;
        transition: color 0.2s;
        display: inline-block;
    }

        .footer__nav-list a:hover {
            color: var(--gold-light);
        }

        .footer__nav-list a.footer__email {
            font-size: clamp(0.82rem, 2vw, 0.95rem);
        }

            .footer__nav-list a.footer__email:hover {
                color: var(--white);
            }

/* ── Divider ────────────────────────────────────────────────── */
.footer__divider {
    width: 100%;
    height: 1px;
    background: rgba(245,242,236,0.1);
    margin-bottom: 2.5rem;
}



/* ── Bottom bar ─────────────────────────────────────────────── */
.footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.footer__copy {
    font-family: 'Inter', sans-serif;
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(245,242,236,0.28);
}

.footer__legal {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

    .footer__legal a {
        font-family: 'Inter', sans-serif;
        font-size: 0.625rem;
        font-weight: 400;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(245,242,236,0.28);
        text-decoration: none;
        transition: color 0.2s;
    }

        .footer__legal a:hover {
            color: var(--white-dim);
        }

/* ── Reveal ─────────────────────────────────────────────────── */
.footer__cta-headline,
.footer__brief-link,
.footer__nav-cols {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

.footer__brief-link {
    transition-delay: 0.1s;
}

.footer__nav-cols {
    transition-delay: 0.18s;
}

    .footer__cta-headline.revealed,
    .footer__brief-link.revealed,
    .footer__nav-cols.revealed {
        opacity: 1;
        transform: translateY(0);
    }

/* ── Desktop ────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .site-footer {
        padding: 5.5rem 2.5rem 3rem;
    }
}

@media (min-width: 900px) {
    .site-footer {
        padding: 6rem 3rem 3rem;
    }

    .footer__top {
        grid-template-columns: 1fr auto;
        gap: 2rem;
        align-items: flex-start;
        padding-bottom: 5rem;
    }

    .footer__nav-cols {
        gap: 4rem;
        padding-top: 0.5rem;
    }

    .footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width: 1280px) {
    .site-footer {
        padding: 7rem 5rem 3.5rem;
    }

    .footer__top {
        grid-template-columns: 1fr 420px;
        gap: 3rem;
    }

    .footer__nav-cols {
        gap: 5rem;
    }
}