/* ============================================================
   VISIOMINDS — HOME (Namma-inspired editorial dark)
   ============================================================
   Self-contained homepage stylesheet. Other pages still load
   style.css; this file is loaded ONLY by index.html.
   ============================================================ */

/* ------- 1. Reset & tokens ------- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; } /* Lenis handles smoothness */

:root {
    /* ---- DARK theme (default) ---- */
    --bg:        #0A0A0A;
    --bg-2:      #111111;
    --bg-3:      #161616;
    --line:      rgba(255,255,255,0.08);
    --line-2:    rgba(255,255,255,0.14);

    --ink:       rgba(255,255,255,0.94);
    --ink-mute:  rgba(255,255,255,0.55);
    --ink-faint: rgba(255,255,255,0.32);

    --red:       #FF3838;
    --red-soft:  rgba(255,56,56,0.18);

    --media-highlight: rgba(255,255,255,0.04);
    --media-tint:      rgba(255,56,56,0.10);
    --on-red:          #ffffff;

    /* type families */
    --sans:      'Inter', system-ui, sans-serif;
    --display:   'Inter Tight', 'Inter', sans-serif;
    --serif:     'Cormorant Garamond', Georgia, serif;

    /* spacing */
    --gutter:    clamp(20px, 4vw, 56px);
    --pad-y-s:   80px;
    --pad-y-m:   120px;
    --pad-y-l:   180px;

    /* timing */
    --ease:      cubic-bezier(0.65, 0, 0.35, 1);
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

    color-scheme: dark;
}

/* ---- LIGHT theme ---- */
:root[data-theme="light"] {
    --bg:        #FFFFFF;
    --bg-2:      #F5F5F4;
    --bg-3:      #ECECEA;
    --line:      rgba(14,14,14,0.10);
    --line-2:    rgba(14,14,14,0.20);

    --ink:       #0E0E0E;
    --ink-mute:  rgba(14,14,14,0.55);
    --ink-faint: rgba(14,14,14,0.32);

    --red:       #E1281F;
    --red-soft:  rgba(225,40,31,0.14);

    --media-highlight: rgba(14,14,14,0.045);
    --media-tint:      rgba(225,40,31,0.08);

    color-scheme: light;
}

html, body { width: 100%; overflow-x: hidden; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color .45s var(--ease), color .45s var(--ease);
}

/* During theme swap, transition every color/border/fill so the change feels deliberate, not jolting */
:root.theme-switching,
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after {
    transition: background-color .45s var(--ease),
                color .45s var(--ease),
                border-color .45s var(--ease),
                fill .45s var(--ease),
                stroke .45s var(--ease) !important;
}

/* Lenis smooth scroll required */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

::selection { background: var(--red); color: var(--on-red, #fff); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ------- 2. Type primitives ------- */
.eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.serif-italic {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
}

/* ------- 3. Page transition + cursor ------- */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--bg);
    transform: translateY(100%);
    pointer-events: none;
}
.page-transition.entering { animation: pageEnter .55s var(--ease) forwards; }
.page-transition.leaving  { animation: pageLeave .55s var(--ease) forwards; }
@keyframes pageEnter { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pageLeave { from { transform: translateY(0); } to { transform: translateY(-100%); } }

.cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    top: 0; left: 0;
    mix-blend-mode: difference;
    will-change: transform;
}
.cursor__dot {
    position: absolute;
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
    top: -3px; left: -3px;
}
.cursor__ring {
    position: absolute;
    width: 28px; height: 28px;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    top: -14px; left: -14px;
    transition: width .35s var(--ease-out), height .35s var(--ease-out),
                top .35s var(--ease-out), left .35s var(--ease-out),
                border-color .25s ease;
}
.cursor.is-link .cursor__ring {
    width: 56px; height: 56px;
    top: -28px; left: -28px;
    border-color: rgba(255,255,255,0.9);
}
@media (max-width: 900px), (pointer: coarse) {
    .cursor { display: none; }
}

/* ------- 4. Navigation ------- */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    padding: 22px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    transition: background .4s ease, border-color .4s ease;
    border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom-color: var(--line);
}

.nav__brand { display: inline-grid; align-items: center; line-height: 0; }
.nav__brand-img {
    grid-area: 1 / 1;                 /* both marks share one cell: no reflow */
    height: 22px;
    width: 138px;                      /* 2245x357 at 22px tall */
    display: block;
    object-fit: contain;
    object-position: left center;
    transition: opacity .3s var(--ease);
}
.nav__brand-img--light { opacity: 0; }
:root[data-theme="light"] .nav__brand-img--dark  { opacity: 0; }
:root[data-theme="light"] .nav__brand-img--light { opacity: 1; }

.nav__meta {
    display: flex; align-items: center; gap: 24px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    font-feature-settings: "tnum";
}

.nav__cta {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    padding: 10px 22px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.nav__cta:hover { background: var(--red); border-color: var(--red); color: var(--on-red, #fff); }

/* "Menu" text button — works on every viewport, opens the takeover */
.nav__menu {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .25s ease;
}
.nav__menu:hover { color: var(--red); }

/* ============================================================
   FULLSCREEN MENU TAKEOVER
   ============================================================ */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--bg);
    transform: translateY(-100%);
    transition: transform .9s cubic-bezier(0.83, 0, 0.17, 1);
    pointer-events: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}
.menu-overlay.is-open {
    transform: translateY(0);
    pointer-events: auto;
}

.menu-overlay__top {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px var(--gutter);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 2;
}
.menu-overlay__brand img { height: 22px; width: auto; display: block; }
.menu-overlay__brand .nav__brand-img--light { display: none; }
:root[data-theme="light"] .menu-overlay__brand .nav__brand-img--dark { display: none; }
:root[data-theme="light"] .menu-overlay__brand .nav__brand-img--light { display: block; }

.menu-overlay__close {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .25s ease;
}
.menu-overlay__close:hover { color: var(--red); }

.menu-overlay__body {
    flex: 1 0 auto;
    padding: 80px var(--gutter) 60px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 80px;
    align-items: end;
}

.menu-overlay__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* The link itself acts as the mask container */
.menu-overlay__nav-link {
    display: block;
    overflow: hidden;
    padding: 0;
    color: var(--ink);
    cursor: pointer;
}
/* The inner row carries the actual layout + the rise-up transform */
.menu-overlay__nav-link__inner {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 28px;
    align-items: baseline;
    padding: 14px 0;
    transform: translateY(110%);
    transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
                color .3s ease,
                padding-left .5s var(--ease-out);
}
.menu-overlay.is-open .menu-overlay__nav-link__inner {
    transform: translateY(0);
}
.menu-overlay__nav-link:hover .menu-overlay__nav-link__inner {
    color: var(--red);
    padding-left: 18px;
}
.menu-overlay__nav-link__index {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding-top: 0.65em;
    font-feature-settings: "tnum";
}
.menu-overlay__nav-link__title {
    font-family: var(--display);
    font-size: clamp(48px, 10vw, 152px);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.95;
}
.menu-overlay__nav-link__title em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-mute);
}

.menu-overlay__side {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-bottom: 8px;
}
.menu-overlay__col-label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.menu-overlay__col-label::before {
    content: '';
    width: 24px; height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.menu-overlay__times {
    display: grid;
    gap: 6px;
    font-family: var(--sans);
    font-size: 14px;
    font-feature-settings: "tnum";
    color: var(--ink);
}
.menu-overlay__times .city {
    color: var(--ink-mute);
    margin-right: 12px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.18em;
    min-width: 90px;
    display: inline-block;
}

.menu-overlay__contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.menu-overlay__contact a {
    font-family: var(--display);
    font-size: clamp(20px, 1.8vw, 28px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    transition: color .25s ease;
    line-height: 1.2;
}
.menu-overlay__contact a:hover { color: var(--red); }

.menu-overlay__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    font-size: 13px;
    letter-spacing: 0.04em;
}
.menu-overlay__socials a {
    color: var(--ink-mute);
    transition: color .25s ease;
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
}
.menu-overlay__socials a:hover { color: var(--ink); border-color: var(--ink); }

.menu-overlay__foot {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* Stagger the rise of each nav link's inner mask + thin bottom border for separation */
.menu-overlay__nav-link {
    border-bottom: 1px solid var(--line);
}
.menu-overlay__nav-link:first-child { border-top: 1px solid var(--line); }
.menu-overlay.is-open .menu-overlay__nav-link:nth-child(1) .menu-overlay__nav-link__inner { transition-delay: .35s; }
.menu-overlay.is-open .menu-overlay__nav-link:nth-child(2) .menu-overlay__nav-link__inner { transition-delay: .43s; }
.menu-overlay.is-open .menu-overlay__nav-link:nth-child(3) .menu-overlay__nav-link__inner { transition-delay: .51s; }
.menu-overlay.is-open .menu-overlay__nav-link:nth-child(4) .menu-overlay__nav-link__inner { transition-delay: .59s; }
.menu-overlay.is-open .menu-overlay__nav-link:nth-child(5) .menu-overlay__nav-link__inner { transition-delay: .67s; }
.menu-overlay.is-open .menu-overlay__nav-link:nth-child(6) .menu-overlay__nav-link__inner { transition-delay: .75s; }

.menu-overlay__side > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.menu-overlay.is-open .menu-overlay__side > * { opacity: 1; transform: translateY(0); }
.menu-overlay.is-open .menu-overlay__side > *:nth-child(1) { transition-delay: .65s; }
.menu-overlay.is-open .menu-overlay__side > *:nth-child(2) { transition-delay: .73s; }
.menu-overlay.is-open .menu-overlay__side > *:nth-child(3) { transition-delay: .81s; }
.menu-overlay.is-open .menu-overlay__side > *:nth-child(4) { transition-delay: .89s; }

/* ------- 5. Hero ------- */
.hero {
    min-height: 100vh;
    padding: 180px var(--gutter) 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 100px;
}

.hero__display {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(54px, 10.5vw, 168px);
    line-height: 0.95;
    letter-spacing: -0.035em;
    max-width: 1500px;
    color: var(--ink);
}
.hero__display em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink-mute);
}
.hero__lede {
    max-width: 540px;
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1.65;
    margin-left: auto;
}

