:root {
    /* Uniform distance from section top border to section-label (desktop) */
    --section-top-pad: clamp(2rem, 3vw, 3rem);

    --bg: #efe9de;
    --bg-strong: #dcd0c0;
    --surface: rgba(255, 250, 242, 0.76);
    --surface-strong: #f8f2ea;
    --surface-dark: #121212;
    --ink: #141414;
    --ink-soft: rgba(20, 20, 20, 0.68);
    --ink-inverse: #f4ede4;
    --line: rgba(20, 20, 20, 0.12);
    --line-strong: rgba(20, 20, 20, 0.24);
    --accent: #dd7c5d;
    --accent-alt: #607fd2;
    --shadow: 0 24px 70px rgba(23, 16, 8, 0.12);
    --shadow-strong: 0 38px 120px rgba(19, 15, 8, 0.18);
    --radius: 2rem;
    --container: min(100% - 2.5rem, 1360px);
    --transition: 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: "Afacad Flux", sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), transparent 36%),
        radial-gradient(circle at 85% 16%, rgba(221, 124, 93, 0.16), transparent 20%),
        linear-gradient(180deg, #f6efe6 0%, #e8dccb 45%, #d2c2af 100%);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-anchor: none;
}

body.modal-open {
    overflow: hidden;
}

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

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

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

button,
a,
input,
textarea {
    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        opacity var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.skip-link {
    position: absolute;
    top: -4rem;
    left: 1rem;
    z-index: 1000;
    padding: 0.8rem 1rem;
    background: var(--surface-dark);
    color: var(--ink-inverse);
}

.skip-link:focus {
    top: 1rem;
}

.site-shell {
    position: relative;
    overflow: clip;
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 40;
    padding: 1rem 0;
    transition:
        padding var(--transition),
        background-color var(--transition),
        backdrop-filter var(--transition),
        border-color var(--transition);
}

.site-header.is-scrolled {
    padding: 0.65rem 0;
    background: rgba(244, 237, 228, 0.68);
    border-bottom: 1px solid rgba(20, 20, 20, 0.08);
    backdrop-filter: blur(18px);
}

body.admin-bar .site-header {
    top: 32px;
}

.site-shell {
    position: relative;
    overflow: clip;
}

@media (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

.site-header__inner,
.section-shell {
    width: var(--container);
    margin-inline: auto;
}

.site-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
}

.site-brand {
    width: min(220px, 32vw);
}

body.home .site-header {
    padding: 0.7rem 0;
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
}

body.home .site-header.is-scrolled {
    background: rgba(255, 202, 20, 0.82);
    border-bottom: 1px solid rgba(20, 20, 20, 0.08);
    backdrop-filter: blur(16px);
}

body.home .site-brand {
    width: 120px;
}

body.home .site-nav a,
body.home .site-header__status,
body.home .site-header__meta .button--ghost {
    color: #ffffff;
}

body.home .site-header__meta .button--ghost {
    border-color: rgba(255, 255, 255, 0.92);
}

body.home .site-nav a:hover,
body.home .site-nav a:focus-visible,
body.home .site-nav a.is-hovering,
body.home .site-header__meta .button--ghost:hover,
body.home .site-header__meta .button--ghost:focus-visible {
    color: #141414;
}

.site-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-nav a,
.site-header__status {
    color: var(--ink-soft);
}

.site-brand,
.site-nav a,
.site-header__status,
.site-header__meta .button {
    will-change: transform, opacity;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--ink);
}

.site-header__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.site-header__status {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ─── Hamburger button (mobile only) ───────────────────────────────────── */
.site-hamburger {
    display: none;
    /* visible only on <=1180 — see breakpoint below */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px 9px;
    background: transparent;
    border: 1px solid rgba(20, 20, 20, 0.2);
    border-radius: 999px;
    cursor: pointer;
}

.site-hamburger__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
    transform-origin: center;
}

body.home .site-hamburger {
    border-color: rgba(255, 255, 255, 0.7);
}

body.home .site-hamburger__bar {
    background: #ffffff;
}

.site-hamburger[aria-expanded="true"] .site-hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-hamburger[aria-expanded="true"] .site-hamburger__bar:nth-child(2) {
    opacity: 0;
}

.site-hamburger[aria-expanded="true"] .site-hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ─── Full-screen mobile menu ──────────────────────────────────────────── */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: clamp(6rem, 16vw, 9rem) clamp(1.4rem, 6vw, 3rem) clamp(2rem, 5vw, 3rem);
    background: rgba(8, 8, 9, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--transition),
        visibility var(--transition);
}

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

.mobile-menu__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.4rem, 4vw, 2.2rem);
    width: 100%;
    max-width: 36rem;
}

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.6rem, 2vw, 1rem);
    width: 100%;
}

