/* Visual Valley v3 — site layer on top of the brand kit (vv-tokens.css + vv-living.js, both unchanged).
   Direction: brand grey and type. Geist Mono carries every label, Geist Light carries the big words.
   Living gradients appear only where a case appears, in colours taken from that case's own photo. */

/* ─── base ─── */
html, body { background: var(--vv-grey); }
body { color: var(--vv-ink); font-family: var(--vv-font); font-weight: 300; font-size: 17px; line-height: 1.5; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--vv-ink); color: var(--vv-grey); }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
html.js body, html.js body.ready, html.js body.leaving { opacity: 1; transition: none; }   /* no page fades */

.vv-label { margin: 0; line-height: 1.5; }
.v3-muted { color: var(--vv-muted); }
.vv-link::after { content: none; }                       /* no arrows; the underline carries the link */
.vv-link { font-size: 15px; }
.v3-wrap { padding-left: var(--vv-margin); padding-right: var(--vv-margin); }
.v3-section { padding: clamp(96px, 14vh, 180px) var(--vv-margin) 0; }
.v3-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(40px, 6vh, 72px); }
.v3-head h2 { margin: 0; }
.v3-rule { display: none; }

/* ─── 1. nav: mono, difference-blended so it reads on grey, photos and gradients ─── */
.vv-nav.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: baseline; gap: 28px;
  padding: 24px var(--vv-margin);
  color: var(--vv-white); mix-blend-mode: difference;
  font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
}
.vv-nav .logo { margin-right: auto; font-family: var(--vv-font); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.vv-nav .logo sup { font-size: .55em; font-weight: 400; }
.vv-nav .nav-links { display: flex; gap: 28px; }
.vv-nav .nav-links a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.vv-nav .nav-tools { display: flex; align-items: baseline; gap: 28px; }
.vv-nav .sound, .vv-nav .menu-dots { padding: 0; margin: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.vv-nav .sound-bars, .vv-nav .menu-dots span { display: none; }
.vv-nav .sound[aria-pressed="false"] .sound-label::after { content: " off"; }
.vv-nav .sound[aria-pressed="true"] .sound-label::after { content: " on"; }
.vv-nav .menu-dots { display: none; }
.vv-nav .menu-dots::before { content: "Menu"; }
body.menu-open .vv-nav .menu-dots::before { content: "Close"; }
@media (max-width: 760px) {
  .vv-nav.nav { padding: 20px var(--vv-margin); gap: 20px; }
  .vv-nav .nav-links { display: none; }
  .vv-nav .menu-dots { display: block; }
}

/* menu overlay (built by site.js from the nav links) */
.mmenu { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; justify-content: space-between;
  padding: 120px var(--vv-margin) 32px; background: var(--vv-grey); color: var(--vv-ink); visibility: hidden; }
body.menu-open { overflow: hidden; }
body.menu-open .mmenu { visibility: visible; }
.mmenu .beits { display: none; }
.mmenu-links { display: flex; flex-direction: column; gap: 4px; }
.mmenu-links a { font-size: var(--vv-title); font-weight: 300; line-height: 1.15; letter-spacing: -.015em; }
.mmenu-links a[aria-current] { font-weight: 600; }
.mmenu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; }
.mmenu-foot span { display: flex; gap: 24px; }

/* ─── 2. hero: grey type on the left, the header film on the right (like reference 02, film instead of strip) ─── */
.v3-hero { display: grid; grid-template-columns: 58fr 42fr; min-height: 100svh; }
.v3-hero__text { display: flex; flex-direction: column; justify-content: space-between; padding: 118px var(--vv-margin) var(--vv-space-above); }
.v3-hero__meta { display: grid; gap: 4px; }
.v3-hero__words { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.v3-hero__words .vv-body { max-width: 16em; }
.v3-hero__media { position: relative; overflow: hidden; background: var(--vv-night); }
.v3-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .v3-hero { grid-template-columns: 1fr; }
  .v3-hero__text { min-height: 78svh; padding-top: 104px; gap: 48px; }
  .v3-hero__media { height: 62svh; }
}

/* ─── 3. selected worlds: photo + the case's own living gradient, title on grey ─── */
.v3-cases { display: flex; flex-direction: column; gap: clamp(72px, 11vh, 140px); }
.v3-case { display: block; }
.v3-case__head { display: grid; grid-template-columns: 6em 1fr auto; align-items: baseline; gap: 0 24px; padding-bottom: 20px; }
.v3-case__head .vv-title { margin: 0; }
.v3-case__meta { text-align: right; }
.v3-case__body { display: grid; grid-template-columns: 66fr 34fr; height: clamp(360px, 62vh, 720px); }
.v3-case--flip .v3-case__body { grid-template-columns: 34fr 66fr; }
.v3-case--flip .v3-case__photo { order: 2; }
.v3-case__photo { position: relative; overflow: hidden; background: #0B0B0E; }
.v3-case__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.42, 0, .132, 1); }
.v3-case:hover .v3-case__photo img { transform: scale(1.02); }
.v3-case__grad.vv-frame { min-height: 0; height: 100%; }
.v3-case__grad > .v3-grad-labels { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 22px; color: var(--lab, var(--vv-white)); }
.v3-grad-labels .vv-label { opacity: .78; }
.v3-grad-labels__hex { display: grid; gap: 2px; }
@media (max-width: 860px) {
  .v3-case__head { grid-template-columns: 3em 1fr; }
  .v3-case__meta { grid-column: 2; text-align: left; margin-top: 8px; }
  .v3-case__body, .v3-case--flip .v3-case__body { grid-template-columns: 1fr; height: auto; }
  .v3-case__photo { aspect-ratio: 4 / 3; }
  .v3-case--flip .v3-case__photo { order: 0; }
  .v3-case__grad.vv-frame { height: 34vw; min-height: 120px; }
  .v3-grad-labels__hex { display: none; }
}