/* ------- 6. Details craft strip (horizontal) ------- */
.details {
    padding: var(--pad-y-l) 0 var(--pad-y-m);
    overflow: hidden;
}
.details__head {
    padding: 0 var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 60px;
    gap: 40px;
}
.details__title {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 96px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    max-width: 720px;
}
.details__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.details__sub {
    max-width: 320px;
    color: var(--ink-mute);
    font-size: 14px;
    line-height: 1.6;
}
.details__rail {
    display: flex;
    gap: 24px;
    padding: 0 var(--gutter) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.details__rail::-webkit-scrollbar { display: none; }
.detail-card {
    flex: 0 0 auto;
    width: clamp(280px, 38vw, 520px);
    aspect-ratio: 4 / 3;
    background: var(--bg-2);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
}
.detail-card__media {
    position: absolute;
    inset: 0;
    background: var(--bg-3);
    background-image:
        linear-gradient(135deg, transparent 35%, var(--media-tint) 50%, transparent 65%),
        radial-gradient(circle at 30% 30%, var(--media-highlight), transparent 60%);
    transition: transform 1.2s var(--ease-out);
}
.detail-card:hover .detail-card__media { transform: scale(1.04); }
.detail-card > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease-out), filter .8s ease;
    z-index: 1;
    filter: grayscale(0.1);
}
.detail-card:hover > img { transform: scale(1.05); filter: grayscale(0); }
.detail-card__caption { z-index: 3; mix-blend-mode: difference; color: #fff; }
.detail-card__placeholder {
    position: absolute;
    inset: 24px;
    border: 1px dashed var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.6;
}
.detail-card__caption {
    position: absolute;
    left: 20px; bottom: 20px;
    color: var(--ink);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    z-index: 2;
}
.detail-card__caption span { color: var(--ink-mute); }

/* ------- 7. About ------- */
.about {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.about__inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: start;
}
.about__statement {
    font-family: var(--display);
    font-size: clamp(40px, 5.2vw, 84px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.02;
    color: var(--ink);
    margin: 0;
}
.about__statement em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.about__statement .accent { color: var(--red); font-style: normal; }

.about__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
}
.about__body {
    color: var(--ink-mute);
    font-size: 17px;
    line-height: 1.7;
    max-width: 560px;
    text-align: left; /* paragraphs read rag-right for legibility */
}
.about__body p + p { margin-top: 20px; }
.about__body em {
    color: var(--ink);
    font-style: italic;
    font-family: var(--serif);
}

.about__meta {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: clamp(36px, 6vw, 72px);
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
    max-width: 560px;
}
.about__meta-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}
.about__meta-stat__num {
    font-family: var(--display);
    font-size: clamp(36px, 3.6vw, 56px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.95;
    color: var(--ink);
}
.about__meta-stat__label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.about__cta {
    margin-top: 48px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 14px 28px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    transition: background .3s ease, border-color .3s ease, color .3s ease, gap .3s var(--ease-out);
}
.about__cta svg { transition: transform .35s var(--ease-out); }
.about__cta:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--on-red, #fff);
    gap: 20px;
}
.about__cta:hover svg { transform: translateX(4px); }

/* ------- 8. Selected work (2x2) ------- */
.work {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.work__head {
    max-width: 1500px;
    margin: 0 auto 80px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
}
.work__title {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 96px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.work__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.work__see-all {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 6px;
    transition: color .3s, border-color .3s;
}
.work__see-all:hover { color: var(--ink); border-color: var(--ink); }

.work__grid {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 40px;
}
.work-card { display: block; cursor: pointer; }
.work-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line);
}
.work-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s var(--ease-out), filter .8s ease;
    filter: grayscale(0.1);
}
.work-card:hover .work-card__media img { transform: scale(1.05); filter: grayscale(0); }

/* Cards carrying coverRatio size their box to the asset, so the cover is shown
   whole. The idle and hover zoom are dropped here because a 5% scale on a
   contained image crops the edges again, which is what the ratio avoids. The
   card still lifts on hover, that transform sits on the media wrapper. */
.work-card__media.is-fit img { object-fit: contain; filter: none; transform: none; }
.work-card:hover .work-card__media.is-fit img { transform: none; filter: none; }
.work-card__index {
    position: absolute;
    top: 20px; left: 20px;
    font-family: var(--display);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--ink);
    z-index: 2;
}
.work-card__cta {
    position: absolute;
    bottom: 20px; right: 20px;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.6);
    opacity: 0;
    transition: transform .5s var(--ease-out), opacity .4s ease;
    z-index: 2;
}
.work-card:hover .work-card__cta { transform: scale(1); opacity: 1; }

.work-card__meta {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: baseline;
}
.work-card__title {
    font-family: var(--display);
    font-size: clamp(24px, 2.6vw, 38px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.work-card__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); margin-left: 12px; font-size: 0.7em; }
.work-card__year {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.work-card__tagline {
    grid-column: 1 / -1;
    font-size: 14px;
    color: var(--ink-mute);
    line-height: 1.5;
}


/* ------- 10. Services (vertical numbered) ------- */
.services {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.services__head {
    max-width: 1500px;
    margin: 0 auto 80px;
}
.services__title {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 96px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    max-width: 1100px;
}
.services__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }

.services__list {
    max-width: 1500px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
}
.service-row {
    display: grid;
    grid-template-columns: 80px 1fr 1.4fr 60px;
    gap: 40px;
    padding: 56px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
    transition: padding .5s var(--ease-out);
    cursor: default;
}
.service-row:hover { padding-left: 12px; }
.service-row__num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 24px;
    color: var(--ink-mute);
    font-weight: 400;
}
.service-row__title {
    font-family: var(--display);
    font-size: clamp(28px, 3.2vw, 48px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ink);
    transition: color .4s ease;
}
.service-row:hover .service-row__title { color: var(--red); }
.service-row__body {
    color: var(--ink-mute);
    font-size: 15px;
    line-height: 1.65;
    max-width: 560px;
}
.service-row__list {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    list-style: none;
}
.service-row__list li {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: 100px;
}
.service-row__arrow {
    justify-self: end;
    color: var(--ink-mute);
    transition: color .3s ease, transform .5s var(--ease-out);
}
.service-row:hover .service-row__arrow { color: var(--red); transform: translateX(8px); }

/* ------- 11. Process ------- */
.process {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
    background: var(--bg);
}
.process__head {
    max-width: 1500px;
    margin: 0 auto 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
}
.process__title {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 96px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.process__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.process__sub {
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1.65;
    max-width: 480px;
    margin-left: auto;
}

.process__list {
    max-width: 1500px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
}
.process-step {
    display: grid;
    grid-template-columns: 100px 1fr 1.5fr;
    gap: 40px;
    padding: 64px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
}
.process-step__num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(60px, 7vw, 110px);
    line-height: 0.9;
    color: var(--ink-mute);
}
.process-step__name {
    font-family: var(--display);
    font-size: clamp(24px, 2.6vw, 36px);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.process-step__name em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); display: block; margin-top: 10px; font-size: 0.7em; }
.process-step__body {
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1.7;
    max-width: 560px;
}

/* ------- 12. The Lab gallery ------- */
.lab {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.lab__head {
    max-width: 1500px;
    margin: 0 auto 60px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
}
.lab__title {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 96px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.lab__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.lab__sub {
    max-width: 320px;
    color: var(--ink-mute);
    font-size: 14px;
    line-height: 1.6;
}

.lab__grid {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 90px;
    gap: 16px;
}
.lab-tile {
    background: var(--bg-2);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.lab-tile__media {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg, transparent 30%, var(--media-highlight) 50%, transparent 70%),
        radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--media-tint), transparent 60%);
    transition: transform 1.2s var(--ease-out);
}
.lab-tile:hover .lab-tile__media { transform: scale(1.06); }
.lab-tile > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out), filter .8s ease;
    z-index: 1;
    filter: grayscale(0.15);
}
.lab-tile:hover > img { transform: scale(1.06); filter: grayscale(0); }
.lab-tile__tag {
    position: absolute;
    inset: 16px;
    border: 1px dashed var(--line-2);
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
}

/* lab tile spans (build interesting masonry) */
.lab-tile.t-1  { grid-column: span 4; grid-row: span 4; --gx: 30%; --gy: 30%; }
.lab-tile.t-2  { grid-column: span 4; grid-row: span 3; --gx: 70%; --gy: 50%; }
.lab-tile.t-3  { grid-column: span 4; grid-row: span 5; --gx: 50%; --gy: 60%; }
.lab-tile.t-4  { grid-column: span 5; grid-row: span 4; --gx: 60%; --gy: 30%; }
.lab-tile.t-5  { grid-column: span 3; grid-row: span 3; --gx: 40%; --gy: 40%; }
.lab-tile.t-6  { grid-column: span 4; grid-row: span 5; --gx: 30%; --gy: 70%; }
.lab-tile.t-7  { grid-column: span 4; grid-row: span 3; --gx: 60%; --gy: 50%; }
.lab-tile.t-8  { grid-column: span 4; grid-row: span 4; --gx: 50%; --gy: 30%; }
.lab-tile.t-9  { grid-column: span 4; grid-row: span 4; --gx: 70%; --gy: 70%; }
.lab-tile.t-10 { grid-column: span 6; grid-row: span 3; --gx: 40%; --gy: 40%; }
.lab-tile.t-11 { grid-column: span 3; grid-row: span 4; --gx: 30%; --gy: 50%; }
.lab-tile.t-12 { grid-column: span 3; grid-row: span 4; --gx: 60%; --gy: 30%; }