.mobile-menu__nav a {
    color: #ffffff;
    font-size: clamp(2.4rem, 9vw, 3.6rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    text-align: left;
    transform: translateY(20px);
    opacity: 0;
    transition:
        color var(--transition),
        transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible {
    color: #ffca14;
}

.mobile-menu__contact {
    transform: translateY(20px);
    opacity: 0;
    transition:
        transform 460ms cubic-bezier(0.22, 1, 0.36, 1) 60ms,
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) 60ms,
        background-color var(--transition),
        color var(--transition);
    background: #ffca14;
    color: #141414;
    border-color: #ffca14;
}

.mobile-menu__status {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    transform: translateY(20px);
    opacity: 0;
    transition:
        transform 460ms cubic-bezier(0.22, 1, 0.36, 1) 120ms,
        opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

/* Staggered entrance when menu opens */
.mobile-menu.is-open .mobile-menu__nav a,
.mobile-menu.is-open .mobile-menu__contact,
.mobile-menu.is-open .mobile-menu__status {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(1) {
    transition-delay: 60ms;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(2) {
    transition-delay: 120ms;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(3) {
    transition-delay: 180ms;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(4) {
    transition-delay: 240ms;
}

.mobile-menu.is-open .mobile-menu__nav a:nth-child(5) {
    transition-delay: 300ms;
}

.mobile-menu.is-open .mobile-menu__contact {
    transition-delay: 380ms;
}

.mobile-menu.is-open .mobile-menu__status {
    transition-delay: 440ms;
}

body.menu-open {
    overflow: hidden;
}


.nav-letter-rain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 38;
}

.nav-letter-rain--hero {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.nav-letter-rain__glyph {
    position: absolute;
    top: 0;
    left: 0;
    font-size: clamp(5rem, 11vw, 10rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.08em;
    /* Soft warm grey — JS animation handles opacity fade (0→0.07→0).
       Using rgba(20,20,20,0.45) keeps the glyph light-handed on the cream background. */
    color: rgba(20, 20, 20, 0.25);
    transform-origin: center;
    user-select: none;
    will-change: transform, opacity;
}

.services__stack-container {
    display: contents;
    /* Makes children (cards) behave as direct children of .services__layout for the grid */
}

.services__list {
    position: relative;
    padding: clamp(5rem, 9vw, 8rem) 0;
}

.page-main {
    position: relative;
    z-index: 1;
}

.section-shell {
    position: relative;
    padding: clamp(5rem, 9vw, 8rem) 0;
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.section-label::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: currentColor;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: -0.045em;
}

p {
    margin: 0;
    line-height: 1.65;
    color: var(--ink-soft);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.15rem;
    padding: 0 1.3rem;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--ink-inverse);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(20, 20, 20, 0.18);
}

.button--ghost {
    background: transparent;
    color: var(--ink);
}

.button--inline {
    padding: 0;
    min-height: auto;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ink-inverse);
    box-shadow: none;
}

.button--inline:hover,
.button--inline:focus-visible {
    transform: none;
    color: rgba(244, 237, 228, 0.76);
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2rem;
}

.split-word {
    display: inline-block;
    transform: translateY(1.15em);
    opacity: 0;
    will-change: transform, opacity;
}

.js-ready [data-reveal] {
    opacity: 0;
    transform: translateY(3.5rem);
    will-change: transform, opacity;
}

/* Approach cards: hidden initially — no transform (CSS class handles stagger offsets) */
.js-ready [data-approach-reveal] {
    opacity: 0;
    will-change: opacity;
}

/* Contact card: hidden initially — GSAP animates y+opacity on scroll */
.js-ready [data-vince-card] {
    opacity: 0;
    transform: translateY(52px);
    will-change: transform, opacity;
}

.js-ready [data-reveal-signature] {
    opacity: 1;
    transform: none;
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
}

.js-ready .is-visible {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0) !important;
}

.front-page {
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.72), transparent 30%),
        linear-gradient(180deg, #f8f7f5 0%, #ebe6de 50%, #e5ded3 100%);
}

.visually-hidden,
.home-opening__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.home-opening {
    position: relative;
    overflow: clip;
    min-height: min(100svh, 64rem);
    background: transparent;
    --home-opening-drop: 0%;
    --home-opening-mask-h: clamp(8rem, 18vw, 16rem);
    --home-opening-cut-left: 22%;
    --home-opening-cut-right: 58%;
    --home-opening-edge-opacity: 1;
}

.js-ready .home-opening {
    --home-opening-drop: -108%;
    --home-opening-cut-left: 58%;
    --home-opening-cut-right: 58%;
    --home-opening-edge-opacity: 1;
}

.home-opening::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffca14;
    transform: translateY(var(--home-opening-drop));
    will-change: transform;
    z-index: 0;
    pointer-events: none;
}

.home-opening::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: var(--home-opening-mask-h);
    background: #fbfaf8;
    clip-path: polygon(0 var(--home-opening-cut-left), 100% var(--home-opening-cut-right), 100% 100%, 0 100%);
    filter: drop-shadow(0 -8px 18px rgba(20, 20, 20, 0.16));
    transform: translateY(var(--home-opening-drop));
    opacity: var(--home-opening-edge-opacity);
    will-change: transform, clip-path;
    z-index: 3;
    pointer-events: none;
}

.home-opening__inner {
    position: relative;
    min-height: inherit;
    padding-top: clamp(5.4rem, 10vw, 7rem);
    z-index: 1;
    /* Masking to prevent glitches under the slanted line */
    clip-path: polygon(0 0,
            100% 0,
            100% calc(100% + var(--home-opening-drop) - var(--home-opening-mask-h) + (var(--home-opening-mask-h) * var(--home-opening-cut-right) / 100%)),
            0 calc(100% + var(--home-opening-drop) - var(--home-opening-mask-h) + (var(--home-opening-mask-h) * var(--home-opening-cut-left) / 100%)));
}

.home-opening__art {
    position: relative;
    min-height: inherit;
    width: min(100%, 1500px);
    margin-inline: auto;
    will-change: transform;
}

.home-opening__particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.home-opening__v-wrap,
.home-opening__desk {
    position: absolute;
}

.home-opening__v-wrap {
    left: 48%;
    bottom: clamp(-24rem, -18vw, -12rem);
    width: clamp(60rem, 62vw, 72rem);
    transform: translateX(-50%);
    opacity: 0.95;
    z-index: 1;
    will-change: transform, opacity;
}

.home-opening__v-mask {
    position: relative;
    width: 100%;
    aspect-ratio: 433 / 484;
    overflow: hidden;
}

.home-opening__v-piece {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: #ffffff;
}

.home-opening__v-piece--left {
    clip-path: polygon(0 0, 34% 0, 60% 100%, 38% 100%);
}

.home-opening__v-piece--right {
    clip-path: polygon(54% 0, 100% 0, 100% 100%, 41% 100%);
}

.home-opening__v-logo,
.home-opening__v-svg {
    display: block;
    width: 100%;
    height: auto;
}

.home-opening__v-logo {
    filter: brightness(0) invert(1);
}

.home-opening__v-svg {
    fill: currentColor;
}

.home-opening__v-reveal {
    position: absolute;
    inset: 0;
    background: #ffca14;
}

.home-opening__v-reveal--left {
    clip-path: inset(0 0 0 0);
}

.home-opening__v-reveal--right {
    clip-path: inset(0 0 0 0);
}

.home-opening__desk {
    left: 50%;
    bottom: clamp(-4rem, -1.2vw, 1rem);
    width: clamp(48rem, 82vw, 96rem);
    transform: translateX(-50%);
    z-index: 2;
}

.home-opening__desk img {
    width: 100%;
    height: auto;
    display: block;
}

.hero {
    min-height: 100svh;
    padding-top: clamp(7rem, 16vw, 10rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero__wash,
.hero__diagonal {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__wash {
    background:
        radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.95), transparent 24%),
        radial-gradient(circle at 86% 42%, rgba(221, 124, 93, 0.16), transparent 24%),
        linear-gradient(145deg, rgba(248, 240, 228, 0.2), rgba(120, 108, 90, 0.02));
}

.hero__diagonal {
    inset: 6vh -10vw 12vh 42%;
    background:
        linear-gradient(135deg, rgba(17, 17, 17, 0.04), rgba(17, 17, 17, 0.16)),
        linear-gradient(120deg, rgba(221, 124, 93, 0.2), rgba(96, 127, 210, 0.1));
    clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
    transform-origin: center;
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
}

.hero__copy {
    position: relative;
    z-index: 2;
    max-width: 52rem;
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.hero__title {
    font-size: clamp(4.7rem, 10vw, 8.9rem);
    max-width: 11ch;
}

.hero__support {
    display: grid;
    grid-template-columns: minmax(0, 25rem);
    gap: 1.4rem;
    justify-content: end;
    margin-top: 2rem;
    padding-right: clamp(0rem, 6vw, 5rem);
}

.hero__lede {
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}

.hero__scene {
    position: relative;
    min-height: 70vh;
    pointer-events: none;
}

.hero__v-mark {
    position: absolute;
    right: 7%;
    bottom: 22%;
    width: clamp(16rem, 30vw, 25rem);
    opacity: 0.18;
}

.hero__desk {
    position: absolute;
    inset: auto -10% -8% auto;
    width: clamp(33rem, 58vw, 64rem);
    filter: drop-shadow(0 38px 90px rgba(31, 22, 10, 0.2));
}

.hero__sign {
    position: absolute;
    top: 11%;
    right: 12%;
    width: 6rem;
    transform: rotate(-8deg);
    opacity: 0.68;
}

.hero__floating-note {
    position: absolute;
    left: 4%;
    bottom: 16%;
    max-width: 14rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(20, 20, 20, 0.12);
    background: rgba(255, 250, 242, 0.62);
    border-radius: 1.25rem;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

.hero__floating-note span {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
}

.hero__ticker,
.work-hero__ticker {
    margin-top: clamp(2rem, 5vw, 4rem);
    overflow: hidden;
    border-top: 1px solid rgba(20, 20, 20, 0.14);
    border-bottom: 1px solid rgba(20, 20, 20, 0.14);
    padding: 0.8rem 0;
}

.hero__ticker-track,
.work-hero__ticker-track {
    display: flex;
    width: max-content;
    gap: 2rem;
    animation: marquee 24s linear infinite;
}

.hero__ticker-track span,
.work-hero__ticker-track span {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
}

.lamp-transition {
    display: grid;
    grid-template-columns: minmax(0, 0.58fr) minmax(320px, 0.42fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.lamp-transition__intro h2,
.editorial-section h2,
.services__title,
.manifesto__poster h2,
.approach__intro h2,
.contact-cta__panel h2,
.work-hero__body h1,
.typographic-interlude h2,
.work-cta__panel h2,
.fallback-page__section h1,
.contact-modal__intro h2 {
    font-size: clamp(3rem, 7vw, 6.1rem);
    max-width: 11ch;
}

.lamp-transition__intro {
    max-width: 37rem;
}

.lamp-transition__stage {
    position: relative;
    min-height: 29rem;
    border-radius: calc(var(--radius) + 0.75rem);
    border: 1px solid rgba(20, 20, 20, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.14)),
        radial-gradient(circle at top right, rgba(221, 124, 93, 0.2), transparent 24%),
        rgba(255, 250, 242, 0.58);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.lamp-transition__sheet {
    position: absolute;
    inset: auto 11% 8% 9%;
    height: 34%;
    border-radius: 2rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(245, 236, 224, 0.88)),
        linear-gradient(180deg, rgba(20, 20, 20, 0.04), rgba(20, 20, 20, 0));
    box-shadow: 0 18px 40px rgba(30, 22, 12, 0.08);
    transform: rotate(-1.8deg);
}

.lamp-transition__ball {
    position: absolute;
    left: 7%;
    bottom: 8%;
    width: clamp(5.4rem, 9vw, 8rem);
    filter: drop-shadow(0 22px 24px rgba(24, 18, 8, 0.14));
}

.lamp-transition__draw {
    position: absolute;
    inset: 5% 6% auto auto;
    width: 83%;
    height: auto;
}

.lamp-transition__draw path {
    fill: none;
    stroke: rgba(20, 20, 20, 0.78);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lamp-transition__lamp {
    position: absolute;
    right: 8%;
    bottom: 4%;
    width: clamp(9rem, 14vw, 13rem);
    transform-origin: bottom center;
}

.lamp-transition__sign {
    position: absolute;
    top: 18%;
    left: 14%;
    width: 5.6rem;
    opacity: 0.6;
}

.editorial-section__grid,
.work-hero__body {
    display: grid;
    gap: clamp(1.8rem, 4vw, 4rem);
}

.services__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 6vw, 4.5rem);
}

.services__stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.8rem, 4vw, 3.5rem);
}

.services__intro-copy {
    max-width: 58rem;
}

.editorial-section__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.7fr);
    align-items: center;
}

