/* ─── HERO SECTION ───────────────────────────────────────── */
#hero {
    --hero-inline: var(--section-inline);
    /* Figma strip height 80px + notch inset (shared with drawer offset fallback) */
    --hero-top-bar-h: 80px;
    --hero-top-bar-total: calc(var(--hero-top-bar-h) + env(safe-area-inset-top, 0px));
    position: relative;
    width: 100%;
    min-height: max(560px, 100svh);
    min-height: max(560px, 100dvh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    box-sizing: border-box;
}


/* Video background */
.hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}


.hero-video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(19, 19, 19, 0) 0%, rgba(19, 19, 19, 0) 60%, rgba(19, 19, 19, 0.6) 85%, #131313 100%);
    z-index: 1;
    pointer-events: none;
}


.hero-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 100%;
}




/* Hero content starts below fixed-height top strip + breathing room */
.hero-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto;
    width: 100%;
    padding:
        calc(var(--hero-top-bar-total) + clamp(24px, 5vmin, 72px)) var(--hero-inline) clamp(64px, 12vh, 160px) var(--hero-inline);
    box-sizing: border-box;
    min-height: 0;
}


.hero-headline {
    margin-top: clamp(24px, 6vh, 80px);
    align-self: flex-start;
    margin-bottom: 0;
    /* Wide enough that line 2 stays one line at large sizes (design: two lines total) */
    max-width: min(100%, 56rem);
    width: 100%;
}


.hero-headline h1 {
    margin: 0;
    font-weight: 700;
    font-size: clamp(2.25rem, 2.35vw + 1.85rem, 5rem);
    line-height: 1.14;
    letter-spacing: -0.035em;
    text-wrap: unset;
    color: var(--white);
}


.hero-headline h1 span {
    display: block;
    overflow: hidden;
    vertical-align: bottom;
}


.hero-headline h1 span em {
    display: block;
    font-style: normal;
    animation: heroTitleReveal 1.4s var(--ease-expo) both;
}


.hero-headline h1 span:nth-child(1) em {
    animation-delay: 0.1s;
}


.hero-headline h1 span:nth-child(2) em {
    animation-delay: 0.2s;
}


.hero-headline h1 span:nth-child(3) em {
    animation-delay: 0.3s;
}


@keyframes heroTitleReveal {
    from {
        transform: translateY(110%);
        opacity: 0;
    }

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


/* Tablet — after base headline rules so this font-size wins */

.hero-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    margin-top: clamp(32px, 7vh, 72px);
    animation: fadeInUp 1.2s var(--ease-expo) 1s both;
}


.hero-right {
    text-align: right;
    max-width: min(506px, 100%);
    margin-left: auto;
    width: 100%;
}


.hero-right p.hero-lead {
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 clamp(20px, 4vmin, 32px);
    max-width: 36em;
    margin-inline-start: auto;
    font-family: Archivo;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0%;
    text-align: right;
    vertical-align: middle;
}


.hero-buttons {
    display: flex;
    gap: clamp(10px, 2vw, 18px);
    justify-content: flex-end;
    flex-wrap: wrap;
    width: auto;
    max-width: 100%;
}


.btn-primary {
    padding: clamp(14px, 2.2vmin, 22px) clamp(28px, 4vw, 44px);
    background: var(--white);
    color: var(--black);
    font-family: var(--font-main);
    font-size: clamp(15px, 0.85vw + 0.82rem, 1.125rem);
    font-weight: 500;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.25s, color 0.25s, transform 0.2s;
    white-space: nowrap;
}


.btn-primary:hover {
    background: rgba(164, 119, 100, 1);
    color: rgba(240, 240, 229, 1);
    transform: translateY(-2px);
}


.btn-outline {
    padding: clamp(14px, 2.2vmin, 22px) clamp(28px, 4vw, 44px);
    background: transparent;
    color: var(--white);
    font-family: var(--font-main);
    font-size: clamp(15px, 0.85vw + 0.82rem, 1.125rem);
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: border-color 0.25s, background 0.25s, transform 0.2s;
    white-space: nowrap;
}


.btn-outline:hover {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}


/* ─── OFFERINGS: pinned progressive copy + crossfade visuals ─ */
#offerings {
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    background: #0a0a0a;
    position: relative;
    z-index: 15;
    padding-block-start: clamp(80px, 10vh, 120px);
    --offerings-inline-start: max(var(--section-inline), env(safe-area-inset-left, 0px));
    scroll-margin-top: 0;
    overflow-anchor: none;
    isolation: isolate;
}


.offerings-stack-wrap {
    position: relative;
    width: 100%;
    min-height: 400vh;
}


/* GSAP pins this stage while stacked copy + images crossfade (desktop ≥1200). */
.offerings-stage {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: #0a0a0a;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    box-sizing: border-box;
    gap: clamp(20px, 3.8vh, 40px);
    padding-block: var(--offerings-pin-padding-block);
    padding-inline: 0;
}


/*
         * Design: eyebrow sits just under the header with a large gap before the card stack — not vertically centered.
         */