/* ─── 4. what they said: large light quotes on grey, mono attribution ─── */
.v3-quotes { list-style: none; margin: 0; padding: 0; }
.v3-quotes li { display: grid; grid-template-columns: 6em 1fr; gap: 0 24px; padding: clamp(28px, 4vh, 44px) 0; }
.v3-quotes li:last-child { }
.v3-quotes blockquote { margin: 0; max-width: 30em; }
.v3-quote { margin: 0; font-size: clamp(24px, 2.6vw, 40px); font-weight: 300; line-height: 1.18; letter-spacing: -.012em; }
.v3-quote__tr { margin: 14px 0 0; font-size: 17px; color: var(--vv-muted); max-width: 34em; }
.v3-quotes cite { display: block; margin-top: 18px; font-style: normal; }
@media (max-width: 760px) { .v3-quotes li { grid-template-columns: 1fr; gap: 10px; } }

/* ─── 5. key figures ─── */
.v3-figures { display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 28px); }
.v3-figures > div { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px clamp(24px, 3vw, 56px); align-items: baseline; }
.v3-figures strong { display: block; font-size: var(--vv-title); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; }
@media (max-width: 760px) { .v3-figures > div { grid-template-columns: 1fr; } }

/* ─── 6. the belief ─── */
.v3-belief .vv-display { max-width: 13em; }
.v3-belief .vv-body { margin-top: clamp(28px, 4vh, 48px); max-width: 22em; }
.v3-fullbleed { margin-top: clamp(96px, 14vh, 180px); }
.v3-fullbleed img { width: 100%; height: clamp(320px, 72vh, 860px); object-fit: cover; }