.editorial-section__heading {
    display: grid;
    align-content: center;
    gap: 1rem;
}

.editorial-section__signature {
    width: 7rem;
    height: auto;
    margin-top: 0.2rem;
}

.editorial-section--me {
    margin-top: clamp(-2.5rem, -4vw, -1rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.editorial-section__body[data-text-reveal] {
    overflow: hidden;
}

.text-reveal-line,
.text-reveal-chip {
    opacity: 0;
    transform: translateY(2rem);
    will-change: transform, opacity;
}

.editorial-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.editorial-notes span,
.work-card__tags span {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid rgba(20, 20, 20, 0.14);
    border-radius: 999px;
    background: rgba(255, 250, 242, 0.48);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
}

.services {
    border-top: 1px solid rgba(20, 20, 20, 0.12);
    margin-top: clamp(-5rem, -7vw, -2rem);
    padding-top: var(--section-top-pad);
}

.services__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1.2fr)) minmax(0, 0.8fr);
    gap: clamp(1rem, 2.5vw, 2.5rem);
    /* Unified and symmetric gap */
    align-items: stretch;
    grid-auto-rows: 1fr;
}

.services__intro-copy {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    align-content: start;
    gap: 1rem;
    padding-top: 0.3rem;
}

.service-card--01 {
    grid-column: 2;
    grid-row: 1;
}

.services__title {
    grid-column: 3;
    grid-row: 1 / span 3;
    max-width: 12ch;
    margin-top: 0.3rem;
}

.service-card--02 {
    grid-column: 1;
    grid-row: 2;
}

.service-card--03 {
    grid-column: 2;
    grid-row: 2;
    transform: translateY(1.5rem);
}

.service-card--04 {
    grid-column: 1;
    grid-row: 3;
}

.service-card--05 {
    grid-column: 2;
    grid-row: 3;
    transform: translateY(1.5rem);
}

.service-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(1rem, 2vw, 1.4rem) clamp(1.4rem, 3vw, 1.8rem);
    /* Reduced vertical padding */
    border: 1px solid rgba(20, 20, 20, 0.12);
    border-radius: 1.6rem;
    background: #ffffff;
    box-shadow: var(--shadow);
    height: 100%;
    /* Force cards to fill grid cell height */
    display: flex;
    flex-direction: column;
}

.service-card span,
.work-card__number,
.approach-step__number,
.work-preview__number {
    display: block;
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    letter-spacing: -0.08em;
    color: rgba(20, 20, 20, 0.34);
}

.service-card h3,
.approach-step h3,
.work-card h2 {
    margin-top: 0.6rem;
    font-size: clamp(1.7rem, 2.6vw, 2.55rem);
}

.service-card p,
.work-card p,
.work-hero__body p,
.work-index__header p,
.work-cta__panel p,
.contact-cta__panel p {
    font-size: 1rem;
}

.manifesto {
    position: relative;
    border-top: 1px solid rgba(20, 20, 20, 0.14);
}

.manifesto>.section-shell {
    padding-top: 0;
    padding-bottom: 0;
}