/* ------- 13. Clients ------- */
.clients {
    padding: var(--pad-y-m) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.clients__label {
    text-align: center;
    color: var(--ink-mute);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 50px;
}
.clients__track {
    display: flex;
    align-items: center;
    gap: 80px;
    will-change: transform;
}
.client-logo {
    flex: 0 0 auto;
    height: 36px;
    opacity: 0.55;
    filter: grayscale(1) brightness(0) invert(1);
    transition: opacity .4s ease, filter .4s ease;
}
.client-logo:hover { opacity: 1; }
:root[data-theme="light"] .client-logo { filter: grayscale(1) brightness(0) invert(0); }
.client-logo img { height: 100%; width: auto; display: block; max-width: none; }

/* ------- 14. Contact giant CTA ------- */
.contact {
    padding: var(--pad-y-l) var(--gutter);
    text-align: left;
    position: relative;
}
.contact__inner { max-width: 1500px; margin: 0 auto; }
.contact__eyebrow { margin-bottom: 40px; }
.contact__display {
    font-family: var(--display);
    font-size: clamp(56px, 11vw, 200px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.92;
    color: var(--ink);
}
.contact__display em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-mute);
}
.contact__display .accent { color: var(--red); font-style: normal; }
.contact__display a {
    border-bottom: 4px solid var(--red);
    transition: color .3s ease;
    display: inline-block;
}
.contact__display a:hover { color: var(--red); }