/* Center title only on mobile stack — hidden on large desktop via media */
.offerings-heading {
    margin: 0;
    width: 100%;
    color: var(--white);
    padding-inline: max(var(--section-inline), env(safe-area-inset-left, 0px)) max(var(--section-inline), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: center;
    padding-bottom: 40px;
}


/* Top eyebrow — small uppercase line */
.offerings-eyebrow {
    position: sticky;
    top: var(--nav-bar-outer-height);
    z-index: 20;
    background: var(--black);
    padding-top: 16px;
    padding-bottom: clamp(16px, 2.5vh, 24px);
    margin: 0 0 clamp(24px, 4vw, 48px);
    align-self: flex-start;
    display: block;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 2%;
    vertical-align: bottom;
    text-transform: uppercase;
}


.offering-progressive {
    --offering-pad-before-rule: clamp(20px, 2.8vh, 36px);
    --offering-gap-after-block: clamp(28px, 4.2vh, 48px);
    display: grid;
    grid-template-columns: minmax(0, 0.48fr) minmax(0, 0.52fr);
    align-items: start;
    column-gap: clamp(24px, 4vw, 64px);
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 0 var(--offerings-inline-start);
    box-sizing: border-box;
    flex: 0 1 auto;
    min-height: min(620px, calc(100svh - 2 * var(--offerings-pin-padding-block)));
}


.offering-progressive-copy {
    align-self: start;
    padding: 0;
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


/*
         * Desktop: rows 2…n are stacked absolutely (GSAP); stacking context reference for top/offsets.
         */

.offering-progressive-block {
    overflow: hidden;
    will-change: transform;
}


.offering-progressive-block:not(:last-child) {
    padding-bottom: var(--offering-pad-before-rule);
    margin-bottom: var(--offering-gap-after-block);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}


.offering-progressive-block:first-child:not(:only-child) {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}


.offering-progressive-block:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}


.offering-progressive-block-inner {
    transform: translateZ(0);
    box-sizing: border-box;
}


/* Design ref: titles ~24–32px, body ~16–18px — not hero-scale */
.offering-progressive-block h3 {
    margin: 0 0 clamp(6px, 0.9vw, 12px);
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(22px, 0.85vw + 17px, 32px);
    line-height: 1.16;
    letter-spacing: -0.02em;
}


.offering-desc {
    max-width: 100%;
    margin: 0;
    padding-top: 0;
    color: rgba(255, 255, 255, 0.72);
    font-family: Archivo, var(--font-main), sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 0.35vw + 14px, 18px);
    line-height: 1.52;
}


.offering-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(18px, 2.4vh, 26px);
    padding-top: clamp(12px, 1.5vh, 20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}


.offering-tag {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(12px, 0.4vw + 11px, 14px);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    font-family: var(--font-main), sans-serif;
}


/* Bleed to viewport right edge: negate grid gap + left gutter bleed + safe area */
.offering-progressive-visual {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    width: calc(100% + var(--offerings-inline-start) + clamp(24px, 4vw, 64px));
    max-width: none;
    margin-right: calc(clamp(24px, 4vw, 64px) * -1 - max(0px, env(safe-area-inset-right, 0px)));
    background: #0a0a0a;
    padding: 0;
    min-height: inherit;
}


/* position: relative required so .offering-visual-layers (absolute inset:0) stacks images; without it, layers stack in document flow and all show at once */
.offering-visual-frame {
    position: relative;
    width: 100%;
    max-width: none;
    height: min(84vh, 980px);
    min-height: min(64vh, 760px);
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}


.offering-visual-layers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


.offering-visual-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    pointer-events: none;
    transform: translateZ(0) scale(1);
    will-change: transform;
    backface-visibility: hidden;
}


.offering-visual-layer:first-of-type {
    opacity: 1;
}


.offerings-desktop {
    width: 100%;
}


/*
         * Mobile / tablet (≤1199px): Full-viewport cards with image as background
         * and text overlaying at the bottom. Sticky stacking on scroll.
         */
.offerings-mobile-stack {
    display: none;
    width: 100%;
    position: relative;
    background: #000;
    --offerings-mobile-pin-top: var(--nav-bar-outer-height);
    overflow-anchor: none;
    isolation: isolate;
}