.manifesto__poster {
    position: relative;
    min-height: 100svh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(2rem, 4vw, 3rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* White → warm dirty-white gradient */
    background:
        radial-gradient(circle at 80% 20%, rgba(221, 124, 93, 0.06), transparent 40%),
        linear-gradient(160deg, #ffffff 0%, #faf6f1 45%, #f2ece3 100%);
}

/* Label: always pinned at top of the poster, independent from centered content */
.manifesto__label {
    position: absolute;
    top: var(--section-top-pad);
    left: clamp(2rem, 4vw, 3rem);
    margin: 0;
    z-index: 3;
}

.manifesto__poster h2 {
    max-width: 10.5ch;
}

.manifesto__intro {
    display: grid;
    gap: 1.25rem;
    max-width: 22rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
    margin-left: calc((100% - var(--container)) / 2);
}

.manifesto__copy {
    will-change: transform, opacity;
}

.manifesto__viewport {
    position: relative;
    overflow: hidden;
}

.manifesto__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    width: max-content;
    padding-right: 14vw;
}

.manifesto__statement {
    display: inline-block;
    white-space: nowrap;
    font-size: clamp(3rem, 6vw, 6.8rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
    font-weight: 600;
}

.manifesto__separator {
    display: inline-block;
    white-space: nowrap;
    font-size: clamp(2.1rem, 5vw, 5rem);
    line-height: 1;
    color: rgba(20, 20, 20, 0.24);
}

.manifesto.is-pinned .manifesto__viewport {
    min-height: clamp(18rem, 50svh, 28rem);
}

.manifesto.is-pinned .manifesto__poster {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
}

/* Label is now separate — intro only contains h2, stays centered vertically */
.manifesto.is-pinned .manifesto__intro {
    position: absolute;
    top: 50%;
    left: calc((100vw - var(--container)) / 2);
    z-index: 2;
    margin: 0;
    padding: 2rem;
    transform: translateY(-50%);
    width: 24rem;
}

.manifesto.is-pinned .manifesto__viewport {
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 1;
    padding-left: 24rem;
}

.manifesto.is-pinned .manifesto__track {
    will-change: transform;
}

.manifesto.is-pinned .manifesto__statement {
    font-size: clamp(8rem, 18vw, 22rem);
    line-height: 0.84;
}

.manifesto.is-pinned .manifesto__separator {
    font-size: clamp(6rem, 13vw, 15rem);
}

.approach {
    border-top: 1px solid rgba(20, 20, 20, 0.12);
    padding-top: clamp(1rem, 2vw, 2rem);
}

.approach>.section-shell:first-child {
    padding-top: 0;
    padding-bottom: 0;
}

/* Steps shell: replaces the old inline style padding-top:0 */
.approach__steps-shell {
    padding-top: 0;
    padding-bottom: clamp(5rem, 9vw, 8rem);
}

.approach__intro {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(34rem, 90svh, 56rem);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: calc((100vw - var(--container)) / 2);
    padding-right: calc((100vw - var(--container)) / 2);
    overflow: visible;
}

.approach__intro-copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1.25rem;
    max-width: 36rem;
}

.approach__intro-art {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.approach-lamp-ball {
    position: absolute;
    width: clamp(7rem, 10vw, 9rem);
    z-index: 2;
    opacity: 0;
    transform: scale(2.2);
    will-change: transform, opacity;
    top: 29%;
    left: calc((100vw - var(--container)) / 2 + var(--container) * 5 / 6);
    translate: -50% 0;
}

.approach-lamp-base {
    position: absolute;
    top: 0;
    left: calc((100vw - var(--container)) / 2 + var(--container) * 5 / 6);
    right: auto;
    width: auto;
    max-width: 44vw;
    translate: -50% 0;
    z-index: 1;
    clip-path: inset(0 0 100% 0);
    will-change: clip-path;
}

.approach-lamp-base img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
}

.approach__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 3rem;
}

.approach-step {
    position: relative;
    min-height: 24rem;
    padding: 1.5rem;
    border: 1px solid rgba(20, 20, 20, 0.12);
    border-radius: 1.75rem;
    background: #ffffff;
    box-shadow: var(--shadow);
    overflow: hidden;
    isolation: isolate;
}

.service-card>*,
.approach-step>*,
.contact-cta__panel>* {
    position: relative;
    z-index: 2;
}

.approach-step__triangles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.approach-step__triangle {
    opacity: 0;
    will-change: opacity;
}

.is-triangle-active .approach-step__triangle {
    animation: approachTriangleBloom 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--triangle-delay);
}

.is-triangle-ready .approach-step__triangle {
    opacity: var(--triangle-alpha);
}

@keyframes approachTriangleBloom {
    0% {
        opacity: 0;
    }

    65% {
        opacity: calc(var(--triangle-alpha) + 0.06);
    }

    100% {
        opacity: var(--triangle-alpha);
    }
}

/* Approach step stagger handled entirely by GSAP — no CSS transform needed */

.method {
    margin-top: 4rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(20, 20, 20, 0.12);
}

.method__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.method__grid div {
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(20, 20, 20, 0.1);
}

.method__grid--below-cards {
    margin-top: clamp(3rem, 5vw, 4rem);
}

.method__grid--below-cards div {
    border-top: none;
    padding-top: 0;
}

.approach__footer {
    margin-top: clamp(3rem, 5vw, 4rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(20, 20, 20, 0.12);
}

.method__grid h3 {
    font-size: 1.45rem;
    letter-spacing: -0.03em;
}

.contact-cta.section-shell {
    border-top: 1px solid rgba(20, 20, 20, 0.12);
    padding-top: var(--section-top-pad);
}

/* More breathing room between the CONTATTI label and the card below */
.contact-cta .section-label {
    margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}

.contact-cta__panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.contact-cta__panel h2+p {
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

.contact-cta__panel,
.work-cta__panel,
.fallback-page__section {
    padding: clamp(2rem, 5vw, 3.25rem);
    border-radius: calc(var(--radius) + 0.2rem);
    background: #ffffff;
    box-shadow: var(--shadow-strong);
    border: 1px solid rgba(20, 20, 20, 0.12);
}

[data-vince-card] {
    background: #ffffff;
}

.site-footer {
    position: relative;
    z-index: 1;
    margin-top: 0;
    background: #0a0a0a;
    color: var(--ink-inverse);
}

.site-footer__inner {
    width: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 6vw, 5rem);
    padding: clamp(4rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.site-footer__logo img {
    filter: brightness(0) invert(1);
    width: min(140px, 22vw);
    height: auto;
}

.site-footer__tagline {
    margin-top: 0.6rem;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.03em;
    color: rgba(244, 237, 228, 0.72);
}

.site-footer__email {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(244, 237, 228, 0.48);
    transition: color var(--transition);
}

.site-footer__email:hover,
.site-footer__email:focus-visible {
    color: rgba(244, 237, 228, 0.9);
}

.site-footer__col-label {
    display: block;
    margin: 0 0 1.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 237, 228, 0.36);
}

.site-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.site-footer__nav a {
    color: rgba(244, 237, 228, 0.64);
    font-size: 1rem;
    font-weight: 500;
    transition: color var(--transition);
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
    color: #ffffff;
}

.site-footer__bottom {
    width: var(--container);
    margin-inline: auto;
    padding: 1.4rem 0;
}

.site-footer__bottom p {
    margin: 0;
    font-size: 0.76rem;
    color: rgba(244, 237, 228, 0.28);
    letter-spacing: 0.06em;
    line-height: 1;
}

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.contact-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.contact-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 9, 0.56);
    backdrop-filter: blur(10px);
}