/* ─── 7. how a world gets built ─── */
.v3-method { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.v3-step { padding-top: 22px; }
.v3-step h3 { margin: 18px 0 12px; font-size: clamp(28px, 2.8vw, 44px); font-weight: 300; letter-spacing: -.015em; line-height: 1.1; }
.v3-step p { margin: 0; max-width: 22em; color: var(--vv-muted); }
.v3-method-close { margin-top: clamp(48px, 7vh, 80px); }
@media (max-width: 1000px) { .v3-method { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(20px, 3vw, 48px); } }
@media (max-width: 520px) { .v3-method { grid-template-columns: 1fr; } }

/* ─── 8. start a world ─── */
.v3-cta { padding-bottom: clamp(96px, 14vh, 180px); }
.v3-cta__line { display: inline; font-size: var(--vv-display); font-weight: 300; line-height: 1.1; letter-spacing: -.02em;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .9s cubic-bezier(.42, 0, .132, 1); }
.v3-cta__line:hover { background-size: 100% 1px; }
.v3-cta .vv-label { margin-bottom: clamp(24px, 4vh, 40px); }

/* ─── 9. footer: night, mono ─── */
footer { background: var(--vv-night); color: var(--vv-white); padding: clamp(64px, 10vh, 110px) var(--vv-margin) 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr auto; gap: 40px; }
.foot-logo { font-size: 15px; font-weight: 600; }
.foot-logo sup { font-size: .55em; font-weight: 400; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; }
.foot-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-contact span { color: rgba(244, 244, 244, .55); text-transform: none; letter-spacing: 0; font-family: var(--vv-font); font-size: 15px; }
.foot-contact a:first-child { text-transform: none; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(64px, 12vh, 140px); padding-top: 22px;
  font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; color: rgba(244, 244, 244, .55); }
.foot-bottom span:last-child { color: var(--vv-white); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .v3-case__photo img, .v3-cta__line { transition: none; } }

/* ═════════════════════════════════════════════════════════════════════════════
   10. Home: cases side by side (duo / trio)
   ═════════════════════════════════════════════════════════════════════════════ */
.v3-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(14px, 1.6vw, 24px); }
.v3-card { display: flex; flex-direction: column; }
.v3-card__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #0B0B0E; }
.v3-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.42, 0, .132, 1); }
.v3-card:hover .v3-card__photo img { transform: scale(1.02); }
.v3-card__grad.vv-frame { min-height: 0; height: clamp(64px, 7vw, 104px); }
.v3-card__grad > .v3-grad-labels { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; padding: 0 16px; }
.v3-card__text { display: grid; grid-template-columns: 3em 1fr; gap: 0 12px; padding-top: 18px; }
.v3-card__title { margin: 0; font-size: clamp(26px, 2.4vw, 40px); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; }
.v3-card__text .vv-label + .v3-card__title + .vv-label, .v3-card__text p { grid-column: 2; margin-top: 10px; }
@media (max-width: 699px) { .v3-grid { grid-template-columns: 1fr; } }

/* ═════════════════════════════════════════════════════════════════════════════
   11. Ticker tape (reviews)
   ═════════════════════════════════════════════════════════════════════════════ */
.v3-ticker { margin-top: clamp(96px, 14vh, 180px); overflow: hidden; }
.v3-ticker__label { display: flex; justify-content: space-between; gap: 24px; padding: 16px var(--vv-margin); }
.v3-ticker__track { display: flex; width: max-content; animation: v3-ticker var(--dur, 90s) linear infinite; }
.v3-ticker:hover .v3-ticker__track, .v3-ticker:focus-within .v3-ticker__track { animation-play-state: paused; }
.v3-ticker__list { display: flex; margin: 0; padding: 0; list-style: none; }
.v3-ticker__item { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(26px, 4vh, 44px) clamp(40px, 5vw, 80px) clamp(26px, 4vh, 44px) 0; white-space: nowrap; }
.v3-ticker__item::before { content: none; }
.v3-ticker blockquote { margin: 0; }
.v3-ticker__list { padding-left: var(--vv-margin); }
.v3-ticker { padding: 0 !important; }
.v3-ticker__quote { margin: 0; font-size: clamp(28px, 3.2vw, 52px); font-weight: 300; line-height: 1.05; letter-spacing: -.015em; }
.v3-ticker__meta { display: flex; gap: 18px; }
.v3-ticker__sep { align-self: center; width: clamp(40px, 5vw, 80px); height: 1px; background: rgba(20, 20, 24, .3); margin-right: clamp(40px, 5vw, 80px); }
@keyframes v3-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .v3-ticker__track { animation: none; width: auto; overflow-x: auto; }
  .v3-ticker__list[aria-hidden="true"] { display: none; }
}
.v3-figures--case { margin-top: clamp(40px, 6vh, 64px); }

/* ═════════════════════════════════════════════════════════════════════════════
   12. Shared page building blocks (Projects, Services, About, Contact, Partners, cases)
   ═════════════════════════════════════════════════════════════════════════════ */