.contact__row {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    border-top: 1px solid var(--line);
    padding-top: 40px;
    color: var(--ink-mute);
    font-size: 13px;
    letter-spacing: 0.04em;
}
.contact__row strong {
    display: block;
    color: var(--ink-mute);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.contact__row a, .contact__row p { color: var(--ink); font-size: 16px; line-height: 1.5; }
.contact__row a { transition: color .3s ease; }
.contact__row a:hover { color: var(--red); }

/* ------- 15. Footer (slim) ------- */
.foot {
    padding: 30px var(--gutter);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.foot a { color: var(--ink-mute); transition: color .3s ease; }
.foot a:hover { color: var(--ink); }
.foot__legal { display: flex; gap: 18px; align-items: center; }

/* ------- 16. WhatsApp FAB — brand colours, gentle continuous bob ------- */
.wa-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    box-shadow: 0 12px 36px var(--red-soft);
    animation: wa-bob 3.6s ease-in-out infinite;
    transition: background .3s ease;
}
.wa-fab::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid var(--red);
    opacity: 0.45;
    animation: wa-ring 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    pointer-events: none;
}
.wa-fab:hover {
    animation-play-state: paused;
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 22px 56px var(--red-soft);
    transition: transform .35s var(--ease-out), box-shadow .35s ease;
}
.wa-fab svg { width: 26px; height: 26px; fill: var(--on-red, #fff); position: relative; z-index: 1; }
@keyframes wa-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes wa-ring {
    0%   { transform: scale(1);   opacity: 0.45; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ------- Page-load entrance ------- */
@keyframes nav-drop {
    from { transform: translateY(-110%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
.nav { animation: nav-drop .9s var(--ease-out) .15s both; }

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.page-progress { animation: fade-in .8s ease .4s both; }

/* ------- CTA arrow — gentle continuous nudge that pauses on hover ------- */
@keyframes arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
.about__cta svg,
.work-card__cta svg,
.service-row__arrow svg {
    animation: arrow-nudge 2.6s ease-in-out infinite;
}
.about__cta:hover svg { animation-play-state: paused; }

/* ------- Service row title slides on hover (more dramatic) ------- */
.service-row__title { transition: transform .5s var(--ease-out), color .35s ease; }
.service-row:hover .service-row__title { transform: translateX(14px); }

/* ------- Work card hover — red wash overlay ------- */
.work-card__media { position: relative; }
.work-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--red);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity .5s var(--ease-out);
    pointer-events: none;
    z-index: 1;
}
.work-card:hover .work-card__media::after { opacity: 0.18; }

/* ------- Work card hover -------
   The base state floods the image with an 18% red multiply, which flattens the
   artwork and makes every project look the same colour. This replaces it: the
   image sits desaturated at rest, comes to full colour and lifts on approach,
   and the accent moves to the meta line where it does not cover the work.
   Scoped to real pointers so a phone never gets stuck in the hover state. */
@media (hover: hover) and (pointer: fine) {
    .work-card__media {
        transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
    }
    .work-card:hover .work-card__media {
        transform: translateY(-8px);
        box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.55);
    }

    .work-card__media img {
        filter: grayscale(0.5) contrast(1.02);
        transform: scale(1.01);
    }
    .work-card:hover .work-card__media img {
        filter: grayscale(0) contrast(1);
        transform: scale(1.07);
    }

    /* dialled right back, so it warms the image instead of flooding it */
    .work-card:hover .work-card__media::after { opacity: 0.05; }

    /* a rule sweeps across under the meta, left to right */
    .work-card__meta {
        background-image: linear-gradient(var(--red), var(--red));
        background-repeat: no-repeat;
        background-position: 0 100%;
        background-size: 0% 1px;
        padding-bottom: 14px;
        transition: background-size .6s var(--ease-out);
    }
    .work-card:hover .work-card__meta { background-size: 100% 1px; }

    .work-card__year { transition: color .4s ease; }
    .work-card:hover .work-card__year { color: var(--red); }

    .work-card__index { transition: opacity .45s ease, transform .45s var(--ease-out); }
    .work-card:hover .work-card__index { opacity: 0; transform: translateY(-6px); }
}

/* ------- Hover ripple effect on detail-card and lab-tile ------- */
.detail-card,
.lab-tile,
.btp-tile {
    transition: transform .55s var(--ease-out);
}
.detail-card:hover,
.lab-tile:hover,
.btp-tile:hover {
    transform: translateY(-6px);
}

/* ------- Subtle accent shimmer — red words pulse softly ------- */
@keyframes accent-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.78; }
}
.hero__display .accent,
.about__statement .accent,
.contact__display .accent,
.studio-hero__display .accent,
.locale__title .accent {
    animation: accent-pulse 4s ease-in-out infinite;
}

/* ------- Nav link underline draws in from left on hover ------- */
.nav__menu { position: relative; }
.nav__menu::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px; bottom: 4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .4s var(--ease-out);
}
.nav__menu:hover::after { transform: scaleX(1); }

/* ------- Reveal fade-in for hero on first paint ------- */
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero__lede,
.studio-hero__lede {
    animation: hero-rise 1.1s var(--ease-out) .4s both;
}

/* ============================================================
   PRELOADER — brand mark fade, slides up off screen
   ============================================================ */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 10500;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform .9s cubic-bezier(0.83, 0, 0.17, 1);
}
.preloader.is-done {
    transform: translateY(-100%);
}
.preloader__brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--display);
    font-weight: 700;
    color: var(--ink);
    overflow: hidden;
    line-height: 1;
}
.preloader__brand-text {
    font-size: clamp(36px, 5vw, 72px);
    letter-spacing: -0.025em;
    display: inline-block;
    animation: preloader-rise 1s var(--ease-out) .15s both;
}
.preloader__brand-pct {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 1.4vw, 22px);
    color: var(--ink-mute);
    font-feature-settings: "tnum";
    display: inline-block;
    min-width: 4ch;
    animation: preloader-rise 1s var(--ease-out) .3s both;
}
@keyframes preloader-rise {
    from { transform: translateY(110%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.preloader__bar {
    position: absolute;
    bottom: 0; left: 0;
    height: 1px;
    width: 100%;
    background: var(--line);
}
.preloader__bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 0;
    background: var(--red);
    transition: width .35s ease;
}

/* Hide site content until the preloader is dismissed.

   Utility overlays are excluded. This selector's specificity is (0,4,1),
   which beats a plain class like .hover-preview (0,1,0), so it was forcing
   opacity:1 onto overlays that hide themselves with opacity:0. The
   hover-preview is a transparent 280x200 box with a large drop shadow
   parked at top-left, so that shadow rendered as a stray white panel under
   the nav on every page. Overlays manage their own visibility. */
:root.is-loading body > *:not(.preloader):not(.page-transition):not(.cursor):not(.hover-preview):not(.cookie-banner):not(.page-progress):not(.lightbox):not(.skip-link) {
    opacity: 0;
}
:root:not(.is-loading) body > *:not(.preloader):not(.page-transition):not(.cursor):not(.hover-preview):not(.cookie-banner):not(.page-progress):not(.lightbox):not(.skip-link) {
    transition: opacity .8s ease .15s;
    opacity: 1;
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
    position: fixed;
    bottom: 24px;
    left: 24px;
    max-width: 460px;
    z-index: 9000;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: 24px 28px;
    transform: translateY(calc(100% + 48px));
    opacity: 0;
    transition: transform .8s var(--ease-out) .5s, opacity .6s ease .5s;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.cookie-banner__label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.cookie-banner__label::before {
    content: '';
    width: 24px; height: 1px;
    background: currentColor;
    opacity: 0.5;
}
.cookie-banner__body {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 20px;
}
.cookie-banner__body a {
    color: var(--red);
    border-bottom: 1px solid var(--red);
    padding-bottom: 1px;
}
.cookie-banner__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.cookie-banner__btn {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 10px 20px;
    border-radius: 100px;
    cursor: pointer;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.cookie-banner__btn--accept {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
.cookie-banner__btn--accept:hover { background: var(--red); border-color: var(--red); color: var(--on-red, #fff); }
.cookie-banner__btn--decline:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 600px) {
    .cookie-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; padding: 18px 20px; }
}

/* ============================================================
   HOVER IMAGE PREVIEW (follows cursor)
   ============================================================ */
.hover-preview {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    height: 200px;
    pointer-events: none;
    z-index: 9990;
    overflow: hidden;
    border-radius: 4px;
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0;
    transition: opacity .35s var(--ease-out), transform .55s var(--ease-out);
    will-change: transform, opacity;
}
/* Shadow only while a preview image is actually shown, so an empty
   preview box can never paint anything even if opacity is overridden. */
.hover-preview.is-active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.hover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 900px), (pointer: coarse) {
    .hover-preview { display: none; }
}

/* ============================================================
   HORIZONTAL SCROLL — for the Lab gallery on home
   ============================================================ */
.lab--horizontal .lab__grid {
    display: flex;
    grid-template-columns: none;
    grid-auto-rows: auto;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 8px;
    margin: 0 calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.lab--horizontal .lab__grid::-webkit-scrollbar { display: none; }
.lab--horizontal .lab-tile {
    flex: 0 0 auto;
    width: clamp(280px, 30vw, 420px);
    height: clamp(360px, 38vw, 540px);
    grid-column: auto !important;
    grid-row: auto !important;
    scroll-snap-align: start;
}

/* ============================================================
   404 PAGE
   ============================================================ */
.notfound {
    min-height: 100vh;
    padding: 160px var(--gutter) 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60px;
}
.notfound__code {
    font-family: var(--display);
    font-size: clamp(120px, 22vw, 360px);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.85;
    color: var(--ink);
}
.notfound__code em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-mute);
}
.notfound__body {
    max-width: 540px;
    color: var(--ink-mute);
    font-size: 17px;
    line-height: 1.65;
}
.notfound__back {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0.04em;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: 14px 28px;
    transition: background .3s ease, border-color .3s ease, color .3s ease, gap .3s ease;
}
.notfound__back:hover { background: var(--red); border-color: var(--red); color: var(--on-red, #fff); gap: 22px; }

/* ============================================================
   PLANS PAGE
   ============================================================ */
.plans-hero { padding: 200px var(--gutter) 80px; border-bottom: 1px solid var(--line); }
.plans-hero__inner { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: end; }
.plans-hero__title {
    font-family: var(--display);
    font-size: clamp(48px, 9vw, 152px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.95;
}
.plans-hero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.plans-hero__lede { font-size: 16px; line-height: 1.65; color: var(--ink-mute); max-width: 480px; }

.plans { padding: var(--pad-y-l) var(--gutter); }
.plans__list {
    max-width: 1500px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
}
.plan-row {
    display: grid;
    grid-template-columns: 80px 1fr 1.6fr 1.2fr;
    gap: 40px;
    padding: 56px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
    transition: padding-left .5s var(--ease-out);
}
.plan-row:hover { padding-left: 12px; }
.plan-row__num { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--ink-mute); }
.plan-row__name {
    font-family: var(--display);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
}
.plan-row__price {
    font-family: var(--display);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-top: 12px;
}
.plan-row__price em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); font-size: 0.7em; margin-left: 6px; }
.plan-row__body { color: var(--ink-mute); font-size: 15px; line-height: 1.65; }
.plan-row__list { margin-top: 16px; list-style: none; }
.plan-row__list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-mute);
    display: flex;
    align-items: center;
    gap: 12px;
}
.plan-row__list li::before { content: '—'; color: var(--ink-faint); }
.plan-row__list li:last-child { border-bottom: none; }
.plan-row__cta {
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    color: var(--ink);
    font-size: 13px;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
    justify-self: end;
}
.plan-row__cta:hover { background: var(--red); border-color: var(--red); color: var(--on-red, #fff); }
@media (max-width: 1100px) {
    .plan-row { grid-template-columns: 60px 1fr 1fr; }
    .plan-row__cta { grid-column: 1 / -1; justify-self: start; margin-top: 12px; }
    .plans-hero__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) {
    .plan-row { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   FAQ PAGE
   ============================================================ */
.faq-hero { padding: 200px var(--gutter) 80px; border-bottom: 1px solid var(--line); }
.faq-hero__inner { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: end; }
.faq-hero__title { font-family: var(--display); font-size: clamp(48px, 9vw, 152px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; }
.faq-hero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.faq-hero__lede { font-size: 16px; line-height: 1.65; color: var(--ink-mute); max-width: 480px; }

.faq { padding: var(--pad-y-l) var(--gutter); }
.faq__list { max-width: 1100px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 32px 60px 32px 0;
    font-family: var(--display);
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink);
    position: relative;
    line-height: 1.3;
    transition: color .3s ease;
}
.faq-item__q:hover { color: var(--red); }
.faq-item__q::after {
    content: '+';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    font-weight: 300;
    color: var(--ink-mute);
    transition: transform .35s var(--ease-out), color .3s ease;
    line-height: 1;
}
.faq-item.is-open .faq-item__q { color: var(--red); }
.faq-item.is-open .faq-item__q::after { transform: translateY(-50%) rotate(45deg); color: var(--red); }
.faq-item__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .55s var(--ease-out), padding .35s ease;
    color: var(--ink-mute);
    font-size: 15px;
    line-height: 1.7;
}
.faq-item.is-open .faq-item__a { max-height: 600px; padding: 0 0 32px; }

/* ============================================================
   HOMEPAGE POLISH PASS — section eyebrows, badges, etc.
   ============================================================ */

/* Nav availability badge */
.nav__avail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding-left: 16px;
    margin-left: 8px;
    border-left: 1px solid var(--line);
}
.nav__avail::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 0 0 rgba(46,204,113,0.6);
    animation: avail-pulse 2.4s ease-in-out infinite;
}
@keyframes avail-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(46,204,113,0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(46,204,113,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}

/* Section eyebrow — small `── Section / 01` label above section headers */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 32px;
}
.section-eyebrow::before {
    content: '';
    width: 28px; height: 1px;
    background: currentColor;
    opacity: 0.5;
}
.section-eyebrow__num {
    color: var(--ink-faint);
    font-feature-settings: "tnum";
    margin-left: 4px;
}

/* Details strip — give it a clean head row matching others */
.details__head--with-eyebrow { padding: 0 var(--gutter); }

/* Selected work filter pills */
.work__filters {
    max-width: 1500px;
    margin: 0 auto 40px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.work__filter {
    background: none;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 8px 18px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.work__filter:hover { color: var(--ink); border-color: var(--ink); }
.work__filter.is-active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

/* Selected work — first card spans 2 cols */
.work__grid .work-card.is-featured {
    grid-column: span 2;
}
@media (max-width: 1100px) {
    .work__grid .work-card.is-featured { grid-column: span 1; }
}

/* Service hover image preview — slides in from right inside the row */
.service-row { position: relative; }
.service-row__preview {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translate(40px, -50%) scale(0.92);
    width: 280px;
    height: 200px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s var(--ease-out), transform .55s var(--ease-out);
    z-index: 2;
}
.service-row:hover .service-row__preview.has-media {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
}
.service-row__preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 1100px) {
    .service-row__preview { display: none; }
}

/* Lab drag cue */
.lab__drag-cue {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.lab__drag-cue svg { animation: arrow-nudge 2.4s ease-in-out infinite; }

/* Clients label + view-all link */
.clients__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--gutter);
    margin-bottom: 50px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}
.clients__head .clients__label { margin: 0; }
.clients__view-all {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 4px;
    transition: color .3s ease, border-color .3s ease;
}
.clients__view-all:hover { color: var(--ink); border-color: var(--ink); }

/* Availability copy in contact CTA */
.contact__avail {
    margin-top: 32px;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.contact__avail::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #2ecc71;
    animation: avail-pulse 2.4s ease-in-out infinite;
}

/* Footer — email signup */
.foot { flex-direction: column; align-items: stretch; gap: 24px; padding: 40px var(--gutter) 32px; }
.foot__top {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--line);
}
.foot__signup {
    flex: 1 1 auto;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.foot__signup-label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.foot__signup-row {
    display: flex;
    border-bottom: 1px solid var(--line-2);
    transition: border-color .3s ease;
}
.foot__signup-row:focus-within { border-bottom-color: var(--red); }
.foot__signup input {
    flex: 1;
    background: none;
    border: none;
    padding: 12px 0;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
    outline: none;
}
.foot__signup input::placeholder { color: var(--ink-faint); }
.foot__signup button {
    background: none;
    border: none;
    padding: 12px 4px 12px 16px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    transition: color .3s ease;
}
.foot__signup button:hover { color: var(--red); }
.foot__signup-note {
    font-size: 11px;
    color: var(--ink-faint);
    line-height: 1.5;
}
.foot__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Studio teaser section */
.studio-teaser {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.studio-teaser__inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: center;
}
.studio-teaser__media {
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.studio-teaser__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 30%, var(--media-highlight) 50%, transparent 70%),
        radial-gradient(circle at 30% 30%, var(--media-tint), transparent 60%);
    transition: transform 1.4s var(--ease-out);
}
.studio-teaser:hover .studio-teaser__media::before { transform: scale(1.04); }
.studio-teaser__placeholder {
    position: absolute;
    inset: 24px;
    border: 1px dashed var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ink-faint);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.studio-teaser__title {
    font-family: var(--display);
    font-size: clamp(40px, 5.5vw, 88px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 32px;
}
.studio-teaser__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.studio-teaser__body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-mute);
    max-width: 480px;
    margin-bottom: 32px;
}
.studio-teaser__cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0.04em;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: 14px 28px;
    transition: background .3s ease, border-color .3s ease, color .3s ease, gap .3s ease;
}
.studio-teaser__cta:hover { background: var(--red); border-color: var(--red); color: var(--on-red, #fff); gap: 22px; }
@media (max-width: 1100px) {
    .studio-teaser__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Testimonial quote */
.testimonial {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.testimonial__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 32px;
    align-items: start;
}
.testimonial__mark {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(80px, 8vw, 140px);
    line-height: 0.7;
    color: var(--red);
    user-select: none;
}
.testimonial__quote {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--ink);
    max-width: 1100px;
    margin: 0 0 40px;
}
.testimonial__attribution {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--sans);
}
.testimonial__name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    font-family: var(--display);
}
.testimonial__role {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
@media (max-width: 800px) {
    .testimonial__inner { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   /WORK ARCHIVE PAGE
   ============================================================ */
.work-archive-hero {
    padding: 200px var(--gutter) 60px;
    border-bottom: 1px solid var(--line);
}
.work-archive-hero__inner { max-width: 1500px; margin: 0 auto; }
.work-archive-hero__title { font-family: var(--display); font-size: clamp(48px, 9vw, 152px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; }
.work-archive-hero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.work-archive-hero__count { margin-top: 32px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-mute); }

.work-filters {
    padding: 32px var(--gutter);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 1500px;
    margin: 0 auto;
}
.work-filter {
    background: none;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    padding: 8px 18px;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-mute);
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.work-filter:hover { color: var(--ink); border-color: var(--ink); }
.work-filter.is-active {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}

.work-archive { padding: var(--pad-y-m) var(--gutter); }
.work-archive__grid {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 40px;
}
.work-archive__grid .work-card.is-featured { grid-column: span 2; }
@media (max-width: 900px) {
    .work-archive__grid { grid-template-columns: 1fr; gap: 60px; }
    .work-archive__grid .work-card.is-featured { grid-column: span 1; }
}

/* Lede beneath archive hero title */
.work-archive-hero__lede {
    margin-top: 32px;
    max-width: 540px;
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1.65;
}

/* Stats strip under hero */
.work-archive-stats {
    max-width: 1500px;
    margin: 56px auto 0;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(36px, 5vw, 80px);
}
.work-archive-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.work-archive-stat__num {
    font-family: var(--display);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 0.95;
    color: var(--ink);
}
.work-archive-stat__label {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* Sticky filter bar */
.work-filters {
    position: sticky;
    top: 0;
    z-index: 80;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transition: padding .3s ease;
}
.work-filters__inner {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.work-filters__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.work-filters__view {
    display: flex;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 4px;
}
.work-filters__view-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 14px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border-radius: 100px;
    transition: background .25s ease, color .25s ease;
}
.work-filters__view-btn.is-active {
    background: var(--ink);
    color: var(--bg);
}
@media (max-width: 700px) {
    .work-filters__inner { flex-direction: column; align-items: flex-start; }
}

/* List view */
.work-archive__list {
    max-width: 1500px;
    margin: 0 auto;
    border-top: 1px solid var(--line);
    display: none;
}
.work-archive--list .work-archive__grid { display: none; }
.work-archive--list .work-archive__list { display: block; }

.work-list-item {
    display: grid;
    grid-template-columns: 60px 2fr 1.5fr 1fr 60px;
    gap: 32px;
    padding: 28px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
    color: var(--ink);
    transition: padding-left .5s var(--ease-out), background .3s ease;
    position: relative;
}
.work-list-item:hover { padding-left: 12px; }
.work-list-item__num { font-family: var(--serif); font-style: italic; color: var(--ink-mute); }
.work-list-item__title {
    font-family: var(--display);
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    transition: color .3s ease;
}
.work-list-item__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); margin-left: 12px; font-size: 0.7em; }
.work-list-item:hover .work-list-item__title { color: var(--red); }
.work-list-item__cat {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.work-list-item__year {
    font-size: 13px;
    color: var(--ink-mute);
    font-feature-settings: "tnum";
    text-align: right;
}
.work-list-item__arrow {
    color: var(--ink-mute);
    transition: color .3s ease, transform .4s var(--ease-out);
    justify-self: end;
}
.work-list-item:hover .work-list-item__arrow { color: var(--red); transform: translateX(8px); }
@media (max-width: 800px) {
    .work-list-item { grid-template-columns: 40px 1fr auto; gap: 16px; }
    .work-list-item__cat, .work-list-item__year { display: none; }
}

/* Empty state */
.work-archive__empty {
    display: none;
    max-width: 760px;
    margin: 80px auto;
    text-align: center;
    padding: 60px 24px;
    border: 1px dashed var(--line-2);
    color: var(--ink-mute);
}
.work-archive__empty.is-visible { display: block; }
.work-archive__empty-title {
    font-family: var(--display);
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
    margin-bottom: 16px;
}
.work-archive__empty-title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.work-archive__empty-body { font-size: 15px; line-height: 1.65; }
.work-archive__empty-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--ink);
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 4px;
    transition: color .3s ease, border-color .3s ease;
}
.work-archive__empty-link:hover { color: var(--red); border-color: var(--red); }

/* Card hover meta slide-in */
.work-card__media-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%);
    opacity: 0;
    transition: opacity .4s ease;
}
.work-card:hover .work-card__media-overlay { opacity: 1; }
.work-card__media-overlay span {
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ------- 17. Reveals — generic + mask-clip text reveal ------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: calc(min(var(--i, 0), 6) * 80ms);
    will-change: transform, opacity;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ============================================================
   PAGE SCROLL PROGRESS BAR
   ============================================================ */
.page-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--red);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
}

