/* Spacefwd staging v4. Built on the live spacefwd.com: Mont Black Italic, #FD0043, #18FFF1, black,
   parallelogram media, outline marquees, diamonds, brackets, grid and diagonal lines. */

@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Mont"; src: url("/fonts/mont-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mont"; src: url("/fonts/mont-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Mont"; src: url("/fonts/mont-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Mont"; src: url("/fonts/mont-heavy.woff2") format("woff2"); font-weight: 800; font-display: swap; }
/* Upright Mont Black is a trial cut (prints DEMO on % # /). 900 upright maps to Heavy; only Black Italic is licensed. */
@font-face { font-family: "Mont"; src: url("/fonts/mont-heavy.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Mont"; src: url("/fonts/mont-blackitalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  --red: #FD0043;
  --cyan: #18FFF1;
  --teal: #0E6F6B;
  --ink: #000;
  --ink-2: #0B0B0E;
  --ink-3: #16161B;
  --line: rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.2);
  --dim: rgba(255,255,255,.74);
  --display: "Mont", "Arial Black", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --gut: clamp(16px, 4.5vw, 72px);
  --maxw: 1440px;
  --skew: -12deg;
  --ease: cubic-bezier(.2,.7,.1,1);
  --snap: cubic-bezier(.7,0,.2,1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--ink); color: #fff; font-family: var(--display); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
strong, b { font-weight: 800; }
::selection { background: var(--cyan); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--cyan); color: var(--ink); padding: 8px 14px; font-weight: 800; }
.skip:focus { left: 8px; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* type */
.h1, .h2, .display, .hero__title { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; margin: 0; }
.h1 { font-size: clamp(48px, 8vw, 132px); line-height: .88; }
.h2 { font-size: clamp(32px, 4.4vw, 68px); line-height: .92; }
.display { font-size: clamp(52px, 7vw, 116px); line-height: .88; }
.label { font-size: 11px; color: var(--cyan); margin: 0 0 18px; letter-spacing: .3em; }
.red { color: var(--red); }
.cy { color: var(--cyan); font-style: italic; }
.outline { color: transparent; -webkit-text-stroke: 2px #fff; }
mark { background: var(--cyan); color: var(--ink); padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* background line systems, from the live site */
.lines-grid { position: relative; isolation: isolate; }
.lines-grid::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(16.666% - 1px), var(--line) calc(16.666% - 1px) 16.666%); opacity: .9;
  -webkit-mask: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.lines-diag { position: relative; isolation: isolate; }
.lines-diag::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(-58deg, transparent 0 58px, rgba(255,255,255,.05) 58px 59px); }

/* buttons: skewed parallelogram, the italic of the logotype */
.btn { --bg: #fff; --fg: var(--ink); position: relative; display: inline-flex; align-items: center; gap: 14px; height: 52px; padding: 0 30px; color: var(--fg);
  font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 14px; letter-spacing: .02em; white-space: nowrap; isolation: isolate; transition: color .2s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg); transform: skewX(var(--skew)); transition: transform .3s var(--ease), background .25s; }
.btn:hover::before { transform: skewX(var(--skew)) scaleX(1.06); background: var(--hover, #fff); }
.btn:hover { color: var(--hfg, var(--ink)); }
.btn:active::before { transform: skewX(var(--skew)) scale(.97); }
.btn--red { --bg: var(--red); --fg: #fff; }
.btn--cyan { --bg: var(--cyan); --fg: var(--ink); }
.btn--sm { height: 40px; padding: 0 20px; font-size: 12px; }
.btn--lg { height: 60px; padding: 0 36px; font-size: 16px; }
.arrow { width: 18px; height: 12px; position: relative; display: inline-block; }
.arrow::before { content: ""; position: absolute; left: 0; right: 3px; top: 5px; height: 2px; background: currentColor; }
.arrow::after { content: ""; position: absolute; right: 1px; top: 1px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.btn:hover .arrow { animation: nudge .6s var(--ease) infinite alternate; }
@keyframes nudge { to { transform: translateX(4px); } }
.ulink { font-weight: 800; font-size: 14px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ulink--red { color: var(--red); }
.ulink:hover { color: var(--cyan); }

/* boot */
.boot { position: fixed; inset: 0; z-index: 200; background: var(--ink); display: grid; place-items: center; transition: clip-path .7s var(--snap); clip-path: inset(0); }
.boot.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.boot.is-skip { display: none; }
.boot__inner { width: min(420px, 80vw); display: grid; gap: 14px; justify-items: start; }
.boot__icon { width: 48px; height: 48px; animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.boot__label { font-size: 13px; }
.boot__bar { width: 100%; height: 6px; background: var(--ink-3); position: relative; overflow: hidden; }
.boot__bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--red); }
@media (max-width: 640px) { .boot { display: none; } }

/* nav */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 90; height: 76px; display: flex; align-items: center; gap: 30px; padding: 0 var(--gut); transition: background .3s, height .3s, transform .35s var(--ease); }
.nav.is-scrolled { background: rgba(0,0,0,.84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); height: 64px; border-bottom: 1px solid var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__logo img { width: 132px; height: auto; }
.nav__links { display: flex; gap: 32px; margin-left: auto; font-weight: 800; font-size: 14px; }
.nav__links a { position: relative; padding: 6px 0; color: #fff; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav:not(.is-scrolled) .nav__links a::after { background: var(--ink); }
.nav__cta { height: 42px; padding: 0 22px; font-size: 13px; }
.nav__burger { display: none; width: 44px; height: 44px; position: relative; margin-left: auto; }
.nav__burger span { position: absolute; left: 10px; right: 10px; height: 3px; background: #fff; transition: transform .3s var(--ease), top .3s; }
.nav__burger span:first-child { top: 16px; } .nav__burger span:last-child { top: 25px; right: 18px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 20px; right: 10px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 80; background: var(--red); padding: 100px var(--gut) 32px; display: flex; flex-direction: column; justify-content: space-between; clip-path: circle(0 at calc(100% - 40px) 38px); transition: clip-path .6s var(--snap); }
.menu.is-open { clip-path: circle(150% at calc(100% - 40px) 38px); }
.menu__links { display: grid; gap: 4px; }
.menu__links a { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(38px, 11vw, 64px); line-height: 1; display: flex; align-items: baseline; gap: 12px; }
.menu__links small { font-size: 12px; font-style: normal; color: var(--ink); }
.menu__foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink); font-weight: 700; }

/* hero */
.hero { position: relative; z-index: 2; background: var(--red); min-height: 100svh; padding-top: 96px; overflow-x: clip; overflow-y: visible; display: flex; flex-direction: column; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background: repeating-linear-gradient(-58deg, transparent 0 46px, rgba(0,0,0,.6) 46px 48px);
  -webkit-mask: linear-gradient(90deg, transparent 25%, #000 70%); mask: linear-gradient(90deg, transparent 25%, #000 70%); }
.hero__grid { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(20px, 3vw, 56px); align-items: center; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) 120px; }
.hero__title { font-size: clamp(60px, min(9vw, 17vh), 172px); line-height: .84; color: var(--ink); display: grid; }
.hero__title .line { display: block; overflow: hidden; white-space: nowrap; padding: .02em .16em .04em .12em; margin-left: -.12em; }
.hero__title .line > span { display: inline-block; transform: translateX(var(--from, -110%)); transition: transform 1s var(--ease); }
.hero__title .line--l > span { --from: 110%; }
.is-ready .hero__title .line > span { transform: none; }
.is-ready .hero__title .line:nth-child(2) > span { transition-delay: .08s; }
.is-ready .hero__title .line:nth-child(3) > span { transition-delay: .16s; }
.hero__title .w { color: #fff; }
.hero__lead a { color: inherit; }
.hero__lead { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.4; font-weight: 800; max-width: 24em; margin: 30px 0 0; color: #fff; }
.hero__stage { position: relative; height: min(80vh, 820px); }
.hero__chev { position: absolute; left: 4%; top: 18%; width: 46%; aspect-ratio: 1; border: solid rgba(255,255,255,.22); border-width: 34px 34px 0 0; transform: rotate(45deg); pointer-events: none; }
.screen { position: absolute; right: 4%; top: 6%; width: 86%; aspect-ratio: 16/10; margin: 0; cursor: pointer; clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); background: #111; transition: transform .6s var(--ease); }
.screen:hover { transform: scale(1.02); }
.screen__media, .screen__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__illu { position: absolute; right: -12%; bottom: 0; width: 76%; height: auto; z-index: 3; pointer-events: none; filter: drop-shadow(0 24px 40px rgba(0,0,0,.28)); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(1deg); } }
.scroller { position: absolute; left: 50%; bottom: 0; z-index: 6; width: 164px; height: 164px; margin-left: -82px; transform: translateY(50%); display: grid; place-items: center; }
.scroller__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.scroller__chev { width: 22px; transition: transform .3s var(--ease); }
/* a red diamond centred on the edge: the top half melts into the hero, the bottom half reads as a notch over black */
.scroller::before { content: ""; position: absolute; width: 92px; height: 92px; background: var(--red); transform: rotate(45deg); transition: transform .4s var(--ease); }
.scroller:hover::before { transform: rotate(45deg) scale(1.1); }
.scroller__chev { transform: translateY(16px); }
.scroller:hover .scroller__chev { transform: translateY(22px); }
.scroller .scroller__chev { position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

/* playgrounds: the live site's mechanics. 800px of pinned scroll, crossfading slides whose clip-path
   morphs over 1s, and a vertical rail that arcs away from the active culture */
.play { position: relative; z-index: 1; background: var(--ink); height: calc(100svh + var(--dist, 800px)); }
.play::after { content: ""; position: absolute; left: -12%; top: 30%; width: 55%; aspect-ratio: 1; z-index: -1; background: linear-gradient(45deg, var(--teal), transparent 62%); transform: rotate(45deg); opacity: .45; pointer-events: none; }
.play__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.play__pin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(16.666% - 1px), var(--line) calc(16.666% - 1px) 16.666%); }
.play__grid { position: relative; display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 6.2fr) minmax(0, 3.4fr) 20px; gap: clamp(20px, 2.6vw, 44px); align-items: center; }
.play__head { position: relative; z-index: 3; }
.play__head .h1 { font-size: clamp(40px, 4.3vw, 76px); white-space: nowrap; }
.play__nav { display: flex; gap: 12px; margin-top: 40px; }
.arrowbtn { width: 52px; height: 52px; position: relative; display: grid; place-items: center; }
.arrowbtn::before { content: ""; position: absolute; inset: 0; border: 2px solid #fff; transform: skewX(var(--skew)); transition: background .2s, border-color .2s, opacity .2s; }
.arrowbtn--fill::before { background: var(--cyan); border-color: var(--cyan); }
.arrowbtn:hover::before { background: var(--red); border-color: var(--red); }
.arrowbtn i { width: 12px; height: 12px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg) translate(2px, -2px); position: relative; }
.arrowbtn--fill i { border-color: var(--ink); transform: rotate(-135deg) translate(2px, -2px); }
.arrowbtn:hover i { border-color: #fff; }
.arrowbtn[disabled] { opacity: .25; pointer-events: none; }
.play__stage { position: relative; aspect-ratio: 16/9; margin-left: -12%; }
.pslide { position: absolute; inset: 0; margin: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.pslide.is-active { opacity: 1; }
.pslide__glow { position: absolute; inset: 0; background: radial-gradient(#18fff1, transparent 70%); opacity: .8; transform: scale(1.1); transition: transform 2s ease; }
.pslide.is-prev .pslide__glow { transform: scale(.8); }
.pslide.is-next .pslide__glow { transform: scale(2); }
.pslide__clip { position: absolute; inset: 0; overflow: hidden; background: var(--ink-3); transition: clip-path 1s ease, transform 1s ease; }
.pslide__clip video { width: 100%; height: 100%; object-fit: cover; }
.pslide.is-active .pslide__clip { clip-path: polygon(100% 0, 130% 50%, 100% 100%, 0 100%, 35% 48%, 0 0); transform: translateX(0) scale(1); }
.pslide.is-prev .pslide__clip { clip-path: polygon(100% 0, 100% 50%, 100% 100%, 50% 100%, 75% 48%, 50% 0); transform: translateX(200px) scale(1); }
.pslide.is-next .pslide__clip { clip-path: polygon(0 0, 30% 50%, 0 100%, -100% 100%, -100% 50%, -100% 0); transform: translateX(-100px) scale(1.5); }
.play__stage::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 36%; pointer-events: none; clip-path: polygon(0 0, 97% 48%, 0 100%); background: linear-gradient(90deg, rgba(14,111,107,0), rgba(14,111,107,.95)); }
.play__more { position: absolute; right: 0; bottom: -54px; z-index: 3; }
.uline { font-weight: 800; font-size: 17px; padding-bottom: 8px; background: linear-gradient(var(--cyan), var(--cyan)) left bottom / 100% 4px no-repeat; transition: background-size .35s var(--ease); }
.uline:hover { background-size: 30% 4px; }
.play__rail { position: relative; height: min(80svh, 700px); overflow: visible; min-width: 0; }
.play__list li > button { max-width: calc(100% - 20px); }
.play__list { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 0; transition: transform .5s cubic-bezier(.25,.8,.25,1); will-change: transform; }
.play__list li { height: var(--row, 175px); display: flex; align-items: center; transition: transform .5s ease, opacity .5s ease; opacity: .2; }
.play__list li.is-active { opacity: 1; }
.play__list li.is-prev, .play__list li.is-next { transform: translateX(50px); }
.play__list li.is-next2, .play__list li.is-prev2 { transform: translateX(100px); opacity: .1; }
.play__list li.is-next3, .play__list li.is-prev3 { transform: translateX(150px); opacity: .05; }
.play__list li.is-far { opacity: 0; }
.play__list button { display: block; width: 100%; text-align: left; }
.play__list button > b { display: block; font-family: var(--display); font-style: italic; font-weight: 900; font-size: clamp(32px, 3.3vw, 48px); line-height: 1; transition: font-size .25s ease; }
.play__list button > b span { color: #fff; transition: color .4s; }
.play__list li.is-active button > b span { color: var(--cyan); }
.play__txt { display: block; font-weight: 600; font-size: 16px; line-height: 1.5; margin-top: 12px; max-width: 30ch; color: rgba(255,255,255,.85); }
.play__txt b { display: inline; font: inherit; font-weight: 800; color: #fff; }
.play__dots { display: grid; gap: 16px; justify-self: end; }
.play__dots i { width: 10px; height: 10px; border: 1px solid var(--cyan); transition: background .3s; cursor: pointer; }
.play__dots i.is-on { background: var(--cyan); }
.facts-band { background: var(--ink); padding: clamp(40px, 5vw, 70px) 0 0; }
.facts { display: grid; grid-template-columns: 1fr 1fr auto; gap: 34px; align-items: end; }
.facts__item { margin: 0; display: flex; gap: 18px; align-items: center; }
.facts__item b { font-style: italic; font-weight: 900; font-size: clamp(44px, 4.6vw, 72px); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--cyan); flex: none; }
.facts__item span { font-weight: 700; font-size: 15px; line-height: 1.35; max-width: 26ch; }
.facts__src { font-size: 10px; color: var(--dim); margin: 0; }

/* logos */
.logos { background: var(--ink); padding: clamp(80px, 8vw, 120px) 0; }
.logos__wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.logos__head .h2 { font-size: clamp(34px, 4vw, 62px); }
.logos__grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; }
.lg { height: 104px; display: grid; place-items: center; position: relative; }
.lg img { max-width: calc(112px * var(--k, 1)); max-height: calc(44px * min(var(--k, 1), 1.3)); width: auto; height: auto; filter: brightness(0) invert(1); opacity: .9; transition: transform .35s var(--ease), opacity .2s; }
.lg::before, .lg::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--cyan); opacity: 0; transition: opacity .2s, transform .3s var(--ease); }
.lg::before { left: 10px; top: 10px; border-right: 0; border-bottom: 0; transform: translate(6px, 6px); }
.lg::after { right: 10px; bottom: 10px; border-left: 0; border-top: 0; transform: translate(-6px, -6px); }
.lg:hover::before, .lg:hover::after { opacity: 1; transform: none; }
.lg:hover img { transform: scale(1.1); opacity: 1; }

/* work */
.work { background: var(--ink); padding: clamp(40px, 5vw, 70px) 0 clamp(80px, 8vw, 120px); position: relative; }
.sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 52px; }
.sechead__aside { max-width: 360px; color: var(--dim); font-weight: 600; margin: 0 0 8px; }
.cases { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.case { grid-column: span 4; min-width: 0; position: relative; cursor: pointer; isolation: isolate; }
.case--big { grid-column: span 7; }
.case--mid { grid-column: span 5; }
.case__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ink-3); }
.case--big .case__media, .case--mid .case__media { aspect-ratio: 16/11; }
.case__media img, .case__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), opacity .4s; }
.case__media video { opacity: 0; }
.case.is-playing .case__media video { opacity: 1; }
.case:hover .case__media img, .case:hover .case__media video { transform: scale(1.05); }
.case__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6)); }
.case__corner { position: absolute; z-index: 2; width: 26px; height: 26px; border: 3px solid var(--cyan); opacity: 0; transition: opacity .2s, transform .35s var(--ease); pointer-events: none; }
.case__corner--a { left: 14px; top: 14px; border-right: 0; border-bottom: 0; transform: translate(8px, 8px); }
.case__corner--b { right: 14px; bottom: 14px; border-left: 0; border-top: 0; transform: translate(-8px, -8px); }
.case:hover .case__corner, .case:focus-visible .case__corner { opacity: 1; transform: none; }
.case__tag { position: absolute; z-index: 2; left: 16px; bottom: 14px; font-size: 10.5px; display: flex; gap: 8px; align-items: center; }
.case__tag::before { content: ""; border-left: 9px solid var(--cyan); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.case__body { padding: 20px 2px 0; }
.case__client { font-size: 11px; color: var(--cyan); margin: 0 0 8px; }
.case__title { font-family: var(--display); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(22px, 2vw, 30px); line-height: .95; margin: 0 0 14px; overflow-wrap: break-word; transition: color .2s; }
.case--big .case__title { font-size: clamp(30px, 3.2vw, 52px); }
.case:hover .case__title { color: var(--cyan); }
.case__kpis { display: flex; gap: 26px; flex-wrap: wrap; }
.kpi b { display: block; font-style: italic; font-weight: 900; font-size: clamp(24px, 2.2vw, 34px); line-height: 1; }
.case--big .kpi b { font-size: clamp(30px, 3vw, 46px); }
.kpi span { font-size: 12px; color: var(--dim); font-weight: 600; display: block; margin-top: 4px; max-width: 18ch; line-height: 1.3; }
.kpi:first-child b { color: var(--red); }
.case:focus-visible { outline: none; }

/* services */
.services { background: var(--ink); padding: clamp(40px, 4vw, 60px) 0 clamp(60px, 6vw, 90px); overflow: hidden; }
.services__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 30px; margin-bottom: clamp(30px, 4vw, 56px); }
.services__head .label { grid-column: 1 / -1; margin-bottom: -14px; }
.services__title { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(34px, 4.4vw, 68px); line-height: .92; margin: 0; max-width: 14ch; }
.services__title span { color: var(--red); }
.bands { display: grid; gap: 4px; }
.band { overflow: hidden; }
.band__track { display: flex; gap: 56px; width: max-content; will-change: transform; }
.band span { font-weight: 900; font-style: italic; font-size: clamp(48px, 7vw, 116px); line-height: 1.05; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); cursor: default; transition: color .25s, -webkit-text-stroke-color .25s; }
.band--rev span { -webkit-text-stroke-color: rgba(253,0,67,.8); }
.band span:hover, .band span.is-hot { color: #fff; -webkit-text-stroke-color: #fff; }
.band--rev span:hover, .band--rev span.is-hot { color: var(--red); -webkit-text-stroke-color: var(--red); }
.bands__tip { max-width: var(--maxw); margin: clamp(24px, 3vw, 40px) auto 0; padding: 0 var(--gut); font-family: var(--display); font-weight: 800; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: 0; text-transform: none; color: #fff; min-height: 1.6em; }
.bands__tip b { color: var(--cyan); font-style: italic; font-weight: 900; text-transform: uppercase; margin-right: 10px; }

/* contact, from the live site with more weight */
.contact { background: var(--ink); padding: clamp(80px, 8vw, 120px) 0 clamp(80px, 8vw, 120px); overflow: hidden; }
.contact__wedge { position: absolute; left: 0; top: 0; bottom: 0; width: 52%; z-index: -1; background: linear-gradient(135deg, rgba(14,111,107,.9), rgba(14,111,107,0) 70%); clip-path: polygon(0 0, 100% 50%, 0 100%); pointer-events: none; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.join { position: relative; background: var(--cyan); color: var(--ink); padding: clamp(30px, 3.4vw, 52px); margin-top: clamp(40px, 8vw, 140px); }
.join__dia { position: absolute; right: -40px; top: -60px; width: 120px; height: 120px; filter: drop-shadow(10px 10px 0 var(--ink)); transition: transform .5s var(--ease); }
.join:hover .join__dia { transform: rotate(90deg); }
.join .h2 { font-size: clamp(38px, 4vw, 64px); margin-bottom: 20px; }
.join p { font-weight: 600; font-size: 16px; max-width: 36ch; margin: 0 0 30px; }
.join__row, .work-card__row { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.work-card { position: relative; padding: clamp(36px, 4vw, 64px) clamp(28px, 3.6vw, 60px); }
.bracket { position: absolute; inset: 0; pointer-events: none; }
.bracket::before, .bracket::after { content: ""; position: absolute; width: 36%; height: 42%; border: 6px solid #fff; transition: width .6s var(--ease), height .6s var(--ease); }
.bracket::before { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.bracket::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.work-card:hover .bracket::before, .work-card:hover .bracket::after { width: 60%; height: 48%; }
.work-card__dia { position: absolute; right: -24px; top: -70px; width: 150px; height: 150px; transition: transform .5s var(--ease); }
.work-card:hover .work-card__dia { transform: rotate(-12deg) scale(1.06); }
.work-card .display { margin-bottom: 26px; }
.work-card p { font-weight: 600; font-size: 18px; max-width: 34ch; margin: 0 0 40px; color: rgba(255,255,255,.85); }
.work-card p strong { color: #fff; }

/* footer */
.foot { background: var(--ink); border-top: 1px solid var(--line); padding: 44px 0 36px; }
.foot__grid { display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: center; }
.foot__brand { display: flex; gap: 20px; align-items: center; }
.foot__brand img { width: 56px; height: 56px; opacity: .35; }
.foot__tag { font-weight: 900; font-style: italic; margin: 0 0 10px; font-size: 16px; }
.foot__nav { display: flex; gap: 26px; flex-wrap: wrap; font-weight: 700; font-size: 14px; }
.foot__nav a:hover, .foot__legal a:hover { color: var(--cyan); }
.foot__legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 22px; font-size: 13px; color: var(--dim); }
.foot__legal nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot__legal p { margin: 0; font-size: 11px; }

/* modal */
.modal { width: min(1400px, 100vw); max-width: 100vw; max-height: 100svh; margin: auto; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.modal::backdrop { background: rgba(0,0,0,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal[open] .modal__shell { animation: modalIn .5s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px); } }
.modal__shell { position: relative; background: var(--ink-2); border-top: 4px solid var(--red); max-height: calc(100svh - 32px); overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.modal__player { aspect-ratio: 16/9; background: #000; align-self: center; }
.modal__player video { width: 100%; height: 100%; background: #000; }
.modal__close { position: absolute; z-index: 5; top: 14px; right: 14px; width: 46px; height: 46px; }
.modal__close::before { content: ""; position: absolute; inset: 0; background: var(--cyan); transform: rotate(45deg) scale(.8); transition: transform .3s var(--ease); }
.modal__close:hover::before { transform: rotate(135deg) scale(.8); }
.modal__close span { position: absolute; left: 14px; right: 14px; top: 21px; height: 3px; background: var(--ink); transform: rotate(45deg); }
.modal__close span + span { transform: rotate(-45deg); }
.modal__body { padding: 70px clamp(22px, 2.4vw, 36px) 32px; display: grid; gap: 18px; overflow: auto; max-height: calc(100svh - 36px); align-content: start; }
.modal__body > * { min-width: 0; }
.mb__client { font-size: 11px; color: var(--cyan); margin: 0 0 12px; }
.mb__title { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(28px, 2.4vw, 40px); line-height: .92; margin: 0 0 18px; overflow-wrap: break-word; }
.mb__sum { font-size: 16px; font-weight: 700; margin: 0 0 20px; }
.mb__block { margin-bottom: 16px; }
.mb__block h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--red); margin: 0 0 6px; font-weight: 700; }
.mb__block p { margin: 0; color: var(--dim); font-weight: 600; font-size: 15px; }
.mb__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-content: start; }
.mb__kpi { padding: 14px 0; }
.mb__kpi b { font-weight: 900; font-style: italic; font-size: clamp(28px, 2.4vw, 40px); line-height: 1; display: block; }
.mb__kpi:first-child b { color: var(--red); }
.mb__kpi span { color: var(--dim); font-weight: 600; font-size: 13px; }
.mb__meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.mb__meta span { font-size: 10px; border: 1px solid var(--line-2); padding: 5px 8px; }

/* sticky phone CTA */
.mcta { display: none; }
@media (max-width: 640px) {
  .mcta { position: fixed; z-index: 85; left: 18px; right: 18px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 54px; display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--ink); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 15px; isolation: isolate; transform: translateY(160%); transition: transform .4s var(--ease); }
  .mcta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cyan); transform: skewX(var(--skew)); }
  .mcta.is-on { transform: none; }
}

/* play cursor */
.cursor { position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none; }
.cursor span { position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; display: grid; place-items: center; background: var(--cyan); color: var(--ink); font-size: 11px; font-weight: 700; border-radius: 50%; transform: scale(0); transition: transform .35s var(--ease); }
.cursor.is-on span { transform: scale(1); }
.case, .screen { cursor: none; }
@media (hover: none) { .cursor { display: none; } .case, .screen { cursor: pointer; } }

/* grain and reveal */
.grain { position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, 3%); } }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* responsive */
@media (max-width: 1180px) {
  .play__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 16px; row-gap: 28px; }
  .play__head { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .play__head .label { grid-column: 1; }
  .play__head .h1 { grid-column: 1; }
  .play__head .play__nav { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .play__rail { height: min(54svh, 480px); overflow: hidden; }
  .play__list li.is-next2, .play__list li.is-prev2 { transform: translateX(90px); }
  .play__list li.is-next3, .play__list li.is-prev3 { transform: translateX(140px); }
  .logos__wrap { grid-template-columns: 1fr; }
  .logos__grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (max-width: 960px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .hero { padding-top: 84px; }
  .hero__grid { grid-template-columns: 1fr; gap: 10px; padding-bottom: 150px; }
  .hero__stage { height: 62vw; max-height: 520px; }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case, .case--mid { grid-column: span 1; }
  .case--big { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr; gap: 18px; }
  .contact__grid { grid-template-columns: 1fr; gap: 70px; }
  .join { margin-top: 30px; order: 2; }
  .contact__wedge { width: 100%; }
  .modal__shell { grid-template-columns: 1fr; }
  .modal__body { max-height: none; overflow: visible; padding-top: 28px; }
  .sechead { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero__title { font-size: clamp(60px, 20vw, 112px); }
  .hero__lead { margin-top: 20px; }
  .hero__stage { height: 78vw; margin-top: 8px; }
  .screen { right: 16%; width: 80%; top: 8%; }
  .hero__illu { width: 76%; right: -8%; }
  .scroller { width: 104px; height: 104px; margin-left: -52px; bottom: 20px; }
  .scroller::before { width: 46px; height: 46px; }
  .play { --dist: 700px; }
  .play__grid { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding-top: 64px; }
  .play__head { display: block; }
  .play__head .h1 { font-size: 40px; }
  .play__head .play__nav { margin-top: 16px; }
  .play__nav { gap: 10px; } .arrowbtn { width: 44px; height: 44px; }
  .play__more { display: none; }
  .play__rail { height: 190px; overflow: hidden; }
  .play__list { position: relative; transform: none !important; }
  .play__list li { position: absolute; inset: 0 0 auto; height: auto; opacity: 0; transform: translateY(18px); }
  .play__list li.is-active { opacity: 1; transform: none; }
  .play__list li.is-prev, .play__list li.is-next, .play__list li.is-next2, .play__list li.is-prev2, .play__list li.is-next3, .play__list li.is-prev3 { opacity: 0; transform: translateY(18px); }
  .play__list button > b { font-size: 34px; }
  .play__txt { font-size: 15px; margin-top: 10px; max-width: none; }
  .play__dots { display: flex; justify-self: start; }
  .logos__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg { height: 82px; }
  .lg img { max-width: calc(84px * var(--k, 1)); max-height: calc(32px * min(var(--k, 1), 1.3)); }
  .cases { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .band span { font-size: 52px; }
  .join__dia { right: -6px; top: -54px; width: 96px; height: 96px; }
  .work-card__dia { right: -6px; top: -64px; width: 110px; height: 110px; }
  .foot__grid { grid-template-columns: 1fr; }
  .modal__shell { max-height: 100svh; }
  .grain { display: none; }
  .hero__illu { animation: none; }
  .lines-grid::before { background: repeating-linear-gradient(90deg, transparent 0 calc(33.333% - 1px), var(--line) calc(33.333% - 1px) 33.333%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
  .grain { display: none; }
}


/* v4.1: culture ticker */
.hero__lead a { color: inherit; }
.ticker { position: relative; z-index: 3; background: var(--cyan); height: 62px; display: flex; align-items: center; overflow: hidden; }
.ticker .band__track { gap: 28px; align-items: center; }
.ticker span, .ticker span:hover { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 26px; line-height: 1; color: var(--ink); -webkit-text-stroke: 0; }
.ticker i { width: 14px; height: 14px; background: var(--ink); transform: skewX(var(--skew)); flex: none; }
@media (max-width: 640px) { .ticker { height: 48px; } .ticker span, .ticker span:hover { font-size: 19px; } }
.case__sum { font-size: 14px; line-height: 1.45; color: var(--dim); font-weight: 600; margin: 0 0 16px; max-width: 46ch; }

/* v4.2: work cards, more play. Media tilts to the pointer and morphs into the supernova chevron on hover */
.case__media { transition: transform .5s var(--ease), clip-path .6s var(--snap); transform-style: preserve-3d;
  clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 0 0); }
.case:hover .case__media, .case:focus-visible .case__media { clip-path: polygon(100% 0, 94% 50%, 100% 100%, 0 100%, 8% 50%, 0 0); }
.case__kpis { margin-top: 4px; }
.kpi b { font-variant-numeric: tabular-nums; }
.case__client { position: relative; display: inline-block; padding: 3px 9px; }
.case__client::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(24,255,241,.12); transform: skewX(var(--skew)); }
@media (min-width: 961px) {
  .cases { align-items: start; row-gap: 56px; }
  .case--mid .case__media { aspect-ratio: 1.07; }
}

/* ================= careers ================= */
.nav__links a.is-active { color: var(--cyan); }
.chero { background: var(--ink); min-height: 100svh; padding: 120px 0 60px; display: flex; align-items: center; overflow: hidden; }
.chero::after { content: ""; position: absolute; right: -8%; top: 8%; width: 58vw; max-width: 900px; aspect-ratio: 1; z-index: -1; pointer-events: none;
  border: solid rgba(255,255,255,.06); border-width: clamp(60px, 9vw, 140px) clamp(60px, 9vw, 140px) 0 0; transform: rotate(45deg); }
.chero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.chero__title { font-family: var(--display); font-weight: 900; font-style: italic; margin: 0; font-size: clamp(52px, min(8.4vw, 15vh), 150px); line-height: .86; display: grid; }
.chero__title .line { display: block; overflow: hidden; white-space: nowrap; padding: .02em .16em .04em .12em; margin-left: -.12em; }
/* intro choreography from the live careers header: lines slide in from alternating sides, IMPACT slams in from 10x */
.chero__title .line > span { display: inline-block; opacity: 0; }
.is-ready .chero__title .line:nth-child(1) > span { animation: cIn .7s var(--ease) .25s both; --x: 60px; }
.is-ready .chero__title .line:nth-child(2) > span { animation: cIn .7s var(--ease) .4s both; --x: -60px; }
.is-ready .chero__title .line:nth-child(3) { overflow: visible; }
.is-ready .chero__title .line:nth-child(3) > span { animation: slam .8s cubic-bezier(.2,1.4,.4,1) .75s both; transform-origin: 30% 60%; }
.is-ready .chero__title .line:nth-child(4) > span { animation: rise .6s var(--ease) 1.1s both; }
.chero__cta, .chero .label { opacity: 0; }
.is-ready .chero__cta, .is-ready .chero .label { animation: fadeIn .6s ease 1.35s both; }
@keyframes cIn { from { opacity: 0; transform: translateX(var(--x)); } to { opacity: 1; transform: none; } }
@keyframes slam { 0% { opacity: 0; transform: scale(8); } 55% { opacity: 1; transform: scale(.92); } 75% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(80px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chero__title .line > span, .chero__cta, .chero .label { opacity: 1 !important; animation: none !important; } }
.chero__title .line:nth-child(3) > span { color: transparent; -webkit-text-stroke: 2px #fff; }
.chero__cta { display: flex; gap: 34px; align-items: center; margin-top: 44px; flex-wrap: wrap; }
.chero__illu { width: 100%; max-width: 560px; justify-self: end; height: auto; filter: drop-shadow(18px 18px 0 rgba(24,255,241,.18)); animation: float 7s ease-in-out infinite; }

.why { background: var(--ink); padding: clamp(80px, 10vw, 150px) 0; }
.why__frame { position: relative; }
.why__card { position: relative; background: #fff; color: var(--ink); display: grid; grid-template-columns: minmax(0, 1fr) 70px; align-items: center; min-height: 520px;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%, 7% 50%); padding: 60px 0; }
.why__body { text-align: center; max-width: 640px; margin: 0 auto; padding: 0 clamp(30px, 6vw, 90px); }
.why__icon { width: 58px; margin: 0 auto 18px; filter: brightness(0) saturate(100%) invert(84%) sepia(62%) saturate(1500%) hue-rotate(115deg) brightness(104%); }
.why__title { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(34px, 4vw, 60px); line-height: .92; margin: 0 0 26px; }
.why__lead { font-weight: 800; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; margin: 0 0 20px; }
.why__body p:last-child { font-size: 15px; line-height: 1.6; color: rgba(0,0,0,.72); margin: 0; }
.why__body p:last-child b { color: var(--ink); }
.mark--red { background: var(--red); color: #fff; }
.why__side { margin: 0; font-size: 11px; letter-spacing: .3em; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; color: rgba(0,0,0,.55); }
.why__side b { color: var(--ink); font-weight: 800; margin-top: 10px; display: inline-block; }
.why__side--l { position: absolute; z-index: 2; left: 1.2%; top: 50%; translate: 0 -50%; color: #fff; }
.why__side--l b { color: var(--cyan); }
.why__side--r { transform: none; margin-right: 90px; }

/* our DNA: the live site's mechanics. 800px pinned, the title row scrubs with the scroll, slides crossfade
   while the polaroid rotates and scales in and out, titles pop with an anticipation curve */
.dna { position: relative; background: var(--ink); height: calc(100svh + var(--dist, 800px)); }
.dna::before { content: ""; position: absolute; inset: 0; height: 60%; z-index: 0; pointer-events: none; background: linear-gradient(#000, rgba(0,0,0,0)); }
.dna__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; z-index: 1; }
.dna__pin::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(16.666% - 1px), var(--line) calc(16.666% - 1px) 16.666%); }
.dna__wrap { position: relative; }
.dna__titles { position: relative; height: clamp(84px, 12.5vw, 190px); }
.dna__track { position: absolute; left: 0; top: 0; display: flex; will-change: transform; }
.dna__t { flex: none; width: clamp(300px, 42vw, 600px); margin: 0; font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(40px, 7vw, 100px); line-height: .9; white-space: nowrap;
  color: #000; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; opacity: .2; transform: scale(.85); transform-origin: left center; cursor: pointer;
  transition: color .5s cubic-bezier(.15,-.6,0,.995), transform .5s cubic-bezier(.15,-.6,0,.995), opacity .5s, text-shadow .5s; }
.dna__t span { color: #000; transition: color .5s cubic-bezier(.15,-.6,0,.995); }
.dna__t.is-on { color: var(--red); opacity: 1; transform: scale(1); text-shadow: -1px -1px 0 transparent, 1px -1px 0 transparent, -1px 1px 0 transparent, 1px 1px 0 transparent; cursor: default; }
.dna__t.is-on .r { color: var(--red); } .dna__t.is-on .w { color: #fff; }
.dna__slides { position: relative; height: clamp(300px, 44svh, 440px); margin-top: 0; }
.dslide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.dslide.is-on { opacity: 1; pointer-events: auto; }
.dslide__copy { position: relative; z-index: 3; max-width: 360px; margin: 20px 0 0 clamp(0px, 16vw, 300px); }
.dslide__copy p { font-weight: 800; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.35; margin: 0 0 34px; }
.dslide__img { position: relative; margin: 0; justify-self: center; width: min(500px, 38vw); }
.dslide__glow { position: absolute; inset: 0; background: radial-gradient(#18fff1, transparent 70%); opacity: .8; transform: scale(1.5); transition: transform 1s ease; }
.dslide.is-on .dslide__glow { transform: scale(1.4); }
.dslide.is-prev .dslide__glow { transform: scale(.8); }
.dslide.is-next .dslide__glow { transform: scale(2); }
.dslide__clip { position: relative; border: 10px solid #fff; background: #111; transition: transform .65s ease-out; }
.dslide__clip video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.dslide.is-on .dslide__clip { transform: scale(1) rotate(-10deg); }
.dslide.is-prev .dslide__clip { transform: scale(.85); }
.dslide.is-next .dslide__clip { transform: scale(1.5) rotate(30deg); }
.dslide:nth-child(odd).is-on .dslide__clip { transform: scale(1) rotate(10deg); }
.dslide:nth-child(odd).is-next .dslide__clip { transform: scale(1.5) rotate(-30deg); }
.dna__dots { position: absolute; right: var(--gut); top: 46%; display: grid; gap: 16px; }
.dna__dots i { width: 10px; height: 10px; border: 1px solid var(--cyan); cursor: pointer; transition: background .3s; }
.dna__dots i.is-on { background: var(--cyan); }

/* positions: a white quest board */
.jobs { background: #fff; color: var(--ink); padding: clamp(80px, 9vw, 130px) 0 clamp(60px, 7vw, 100px); }
.jobs__head { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.jobs .label { color: var(--ink); }
.jobs__title { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 52px); line-height: .95; margin: 0 auto; max-width: 20ch; }
.jobs__list { list-style: none; margin: 0; padding: 0; }
.jobs__list li:nth-child(odd) { background: rgba(0,0,0,.045); }
.job { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr) 170px 170px 60px; gap: 20px; align-items: center; max-width: var(--maxw); margin: 0 auto; padding: 34px var(--gut); isolation: isolate; }
.job::before { content: ""; position: absolute; inset: 0 -100vw; z-index: -1; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--snap); }
.job:hover::before, .job:focus-visible::before { transform: none; }
.job__n { font-size: 11px; color: rgba(0,0,0,.45); transition: color .2s; }
.job__title { display: block; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(22px, 2.2vw, 32px); line-height: 1; }
.job__desc { display: block; color: var(--red); font-weight: 700; font-size: 15px; margin-top: 8px; transition: color .2s; }
.job__meta { font-weight: 700; font-size: 15px; }
.job__meta small { display: block; font-size: 10px; color: rgba(0,0,0,.45); margin-bottom: 4px; transition: color .2s; }
.job__arrow { justify-self: end; width: 34px; height: 3px; background: rgba(0,0,0,.3); position: relative; transition: transform .3s var(--ease), background .2s; }
.job__arrow::after { content: ""; position: absolute; right: 0; top: -6px; width: 12px; height: 12px; border-top: 3px solid; border-right: 3px solid; border-color: inherit; transform: rotate(45deg); border-color: rgba(0,0,0,.3); transition: border-color .2s; }
.job:hover, .job:hover .job__desc, .job:hover .job__n, .job:hover .job__meta small { color: #fff; }
.job:hover .job__arrow { transform: translateX(14px); background: var(--cyan); }
.job:hover .job__arrow::after { border-color: var(--cyan); }

.wanted { background: var(--ink); padding: clamp(100px, 12vw, 170px) 0; text-align: center; overflow: hidden; }
.wanted__in { max-width: 560px; }
.wanted__glasses { width: 162px; height: auto; margin: 0 auto 34px; image-rendering: pixelated; transform: translateY(-160px); opacity: 0; transition: transform 1s cubic-bezier(.3,1.6,.5,1) .2s, opacity .3s .2s; }
.wanted__in.in .wanted__glasses { transform: none; opacity: 1; }
.wanted p { font-weight: 600; font-size: 17px; color: rgba(255,255,255,.85); margin: 22px auto 34px; max-width: 42ch; }

@media (max-width: 960px) {
  .chero__grid { grid-template-columns: 1fr; }
  .chero__illu { max-width: 340px; justify-self: center; margin-top: 20px; }
  .why__card { clip-path: none; grid-template-columns: 1fr; padding: 50px 0; min-height: 0; }
  .why__side { writing-mode: horizontal-tb; transform: none; margin: 0 0 20px; color: rgba(0,0,0,.55); text-align: center; }
  .why__side--l { position: static; translate: none; margin: 0 0 20px; color: rgba(255,255,255,.7); } .why__side--l b { color: var(--cyan); }
  .why__side--r { margin: 20px 0 0; }
  .why__side b { margin: 0 0 0 8px; }
  .dslide { grid-template-columns: 1fr; align-content: center; gap: 30px; }
  .dslide__copy { margin: 0; order: 2; }
  .dna__t { transform-origin: left center; }
  .dslide__img { width: min(420px, 78vw); }
  .job { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; padding: 26px var(--gut); }
  .job__n { grid-column: 1 / -1; }
  .job__meta { display: none; }
}
@media (max-width: 640px) {
  .chero { padding-top: 100px; }
  .dna { --dist: 700px; }
  .dna__titles { height: 96px; }
  .dna__t { width: 78vw; font-size: 40px; }
  .dna__slides { height: 58svh; margin-top: 10px; }
  .dslide { align-content: start; }
  .dna__dots { display: flex; top: auto; bottom: -34px; right: auto; left: var(--gut); }
}

/* achievements: Xbox-style toasts for real moments on the careers page */
.toasts { position: fixed; z-index: 120; left: 24px; bottom: 24px; display: grid; gap: 10px; pointer-events: none; }
.toast { display: grid; grid-template-columns: 46px auto; gap: 14px; align-items: center; min-width: 300px; padding: 10px 22px 10px 10px; background: rgba(10,10,12,.94); border: 1px solid rgba(24,255,241,.35);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 30px rgba(24,255,241,.12); border-radius: 40px; transform: translateY(30px) scale(.9); opacity: 0; transition: transform .45s cubic-bezier(.2,1.4,.4,1), opacity .3s; }
.toast.is-in { transform: none; opacity: 1; }
.toast__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--cyan); display: grid; place-items: center; }
.toast__icon img { width: 26px; filter: brightness(0); }
.toast small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.toast b { display: block; font-size: 15px; font-weight: 800; }
.toast b i { font-style: normal; color: var(--dim); font-weight: 600; margin-left: 6px; }
.sfrain { position: fixed; inset: 0; z-index: 110; pointer-events: none; overflow: hidden; }
.sfrain img { position: absolute; top: -60px; width: 40px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
@media (max-width: 640px) { .toasts { left: 16px; bottom: 18px; } .toast { min-width: 0; width: calc(100vw - 32px); } }

/* v4.3 review fixes */
h1, h2, h3, .case__title, .job__title, .mb__title { text-wrap: balance; }
p, .case__sum, .play__txt { text-wrap: pretty; }
.facts { align-items: center; }
.facts__src { align-self: center; }
.lg img { opacity: .72; }
.lg:hover img { opacity: 1; }
.logos__wrap { align-items: start; }
@media (min-width: 961px) { .logos__head { position: sticky; top: 30vh; } }
@media (max-width: 640px) {
  .mcta { left: 16px; right: 16px; height: 56px; }
  .bracket { display: none; }
  .case__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .foot__nav { gap: 14px 22px; }
  .dna__t:not(.is-on) { opacity: 0; }
  .dna__track { transform: none !important; }
  .dna__t { position: absolute; left: 0; top: 0; }
  .dna__titles { height: 92px; }
  .dslide { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
  .dslide__img { order: 1; width: 82vw; margin: 18px 0 0 4px; align-self: center; }
  .dslide__copy { order: 2; margin: 0; }
  .dna__slides { height: 64svh; }
}
@media (max-width: 760px) { .services__head { grid-template-columns: 1fr; } .services__head .label { margin-bottom: 0; } }

/* v4.4 review round 2 */
.case__media { background: #000; }
.case__media img, .case__media video { transform: scale(1.06); }
.case:hover .case__media img, .case:hover .case__media video { transform: scale(1.1); }
.toasts { left: auto; right: 24px; bottom: auto; top: 88px; }
.pslide.is-active { transition-delay: .18s; }
.play__pin::before { opacity: .45; }
.services { padding-bottom: clamp(36px, 4vw, 56px); }
.contact { padding-top: clamp(60px, 6vw, 96px); }
.facts { align-items: start; }
.facts__item { align-items: center; }
.lg img { filter: brightness(0) invert(1); opacity: .6; }
.dslide__copy { margin-left: max(0px, calc(16.666vw - var(--gut) - (100vw - min(100vw, var(--maxw))) / 2)); }
@media (max-width: 960px) { .dslide__copy { margin-left: 0; } }
@media (max-width: 640px) {
  .toasts { top: 76px; right: 16px; left: 16px; }
  .toast { width: auto; min-width: 0; padding: 8px 16px 8px 8px; grid-template-columns: 34px auto; }
  .toast__icon { width: 34px; height: 34px; } .toast__icon img { width: 20px; }
  .play__stage { margin-left: 0; }
  .play__stage::before { opacity: .6; }
  .play__grid { row-gap: 14px; }
  .play__rail { height: 170px; }
  .work-card { padding-left: 0; padding-right: 0; }
  .why__card { clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%); padding: 50px 0; }
  .why__body { padding: 0 40px; }
}

/* v4.4 signature motion: brand shapes do the revealing */
.case.reveal { transform: none; }
.case.reveal .case__media { clip-path: polygon(0 0, 0 50%, 0 100%, 0 100%, 0 50%, 0 0); transition: clip-path 1s var(--snap) calc(var(--d, 0s) + .05s), transform .5s var(--ease); }
.case.reveal.in .case__media { clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 0 0); }
.case.reveal.in:hover .case__media, .case.reveal.in:focus-visible .case__media { clip-path: polygon(100% 0, 94% 50%, 100% 100%, 0 100%, 8% 50%, 0 0); transition: clip-path .6s var(--snap), transform .5s var(--ease); }
.lg.reveal { transform: translateX(70px) skewX(-30deg); transition-duration: .9s; }
.lg.reveal.in { transform: none; }
.h1.reveal, .h2.reveal, .services__title.reveal, .jobs__title.reveal {
  clip-path: polygon(-10% 100%, 110% 100%, 110% 130%, -10% 130%); transform: translateY(46px); opacity: 1;
  transition: clip-path .9s var(--snap) var(--d, 0s), transform .9s var(--snap) var(--d, 0s); }
.h1.reveal.in, .h2.reveal.in, .services__title.reveal.in, .jobs__title.reveal.in { clip-path: polygon(-10% -30%, 110% -30%, 110% 130%, -10% 130%); transform: none; }
.modal.is-flip .modal__shell { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .case.reveal .case__media, .h1.reveal, .h2.reveal, .services__title.reveal, .jobs__title.reveal { clip-path: none !important; transform: none !important; }
}

/* v4.5 review round 3 */
.lines-grid::before, .lines-diag::before, .play__pin::before, .dna__pin::before {
  -webkit-mask: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent); mask: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent); }
.band span { -webkit-text-stroke-color: rgba(255,255,255,.72); }
.hero__grid { padding-bottom: 80px; }
@media (max-width: 640px) { .hero__title .line { margin-left: -.04em; padding-left: .04em; } }
.sechead__aside.reveal { transition-delay: .18s; }
@media (min-width: 961px) {
  .case:not(.case--big):not(.case--mid) .case__title { min-height: 1.9em; }
  .case:not(.case--big):not(.case--mid) .case__sum { min-height: 2.9em; }
}
.pslide__glow { opacity: .6; }
.pslide.is-next .pslide__glow { transform: scale(1.4); }
.dslide { transition: opacity .15s ease; }
.dslide.is-on { transition: opacity .3s ease .12s; }
.dna__t { width: clamp(320px, 46vw, 680px); }
.dna__slides { height: clamp(300px, 40svh, 380px); }
.dslide__img { width: min(460px, 36vw); }
.why__card { grid-template-columns: minmax(0, 1fr); }
.why__side--l { left: 8.5%; color: rgba(0,0,0,.55); }
.why__side--l b { color: var(--ink); }
.why__side--r { position: absolute; right: 5.5%; top: 50%; translate: 0 -50%; margin: 0; }
.job__main { padding-right: 40px; }
@media (max-width: 960px) { .why__side--l, .why__side--r { position: static; translate: none; } .why__side--l { color: rgba(0,0,0,.55); } .why__side--l b { color: var(--red); } }
@media (max-width: 640px) { .dna__dots { top: 4px; bottom: auto; right: var(--gut); left: auto; } }

/* page transition: a red chevron sweeps between pages */
.pt { position: fixed; inset: 0; z-index: 200; pointer-events: none; background: var(--red);
  clip-path: polygon(-30% 0, -30% 0, -10% 50%, -30% 100%, -30% 100%, -50% 50%); }
.pt.is-cover { clip-path: polygon(-30% 0, 130% 0, 150% 50%, 130% 100%, -30% 100%, -10% 50%); transition: clip-path .5s cubic-bezier(.7,0,.2,1); }
.pt.is-leave { clip-path: polygon(130% 0, 130% 0, 150% 50%, 130% 100%, 130% 100%, 150% 50%); transition: clip-path .6s cubic-bezier(.7,0,.2,1) .05s; }
.pt img { position: absolute; left: 50%; top: 50%; width: 72px; translate: -50% -50%; opacity: 0; transition: opacity .2s; }
.pt.is-cover img { opacity: 1; transition-delay: .25s; }

/* case film controls */
.modal__player { position: relative; background: #000; }
.modal__player video { background: #000; cursor: pointer; }
.vc { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 16px; padding: 30px 18px 14px; background: linear-gradient(transparent, rgba(0,0,0,.8));
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.modal__player.is-awake .vc, .modal__player.is-paused .vc, .vc:focus-within { opacity: 1; transform: none; }
.vc__play { width: 38px; height: 38px; flex: none; position: relative; display: grid; place-items: center; }
.vc__play::before { content: ""; position: absolute; inset: 0; background: var(--cyan); transform: skewX(var(--skew)); }
.vc__play i { position: relative; width: 12px; height: 14px; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); }
.is-paused .vc__play i { width: 0; height: 0; border: 0; border-left: 13px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.vc__bar { position: relative; flex: 1; height: 22px; cursor: pointer; touch-action: none; }
.vc__bar::before, .vc__buf, .vc__fill { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 4px; transform-origin: left; }
.vc__bar::before { background: rgba(255,255,255,.2); }
.vc__buf { background: rgba(255,255,255,.35); transform: scaleX(0); }
.vc__fill { background: var(--cyan); transform: scaleX(0); }
.vc__bar:hover::before, .vc__bar:hover .vc__buf, .vc__bar:hover .vc__fill { top: 8px; height: 6px; }
.vc__time { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: #fff; font-variant-numeric: tabular-nums; flex: none; }
.vc__btn { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 12px; letter-spacing: .02em; flex: none; padding: 6px 0; }
.vc__btn:hover { color: var(--cyan); }
.vc__fs { width: 22px; height: 18px; position: relative; }
.vc__fs i, .vc__fs::before, .vc__fs::after { content: ""; position: absolute; width: 8px; height: 8px; border: solid #fff; }
.vc__fs::before { left: 0; top: 0; border-width: 2px 0 0 2px; } .vc__fs::after { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.vc__fs i { right: 0; top: 0; border-width: 2px 2px 0 0; box-shadow: none; }
.vc__fs:hover::before, .vc__fs:hover::after, .vc__fs:hover i { border-color: var(--cyan); }
.modal__player:fullscreen { display: grid; place-items: center; } .modal__player:fullscreen video { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) { .vc { gap: 10px; padding: 24px 12px 10px; } .vc__time { font-size: 10px; } }

/* v4.6 review round 4 */
@media (min-width: 961px) { .case--big .case__media, .case--mid .case__media { aspect-ratio: auto; height: clamp(300px, 31vw, 470px); } }
.facts__item { align-items: flex-start; }
.facts__item span { padding-top: .5em; }
.services { padding-bottom: 20px; }
.bands__tip { margin-top: 22px; }
.dslide { transition: opacity .3s ease; }
.dslide.is-on { transition: opacity .3s ease .05s; }
.dslide__copy .btn { margin-left: 7px; }
@media (max-width: 960px) {
  .why__side--l { color: rgba(255,255,255,.7); text-align: center; }
  .why__side--l b { color: var(--cyan); }
}
@media (max-width: 640px) {
  .dslide__img { width: 80vw; max-width: 380px; }
  .dna__slides { height: 58svh; }
  .foot__nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 26px; }
  .chero__illu { max-width: 300px; filter: drop-shadow(10px 10px 0 rgba(24,255,241,.18)); margin-right: 12px; }
}
.pt.is-cover { transition-duration: .42s; }
.pt.is-cover img { transition-delay: .12s; }

/* v4.7 review round 5 */
.pt.is-cover { transition-duration: .32s; }
.pt.is-cover img { transition-delay: .08s; }
@media (min-width: 961px) {
  .modal__shell { align-items: start; }
  .modal__player { margin: 64px 0 40px 40px; align-self: start; }
  .modal__body { padding-top: 64px; }
  .case--mid .case__title { font-size: clamp(30px, 3.2vw, 52px); }
  .case--mid .kpi b { font-size: clamp(30px, 3vw, 46px); }
  .sechead { justify-content: flex-start; gap: clamp(40px, 12vw, 220px); }
}
@media (max-width: 640px) { .toasts { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); } }
@media (max-width: 640px) {
  .hero__stage { height: 92vw; margin-top: 14px; }
  .screen { right: 2%; left: -4%; width: auto; top: 0; aspect-ratio: 16/10; }
  .hero__illu { width: 64%; right: -8%; bottom: 0; }
  .hero__chev { display: none; }
}

/* v4.8 review round 6 */
.dslide { transition: opacity .18s ease; }
.dslide.is-on { transition: opacity .32s ease .16s; }
.dslide .dslide__copy { transform: translateY(14px); transition: transform .5s var(--ease) .16s; }
.dslide.is-on .dslide__copy { transform: none; }
.dna__dots i, .play__dots i { transition: none; }
.pslide__clip { transform-origin: 100% 50%; }
.pslide.is-next .pslide__clip { transform: translateX(40px) scale(1.15); }
.play__stage { margin-left: -6%; }
@media (min-width: 961px) { .modal__player { align-self: center; margin: 40px 0 40px 40px; } }
.modal__player video { object-fit: cover; }
.mb__kpi span { line-height: 1.35; display: block; }
.screen__media video { transform: scale(1.1); }
.case.reveal.in:hover .case__media, .case.reveal.in:focus-visible .case__media { clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 10% 50%, 0 0); }
.chero__title .line:nth-child(3) > span { transform-origin: 20% 60%; }
@keyframes slam { 0% { opacity: 0; transform: scale(1.3); } 60% { opacity: 1; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .work { padding: 48px 0 64px; }
  .sechead { margin-bottom: 30px; }
  .services { padding: 48px 0 20px; }
  .contact { padding: 64px 0 56px; }
  .join { margin-top: 24px; }
}

/* v4.9 review round 7 */
.modal__player video { opacity: 0; transition: opacity .35s ease; }
.modal__player.is-live video { opacity: 1; }
.vc__bar::before { background: rgba(255,255,255,.12); }
.vc__buf { background: rgba(255,255,255,.2); }
.dslide { transition: opacity .2s ease; }
.dslide.is-on { transition: opacity .3s ease .1s; }
.dslide .dslide__copy { transition-delay: .1s; }
.why__body p:last-child { text-align: left; max-width: 56ch; margin-left: auto; margin-right: auto; }
.work-card p, .join p { line-height: 1.5; }
.work-card p, .work-card__row { margin-left: .1em; }
.case__tag { transition: opacity .2s; }
.case:hover .case__tag { opacity: 0; }
.job__arrow, .job__arrow::after { background-color: rgba(0,0,0,.85); border-color: rgba(0,0,0,.85); }
.job__arrow::after { background: none; }
.job:hover .job__arrow { transform: translateX(6px); }
.job__line { display: none; font-size: 11px; color: rgba(0,0,0,.55); margin-top: 8px; }
.job:hover .job__line { color: rgba(255,255,255,.8); }
@media (max-width: 960px) { .job__line { display: block; } }
@media (max-width: 640px) {
  .foot__nav { grid-template-columns: repeat(2, auto); }
  .dslide { gap: 34px; }
}

/* v5.0 review round 8 */
@media (max-width: 640px) { .play__stage { margin-left: 0; } }
@media (min-width: 961px) {
  /* one right-column line at the wrap's centre, on the middle grid line */
  .sechead { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: end; }
  .sechead__aside { max-width: 420px; }
  .facts { grid-template-columns: 1fr 1fr; column-gap: 0; position: relative; }
  .facts__src { position: absolute; right: var(--gut); bottom: -26px; }
  .services__head { grid-template-columns: 1fr 1fr; gap: 0; }
  .services__head .sechead__aside { max-width: 420px; }
  .contact__grid { grid-template-columns: 1fr 1fr; column-gap: 0; }
  .join { margin-right: clamp(30px, 4vw, 70px); }
  .work-card { margin-left: calc(-1 * clamp(28px, 3.6vw, 60px)); }
  .case:not(.case--big):not(.case--mid) .case__title { font-size: clamp(18px, 1.6vw, 24px); min-height: 0; }
  .modal__player { align-self: start; margin: 64px 0 40px 40px; }
}
@media (min-width: 961px) and (max-width: 1279px) { .case:not(.case--big):not(.case--mid) .case__title { min-height: 1.9em; } }
/* DNA: the old slide leaves completely, the new one arrives in a quick stagger */
.dslide, .dslide.is-on { transition: opacity .18s ease; }
.dslide.is-on { transition: opacity 0s linear .18s; }
.dslide .dslide__copy { opacity: 0; transform: translateY(14px); transition: opacity .18s, transform .18s; }
.dslide.is-on .dslide__copy { opacity: 1; transform: none; transition: opacity .3s ease .2s, transform .5s var(--ease) .2s; }
.dslide .dslide__clip, .dslide .dslide__glow { opacity: 0; }
.dslide.is-on .dslide__clip { opacity: 1; transition: transform .65s ease-out, opacity .25s ease .26s; }
.dslide.is-on .dslide__glow { opacity: .8; transition: transform 1s ease, opacity .4s ease .26s; }
/* signature: the outlined GAMES. fills with white as the work scrolls past */
.fillword { background: linear-gradient(90deg, #fff, #fff) left / var(--fill, 0%) 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 2px #fff; }
.nowrap { white-space: nowrap; }

/* v5.1: letters never clipped. The reveal mask only exists while a line slides in */
.hero.is-settled .hero__title .line { overflow: visible; }
.chero__title .line { overflow: visible; }
.chero__title { font-size: clamp(46px, min(6.6vw, 14vh), 132px); }

/* squad polaroids in Badass wanted: our own campaign footage, no meme licences */
.wanted { position: relative; }
.squad { position: absolute; top: 50%; margin: 0; width: clamp(200px, 20vw, 290px); background: #fff; padding: 10px 10px 0; box-shadow: 0 30px 60px rgba(0,0,0,.5); z-index: 1; transition: transform .5s var(--ease); }
.squad--l { left: clamp(16px, 6vw, 120px); transform: translateY(-50%) rotate(-8deg); }
.squad--r { right: clamp(16px, 6vw, 120px); transform: translateY(-38%) rotate(7deg); }
.squad--l:hover { transform: translateY(-52%) rotate(-3deg) scale(1.04); }
.squad--r:hover { transform: translateY(-40%) rotate(2deg) scale(1.04); }
.squad__clip { aspect-ratio: 4/3; overflow: hidden; background: #111; }
.squad__clip video { width: 100%; height: 100%; object-fit: cover; }
.squad figcaption { color: var(--ink); font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 13px; line-height: 1.15; padding: 12px 4px 14px; text-align: left; }
.wanted__in { position: relative; z-index: 2; }
@media (max-width: 1100px) { .squad { width: 180px; } .squad--l { top: 16%; } .squad--r { top: 84%; } }
@media (max-width: 760px) {
  .wanted { padding-top: 260px; padding-bottom: 300px; }
  .squad { width: 46vw; max-width: 220px; }
  .squad--l { top: 40px; left: 16px; transform: rotate(-6deg); }
  .squad--r { top: auto; bottom: 50px; right: 16px; transform: rotate(5deg); }
}

/* job pages */
.jhero { background: var(--ink); padding: 130px 0 clamp(50px, 6vw, 80px); }
.jback { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; color: var(--dim); margin-bottom: 40px; }
.jback i { width: 9px; height: 9px; border-left: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg); transition: transform .3s var(--ease); }
.jback:hover { color: #fff; } .jback:hover i { transform: translateX(-4px) rotate(45deg); }
.jhero__title { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(44px, 7vw, 120px); line-height: .9; margin: 0; text-wrap: balance; padding-left: .04em; }
.jhero__sub { color: var(--red); font-weight: 800; font-size: clamp(18px, 1.8vw, 26px); margin: 18px 0 34px; }
.jchips { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.jchips li { position: relative; padding: 9px 18px; font-size: 13px; color: #fff; isolation: isolate; }
.jchips li::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(24,255,241,.5); transform: skewX(var(--skew)); }
.jchips small { color: var(--cyan); margin-right: 8px; font-size: 10px; }
.jbody { background: var(--ink); padding: 0 0 clamp(70px, 8vw, 110px); }
.jbody__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(40px, 6vw, 100px); align-items: start; }
.jintro { font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; margin: 0 0 clamp(50px, 6vw, 80px); max-width: 44ch; color: rgba(255,255,255,.85); }
.jintro b { color: #fff; background: linear-gradient(transparent 62%, rgba(253,0,67,.55) 62%); }
.jh { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(28px, 3vw, 44px); margin: 0 0 24px; }
.jh .cy { font-family: var(--mono); font-style: normal; font-size: .38em; vertical-align: middle; margin-right: 10px; letter-spacing: .1em; }
.quests, .abilities, .loot { list-style: none; margin: 0 0 clamp(50px, 6vw, 80px); padding: 0; }
.quests li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line-2); }
.q__n { color: var(--cyan); font-size: 13px; padding-top: 3px; }
.quests p, .abilities p, .loot p { margin: 0; font-weight: 600; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.8); }
.quests b, .abilities b, .loot b { color: #fff; }
.abilities li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 0; }
.abilities i { width: 14px; height: 14px; margin-top: 5px; border-top: 3px solid var(--red); border-right: 3px solid var(--red); transform: rotate(45deg); }
.loot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.loot li { position: relative; padding: 20px 22px; background: var(--ink-2); border: 1px solid var(--line-2); transition: border-color .2s, transform .3s var(--ease); }
.loot li:hover { border-color: var(--cyan); transform: translateY(-3px); }
.loot__slot { display: block; font-size: 10px; color: var(--cyan); margin-bottom: 10px; }
.jcard { position: sticky; top: 100px; background: #fff; color: var(--ink); padding: 30px 28px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
.jcard .label { color: var(--ink); }
.jcard__name { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 26px; line-height: .95; margin: 0 0 22px; }
.jcard dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0 0 26px; font-weight: 700; }
.jcard dt { font-size: 10px; color: rgba(0,0,0,.5); padding-top: 4px; }
.jcard dd { margin: 0; }
.jcard__apply { width: 100%; justify-content: center; display: flex; }
.jshare { display: block; width: 100%; margin-top: 14px; font-size: 11px; color: rgba(0,0,0,.6); text-align: center; padding: 8px; }
.jshare:hover { color: var(--red); }
.jready { padding: clamp(80px, 9vw, 130px) 0; }
.more { background: #fff; color: var(--ink); padding: clamp(60px, 7vw, 100px) 0; }
.more .label { color: var(--ink); }
.more__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.more__job { display: block; padding: 24px; border: 2px solid var(--ink); height: 100%; transition: background .2s, color .2s; }
.more__job b { display: block; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 20px; line-height: 1; margin-bottom: 10px; }
.more__job span { color: var(--red); font-weight: 700; font-size: 14px; }
.more__job:hover { background: var(--red); color: #fff; border-color: var(--red); } .more__job:hover span { color: #fff; }
@media (max-width: 960px) {
  .jbody__grid { grid-template-columns: 1fr; }
  .jcard { position: static; order: -1; }
  .more__list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .loot { grid-template-columns: 1fr; } .jhero { padding-top: 100px; } }

/* client wall: 14 brands, 7 by 2 under the headline */
.logos__wrap { grid-template-columns: 1fr; gap: clamp(30px, 4vw, 56px); }
.logos__head { position: static !important; }
.logos__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.lg { height: 120px; }
.lg--mono img { filter: grayscale(1) brightness(1.08) contrast(1.05); opacity: .78; }
.lg--mono:hover img { opacity: 1; }
@media (max-width: 960px) { .logos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .logos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg { height: 96px; } }
.lg img { max-width: calc(110px * var(--k, 1)); max-height: calc(40px * min(var(--k, 1), 1.6)); }
.lg--mono img { opacity: .9; }

/* v5.2 review round 9 */
.services__head .label { margin-bottom: 18px !important; }
.modal__left { display: grid; align-content: start; min-width: 0; }
.mb__kpis--left { margin: 0 0 40px 40px; }
.mb__kpis--left:empty { display: none; }
@media (max-width: 960px) { .mb__kpis--left { margin: 0; padding: 0 22px 10px; } }
.page-job .lines-grid::before, .page-job .lines-diag::before { -webkit-mask: none; mask: none; }
.page-job .loot { margin-bottom: 0; }
.jbody { padding-bottom: 0; }
.jready { padding-top: clamp(90px, 9vw, 120px); }
.why__body { text-align: left; }
.why__icon { margin-left: 0; }
.why__body p:last-child { margin-left: 0; }
.why__side--l { left: 8.5%; }
.why__side--r { right: 8.5%; }
.more__job { position: relative; padding-bottom: 54px; }
.more__job b { text-wrap: balance; }
.more__job span { display: block; line-height: 1.4; }
.more__job .job__arrow { position: absolute; left: 24px; bottom: 24px; justify-self: auto; }
.more__job:hover .job__arrow { background-color: #fff; } .more__job:hover .job__arrow::after { border-color: #fff; }
.squad--l .squad__clip video { object-position: 50% 25%; }
.dslide.is-on { transition: opacity 0s linear .1s; }
.dslide.is-on .dslide__clip { transition: transform .65s ease-out, opacity .25s ease .12s; }
.dslide.is-on .dslide__glow { transition: transform 1s ease, opacity .4s ease .12s; }
.dslide.is-on .dslide__copy { transition: opacity .3s ease .14s, transform .5s var(--ease) .14s; }
@media (max-width: 760px) {
  .squad--l { left: 26px; transform: rotate(-4deg); }
  .squad--r { right: 26px; transform: rotate(4deg); }
}
@media (max-width: 640px) { .play__stage::before { display: none; } }

/* v5.3 review round 10 */
/* DNA: a true overlap, nothing dips; the title row never fades */
.dslide, .dslide.is-on { transition: opacity .28s ease; }
.dslide.is-on { transition: opacity .32s ease .06s; }
.dslide .dslide__clip, .dslide .dslide__glow, .dslide .dslide__copy { opacity: 1 !important; }
.dslide .dslide__copy { transform: translateY(10px); transition: transform .5s var(--ease); }
.dslide.is-on .dslide__copy { transform: none; transition: transform .5s var(--ease) .06s; }
/* grid lines stay off text */
.page-job .lines-grid::before, .foot.lines-grid::before { opacity: .35; }
@media (max-width: 640px) { .lines-grid::before, .play__pin::before, .dna__pin::before { opacity: .45; } }
/* mobile pins sized to their content */
@media (max-width: 640px) {
  .dna__slides { height: 470px; }
  .play__rail { height: 150px; }
  .play__grid { row-gap: 10px; }
  .bracket { display: block; }
  .bracket::before, .bracket::after { width: 56px !important; height: 56px !important; }
  .join__dia { right: 16px; }
}
.case--mid .case__media img { object-position: 50% 0; transform-origin: 50% 0; }
/* the hover badge wears the button shape */
.cursor span { border-radius: 0; width: 88px; height: 36px; left: -44px; top: -18px; background: none; isolation: isolate; letter-spacing: .12em; }
.cursor span::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cyan); transform: skewX(var(--skew)); }
.work-card p, .join p, .more__job span, .jhero__sub, .wanted p { text-wrap: balance; }
.jobs__head { text-align: left; }
.jobs__title { margin: 0; }
@media (min-width: 1181px) { .play__pin { align-items: flex-start; padding-top: clamp(110px, 15svh, 160px); } }
@media (max-width: 1180px) and (min-width: 641px) { .play__pin { padding-top: 64px; } .play__grid { row-gap: 18px; } .play__rail { height: min(46svh, 420px); } }

/* v5.4 review round 11 */
/* incoming supernova waits collapsed on the frame's left edge, then wipes in along the chevron */
.pslide.is-next .pslide__clip { clip-path: polygon(0 0, 0 50%, 0 100%, 0 100%, 0 50%, 0 0); transform: none; }
.case--mid .case__media img { transform-origin: 50% 50%; }
/* one continuous grid from the supernovas to the footer */
.lines-grid::before, .lines-diag::before, .play__pin::before, .dna__pin::before { -webkit-mask: none; mask: none; }
@media (max-width: 640px) { .logos { padding: 64px 0; } .work { padding-top: 40px; } .facts-band { padding-top: 32px; } }
@media (min-width: 961px) {
  .modal__shell { grid-template-rows: auto auto; }
  .modal__left { display: contents; }
  .modal__player { grid-column: 1; grid-row: 1; }
  .modal__body { grid-column: 2; grid-row: 1; }
  .mb__kpis--left { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin: 0 40px 40px; }
}
.modal::backdrop { background: rgba(0,0,0,.94); }
.foot__legal { color: #a3a3a3; font-size: 13px; }
.foot__legal .mono { font-size: 11px; }

/* v5.5 review round 12 */
.case__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 8.5rem)); gap: 0 20px; }
.case--big .case__kpis, .case--mid .case__kpis { grid-template-columns: repeat(3, minmax(0, 10rem)); }
/* DNA: pictures overlap, words hand off in sequence, the CTA never dims */
.dslide .dslide__copy p { opacity: 0; transition: opacity .12s ease; }
.dslide.is-on .dslide__copy p { opacity: 1; transition: opacity .28s ease .16s; }
.dslide .dslide__copy .btn { transition: none; }
.q__n { color: rgba(255,255,255,.4); }
.more__job span { max-width: 34ch; }
.play__more { display: inline-block; }
@media (max-width: 640px) {
  .play__more { display: inline-block; position: absolute; right: 0; bottom: -34px; font-size: 14px; }
  .play__rail { margin-top: 30px; }
  .play__list button > b { margin-top: 10px; }
  .quests li { grid-template-columns: 32px 1fr; }
  .abilities li { grid-template-columns: 24px 1fr; }
  .work-card__row .btn { margin-left: 6px; }
  .case__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.why__side--r { writing-mode: vertical-rl; transform: rotate(180deg); }
.foot__brand img { opacity: .75; filter: brightness(0) invert(1); }
.chero.lines-grid::before { opacity: .9; }

/* ================= phones, designed as phones ================= */
.lg--dup { display: none; }
.swipe-hint { display: none; }
@media (max-width: 640px) {
  /* Where we play: a swipe carousel, controls under the media */
  .play { height: auto; }
  .play__pin { position: static; height: auto; padding: 72px 0 36px; display: block; }
  .play__grid { display: flex; flex-direction: column; align-items: stretch; gap: 18px; padding-top: 0; }
  .play__stage { width: auto; align-self: stretch; }
  .play__head { order: 1; }
  .play__head .play__nav { display: none; }
  .play__stage { order: 2; display: flex; gap: 12px; aspect-ratio: auto; margin: 4px calc(-1 * var(--gut)) 0; padding: 0 var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .play__stage::-webkit-scrollbar { display: none; }
  .pslide { position: relative; inset: auto; flex: 0 0 84%; aspect-ratio: 16/10; opacity: 1 !important; scroll-snap-align: start; pointer-events: auto; }
  .pslide__glow { display: none; }
  .pslide__clip, .pslide.is-active .pslide__clip, .pslide.is-prev .pslide__clip, .pslide.is-next .pslide__clip { clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0 100%, 11% 50%, 0 0) !important; transform: none !important; transition: filter .3s; }
  .pslide:not(.is-active) .pslide__clip { filter: brightness(.45) saturate(.6); }
  .play__more { display: none !important; }
  .play__rail { order: 4; height: auto; min-height: 0; margin: 0; }
  .play__list li { position: static; display: none; opacity: 1; transform: none; }
  .play__list li.is-active { display: block; animation: fadeIn .35s ease; }
  .play__dots { order: 3; display: flex; gap: 10px; align-items: center; }
  .play__dots::after { content: "Swipe"; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-left: auto; }

  /* work: the five cases as a snap carousel */
  .cases { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; scrollbar-width: none; }
  .cases::-webkit-scrollbar { display: none; }
  .case, .case--big, .case--mid { flex: 0 0 84%; scroll-snap-align: start; }
  .case .case__media, .case--big .case__media, .case--mid .case__media { aspect-ratio: 4/3; height: auto; }
  .case__title, .case--big .case__title, .case--mid .case__title { font-size: 24px; min-height: 0; }
  .case__kpis, .case--big .case__kpis, .case--mid .case__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .swipe-hint { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--dim); margin: -14px 0 18px; }
  .swipe-hint i { width: 26px; height: 2px; background: var(--cyan); position: relative; }
  .swipe-hint i::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); transform: rotate(45deg); }

  /* client logos: two drifting rows */
  .logos__wrap { overflow: hidden; }
  .logos__grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, 84px); grid-auto-columns: 132px; width: max-content; animation: logodrift 38s linear infinite; }
  .lg--dup { display: grid; }
  .lg { height: 84px; }
  .logos .lg.reveal { opacity: 1; transform: none; }
  @keyframes logodrift { to { transform: translateX(-50%); } }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .logos__grid { animation: none; } }

.japply { display: none; }
@media (max-width: 640px) {
  .japply { position: fixed; z-index: 85; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 56px; display: flex; justify-content: center; align-items: center; gap: 12px; color: #fff; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 14px; isolation: isolate; transform: translateY(160%); transition: transform .4s var(--ease); }
  .japply::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: skewX(var(--skew)); }
  .japply.is-on { transform: none; }
  .japply span { max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-job .foot { padding-bottom: 90px; }
}

/* six values: a little more scroll per step */
.dna { --dist: 1150px; }
@media (max-width: 640px) { .dna { --dist: 1000px; } }
.dna__t .r { white-space: nowrap; }

/* services: four pillars, each with the case that proves it */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 70px); }
.pillar { position: relative; padding: 24px 22px 22px; border: 1px solid var(--line-2); background: var(--ink-2); display: flex; flex-direction: column; min-height: 250px; overflow: hidden; isolation: isolate; transition: border-color .25s; }
.pillar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.92) 70%), var(--bg) center / cover; opacity: 0; transform: scale(1.06); transition: opacity .4s, transform .8s var(--ease); }
.pillar:hover { border-color: var(--cyan); } .pillar:hover::before { opacity: 1; transform: none; }
.pillar__n { font-size: 11px; color: var(--cyan); }
.pillar__t { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(22px, 1.9vw, 28px); line-height: .95; margin: 14px 0 12px; text-wrap: balance; }
.pillar p { margin: 0 0 22px; color: rgba(255,255,255,.78); font-weight: 600; font-size: 15px; line-height: 1.45; }
.pillar__proof { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; color: var(--dim); text-align: left; }
.pillar__proof b { color: #fff; font-weight: 700; }
.pillar__proof i { width: 18px; height: 2px; background: var(--red); position: relative; transition: transform .3s var(--ease); }
.pillar__proof i::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid var(--red); border-right: 2px solid var(--red); transform: rotate(45deg); }
.pillar__proof:hover b { color: var(--cyan); } .pillar__proof:hover i { transform: translateX(4px); }
@media (max-width: 1100px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pillars { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: 0; margin-right: 0; padding-right: var(--gut); scrollbar-width: none; }
  .pillars::-webkit-scrollbar { display: none; }
  .pillar { flex: 0 0 78%; scroll-snap-align: start; min-height: 230px; }
  .pillar::before { opacity: .55; transform: none; }
  .logos__wrap { grid-template-columns: minmax(0, 1fr); }
  .logos__grid { justify-self: start; }
}

@media (max-width: 960px) and (min-width: 641px) { .logos__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .lg { height: 96px; } }
@media (max-width: 1180px) and (min-width: 641px) { .play__rail { height: min(60svh, 560px); overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(transparent, #000 18%, #000 82%, transparent); } }
@media (max-width: 1180px) and (min-width: 641px) { .play__stage { margin-left: 0; } }

/* v6.1 review: phone gutters, solid apply band, tablet leaks, mobile rhythm */
@media (max-width: 640px) {
  .cases, .play__stage, .pillars { scroll-padding-inline: var(--gut); }
  .pillars { margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; }
  .pillar::before { opacity: 0 !important; }
  .case__kpis, .case--big .case__kpis, .case--mid .case__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .work { padding-bottom: 48px; }
  .logos { padding: 56px 0 48px; }
  .why { padding: 64px 0; }
  .jobs { padding-top: 64px; }
  .work-card { padding: 28px 22px; margin-left: 0; }
  .japply { left: 0; right: 0; bottom: 0; height: auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: #070707; display: block; color: #fff; transform: translateY(110%); }
  .japply::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: linear-gradient(transparent, #070707); transform: none; z-index: 0; }
  .japply.is-on { transform: none; }
  .japply__btn { position: relative; height: 52px; display: flex; justify-content: center; align-items: center; gap: 12px; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 14px; isolation: isolate; }
  .japply__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red); transform: skewX(var(--skew)); }
  .japply__btn span { max-width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-job .foot { padding-bottom: 110px; }
}
@media (max-width: 1180px) and (min-width: 641px) {
  .play__list li.is-prev, .play__list li.is-prev2, .play__list li.is-prev3 { opacity: 0; }
  .case:not(.case--big):not(.case--mid) .case__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
}
.lg img { max-width: min(calc(110px * var(--k, 1)), 82%); }
.jobs { padding-top: clamp(64px, 7vw, 100px); }
.dslide, .dslide.is-on { transition: opacity .22s ease; }
.dslide.is-on { transition: opacity .26s ease .04s; }
/* pillars row is its own .wrap: keep its gutter, no negative margin */
@media (max-width: 640px) { .pillars { margin: 0; padding: 0 var(--gut) 8px; } .page-careers .wanted { padding: 72px 0 80px; } }
/* the white quest board slides up over the empty tail of the DNA pin */
@media (min-width: 641px) { .page-careers .jobs { position: relative; z-index: 2; margin-top: -14svh; } }
.pslide.is-prev .pslide__clip { transform: translateX(40px) scale(1); }

/* case pages (/work/<slug>/): static, crawlable twin of the case modal */
.cfilm { background: var(--ink); padding: 0 0 clamp(50px, 6vw, 90px); }
.cfilm__frame { margin: 0; aspect-ratio: 16/9; background: #000; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
.cfilm__frame video, .cfilm__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpara { margin: 0 0 clamp(40px, 5vw, 64px); font-weight: 600; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 60ch; }
.page-case .abilities { margin: 0 0 clamp(40px, 5vw, 64px); padding: 0; list-style: none; }
.ckpis { display: grid; gap: 18px; margin: 0 0 26px; }
.ckpis .kpi b { color: var(--ink); }
.ckpis .kpi:first-child b { color: var(--red); }
.ckpis .kpi span { color: rgba(0,0,0,.6); max-width: none; }
.cases > .case > a { color: inherit; text-decoration: none; display: block; }
@media (max-width: 960px) { .page-case .jbody__grid { grid-template-columns: 1fr; } .page-case .jcard { position: static; } .cfilm__frame { clip-path: none; } }

/* job pages v2: a quest briefing, not a document */
.jhero--quest { position: relative; overflow: hidden; padding-bottom: clamp(60px, 7vw, 100px); }
.jhero__ghost { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-40%) rotate(-4deg); pointer-events: none; opacity: .5; }
.jhero__ghost .band__track { gap: 80px; }
.jhero__ghost span { font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(120px, 17vw, 300px); line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(253,0,67,.45); }
.jhero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.jhero--quest .jhero__title { font-size: clamp(48px, 6.6vw, 112px); }
.jhero__cta { margin-top: 36px; }
.jhero__shot { position: relative; margin: 0; aspect-ratio: 4/3.4; }
.jhero__clip { position: absolute; inset: 0; clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); overflow: hidden; background: var(--ink-3); animation: shotIn 1.1s var(--snap) .2s both; }
.jhero__clip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: shotZoom 8s var(--ease) both; }
.jhero__glow { position: absolute; inset: -10%; background: radial-gradient(#18fff1, transparent 70%); opacity: .22; filter: blur(30px); }
.jhero__shot::after { content: ""; position: absolute; right: -2%; bottom: -4%; width: 38%; height: 20%; background: var(--red); clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%); }
@keyframes shotIn { from { clip-path: polygon(18% 0, 18% 0, 0 100%, 0 100%); } }
@keyframes shotZoom { from { transform: scale(1.25); } }

.page-job:not(.page-case) .quests { counter-reset: q; }
.page-job:not(.page-case) .quests li { position: relative; grid-template-columns: clamp(70px, 7vw, 110px) 1fr; align-items: center; padding: 22px 0; isolation: isolate; }
.page-job:not(.page-case) .quests li::before { content: ""; position: absolute; inset: 0 -20px; z-index: -1; background: linear-gradient(90deg, rgba(253,0,67,.18), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.page-job:not(.page-case) .quests li:hover::before { transform: none; }
.q__n { font-family: var(--display); font-weight: 900; font-style: italic; font-size: clamp(40px, 4vw, 64px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--cyan); transition: color .3s; }
.quests li:hover .q__n { color: var(--cyan); }
.quests li p { font-size: 17px; }

.abilities--check li { grid-template-columns: 40px 1fr; align-items: center; padding: 14px 0; }
.chk { position: relative; width: 24px; height: 24px; border: 2px solid var(--line-2); transform: skewX(var(--skew)); transition: border-color .3s, background .3s; transition-delay: calc(var(--k) * .08s + .3s); }
.chk::after { content: ""; position: absolute; left: 6px; top: 1px; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(var(--k) * .08s + .45s); }
.abilities--check li.in .chk { border-color: var(--cyan); background: var(--cyan); }
.abilities--check li.in .chk::after { transform: rotate(45deg) scale(1); }

.loot li { clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); border: 0; background: linear-gradient(160deg, var(--ink-2), #0c0c0c); padding: 24px 30px; --rc: var(--cyan); }
.loot li:hover { --rc: var(--red); }
.loot li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rc); box-shadow: 0 0 24px var(--rc); }
.loot li:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--rc); }

.jcard--quest { background: var(--red); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: skewY(-2deg); }
.jcard--quest > * { transform: skewY(2deg); }
.jcard--quest .label, .jcard--quest dt { color: rgba(255,255,255,.75); }
.jcard--quest .jcard__name { color: #fff; }
.jcard--quest .jshare { color: rgba(255,255,255,.8); }
.jcard--quest .btn { --hover: #fff; }

.irl { background: var(--ink); padding: clamp(60px, 7vw, 100px) 0; overflow: hidden; }
.irl__band .band__track { gap: 18px; }
.irl__f { margin: 0; width: clamp(260px, 30vw, 440px); aspect-ratio: 16/9; flex: none; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); overflow: hidden; }
.irl__f img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform .6s var(--ease), filter .3s; }
.irl__f:hover img { transform: scale(1.06); filter: saturate(1.2); }

@media (max-width: 960px) {
  .jhero__grid { grid-template-columns: 1fr; }
  .jhero__shot { aspect-ratio: 16/10; order: -1; margin-bottom: 10px; }
  .jcard--quest { transform: none; } .jcard--quest > * { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .jhero__clip, .jhero__clip img { animation: none; } }
.page-job:not(.page-case) .jbody { padding-top: clamp(60px, 7vw, 100px); }
.page-job:not(.page-case) .jcard { top: 110px; }