.contact-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100% - 1.5rem, 62rem);
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: calc(var(--radius) + 0.35rem);
    background:
        radial-gradient(circle at top right, rgba(221, 124, 93, 0.18), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 247, 241, 0.88));
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.24);
}

.contact-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.06);
}

.contact-modal__close span {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 1rem;
    height: 2px;
    background: var(--ink);
}

.contact-modal__close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.contact-modal__close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.contact-modal__intro {
    padding-right: 1rem;
}

.contact-modal__status {
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    font-size: 0.94rem;
}

.contact-modal__status--sent {
    background: rgba(123, 224, 177, 0.16);
    color: #19684a;
}

.contact-modal__status--error,
.contact-modal__status--invalid {
    background: rgba(221, 124, 93, 0.12);
    color: #8f4128;
}

.contact-form {
    display: grid;
    gap: 1rem;
}

.field {
    display: grid;
    gap: 0.55rem;
}

.field span {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.field input,
.field textarea {
    width: 100%;
    border: 1px solid rgba(20, 20, 20, 0.12);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.76);
    padding: 1rem 1.1rem;
    color: var(--ink);
}

.field input:focus,
.field textarea:focus {
    border-color: rgba(221, 124, 93, 0.56);
    box-shadow: 0 0 0 6px rgba(221, 124, 93, 0.1);
    outline: 0;
}

.field--textarea textarea {
    min-height: 9rem;
    resize: vertical;
}

.contact-form__submit {
    width: fit-content;
    margin-top: 0.4rem;
}

.work-page {
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.68), transparent 28%),
        linear-gradient(180deg, #f6efe6 0%, #e2d3c2 46%, #d4c0ad 100%);
}

.work-hero {
    padding-top: clamp(7rem, 15vw, 10rem);
}

.work-hero__meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}

.work-hero__body {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 25rem);
    align-items: end;
    margin-top: 2rem;
}

.work-index__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1.5rem;
    align-items: end;
}

.work-index__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
    gap: 2rem;
    margin-top: 2.5rem;
}

.work-index__list {
    border-top: 1px solid rgba(20, 20, 20, 0.16);
}

.work-index__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(20, 20, 20, 0.12);
}

.work-index__item.is-active,
.work-index__item:hover,
.work-index__item:focus-visible {
    color: var(--ink);
}

.work-index__item.is-active .work-index__title,
.work-index__item:hover .work-index__title,
.work-index__item:focus-visible .work-index__title {
    transform: translateX(0.45rem);
}

.work-index__number {
    width: 3rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
}

.work-index__title {
    font-size: clamp(2rem, 4vw, 3.6rem);
    letter-spacing: -0.05em;
    transition: transform var(--transition);
}

.work-index__meta,
.work-preview__meta,
.work-card__category {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.work-preview {
    position: sticky;
    top: 8.5rem;
    align-self: start;
}

.work-preview__card {
    padding: 1.3rem;
    border-radius: calc(var(--radius) + 0.25rem);
    background: rgba(255, 250, 242, 0.64);
    border: 1px solid rgba(20, 20, 20, 0.12);
    box-shadow: var(--shadow);
}

.work-preview__frame {
    aspect-ratio: 3 / 4;
    margin-top: 0.7rem;
    border-radius: 1.75rem;
    background: linear-gradient(135deg, #131313, #d9d5ca);
    position: relative;
    overflow: hidden;
}

.work-preview__frame::before,
.work-preview__frame::after,
.work-card__visual::before,
.work-card__visual::after {
    content: "";
    position: absolute;
    inset: auto;
    border-radius: 999px;
}

.work-preview__frame::before,
.work-card__visual::before {
    width: 50%;
    height: 38%;
    top: 15%;
    left: 8%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.48), transparent 70%);
    filter: blur(4px);
}

.work-preview__frame::after,
.work-card__visual::after {
    width: 56%;
    height: 56%;
    right: -10%;
    bottom: -12%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 66%);
}

.work-preview__copy {
    margin-top: 1rem;
}

.service-card h3 {
    font-size: clamp(1.7rem, 2.2vw, 2.55rem);
    line-height: 1.1;
    margin-bottom: 0.8rem;
    font-weight: 500;
}

.work-preview__copy h2 {
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    margin: 0.3rem 0 0.8rem;
}

.work-showcase {
    display: grid;
    gap: 2rem;
}

.work-card {
    display: grid;
    grid-template-columns: 9rem minmax(0, 0.78fr) minmax(20rem, 0.82fr);
    gap: 1.5rem;
    align-items: end;
    padding: clamp(1.5rem, 3vw, 2rem);
    border: 1px solid rgba(20, 20, 20, 0.12);
    border-radius: calc(var(--radius) + 0.25rem);
    background: rgba(255, 250, 242, 0.52);
    box-shadow: var(--shadow);
}

.work-card--right {
    grid-template-columns: 9rem minmax(20rem, 0.82fr) minmax(0, 0.78fr);
}

.work-card--right .work-card__body {
    order: 3;
}

.work-card--right .work-card__media {
    order: 2;
}

.work-card__body {
    display: grid;
    gap: 1.5rem;
}

.work-card__intro h2 {
    margin: 0.4rem 0 0.9rem;
}

.work-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.work-card__media {
    min-height: 28rem;
}

.work-card__visual {
    position: relative;
    height: 100%;
    min-height: 28rem;
    border-radius: 1.9rem;
    background: var(--card-gradient);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.work-card__visual-grid,
.work-card__visual-panel {
    position: absolute;
    inset: 0;
}

.work-card__visual-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 3.4rem 3.4rem;
    opacity: 0.2;
}

.work-card__visual-panel {
    inset: 12% 12% 14%;
    border-radius: 1.5rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.02)),
        rgba(9, 10, 13, 0.18);
    backdrop-filter: blur(6px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 20px 40px rgba(10, 10, 10, 0.2);
}

.work-card__visual img {
    position: absolute;
    width: 5.7rem;
    right: 8%;
    top: 8%;
    opacity: 0.8;
    transform: rotate(-8deg);
}