body > section { padding: clamp(64px, 9vh, 120px) 0; }
.container { padding-left: var(--vv-margin); padding-right: var(--vv-margin); }
.label { font-family: var(--vv-mono); font-size: var(--vv-label); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; margin: 0; color: var(--vv-ink); }
.h-display { font-size: var(--vv-display) !important; font-weight: 300; line-height: 1.08; letter-spacing: -.02em; margin: 0; max-width: 13em !important; }
.statement { font-size: var(--vv-title); font-weight: 300; line-height: 1.14; letter-spacing: -.015em; margin: 0; max-width: 20em; }
.svc-lede { margin: clamp(28px, 4vh, 44px) 0 0; font-size: var(--vv-body); line-height: 1.3; max-width: 22em; }
.sec-num { font-family: var(--vv-mono); margin-right: 1.4em; color: var(--vv-muted); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 5vh, 64px); }
.sec-head h2 { margin: 0; font-size: var(--vv-title); font-weight: 300; line-height: 1.1; letter-spacing: -.015em; }
.sec-head .label { color: var(--vv-muted); }
.view-all { font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.rv { opacity: 1; transform: none; }

/* page hero (first section of a page) */
body > nav + section { padding-top: clamp(150px, 24vh, 240px); }
body > nav + section .label:first-child { margin-bottom: clamp(28px, 4vh, 44px) !important; }

/* media grid: square edges, no radius, mono captions */
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--vv-margin); }
.media-grid .m { position: relative; overflow: hidden; background: #0B0B0E; }
.media-grid .m.wide { grid-column: 1 / -1; }
.media-grid .m img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }
.media-grid .m.wide img { aspect-ratio: 21 / 9; }
.media-grid .m .credit { position: absolute; left: 0; bottom: 0; padding: 14px 16px; font-family: var(--vv-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--vv-white); mix-blend-mode: difference; }
@media (max-width: 760px) { .media-grid { grid-template-columns: 1fr; } .media-grid .m.wide img { aspect-ratio: 4 / 3; } }

/* label + content blocks */
.about-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(32px, 5vw, 90px); }
.about-block > .label { padding-top: .6em; }
.about-block .big b { font-weight: 600; }
.about-block .big { margin: 0; font-size: clamp(28px, 3.4vw, 54px); font-weight: 300; line-height: 1.14; letter-spacing: -.015em; }
.about-block .lede, .case-head p { margin: 22px 0 0; font-size: 18px; line-height: 1.55; color: var(--vv-muted); max-width: 36em; }
.case-head h2 { margin: 0; font-size: var(--vv-title); font-weight: 300; line-height: 1.14; letter-spacing: -.015em; max-width: 18em; }
.case-head h2 + p { font-size: var(--vv-body); line-height: 1.3; color: var(--vv-ink); max-width: 24em; }
@media (max-width: 860px) { .about-block { grid-template-columns: 1fr; } }

/* facts / credits: mono key, Geist value, hairlines */
.facts { margin-top: clamp(40px, 6vh, 64px); }
.fact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 24px; padding: 8px 0; }
.fact .k, .credits .k { font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; color: var(--vv-muted); padding-top: .2em; }
.fact .v { font-size: 17px; }
.fact .v a, .credits .v a { border-bottom: 1px solid currentColor; }
.credits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 24px; margin: 0 var(--vv-margin); }
.credits .k, .credits .v { padding: 7px 0; }
.credits .v { font-size: 17px; }
@media (max-width: 760px) { .fact, .credits { grid-template-columns: 1fr; } .credits .k { border-bottom: 0; padding-bottom: 0; } }