/* Sticky section heading - stays visible while slides scroll */
.offerings-mobile-sticky-title {
    position: sticky;
    top: var(--nav-bar-outer-height);
    z-index: 100;
    margin: 0;
    padding-top: 16px;
    padding-bottom: 20px;
    padding-inline: max(var(--section-inline), env(safe-area-inset-left, 0px)) max(var(--section-inline), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    background: #000;
}


.offerings-mobile-heading {
    margin: 0;
    padding: 0;
    font-family: Archivo, sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}


/* Hide the eyebrow inside cards since main heading is sticky */
.offerings-eyebrow--mobile {
    display: none;
}


/*
         * Card layout: Image fills the card, text overlays at bottom
         * Matching the design reference UI exactly
         */
.offering-mobile-slide-placeholder--DELETED {
    position: sticky;
    top: var(--offerings-mobile-pin-top);
    /* Above ScrollTrigger pin layers so “Offerings” stays visible over each card */
    z-index: 5000;
    margin: 0;
    padding:
        clamp(12px, 3.5vw, 18px) max(var(--section-inline), env(safe-area-inset-left, 0px)) clamp(14px, 3.5vw, 20px) max(var(--section-inline), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    text-align: center;
    font-weight: 700;
    font-size: clamp(1.75rem, 5.5vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--white);
    background: #0a0a0a;
    border: none;
    box-shadow: none;
}


.offerings-mobile-heading {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-align: left;
    /* margin: 0 0 clamp(24px, 4vh, 48px); */
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 2%;
    vertical-align: bottom;
    text-transform: uppercase;
}


.offerings-eyebrow--mobile {
    margin: 0 0 clamp(6px, 1.5vw, 10px);
}


/*
         * Card layout: Image fills the card, text overlays at bottom
         * Slides stick below the sticky header
         */
.offering-mobile-slide {
    position: sticky;
    top: calc(var(--nav-bar-outer-height) + 48px);
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #131313;
    border-top: none;
    box-sizing: border-box;
}


/* Media block: portrait aspect-ratio, image fills it fully */
.offering-mobile-slide-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
}


/* Z-index stacking for scroll overlap - slides start after sticky header */
.offerings-mobile-stack .offering-mobile-slide:nth-of-type(1) {
    z-index: 1;
}


.offerings-mobile-stack .offering-mobile-slide:nth-of-type(2) {
    z-index: 2;
}


.offerings-mobile-stack .offering-mobile-slide:nth-of-type(3) {
    z-index: 3;
}


.offerings-mobile-stack .offering-mobile-slide:nth-of-type(4) {
    z-index: 4;
}


.offerings-mobile-stack .offering-mobile-slide:nth-of-type(5) {
    z-index: 5;
}


.offering-mobile-slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: #000;
}


.offering-mobile-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


/* Subtle bottom fade for visual finish */
.offering-mobile-slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, #131313, transparent);
}


/* Content sits below the image on the dark card background */
.offering-mobile-slide-content {
    position: relative;
    z-index: 5;
    width: 100%;
    padding: 20px max(20px, var(--section-inline)) 28px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}


.offering-mobile-slide-text {
    max-width: 100%;
}


.offering-mobile-slide-text h3 {
    margin: 0 0 8px;
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
}


.offering-mobile-slide-text p.offering-desc {
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-family: Archivo, sans-serif;
    font-weight: 400;
    font-size: clamp(0.875rem, 3.5vw, 1rem);
    line-height: 1.5;
}


.offering-mobile-slide-text .offerings-eyebrow--mobile {
    display: none;
}


/* ─── WORK / PROJECTS SECTION (Sticky Stacking) ────────── */
#work {
    --work-inline: var(--section-inline);
    --work-bottom: clamp(32px, 8vh, 88px);
    --work-sticky-top: var(--nav-bar-outer-height);
    background: var(--black);
    padding: 0;
    /* Air above “The Worlds You’ve Built” before sticky engagement */
    padding-block-start: 0;
    padding-block-end: 0;
    position: relative;
    isolation: isolate;
    scroll-margin-top: 0;
}


#work>h2.work-eyebrow {
    position: sticky;
    top: var(--work-sticky-top);
    z-index: 20;
    background: var(--black);
    padding-top: 16px;
    padding-bottom: clamp(16px, 2.5vh, 32px);
    padding-inline: max(var(--section-inline), env(safe-area-inset-left, 0px)) max(var(--section-inline), env(safe-area-inset-right, 0px));
    text-align: left;
    margin: 0 0 clamp(24px, 4vh, 48px);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 2%;
    vertical-align: bottom;
    text-transform: uppercase;
    /* Stabilization for sticky state transitions */
    will-change: transform;
    transform: translateZ(0);
}


#work>.work-empty {
    margin: 0;
    padding-inline: max(var(--section-inline), env(safe-area-inset-left, 0px)) max(var(--section-inline), env(safe-area-inset-right, 0px));
    padding-bottom: clamp(48px, 10vh, 120px);
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-main);
    font-size: clamp(0.9375rem, 2vw, 1.125rem);
    line-height: 1.45;
}


/* Anchor: first slide snaps flush under the nav bar when linked from menu */
#work-first-slide {
    scroll-margin-top: var(--nav-bar-outer-height);
}


.work-slide {
    position: sticky;
    top: 0;
    width: 100%;
    height: auto;
    min-height: max(480px, 100svh);
    min-height: max(480px, 100dvh);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding-bottom: calc(var(--work-bottom) + env(safe-area-inset-bottom, 0));
    background: var(--black);
    border-top: 1px solid var(--border);
    box-sizing: border-box;
}


/* First sibling in #work is h2 → slides start at nth-child(2) */
#work>.work-slide:nth-child(2) {
    z-index: 1;
}


#work>.work-slide:nth-child(3) {
    z-index: 2;
}


#work>.work-slide:nth-child(4) {
    z-index: 3;
}


#work>.work-slide:nth-child(5) {
    z-index: 4;
}


/* Last work slide: make it non-sticky so it scrolls away naturally */
.work-slide:last-of-type {
    position: relative;
    top: auto;
}


.work-slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}


.work-slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 1.2s var(--ease-expo);
}