/* ============================================================
   PARALLAX MEDIA — for elements with data-parallax
   ============================================================ */
[data-parallax] {
    overflow: hidden;
}
[data-parallax] > img {
    transform: translate3d(0, var(--py, 0), 0);
    transition: transform .15s linear;
    will-change: transform;
}

/* ============================================================
   MAGNETIC CTA — smooths the JS pull
   ============================================================ */
.nav__cta,
.about__cta,
[data-magnetic] {
    transition: background .3s ease, border-color .3s ease, color .3s ease,
                transform .55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Mask reveal: words rise up from behind a clip mask */
.split-line { display: inline; }
.split-line .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: inherit;
    /* Top + bottom safety so accents (i, j dots) and descenders (g, y, j, f tails) don't get clipped */
    padding: 0.06em 0 0.24em;
    margin: -0.06em 0 -0.24em;
}
.split-line .word__in {
    display: inline-block;
    transform: translateY(115%);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 38ms);
    will-change: transform;
}
.split-line.is-in .word__in { transform: translateY(0); }

/* ------- 18. Responsive ------- */
@media (max-width: 1100px) {
    .work__grid { gap: 60px 24px; }
    .about__inner { grid-template-columns: 1fr; gap: 40px; }
    .about__body { margin-left: 0; }
    .process__head { grid-template-columns: 1fr; }
    .process__sub { margin-left: 0; }
}

@media (max-width: 900px) {
    :root { --pad-y-l: 110px; --pad-y-m: 80px; --pad-y-s: 60px; }
    .nav__meta { display: none; }
    .nav { padding: 18px var(--gutter); }
    .hero { padding-top: 120px; gap: 60px; }
    .hero__lede { margin-left: 0; }
    .work__grid { grid-template-columns: 1fr; gap: 60px; }
    .work__head { flex-direction: column; align-items: start; }
    .service-row { grid-template-columns: 60px 1fr; }
    .service-row__body { grid-column: 1 / -1; }
    .service-row__arrow { display: none; }
    .process-step { grid-template-columns: 70px 1fr; }
    .process-step__body { grid-column: 1 / -1; }
    .lab__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 70px; }
    .lab-tile.t-1, .lab-tile.t-4, .lab-tile.t-8, .lab-tile.t-10 { grid-column: span 6; grid-row: span 4; }
    .lab-tile.t-2, .lab-tile.t-3, .lab-tile.t-5, .lab-tile.t-6, .lab-tile.t-7,
    .lab-tile.t-9, .lab-tile.t-11, .lab-tile.t-12 { grid-column: span 3; grid-row: span 3; }
    .contact__row { grid-template-columns: 1fr; gap: 24px; }
    .foot { flex-direction: column; align-items: flex-start; }
    .details__head { flex-direction: column; align-items: start; }
    .menu-overlay__body {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 40px var(--gutter);
        align-items: start;
        min-height: auto;
    }
    .menu-overlay__nav-link { padding: 4px 0; gap: 14px; }
    .menu-overlay__side { padding-top: 24px; border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
    .tape__item { font-size: 18px; gap: 32px; }
    .tape__track { gap: 32px; }
    .toolkit__row { gap: 28px; }
    .tool__icon { width: 72px; height: 72px; font-size: 22px; }
    .nav__cta span { display: none; }
}

/* ============================================================
   STUDIO PAGE
   ============================================================ */

.studio-hero {
    min-height: 90vh;
    padding: 180px var(--gutter) 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 100px;
}
.studio-hero__display {
    font-family: var(--display);
    font-size: clamp(48px, 9vw, 152px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.95;
    max-width: 1500px;
    color: var(--ink);
}
.studio-hero__display em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.studio-hero__lede {
    max-width: 540px;
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1.65;
    margin-left: auto;
}

/* Manifesto */
.manifesto {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.manifesto__head { max-width: 1500px; margin: 0 auto 80px; }
.manifesto__title {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 96px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.manifesto__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.manifesto__list {
    max-width: 1500px;
    margin: 0 auto;
    list-style: none;
    border-top: 1px solid var(--line);
}
.manifesto-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 60px;
    padding: 60px 0;
    border-bottom: 1px solid var(--line);
    align-items: start;
    transition: padding-left .5s var(--ease-out);
}
.manifesto-item:hover { padding-left: 12px; }
.manifesto-item__num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1;
    color: var(--ink-mute);
}
.manifesto-item__text {
    font-family: var(--display);
    font-size: clamp(26px, 3.4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ink);
}
.manifesto-item__text em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-mute);
}
.manifesto-item__text .accent { color: var(--red); font-style: normal; }

