/* Whyld · V7. White, ink, one grey and one accent, used sparingly: as a fill on white, as type only on ink. Any other
   colour comes from a picture or the film. No fills behind sections except the footer, no shadows, no outlines on
   controls. Large type in Alcyone, small labels in Geist Mono. */

@font-face { font-family: 'Alcyone'; src: url('../assets/fonts/Alcyone-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Alcyone'; src: url('../assets/fonts/Alcyone-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../assets/fonts/GeistMono-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --track: -.02em;
  /* the type scale; each size reads its name's value at 1440 */
  --display-l: clamp(36px, 5vw, 84px);      /* 72 */
  --display-m: clamp(28px, 3.056vw, 52px);  /* 44 */
  --text-l: clamp(20px, 1.806vw, 30px);     /* 26 */
  --text-m: clamp(18px, 1.528vw, 25px);     /* 22 */
  --text-s: clamp(16px, 1.25vw, 20px);      /* 18 */
  --ui: 15px;
  --btn: 18px;                               /* text in content buttons */
  --chip: 14px;                              /* text in chips and tags */
  --label: 13px;
  --radius: clamp(10px, 1.1vw, 18px);
  --w-text: 500;
  --w-ui: 600;
  --w-mono: 500;
  --ink: #0E0E10;
  --accent: #F4E881;
  --grey: #6E6E73;
  --line: #E4E4E6;
  --tile: #F4F4F5;
  --foot-label: #A1A1A6;
  --case-line: #C9C9CE;
  --edge: clamp(16px, 2.6vw, 40px);   /* the margin to the screen's edge, also above and below */
  --page: max(var(--edge), (100vw - 1800px) / 2);   /* content never gets wider than 1800px; backgrounds and films still fill the screen */
  --section: clamp(96px, 16vw, 240px);
  --sans: 'Alcyone', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #FFF; color-scheme: light; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; background: #FFF; color: var(--ink); font-family: var(--sans); font-weight: var(--w-text); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* on every element, so -2% is taken from its own size instead of inheriting the body's pixels */
body, body * { letter-spacing: var(--track); }
/* text doesn't select, except what people need to copy: the address and the legal pages */
body { -webkit-user-select: none; user-select: none; }
.foot__mail, .legal { -webkit-user-select: text; user-select: text; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
h3 { font-weight: var(--w-text); }
section[id] { scroll-margin-top: 92px; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* the seven type styles: every piece of text on the site takes its size and line height from here */
.h2, .board__t, .about__text, .row__name, .foot__mail, .legal__t { font-size: var(--display-l); line-height: 1.05; }
.case__title, .faq__q { font-size: var(--display-m); line-height: 1.08; }
.hero__foot, .row__text, .legal__lead { font-size: var(--text-l); line-height: 1.25; }
.row__list, .person__name, .case__lede, .case__intro, .lab__sub, .xp__link-t, .faq__a { font-size: var(--text-m); line-height: 1.28; }
body, .body, .board__q, .case__points, .cv__name { font-size: var(--text-s); line-height: 1.4; }
.nav, .nav__cta, .lb__close, .foot__links { font-size: var(--ui); font-weight: var(--w-ui); line-height: 1.35; }
.label, .card__cap { font-family: var(--mono); font-weight: var(--w-mono); font-size: var(--label); line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); }
.h2 { font-weight: var(--w-text); text-wrap: balance; }
.body { color: var(--grey); text-wrap: pretty; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--page); top: -60px; z-index: 60; background: var(--ink); color: #FFF; padding: 8px 14px; border-radius: 99px; }
.skip:focus { top: 12px; }
/* the one button */
.chapter__link { font-size: var(--btn); font-weight: var(--w-ui); line-height: 1.35; }
.chip { font-size: var(--chip); font-weight: var(--w-ui); line-height: 1.35; }
.nav__cta, .lb__close { display: grid; place-items: center; height: 48px; padding: 0 24px; border-radius: 99px; background: var(--ink); color: #FFF; white-space: nowrap; }
/* the page's twelve columns */
.about, .legal__part { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
/* lists of short points under a hairline */
.row__list, .case__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: clamp(24px, 3.2vw, 56px); }
.row__list li, .case__points li { padding: .8em 0 1.1em; border-top: 1px solid var(--line); text-wrap: pretty; }
.row__list strong, .case__points strong { color: var(--ink); font-weight: inherit; }

/* ── nav: no bar, no fade. Logo and links are white in difference, so they turn to whatever lies under them, letter
   by letter: ink on white, white on ink and film. The button stays out of the blend, in its own layer: ink, white over the footer. ── */
.nav { --cta: 156px; position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); height: 92px; padding: 0 calc(var(--page) + var(--cta) + clamp(20px, 3vw, 40px)) 0 var(--page); color: #FFF; mix-blend-mode: difference; pointer-events: none; transition: opacity .6s var(--ease); }
.nav > * { pointer-events: auto; position: relative; }
/* nothing but the name while it writes itself */
html.is-intro .nav, html.is-intro .nav__cta { opacity: 0; pointer-events: none; animation: intro-failsafe 0s 6s forwards; }
/* should the intro never finish (a failed fetch, a script error), the nav comes back on its own */
@keyframes intro-failsafe { to { opacity: 1; pointer-events: auto; } }
.nav__logo { margin-right: auto; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.nav__logo img { width: 100px; height: auto; filter: invert(1); }
.nav.has-logo .nav__logo { opacity: 1; visibility: visible; }
.nav.is-foot .nav__logo { opacity: 0; visibility: hidden; }
.nav__links { display: flex; gap: 24px; }
.nav__links a { padding: 8px 0; }
.nav__cta { position: fixed; top: 22px; right: var(--page); z-index: 41; transition: transform .1s ease-out, background-color .3s, color .3s, opacity .6s var(--ease); }
.nav.is-foot + .nav__cta { background: #FFF; color: var(--ink); }
.nav__cta:active { transform: scale(.97); }
/* the two labels take turns in one fixed width, so the button never changes size; holding still under the pointer or focus */
.cta-cycle { display: grid; width: 108px; overflow: clip; text-align: center; }
.cta-cycle > span { grid-area: 1 / 1; animation: cta-cycle 7s var(--ease) infinite; }
.cta-cycle > span + span { animation-delay: -3.5s; }
.nav__cta:is(:hover, :focus-visible) .cta-cycle > span { animation-play-state: paused; }
@keyframes cta-cycle {
  0%, 42% { transform: none; }
  50% { transform: translateY(-110%); }
  50.01%, 92% { transform: translateY(110%); }
  100% { transform: none; }
}

/* ── the world: header + board in one pinned room ── */
.world { height: 827svh; }
.world__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #FFF; }

.film { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease); background: #FFF; }
.film.on { opacity: 1; }
.film video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.film::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 30%, rgba(0,0,0,.36) 50%, rgba(0,0,0,.52)); }

.hero { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: clamp(14px, 2vh, 24px); padding: 0 var(--page) var(--edge); pointer-events: none; color: var(--ink); transition: color .8s var(--ease); }
.hero.on { color: #FFF; }
/* the name runs the full width of the content, margin to margin, on the floor of the header; the words stand at the top */
.hero__sig { position: relative; flex: none; width: 100%; }
.why { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; visibility: hidden; }
.why-static { display: none; }
/* the top belongs to the nav alone: the words are one paragraph on the page's left edge, right above the name, its first sentence lit */
.hero__foot { flex: none; max-width: 560px; margin-top: auto; line-height: 1.42; text-wrap: pretty; opacity: 0; transition: opacity .8s var(--ease); }
.hero.on .hero__foot, .hero.on .hero__meta { opacity: 1; }
.hero__h1 { font: inherit; letter-spacing: inherit; }   /* its own line, no gap: the second sentence always starts below */
.hero__lede { opacity: .72; }
/* Pause stands under the words, on the same edge */
.hero__meta { flex: none; opacity: 0; transition: opacity .8s var(--ease); }
.hero__meta .label { color: inherit; }
.hero__pause { pointer-events: auto; padding: 8px 0; }
.hero__pause:hover { text-decoration: underline; text-underline-offset: .25em; }

/* ── the orbs: one shared canvas above the page, as in the reference ── */
.orb { position: relative; display: block; aspect-ratio: 1; }
.orbs-canvas { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 10; pointer-events: none; }
html.orbs-off [data-orb]::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; background: var(--tile) var(--orb-img, none) center / cover no-repeat; transform: scale(var(--orb-p, 1)); opacity: var(--orb-a, 1); }

/* ── the dive between pages (js/dive.js), shot like a camera move: the camera pushes into what was clicked, the page
   loses focus and washes out to white, and the next page comes up out of the white, a little too close, then settles.
   Going back is the same move in reverse: the camera pulls out of the page and the page before comes back into focus. ── */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
::view-transition { background: #FFF; }
::view-transition-group(root) { animation-duration: .25s; }   /* a plain link or Back: a quick crossfade; the dive sets its own times */
::view-transition-old(root), ::view-transition-new(root) { transform-origin: var(--vt-x, 50%) var(--vt-y, 50%); }
html.vt-deeper::view-transition-old(root) { animation: vt-push-old .7s cubic-bezier(.65,0,.35,1) both; }
html.vt-deeper::view-transition-new(root) { animation: vt-push-new .75s cubic-bezier(.16,1,.3,1) .3s both; }
html.vt-back::view-transition-old(root) { animation: vt-pull-old .65s cubic-bezier(.65,0,.35,1) both; }
html.vt-back::view-transition-new(root) { animation: vt-pull-new .75s cubic-bezier(.16,1,.3,1) .28s both; }
@keyframes vt-push-old {
  0% { transform: none; filter: none; opacity: 1; }
  45% { opacity: 1; }
  100% { transform: scale(2); filter: blur(8px); opacity: 0; }
}
@keyframes vt-push-new {
  from { transform: scale(1.15); filter: blur(8px); opacity: 0; }
  to { transform: none; filter: none; opacity: 1; }
}
@keyframes vt-pull-old {
  0% { transform: none; filter: none; opacity: 1; }
  45% { opacity: 1; }
  100% { transform: scale(.75); filter: blur(8px); opacity: 0; }
}
@keyframes vt-pull-new {
  from { transform: scale(1.8); filter: blur(8px); opacity: 0; }
  to { transform: none; filter: none; opacity: 1; }
}
/* where the browser cannot carry the dive, or less motion is asked for: a short fade through white */
.dive { position: fixed; inset: 0; z-index: 100; pointer-events: none; background: #FFF; }
html.is-arriving::after { content: ''; position: fixed; inset: 0; z-index: 99; background: #FFF; }

/* ── the board ── */
.board { position: absolute; inset: 0; z-index: 1; }
html.js .world:not(.is-open) .board:not(.is-static) { opacity: 0; pointer-events: none; }   /* not hidden from the tab key: a focused card flies the camera there */
.orb-trail { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.orb-trail__o { position: absolute; width: clamp(72px, 6.5vw, 116px); translate: -50% -50%; }
.ripples { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.board__plane { position: absolute; inset: 0; perspective: 1400px; }
.card { position: absolute; left: 0; top: 0; display: block; text-align: left; transform-origin: 50% 50%; will-change: transform; }
.card__img { display: block; width: 100%; aspect-ratio: var(--ar); border-radius: var(--radius); overflow: hidden; background: var(--tile); transition: transform .2s var(--ease); }
.card:active .card__img { transform: scale(.985); }
.card__img img, .card__img video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1s var(--ease); -webkit-user-drag: none; }
.card:hover .card__img img, .card:hover .card__img video { transform: scale(1.025); }
/* hovering a project lifts the whole card, picture and caption, a little toward the visitor */
.card__in { display: block; transform-origin: 50% 50%; transition: transform .45s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { z-index: 2; }
  .card:hover .card__in, .card:focus-visible .card__in { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .card__in { transition: none; } .card:hover .card__in { transform: none; } }
.card__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; margin-top: 10px; }
.card__cap b { font-weight: var(--w-mono); color: var(--ink); }

.board__hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; padding: 92px var(--page) clamp(20px, 3.4vh, 36px); display: flex; flex-direction: column; justify-content: space-between; opacity: 0; }
.board__hud::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #FFF 0, rgba(255,255,255,0) 112px), linear-gradient(90deg, #FFF 0, #FFF 24%, rgba(255,255,255,.86) 32%, rgba(255,255,255,0) 44%); }
.board__now { max-width: min(30vw, 440px); margin: auto 0; }
.board__t { font-weight: var(--w-text); margin-bottom: 16px; }
.board__q { color: var(--grey); text-wrap: pretty; }
.board__foot { display: flex; justify-content: flex-end; }

/* ── about: one large sentence on white ── */
.about { padding: var(--section) var(--page); row-gap: 28px; }
.about__text { grid-column: 3 / -1; font-weight: var(--w-text); }
.about__text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
/* a small browser window of wildcard.at, grown up out of the link's underline (js/main.js) */
.wc { position: fixed; left: 0; top: 0; z-index: 45; width: 420px; border-radius: 14px; overflow: hidden; background: #FFF; box-shadow: 0 30px 60px -20px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06); pointer-events: none; clip-path: inset(100% 0 0 0 round 14px); translate: 0 16px; transition: clip-path .6s var(--ease), translate .6s var(--ease); }
.wc.on { clip-path: inset(0 0 0 0 round 14px); translate: 0 0; }
.wc img { display: block; width: 100%; height: auto; }
.wc__bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: var(--tile); font: var(--w-ui) var(--label)/1 var(--sans); color: var(--grey); }
.wc__bar i { width: 7px; height: 7px; border-radius: 50%; background: #D9D9DC; }
.wc__bar span { margin: 0 auto; padding-right: 30px; }
@media (prefers-reduced-motion: reduce) { .wc { transition: none; } }
html.js .about__text .w { opacity: var(--o, .14); }

/* ── what we do: the left half is one film up to the screen's edge, standing still; the pillars pass on the right, and each brings its film ── */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.services__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #FFF; }
.services__clip { position: absolute; }
.services__mask { position: absolute; inset: 0; -webkit-clip-path: url(#pillar-mask); clip-path: url(#pillar-mask); }   /* cut by the pillar's form, js/morph.js */
.services__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
.services__film.is-on { opacity: 1; }
.rows { padding: 0 var(--page) 0 clamp(32px, 4.4vw, 80px); }
.row { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 100svh; padding: 92px 0 clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row__morph { display: none; width: clamp(56px, 5.8vw, 84px); aspect-ratio: 1; margin-bottom: clamp(16px, 1.8vw, 28px); }
.row__name { font-weight: var(--w-text); }
.row__text { margin-top: clamp(16px, 1.8vw, 28px); color: var(--grey); text-wrap: pretty; }
.row__list { width: 100%; margin-top: clamp(24px, 3vw, 48px); color: var(--grey); }

/* ── experiments: the start of a wormhole. The words stand above the orbs' canvas ── */
.lab { position: relative; height: 150svh; min-height: 840px; overflow: hidden; display: grid; place-items: center; padding: 0 var(--page); }
.lab__field { position: absolute; inset: 0; pointer-events: none; }
/* white at the top and the bottom, clear through the middle: no orb is cut at an edge (above the orb canvas, z 10).
   Solid for the first 11% of the section, where wormhole.js cuts the orbs off */
.lab::before, .lab::after { content: ''; position: absolute; left: 0; right: 0; height: 34%; z-index: 11; background: linear-gradient(180deg, #FFF 33%, rgba(255,255,255,0)); pointer-events: none; }
.lab::before { top: 0; }
.lab::after { bottom: 0; rotate: 180deg; }
.lab__orb { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.lab__copy { position: relative; z-index: 12; display: flex; flex-direction: column; align-items: center; max-width: 820px; text-align: center; }
.lab__sub { max-width: 30em; margin-top: clamp(16px, 1.6vw, 24px); color: var(--grey); text-wrap: pretty; }
.lab__cta { margin-top: clamp(24px, 2.6vw, 40px); }

/* ── team ── */
.team { padding: var(--section) var(--page); }
.team__lead { margin: 0 0 clamp(40px, 6vw, 96px); max-width: 18em; }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.person__tile { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--tile); display: grid; place-items: center; }
.person__tile img { width: 100%; height: 100%; object-fit: cover; }
.person__name { margin-top: 14px; }

/* ── faq: a typographic index, big numbered questions; one answer open at a time, in the text column ── */
.faq { padding: 0 var(--page) var(--section); }   /* the team above already leaves a section's space */
.faq__list { margin-top: clamp(40px, 6vw, 96px); border-bottom: 1px solid var(--line); }
.faq__item { border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq__item::details-content { height: 0; overflow: clip; transition: height .5s var(--ease), content-visibility .5s allow-discrete; }
.faq__item[open]::details-content { height: auto; }
.faq__q { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 9fr) auto; align-items: baseline; gap: 24px; padding: clamp(20px, 2.2vw, 34px) 0; list-style: none; cursor: pointer; transition: color .3s; }
.faq__q::-webkit-details-marker { display: none; }
.faq__item:not([open]) .faq__q:hover { color: var(--grey); }
.faq__plus { position: relative; align-self: center; width: 22px; height: 22px; }   /* a plus that turns into a minus */
.faq__plus::before, .faq__plus::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: rotate .4s var(--ease); }
.faq__plus::after { rotate: 90deg; }
.faq__item[open] .faq__plus::after { rotate: 0deg; }
.faq__a { margin-left: calc((100% - 48px) * 2 / 11 + 24px); max-width: 30em; padding-bottom: clamp(28px, 3vw, 44px); color: var(--grey); text-wrap: pretty; }
.faq__mail { margin-top: 28px; font-size: var(--text-s); color: var(--grey); }
.faq__mail a, .faq__a a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (max-width: 800px) {
  .faq__q { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .faq__n { grid-column: 1 / -1; }
  .faq__a { margin-left: 0; }
}

/* ── footer ── */
.foot { position: relative; overflow: hidden; padding: clamp(48px, 5vw, 80px) var(--page) clamp(20px, 3vw, 32px); background: var(--ink); color: #FFF; }
.foot > :not(.ripples) { position: relative; }
.foot .label { color: var(--foot-label); }
.foot__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.foot__mail { display: block; color: #FFF; font-weight: var(--w-text); font-size: min(var(--display-l), 9.2vw); }
.foot__mail:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .1em; }
.foot__links { display: flex; gap: 24px; }
.foot__links a { opacity: .72; transition: opacity .2s; }
.foot__links a:hover { opacity: 1; }
.foot__logo { filter: invert(1); width: 100%; height: auto; margin: clamp(64px, 11vw, 180px) 0 clamp(20px, 3vw, 36px); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.foot__legal { display: flex; gap: 20px; }
.foot__base a { transition: color .2s; }
.foot__base a:hover, .foot__legal a[aria-current] { color: #FFF; }

/* ── impressum, datenschutz: the same head and hairlines as the rest, nothing moves ── */
.legal { padding: clamp(120px, 16vw, 220px) var(--page) var(--section); }
.legal__t { font-weight: var(--w-text); }
.legal__lead { max-width: 30em; margin: clamp(24px, 3vw, 40px) 0 clamp(56px, 8vw, 120px); text-wrap: pretty; }
.legal__part { row-gap: 12px; padding: clamp(20px, 2.4vw, 32px) 0; border-top: 1px solid var(--line); }
.legal__part > .label { grid-column: 1 / span 4; padding-top: .25em; }
.legal__part > :not(.label) { grid-column: 5 / span 7; max-width: 44em; }
.legal__part p + p { margin-top: 12px; }
.legal__part a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.legal__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px 20px; margin: 0; }
.legal__facts dt { color: var(--grey); }

/* ── a project: one screen, no scrolling. The film fills it, the experiments float over it, a drawer holds the reading ── */
html.is-screen, html.is-screen body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.case { position: relative; background: #FFF; }
.case__head { position: relative; height: 100svh; overflow: hidden; }
/* the film stands in the middle, larger than the orbs around it, and everything stays inside the page's width */
.case__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.case__lines path { fill: none; stroke: var(--case-line); stroke-width: 1; }
.case__lines circle { fill: var(--ink); }
.case__mid { position: absolute; inset: 92px 0 118px; display: grid; place-items: center; }
.case__keys { position: relative; width: min(54%, calc((100svh - 230px) * (var(--ar)))); aspect-ratio: var(--ar); pointer-events: auto; }
.case__key { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: var(--radius); background: var(--tile); }
.case__play { position: absolute; left: 12px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 99px; background: #FFF; color: var(--ink); cursor: pointer; }
.case__play:active { transform: scale(.94); }
.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 99px; background: #FFF; color: var(--ink); white-space: nowrap; }
.chip--tile { background: var(--tile); }
/* the orbs over the film, as large as the screen and their number allow; they stay inside the page's width */
.case__plane { position: absolute; inset: 0 var(--page); pointer-events: none; will-change: transform; }
.case__nodes { --orb: clamp(112px, min(30svh, (100vw - 2 * var(--page)) * .145, 48svh / var(--gaps) - 46px), 320px); position: absolute; inset: 0; pointer-events: none; }
.node { position: absolute; left: var(--x); top: var(--y); width: max(var(--orb), 150px); transform: translate(-50%, -50%); pointer-events: auto; }
.node__btn { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; text-align: center; }
.node .orb { width: var(--orb); transition: scale .9s var(--ease); }
.node__btn:hover .orb, .node__btn:focus-visible .orb { scale: 1.04; }
/* the drawer: above the orbs' canvas; closed it is the bar of the application */
.case__dock { position: absolute; left: var(--page); right: var(--page); bottom: clamp(14px, 2.4svh, 24px); z-index: 12; }
/* closed: a caption under the film, not a bar. The name, the facts in mono, the way in as a text link */
.case__bar { display: flex; align-items: baseline; gap: clamp(20px, 2.2vw, 36px); }
.case__title { margin-right: auto; font-weight: var(--w-text); }
.case__tags { display: flex; flex-wrap: wrap; }
.case__tags li + li::before { content: '—'; margin: 0 .7em; }
.case__more { position: relative; z-index: 30; padding: 0 0 2px; font-size: var(--chip); font-weight: var(--w-ui); line-height: 1.35; white-space: nowrap; color: var(--ink); border-bottom: 1px solid currentColor; cursor: pointer; }
.case__more::after { content: '\00a0→'; }
.is-open .case__more::after { content: none; }
/* open: the project slides in from the right as a panel; “Close” stays where “About the project” was */
.case__drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: min(560px, 100vw); visibility: hidden; padding: 112px clamp(24px, 3vw, 48px) 96px; background: linear-gradient(90deg, rgba(255,255,255,.6) 0%, #FFF 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); translate: 100% 0; transition: translate .6s var(--ease), visibility .6s; }
.is-open > .case__drawer { translate: 0 0; visibility: visible; }
.case__drawer-in { height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.case__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(20px, 2vw, 32px); }
.case__lede { max-width: 40em; text-wrap: pretty; }
.case__intro { max-width: 40em; margin-top: .7em; color: var(--grey); text-wrap: pretty; }
.case__points { grid-template-columns: 1fr; margin-top: clamp(18px, 2vw, 28px); color: var(--grey); }
/* media starts where the text starts and always runs on to the page padding */
.chapter__media { grid-column: 4 / -1; display: block; width: 100%; border-radius: var(--radius); overflow: hidden; background: var(--tile); cursor: pointer; }
.chapter__media video, .chapter__media img { width: 100%; height: auto; }
.chapter__grid { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.chapter__grid--tall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chapter__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chapter__grid .chapter__media { grid-column: auto; }
.chapter__grid .chapter__media:only-child { grid-column: 1 / -1; }
.chapter__grid[style] .chapter__media:not(.chapter__media--wide) :is(video, img) { aspect-ratio: var(--g-ar); object-fit: cover; }
.chapter__grid .chapter__media--wide { grid-column: span 2; }
/* three across, with a row of two where a piece needs more room */
.chapter__grid--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.chapter__grid--six .chapter__media { grid-column: span 2; }
.chapter__grid--six .chapter__media--half { grid-column: span 3; }
/* a film on the screen of a rendered device; on a phone it fades into the ends of the screen the render already shows */
.chapter__media--device { position: relative; }
.chapter__screen { position: absolute; overflow: hidden; }
.chapter__screen video { position: absolute; max-width: none; }
.chapter__screen--fade { -webkit-mask-image: linear-gradient(transparent, #000 2.8%, #000 97.2%, transparent); mask-image: linear-gradient(transparent, #000 2.8%, #000 97.2%, transparent); }
.chapter__media--framed { padding: clamp(8px, 1vw, 16px); }
.chapter__media--framed img, .chapter__media--framed video { border-radius: 8px; }
.chapter__link { display: inline-grid; place-items: center; height: 54px; padding: 0 28px; margin-top: clamp(24px, 2.6vw, 40px); border-radius: 99px; background: var(--ink); color: #FFF; white-space: nowrap; }   /* 18px text needs a little more room than the nav button */
.chapter__link:active { transform: scale(.97); }
.case__noscript { padding: 140px var(--page) var(--section); }
/* ── an experiment: the work first, at the page's width, then what was tried ── */
.xp { padding: 92px var(--page) var(--section); }
.xp__work { padding-bottom: 20px; }
.xp__work .chapter__media { margin: 0; }
.xp__work--grid { padding: 0 0 clamp(48px, 6vw, 96px); }
/* a live piece: its own grey frame, so it reads as something running inside the page, with a bar on top */
.xp__embed { margin: 92px 0 0; padding: 6px; border-radius: calc(var(--radius) + 6px); background: var(--tile); }
.xp__bar { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 6px 6px; }
.xp__live { flex: none; gap: 8px; background: var(--ink); color: #FFF; }
.xp__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: xp-live 2.4s ease-in-out infinite; }
@keyframes xp-live { 50% { opacity: .35; } }
.xp__try { flex: 1; min-width: 0; font-size: var(--ui); font-weight: var(--w-ui); color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp__full { flex: none; transition: background-color .2s; }
.xp__full:active, .xp__live:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .xp__full:hover { background: var(--line); } }
.xp__embed iframe { display: block; width: 100%; height: max(560px, calc(100svh - 176px)); border: 0; border-radius: var(--radius); background: #FFF; }
@media (max-width: 700px) {
  .xp__bar { flex-wrap: wrap; gap: 8px; padding-top: 4px; }
  .xp__try { order: 3; flex-basis: 100%; white-space: normal; padding: 0 2px 4px; }
  .xp__full { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .xp__live i { animation: none; } }
/* one cut, one size, a step below the home page's About, in the same columns */
.xp__about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start; padding: var(--section) 0; }
.xp__orb { grid-column: 1 / span 2; width: min(100%, clamp(96px, 10vw, 170px)); }
.xp__read { grid-column: 3 / -1; }
/* the eyebrow: in mono, the path from the project to this experiment; the project leads back */
.xp__eyebrow { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 clamp(14px, 1.4vw, 22px); }
.xp__eyebrow a { transition: color .2s; }
.xp__eyebrow a:hover { color: var(--ink); }
.xp__slash { font-style: normal; margin: 0 .6em; color: var(--case-line); }
.xp__read p { margin: 0; font-size: var(--display-m); font-weight: var(--w-text); line-height: 1.08; text-wrap: pretty; }
.xp__read p + p { margin-top: .6em; }
.xp__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(32px, 4vw, 64px); }
.xp__tags .chip { height: 34px; padding: 0 14px; }
.xp__link .label { font-size: var(--text-m); }
.xp__link .label { font-family: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; }
.xp__more { padding-top: clamp(48px, 6vw, 96px); border-top: 1px solid var(--line); }
.xp__next { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 64px); }
.xp__link { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.xp__link .orb { width: 100%; }
.xp__link-t { margin-top: 6px; }

/* ── all experiments: a free canvas that comes round again ── */
.cv { position: absolute; inset: 0; height: 100svh; background: #FFF; overflow: hidden; }   /* no stacking context of its own: the filters and the card stand above the orbs' canvas */
.cv__stage { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.cv__stage.is-drag { cursor: grabbing; }
.cv__plane { position: absolute; left: 0; top: 0; }
.cv__item { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; will-change: transform; -webkit-user-drag: none; }
.cv__item.is-off { visibility: hidden; }
.cv__item.is-dim { pointer-events: none; }
.cv__item .orb { width: 100%; }
.cv__name { opacity: 0; transition: opacity .3s; text-wrap: balance; scale: calc(1.3 / var(--k, 1)); transform-origin: 50% 0; }   /* one size on every orb, whatever the orb's own */
.cv__item:is(:hover, :focus-visible) .cv__name { opacity: 1; }
.cv__filters { position: absolute; left: var(--page); right: var(--page); bottom: clamp(14px, 2.4svh, 24px); z-index: 12; display: flex; justify-content: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chip--filter { height: 36px; padding: 0 16px; background: var(--tile); cursor: pointer; transition: background-color .2s, color .2s; }
.chip--filter[aria-pressed="true"] { background: var(--ink); color: #FFF; }
.chip__n { margin-left: .45em; font-variant-numeric: tabular-nums; color: var(--grey); transition: color .2s; }   /* how many experiments the filter holds */
.chip--filter[aria-pressed="true"] .chip__n { color: rgba(255, 255, 255, .6); }

/* ── the lightbox ── */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); overflow: hidden; }
.lb::backdrop { background: rgba(255, 255, 255, .96); }
.lb__grid { height: 100%; }
.lb__media { height: 100%; display: grid; place-items: center; }
.lb__media > * { display: block; width: min(100vw - 2 * var(--page), (100dvh - 2 * var(--edge)) * var(--ar, 1.78)); aspect-ratio: var(--ar, 1.78); border-radius: var(--radius); will-change: transform; }
.lb__close { position: absolute; top: 18px; right: 18px; z-index: 2; }

/* mono labels keep their own open tracking, children included */
.label *, .card__cap * { letter-spacing: .06em; }

/* ── phones and small tablets ── */
@media (max-width: 800px) {
  .nav { height: 72px; }
  .nav__links { display: none; }
  .nav__logo img { width: 84px; }
  .nav__cta { top: 14px; height: 44px; padding: 0 20px; }
  .board__hud { padding-top: 72px; }
  .board__hud::before { background: linear-gradient(180deg, #FFF 0, rgba(255,255,255,0) 84px), linear-gradient(0deg, #FFF 0, #FFF 34%, rgba(255,255,255,0) 46%); }
  .board__now { max-width: none; margin-top: auto; margin-bottom: 18px; }
  .about { display: block; }
  .services { display: block; }
  .services__stage { z-index: 2; height: 42svh; }
  .rows { padding: 0 var(--page); }
  .row { display: block; min-height: 0; padding: 32px 0; }
  .row__morph { width: 56px; margin-bottom: 16px; }
  .row__text { margin-top: 14px; }
  .row__list { grid-template-columns: 1fr; margin-top: 22px; }
  .team__grid { gap: 8px; }
  .person .label { display: none; }
  .case__mid { inset: 72px var(--page) 290px; }
  .case__keys { width: min(100%, calc((100svh - 374px) * (var(--ar)))); }
  .case__lines { display: none; }
  .case__bar { flex-wrap: wrap; }
  .case__plane { inset: 0; }
  .case__nodes { --orb: 112px; inset: auto 0 128px; display: flex; gap: 8px; padding: 0 var(--page); overflow-x: auto; scrollbar-width: none; pointer-events: auto; -webkit-overflow-scrolling: touch; }
  .node { position: static; flex: none; width: 128px; transform: none; }
  .case__bar .case__tags { display: none; }
  .xp { padding-top: 72px; }
  .xp__about { display: block; padding: 48px 0; }
  .xp__orb { display: block; width: 96px; margin-bottom: 24px; }
  .xp__next { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv__filters { justify-content: flex-start; }
  .chapter__media { margin-top: 24px; }
  .chapter__grid { margin-top: 24px; gap: 12px; }
  .chapter__grid--four, .chapter__grid--devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chapter__grid--devices .chapter__media { grid-column: auto; }
  .chapter__grid--devices .chapter__media--half { grid-column: 1 / -1; }
  .chapter__grid--devices .chapter__media:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .chapter__grid .chapter__media { margin-top: 0; }
  .foot__top { flex-direction: column; align-items: flex-start; }
  .legal__part { display: block; }
  .legal__part > .label { display: block; margin-bottom: 10px; }
  .legal__facts { grid-template-columns: 1fr; gap: 2px; }
  .legal__facts dd + dt { margin-top: 10px; }
}

/* ── reduced motion: nothing flies; the film's still, the board as a plain grid ── */
@media (prefers-reduced-motion: reduce) {
  .cta-cycle > span { animation: none; }
  .cta-cycle > span:first-child { visibility: hidden; }
  .world { height: auto; }
  .world__stage { position: static; display: flex; flex-direction: column; height: auto; overflow: visible; }
  .film { inset: 0 0 auto; height: 100svh; opacity: 1; transition: none; }
  .hero { position: relative; height: 100svh; color: #FFF; transition: none; }
  .hero__foot { opacity: 1; }
  .why-static { display: block; order: 1; padding: var(--section) var(--page); text-align: center; font-size: clamp(56px, 9vw, 168px); }
  .board { position: relative; order: 2; height: auto; }
  .board__plane { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 32px 20px; padding: 64px var(--page); perspective: none; }
  .board__hud { display: none; }
  .board.is-static .card { position: static; width: auto !important; }
  .services__film { transition: none; }
}
@media (prefers-contrast: more) { :root { --grey: #3F3F44; --line: #8A8A90; } }

/* no pointer to hover with: the names stand under the orbs */

/* pillars, calmer: each point is just its name, a short quiet list, no rules */
.row__list { display: flex; flex-direction: column; gap: .35em; width: auto; margin-top: clamp(28px, 3.4vw, 56px); font-size: var(--text-s); line-height: 1.4; color: var(--grey); }
.row__list li { padding: 0; border: 0; }
@media (max-width: 700px) { .row__list { margin-top: 20px; } }
.row__list { gap: .7em; }
.row__list li { display: flex; align-items: center; gap: .75em; }
.row__list svg { width: 1.5em; height: 1.5em; flex: none; color: var(--ink); }

/* ── the nav on phones (js/menu.js): the links fold behind one word next to the call to action, in the same difference
   blend as the logo; open, the nav leaves the blend and the links stand on a small white panel under the bar ── */
.nav__menu { display: none; }
@media (max-width: 800px) {
  .nav { gap: 8px; padding-right: calc(var(--page) + var(--cta) + 8px); }
  .nav__logo { flex: none; }
  .nav__menu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
  .nav.is-open { mix-blend-mode: normal; color: var(--ink); }
  .nav.is-open .nav__logo img { filter: none; }
  .nav.is-open .nav__links { display: flex; position: fixed; top: 72px; left: var(--page); right: var(--page); flex-direction: column; gap: 0;
    padding: 8px; border-radius: 18px; background: #FFF; color: var(--ink); box-shadow: 0 18px 48px rgba(0, 0, 0, .14); transform-origin: top right;
    animation: menu-in .2s cubic-bezier(.23, 1, .32, 1); }
  .nav.is-open .nav__links a { padding: 14px 16px; font-size: var(--text-l); }
}
.nav__menu-i { position: relative; width: 18px; height: 12px; }
.nav__menu-i::before, .nav__menu-i::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.nav__menu-i::before { top: 2px; }
.nav__menu-i::after { bottom: 2px; }
.nav.is-open .nav__menu-i::before { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav__menu-i::after { transform: translateY(-3px) rotate(-45deg); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .nav.is-open .nav__links { animation-name: menu-fade; } .nav__menu-i::before, .nav__menu-i::after { transition: none; } }
@keyframes menu-fade { from { opacity: 0; } }