.work-slide-bg.work-slide-bg--empty {
    background: linear-gradient(165deg, #222 0%, #0d0d0d 55%, #080808 100%);
}


/* .work-slide-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.28) 42%, transparent 100%);
z-index: 1;
        } */

.work-slide-content {
    position: relative;
    z-index: 5;
    padding: 0 var(--work-inline);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(16px, 4vw, 40px);
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
}


.work-slide-info h3 {
    margin: 0 0 clamp(8px, 1.5vw, 14px);
    color: var(--white);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw + 1rem, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 2px 24px rgba(0, 0, 0, 0.35);
}


.work-slide-info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-main);
    font-weight: 400;
    font-size: clamp(0.9375rem, 0.65vw + 0.8rem, 1.375rem);
    line-height: 1.45;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 16px rgba(0, 0, 0, 0.3);
}


.work-arrow-btn {
    width: clamp(52px, 11vw, 72px);
    height: clamp(52px, 11vw, 72px);
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.35s var(--ease-expo), background 0.35s var(--ease-expo), transform 0.35s var(--ease-expo);
    flex-shrink: 0;
    align-self: flex-end;
}


a.work-arrow-btn {
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}


a.work-arrow-btn:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}


.work-arrow-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}


.work-arrow-btn:active {
    transform: scale(0.96);
}


.work-arrow-btn svg {
    width: clamp(18px, 3.5vmin, 24px);
    height: clamp(18px, 3.5vmin, 24px);
    stroke: var(--white);
    fill: none;
    transition: stroke 0.35s var(--ease-expo);
}


/* Work — intermediate screens */

/*
         * Tablet / phone: same sticky stacking as desktop —
         * eyebrow sticks under fixed nav (--work-sticky-top); slides stack with ascending z-index.
         */

/* Work — phone: stack caption + arrow for readability */

/* Work — landscape short viewport */

/* ─── PARTNERS SECTION — sticky heading (parity with Work / Where We Belong) ─── */
#partners {
    background: var(--black);
    --partners-inline: var(--section-inline);
    --partners-sticky-top: var(--nav-bar-outer-height);
    position: relative;
    isolation: isolate;
    scroll-margin-top: 0;
    overflow-anchor: none;
    padding-block: clamp(80px, 12vh, 140px) clamp(64px, 14vw, 160px);
    padding-left: max(var(--partners-inline), env(safe-area-inset-left, 0px));
    padding-right: max(var(--partners-inline), env(safe-area-inset-right, 0px));
    border-top: 1px solid var(--border);
    box-sizing: border-box;
}


#partners>h2.partners-eyebrow {
    position: sticky;
    top: var(--partners-sticky-top);
    z-index: 22;
    background: var(--black);
    padding-top: 16px;
    padding-bottom: clamp(14px, 3vw, 28px);
    padding-inline: 0;
    margin: 0 0 clamp(40px, 6vw, 64px);
    width: 100%;
    max-width: min(1200px, 100%);
    text-align: left;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 2%;
    vertical-align: bottom;
    text-transform: uppercase;
    /* Stabilization for sticky state transitions */
    will-change: transform;
    transform: translateZ(0);
}


.partners-subheading {
    position: sticky;
    top: var(--partners-sticky-top);
    z-index: 21;
    background: var(--black);
    padding-top: 16px;
    padding-bottom: clamp(14px, 3vw, 28px);
    margin: 0 0 clamp(24px, 4vw, 40px);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 2%;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 clamp(40px, 6vw, 64px);
    /* Stabilization for sticky state transitions */
    will-change: transform;
    transform: translateZ(0);
}


.partners-tier-spacer {
    height: clamp(60px, 10vw, 100px);
}


.partners-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1600px;
    box-sizing: border-box;
    background: transparent;
}


.partner-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s var(--ease-expo);
    cursor: pointer;
    aspect-ratio: 296 / 150;
    width: 100%;
    max-width: 296px;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
}


.partner-card img {
    max-width: 100%;
    object-fit: cover;
    transition: all 0.4s var(--ease-expo);
}


.partner-card span:last-child {
    font-size: clamp(0.6875rem, 2.25vw + 0.42rem, 1rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
    hyphens: manual;
}


.partner-asterisk {
    font-size: clamp(14px, 3.2vw, 20px);
    color: var(--copper);
    opacity: 0.8;
    flex-shrink: 0;
}


/* Partners — tablet: 3 columns */

/* ─── HOW THE MAGIC HAPPENS — roadmap line + alternating step reveals (scroll-linked) ─ */
#magic-how {
    background: var(--black);
    --magic-how-sticky-top: var(--nav-bar-outer-height);
    position: relative;
    isolation: isolate;
    scroll-margin-top: 0;
    overflow-anchor: none;
    /* Let diagram captions extend; was clipping right-edge / wide labels */
    overflow-x: visible;
    overflow-y: visible;
    padding-block: 0 clamp(40px, 7vw, 72px);
    padding-left: max(var(--section-inline), env(safe-area-inset-left, 0px));
    padding-right: max(var(--section-inline), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}


/* Title: same sticky eyebrow pattern as Process / Partners; diagram pins inside .magic-how-pin-root */
#magic-how>.magic-how-eyebrow {
    position: sticky;
    top: var(--magic-how-sticky-top);
    z-index: 26;
    background: var(--black);
    padding-top: 16px;
    padding-bottom: clamp(12px, 2.5vh, 24px);
    padding-inline: 0;
    text-align: left;
    /* Restored breathing room above diagram (Path-2 band is short vs old 520px viewBox) */
    margin: 0 0 clamp(48px, 8vw, 104px);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    max-width: min(1400px, 100%);
    /* Stabilization for sticky state transitions */
    will-change: transform;
    transform: translateZ(0);
}