.typographic-interlude {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.typographic-interlude h2 {
    max-width: 8ch;
}

.typographic-interlude--secondary h2 {
    margin-left: auto;
}

.work-page--portfolio {
    background:
        radial-gradient(circle at top center, rgba(255, 255, 255, 0.72), transparent 30%),
        linear-gradient(180deg, #f8f1e8 0%, #e4d8c8 42%, #d5c2af 100%);
}

.work-portfolio-hero {
    padding-top: clamp(7rem, 15vw, 10rem);
}

.work-portfolio-hero__top,
.work-portfolio-hero__main,
.work-manifesto-strip__meta,
.work-selected__heading,
.work-project__topline,
.work-project__details {
    display: grid;
    gap: 1.5rem;
}

.work-portfolio-hero__top {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(20, 20, 20, 0.12);
}

.work-portfolio-hero__stamp {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.work-portfolio-hero__stamp span,
.work-portfolio-hero__jump,
.work-selected__cta,
.work-preview__eyebrow,
.work-project__kicker,
.work-project__year,
.work-project__serial {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.work-portfolio-hero__jump,
.work-selected__cta {
    justify-self: end;
}

.work-portfolio-hero__main {
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 25rem);
    align-items: end;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.work-portfolio-hero__lead h1,
.work-selected__heading h2,
.work-cta--portfolio .work-cta__panel h2 {
    font-size: clamp(3.6rem, 8.7vw, 7.8rem);
    max-width: 10.2ch;
}

.work-manifesto-strip {
    display: grid;
    gap: 1.8rem;
}

.work-manifesto-strip__meta {
    grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 24rem);
    align-items: start;
}

.work-manifesto-strip__line {
    padding: 1.3rem 0 0;
    border-top: 1px solid rgba(20, 20, 20, 0.14);
}

.work-manifesto-strip__line p {
    max-width: 100%;
    font-size: clamp(1.2rem, 2.1vw, 1.85rem);
    line-height: 1.62;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(20, 20, 20, 0.84);
}

.work-selected__heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: 2rem;
}

.work-selected__heading--secondary {
    margin: 2.25rem 0 1.5rem;
}

.work-featured {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.work-featured__card {
    display: grid;
    gap: 0.8rem;
}

.work-featured__visual {
    position: relative;
    min-height: 23rem;
    border-radius: 1.8rem;
    background: var(--card-gradient);
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 22px 56px rgba(20, 20, 20, 0.1);
}

.work-featured__visual img {
    position: absolute;
    right: 8%;
    top: 8%;
    width: 4.9rem;
    opacity: 0.82;
    transform: rotate(-8deg);
}

.work-featured__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.work-selected__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 28rem);
    gap: 2.25rem;
    align-items: start;
}

.work-index--portfolio .work-index__list {
    border-top: 1px solid rgba(20, 20, 20, 0.18);
}

.work-index--portfolio .work-index__item {
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    gap: 1.25rem;
    min-height: 7.6rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(20, 20, 20, 0.12);
}

.work-index--portfolio .work-index__title {
    font-size: clamp(2.8rem, 5.8vw, 5rem);
    line-height: 0.95;
    font-weight: 500;
}

.work-preview--portfolio .work-preview__card {
    padding: 1.25rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.34)),
        rgba(255, 250, 242, 0.62);
}

.work-preview--portfolio .work-preview__number {
    margin-top: 0.1rem;
}

.work-preview--portfolio .work-preview__frame {
    aspect-ratio: 0.78;
    margin-top: 0.8rem;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 24px 60px rgba(20, 20, 20, 0.12);
}

.work-preview__frame-grid,
.work-preview__frame-panel {
    position: absolute;
}

.work-preview__frame-grid {
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 3rem 3rem;
    opacity: 0.24;
}

.work-preview__frame-panel {
    inset: 12% 10% 13%;
    border-radius: 1.5rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.02)),
        rgba(9, 10, 13, 0.18);
    backdrop-filter: blur(6px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.14),
        0 20px 44px rgba(10, 10, 10, 0.2);
}

.work-preview__frame img {
    position: absolute;
    right: 8%;
    top: 8%;
    width: 5.2rem;
    opacity: 0.8;
    transform: rotate(-8deg);
}

.work-preview--portfolio .work-preview__copy h2 {
    font-size: clamp(2.5rem, 4vw, 4rem);
}

.work-reel {
    display: grid;
    gap: 2.5rem;
}

.work-project {
    display: grid;
    gap: 1.35rem;
}

.work-project__topline {
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

.work-project__serial {
    color: var(--ink);
}

.work-project__visual {
    min-height: clamp(25rem, 58vw, 44rem);
    border-radius: 2.25rem;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 24px 70px rgba(21, 16, 11, 0.12);
}

.work-project__visual-mark {
    position: absolute;
    inset: 14% auto auto 10%;
    width: 42%;
    height: 48%;
    border-radius: 2rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.08)),
        rgba(10, 10, 12, 0.08);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.16),
        0 24px 50px rgba(10, 10, 10, 0.16);
}

.work-project__details {
    grid-template-columns: minmax(0, 0.9fr) minmax(16rem, 24rem);
    align-items: start;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(20, 20, 20, 0.1);
}

.work-project__copy {
    display: grid;
    gap: 1rem;
}

.work-project__heading h2 {
    margin-top: 0.35rem;
    font-size: clamp(2.7rem, 5.5vw, 5rem);
}

.work-project__summary {
    font-size: 1.06rem;
}

.work-project__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.work-project__tags span {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 1rem;
    border: 1px solid rgba(20, 20, 20, 0.14);
    border-radius: 999px;
    background: rgba(255, 250, 242, 0.5);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
}

.work-project--offset .work-project__visual-mark {
    inset: auto 10% 14% auto;
}

.work-project--offset .work-project__details {
    grid-template-columns: minmax(16rem, 24rem) minmax(0, 0.9fr);
}

.work-project--offset .work-project__copy {
    order: 2;
}

.work-project--offset .work-project__tags {
    order: 1;
}

.typographic-interlude--work {
    padding: clamp(3rem, 8vw, 6rem) 0 1rem;
}

.typographic-interlude--work h2 {
    max-width: 8.5ch;
}

.work-cta--portfolio .work-cta__panel {
    background:
        radial-gradient(circle at top right, rgba(96, 127, 210, 0.12), transparent 28%),
        radial-gradient(circle at left bottom, rgba(221, 124, 93, 0.16), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.3)),
        rgba(255, 248, 241, 0.58);
}

.fallback-page {
    padding-top: 7rem;
}

/* ─── Desktop: uniform section-label distance from top border ─── */
/* To adjust spacing for ALL sections at once, change --section-top-pad in :root */
@media (min-width: 1181px) {

    /* Label aligns with the container edge (matches manifesto__intro left) */
    .manifesto__label {
        left: calc((100vw - var(--container)) / 2);
    }

    /* h2 (intro without label) stays vertically centered via position:absolute top:50% */

    .approach {
        padding-top: 0;
    }

    .approach__intro {
        align-items: flex-start;
        padding-top: var(--section-top-pad);
    }

    .contact-cta.section-shell {
        padding-top: var(--section-top-pad);
    }
}

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

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