/* Team */
.team {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.team__head {
    max-width: 1500px;
    margin: 0 auto 80px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
}
.team__title {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 96px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.team__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.team__sub {
    max-width: 320px;
    color: var(--ink-mute);
    font-size: 14px;
    line-height: 1.6;
}
.team__grid {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 56px 24px;
}
.team-card { display: block; }
.team-card__photo {
    aspect-ratio: 4 / 5;
    background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
    transition: border-color .4s ease;
}
.team-card:hover .team-card__photo { border-color: var(--line-2); }
.team-card__photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, var(--media-highlight), transparent 60%),
        radial-gradient(circle at 70% 70%, var(--media-tint), transparent 60%);
    transition: transform 1.4s var(--ease-out);
}
.team-card:hover .team-card__photo::before { transform: scale(1.04); }
.team-card__photo-placeholder {
    position: absolute;
    inset: 24px;
    border: 1px dashed var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ink-faint);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.6;
}
.team-card__name {
    margin-top: 22px;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.team-card__name em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-mute);
}
.team-card__role {
    margin-top: 6px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.team-card__bio {
    margin-top: 12px;
    font-size: 13px;
    color: var(--ink-mute);
    line-height: 1.55;
}

/* Behind the Pixels gallery */
.btp {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.btp__head {
    max-width: 1500px;
    margin: 0 auto 60px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
}
.btp__title {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 96px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.btp__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.btp__sub {
    max-width: 320px;
    color: var(--ink-mute);
    font-size: 14px;
    line-height: 1.6;
}
.btp__grid {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 80px;
    gap: 16px;
}
.btp-tile {
    background: var(--bg-2);
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.btp-tile__media {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(135deg, transparent 30%, var(--media-highlight) 50%, transparent 70%),
        radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), var(--media-tint), transparent 60%);
    transition: transform 1.2s var(--ease-out);
}
.btp-tile:hover .btp-tile__media { transform: scale(1.06); }
.btp-tile > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease-out), filter .8s ease;
    z-index: 1;
    filter: grayscale(0.15);
}
.btp-tile:hover > img { transform: scale(1.06); filter: grayscale(0); }
.btp-tile__tag {
    position: absolute;
    inset: 16px;
    border: 1px dashed var(--line-2);
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
}
.btp-tile.bt-1  { grid-column: span 5; grid-row: span 4; --gx: 30%; --gy: 30%; }
.btp-tile.bt-2  { grid-column: span 4; grid-row: span 3; --gx: 70%; --gy: 50%; }
.btp-tile.bt-3  { grid-column: span 3; grid-row: span 5; --gx: 50%; --gy: 70%; }
.btp-tile.bt-4  { grid-column: span 4; grid-row: span 4; --gx: 30%; --gy: 50%; }
.btp-tile.bt-5  { grid-column: span 5; grid-row: span 3; --gx: 60%; --gy: 30%; }
.btp-tile.bt-6  { grid-column: span 3; grid-row: span 4; --gx: 50%; --gy: 60%; }
.btp-tile.bt-7  { grid-column: span 6; grid-row: span 3; --gx: 50%; --gy: 50%; }
.btp-tile.bt-8  { grid-column: span 3; grid-row: span 4; --gx: 30%; --gy: 70%; }
.btp-tile.bt-9  { grid-column: span 3; grid-row: span 4; --gx: 70%; --gy: 30%; }
.btp-tile.bt-10 { grid-column: span 4; grid-row: span 3; --gx: 40%; --gy: 50%; }
.btp-tile.bt-11 { grid-column: span 4; grid-row: span 4; --gx: 60%; --gy: 60%; }
.btp-tile.bt-12 { grid-column: span 4; grid-row: span 3; --gx: 30%; --gy: 30%; }
.btp-tile.bt-13 { grid-column: span 4; grid-row: span 3; --gx: 70%; --gy: 70%; }
.btp-tile.bt-14 { grid-column: span 4; grid-row: span 5; --gx: 50%; --gy: 30%; }
.btp-tile.bt-15 { grid-column: span 4; grid-row: span 3; --gx: 40%; --gy: 60%; }

/* Recognition / Numbers */
.recognition {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.recognition__inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}
.recognition__title {
    font-family: var(--display);
    font-size: clamp(36px, 5vw, 80px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.recognition__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.recognition__sub {
    margin-top: 24px;
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1.7;
    max-width: 480px;
}
.recognition__stats {
    border-top: 1px solid var(--line);
}
.recognition-stat {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 30px;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.recognition-stat__num {
    font-family: var(--display);
    font-size: clamp(40px, 5vw, 88px);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 0.95;
}
.recognition-stat__num em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.6em; color: var(--ink-mute); margin-left: 6px; }
.recognition-stat__label {
    color: var(--ink-mute);
    font-size: 14px;
    line-height: 1.55;
    max-width: 360px;
}
.recognition__press {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}
.recognition__press-label {
    color: var(--ink-mute);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.recognition__press-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.press-mark {
    height: 44px;
    width: 160px;
    background: var(--bg-2);
    border: 1px dashed var(--line-2);
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Locale */
.locale {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.locale__inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: center;
}
.locale__title {
    font-family: var(--display);
    font-size: clamp(40px, 6vw, 100px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.locale__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.locale__title .accent { color: var(--red); font-style: normal; }
.locale__body {
    margin-top: 24px;
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1.7;
    max-width: 480px;
}
.locale__meta {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.locale__meta strong { color: var(--ink); font-weight: 600; margin-right: 8px; }
.locale__media {
    aspect-ratio: 4 / 3;
    background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
    border: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.locale__media-placeholder {
    position: absolute;
    inset: 24px;
    border: 1px dashed var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--ink-faint);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.6;
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle {
    width: 38px; height: 38px;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color .3s ease, background .3s ease, color .3s ease, transform .4s var(--ease-out);
    position: relative;
    overflow: hidden;
}
.theme-toggle:hover { border-color: var(--ink); transform: rotate(45deg); }
.theme-toggle:active { transform: rotate(45deg) scale(0.94); }

.theme-toggle__icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px; height: 16px;
    transition: opacity .35s ease, transform .45s var(--ease-out);
}
/* In dark mode (default), show SUN — clicking switches to light */
.theme-toggle__sun  { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle__moon { opacity: 0; transform: rotate(-60deg) scale(0.6); }
:root[data-theme="light"] .theme-toggle__sun  { opacity: 0; transform: rotate(60deg) scale(0.6); }
:root[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }


/* Studio responsive */
@media (max-width: 1100px) {
    .team__grid { grid-template-columns: repeat(2, 1fr); }
    .recognition__inner, .locale__inner { grid-template-columns: 1fr; gap: 40px; }
    .team__head, .btp__head { flex-direction: column; align-items: start; }
    .recognition-stat { grid-template-columns: 120px 1fr; gap: 20px; }
    .hero__lede, .studio-hero__lede { margin-left: 0; }
}

@media (max-width: 700px) {
    .manifesto-item { grid-template-columns: 60px 1fr; gap: 24px; padding: 40px 0; }
    .recognition-stat { grid-template-columns: 100px 1fr; }
    .btp__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 70px; gap: 12px; }
    .btp-tile.bt-1, .btp-tile.bt-7, .btp-tile.bt-11, .btp-tile.bt-14 { grid-column: span 6; grid-row: span 4; }
    .btp-tile.bt-2, .btp-tile.bt-3, .btp-tile.bt-4, .btp-tile.bt-5, .btp-tile.bt-6,
    .btp-tile.bt-8, .btp-tile.bt-9, .btp-tile.bt-10, .btp-tile.bt-12, .btp-tile.bt-13, .btp-tile.bt-15 {
        grid-column: span 3; grid-row: span 3;
    }
}

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

/* ============================================================
   LEGAL PAGES (privacy / terms / cookies)
   ============================================================ */
.legal-hero {
    padding: 200px var(--gutter) 100px;
    border-bottom: 1px solid var(--line);
}
.legal-hero__inner {
    max-width: 760px;
    margin: 0 auto;
}
.legal-hero__eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.legal-hero__eyebrow::before {
    content: '';
    width: 24px; height: 1px;
    background: currentColor;
    opacity: 0.5;
}
.legal-hero__title {
    font-family: var(--display);
    font-size: clamp(40px, 7vw, 96px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 0.98;
    margin-bottom: 24px;
    color: var(--ink);
}
.legal-hero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.legal-hero__meta {
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
}

.legal-body {
    padding: 100px var(--gutter) 160px;
}
.legal-content {
    max-width: 760px;
    margin: 0 auto;
    color: var(--ink-mute);
    font-size: 16px;
    line-height: 1.75;
}
.legal-content > p:first-child {
    font-family: var(--display);
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.5;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 56px;
}
.legal-content > p:first-child::first-letter {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.4em;
    margin-right: 4px;
    color: var(--red);
}
.legal-content h2 {
    font-family: var(--display);
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 64px 0 18px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: baseline;
    gap: 16px;
}
.legal-content h2::before {
    content: counter(section, decimal-leading-zero) '.';
    counter-increment: section;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--ink-mute);
    font-weight: 500;
    flex-shrink: 0;
    padding-top: 0.45em;
}
.legal-content { counter-reset: section; }
.legal-content p { margin-bottom: 18px; }
.legal-content ul {
    margin: 0 0 24px 0;
    padding-left: 0;
    list-style: none;
}
.legal-content ul li {
    margin-bottom: 10px;
    padding-left: 24px;
    position: relative;
}
.legal-content ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ink-faint);
}
.legal-content strong { color: var(--ink); font-weight: 500; }
.legal-content a {
    color: var(--ink);
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 1px;
    transition: color .25s ease, border-color .25s ease;
}
.legal-content a:hover { color: var(--red); border-color: var(--red); }

/* ============================================================
   SERVICES PAGE (extended)
   ============================================================ */
.services-page-hero {
    padding: 200px var(--gutter) 80px;
    border-bottom: 1px solid var(--line);
}
.services-page-hero__inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 80px;
    align-items: end;
}
.services-page-hero__title {
    font-family: var(--display);
    font-size: clamp(48px, 9vw, 152px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: var(--ink);
}
.services-page-hero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.services-page-hero__lede {
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-mute);
    max-width: 480px;
}

/* Reuse .services / .service-row for the body but allow more deliverables */
.services-page .service-row__list {
    margin-top: 24px;
    grid-column: 3 / 4;
}
@media (max-width: 900px) {
    .services-page-hero__inner { grid-template-columns: 1fr; gap: 32px; }
    .services-page .service-row__list { grid-column: 1 / -1; }
}

/* Services page hero stats strip */
.services-page-hero__stats {
    grid-column: 1 / -1;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: clamp(36px, 5vw, 80px);
}

/* Toolkit strip on services page (text-only editorial) */
.toolkit-strip {
    padding: var(--pad-y-m) var(--gutter);
    border-top: 1px solid var(--line);
    text-align: center;
}
.toolkit-strip__label {
    margin-bottom: 28px;
}
.toolkit-strip__items {
    font-family: var(--display);
    font-size: clamp(20px, 2.4vw, 36px);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.4;
    max-width: 1100px;
    margin: 0 auto;
}
.toolkit-strip__items em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-mute);
    margin: 0 0.4em;
}

/* Process preview (compact 4-step strip) */
.process-preview {
    padding: var(--pad-y-m) var(--gutter);
    border-top: 1px solid var(--line);
}
.process-preview__head {
    max-width: 1500px;
    margin: 0 auto 60px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
}
.process-preview__title {
    font-family: var(--display);
    font-size: clamp(36px, 5vw, 80px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.process-preview__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.process-preview__cta {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 4px;
    transition: color .3s, border-color .3s;
}
.process-preview__cta:hover { color: var(--ink); border-color: var(--ink); }
.process-preview__grid {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
}
.process-preview-step {
    padding: 40px 24px 40px 0;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-left: 24px;
}
.process-preview-step:last-child { border-right: none; }
.process-preview-step:first-child { padding-left: 0; }
.process-preview-step__num {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    color: var(--ink-mute);
}
.process-preview-step__name {
    font-family: var(--display);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.05;
    color: var(--ink);
}
.process-preview-step__name em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ink-mute);
    display: block;
    margin-top: 4px;
    font-size: 0.7em;
}
@media (max-width: 900px) {
    .process-preview__grid { grid-template-columns: repeat(2, 1fr); }
    .process-preview-step:nth-child(2) { border-right: none; }
    .process-preview-step:nth-child(1), .process-preview-step:nth-child(2) { border-bottom: 1px solid var(--line); }
    .process-preview__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
    .process-preview__grid { grid-template-columns: 1fr; }
    .process-preview-step { border-right: none !important; border-bottom: 1px solid var(--line) !important; padding: 28px 0; }
    .process-preview-step:last-child { border-bottom: none !important; }
}

/* Pricing reference card */
.pricing-ref {
    padding: var(--pad-y-m) var(--gutter);
    border-top: 1px solid var(--line);
}
.pricing-ref__inner {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: center;
}
.pricing-ref__title {
    font-family: var(--display);
    font-size: clamp(36px, 5vw, 80px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.pricing-ref__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.pricing-ref__body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-mute);
    margin-bottom: 32px;
    max-width: 480px;
}
.pricing-ref__tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}
.pricing-ref__tier {
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 8px 16px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink);
    font-feature-settings: "tnum";
}
.pricing-ref__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 28px;
    border: 1px solid var(--line-2);
    border-radius: 100px;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0.04em;
    transition: background .3s, border-color .3s, color .3s, gap .3s;
}
.pricing-ref__cta:hover { background: var(--red); border-color: var(--red); color: var(--on-red, #fff); gap: 22px; }
@media (max-width: 1100px) {
    .pricing-ref__inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   PROJECT DETAIL — editorial case study
   ============================================================ */
.case {
    /* base wrapper */
}

.case__back {
    /* Was position:fixed at top-left, which sat directly under the fixed nav
       and got painted over by the brand logo. It now lives inside the hero's
       top padding and scrolls away with it. */
    position: absolute;
    top: 92px;
    left: var(--gutter);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--ink);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 10px 16px;
    border-radius: 100px;
    border: 1px solid var(--line);
    transition: background .3s, border-color .3s, color .3s;
}
.case__back:hover { background: var(--bg); border-color: var(--line-2); color: var(--red); }

.case-hero {
    min-height: 80vh;
    padding: 140px var(--gutter) 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 50px;
    position: relative;
}
.case-hero__meta {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.case-hero__meta-dot {
    width: 4px; height: 4px; background: var(--ink-mute); border-radius: 50%;
}
.case-hero__title {
    font-family: var(--display);
    font-size: clamp(56px, 11vw, 200px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.92;
    color: var(--ink);
    max-width: 1500px;
}
.case-hero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }

/* Full-bleed hero image (its own section, no horizontal padding) */
.case-hero-media {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: var(--bg-2);
    position: relative;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.case-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* Pull quote */
.case-quote {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 32px;
    align-items: start;
}
.case-quote__mark {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(80px, 8vw, 140px);
    line-height: 0.7;
    color: var(--red);
    user-select: none;
}
.case-quote__body {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(28px, 4vw, 56px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
    max-width: 1100px;
}

.case-section {
    padding: var(--pad-y-l) var(--gutter);
    border-top: 1px solid var(--line);
}
.case-section--quiet { padding: var(--pad-y-m) var(--gutter); }

.case-overview {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px 80px;
    align-items: start;
}
.case-overview__label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding-top: 0.6em;
}
.case-overview__body {
    font-family: var(--display);
    font-size: clamp(22px, 2.6vw, 36px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--ink);
    max-width: 1100px;
}
.case-overview__body em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }

.case-chapter {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    position: relative;
}
.case-chapter--reverse { direction: rtl; }
.case-chapter--reverse > * { direction: ltr; }

.case-chapter__media {
    aspect-ratio: 4 / 5;
    background: var(--bg-2);
    border: 1px solid var(--line);
    overflow: hidden;
    position: relative;
}
.case-chapter__media img { width: 100%; height: 100%; object-fit: cover; }
.case-chapter__media-num {
    position: absolute;
    top: 24px; left: 24px;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--ink);
    z-index: 2;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    padding: 4px 10px;
    border-radius: 100px;
    backdrop-filter: blur(8px);
}

/* Sticky text column — text "holds" while the image scrolls past */
.case-chapter__copy {
    padding-top: 40px;
    position: sticky;
    top: 110px;
    align-self: start;
}
@media (max-width: 1100px) {
    .case-chapter__copy { position: static; padding-top: 0; }
}
.case-chapter__label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.case-chapter__label::before {
    content: '';
    width: 24px; height: 1px;
    background: currentColor;
    opacity: 0.5;
}
.case-chapter__title {
    font-family: var(--display);
    font-size: clamp(32px, 4.5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.02;
    color: var(--ink);
    margin-bottom: 28px;
}
.case-chapter__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.case-chapter__body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-mute);
    max-width: 480px;
}

.case-gallery {
    max-width: 1500px;
    margin: 0 auto;
}
.case-gallery__head {
    margin-bottom: 60px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
}
.case-gallery__title {
    font-family: var(--display);
    font-size: clamp(36px, 5vw, 80px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}
.case-gallery__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.case-gallery__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 90px;
    gap: 16px;
}
.case-gallery__item {
    background: var(--bg-2);
    border: 1px solid var(--line);
    overflow: hidden;
}
.case-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.case-gallery__item:hover img { transform: scale(1.04); }

.case-stats {
    max-width: 1500px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
}
.case-stat {
    padding: 56px 32px;
    border-right: 1px solid var(--line);
}
.case-stat:last-child { border-right: none; }
.case-stat__num {
    font-family: var(--display);
    font-size: clamp(40px, 5vw, 80px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 0.95;
    color: var(--ink);
}
.case-stat__num em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.5em; color: var(--ink-mute); margin-left: 4px; }
.case-stat__label {
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.case-services {
    max-width: 1500px;
    margin: 0 auto;
}
.case-services__head { margin-bottom: 40px; }
.case-services__title {
    font-family: var(--display);
    font-size: clamp(32px, 4.5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.02;
}
.case-services__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-mute); }
.case-services__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.case-services__pill {
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--ink);
    border: 1px solid var(--line-2);
    padding: 12px 22px;
    border-radius: 100px;
}