.magic-how-pin-root {
    position: relative;
    width: 100%;
    overflow: visible;
}


/* Pinned “keep scrolling” cue (desktop): viewport-fixed so it’s visible before pin (not at bottom of tall pin-root). */
#magic-how .magic-how-scroll-cue {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(clamp(20px, 4vh, 48px), env(safe-area-inset-bottom, 0px));
    width: max-content;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
    z-index: 1010;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.2vw, 12px);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.72);
    font-family: Archivo, var(--font-main), sans-serif;
    font-weight: 600;
    font-size: clamp(10px, 0.75vw + 0.52rem, 12px);
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
}


#magic-how .magic-how-scroll-cue__mouse {
    display: block;
}


#magic-how .magic-how-scroll-cue__mouse svg {
    display: block;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
    animation: magic-how-scroll-cue-bob 1.5s ease-in-out infinite;
}


@keyframes magic-how-scroll-cue-bob {

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

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


.magic-how-body {
    position: relative;
    width: 100%;
    max-width: min(1600px, 100%);
    margin-inline: auto;
    padding-top: clamp(36px, 5.5vw, 80px);
    padding-bottom: clamp(28px, 5vw, 56px);
    z-index: 1;
    overflow: visible;
}


/* Outer shell — tall stage + centered path band so top labels aren’t clipped. */
.magic-how-svg-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto clamp(44px, 8vw, 72px);
    overflow: visible;
}


/* Path occupies 298/458 of stage height; rest is air for above/below copy. */
.magic-how-diagram-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1604 / 458;
    --magic-r: calc(298 / 458);
    overflow: visible;
}


.magic-how-diagram-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    aspect-ratio: 1604 / 298;
    z-index: 1;
    pointer-events: none;
}


.magic-how-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    color: #fff;
    position: relative;
    z-index: 1;
    pointer-events: none;
}


.magic-how-svg path.magic-how-path-fill {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Main stroke: cream + tail fade (Path-2 geometry, scaled via viewBox). */
#magic-how .magic-how-svg path#magicHowPathStroke.magic-how-path-main {
    stroke: url(#magicHowPathStrokeGrad);
    stroke-width: 5;
}


.magic-how-node-marker {
    transform-box: fill-box;
    transform-origin: center;
}


.magic-how-node-ring {
    fill: #fff;
    stroke: rgba(236, 232, 223, 0.88);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
}


.magic-how-node-dot {
    fill: rgba(164, 119, 100, 1);
    opacity: 0.92;
    vector-effect: non-scaling-stroke;
}


.magic-how-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Sit above svg paint so captions never sit “under” the stroke in stacking order */
    z-index: 3;
    overflow: visible;
}


/*
         * Overlay is full diagram stage (taller than path). --ay is 0–1 on path; path band is vertically centered (--magic-r).
         * Horizontal: label centered on node (left = --lx, GSAP xPercent:-50). Top captions: yPercent:-100, origin bottom center.
         */
.magic-how-step-label {
    position: absolute;
    width: clamp(180px, 20vw, 300px);
    max-width: min(300px, 42vw);
    left: calc(var(--lx, 0.5) * 100% + var(--lx-nudge, 0px));
    text-align: center;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
}


.magic-how-step-label[data-enter='bottom'] {
    top: calc((1 - var(--magic-r)) * 50% + var(--ay, 0.702) * var(--magic-r) * 100% + clamp(68px, 21%, 152px) + var(--below-extra, 0px));
}


/* Extra gap above path for “top” captions (even steps) — stem junction sits clearly above the curve. */
.magic-how-step-label[data-enter='top'] {
    top: calc((1 - var(--magic-r)) * 50% + var(--ay, 0.702) * var(--magic-r) * 100% - clamp(96px, 24%, 188px) - var(--top-extra, 0px));
    /* Air between stem tip and text (yPercent:-100 anchors box bottom) */
    padding-bottom: clamp(10px, 1.5vw, 16px);
    box-sizing: border-box;
}


.magic-how-step-label p {
    margin: 0;
    padding: 0.2em 0 0.15em;
    color: rgba(255, 255, 255, 0.88);
    font-family: Archivo;
    font-weight: 400;
    font-size: clamp(18px, 1.05vw + 0.55rem, 21px);
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-wrap: balance;
}


.magic-how-step-label[data-enter='top'] p {
    padding: 0.2em 0 0;
}


/* Connector lines animate in via GSAP after path draw (.magic-how-cc) */

.magic-how-footnote {
    position: relative;
    z-index: 1020;
    max-width: 86%;
    margin: clamp(64px, 12vw, 120px) auto 0;
    text-align: center;
    white-space: nowrap;
    font-family: Archivo, var(--font-main), sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 1.05vw + 0.62rem, 17px);
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: rgba(240, 240, 229, 0.72);
    opacity: 0;
    visibility: visible;
    padding-inline: clamp(16px, 2.5vw, 28px);
    padding-block: clamp(14px, 2vw, 20px);
    background: rgba(32, 32, 32, 1);
    border-radius: 6px;
}


/* Stacked roadmap on smaller screens — vertical rail · node · stem → copy */