/* method / phases */
.method { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.phase { padding-top: 22px; }
.phase .n { font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; }
.phase h3 { margin: 18px 0 12px; font-size: clamp(28px, 2.8vw, 44px); font-weight: 300; letter-spacing: -.015em; line-height: 1.1; }
.phase p { margin: 0; color: var(--vv-muted); max-width: 22em; }
.method-close { margin-top: clamp(48px, 7vh, 80px); font-size: var(--vv-body); line-height: 1.3; max-width: 22em; }
.method-close b { font-weight: 600; }
@media (max-width: 1000px) { .method { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(20px, 3vw, 48px); } }
@media (max-width: 520px) { .method { grid-template-columns: 1fr; } }

/* services: phases with deliverables */
.svc-phases { }
.svc-phase { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px clamp(32px, 5vw, 96px); padding: clamp(36px, 5vh, 60px) 0; }
.svc-phase .n { font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; }
.svc-phase h2 { margin: 14px 0 0; font-size: var(--vv-display); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.svc-phase .verb { margin: 0; font-size: var(--vv-body); line-height: 1.3; }
.svc-phase .body { margin: 14px 0 0; color: var(--vv-muted); max-width: 32em; }
.deliv { list-style: none; margin: 28px 0 0; padding: 0; }
.deliv li { padding: 5px 0; font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; }
.svc-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.way { padding: 26px 0 36px; }
.way h3 { margin: 0; font-size: clamp(26px, 2.4vw, 38px); font-weight: 300; line-height: 1.12; letter-spacing: -.015em; }
.way p { margin: 12px 0 0; color: var(--vv-muted); max-width: 34em; }
.way .eg { font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; color: var(--vv-ink); }
.way .eg span { color: var(--vv-muted) !important; }
.way .eg a, .fmt li a { border-bottom: 1px solid currentColor; }
.svc-formats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.fmt { padding-top: 22px; }
.fmt h3 { margin: 0; font-size: clamp(24px, 2vw, 32px); font-weight: 300; line-height: 1.15; letter-spacing: -.012em; }
.fmt p { margin: 10px 0 0; color: var(--vv-muted); }
.fmt ul { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; }
.svc-crafts { display: flex; flex-wrap: wrap; gap: 12px 32px; }
@media (max-width: 1100px) { .svc-formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .svc-phase, .svc-ways { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .svc-formats { grid-template-columns: 1fr; } }

/* chips → mono text toggles and links (no pills) */
.chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 0 2px; margin: 0; background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; color: var(--vv-muted);
  font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.chip .c { font-size: 10px; vertical-align: super; }
.chip:hover { color: var(--vv-ink); }
.chip[aria-pressed="true"], a.chip { color: var(--vv-ink); border-bottom-color: currentColor; }
.filters { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(48px, 7vh, 80px); }
.filter-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; }
.filter-row .k { min-width: 7em; font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; color: var(--vv-muted); }

/* projects: cards in a grid, each with its photo and its own colours */
.plist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 5vw, 64px) clamp(14px, 1.6vw, 24px); }
.plist-item { display: flex; flex-direction: column; }
.plist-item[hidden] { display: none; }
.pl-photo { order: 1; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #0B0B0E; }
.pl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.42, 0, .132, 1); }
.plist-item:hover .pl-photo img { transform: scale(1.02); }
.pl-grad.vv-frame { order: 2; min-height: 0; height: clamp(56px, 5.6vw, 88px); }
.plist-item .num { order: 3; margin-top: 18px; font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; color: var(--vv-muted); }
.plist-item h3 { order: 4; margin: 8px 0 0; font-size: clamp(28px, 2.6vw, 44px); font-weight: 300; line-height: 1.08; letter-spacing: -.015em; }
.plist-item .sub { order: 5; margin: 10px 0 0; font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; color: var(--vv-muted); }
.plist-preview { display: none !important; }
@media (max-width: 1000px) { .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .plist { grid-template-columns: 1fr; } .pl-photo { aspect-ratio: 4 / 3; } }