/* Big "Up next" reveal — full-width hero of the next project */
.case-next-section {
    padding: 0;
    border-top: 1px solid var(--line);
}
.case-next {
    display: block;
    position: relative;
    height: 90vh;
    min-height: 600px;
    overflow: hidden;
    background: var(--bg-2);
    color: #fff;
}
.case-next__media { position: absolute; inset: 0; }
.case-next__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.6s var(--ease-out), filter 1s ease;
    filter: grayscale(0.45) brightness(0.45);
}
.case-next:hover .case-next__media img {
    transform: scale(1.04);
    filter: grayscale(0) brightness(0.65);
}
.case-next__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 60px var(--gutter);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.case-next__overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 25%, transparent 70%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: -1;
}
.case-next__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: auto;
}
.case-next__label {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
}
.case-next__back {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 4px;
    transition: color .25s ease, border-color .25s ease;
}
.case-next__back:hover { color: #fff; border-color: #fff; }
.case-next__title {
    font-family: var(--display);
    font-size: clamp(56px, 11vw, 200px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.92;
    color: #fff;
    transition: transform .6s var(--ease-out);
    pointer-events: auto;
}
.case-next:hover .case-next__title { transform: translateX(20px); }
.case-next__title em { font-family: var(--serif); font-style: italic; font-weight: 400; color: rgba(255,255,255,0.7); }
.case-next__meta {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-top: 18px;
}
.case-next__meta-dot { width: 4px; height: 4px; background: rgba(255,255,255,0.6); border-radius: 50%; }

@media (max-width: 1100px) {
    .case-overview { grid-template-columns: 1fr; gap: 24px; }
    .case-chapter { grid-template-columns: 1fr; gap: 40px; }
    .case-chapter__copy { padding-top: 0; }
    .case-stats { grid-template-columns: repeat(2, 1fr); }
    .case-stat:nth-child(2) { border-right: none; }
    .case-stat:nth-child(1), .case-stat:nth-child(2) { border-bottom: 1px solid var(--line); }
    .case-gallery__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 70px; }
    .case-nav { grid-template-columns: 1fr; }
    .case-nav__card { border-right: none; border-bottom: 1px solid var(--line); }
    .case-nav__card:last-child { border-bottom: none; text-align: left; align-items: flex-start; }
    .case-gallery__head { flex-direction: column; align-items: start; }
}

/* ============================================================
   ACCESSIBILITY + NEW COMPONENTS
   Appended in the 2026-07 pass. Everything below is additive.
   ============================================================ */

/* ---- skip link ---- */
.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    z-index: 500;
    background: var(--red);
    color: var(--on-red, #fff);
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: .04em;
    padding: 13px 24px;
    border-radius: 0 0 4px 4px;
    text-decoration: none;
    transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---- visible keyboard focus (site had none) ---- */
:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

.nav__cta:focus-visible,
.wa-fab:focus-visible { outline-offset: 5px; }

/* ---- studio teaser: figure panel replacing the portrait slot ---- */
.studio-teaser__media--stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    text-decoration: none;
    transition: border-color .5s var(--ease), background .5s var(--ease);
}
.studio-teaser__media--stat:hover { border-color: var(--line-2); background: var(--bg-3); }
.studio-teaser__figure {
    font-family: var(--display);
    font-size: clamp(64px, 9vw, 128px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--ink);
}
.studio-teaser__figure em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--red);
    padding: 0 .06em;
}
.studio-teaser__figure-label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ---- role cards (replaced the placeholder team photos) ---- */
.team__grid--roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(14px, 2vw, 26px);
}
.role-card {
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: clamp(26px, 3vw, 38px);
    background: var(--bg-2);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color .45s var(--ease), transform .45s var(--ease-out), background .45s var(--ease);
}
.role-card:hover { border-color: var(--line-2); background: var(--bg-3); transform: translateY(-4px); }
.role-card__num {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--red);
    font-variant-numeric: tabular-nums;
}
.role-card__name {
    font-family: var(--display);
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}
.role-card__bio {
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--ink-mute);
    margin: 0;
}