/* ─── PROCESS / SECTORS — Figma: lead | image | KPIs · sticky stack ─ */
#process {
    background: var(--black);
    padding-block: 0 clamp(100px, 14vh, 160px);
    /* Matches site gutters — :root --section-inline caps at 100px on large screens */
    padding-left: max(var(--section-inline), env(safe-area-inset-left, 0px));
    padding-right: max(var(--section-inline), env(safe-area-inset-right, 0px));
    position: relative;
    box-sizing: border-box;
    overflow-x: clip;
    overflow-y: visible;
    --process-sticky-top: var(--nav-bar-outer-height);
    /* Mobile sticky slides tuck under this so 01/04… isn’t covered by the eyebrow */
    --process-eyebrow-stack: clamp(48px, 11vw, 76px);
    scroll-margin-top: 0;
    isolation: isolate;
    /* Reduces scroll-anchoring jumps with Lenis + sticky (subtle “shake”) */
    overflow-anchor: none;
}


#process>h2.process-eyebrow {
    position: sticky;
    top: var(--process-sticky-top);
    z-index: 24;
    background: var(--black);
    padding-top: 16px;
    padding-bottom: clamp(16px, 2.5vh, 32px);
    padding-inline: 0;
    text-align: left;
    margin: 0 0 clamp(24px, 4vw, 48px);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 2%;
    vertical-align: bottom;
    text-transform: uppercase;
}


.process-wrapper {
    position: relative;
    width: 100%;
}


.sectors-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: min(1600px, 100%);
}


/* Sticky stats section - positioned absolutely on the right for all cards */
.process-stats-sticky {
    position: sticky;
    top: calc(var(--process-sticky-top) + 80px);
    z-index: 18;
    float: right;
    width: min(300px, 21vw);
    margin-left: 0;
    margin-bottom: clamp(40px, 6vh, 72px);
    clear: both;
    height: 611px;
    display: flex;
    align-items: center;
}


.process-stats-sticky .sector-stats {
    display: flex;
    flex-direction: column;
    gap: 80px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 611px;
    max-height: 611px;
}


.sector-slide-col--stats {
    display: none;
}


/* Base: stacked flow (tablet + phone). Sticky stack + stats band (≤1199) overridden after base + desktop rules — see below. */
.sector-slide {
    --sector-pad-y: clamp(28px, 5vw, 88px);
    position: relative;
    top: auto;
    background: var(--black);
    padding: var(--sector-pad-y) 0 calc(var(--sector-pad-y) + env(safe-area-inset-bottom, 0px));
    margin: 0;
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    align-items: center;
    z-index: auto;
    transition: opacity 0.35s ease;
}


.sectors-container .sector-slide:first-of-type {
    border-top: none;
}


.sector-slide-inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(24px, 5vw, 40px);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}


/* ── Tablet and phone (max 1199px): sticky sector stack, then KPI grid (below cards) ───── */

.sector-counter {
    font-family: Archivo, var(--font-main), monospace;
    font-size: clamp(13px, 1.1vw + 11px, 14px);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    display: block;
    align-self: flex-start;
    flex-shrink: 0;
}


.sector-counter-curr {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.68);
}


.sector-counter-sep {
    margin: 0 0.2em;
    opacity: 0.85;
}


.sector-counter-max {
    color: rgba(255, 255, 255, 0.4);
}


.sector-slide-col--lead {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    align-items: flex-start;
    min-width: 0;
    align-self: stretch;
    width: 100%;
    overflow: hidden;
}


.sector-lead-body {
    margin-top: auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


.sector-lead-body h3 {
    font-size: clamp(20px, 1.5vw + 0.5rem, 32px);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--white);
    margin: 0 0 16px;
}


.sector-lead-body p {
    font-family: Archivo, var(--font-main), sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 0.65vw + 11px, 16px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}


.sector-slide-col--media {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 0;
    width: 100%;
}


/* Aspect-ratio belongs on tablet/phone — not desktop, or it overrides the 611px slides and letterboxes */
.sector-image-wrap {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0;
}


.sector-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1s var(--ease-expo);
}


.sector-stats {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 34px);
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
}


.stat-count-display {
    font-size: clamp(28px, 2.5vw + 1rem, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--white);
    line-height: 1;
    margin: 0 0 10px;
    font-variant-numeric: tabular-nums;
}


.stat-item p {
    font-family: Archivo, var(--font-main), sans-serif;
    font-size: clamp(12px, 0.6vw + 10px, 14px);
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
    margin: 0;
}


/* Very narrow phones: slightly tighter KPI grid + type scale */

/* ─── REVIEWS SECTION (Figma: pinned scatter desktop · stacked mobile) ─── */
#reviews {
    position: relative;
    background: var(--black);
    z-index: 20;
    scroll-margin-top: var(--anchor-under-nav-offset);
    overflow-anchor: none;
    padding-top: 50px;
    --reviews-section-gap-mobile-y: clamp(40px, 11vw, 88px);
}


