:root {
  --ink: #f7f7f2;
  --ink-2: #ece9e0;
  --line: rgba(10, 14, 24, .3);
  --snow: #080b12;
  --mute: #1f2530;
  --ice: #efece3;
  --ice-2: #e0dcd0;
  --dark-text: #080b12;
  --hot: #abfc50;
  --gut: clamp(16px, 3.2vw, 46px);
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "Lucida Console", Monaco, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { background: var(--ink); color: var(--snow); font: 400 clamp(16px, 1.25vw, 19px)/1.45 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.mono { font: 400 clamp(10.5px, .82vw, 12px)/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

#moon, #gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#moon { background: linear-gradient(115deg, #b8bdc9, #a9aeba 55%, #9ba0ac); }
#view { position: relative; z-index: 1; }
section, footer { position: relative; }

/* Loader and page wipe */
#loader { position: fixed; inset: 0; z-index: 60; background: var(--ink); display: flex; align-items: center; justify-content: center; gap: 16px; transition: transform 1s var(--ease); }
#loader.off { transform: translateY(-100%); }
.load-line { width: min(36vw, 280px); height: 1px; background: var(--line); }
.load-line i { display: block; height: 100%; width: 100%; background: var(--hot); transform: scaleX(0); transform-origin: left; }
#load-n { position: absolute; left: var(--gut); bottom: var(--gut); font: 300 clamp(64px, 15vw, 220px)/.8 var(--sans); letter-spacing: -.04em; }
#wipe { position: fixed; inset: 0; z-index: 50; background: var(--hot); color: var(--dark-text); display: flex; align-items: center; justify-content: center; transform: translateY(100%); pointer-events: none; }
#wipe.in { transform: none; transition: transform .55s cubic-bezier(.76, 0, .24, 1); }
#wipe.out { transform: translateY(-100%); transition: transform .55s cubic-bezier(.76, 0, .24, 1); }

/* Header */
#hd { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px var(--gut); pointer-events: none; color: var(--snow); transition: transform .5s var(--ease), color .3s; }
#hd > * { pointer-events: auto; }
#hd.hide { transform: translateY(-110%); }
#hd[data-tone="light"] { color: var(--dark-text); }
.logo img { width: clamp(140px, 15vw, 210px); height: auto; filter: brightness(0); }
#hd[data-tone="light"] .logo img { filter: brightness(0); }
nav { display: flex; align-items: center; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 15px; border: 1px solid currentColor; border-radius: 99px; font: 400 clamp(10.5px, .82vw, 12px)/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; position: relative; overflow: hidden; backdrop-filter: blur(10px); transition: color .3s, background .3s, border-color .3s; }
.pill sup { font-size: .8em; line-height: 0; }
.pill:hover { background: var(--snow); border-color: var(--snow); color: #edf1f1; }
.pill-hot { background: var(--hot); border-color: var(--hot); color: var(--dark-text); }
#hd[data-tone="light"] .pill-hot { border-color: var(--dark-text); }
.lang { margin-left: 8px; }
.lang a { opacity: .6; }
.lang a:hover { opacity: 1; }

/* Hero */
.hero { min-height: 100svh; padding: 0 var(--gut) var(--gut); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.cross-row { position: absolute; left: var(--gut); right: var(--gut); top: 46%; display: flex; justify-content: space-between; color: var(--mute); pointer-events: none; font: 300 16px/1 var(--mono); }
.hero-top { position: absolute; top: 96px; left: var(--gut); max-width: 28ch; color: var(--mute); }
.hero h1 { font-weight: 300; font-size: clamp(38px, min(5.6vw, 12vh), 100px); line-height: .98; letter-spacing: -.035em; text-transform: uppercase; }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .l > span { display: block; transform: translateY(110%); transition: transform 1.3s var(--ease); }
.ready .hero h1 .l > span { transform: none; }
.hero h1 .l:nth-child(2) > span { transition-delay: .09s; }
.hero h1 .l:nth-child(3) > span { transition-delay: .18s; }
.hero h1 em { font-style: italic; font-weight: 300; }
.hero h1 .r { text-align: right; }
.hero-foot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: clamp(20px, 3vw, 40px); padding-top: 16px; border-top: 1px solid var(--line); align-items: end; }
.hero-foot .mono:first-child { grid-column: 1 / span 3; color: var(--mute); }
.hero-foot p { grid-column: 5 / span 5; font-size: clamp(15px, 1.2vw, 18px); max-width: 52ch; }
.hero-foot .act { grid-column: 11 / span 2; justify-self: end; }

/* Marquee */
.marquee { overflow: hidden; padding: 12px 0; border-block: 1px solid var(--line); white-space: nowrap; color: var(--mute); }
.marquee > div { display: inline-block; will-change: transform; }
.marquee span { padding-right: 3em; }

/* Statement */
.state { padding: clamp(90px, 15vw, 220px) var(--gut); display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.state .mono { grid-column: 1 / span 12; color: var(--snow); margin-bottom: 26px; }
.state h2 { grid-column: 1 / span 7; font-weight: 300; font-size: clamp(36px, 5.2vw, 84px); line-height: 1; letter-spacing: -.035em; }
.w { opacity: .12; transition: opacity .25s linear; }
.state .col { grid-column: 1 / span 6; margin-top: clamp(40px, 7vw, 100px); }
.state .col p + p { margin-top: 1em; }
.state .col p { color: var(--mute); }
.state .col .mono { color: var(--snow); margin: 26px 0 0; }

/* Disciplines */
.disc { height: 340vh; }
.disc-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 92px var(--gut) var(--gut); display: flex; flex-direction: column; justify-content: flex-end; }
.disc-bar { position: absolute; top: 92px; left: var(--gut); right: var(--gut); display: flex; gap: 12px; align-items: center; color: var(--mute); }
.disc-bar i { flex: 1; height: 1px; background: var(--line); position: relative; }
.disc-bar i b { position: absolute; inset: 0; background: var(--snow); transform: scaleX(0); transform-origin: left; }
.stage { position: absolute; left: var(--gut); bottom: var(--gut); width: min(38%, 540px); opacity: 0; transform: translateY(26px); transition: opacity .55s, transform .9s var(--ease); pointer-events: none; }
.stage.on { opacity: 1; transform: none; pointer-events: auto; }
.stage .n { color: var(--snow); display: block; margin-bottom: 14px; }
.stage h3 { font-weight: 300; font-size: clamp(26px, 3.1vw, 48px); line-height: 1.04; letter-spacing: -.03em; }
.stage p { margin-top: 12px; max-width: 44ch; color: var(--mute); }
.stage .pill { margin-top: 16px; }
.stage-img { position: absolute; right: var(--gut); bottom: var(--gut); width: clamp(170px, 23vw, 360px); opacity: 0; transform: translateY(24px) rotate(1.5deg); transition: opacity .55s, transform .9s var(--ease); }
.stage-img.on { opacity: 1; transform: none; }

/* Light sections */
.tone-light { color: var(--dark-text); }
.tone-light .mono.lab { color: var(--mute); }
.feature { padding: clamp(70px, 10vw, 150px) var(--gut); border-radius: 22px 22px 0 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; overflow: hidden; }
.feature .mono { grid-column: 1 / span 12; margin-bottom: 14px; }
.feature h2 { grid-column: 1 / span 12; font-weight: 300; font-size: clamp(38px, 8.5vw, 136px); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.feature h2 em { font-weight: 300; }
.feature .txt { grid-column: 1 / span 4; margin-top: 30px; align-self: end; }
.feature .txt .pill { margin-top: 22px; }
.feature .pic { grid-column: 6 / span 7; margin-top: 30px; }
.clip { overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease); background: rgba(0, 0, 0, .05); }
.clip.in { clip-path: inset(0); }
.clip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.8s var(--ease); }
.clip.in img { transform: scale(1.02); }

/* Call to action with morphing blob */
.cta { padding: clamp(80px, 12vw, 180px) var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; overflow: hidden; }
.cta h2 { font-weight: 300; font-size: clamp(38px, 7vw, 110px); line-height: .98; letter-spacing: -.035em; }
.cta small { display: block; margin-top: 14px; font-size: clamp(15px, 1.2vw, 18px); }
.blob { flex: none; display: grid; place-items: center; width: clamp(150px, 19vw, 280px); aspect-ratio: 1; background: var(--hot); color: var(--dark-text); font-weight: 500; font-size: clamp(19px, 2vw, 30px); border-radius: 58% 42% 46% 54% / 44% 56% 42% 58%; animation: blob 9s ease-in-out infinite alternate; transition: scale .5s var(--ease); }
.blob:hover { scale: 1.08; }
@keyframes blob {
  to { border-radius: 40% 60% 62% 38% / 60% 38% 62% 40%; rotate: 14deg; }
}

/* Selected work */
.sel { padding: clamp(70px, 10vw, 150px) var(--gut); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: clamp(28px, 4vw, 56px); border-bottom: 1px solid var(--line); color: var(--mute); }
.sel-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(36px, 5vw, 76px) 16px; }
.card { display: block; grid-column: span 6; }
.card:nth-child(6n+1) { grid-column: 1 / span 7; }
.card:nth-child(6n+2) { grid-column: 9 / span 4; margin-top: 16vw; }
.card:nth-child(6n+3) { grid-column: 2 / span 4; }
.card:nth-child(6n+4) { grid-column: 6 / span 7; margin-top: 7vw; }
.card:nth-child(6n+5) { grid-column: 1 / span 12; }
.card:nth-child(6n+6) { grid-column: 5 / span 8; }
.card .thumb { position: relative; aspect-ratio: 16 / 10; background: var(--ice); border-radius: 3px; }
.card:nth-child(6n+2) .thumb, .card:nth-child(6n+3) .thumb { aspect-ratio: 4 / 5; }
.card:nth-child(6n+5) .thumb { aspect-ratio: 21 / 9; }
.card .thumb img { position: absolute; inset: 0; opacity: 1; transition: opacity .5s, transform 1.6s var(--ease); }
.card .thumb img.alt { opacity: 0; }
.card .thumb img.alt.on { opacity: 1; }
.card:hover .thumb img { transform: scale(1.06); }
.card h3 { font-weight: 400; font-size: clamp(20px, 2.1vw, 32px); line-height: 1.08; letter-spacing: -.02em; margin-top: 14px; }
.card .mono { display: block; margin-top: 8px; color: var(--mute); }
.card .d { margin-top: 8px; color: var(--mute); font-size: .92em; max-width: 56ch; }

/* DNA Identity */
.dna { padding: clamp(70px, 10vw, 150px) var(--gut); display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; overflow: hidden; }
.dna .txt { grid-column: 1 / span 5; }
.dna .big { font-weight: 300; font-size: clamp(27px, 3.5vw, 54px); line-height: 1.06; letter-spacing: -.025em; margin-top: 18px; }
.dna .pic { grid-column: 7 / span 6; }
.walk { position: absolute; width: clamp(110px, 16vw, 240px); pointer-events: none; will-change: transform; }

/* All projects */
.all { padding: clamp(70px, 10vw, 150px) var(--gut); }
.all h2 { font-weight: 300; font-size: clamp(50px, 12vw, 190px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; }
.all h2 sup { font: 400 clamp(11px, 1vw, 14px)/1 var(--mono); letter-spacing: .04em; color: var(--snow); vertical-align: top; margin-left: 8px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 clamp(24px, 4vw, 54px); }
.filters button[aria-pressed="true"] { background: var(--hot); border-color: var(--hot); color: var(--dark-text); }
.row { display: grid; grid-template-columns: 56px 1fr minmax(0, 36%) 24px; gap: 16px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line); transition: padding .5s var(--ease), color .3s; }
.row .t { font-size: clamp(20px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.02em; }
.row .m, .row .i { color: var(--mute); }
.row .arr { justify-self: end; opacity: 0; transition: opacity .3s, transform .5s var(--ease); transform: translateX(-10px); }
.row .tn { display: none; }
.row:hover { background: var(--hot); padding-inline: 14px; }
.row:hover .m, .row:hover .i { color: inherit; }
.row:hover .arr { opacity: 1; transform: none; }
.row[hidden] { display: none; }

/* Press */
.press { padding: clamp(70px, 10vw, 150px) var(--gut); overflow: hidden; }
.press details { border-top: 1px solid var(--line); }
.press summary { display: grid; grid-template-columns: minmax(0, 30%) 1fr 24px; gap: 16px; padding: 14px 0; align-items: baseline; list-style: none; cursor: pointer; }
.press summary::-webkit-details-marker { display: none; }
.press summary b { font-weight: 400; font-size: clamp(18px, 1.9vw, 28px); line-height: 1.1; letter-spacing: -.015em; }
.press summary i { font-style: normal; justify-self: end; transition: rotate .4s var(--ease); }
.press details[open] summary i { rotate: 45deg; }
.press details p { padding: 0 0 20px; margin-left: calc(30% + 16px); max-width: 66ch; }

/* Project page */
.pj-head { min-height: 74svh; padding: 120px var(--gut) clamp(30px, 4vw, 54px); display: flex; flex-direction: column; justify-content: flex-end; }
.back { align-self: flex-start; margin-bottom: auto; }
.pj-head h1 { font-weight: 300; font-size: clamp(38px, 7.2vw, 112px); line-height: .98; letter-spacing: -.035em; margin-top: 40px; max-width: 13ch; }
.pj-info { padding: 20px var(--gut) clamp(40px, 6vw, 86px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.pj-info .meta { grid-column: 1 / span 4; display: grid; gap: 14px; align-content: start; border-top: 1px solid var(--line); padding-top: 14px; }
.pj-info .meta .mono { display: block; color: var(--mute); margin-bottom: 2px; }
.pj-info .txt { grid-column: 6 / span 7; border-top: 1px solid var(--line); padding-top: 14px; font-size: clamp(18px, 1.75vw, 27px); line-height: 1.25; letter-spacing: -.012em; }
.pj-info .txt p + p { margin-top: .8em; }
.gal { padding: 0 var(--gut) clamp(50px, 7vw, 100px); display: grid; gap: 12px; }
.gal .clip { background: var(--ice); border-radius: 3px; }
.gal img { height: auto; object-fit: contain; }
.next { display: block; padding: clamp(50px, 8vw, 110px) var(--gut); border-top: 1px solid var(--line); transition: background .4s, color .4s; }
.next:hover { background: var(--hot); color: var(--dark-text); }
.next .mono { color: inherit; opacity: .6; }
.next b { display: block; margin-top: 14px; font-weight: 300; font-size: clamp(36px, 7.4vw, 116px); line-height: .98; letter-spacing: -.035em; }
.prev-link { display: block; padding: 16px var(--gut); color: var(--mute); border-top: 1px solid var(--line); }
.prev-link:hover { color: var(--snow); }

/* Studio and legal */
.studio-body { padding: 30px var(--gut) clamp(60px, 9vw, 130px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.studio-body > * { grid-column: 5 / span 7; }
.studio-body p { font-size: clamp(19px, 2vw, 30px); line-height: 1.2; letter-spacing: -.015em; margin-top: .9em; }
.studio-body h2 { grid-column: 1 / span 12; font-weight: 300; font-size: clamp(34px, 5.8vw, 90px); line-height: 1; letter-spacing: -.03em; margin-top: clamp(50px, 7vw, 100px); }
.studio-body figure { margin-top: 30px; }
.studio-body figure img { margin: auto; }
.studio-body ul { padding: 0; list-style: none; margin-top: 16px; }
.studio-body li { border-top: 1px solid var(--line); padding: 12px 0; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.2; }
.legal { padding: 30px var(--gut) 80px; }
.legal > * { max-width: 760px; }
.legal h2, .legal h3 { font-weight: 400; margin-top: 1.6em; letter-spacing: -.01em; }
.legal p, .legal li { margin-top: .7em; color: var(--mute); }

/* Footer */
.foot { background: var(--hot); color: var(--dark-text); padding: clamp(46px, 7vw, 96px) var(--gut) var(--gut); border-radius: 22px 22px 0 0; overflow: hidden; }
.foot h2 { font-weight: 300; font-size: clamp(66px, 18vw, 300px); line-height: .84; letter-spacing: -.055em; margin-left: -.03em; text-transform: uppercase; }
.foot-a { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: clamp(22px, 3vw, 40px) 0 clamp(50px, 7vw, 100px); font-size: clamp(18px, 1.7vw, 25px); line-height: 1.15; }
.mail { display: inline-grid; place-items: center; text-align: center; width: 118px; height: 118px; background: var(--dark-text); color: var(--hot); font: 500 15px/1.05 var(--sans); border-radius: 56% 44% 48% 52% / 44% 54% 46% 56%; animation: blob 7s ease-in-out infinite alternate; }
.addr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .45); }
.addr .mono { display: block; margin-bottom: 8px; }
.addr a { text-decoration: underline; text-underline-offset: 3px; }
.note { max-width: 46ch; margin-top: clamp(30px, 4vw, 60px); }
.base { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: clamp(34px, 5vw, 70px); }
.base a:hover { text-decoration: underline; }

/* Custom cursor */
#cur { position: fixed; left: 0; top: 0; z-index: 45; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--hot); pointer-events: none; box-shadow: 0 0 0 1px rgba(8, 11, 18, .7); display: none; place-items: center; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease); }
#cur span { opacity: 0; color: var(--dark-text); white-space: nowrap; transition: opacity .2s; }
#cur.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
#cur.big span { opacity: 1; }
@media (hover: hover) and (pointer: fine) { #cur { display: grid; } }

.rv { opacity: 0; transform: translateY(26px); transition: opacity 1s, transform 1.2s var(--ease); }
.rv.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  nav .pill:not(.pill-hot):nth-child(1) { display: inline-flex; }
  .pill { padding: 7px 10px; min-height: 34px; }
  .lang { display: none; }
  #hd { padding-block: 12px; }
  .logo img { width: 112px; }
  .hero-top { top: 74px; }
  .cross-row { display: none; }
  .hero h1 .r { text-align: left; }
  .hero-foot { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-foot .act { align-self: flex-start; }
  .state h2, .state .col, .feature .txt, .feature .pic, .dna .txt, .dna .pic, .pj-info .meta, .pj-info .txt, .studio-body > * { grid-column: 1 / -1; }
  .stage { width: auto; right: var(--gut); bottom: calc(var(--gut) + 96px); }
  .stage-img { width: 84px; bottom: var(--gut); right: var(--gut); padding: 5px; }
  .disc { height: 300vh; }
  .sel-grid .card { grid-column: 1 / -1 !important; margin-top: 0 !important; }
  .sel-grid .card .thumb { aspect-ratio: 16 / 10 !important; }
  .row { grid-template-columns: 76px 1fr; align-items: center; gap: 4px 14px; }
  .row .tn { display: block; grid-row: span 2; width: 76px; height: 76px; object-fit: cover; background: var(--ice); border-radius: 3px; }
  .row .i, .row .arr { display: none; }
  .press summary { grid-template-columns: 1fr 20px; }
  .press summary .mono { grid-column: 1 / -1; }
  .press details p { margin-left: 0; }
  .addr { grid-template-columns: 1fr; gap: 26px; }
  .dna .pic { margin-top: 20px; }
  .foot .walk { top: 190px !important; right: 2% !important; width: 104px; }
}
.still *, .still *::before, .still *::after { animation: none !important; transition-duration: .01ms !important; }
.still .disc { height: auto; }
.still .disc-pin { position: relative; height: auto; display: block; }
.still .disc-bar { position: static; margin-bottom: 30px; }
.still .stage, .still .stage-img { position: static; opacity: 1; transform: none; width: auto; margin-bottom: 24px; }
.still .stage-img { max-width: 360px; }
.still .w { opacity: 1; }
.still .clip { clip-path: none; }
.still .rv { opacity: 1; transform: none; }
.motion-btn { text-decoration: underline; text-underline-offset: 3px; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; }

/* The brain's choice of three design fields */
.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.links path { fill: none; stroke: var(--snow); stroke-width: 1; opacity: .3; transition: opacity .5s; }
.links path.on { opacity: 1; stroke-width: 1.5; }
.stage-img { left: auto; padding: 0; border: 0; background: none; cursor: pointer; width: min(30vw, 43vh); opacity: .42; transform: none; transition: opacity .5s, transform .9s var(--ease); }
.stage-img:hover { opacity: .85; }
.stage-img.on { opacity: 1; transform: scale(1.05); }
.stage-img.g0 { left: 2%; right: auto; top: 11%; bottom: auto; }
.stage-img.g1 { right: 2%; top: 11%; bottom: auto; }
.stage-img.g2 { right: 2%; bottom: 1.5%; }
@media (max-width: 860px) {
  .stage { width: auto; bottom: calc(var(--gut) + 8px); right: var(--gut); padding-right: 0; }
  .stage p { font-size: 15px; }
  .stage-img, .stage-img.g0, .stage-img.g1, .stage-img.g2 { top: 41%; bottom: auto; right: auto; width: 30vw; padding: 0; }
  .stage-img.g0 { left: 2.5%; }
  .stage-img.g1 { left: 35%; }
  .stage-img.g2 { left: 67.5%; }
  .stage-img.on { transform: scale(1.08); }
}
.still .links { display: none; }
.still .stage-img { display: block; position: static; opacity: 1; max-width: 300px; transform: none; }

/* A soft light halo keeps small text readable over dark rock */
.state .col p, .stage p, .stage .n, .disc-bar, .hero-foot p, .hero-foot .mono, .hero-top, .feature .txt p, .cta small, .card .d, .card .mono, .sec-head, .row .m, .row .i, .press details p, .press .lab, .dna .big, .pj-info, .studio-body p, .studio-body li, .legal { text-shadow: 0 0 10px rgba(226, 229, 234, .9), 0 0 2px rgba(226, 229, 234, .75); }

/* Design definitions on the network nodes */
#terms { position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.term { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: clamp(9.5px, .78vw, 11.5px); color: var(--snow); opacity: 0; transition: opacity .5s; will-change: transform; text-shadow: 0 0 8px rgba(232, 235, 239, .95), 0 0 2px rgba(232, 235, 239, .9); }
.term.on { opacity: 1; }
.term.head { background: var(--hot); padding: 3px 7px; border-radius: 99px; font-weight: 500; text-shadow: none; }
.term.line { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: clamp(12px, 1.05vw, 15px); font-style: italic; }

/* Projects: list on the left, monolith and its named lines on the right */
.all h2 { font-size: clamp(50px, 8.6vw, 142px); }
.term.proj { white-space: normal; width: max-content; max-width: 190px; line-height: 1.25; }
.term.proj.on { pointer-events: auto; cursor: pointer; }
.term.proj:hover { background: var(--hot); text-shadow: none; }
.term.proj.head { max-width: 230px; border-radius: 10px; }
@media (min-width: 861px) {
  .all > * { max-width: 54vw; }
  .row { grid-template-columns: 44px 1fr minmax(0, 34%) 20px; }
}
@media (max-width: 860px) {
  .all { padding-top: 96vw; }
}

/* A keyword sits on its node: the dot marks the connection point */
.term { opacity: 0; }
.term.on { opacity: .62; }
.term.on.active, .term.on.proj { opacity: 1; }
.term.active { font-weight: 500; }
.term::before { content: ""; position: absolute; top: 50%; left: -12px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--snow); box-shadow: 0 0 0 2px rgba(232, 235, 239, .9); }
.term.to-left::before { left: auto; right: -12px; }
.term.active::before, .term.proj.head::before { background: var(--hot); box-shadow: 0 0 0 1.5px var(--snow); }
.term { transition: opacity .8s ease; }
.term.head { color: var(--dark-text) !important; filter: none !important; }
.term::before { background: currentColor; }
.term.active::before, .term.proj.head::before { background: var(--hot); }

/* Chooser: your white tree on a deeper dusk */
.disc-pin { --snow: #f1f3f7; --mute: #d5dae3; --line: rgba(241, 243, 247, .36); color: var(--snow); }
.disc-pin .stage p, .disc-pin .stage .n, .disc-pin .disc-bar { text-shadow: 0 1px 10px rgba(20, 24, 32, .55); }
.disc-pin .pill:hover { background: #f1f3f7; border-color: #f1f3f7; color: #080b12; }
.disc-pin .links path { stroke: #f1f3f7; }
.tree { position: absolute; inset: 0; pointer-events: none; }
.tree svg { position: absolute; left: 0; top: 2vh; width: 100%; height: 96%; overflow: visible; }
.tree-g { pointer-events: auto; cursor: pointer; opacity: .5; transition: opacity .6s ease, filter .6s ease; outline: none; }
.tree-g path { transform-box: fill-box; transform-origin: center; will-change: transform; }
.tree-g.active { opacity: 1; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .15)) drop-shadow(0 0 7px rgba(255, 255, 255, .5)); }
.tree-g:hover, .tree-g:focus-visible { opacity: 1; }
@media (min-width: 861px) {
  .disc-pin .stage-img { display: none; }
  .disc-pin .stage { width: min(27%, 390px); }
  .disc-pin .stage h3 { font-size: clamp(22px, 2.3vw, 36px); }
}
@media (max-width: 860px) { .tree { display: none; } }
.still .tree { position: relative; height: 62vw; }

/* The gaps where the monolith and your graphics pass */
.inter { height: 190vh; pointer-events: none; }
#orbit-back, #orbit-front { position: fixed; inset: 0; opacity: 0; overflow: hidden; pointer-events: none; }
#orbit-back { z-index: 0; }
#orbit-front { z-index: 3; }
.orbiter { position: absolute; left: 0; top: 0; display: block; transform-origin: center; will-change: transform; visibility: hidden; }
.orbiter img { width: 100%; height: auto; pointer-events: none; }
.still .inter { display: none; }

/* Lines from the moving network to the graphics */
#bridge { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .5s; }
#bridge path { fill: none; stroke: #0a0e16; }
#bridge .b-all { stroke-width: .7; opacity: .32; }
#bridge .b-on { stroke-width: 1; opacity: .75; }
#bridge .b-dots { fill: #abfc50; stroke: #0a0e16; stroke-width: .8; }
#bridge.on-dark path { stroke: #f1f3f7; }
#bridge.on-dark .b-dots { stroke: #f1f3f7; }

/* On phones the chooser's graphics sit on the dusk, so their black artwork turns white */
@media (max-width: 860px) { .disc-pin .stage-img img { filter: invert(1) hue-rotate(180deg); } }

#snow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 31; pointer-events: none; }
.row .tn { border-radius: 42% 58% 54% 46% / 52% 44% 56% 48%; animation: organic 12s ease-in-out infinite; }


.row .tn { animation: none; border-radius: 0; clip-path: polygon(12% 2%, 74% 0, 98% 18%, 92% 66%, 100% 92%, 50% 100%, 8% 90%, 0 38%); }
.row:nth-child(3n+1) .tn { clip-path: polygon(30% 0, 88% 8%, 100% 40%, 84% 78%, 70% 100%, 16% 94%, 2% 62%, 10% 20%); }
.row:nth-child(3n+2) .tn { clip-path: polygon(4% 14%, 52% 0, 94% 6%, 100% 50%, 80% 92%, 38% 100%, 6% 84%, 14% 44%); }

/* Line from the hovered project row to the monolith */
#rowlink { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; pointer-events: none; }
#rowlink path { fill: none; stroke: #080b12; stroke-width: 1.4; }
#rowlink circle { fill: #abfc50; stroke: #080b12; stroke-width: 1.2; }

/* Zooming into the monolith: the page steps aside, then the project page opens out of the image */
body.zooming #view, body.zooming #terms, body.zooming #rowlink, body.zooming #bridge { opacity: 0 !important; transition: opacity .45s ease; pointer-events: none; }
body.zoom-open #view { animation: zoom-open .8s .22s both ease-out; }
@keyframes zoom-open { from { opacity: 0; } to { opacity: 1; } }

/* Project images: built from particles (build.js), ending in a sharp image with a grainy edge */
#build { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.pb { position: relative; }
.pb:not(.ready) { min-height: 46vw; }
.pb img { display: block; width: 100%; height: auto; }
.pb.live img { opacity: 0; }

/* The people looking up on the contact page, animated one by one */
.crowd img { display: block; width: 100%; height: auto; }
.crowd .person { position: absolute; inset: 0; will-change: transform; }

/* Clients: black logos on green, taken over from the original site */
.clients{position:relative;overflow:hidden;isolation:isolate;margin:0;background:rgba(171,252,80,.9);color:#000;padding:clamp(48px,6vw,96px) var(--gut) clamp(64px,8vw,128px)}
.clients::before,.clients::after{content:"";position:absolute;top:-6%;left:0;height:112%;z-index:-1;pointer-events:none;will-change:transform;opacity:.9}
.clients::before{width:calc(100% + 1600px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 260C200 190 600 190 800 260S1400 330 1600 260V1000H0Z' fill='%23A3F247'/%3E%3Cpath d='M0 540C266 470 533 470 800 540S1333 610 1600 540V1000H0Z' fill='%239BE840'/%3E%3Cpath d='M0 800C200 760 600 760 800 800S1400 840 1600 800V1000H0Z' fill='%2394DF3A'/%3E%3C/svg%3E") repeat-x 0 0/1600px 100%;animation:sdFootA 95s linear infinite,sdSwellA 13s ease-in-out infinite alternate}
.clients::after{width:calc(100% + 1200px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1000' viewBox='0 0 1200 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 150C150 95 450 95 600 150S1050 205 1200 150V320C1050 375 750 375 600 320S150 265 0 320Z' fill='%23C4FF7E' fill-opacity='.55'/%3E%3Cpath d='M0 640C200 585 400 585 600 640S1000 695 1200 640V760C1000 815 800 815 600 760S200 705 0 760Z' fill='%238ED636' fill-opacity='.4'/%3E%3C/svg%3E") repeat-x 0 0/1200px 100%;animation:sdFootB 70s linear infinite,sdSwellB 10s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.clients::before,.clients::after{animation:none}}
.clients .lab{display:block;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 clamp(24px,3vw,48px);max-width:none;line-height:1.45}
.cgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr))}
.cgrid>li{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;min-width:0}
.cgrid>li>img{display:block;width:62%;height:44%;max-width:none;object-fit:contain;background:none!important}
.cgrid>li.t>img{filter:url(#sdClT)}
.cgrid>li.s>img{filter:brightness(0)}
.cgrid>li.im>img{filter:url(#sdClR)}
.cgrid>li.im.m>img{filter:url(#sdClM)}
.cgrid>li.more{grid-column:2/-1;aspect-ratio:auto;justify-content:flex-start;padding-left:4%;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.35;color:#000;text-align:left}
@media(max-width:900px){.cgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:480px){.cgrid>li{aspect-ratio:5/4}.cgrid>li.more{font-size:10px;letter-spacing:.08em}}
@keyframes sdFootA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1600px,0,0)}}
@keyframes sdFootB{from{transform:translate3d(-1200px,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes sdSwellA{from{translate:0 -4vh}to{translate:0 4vh}}
@keyframes sdSwellB{from{translate:0 5vh}to{translate:0 -5vh}}
.still .clients::before, .still .clients::after { animation: none; }

/* The three field graphics float and grow on hover */
.tree-g { transform-box: view-box; will-change: transform; }
@media (max-width: 860px) {
  .disc-pin .stage-img { animation: field-float 7s ease-in-out infinite alternate; }
  .disc-pin .stage-img.g1 { animation-duration: 8.5s; animation-delay: -3s; }
  .disc-pin .stage-img.g2 { animation-duration: 6.2s; animation-delay: -5s; }
}
@keyframes field-float { from { translate: -3px 3px; rotate: -.8deg; } to { translate: 3px -4px; rotate: .8deg; } }
.still .disc-pin .stage-img { animation: none; }

/* Next project: a rounded field like the contact field, running on underneath it so green fills its corners on hover */
.next { position: relative; border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; margin-bottom: -22px; padding-bottom: calc(clamp(50px, 8vw, 110px) + 22px); background: rgba(255, 255, 255, .1); }
.next:hover { border-color: var(--hot); }
.next + .foot, .foot { position: relative; z-index: 1; }

/* Letter copies used by the graphics' text animation */
.tree-ghost { pointer-events: none; }

/* The node network: its own canvas above the brain, always at full resolution */
#net { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Words flowing out of a field graphic to the nodes */
#flow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
#flow path { fill: #f1f3f7; transition: fill .25s; }
#flow path.flow-dark { fill: #080b12; }
.flow-pill { fill: var(--hot); opacity: 0; }
.still #flow { display: none; }

/* Header on the dark chooser: white logo and menu */
#hd .pill, #hd .lang { transition: color .4s, border-color .4s, background .4s; }
#hd.dusk { color: #f1f3f7; }
#hd.dusk .logo img { filter: brightness(0) invert(1); }
#hd.dusk .pill:not(.pill-hot) { color: #f1f3f7; border-color: #f1f3f7; }
#hd.dusk .pill:not(.pill-hot):hover { background: #f1f3f7; color: #080b12; }
#hd.dusk .lang, #hd.dusk .lang a { color: #f1f3f7; }

/* A moved brain under the cursor takes the pointer from the graphics */
.tree.brain-first .tree-g { pointer-events: none; }

/* Chooser: connecting lines one step quieter */
#bridge.on-dark .b-all { opacity: .26; }
#bridge.on-dark .b-on { opacity: .66; }

/* The logo is always there and always clickable; only the menu slides away while scrolling down */
#hd, #hd.hide { transform: none; }
#hd nav { transition: transform .5s var(--ease), opacity .3s; }
#hd.hide nav { transform: translateY(-160%); opacity: 0; pointer-events: none; }

/* Invitation to move the brain */
#brain-hint { position: fixed; left: 0; top: 0; z-index: 3; display: grid; justify-items: center; gap: 4px; text-align: center; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .9s ease; color: #080b12; }
#brain-hint.on { opacity: 1; }
#brain-hint b { font-weight: 400; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: -.01em; }
#brain-hint span { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
@media (max-width: 860px) { #brain-hint { display: none; } }

/* The invitation as a bold green plate, in the green of the site */
#brain-hint { background: var(--hot); color: #080b12; padding: 12px 24px 13px; border-radius: 999px; gap: 5px; box-shadow: 0 6px 26px rgba(8, 11, 18, .18); }
#brain-hint b { font-size: clamp(21px, 2vw, 30px); line-height: 1.05; letter-spacing: -.02em; }
#brain-hint span { font-size: 11.5px; opacity: .85; }

/* Sound switch in the menu: three small bars that move while the sound plays */
.snd { display: inline-flex; align-items: flex-end; gap: 2px; height: 34px; padding: 0 2px 11px; margin-left: 8px; background: none; border: 0; color: inherit; cursor: pointer; opacity: .55; transition: opacity .3s; }
.snd:hover, .snd.on { opacity: 1; }
.snd i { display: block; width: 2px; height: 3px; background: currentColor; transform-origin: bottom; }
.snd.on i { height: 11px; animation: snd-bar 1.5s ease-in-out infinite alternate; }
.snd.on i:nth-child(2) { animation-duration: 1.1s; animation-delay: -.5s; }
.snd.on i:nth-child(3) { animation-duration: 1.8s; animation-delay: -.9s; }
.snd .mono { margin-left: 5px; font-size: 10.5px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
@keyframes snd-bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.still .snd.on i { animation: none; }
@media (max-width: 860px) { .snd .mono { display: none; } }

/* Clients: the same field as Next project. Rounded top and a light tint at rest, green on hover,
   running on underneath the contact field so green fills its corners */
.clients { border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; margin-bottom: -22px; padding-bottom: calc(clamp(64px, 8vw, 128px) + 22px); background: rgba(255, 255, 255, .1); transition: background .4s, border-color .4s; }
.clients::before, .clients::after { display: none; }
.clients:hover { background: var(--hot); border-color: var(--hot); }

/* The logo steps back while text passes under it */
.logo { transition: opacity .3s ease; }
.logo.dim { opacity: .1; }
.logo.dim:hover { opacity: 1; }

/* The logo: 15% larger, breathing slowly with a faint glow in its own colour, never green */
.logo img, #hd .logo img { width: clamp(161px, 17.25vw, 242px); opacity: calc(.84 + var(--beat, 1) * .16); filter: brightness(0) drop-shadow(0 0 calc(var(--beat, 0) * 7px) rgba(0, 0, 0, calc(var(--beat, 0) * .22))); }
#hd.dusk .logo img { filter: brightness(0) invert(1) drop-shadow(0 0 calc(var(--beat, 0) * 7px) rgba(255, 255, 255, calc(var(--beat, 0) * .4))); }
@media (max-width: 860px) {
  #hd .logo { flex: 0 0 auto; }
  .logo img, #hd .logo img { width: 129px; }
}
/* On phones all three menu points stay: Projects, Studio and Contact */

/* The link to the German site is always there, also on phones */
@media (max-width: 860px) {
  #hd .lang { display: inline-flex; margin-left: 2px; font-size: 11px; }
  #hd .lang b, #hd .lang .tour-sep { display: none; }
  #hd .lang a { opacity: 1; }
}
@media (max-width: 480px) { #hd nav { gap: 8px; } #hd nav .pill sup { display: none; } }

/* A soft 15% black glow keeps the white graphics, words and nodes readable on light ground */
.tree-g { filter: drop-shadow(0 0 5px rgba(0, 0, 0, .15)); }
#bridge.on-dark { filter: drop-shadow(0 0 3px rgba(0, 0, 0, .15)); }
@media (max-width: 860px) { .disc-pin .stage-img img { filter: invert(1) hue-rotate(180deg) drop-shadow(0 0 5px rgba(0, 0, 0, .15)); } }

/* The water layer sits directly on the landscape, below everything else */
#water { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; visibility: hidden; }

/* Logo: another 10% larger; the image's built-in margin (3.33% of its width) is pulled back, so its first letter stands exactly on the text edge */
#hd { --logo-w: clamp(177px, 18.98vw, 266px); }
.logo img, #hd .logo img { width: var(--logo-w); margin-left: calc(var(--logo-w) * -.0333); }
@media (max-width: 860px) { #hd { --logo-w: 142px; } }

/* The image keeps its full size although its margin is pulled back. On a phone the header closes up, so the language link stays on screen */
.logo img, #hd .logo img { max-width: none; }
@media (max-width: 480px) {
  #hd { gap: 10px; }
  #hd nav { gap: 6px; }
  .snd { margin-left: 0; }
}

/* Phone chooser: Industrial above the brain, Packaging and Communication beneath it */
@media (max-width: 860px) {
  .disc-pin .stage-img, .disc-pin .stage-img.g0, .disc-pin .stage-img.g1, .disc-pin .stage-img.g2 { width: min(36vw, 17vh); }
  .disc-pin .stage-img.g0 { top: 116px; left: calc(50% - min(18vw, 8.5vh)); right: auto; }
  .disc-pin .stage-img.g1 { top: 51%; left: 6%; right: auto; }
  .disc-pin .stage-img.g2 { top: 51%; left: auto; right: 6%; }
}
.still .disc-pin .stage-img, .still .disc-pin .stage-img.g0, .still .disc-pin .stage-img.g1, .still .disc-pin .stage-img.g2 { width: auto; }

/* Short phones: the lower graphics stay clear of the text */
@media (max-width: 860px) and (max-height: 720px) {
  .disc-pin .stage-img, .disc-pin .stage-img.g0, .disc-pin .stage-img.g1, .disc-pin .stage-img.g2 { width: min(36vw, 15vh); }
  .disc-pin .stage-img.g0 { left: calc(50% - min(18vw, 7.5vh)); }
  .disc-pin .stage-img.g1, .disc-pin .stage-img.g2 { top: 46%; }
}

/* The chooser's ink follows the ground: white over the dark water, black over beige */
.disc-pin { --ink: #fff; --inv: 1; }
.tree .tree-g path { fill: var(--ink); }
.tree .tree-g path.cls-2 { stroke: var(--ink); }
.disc-pin.on-beige .stage p, .disc-pin.on-beige .stage .n, .disc-pin.on-beige .disc-bar { text-shadow: none; }
.disc-pin.on-beige .stage h3 { text-shadow: none; }
.disc-pin.on-beige .tree-g.active { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .35)); }
@media (max-width: 860px) { .disc-pin .stage-img img { filter: invert(var(--inv)) hue-rotate(calc(var(--inv) * 180deg)) drop-shadow(0 0 5px rgba(0, 0, 0, .15)); } }

/* Moving around the three monoliths */
html.three-on { cursor: grab; touch-action: pan-y; }
html.three-on body { touch-action: pan-y; }
html.ringing, html.ringing * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
#ring-hint { position: fixed; left: 50%; bottom: 104px; z-index: 3; transform: translateX(-50%); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #080b12; opacity: 0; transition: opacity .6s; pointer-events: none; }
#ring-hint.on { opacity: .7; }

/* Scroll cue: a thin line at the bottom of the screen with a green drop running down it */
#scroll-cue { position: fixed; left: 50%; bottom: 18px; z-index: 3; display: grid; justify-items: center; gap: 8px; transform: translateX(-50%); color: #080b12; opacity: 0; transition: opacity .6s; pointer-events: none; }
#scroll-cue.on { opacity: 1; }
#scroll-cue span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
#scroll-cue i { position: relative; display: block; width: 1px; height: 52px; background: rgba(8, 11, 18, .28); overflow: visible; }
#scroll-cue i::after { content: ""; position: absolute; left: -3.5px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 1px #080b12; animation: scroll-drop 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes scroll-drop {
  0% { transform: translateY(-4px) scale(.5); opacity: 0; }
  18% { transform: translateY(0) scale(1); opacity: 1; }
  78% { transform: translateY(44px) scale(1); opacity: 1; }
  100% { transform: translateY(48px) scale(.5); opacity: 0; }
}
.still #scroll-cue i::after { animation: none; }
@media (max-width: 860px) { #scroll-cue i { height: 38px; } #scroll-cue { bottom: 12px; gap: 6px; } @keyframes scroll-drop { 0% { transform: translateY(-4px) scale(.5); opacity: 0; } 18% { transform: translateY(0) scale(1); opacity: 1; } 78% { transform: translateY(30px) scale(1); opacity: 1; } 100% { transform: translateY(34px) scale(.5); opacity: 0; } } #ring-hint { bottom: 82px; } }

/* On the start page the middle is taken by text, so the cue stands in the free space beside the button */
#scroll-cue.at-start { left: 77%; }

/* The underwater scene's small headline */
.disc-head { position: absolute; top: 118px; left: 0; right: 0; z-index: 2; text-align: center; font-weight: 300; font-size: clamp(18px, 1.7vw, 25px); line-height: 1.15; letter-spacing: -.015em; color: var(--snow); text-shadow: 0 1px 10px rgba(20, 24, 32, .55); pointer-events: none; }
.disc-pin.on-beige .disc-head { text-shadow: none; }
.still .disc-head { position: static; text-align: left; margin-bottom: 24px; }
@media (max-width: 860px) {
  .disc-head { top: 114px; padding: 0 var(--gut); font-size: 16px; }
  .disc-pin .stage-img.g0 { top: 142px; }
}

/* The line under "Let's bring your vision to life" no longer inherits the headline's tight spacing */
.cta small { letter-spacing: 0; line-height: 1.35; }
/* The questions on the nodes around the monolith */
.term.ask { white-space: normal; width: max-content; max-width: 220px; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.25; color: #080b12; text-shadow: 0 0 8px rgba(247, 247, 242, .95), 0 0 2px rgba(247, 247, 242, .9); }
.term.ask.on { opacity: 1; }
.term.ask { padding: 5px 10px; border-radius: 10px; background: rgba(171, 252, 80, 0); transition: opacity .8s ease, background .7s ease, text-shadow .7s ease; }
.term.ask-hot { background: var(--hot); text-shadow: none; }
.term.ask-mail { text-decoration: underline; text-underline-offset: 3px; }
.term.ask-mail:focus-visible { outline: 2px solid #080b12; outline-offset: 2px; }
@media (max-width: 860px) { .term.ask { max-width: 138px; font-size: 12.5px; } }

/* Preview images in the shape of a flat monolith */
.card .thumb, .pic.clip { background: none; border-radius: 0; }
.card .thumb.clip, .pic.clip { clip-path: var(--mono-start, inset(100% 0 0 0)); overflow: hidden; }
.card .thumb.clip.in, .pic.clip.in { clip-path: var(--mono, inset(0)); }
.still .card .thumb.clip, .still .pic.clip { clip-path: var(--mono, none); }
.row .tn, .row:nth-child(n) .tn { animation: none; clip-path: polygon(9% 0, 52% 3%, 90% 0, 100% 11%, 97% 48%, 100% 86%, 86% 100%, 46% 97%, 13% 100%, 0 89%, 3% 44%, 0 12%); }
.row:nth-child(3n+1) .tn { clip-path: polygon(18% 0, 47% 2%, 95% 0, 100% 6%, 96% 56%, 100% 80%, 92% 100%, 58% 97%, 6% 100%, 0 94%, 4% 40%, 0 20%); }
.row:nth-child(3n+2) .tn { clip-path: polygon(6% 0, 60% 4%, 80% 0, 100% 18%, 97% 40%, 100% 92%, 94% 100%, 40% 97%, 20% 100%, 0 82%, 3% 58%, 0 7%); }

/* Selected projects float around their monoliths */
.term.seltag { font-size: clamp(10px, .82vw, 12px); color: #080b12; }
.term.seltag.on { opacity: .95; }

/* The DNA book as a 3D monolith: the frame stays only as the area that answers the cursor */
.dna-3d .pic.clip, .dna-3d .pic.clip.in { clip-path: none; background: none; overflow: visible; cursor: pointer; outline: none; min-height: 52vh; }
.dna-3d .pic img { visibility: hidden; }
#dna-view { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; background: rgba(247, 247, 242, .96); opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; cursor: zoom-out; }
#dna-view.on { opacity: 1; visibility: visible; }
#dna-view img { max-width: 92vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; }
#dna-view span { position: absolute; top: 24px; right: var(--gut); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #080b12; }

/* The green behind the clients lets the landscape through a little */
.clients:hover { background: rgba(171, 252, 80, .8); border-color: rgba(171, 252, 80, .8); }

/* The three design field graphics in the underwater scene, 20% smaller */
.tree svg { left: 16%; top: calc(11vh + 76px); width: 80%; height: 76.8%; }
@media (max-width: 860px) {
  .disc-pin .stage-img, .disc-pin .stage-img.g0, .disc-pin .stage-img.g1, .disc-pin .stage-img.g2 { width: min(28.8vw, 13.6vh); }
  .disc-pin .stage-img.g0 { left: calc(50% - min(14.4vw, 6.8vh)); }
}
@media (max-width: 860px) and (max-height: 720px) {
  .disc-pin .stage-img, .disc-pin .stage-img.g0, .disc-pin .stage-img.g1, .disc-pin .stage-img.g2 { width: min(28.8vw, 12vh); }
  .disc-pin .stage-img.g0 { left: calc(50% - min(14.4vw, 6vh)); }
}
.still .tree svg { left: 0; top: 2vh; width: 100%; height: 96%; }
.still .disc-pin .stage-img, .still .disc-pin .stage-img.g0, .still .disc-pin .stage-img.g1, .still .disc-pin .stage-img.g2 { width: auto; }

/* Over the dark water the scroll cue is white */
#scroll-cue { transition: opacity .6s, color .6s; }
#scroll-cue.on-water { color: #f1f3f7; }
#scroll-cue.on-water i { background: rgba(241, 243, 247, .4); }
#scroll-cue.on-water i::after { box-shadow: 0 0 0 1px #f1f3f7; }

/* Over beige the large design field graphics shrink and move closer to the monoliths */
.tree svg { transform-origin: 50% 100%; transform: translate(var(--tree-x, 0), var(--tree-y, 0)) scale(var(--tree-s, 1)); }
.still .tree svg { transform: none; }

.disc-pin .stage { translate: 0 var(--stage-y, 0); }
.still .disc-pin .stage { translate: none; }

/* One dark monolith that the abilities flow into */
.inter.abil-sec { height: 1040vh; }
#abil { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; color: #080b12; }
.abil-item { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform, opacity; }
.abil-item .mono { display: block; font-size: 11px; letter-spacing: .08em; }
.abil-item h3 { margin: 4px 0 12px; font-weight: 300; font-size: clamp(14px, 1.7vw, 26px); line-height: 1.05; letter-spacing: -.025em; transition: opacity .5s; }
.abil-item .mono { transition: opacity .5s; }
.abil-item.going h3, .abil-item.going .mono { opacity: 0; }
.abil-item svg { display: block; width: 100%; height: auto; overflow: visible; }
.abil-item path { fill: #080b12; transform-box: fill-box; transform-origin: center; will-change: transform; }
.abil-item path.cls-2 { stroke: #080b12; }

.abil-tag { position: absolute; left: 0; top: 0; font-size: clamp(10px, .86vw, 12.5px); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: #080b12; background: var(--hot); padding: 3px 7px; border-radius: 99px; opacity: 0; will-change: transform, opacity; }

/* On phones the large tree stays invisible but measurable, so the abilities can use its drawings */
@media (max-width: 860px) { .tree { display: block; visibility: hidden; } .tree * { visibility: hidden !important; pointer-events: none !important; } .abil-item svg, .abil-item svg * { visibility: inherit; } }
.still .tree { display: none; }

#bridge.abil-web .b-on { stroke-width: .8; opacity: .9; }
#bridge.abil-web .b-dots { stroke-width: .6; }

/* The headline under the finished golden monolith */
.abil-usp { position: absolute; left: 0; top: 0; width: 100%; padding: 0 var(--gut); text-align: center; font-weight: 300; font-size: clamp(15px, 2vw, 30px); line-height: 1.12; letter-spacing: -.02em; color: #080b12; text-shadow: 0 0 10px #F7F7F2, 0 0 3px #F7F7F2; opacity: 0; transition: opacity .5s ease; will-change: transform; }
.abil-usp.on { opacity: var(--leave, 1); transition: opacity 1.2s ease .25s; }
.abil-usp em { font-style: italic; }

/* The Let's talk blob sits in the horizontal middle between the headline and the page edge */
@media (min-width: 700px) {
  .cta { display: grid; grid-template-columns: auto 1fr; column-gap: 0; padding-right: 0; }
  .cta .blob { justify-self: center; }
}

/* The headline under the steel monolith after Let's talk */
#ask-head { position: fixed; left: 0; top: 0; z-index: 3; width: 100%; padding: 0 var(--gut); text-align: center; font-weight: 300; font-size: clamp(17px, 2vw, 30px); line-height: 1.12; letter-spacing: -.02em; color: #080b12; text-shadow: 0 0 10px #F7F7F2, 0 0 3px #F7F7F2; opacity: 0; transition: opacity .5s ease; pointer-events: none; will-change: transform; }
#ask-head.on { opacity: 1; transition: opacity 1s ease .2s; }
#ask-head em { font-style: italic; }


/* The field graphics are gone on the beige ground, only the text stays */
.tree svg, .disc-pin .stage-img img, .disc-pin .links { opacity: var(--tree-o, 1); }
.disc-pin.on-beige .tree, .disc-pin.on-beige .stage-img { pointer-events: none; }

/* The project on the stone stays marked in the selected list */
.row.picked { background: var(--hot); padding-inline: 14px; }
.row.picked .m, .row.picked .i { color: inherit; }

/* The selected list is smaller than the full one, which leaves the monolith free room to be moved around */
@media (min-width: 860px) {
  #selected > * { max-width: 41.4vw; }
  #selected h2 { font-size: clamp(39px, 6.57vw, 109px); }
  #selected .row { padding-block: 12px; gap: 13px; }
  #selected .row .t { font-size: clamp(15px, 1.76vw, 26px); }
  #selected .row .m, #selected .row .i { font-size: 8.5px; }
}

/* Studio page: the tree only supplies the drawings for the abilities; the headline is read from the animation */
.tree-src, .tree-src * { visibility: hidden !important; pointer-events: none !important; }
.sr-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.still .sr-head { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-top: 24px; font-weight: 300; font-size: clamp(34px, 5.8vw, 90px); line-height: 1; }
.still .tree-src { display: none; }
/* The people, cut free of the lettering in the two old graphics */
.crop { position: relative; display: block; overflow: hidden; }
.crop img { position: absolute; max-width: none; height: auto; }
.cropOne { aspect-ratio: 80 / 46.8; }
.cropOne img { width: 125%; left: -10%; top: -98.72%; will-change: transform; }
/* The same picture four times, each showing one figure, so each can move on its own: the skiers shift their weight, the horse walks on the spot, the cyclists balance */
.cropOne .p1 { clip-path: polygon(8% 46.2%, 27.8% 46.2%, 24.3% 58.9%, 21.3% 68%, 20.4% 79.3%, 20.4% 93%, 8% 93%); transform-origin: 16% 75%; animation: people-lean 3.4s ease-in-out infinite alternate; }
.cropOne .p2 { -webkit-mask-image: linear-gradient(to right, #000 34%, transparent 35.2%); mask-image: linear-gradient(to right, #000 34%, transparent 35.2%); clip-path: polygon(27.8% 46.2%, 34.6% 46.2%, 34.6% 50.75%, 35.2% 50.75%, 35.2% 93%, 20.4% 93%, 20.4% 79.3%, 21.3% 68%, 24.3% 58.9%); transform-origin: 26% 78%; animation: people-lean 2.9s ease-in-out -2.1s infinite alternate-reverse; }
.cropOne .p3 { -webkit-mask-image: linear-gradient(to right, transparent 34%, #000 35.2%, #000 47.5%, transparent 48.7%); mask-image: linear-gradient(to right, transparent 34%, #000 35.2%, #000 47.5%, transparent 48.7%); clip-path: polygon(34% 50.75%, 48.7% 50.75%, 48.7% 93%, 34% 93%); transform-origin: 41% 78%; animation: people-walk 1.2s ease-in-out infinite alternate; }
.cropOne .p4 { -webkit-mask-image: linear-gradient(to right, transparent 47.5%, #000 48.7%); mask-image: linear-gradient(to right, transparent 47.5%, #000 48.7%); clip-path: polygon(47.5% 50.75%, 50.75% 50.75%, 50.75% 64.2%, 88% 64.2%, 88% 93%, 47.5% 93%); transform-origin: 60% 85%; animation: people-balance 2.2s ease-in-out -.8s infinite alternate; }
@keyframes people-lean { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
@keyframes people-walk { from { transform: translateY(-1%) rotate(-1.1deg); } to { transform: translateY(1%) rotate(1.1deg); } }
@keyframes people-balance { from { transform: translateX(-.8%) rotate(-1.7deg); } to { transform: translateX(.8%) rotate(1.7deg); } }
/* The second group stands in the middle of the valley beside the first headline, which sits 2 cm higher */
.pj-head:has(.cropTwo) { position: relative; }
.cropTwo { position: absolute; left: 39vw; top: 49vh; width: min(20vw, 28.5vh); aspect-ratio: 45 / 60; pointer-events: none; }
@media (min-width: 861px) { .pj-head:has(.cropTwo) > .mono, .pj-head:has(.cropTwo) > h1 { position: relative; top: -76px; } }
@media (max-width: 860px) { .cropTwo { position: relative; left: auto; bottom: auto; width: 62vw; margin: 18px 0 0 auto; } }
.cropTwo img { width: 222.2%; left: -104.4%; top: -10%; clip-path: polygon(68% 6%, 92% 6%, 92% 66%, 62% 66%, 62% 52%, 48.8% 52%, 48.8% 28%, 68% 28%); }
/* The people stand right beneath the monolith and centred under it */
.inter + .studio-body { margin-top: -4vh; padding-top: 0; }
.studio-body > .people { grid-column: 4 / span 6; margin: 0 -9.5%; }
@media (max-width: 860px) { .inter + .studio-body { margin-top: 10vh; } .studio-body > .people { grid-column: 1 / -1; } }
/* The brain has the top of the studio page to itself; the monolith only rises once it has faded */
.pj-head + .inter { margin-top: 70vh; }

/* The menu point of the current page */
#hd a[aria-current="page"] { background: var(--hot); border-color: var(--hot); color: #080b12; }

/* The DNA book on the studio page is shown by the monolith standing in its place */
.studio-dna.dna-3d { cursor: pointer; outline: none; }
.studio-dna.dna-3d img { visibility: hidden; }

/* The portrait drawn as smoke by smoke.js; without it the plain image simply stays */
.studio-portrait { position: relative; }
.studio-portrait .smoke { position: absolute; pointer-events: none; }
.studio-portrait.smoke-on img { visibility: hidden; }
/* In the horizontal middle of the page, at its size */
@media (min-width: 861px) { .studio-body > .studio-portrait { grid-column: 1 / -1; justify-self: center; width: 58.33%; } }

/* The vapour around the brain, above it and below the page text */
#nitro { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* The opening statement of the studio text, a headline within the text column so the brain keeps its free column */
.studio-body h2.lead { grid-column: 5 / span 7; font-size: clamp(30px, 3.7vw, 58px); line-height: 1.04; margin-top: clamp(40px, 5vw, 76px); }
@media (max-width: 860px) { .studio-body h2.lead { grid-column: 1 / -1; } }

/* The Mozart × REWE headline, 15% smaller */
.feature h2 { font-size: clamp(32px, 7.225vw, 116px); }

/* The group in the DNA section walks across the valley floor, in the middle below the text and the monolith */
.dna .dna-walk { transform-origin: 50% 100%; width: clamp(126px, 18.4vw, 276px); left: calc(50% - clamp(126px, 18.4vw, 276px) / 2); bottom: 0; top: auto; }
/* Room above the press list for the group to grow into: nothing of it is cut off, and it only ever drifts sideways */
.press { overflow-x: clip; overflow-y: visible; padding-top: calc(clamp(70px, 10vw, 150px) + 150px); }
.press .focus-walk { top: 96px; transform-origin: 50% 100%; }

/* The press list leaves the right side free for the newspaper monolith */
@media (min-width: 861px) { .press .sec-head, .press details { max-width: 50vw; } }

/* The host adds its own badge in the corner; it has no place in the design */
#wixheadless-banner-container, #wixheadless-banner { display: none !important; }

/* DE and EN lead to the classic site; the wild tour is where you are */
#hd .lang { white-space: nowrap; }
@media (max-width: 480px) { #hd nav { gap: 6px; } #hd .lang { margin-left: 0; letter-spacing: 0; } }
@media (max-width: 480px) { #hd nav .pill { padding-left: 7px; padding-right: 7px; } .logo img, #hd .logo img { width: 118px; } }

/* Phones: the brain gets its own space above the headline instead of sinking behind it */
@media (max-width: 859px) { .hero { justify-content: flex-start; padding-top: calc(150px + 52vw); } }
@media (max-width: 859px) {
  #hd::before { content: ''; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none; background: rgba(236, 235, 230, .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
  #hd.dusk::before { background: rgba(20, 60, 70, .3); }
}
/* Phones: two rows in the header, the logo large on top and the whole menu below it */
@media (max-width: 480px) {
  #hd { flex-wrap: wrap; row-gap: 10px; gap: 10px 8px; }
  .logo img, #hd .logo img { width: 168px; }
  #hd nav { flex: 1 0 100%; justify-content: flex-start; gap: 6px; }
  #hd nav .lang { margin-left: auto; }
  .hero-top { top: 128px; }
  .hero { padding-top: calc(182px + 52vw); }
}

/* Touch: the page itself only pans up and down, so a sideways swipe is free to move the forms */
@media (hover: none) { html, body { touch-action: pan-y pinch-zoom; } }

/* Nitrogen vapour over the client logos */
.clients .logo-fog { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* A sideways trackpad swipe moves the forms; it never pulls the page back to the previous site */
html, body { overscroll-behavior-x: none; }