/* team */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(36px, 5vh, 56px); max-width: 760px; }
.person { margin: 0; }
.person .ph { overflow: hidden; aspect-ratio: 320 / 389; background: #D9D9DE; }
.person img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.15); }
.person figcaption { margin-top: 12px; }
.person .nm { display: block; font-size: 17px; font-weight: 400; }
.person .rl { display: block; margin-top: 4px; font-family: var(--vv-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--vv-muted); }
@media (max-width: 560px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* CTA band (legacy markup on inner pages) */
.cta-band { padding: clamp(96px, 14vh, 180px) 0 clamp(96px, 14vh, 180px) !important; }
.cta-panel { position: static; padding: 0; overflow: visible; }
.cta-panel::after, .beits { display: none !important; }
.cta-band .label { margin-bottom: clamp(24px, 4vh, 40px); }
.cta-line { display: inline; font-size: var(--vv-display); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; color: var(--vv-ink); }
.cta-line .u { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size .9s cubic-bezier(.42, 0, .132, 1); }
.cta-line:hover .u { background-size: 100% 1px; }

/* invitation (contact, 404): grey header */
.invite { padding: 0; min-height: 0; display: block; }
.invite-panel { position: static; display: block; min-height: 0; overflow: visible; border-radius: 0; }
.invite-panel::after { content: none; }
.invite-body { padding: clamp(150px, 24vh, 240px) var(--vv-margin) 0; }
.invite-body .label { color: var(--vv-ink); margin-bottom: clamp(28px, 4vh, 44px); }
.invite-body h1 { color: var(--vv-ink); }
.invite-body a { color: var(--vv-ink) !important; border-bottom: 1px solid currentColor !important; font-weight: 300 !important; }

/* partners circuit */
.circuit-diagram { display: flex; align-items: stretch; gap: 16px; margin-top: clamp(32px, 5vh, 56px); }
.circuit-diagram .node { flex: 1; padding: 22px 0; border-top: 1px solid var(--vv-ink); display: flex; flex-direction: column; gap: 8px; }
.circuit-diagram .node b { font-size: clamp(22px, 2vw, 30px); font-weight: 300; }
.circuit-diagram .node span { font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; color: var(--vv-muted); }
.circuit-diagram .node.ghost { border-top-style: dashed; color: var(--vv-muted); }
.circuit-diagram .arrow { align-self: flex-start; margin-top: -.5px; width: clamp(16px, 2vw, 32px); height: 1px; flex: none; overflow: hidden; font-size: 0; background: var(--vv-ink); }
.circuit-note { margin-top: 24px; color: var(--vv-muted); max-width: 40em; }
@media (max-width: 760px) { .circuit-diagram { flex-direction: column; } .circuit-diagram .arrow { display: none; } }

/* ═════════════════════════════════════════════════════════════════════════════
   13. Case pages
   ═════════════════════════════════════════════════════════════════════════════ */
.v3-case-hero { display: grid; grid-template-columns: 40fr 44fr 16fr; min-height: 100svh; }
.v3-case-hero__text { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 118px var(--vv-margin) var(--vv-space-above); }
.v3-case-hero__meta { display: grid; gap: 6px; }
.v3-case-hero__meta .tag + .tag::before { content: " · "; }
.v3-case-hero__title { margin: 0; }
.v3-case-hero__title span { display: block; color: var(--vv-muted); }
.v3-case-hero__photo { position: relative; overflow: hidden; background: #0B0B0E; }
.v3-case-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v3-case-hero__grad.vv-frame { min-height: 0; height: 100%; }
@media (max-width: 960px) {
  .v3-case-hero { grid-template-columns: 1fr; }
  .v3-case-hero__text { min-height: 52svh; padding-top: 104px; }
  .v3-case-hero__photo { height: 64svh; }
  .v3-case-hero__photo img[style*="--hero-pos"] { object-position: var(--hero-pos); }
  .v3-case-hero__grad.vv-frame { height: 96px; }
  .v3-case-hero__grad .v3-grad-labels__hex { display: none; }
}
.v3-case-media { padding-top: 10px !important; }

/* film */
.film { position: relative; margin: 0 var(--vv-margin); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.film-poster, .film video, .film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }
.film-play { position: absolute; left: 0; bottom: 0; display: flex; align-items: baseline; gap: 16px; padding: 22px 24px; background: var(--vv-grey); color: var(--vv-ink); border: 0;
  font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.film-play:hover { background: #fff; }
.film-icon { display: none; }
.film-len { color: var(--vv-muted); }
.film-foot { position: absolute; right: 24px; bottom: 22px; font-family: var(--vv-mono); font-size: var(--vv-label); letter-spacing: .04em; text-transform: uppercase; color: var(--vv-white); mix-blend-mode: difference; }
.film-foot a { border-bottom: 1px solid currentColor; }
.film.is-playing .film-poster, .film.is-playing .film-play, .film.is-playing .film-foot { display: none; }
@media (max-width: 760px) { .film { margin: 0 8px; } .film-foot { display: none; } }

/* the case's colours as a wide band */
.v3-colours.vv-frame { min-height: 0; height: clamp(280px, 52vh, 560px); margin: clamp(88px, 12vh, 150px) var(--vv-margin) 0; }
.v3-colours > .v3-grad-labels { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 24px; }

/* legacy variables still used in inline styles, mapped to the v3 tones */
:root { --ink: var(--vv-ink); --mut: var(--vv-muted); --dim: #8E8E97; --hair: transparent; --r-lg: 0; --r-md: 0; --r-sm: 0; --pad: var(--vv-margin); --bg: var(--vv-grey); --panel: #E2E2E8; }
.circuit-diagram { text-align: left; }
.circuit-diagram .node { align-items: flex-start; }
.circuit-diagram .node b { font-weight: 300; }
.svc-formats:has(> .fmt:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .svc-formats:has(> .fmt:nth-child(3):last-child) { grid-template-columns: 1fr; } }

/* case pages: hero title, reception facts, next world */
.v3-case-hero__title { font-size: clamp(44px, 5.6vw, 96px); font-weight: 300; line-height: 1.04; letter-spacing: -.02em; }
.v3-case-hero__meta { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.v3-ticker--case { margin-top: clamp(64px, 9vh, 120px); }
.v3-factline { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0; padding: 18px var(--vv-margin); list-style: none; }
.v3-factline li + li::before { content: "·"; margin: 0 14px; color: var(--vv-muted); }
.v3-next { padding-top: clamp(64px, 9vh, 120px); }
.v3-next .v3-case__head .vv-label { color: var(--vv-muted); }

.v3-case-hero__grad > .v3-grad-labels { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 18px; padding: 22px; }
.v3-factline { }

/* ═════════════════════════════════════════════════════════════════════════════
   14. Living case frames: one frame in the case's colours, the photo is a .vv-area.
       On hover vv-cases.js lets the gradient push into the photo and cycle images.
       (vv-living.js turns left/right areas into top areas below 700px wide.)
   ═════════════════════════════════════════════════════════════════════════════ */
.v3-case__body { display: block; }
.vv-frame.v3-row { min-height: 0; height: 100%; }
.v3-row > .v3-grad-labels { position: absolute; top: 0; bottom: 0; left: 66%; right: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 22px; }
.v3-row--flip > .v3-grad-labels { left: 0; right: 66%; }

.vv-frame.v3-card__frame, .vv-frame.pl-frame { min-height: 0; aspect-ratio: 4 / 5.6; }
.pl-frame { order: 1; }
.v3-card__frame > .v3-grad-labels, .pl-frame > .v3-grad-labels { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; z-index: 1; display: flex; align-items: center; padding: 0 16px; }

.v3-case-hero { grid-template-columns: 40fr 60fr; }
.vv-frame.v3-case-hero__frame { min-height: 0; height: 100%; }
.v3-case-hero__frame > .v3-grad-labels { position: absolute; top: 0; bottom: 0; right: 0; width: 26%; z-index: 1; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 18px; padding: 22px; }

@media (max-width: 960px) {
  .v3-case-hero { grid-template-columns: 1fr; }
  .vv-frame.v3-case-hero__frame { height: 64svh; }
}
@media (max-width: 699px) {
  .v3-case__body { height: auto !important; }
  .vv-frame.v3-row { height: auto; aspect-ratio: 3 / 4; }
  .v3-row > .v3-grad-labels, .v3-row--flip > .v3-grad-labels { top: 66%; left: 0; right: 0; bottom: 0; justify-content: center; padding: 0 16px; }
  .vv-frame.v3-case-hero__frame { height: 78svh; }
  .v3-case-hero__frame > .v3-grad-labels { top: 74%; left: 0; width: auto; flex-direction: column; justify-content: center; padding: 0 var(--vv-margin); }
  .v3-case-hero__frame img[style*="--hero-pos"] { object-position: var(--hero-pos); }
  .v3-row .v3-grad-labels__hex, .v3-case-hero__frame .v3-grad-labels__hex { display: none; }
}
.v3-case-hero { grid-template-columns: 42fr 58fr; }
.v3-case-hero__text { padding-right: clamp(24px, 3vw, 48px); }
.v3-case-hero__title { font-size: clamp(40px, 4.8vw, 84px); }
@media (max-width: 960px) { .v3-case-hero { grid-template-columns: 1fr; } }

/* ═════════════════════════════════════════════════════════════════════════════
   15. The rock (brand icon): a 3D stone closes every page; spin it by dragging (vv-rock.js)
   ═════════════════════════════════════════════════════════════════════════════ */
.v3-rock-stage { display: flex; justify-content: flex-end; align-self: start; margin-top: -18px; }   /* right of the address */
@media (max-width: 860px) { .v3-rock-stage { justify-content: flex-start; margin: 0 0 0 -14px; } }
.v3-rock3d { display: block; width: clamp(128px, 11vw, 176px); aspect-ratio: 4 / 3; cursor: grab; touch-action: pan-y; }
.v3-rock3d.is-grabbing { cursor: grabbing; }

/* strip text: where & when, then the key facts */
.v3-grad-labels__hex { display: grid; gap: 4px; }
.v3-grad-labels .vv-label { transition: color .6s ease; }

/* case frames: no grey may show between photo and gradient while they move */
.vv-frame[data-case] > .vv-area.vv-area { background: transparent; }

/* touch: bigger tap areas for the nav buttons without changing how they look */
@media (hover: none), (max-width: 860px) {
  .vv-nav .sound, .vv-nav .menu-dots { padding: 14px 10px; margin: -14px -10px; }
}

/* tablet portrait (700–860px): rows keep a real height (the old stacked-row rule set it to auto, which left the frame at 0) */
@media (min-width: 700px) and (max-width: 860px) {
  .v3-case .v3-case__body, .v3-case--flip .v3-case__body { height: clamp(320px, 54vw, 520px); }
  .v3-row .v3-grad-labels__hex { display: grid; }
  .v3-grid { gap: 28px 12px; }
  .v3-card__title { font-size: 24px; }
}

/* phones: a section title and its link stack instead of squeezing side by side */
@media (max-width: 520px) {
  .v3-head, .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* portrait images keep their full composition, two side by side */
.media-grid .m.tall img { aspect-ratio: 4 / 5; }

/* ticker v2: one block per review, short English line large, the original small, the source in mono */
.v3-ticker__track { align-items: stretch; }
.v3-ticker__item { width: clamp(270px, 29vw, 460px); flex: none; white-space: normal; justify-content: flex-start; gap: 14px;
  padding: clamp(30px, 4.5vh, 52px) clamp(36px, 4.5vw, 72px) clamp(30px, 4.5vh, 52px) 0; }
.v3-ticker__quote { font-size: clamp(26px, 2.5vw, 40px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.v3-ticker__orig { margin: 12px 0 0; font-size: 15px; line-height: 1.45; color: var(--vv-muted); }
.v3-ticker__meta { flex-direction: column; gap: 4px; margin: auto 0 0; padding-top: 6px; }
@media (max-width: 600px) { .v3-ticker__item { width: 78vw; } }
@media (max-width: 520px) { .v3-ticker__label { flex-direction: column; gap: 6px; } }

/* home: reach line between the worlds and the reviews */
.v3-reach__line { max-width: 15em; }
.v3-reach__line b { font-weight: 600; }
.v3-reach + .v3-ticker { margin-top: clamp(72px, 11vh, 140px); }

/* videos in the media grid behave like the photos they replace */
.media-grid .m video { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; background: #0B0B0E; }
.media-grid .m.tall video { aspect-ratio: 4 / 5; }
.media-grid .m.wide video { aspect-ratio: 21 / 9; }

/* featured film: portrait film on the right, a quiet grey column with its label and sound on the left */
.v3-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 0 var(--vv-margin) clamp(72px, 11vh, 140px) !important; }
.v3-feature__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 0 0 6px; }
.v3-feature__text .vv-label { margin: 0; }
.v3-feature__sound { align-self: flex-start; margin-top: 18px; padding: 0 0 2px; background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--vv-ink); cursor: pointer; }
.v3-feature__film { margin: 0; position: relative; overflow: hidden; background: #0B0B0E; }
.v3-feature__video { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 92vh; object-fit: cover; }
@media (max-width: 760px) {
  .v3-feature { grid-template-columns: 1fr; }
  .v3-feature__text { order: 2; padding-top: 14px; }
}

/* "Two journeys. One evolving city." */
.v3-journeys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 4vw, 64px); }
.v3-journey h3 { margin: 0 0 10px; font-size: clamp(26px, 2.4vw, 38px); font-weight: 300; line-height: 1.12; letter-spacing: -.015em; }
.v3-journey p { margin: 0; color: var(--vv-muted); max-width: 26em; }
@media (max-width: 760px) { .v3-journeys { grid-template-columns: 1fr; } }
.case-head i, .v3-journey i { font-style: italic; }
.v3-journeys:has(> .v3-journey:only-child) { grid-template-columns: minmax(0, 1fr); }
.v3-journey:only-child p { max-width: 34em; font-size: var(--vv-body); line-height: 1.3; color: var(--vv-ink); }

/* case text sections: plain reading text, one quiet lead, no big headings (only "About the project" has one) */
.case-head.v3-text p { margin: 0 0 1.05em; font-size: 18px; line-height: 1.62; color: var(--vv-ink); max-width: 36em; }
.case-head.v3-text p.v3-lead { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.42; margin-bottom: .9em; }
.case-head.v3-text p.v3-closer { margin: 1.4em 0 0; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.35; max-width: 26em; }
.case-head.v3-text i { font-style: italic; }
body > section:has(.v3-text) { padding-bottom: clamp(48px, 7vh, 88px); }
.v3-journey h3 { font-size: clamp(22px, 1.8vw, 28px); }
.v3-journey:only-child p { font-size: 18px; line-height: 1.6; color: var(--vv-muted); }

/* Play button: only appears when a browser will not start a video by itself */
.v3-play { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 18px 22px; background: var(--vv-grey); color: var(--vv-ink); border: 0; cursor: pointer; }
.v3-play:hover { background: #fff; }
.v3-play[hidden] { display: none; }
.media-grid .m video, .v3-feature__video { cursor: pointer; }

/* credits: optional title (exhibition, venue, dates) above the list */
.v3-credits-head { padding: 0 var(--vv-margin); margin: 0 0 22px; }
.v3-credits-head__title { margin: 0 0 6px; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; }
.v3-credits-head .vv-label { margin: 0; }