/* Pinned viewport — 100svh avoids mobile URL-bar height jumps vs 100vh */
.reviews-sticky {
    position: relative;
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    background-color: var(--black);
    background-image: url('/wp-content/uploads/2026/04/reviews-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.reviews-bg-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    max-width: 100%;
    padding-inline: max(var(--section-inline), env(safe-area-inset-left, 0px));
    font-size: clamp(36px, 7.2vw, 120px);
    font-weight: 700;
    text-transform: none;
    color: #ffffff !important;
    -webkit-text-stroke: 0 transparent !important;
    line-height: 1.02;
    letter-spacing: -0.005em;
    pointer-events: none;
    z-index: 1;
    user-select: none;
    text-align: center;
    text-wrap: balance;
}


.reviews-bg-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.8;
}


.reviews-cards-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    will-change: transform;
}


.reviews-scattered {
    position: relative;
    width: 100%;
    /* First card sits “in frame” — same intention as clearance around the last card */
    --reviews-v-leader: clamp(72px, 13svh, 140px);
    min-height: 1200px;
    height: 1200px;
    --review-gutter: clamp(24px, 8.4vw, 160px);
    --review-card-w: min(649px, calc(100vw - var(--review-gutter) * 2 - 24px));
}


.review-card {
    position: absolute;
    width: var(--review-card-w);
    min-height: min(397px, 52svh);
    height: auto;
    max-height: none;
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: clamp(28px, 3.2vw, 50px);
    border-radius: 0;
    will-change: transform;
    transition: border-color 0.4s, transform 0.4s;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}


.review-card:nth-child(1) {
    left: var(--review-gutter);
    top: var(--reviews-v-leader);
}


.review-card:nth-child(2) {
    right: var(--review-gutter);
    top: calc(var(--reviews-v-leader) + 300px);
}


.review-card:nth-child(3) {
    left: var(--review-gutter);
    top: calc(var(--reviews-v-leader) + 600px);
}


.review-card:nth-child(4) {
    right: var(--review-gutter);
    top: calc(var(--reviews-v-leader) + 900px);
}


.review-card:nth-child(5) {
    left: var(--review-gutter);
    top: calc(var(--reviews-v-leader) + 1200px);
}


.review-card p {
    margin-bottom: clamp(20px, 3vw, 36px);
    font-weight: 400;
    font-size: clamp(15px, 1.1vw + 14px, 20px);
    line-height: 1.45;
    letter-spacing: 0;
}


.review-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: clamp(20px, 2.5vw, 28px);
    flex-shrink: 0;
}


.review-author h4 {
    color: #ffffff;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: clamp(18px, 1.2vw + 16px, 24px);
    line-height: 1.2;
    letter-spacing: 0;
}


.review-author span {
    font-family: Archivo, var(--font-main), sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 0.5vw + 13px, 16px);
    line-height: 1.3;
    letter-spacing: 0;
    color: rgba(240, 240, 229, 1);
}


/* Tablet / small laptop: no pin in JS — still uses absolute layout until 991px switches to stack */

/* Mobile + small tablet: same pin + scrub as desktop — cards scroll over centered headline;
           testimonials-m.webp via ::before with equal vertical inset over black */

/* ─── CTA SECTION (Premium White) ────────────────────────── */
#cta {
    background: var(--cream-light);
    min-height: 100vh;
    min-height: 100svh;
    height: clamp(600px, 100vh, 1080px);
    padding-block: clamp(60px, 8vw, 120px);
    padding-left: max(var(--section-inline), env(safe-area-inset-left, 0px));
    padding-right: max(var(--section-inline), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}


#cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(139, 101, 83, 0.1) 0%, transparent 70%);
}


#cta h2 {
    color: #0d0d0d;
    max-width: 1000px;
    margin-bottom: 60px;
    font-weight: 800;
    font-style: italic;
    font-size: 80px;
    line-height: 82px;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
}


.btn-cta {
    position: relative;
    z-index: 5;
    padding: 20px 48px;
    background: #8b6553;
    color: var(--white);
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.4s var(--ease-expo);
    box-shadow: 0 10px 30px rgba(139, 101, 83, 0.3);
}


.btn-cta:hover {
    background: rgba(164, 119, 100, 1);
    color: rgba(240, 240, 229, 1);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(164, 119, 100, 0.35);
}


/* ─── INSIGHTS SECTION ────────────────────────────────────── */
#insights {
    background: var(--black);
    padding-block: clamp(80px, 10vh, 120px) clamp(100px, 14vh, 160px);
    padding-left: max(var(--section-inline), env(safe-area-inset-left, 0px));
    padding-right: max(var(--section-inline), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
    position: relative;
    /* visible overflow keeps position:sticky + Lenis scrolling consistent (clip can hitch before stick) */
    overflow-x: visible;
    overflow-y: visible;
    scroll-margin-top: 0;
    isolation: isolate;
}


#insights>.insights-heading {
    position: sticky;
    top: var(--nav-bar-outer-height);
    z-index: 20;
    background: var(--black);
    padding-top: 16px;
    padding-bottom: clamp(16px, 2.5vh, 24px);
    text-align: left;
    margin: 0 0 clamp(24px, 4vw, 48px);
    color: rgba(255, 255, 255, 0.92);
    padding-inline: 0;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 2%;
    vertical-align: bottom;
    text-transform: uppercase;
}


.insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}


.insight-card {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transform: translateY(40px);
    display: block;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}


.insight-card.animate-in {
    animation: slideUpFade 0.8s var(--ease-expo) forwards;
}


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


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


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


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


.insight-card:hover {
    transform: none;
}