@media (max-width: 1180px) {

    .site-header {
        z-index: 1000;
        /* Force header above everything */
    }

    .editorial-section--me {
        margin-top: -15svh;
        /* Simplemente alza la sezione senza toccare il resto */
        position: relative;
        z-index: 5;
    }

    .services {
        height: auto;
        position: relative;
        z-index: 10;
        background: transparent;
        padding-top: 0;
    }

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

    .services__intro-copy {
        order: 1;
        margin-top: 16px;
        /* Reduced by another 20px (from 36px) */
        margin-bottom: 1.5rem;
    }

    /* Since we had a big title earlier, let's make sure its desc follows */
    .services__title {
        order: 3;
        max-width: 100%;
        margin-bottom: 1rem;
        /* Reduced from 2rem to pull cards up */
    }

    /* Any other description text in the flow */
    .services__layout>p {
        order: 2;
        margin-bottom: 2rem;
    }

    .services__stack-container {
        order: 4;
        display: block;
        position: relative;
        width: 100%;
        min-height: 270px;
        margin-top: 2rem;
        /* Stabilise stacking context for the absolutely-positioned cards */
        isolation: isolate;
        transform: translateZ(0);
    }

    .services__layout .service-card {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 230px;
        /* Fixed height for ALL cards to ensure uniformity */
        padding: 1.3rem 1.5rem;

        margin: 0;
        background: #ffffff;
        border-radius: 1.5rem;
        /* Contained shadow: negative spread keeps it tight under the card so stacked
           cards don't sum into a dark band. Hidden cards (opacity:0) contribute zero. */
        box-shadow: 0 6px 16px -8px rgba(20, 20, 20, 0.18);
        overflow: hidden;
        display: flex;
        flex-direction: column;


        /* Cancel desktop grid offsets that would fight GSAP's y */
        transform: translate3d(0, 0, 0);
        /* Performance / anti-jitter on iOS & Android */
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-origin: 50% 50%;
        /* Let JS fully drive visibility */
        opacity: 0;
        visibility: hidden;
    }

    /* Kill the desktop vertical offset on odd cards: GSAP needs a clean y:0 baseline */
    .services__layout .service-card--03,
    .services__layout .service-card--05 {
        transform: translate3d(0, 0, 0);
    }

    /* Initial visible card (also overridden by JS gsap.set, but safe pre-paint default) */
    .services__layout .service-card--01 {
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

    /* Fixed monotonic z-index per card: each new card is guaranteed above the previous,
       so we don't need to animate z-index anymore (which was causing the glitches). */
    .services__layout .service-card--02 {
        z-index: 2;
    }

    .services__layout .service-card--03 {
        z-index: 3;
    }

    .services__layout .service-card--04 {
        z-index: 4;
    }

    .services__layout .service-card--05 {
        z-index: 5;
    }

    /* DESKTOP RESET moved into a separate @media query below */

    .work-index__header,
    .work-index__layout,
    .editorial-section__grid,
    .lamp-transition,
    .contact-modal__panel,
    .work-card,
    .work-card--right,
    .work-portfolio-hero__main,
    .work-manifesto-strip__meta,
    .work-selected__heading,
    .work-selected__layout,
    .work-project__details,
    .work-project--offset .work-project__details {
        grid-template-columns: 1fr;
    }

    .home-opening {
        min-height: 54rem;
    }

    .home-opening__art {
        min-height: 54rem;
    }

    .home-opening__desk {
        width: clamp(42rem, 94vw, 72rem);
        bottom: clamp(-2.4rem, -0.8vw, 0.5rem);
    }

    .site-nav {
        display: none;
    }

    .site-header__inner {
        grid-template-columns: auto 1fr;
    }

    .site-header__meta {
        justify-content: flex-end;
    }

    /* Mobile header: hide status + "Open Contact" button, show hamburger. */
    .site-header__status,
    .site-header__contact {
        display: none;
    }

    .site-hamburger {
        display: inline-flex;
    }


    .hero__scene {
        min-height: 34rem;
        margin-top: 2rem;
    }

    .hero__desk {
        inset: auto 0 -10% auto;
        width: min(100%, 54rem);
    }

    .hero__v-mark {
        right: 10%;
        bottom: 25%;
    }

    .work-preview {
        position: static;
    }

    .services__intro-copy {
        max-width: none;
    }

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

    .service-card--featured,
    .services__list {
        grid-column: auto;
    }

    .manifesto__poster,
    .services__list,
    .approach__steps,
    .method__grid {
        grid-template-columns: 1fr;
    }

    .manifesto {
        position: relative;
        z-index: 20;
        /* No solid background — poster handles the gradient */
        min-height: 100svh;
        display: flex;
        flex-direction: column;
    }

    /* poster is already 100svh + flex column + justify-center globally */
    .manifesto__poster {
        padding-left: 0 !important;
    }

    .manifesto__intro {
        max-width: none;
        margin-top: 16px !important;
        padding-left: calc(clamp(0.55rem, 2.4vw, 0.9rem) + 5px) !important;
        /* Adjusted +5px right */
    }

    /* Mobile-only: shift the centered intro block and the scrolling text up by 10px */
    .manifesto.is-pinned .manifesto__intro {
        transform: translateY(calc(-50% - 10px));
    }

    .manifesto.is-pinned .manifesto__viewport {
        margin-top: -10px;
    }

    /* Approach: match top spacing to the other sections on mobile.
       On desktop the intro is a tall pinned stage (align-items:center + 90svh),
       which on mobile pushes the label ~half a viewport away from the divider
       of the previous section. Reset it here. */
    .approach {
        padding-top: 0;
        position: relative;
        overflow: hidden;
        /* The mobile pin animation needs a stable stacking context. */
        isolation: isolate;
    }

    .approach>.section-shell:first-child {
        padding-bottom: 0;
    }

    .approach__intro {
        min-height: auto;
        align-items: flex-start;
        padding-top: 0;
        padding-bottom: clamp(1rem, 3vw, 2rem);
        position: relative;
        z-index: 2;
    }

    .approach__intro-copy {
        margin-top: 16px;
        position: relative;
        z-index: 3;
        will-change: transform, opacity;
        /* Matches `.services__intro-copy` in this breakpoint. */
    }

    /* Mobile lamp art: visible, centered at the top of the section
       so it can "fall from the header" during the scrubbed pin animation. */
    .approach__intro-art {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        display: block;
    }

    .approach-lamp-ball {
        position: absolute;
        top: 59%;
        left: 51%;
        right: auto;
        translate: -50% 0;
        width: clamp(5rem, 18vw, 8.5rem);
        /* Resting scale 1.8 — GSAP animates from 2.2 down to this value
           (matches the user-specified "scale: 180%"). */
    }


    .approach-lamp-base {
        position: absolute;
        top: 0;
        left: 50%;
        right: auto;
        translate: -50% 0;
        max-width: min(78vw, 32rem);
        width: auto;
    }

    .approach-lamp-base img {
        width: 100%;
    }

    /* Approach steps on mobile: stack like services cards.
       Each card is absolutely positioned, fixed monotonic z-index so the
       arriving card is always on top; GSAP only animates transform+opacity. */
    .approach__steps-shell {
        padding-top: 0 !important;
        /* Unified rhythm on mobile: same spacing cards→text and text→section end.
           This matches the margin-top of .method__grid--below-cards below. */
        padding-bottom: clamp(2rem, 4vw, 3rem);
    }

    /* Method text below Approach cards on mobile:
       - block centered horizontally on the page (margin auto + max-width)
       - text inside is LEFT-aligned
       - top margin = padding-bottom of the shell above → symmetric gap
         between cards↔text and text↔section-end. */
    .approach .method__grid--below-cards {
        margin: clamp(2rem, 4vw, 3rem) auto 0;
        padding-inline: 0;
        gap: clamp(1.5rem, 3vw, 2rem);
        max-width: 32rem;
        text-align: left;
    }

    .approach .method__grid--below-cards div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left;
    }

    .approach .method__grid--below-cards h3,
    .approach .method__grid--below-cards p {
        text-align: left;
    }



    .approach__steps {
        position: relative;
        display: block;
        width: 100%;
        min-height: 270px;
        /* Pull the whole stack 15px closer to the lamp (user request). */
        margin-top: calc(1rem - 15px);
        isolation: isolate;
        transform: translateZ(0);
    }


    .approach__steps .approach-step {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 230px;
        min-height: 0;
        padding: 1.3rem 1.5rem;
        margin: 0;
        background: #ffffff;
        border-radius: 1.5rem;
        box-shadow: 0 6px 16px -8px rgba(20, 20, 20, 0.18);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transform: translate3d(0, 0, 0);
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-origin: 50% 50%;
        opacity: 0;
        visibility: hidden;
    }

    .approach__steps .approach-step:nth-child(1) {
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

    .approach__steps .approach-step:nth-child(2) {
        z-index: 2;
    }

    .approach__steps .approach-step:nth-child(3) {
        z-index: 3;
    }



    .manifesto__track {
        display: flex;
        flex-wrap: nowrap;
    }


    .manifesto__statement {
        white-space: nowrap;
        font-size: clamp(3.2rem, 15vw, 12rem);
    }

    .approach-step,
    .approach-step--left,
    .approach-step--right,
    .services__list .service-card:nth-child(2),
    .services__list .service-card:nth-child(4) {
        transform: none;
    }

    .work-card__meta {
        display: flex;
        align-items: baseline;
        gap: 1rem;
    }

    .work-portfolio-hero__top,
    .work-project__topline {
        grid-template-columns: 1fr;
        justify-items: start;
    }

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

    .work-preview--portfolio {
        position: static;
    }

    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__col--brand {
        grid-column: 1 / -1;
    }
}

/* DESKTOP RESET: Ensure the grid remains unchanged on >=1181 */
@media (min-width: 1181px) {
    .services__stack-container {
        display: contents;
        /* Transparent to the grid */
    }

    .services__layout .service-card {
        position: relative;
        top: auto;
        left: auto;
        margin: 0;
    }
}

@media (max-width: 820px) {
    :root {
        --container: min(100% - 1.4rem, 1360px);
    }

    .editorial-section__heading,
    .editorial-section__body,
    .services__intro-copy,
    .services__title,
    .manifesto__intro,
    .approach__intro-copy,
    .method__grid--below-cards div,
    .approach__footer,
    .work-hero__body,
    .work-index__header,
    .work-selected__heading,
    .work-manifesto-strip__meta,
    .work-cta.section-shell,
    .fallback-page__section,
    .site-footer__col,
    .site-footer__bottom {
        padding-left: clamp(0.55rem, 2.4vw, 0.9rem);
    }

    .services__intro-copy,
    .manifesto__intro,
    .approach__intro-copy {
        margin-top: 26px !important;
        padding-left: 0;
    }

    .section-label {
        margin-top: 0 !important;
    }

    .site-header__status {
        display: none;
    }

    .button {
        width: fit-content;
    }

    .hero {
        min-height: auto;
        padding-top: 6.6rem;
    }

    .home-opening {
        min-height: 46rem;
    }

    .home-opening__inner,
    .home-opening__art {
        min-height: 46rem;
        padding-top: 4.8rem;
    }

    .home-opening__v-wrap {
        width: 32rem;
        bottom: 9.2rem;
    }

    .home-opening__desk {
        width: 52rem;
        bottom: -1rem;
    }

    .hero__title,
    .lamp-transition__intro h2,
    .editorial-section h2,
    .services__title,
    .manifesto__poster h2,
    .approach__intro h2,
    .contact-cta__panel h2,
    .work-hero__body h1,
    .typographic-interlude h2,
    .work-cta__panel h2,
    .fallback-page__section h1,
    .contact-modal__intro h2 {
        font-size: clamp(2.6rem, 12vw, 4.3rem);
    }

    .hero__support {
        justify-content: start;
        padding-right: 0;
    }

    .hero__scene {
        min-height: 23rem;
    }

    .hero__desk {
        width: 120%;
        right: -14%;
        bottom: -16%;
    }

    .hero__v-mark {
        width: 13rem;
        bottom: 18%;
    }

    .hero__floating-note {
        left: 0;
        bottom: 6%;
        max-width: 12rem;
    }

    .lamp-transition__stage {
        min-height: 22rem;
    }

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

    .work-index__meta {
        grid-column: 2;
    }

    .work-preview {
        display: none;
    }

    .work-card__media,
    .work-card__visual {
        min-height: 21rem;
    }

    .work-manifesto-strip__line p {
        letter-spacing: 0.16em;
        font-size: 1rem;
    }

    .work-index--portfolio .work-index__item {
        grid-template-columns: auto 1fr;
        min-height: auto;
    }

    .work-featured__visual {
        min-height: 18rem;
    }

    .work-index--portfolio .work-index__meta {
        grid-column: 2;
    }

    .work-project__visual {
        min-height: 20rem;
    }

    .work-project__details {
        gap: 1rem;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {

    .editorial-section__heading,
    .editorial-section__body,
    .services__intro-copy,
    .services__title,
    .manifesto__intro,
    .approach__intro-copy,
    .method__grid--below-cards div,
    .approach__footer,
    .work-hero__body,
    .work-index__header,
    .work-selected__heading,
    .work-manifesto-strip__meta,
    .work-cta.section-shell,
    .fallback-page__section,
    .site-footer__col,
    .site-footer__bottom {
        padding-left: 0.95rem;
    }

    .site-header__inner {
        gap: 0.8rem;
    }

    .home-opening {
        min-height: 34rem;
    }

    .home-opening__inner,
    .home-opening__art {
        min-height: 34rem;
        padding-top: 4rem;
    }

    .home-opening__v-wrap {
        width: 22rem;
        bottom: 7.2rem;
    }

    .home-opening__desk {
        width: 34rem;
        bottom: -0.6rem;
    }

    .site-brand {
        width: 10.8rem;
    }

    body.home .site-brand {
        width: 5.5rem;
    }

    .site-header__meta .button {
        min-height: 2.75rem;
        padding-inline: 1rem;
    }

    .hero__sign,
    .lamp-transition__sign {
        display: none;
    }

    .contact-modal__panel,
    .contact-modal__intro {
        padding-right: 0;
    }

    .contact-modal__panel {
        width: min(100% - 1rem, 62rem);
        gap: 1.4rem;
        border-radius: 1.6rem;
    }

    .work-portfolio-hero__lead h1,
    .work-selected__heading h2,
    .work-cta--portfolio .work-cta__panel h2 {
        font-size: clamp(2.8rem, 13vw, 4.6rem);
    }

    .work-index--portfolio .work-index__title {
        font-size: clamp(2.1rem, 10vw, 3.2rem);
    }

    .work-project__heading h2 {
        font-size: clamp(2.2rem, 11vw, 3.7rem);
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .split-word,
    .js-ready [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1024px) {
    .home-opening__v-wrap {
        transform: translate(calc(-50% + 5px), 0);
    }
}