/* ---- locale media now holds a real image ---- */
.locale__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- reduced motion: the site is animation-heavy, honour the setting ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal,
    .reveal.is-in { opacity: 1 !important; transform: none !important; }
    .split-line .word__in { transform: none !important; opacity: 1 !important; }
    .cursor,
    .hover-preview,
    .preloader { display: none !important; }
    .clients__track { transform: none !important; }
    .page-transition { display: none !important; }
    html.is-loading { overflow: auto !important; }
}

/* ============================================================
   MOBILE LAYER
   ------------------------------------------------------------
   Consolidated small-screen rules. Appended last so it wins on
   cascade order without editing the 25 scattered breakpoints
   above. Reference widths: 430px (Pro Max), 393px (Pixel),
   375px (SE / iPhone mini), 360px (common Android).
   ============================================================ */

/* iOS inflates text in landscape without this. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Notched phones: keep fixed furniture out of the rounded corners. */
@supports (padding: max(0px)) {
    .nav { padding-left: max(var(--gutter), env(safe-area-inset-left));
           padding-right: max(var(--gutter), env(safe-area-inset-right)); }
    .wa-fab { bottom: max(24px, env(safe-area-inset-bottom));
              right:  max(24px, env(safe-area-inset-right)); }
    .cookie-banner { bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (max-width: 700px) {
    /* ---- nav: logo + theme + menu only ---- */
    .nav { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
    .nav__brand-img { height: 19px; width: 119px; }

    /* The CTA's label is hidden below 560px, which left an empty pill.
       Drop the whole control instead: the takeover menu carries
       "Start a project" and the WhatsApp button is always on screen. */
    .nav__cta { display: none; }

    /* With the CTA and meta gone, space-between would strand the theme
       toggle mid-nav. Push it and Menu together on the right. */
    .theme-toggle { margin-left: auto; }

    /* ---- tap targets: 44px minimum ---- */
    .nav__menu { min-height: 44px; padding: 8px 6px; }
    .theme-toggle { min-width: 44px; min-height: 44px; }
    .work__filter,
    .work-filter,
    .work-filters__view-btn { min-height: 44px; padding: 11px 16px; }
    .menu-overlay__close { min-height: 44px; display: inline-flex; align-items: center; }

    /* inline-flex rather than extra padding: these sit in wrapping rows, and
       padding alone pushes the rows apart without growing the strike area. */
    .foot__legal a,
    .menu-overlay__contact a,
    .menu-overlay__socials a,
    .contact__row a,
    .work__see-all {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* the rows above now measure 44px per item, so pull their gaps back in */
    .menu-overlay__socials { gap: 0 16px; }

    .clients__view-all,
    .foot__signup-row button { min-height: 44px; }

    /* The two wordmarks are 18-22px tall and sized by the nav's own rhythm, so
       growing them would push the bar down. Extend the strike area instead:
       the pseudo-element is invisible and does not participate in layout. */
    .nav__brand,
    .menu-overlay__brand { position: relative; }
    .nav__brand::after,
    .menu-overlay__brand::after {
        content: "";
        position: absolute;
        left: 0; right: 0;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
    }

    /* ---- text floor: 11px is unreadable at arm's length on a phone ---- */
    .nav__avail,
    .menu-overlay__col-label,
    .about__meta-stat__label,
    .foot__legal,
    .foot__legal a,
    .foot__copy,
    .work__see-all { font-size: 12.5px; }

    /* Tracked uppercase labels. 11px survives on a desktop monitor but not at
       arm's length; 12px keeps the same look and stays legible. */
    .section-eyebrow,
    .eyebrow,
    .clients__label,
    .contact__eyebrow,
    .contact__avail,
    .studio-teaser__figure-label,
    .foot__signup-label,
    .foot__signup-note,
    .service-row__list li,
    .foot__bottom,
    .menu-overlay__foot { font-size: 12px; }

    /* ---- about: stats and CTA ----
       .about__right is align-items:flex-end and .about__meta is a flex-end wrap.
       In one column that threw the third stat and the button hard against the
       right edge with the first two left of them. Left-align the column and lay
       the stats out as a fixed 3-up so they read as one row of figures. */
    .about__right { align-items: flex-start; }
    .about__meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px 12px;
        max-width: none;
        margin-top: 40px;
        padding-top: 26px;
    }
    .about__meta-stat { gap: 8px; }
    .about__meta-stat__num { font-size: 34px; }
    .about__meta-stat__label { letter-spacing: 0.1em; line-height: 1.35; }
    .about__cta { align-self: flex-start; margin-top: 34px; }

    /* ---- display type: the clamp minimums overflow a 335px column ---- */
    .hero__display      { font-size: clamp(40px, 12.5vw, 62px); }
    .contact__display   { font-size: clamp(36px, 12vw, 56px); }
    .about__statement,
    .work__title,
    .services__title,
    .process__title,
    .team__title,
    .manifesto__title,
    .recognition__title,
    .locale__title,
    .studio-teaser__title,
    .process-preview__title,
    .pricing-ref__title { font-size: clamp(30px, 9.5vw, 40px); }
    .studio-hero__display,
    .plans-hero__title,
    .work-archive-hero__title,
    .services-page-hero__title,
    .faq-hero__title    { font-size: clamp(34px, 11vw, 48px); }
    .notfound__code     { font-size: clamp(72px, 26vw, 120px); }
    .menu-overlay__nav-link__title { font-size: clamp(30px, 10vw, 48px); }

    /* Section rhythm. 110px top and bottom puts 220px of empty between every
       section, which is most of a phone screen spent on nothing. */
    :root {
        --pad-y-l: 66px;
        --pad-y-m: 50px;
        --pad-y-s: 38px;
    }

    /* The hero is min-height:100vh with justify-content:space-between. On a wide
       screen the headline fills that. On a phone it does not, so the lede got
       pushed to the bottom of the viewport with a 320px void above it.
       Centring inside a tall box keeps the banner full-height without
       stranding the lede at the bottom of the screen the way space-between did. */
    .hero {
        min-height: 82vh;
        justify-content: center;
        padding-top: 104px;
        padding-bottom: 56px;
        gap: 30px;
    }
    .hero__lede { font-size: 16px; max-width: 42ch; }

    /* ---- footer ----
       Give it its own surface. Sharing the page background left it reading as
       three more paragraphs rather than the end of the page. */
    .foot {
        background: var(--bg-2);
        padding: 38px var(--gutter) 22px;
        gap: 24px;
    }
    .foot__top { padding-bottom: 24px; }

    /* The signup row stacks here, which left the row's underline sitting under
       the button instead of the field, so the input read as loose placeholder
       text. Move the rule onto the input and make the button a real control. */
    .foot__signup-row {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        border-bottom: none;
    }
    .foot__signup-row input,
    .foot__signup-row button { width: 100%; }
    .foot__signup input {
        border-bottom: 1px solid var(--line-2);
        transition: border-color .3s ease;
    }
    .foot__signup input:focus { border-bottom-color: var(--red); }
    .foot__signup button {
        background: var(--ink);
        color: var(--bg);
        border-radius: 999px;
        padding: 14px 20px;
        text-align: center;
    }
    .foot__signup button:hover { color: var(--bg); opacity: .85; }
    .foot__signup-note { letter-spacing: 0.1em; line-height: 1.6; }

    /* The legal links carry a 44px strike area for thumbs. Centring text in a
       44px box prints ~11px of blank above and below it, which showed up as a
       gap under the copyright and a long dead tail at the bottom of the page.
       Pull both back without shrinking the tap target. */
    .foot__bottom { flex-direction: column; align-items: flex-start; gap: 2px; }
    .foot__legal { flex-wrap: wrap; gap: 0 18px; margin-bottom: -11px; }

    /* ---- contact block ---- */
    .contact__row { gap: 28px; }
    .contact__row a { word-break: break-word; }

    /* ---- partner logos ----
       36px is set for a desktop strip seen at desk distance. On a phone the
       marks are unreadable, and the 80px gap wastes the little width there is.
       Bigger logos, tighter spacing, so more of the roster is legible at once. */
    .client-logo { height: 54px; }
    .clients__track { gap: 44px; }

    /* ---- WhatsApp button: slightly smaller, out of the thumb path ---- */
    .wa-fab { width: 50px; height: 50px; }
    .wa-fab svg { width: 22px; height: 22px; }
}

@media (max-width: 430px) {
    :root { --gutter: 18px; }
    .nav__brand-img { height: 18px; width: 113px; }
    .hero__display { font-size: clamp(34px, 12vw, 44px); }
    .contact__display { font-size: clamp(32px, 11.5vw, 42px); }
}

/* Landscape phones: the 80–100vh heroes leave no room for content. */
@media (max-height: 520px) and (orientation: landscape) {
    .hero,
    .studio-hero,
    .case-hero { min-height: auto; padding-top: 92px; padding-bottom: 48px; }
    .menu-overlay__body { padding-top: 24px; padding-bottom: 24px; }
    .menu-overlay__nav-link__title { font-size: 26px; }
}

/* ------------------------------------------------------------
   Custom cursor in light theme
   The cursor is built from white shapes blended with
   mix-blend-mode: difference. That reads as a soft white ring on
   the dark theme, but difference-blending white against a white
   page inverts to solid black, which showed up as a heavy black
   circle. Light theme opts out of the blend and uses ink tones.
   ------------------------------------------------------------ */
:root[data-theme="light"] .cursor { mix-blend-mode: normal; }
:root[data-theme="light"] .cursor__dot {
    background: var(--ink);
    opacity: .7;
}
:root[data-theme="light"] .cursor__ring {
    border-color: rgba(14, 14, 14, 0.26);
}
:root[data-theme="light"] .cursor.is-link .cursor__ring {
    border-color: var(--red);
}
:root[data-theme="light"] .cursor.is-link .cursor__dot {
    background: var(--red);
    opacity: 1;
}

/* ------------------------------------------------------------
   Service row hover preview media
   The panel accepts a still, a GIF, or a silent video loop via
   data-preview on .service-row__preview. Media is only created
   on first hover, so nothing downloads for rows never hovered.
   ------------------------------------------------------------ */
.service-row__preview video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}