.insight-image-wrap {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.05);
}


.insight-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-expo);
}


.insight-card:hover .insight-image-wrap img {
    transform: scale(1.05);
}


.insight-content {
    padding-top: 16px;
}


.insight-content h3 {
    margin: 0;
    font-family: Archivo;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0%;
    vertical-align: middle;
}


.insights-footer {
    display: flex;
    justify-content: flex-start;
    padding-top: 16px;
}


.btn-insights {
    display: inline-block;
    box-sizing: border-box;
    text-decoration: none;
    padding: 18px 29px;
    background: rgba(240, 240, 229, 1);
    color: rgba(19, 19, 19, 1);
    font-family: var(--font-main);
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.4s var(--ease-expo);
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: right;
    vertical-align: middle;
}


.btn-insights:hover {
    background: rgba(164, 119, 100, 1);
    transform: translateY(-2px);
    color: rgba(240, 240, 229, 1);
}


.insights-slider {
    width: 100%;
}


/* ─── CONTACT SECTION ────────────────────────────────────── */
#contact {
    background: var(--black-rich);
    padding-block: clamp(64px, 11vw, 120px);
    padding-left: max(var(--section-inline), env(safe-area-inset-left, 0px));
    padding-right: max(var(--section-inline), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}


.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 100px;
    align-items: flex-start;
}


/* Front page contact column — CF7 + .form-field (match Contact Us tight rhythm vs loose defaults) */
#contact .contact-right {
    display: grid;
    gap: clamp(20px, 3vw, 30px);
    align-content: start;
}


#contact .contact-form-cf7>form.wpcf7-form {
    margin: 0;
}


/* CF7 wraps each row in <p>; do not add margin here — #contact .form-field already stacks rows */
#contact .contact-form-cf7 form.wpcf7-form>p {
    margin: 0;
    padding: 0;
}


#contact .contact-form-cf7 .wpcf7-response-output {
    margin: clamp(12px, 2vw, 20px) 0 0;
}


#contact .contact-form-cf7 .iti {
    width: 100%;
}


/* #contact .form-field {
padding: 10px 0 12px;
margin-bottom: clamp(16px, 2.5vw, 24px);
        } */

#contact .form-field textarea {
    min-height: clamp(88px, 16vw, 120px);
}


#contact .contact-form-cf7 input[type='submit'].wpcf7-submit {
    margin-top: 0;
}


.contact-left h2 {
    margin-bottom: clamp(28px, 5vw + 12px, 48px);
    font-weight: 800;
    font-size: clamp(28px, 5.5vw + 1rem, 64px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    vertical-align: middle;
}


.contact-email {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: Archivo;
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -1%;
}


.contact-email svg,
.contact-email img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    object-fit: contain;
}


#contact .contact-right>p {
    margin: 0;
    color: rgba(240, 240, 229, 1);
    font-family: Archivo;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0%;
    vertical-align: middle;
}


.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}


.form-field {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 20px;
    margin-bottom: 30px;
    position: relative;
}


.form-field::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--white);
    transition: width 0.4s var(--ease-expo);
}


.form-field:focus-within::after {
    width: 100%;
}


.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: rgba(240, 240, 229, 1);
    font-family: Archivo;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0%;
    vertical-align: middle;
}


.form-field input::placeholder,
.form-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}


.form-field select {
    color: rgba(255, 255, 255, 0.35);
}


.form-field select option {
    background: #1a1a1a;
    color: var(--white);
}


.form-field textarea {
    min-height: 120px;
    resize: none;
}


.phone-row {
    display: flex;
    align-items: center;
    gap: 12px;
}


.phone-flag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}


.phone-flag .flag {
    font-size: 18px;
}


.submit-btn {
    align-self: flex-start;
    padding: 20px 40px;
    background: var(--white);
    color: var(--black);
    border: none;
    cursor: pointer;
    transition: background 0.4s var(--ease-expo), color 0.4s, transform 0.4s;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: right;
    vertical-align: middle;
}


.submit-btn:hover {
    background: rgba(164, 119, 100, 1);
    color: rgba(240, 240, 229, 1);
    transform: translateY(-2px);
}


/* Contact: shorter motion reads smoother while scrolling (global .reveal is 0.9s + expo). */
#contact .reveal {
    transform: translateY(18px);
    transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}


#contact .reveal-delay-1 {
    transition-delay: 0.05s;
}


#contact .reveal-delay-2 {
    transition-delay: 0.08s;
}


#contact .reveal-delay-3 {
    transition-delay: 0.1s;
}


/* ─── RESPONSIVE ─────────────────────────────────────────── */

/* Tablet: same centered full-viewport hero as mobile */

/* Partners — small phones (placed after max-width 900 so #partners overrides win in cascade) */

/* ─── GLOBAL STICKY STABILIZATION (Mobile/All viewports) ─── */
.work-eyebrow,
.partners-eyebrow,
.partners-subheading,
.process-eyebrow,
.magic-how-eyebrow,
.offerings-mobile-heading {
    /* Force GPU layer and optimize for smooth Lenis scrolling */
    will-change: transform, top;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    isolation: isolate;
}


#hero,
#offerings,
#work,
#partners,
#process,
#magic-how,
#insights,
#cta,
#contact {
    isolation: isolate;
}