/* Arial resized to Manrope's metrics, so text doesn't jump when the web font arrives. */
@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Helvetica Neue"),local("Helvetica");size-adjust:103.5%;ascent-override:103%;descent-override:29%;line-gap-override:0%}
@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-400.woff2") format("woff2"), url("/fonts/manrope-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-500.woff2") format("woff2"), url("/fonts/manrope-500.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-600.woff2") format("woff2"), url("/fonts/manrope-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-700.woff2") format("woff2"), url("/fonts/manrope-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  --paper: #f3f2ee;
  --ink: #242522;
  --muted: #666760;
  --line: #d3d3cc;
  --accent: #c7fd53;
  --gutter: clamp(22px, 4.15vw, 80px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max: 1800px;
  color-scheme: light;
  font-family: Manrope, "Manrope Fallback", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  margin: 0;
}
::selection {
  background: var(--accent);
  color: #171913;
}
body {
  scrollbar-color: #85867b var(--paper);
}
button,
a,
input {
  touch-action: manipulation;
}
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 5px;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
  opacity: 0.5;
}
button,
dialog {
  border: 0;
}
button {
  background: none;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
img,
video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 500;
  text-wrap: balance;
}
h1 {
  font-size: clamp(50px, 6.5vw, 96px);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
h2 {
  font-size: clamp(32px, 3.3vw, 52px);
  line-height: 1.14;
  letter-spacing: -0.035em;
}
p {
  line-height: 1.6;
}
main {
  max-width: var(--max);
  margin: auto;
}
button[hidden],
[hidden] {
  display: none !important;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 10px;
  clip-path: inset(100%);
  padding: 12px;
  background: var(--ink);
  color: white;
  z-index: 99;
}
.skip-link:focus {
  clip-path: none;
}
.site-header {
  height: 100px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  border-bottom: 1px solid var(--line);
  max-width: var(--max);
  margin: auto;
  position: relative;
  z-index: 10;
}
.wordmark {
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.wordmark span {
  font-size: 11px;
  vertical-align: top;
  display: inline-block;
  margin: 3px 0 0 4px;
  letter-spacing: 0;
}
.site-header > nav {
  display: flex;
  gap: 36px;
  margin-left: auto;
  margin-right: 9vw;
}
.site-header nav a {
  font-size: 14px;
  position: relative;
  padding: 10px 0;
}
.site-header nav a:after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.site-header nav a:hover:after,
.site-header nav a[aria-current]:after {
  transform: scaleX(1);
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}
.contact-link svg {
  width: 18px;
}
.menu-toggle {
  display: none;
}
.home-intro {
  padding: 64px var(--gutter) 62px;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  align-items: end;
  gap: 48px;
}
.intro-note {
  padding-bottom: 5px;
  max-width: 380px;
  justify-self: end;
}
.intro-note p {
  font-size: 15px;
  line-height: 1.65;
}
.intro-note p + p {
  margin-top: 15px;
  color: var(--muted);
}
.down-link {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  font-size: 13px;
  margin-top: 25px;
}
.down-link svg {
  width: 18px;
}
.feature {
  margin: 0 var(--gutter);
}
.hero-art {
  background: #06070a;
  position: relative;
  height: clamp(440px, 41vw, 680px);
  overflow: hidden;
  color: #f7f7f2;
}
.scene-fallback {
  position: absolute;
  inset: 0 0 0 auto;
  width: 66%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
  transition: opacity 0.7s;
}
.scene-ready .scene-fallback {
  opacity: 0;
}
#broadcast-scene {
  position: absolute;
  right: 0;
  top: 0;
  width: 72%;
  height: 100%;
  pointer-events: none;
}
#broadcast-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.feature-top {
  position: absolute;
  top: 30px;
  left: 36px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: #c3c4cb;
  z-index: 1;
}
.motion-toggle {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  color: #dbdbe0;
}
.motion-toggle:before {
  content: "";
  height: 10px;
  width: 7px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.motion-toggle[aria-pressed="true"]:before {
  border: 0;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  height: 0;
  width: 0;
}
.feature-copy {
  position: absolute;
  left: 4%;
  bottom: 12%;
  z-index: 1;
}
.feature-copy h2 {
  font-size: clamp(66px, 8vw, 96px);
  letter-spacing: -0.04em;
  line-height: 1;
}
.feature-copy p {
  font-size: clamp(16px, 1.65vw, 24px);
  margin-top: 12px;
}
.watch-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  padding: 16px 24px;
  border-radius: 30px;
  margin-top: 28px;
  transition:
    background 0.25s,
    transform 0.35s var(--ease);
}
.watch-button svg {
  width: 18px;
  height: 18px;
}
.watch-button:hover {
  background: var(--accent);
  transform: translateY(-2px);
}
.feature-project {
  position: absolute;
  right: 36px;
  bottom: 32px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.feature-project svg {
  width: 18px;
}
.feature-caption {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 12px;
  color: var(--muted);
}
.feature-caption strong {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
  margin-right: 30px;
}
.feature-caption > span:last-child {
  font-size: 12px;
}
.section-space {
  margin: 115px var(--gutter) 0;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 38px;
}
.section-head h2 {
  font-size: 40px;
}
.small-count {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--muted);
  vertical-align: top;
  display: inline-block;
  margin: 8px 0 0 10px;
}
.section-head p {
  font-size: 14px;
  color: var(--muted);
  max-width: 260px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  border-bottom: 1px solid var(--ink);
  padding: 0 0 8px;
}
.text-link svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
}
.text-link:hover svg,
.contact-link:hover svg {
  transform: translate(3px, -3px);
}
.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px 28px;
  align-items: start;
}
.selected .project-grid {
  grid-template-columns: 1.12fr 1fr;
}
.project-image {
  display: block;
  position: relative;
  background: var(--project-color, #deded7);
  overflow: hidden;
  aspect-ratio: 1.28;
}
.project-card:nth-child(even) .project-image {
  aspect-ratio: 1.28;
}
.selected .project-card:nth-child(2) {
  padding-top: 110px;
}
.selected .project-card:nth-child(3) {
  margin-right: 14%;
  margin-top: -40px;
}
.selected .project-card:nth-child(4) {
  margin-left: -10%;
  padding-top: 75px;
}
.project-image img,
.project-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.8s var(--ease),
    opacity 0.5s;
}
.project-image video {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.project-image.is-playing video {
  opacity: 1;
}
.project-image:hover img {
  transform: scale(1.035);
}
.image-action {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--paper);
  padding: 13px 15px;
  font-size: 12px;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.4s var(--ease);
}
.image-action svg {
  width: 16px;
  height: 16px;
}
.project-image:hover .image-action,
.project-image:focus-visible .image-action {
  clip-path: inset(0);
}
.project-caption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 18px;
  align-items: baseline;
}
.project-caption h3 {
  font-size: 21px;
  letter-spacing: -0.025em;
}
.project-caption p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.project-caption > span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.section-end {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  margin-top: 50px;
}
.section-end p {
  font-size: 14px;
  color: var(--muted);
}
.practice {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  border-top: 1px solid var(--line);
  padding-top: 58px;
}
.practice .text-link {
  margin-top: 34px;
}
.practice-copy > p:first-child {
  font-size: 25px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.practice-copy > p + p {
  font-size: 16px;
  color: var(--muted);
  margin-top: 22px;
  max-width: 540px;
}
.disciplines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 20px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 34px;
  font-size: 12px;
}
.latest-section {
  margin-bottom: 120px;
}
.latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 28px;
}
.latest-image {
  display: block;
  aspect-ratio: 1.16;
  position: relative;
  overflow: hidden;
  background: #dfdfd7;
}
.latest-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.latest-card:hover img {
  transform: scale(1.04);
}
.latest-card:first-child .latest-image > img {
  object-position: 50% 36%;
}
.round-arrow {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  position: absolute;
  bottom: 15px;
  right: 15px;
  background: var(--paper);
  border-radius: 50%;
  transition: transform 0.4s var(--ease);
}
.latest-card:hover .round-arrow {
  transform: rotate(8deg);
}
.round-arrow svg {
  width: 19px;
}
.latest-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 19px;
}
.latest-card h3 {
  font-size: 22px;
  line-height: 1.3;
  margin-top: 9px;
  letter-spacing: -0.025em;
}
.latest-summary {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  max-width: 35ch;
}
.site-footer {
  background: #20221f;
  color: #f3f2ee;
  padding: 74px var(--gutter) 24px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 60px;
  max-width: var(--max);
  margin: 0 auto;
}

.contact-intro h2 {
  font-size: clamp(44px, 5.8vw, 80px);
}
.contact-big {
  display: inline-flex;
  align-items: center;
  gap: 35px;
  border-bottom: 1px solid #979b8e;
  padding-bottom: 9px;
  font-size: 16px;
  margin-top: 34px;
}
.contact-big svg {
  width: 20px;
}
.contact-options {
  padding-top: 40px;
}
.contact-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid #51544b;
  padding: 24px 0;
}
.contact-option:first-child {
  border-top: 1px solid #51544b;
}
.contact-option strong {
  font-size: 19px;
  font-weight: 500;
}
.contact-option small {
  display: block;
  font-size: 12px;
  color: #bfc2b7;
  line-height: 1.7;
  margin-top: 8px;
}
.contact-option > svg {
  width: 24px;
  transition: transform 0.3s var(--ease);
}
.contact-option:hover > svg {
  transform: translate(3px, -3px);
}
.email-line {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  padding-top: 28px;
}
.email-line button {
  padding: 4px 8px;
  border: 1px solid #65695c;
  border-radius: 4px;
  font-size: 11px;
}
.copy-status {
  font-size: 11px;
  color: var(--accent);
}
.footer-bottom {
  grid-column: 1/-1;
  border-top: 1px solid #51544b;
  padding-top: 24px;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
.footer-bottom .wordmark {
  font-size: 20px;
}
.footer-bottom > span {
  font-size: 11px;
  color: #bfc2b7;
}
.footer-bottom > div {
  display: flex;
  gap: 25px;
  font-size: 11px;
  align-items: center;
}
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-bottom svg {
  width: 12px;
  height: 12px;
}
.page-intro {
  padding: 80px var(--gutter) 64px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 50px;
}
.page-intro > p {
  font-size: 15px;
  max-width: 340px;
  margin-bottom: 8px;
  color: var(--muted);
}
.page-intro h1 {
  font-size: clamp(48px, 6vw, 88px);
}
.work-index,
.latest-index {
  margin: 0 var(--gutter) 110px;
}
.filter-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}
.filter-bar > div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-bar button {
  padding: 9px 15px;
  font-size: 12px;
  border: 1px solid transparent;
  border-radius: 25px;
  transition: background 0.25s;
}
.filter-bar button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.filter-bar button:not([aria-pressed="true"]):hover {
  border-color: var(--line);
}
.filter-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.case-intro {
  margin: 55px var(--gutter) 42px;
}
.back-link {
  font-size: 12px;
  display: inline-block;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
  margin-bottom: 45px;
}
.back-link:before {
  content: "‹";
  margin-right: 12px;
}
.case-intro h1 {
  font-size: clamp(48px, 7.5vw, 96px);
}
.case-title-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
}
.case-title-bottom p {
  font-size: 18px;
}
.case-title-bottom > span {
  font-size: 13px;
  color: var(--muted);
}
.case-hero {
  position: relative;
  margin: 0 var(--gutter);
  background: var(--project-color);
  max-height: 850px;
  overflow: hidden;
}
.case-hero > img {
  width: 100%;
  height: 100%;
  max-height: 850px;
  object-fit: cover;
  aspect-ratio: 1.8;
}
.case-hero .watch-button {
  position: absolute;
  bottom: 32px;
  left: 32px;
}
.case-hero.cstv-cover {
  height: 650px;
  background: #06070a;
}
.cstv-cover > img {
  object-fit: contain;
  aspect-ratio: auto;
}
.case-overview {
  margin: 75px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 100px;
}
.case-overview h2,
.case-story > div > h2 {
  font-size: 25px;
}
.case-overview > p {
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.5;
  letter-spacing: -0.02em;
}
.case-overview dl {
  font-size: 13px;
  margin: 32px 0 0;
}
.case-overview dt {
  color: var(--muted);
  margin-top: 20px;
  font-size: 11px;
}
.case-overview dd {
  margin: 7px 0 0;
  max-width: 260px;
  line-height: 1.7;
}
.case-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 var(--gutter);
}
.case-gallery figure {
  background: #deded8;
  align-self: center;
}
.case-gallery img {
  width: 100%;
  height: auto;
}
.case-story {
  margin: 90px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 100px;
}
.prose {
  font-size: 16px;
  line-height: 1.85;
  max-width: 72ch;
}
.prose p {
  line-height: 1.85;
  margin-bottom: 23px;
}
.prose h2 {
  font-size: 32px;
  margin: 46px 0 22px;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h3 {
  font-size: 25px;
  margin: 30px 0 20px;
}
.prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.prose .text-link {
  text-decoration: none;
}
.prose strong {
  font-weight: 700;
}
.prose blockquote {
  font-size: 23px;
  margin: 35px 0;
  letter-spacing: -0.025em;
}
.prose ul {
  padding-left: 20px;
}
.secondary-gallery figure:last-child:nth-child(odd) {
  grid-column: 1/-1;
}
.next-project {
  position: relative;
  background: #e8e8e1;
  margin: 100px var(--gutter) 100px;
  padding: 45px;
  overflow: hidden;
  min-height: 225px;
}

.next-project > a {
  display: flex;
  align-items: center;
  gap: 50px;
  width: 70%;
  position: relative;
  z-index: 1;
  margin-top: 25px;
}
.next-project h2 {
  font-size: clamp(30px, 4.3vw, 60px);
}
.next-project img {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 27%;
  object-fit: cover;
}
.next-project > a > svg {
  width: 38px;
  height: 38px;
}
.latest-index {
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.article-page {
  padding: 55px var(--gutter) 110px;
}
.article-heading {
  max-width: 1000px;
  margin: 0 auto 50px;
}
.article-heading h1 {
  font-size: clamp(45px, 6vw, 85px);
}
.article-heading > p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px;
}
.article-cover {
  width: 100%;
  max-height: 680px;
  object-fit: contain;
  background: #e4e4dd;
}
.article-prose {
  margin: 65px auto 0;
}
.article-film {
  max-width: 780px;
  margin: 35px auto;
}
.film-link {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 15px;
  width: 100%;
  padding: 25px;
  border: 1px solid var(--line);
  text-align: left;
}
.film-link svg:last-child {
  margin-left: auto;
}
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin: 0 var(--gutter);
}
.about-layout figure img {
  aspect-ratio: 1/1.15;
  object-fit: cover;
  object-position: 43% 50%;
}
.about-layout figcaption {
  font-size: 12px;
  color: var(--muted);
  padding-top: 20px;
  line-height: 1.8;
}
.about-layout figcaption a {
  display: flex;
  width: fit-content;
  font-size: 12px;
  margin-top: 16px;
}
.about-layout .prose {
  padding-top: 12px;
}
.about-layout .prose h2 {
  font-size: 38px;
  line-height: 1.2;
  margin-bottom: 30px;
}
.experience-list {
  margin-bottom: 110px;
}
.experience-list h2 {
  margin-bottom: 30px;
}
.experience-list > div {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 25px 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.experience-list > div > a,
.experience-list > div > span {
  font-size: 25px;
  display: flex;
  align-items: center;
  gap: 25px;
  letter-spacing: -0.025em;
}
.experience-list > div p {
  font-size: 13px;
  color: var(--muted);
}
.contact-page {
  padding: 85px var(--gutter) 90px;
}
.contact-page h1 {
  font-size: clamp(48px, 6.5vw, 96px);
}
.contact-page > p {
  margin-top: 35px;
  font-size: 18px;
  color: var(--muted);
}
.contact-person {
  font-size: 12px;
  margin-top: 35px;
}
.social-section {
  margin: 60px var(--gutter);
}
.social-section .section-head > div {
  display: flex;
  gap: 30px;
}
.reel-links {
  border-top: 1px solid var(--line);
}
.reel-links > a {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.reel-links > a > span:last-child {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
}
.player-dialog {
  padding: 0;
  background: #11120f;
  color: var(--paper);
  width: min(1000px, 94vw);
  max-width: 94vw;
  max-height: 92dvh;
  box-shadow: 0 20px 100px #0005;
}
.player-dialog::backdrop {
  background: #111b;
}
.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
}
.player-header h2 {
  font-size: 15px;
  letter-spacing: 0;
}
.player-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.player-body {
  display: flex;
  justify-content: center;
  background: #060705;
}
.player-body video {
  width: 100%;
  max-height: 72dvh;
  object-fit: contain;
}
.player-body iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}
.player-status {
  font-size: 13px;
  padding: 0 22px 16px;
  line-height: 1.6;
}
.player-status:empty {
  padding: 0;
}
.player-status a {
  text-decoration: underline;
}
body:has(dialog[open]) {
  overflow: hidden;
}
@media (min-width: 1600px) {
  .intro-note {
    max-width: 440px;
  }
  .intro-note p {
    font-size: 17px;
  }
  .home-intro {
    padding-top: 80px;
    padding-bottom: 75px;
  }
  .feature-copy {
    bottom: 14%;
  }
}
@media (max-width: 1000px) {
  .site-header {
    height: 84px;
  }
  .site-header > nav {
    margin-right: 4vw;
    gap: 24px;
  }
  .home-intro {
    grid-template-columns: 1.35fr 1fr;
    gap: 32px;
    padding-top: 50px;
    padding-bottom: 44px;
  }
  .intro-note p {
    font-size: 13px;
  }
  .desktop-break {
    display: none;
  }
  .hero-art {
    height: 470px;
  }
  .feature-top {
    left: 25px;
    right: 25px;
  }
  .feature-copy {
    left: 25px;
  }
  .feature-project {
    right: 25px;
  }
  .section-space {
    margin-top: 85px;
  }
  .section-head h2 {
    font-size: 34px;
  }
  .practice {
    gap: 40px;
  }
  .practice-copy > p:first-child {
    font-size: 21px;
  }
  .site-footer {
    gap: 40px;
  }
  .contact-option strong {
    font-size: 17px;
  }
  .page-intro {
    gap: 30px;
    padding-top: 60px;
  }
  .page-intro > p {
    font-size: 13px;
  }
  .case-overview,
  .case-story {
    gap: 50px;
    grid-template-columns: 1fr 1.7fr;
  }
  .about-layout {
    gap: 45px;
  }
  .footer-bottom > span {
    display: none;
  }
  .latest-card h3 {
    font-size: 20px;
  }
}
@media (max-width: 700px) {
  html {
    scroll-padding-top: 30px;
  }
  .site-header {
    height: 76px;
    gap: 20px;
  }
  .wordmark {
    font-size: 21px;
  }
  .site-header > nav,
  .site-header > .contact-link {
    display: none;
  }
  .menu-toggle {
    display: flex;
    gap: 13px;
    align-items: center;
    font-size: 12px;
    padding: 10px 0;
  }
  .menu-lines {
    display: block;
    width: 19px;
    height: 8px;
    border-top: 1px solid;
    border-bottom: 1px solid;
  }
  .site-header #mobile-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 76px;
    background: var(--paper);
    padding: 20px var(--gutter) 30px;
    box-shadow: 0 15px 20px #20221f0d;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--line);
  }
  .site-header #mobile-menu a {
    font-size: 23px;
    width: fit-content;
  }
  .home-intro {
    grid-template-columns: 1fr;
    padding-top: 38px;
    padding-bottom: 35px;
    gap: 25px;
  }
  .home-intro h1 {
    font-size: clamp(53px, 10.7vw, 75px);
  }
  .intro-note {
    justify-self: start;
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 20px;
  }
  .intro-note p {
    font-size: 13px;
    max-width: 36ch;
  }
  .intro-note p + p {
    display: none;
  }
  .intro-note .down-link {
    font-size: 0;
    gap: 0;
    margin: 0;
    align-self: center;
  }
  .down-link svg {
    width: 22px;
  }
  .hero-art {
    height: 535px;
  }
  .feature-top {
    top: 16px;
    left: 20px;
    right: 20px;
    font-size: 10px;
    align-items: start;
  }
  .feature-top > span {
    max-width: 140px;
    line-height: 1.6;
  }
  .motion-toggle {
    font-size: 10px;
    padding: 4px 0;
  }
  .feature-copy {
    bottom: 35px;
    left: 22px;
  }
  .feature-copy h2 {
    font-size: 58px;
  }
  .feature-copy p {
    font-size: 15px;
    margin-top: 8px;
  }
  .watch-button {
    padding: 13px 19px;
    font-size: 12px;
    margin-top: 18px;
  }
  #broadcast-scene {
    width: 100%;
    height: 75%;
    top: -5%;
  }
  .scene-fallback {
    width: 100%;
    height: 75%;
    object-position: 50% 66%;
  }
  .feature-project {
    right: 20px;
    bottom: 40px;
    font-size: 11px;
    gap: 12px;
    max-width: 108px;
    align-items: flex-start;
  }
  .feature-project svg {
    width: 15px;
    height: 15px;
  }
  .feature-caption {
    font-size: 10px;
    padding: 15px 0;
  }
  .feature-caption > span:last-child {
    display: none;
  }
  .feature-caption strong {
    margin-right: 14px;
    font-size: 12px;
  }
  .section-space {
    margin-top: 65px;
  }
  .section-head {
    margin-bottom: 26px;
    align-items: center;
  }
  .section-head h2 {
    font-size: 29px;
  }
  .section-head > p {
    font-size: 11px;
    max-width: 130px;
  }
  .small-count {
    font-size: 10px;
    margin-top: 5px;
    margin-left: 4px;
  }
  .project-grid,
  .selected .project-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .selected .project-card:nth-child(n) {
    padding: 0;
    margin: 0;
  }
  .project-image,
  .project-card:nth-child(even) .project-image {
    aspect-ratio: 1.2;
  }
  .project-caption {
    padding-top: 14px;
  }
  .project-caption h3 {
    font-size: 20px;
  }
  .project-caption p,
  .project-caption > span {
    font-size: 11px;
  }
  .image-action {
    clip-path: none;
    font-size: 10px;
    padding: 9px 12px;
    right: 12px;
    bottom: 12px;
  }
  .image-action svg {
    width: 14px;
    height: 14px;
  }
  .section-end {
    margin-top: 32px;
    padding-top: 22px;
  }
  .section-end p {
    font-size: 11px;
    max-width: 125px;
  }
  .text-link {
    font-size: 12px;
    gap: 15px;
  }
  .practice {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 35px;
  }
  .practice h2 {
    font-size: 36px;
  }
  .practice .text-link {
    margin-top: 22px;
  }
  .practice-copy > p:first-child {
    font-size: 22px;
  }
  .practice-copy > p + p {
    font-size: 14px;
  }
  .disciplines {
    font-size: 11px;
    gap: 15px;
    margin-top: 26px;
  }
  .latest-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .latest-section .section-head {
    align-items: end;
  }
  .latest-section .section-head > a {
    max-width: 142px;
    font-size: 11px;
  }
  .latest-image {
    aspect-ratio: 1.3;
  }
  .latest-card h3 {
    font-size: 23px;
  }
  .latest-meta {
    margin-top: 16px;
  }
  .latest-section {
    margin-bottom: 65px;
  }
  .site-footer {
    padding-top: 45px;
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .contact-intro h2 {
    font-size: 54px;
  }

  .contact-big {
    font-size: 14px;
    margin-top: 28px;
  }
  .contact-options {
    padding-top: 0;
  }
  .contact-option {
    padding: 20px 0;
  }
  .contact-option strong {
    font-size: 18px;
  }
  .contact-option small {
    font-size: 11px;
  }
  .footer-bottom {
    margin-top: 10px;
    display: block;
    padding-top: 25px;
  }
  .footer-bottom > div {
    margin-top: 25px;
    justify-content: space-between;
    gap: 15px;
  }
  .page-intro {
    display: block;
    padding: 45px var(--gutter) 40px;
  }
  .page-intro h1 {
    font-size: 50px;
  }
  .page-intro > p {
    font-size: 14px;
    margin-top: 24px;
  }
  .filter-bar {
    align-items: start;
    padding: 13px 0;
    gap: 10px;
  }
  .filter-bar > div {
    gap: 3px;
  }
  .filter-bar button {
    font-size: 10px;
    padding: 8px 10px;
  }
  .filter-count {
    display: none;
  }
  .work-index,
  .latest-index {
    margin-bottom: 65px;
  }
  .latest-index {
    padding-top: 26px;
  }
  .case-intro {
    margin-top: 35px;
    margin-bottom: 30px;
  }
  .back-link {
    margin-bottom: 30px;
  }
  .case-intro h1 {
    font-size: 50px;
    overflow-wrap: anywhere;
  }
  .case-title-bottom {
    margin-top: 20px;
    align-items: baseline;
  }
  .case-title-bottom p {
    font-size: 14px;
    max-width: 230px;
  }
  .case-title-bottom > span {
    font-size: 11px;
    white-space: nowrap;
  }
  .case-hero {
    margin-left: 0;
    margin-right: 0;
  }
  .case-hero > img {
    aspect-ratio: 1.15;
    object-fit: contain;
  }
  .case-hero.cstv-cover {
    height: 480px;
  }
  .case-hero .watch-button {
    bottom: 20px;
    left: 22px;
  }
  .case-overview {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .case-overview > div {
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }
  .case-overview dl {
    margin: 0;
    max-width: 190px;
  }
  .case-overview dt:first-child {
    margin-top: 0;
  }
  .case-overview h2 {
    font-size: 23px;
  }
  .case-overview > p {
    font-size: 22px;
  }
  .case-gallery {
    gap: 15px;
    grid-template-columns: 1fr;
  }
  .case-story {
    display: block;
    margin-top: 45px;
    margin-bottom: 45px;
  }
  .case-story > div > h2 {
    margin-bottom: 30px;
    font-size: 23px;
  }
  .prose {
    font-size: 14px;
  }
  .prose h2 {
    font-size: 27px;
  }
  .prose blockquote {
    font-size: 21px;
  }
  .next-project {
    padding: 25px;
    margin-top: 55px;
    margin-bottom: 60px;
    min-height: 170px;
  }

  .next-project > a {
    width: 66%;
    gap: 15px;
    margin-top: 20px;
  }
  .next-project h2 {
    font-size: 27px;
  }
  .next-project > a > svg {
    width: 23px;
    height: 23px;
  }
  .next-project img {
    width: 28%;
  }
  .article-page {
    padding-top: 35px;
    padding-bottom: 60px;
  }
  .article-heading h1 {
    font-size: 46px;
  }
  .article-heading {
    margin-bottom: 30px;
  }
  .article-prose {
    margin-top: 35px;
  }
  .about-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .about-layout figure img {
    aspect-ratio: 1.2;
  }
  .about-layout .prose h2 {
    font-size: 32px;
  }
  .experience-list {
    margin-bottom: 60px;
  }
  .experience-list > div {
    display: block;
    padding: 22px 0;
  }
  .experience-list > div > a,
  .experience-list > div > span {
    font-size: 23px;
  }
  .experience-list > div p {
    margin-top: 8px;
    font-size: 12px;
  }
  .contact-page {
    padding: 45px var(--gutter) 55px;
  }
  .contact-page h1 {
    font-size: 49px;
  }
  .contact-page > p {
    font-size: 16px;
    margin-top: 24px;
  }
  .social-section .section-head {
    display: block;
  }
  .social-section .section-head > div {
    margin-top: 24px;
  }
  .reel-links > a {
    font-size: 14px;
  }
  .reel-links > a > span:last-child {
    font-size: 11px;
    max-width: 140px;
    gap: 12px;
  }
  .player-header {
    padding: 10px 15px;
  }
  .player-header h2 {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .project-image:hover img,
  .latest-card:hover img {
    transform: none;
  }
}

.project-card[data-project="xpgg"] .project-image img {
  object-position: 20% center;
}
.social-embeds {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.social-embeds summary {
  cursor: pointer;
  font-size: 14px;
  width: fit-content;
}
.social-embeds[open] summary {
  margin-bottom: 25px;
}
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.instagram-grid blockquote {
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
}
.social-embeds > blockquote {
  margin-left: 0;
}
.social-embeds summary:focus-visible {
  outline: 2px solid;
  outline-offset: 6px;
}
@media (max-width: 700px) {
  .selected .section-head h2 {
    font-size: 27px;
    white-space: nowrap;
  }
  .selected .section-head p {
    font-size: 10px;
    max-width: 110px;
  }
  .instagram-grid {
    grid-template-columns: 1fr;
  }
  .social-embeds iframe {
    max-width: 100%;
  }
}

.case-gallery figure {
  background: transparent;
}
.case-gallery figcaption {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
  padding: 14px 0 0;
}

.next-project > a { margin-top: 0; }

/* Black exhibition frame — CSTV leads, the portfolio follows. */
:root{--paper:#080808;--ink:#f2f1ec;--muted:#aaa9a3;--line:#30312e;color-scheme:dark}
body{font-size:18px}.site-header{height:96px;background:#080808}.site-header nav a,.contact-link{font-size:16px}.wordmark{font-size:26px}
.broadcast{max-width:2000px;margin:auto}.office-scene{position:relative;min-height:760px;height:calc(100svh - 96px);max-height:1100px;overflow:hidden;background:#080808;isolation:isolate}
.office-backdrop{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;opacity:.67;transform:translate3d(var(--office-x,0px),var(--office-y,0px),0) scale(1.03);transition:transform 1.4s ease-out}
.scene-shade{position:absolute;inset:0;background:linear-gradient(90deg,#000e 0%,#0009 38%,#0001 72%),linear-gradient(0deg,#080808 0%,transparent 34%,#0003 100%);z-index:1}
.zorg-actor{position:absolute;z-index:2;width:min(55vw,850px);aspect-ratio:1;right:-2%;bottom:-3%;background:url('/assets/zorg-atlas.webp') 50% 50% / 300% 100% no-repeat;filter:drop-shadow(-25px 0 40px #0007);transform:translate3d(var(--zorg-x,0px),var(--zorg-y,0px),0) rotate(var(--zorg-r,0deg));transition:transform .7s ease-out;mask-image:linear-gradient(#000 72%,transparent 98%)}
.broadcast-top,.broadcast-bottom{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:15px}.broadcast-top{top:30px}.broadcast-bottom{bottom:30px;color:#ccc}.motion-toggle{color:#eee!important;background:#0005;border:1px solid #ffffff50;padding:10px 15px;font-size:14px}
.broadcast-copy{position:relative;z-index:3;padding:125px var(--gutter) 140px;max-width:1100px;pointer-events:none}.broadcast-copy a,.broadcast-copy button{pointer-events:auto}.broadcast-brand{display:block;font-size:26px;font-weight:700;letter-spacing:-1px;color:var(--accent);margin-bottom:20px}.broadcast-brand>span{font-size:12px;vertical-align:top;margin-left:3px}.broadcast-copy h1{font-size:clamp(60px,6.8vw,112px);line-height:1.02;letter-spacing:-.065em;font-weight:500;margin:0 0 32px}.broadcast-copy h1 em{font-style:normal;color:var(--accent)}.broadcast-actions{display:flex;align-items:center;gap:30px}.watch-button{background:#f2f1ec;color:#10110e;font-size:17px;padding:20px 28px}.broadcast-actions .text-link{font-size:17px}.audience{font-size:17px;color:#ccc;margin-top:28px}.audience strong{font-size:24px;color:#fff;margin-right:8px}
.portfolio-intro{display:flex;justify-content:space-between;gap:50px;margin:0 var(--gutter);padding:65px 0;border-bottom:1px solid var(--line)}.portfolio-intro p{font-size:clamp(18px,1.6vw,25px);line-height:1.6;margin:0}.portfolio-intro p+p{color:var(--muted);font-size:18px}
.section-head h2{font-size:clamp(44px,5.7vw,84px);letter-spacing:-.055em}.section-head p{font-size:18px}.section-space{padding-top:110px;padding-bottom:40px}.latest-rail{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#555 #161616;padding-bottom:30px}.latest-rail .latest-card{flex:0 0 32%;min-width:280px;scroll-snap-align:start}.latest-rail .latest-image{aspect-ratio:4/3}.latest-card h3{font-size:25px}.latest-meta,.latest-summary{font-size:16px}.rail-controls{display:flex;gap:12px;align-items:center}.rail-controls button{border:1px solid var(--line);width:48px;height:48px;font-size:24px}.rail-controls .text-link{margin-left:15px}.selected .project-grid,.project-grid{grid-template-columns:1fr 1fr;gap:65px 28px}.selected .project-card:nth-child(n){margin:0;padding:0}.project-image,.project-card:nth-child(even) .project-image{aspect-ratio:16/10}.project-caption h3{font-size:30px}.project-caption p,.project-caption>span{font-size:16px}.project-card[data-project="xpgg"] .project-image img{object-fit:cover;padding:0}.practice h2{font-size:clamp(38px,4.5vw,68px)}.practice-copy p{font-size:21px}.site-footer{background:#10110f;margin-top:110px}.contact-options>p{font-size:20px;line-height:1.7}.footer-bottom,.email-line{font-size:16px}.filter-bar button{font-size:16px}.filter-bar button[aria-pressed=true]{background:#eee;color:#111}.prose{font-size:20px;line-height:1.8}.prose p{font-size:inherit}.case-overview>p{font-size:25px}.case-overview dt,.case-overview dd{font-size:16px}
.ordered-story{padding:0 var(--gutter);max-width:1600px;margin:0 auto 120px}.story-text{max-width:780px;margin:0 auto}.story-text p{margin:0 0 30px}.story-text h2{margin:90px 0 30px;font-size:44px}.story-media{margin:55px 0;width:100%;background:#111;overflow:hidden}.story-media img{display:block;width:100%;height:auto;max-height:1100px;object-fit:contain}.story-media video{display:block;width:100%;max-height:850px;background:#000}.story-media+.story-text{margin-top:30px}.story-embed .film-link{min-height:200px;font-size:28px;width:100%;justify-content:center;gap:24px}.next-project h2{font-size:clamp(44px,6vw,90px)}
.player-dialog{inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:#000;color:#fff;box-shadow:none}.player-dialog[open]{display:flex;flex-direction:column}.player-dialog::backdrop{background:#000}.player-header{padding:24px 36px;flex-shrink:0}.player-header h2{font-size:20px}.player-close{width:52px;height:52px}.player-body{flex:1;min-height:0;align-items:center;background:#000;padding:12px 5vw}.player-body video{height:100%;width:100%;max-height:calc(100dvh - 150px)}.player-body iframe{height:min(75dvh,56.25vw);width:100%;max-width:1400px}.player-status{margin:0;min-height:24px}
@media(max-width:900px){.office-scene{min-height:750px}.broadcast-copy h1{font-size:72px}.zorg-actor{width:65vw;right:-14%;bottom:3%;opacity:.9}.broadcast-copy{padding-top:150px}.portfolio-intro{flex-direction:column;gap:20px}.latest-rail .latest-card{flex-basis:45%}.section-head{align-items:flex-start}.broadcast-bottom{font-size:13px}}
@media(max-width:700px){.site-header{height:80px}.site-header #mobile-menu{background:#111;color:#eee}.office-scene{height:850px;min-height:0}.broadcast-top{font-size:12px;top:20px;align-items:flex-start}.broadcast-top>span{max-width:180px}.motion-toggle{font-size:12px;padding:8px}.broadcast-copy{padding-top:105px}.broadcast-copy h1{font-size:clamp(48px,10.5vw,70px);letter-spacing:-.055em;margin-bottom:25px}.broadcast-brand{font-size:23px}.broadcast-actions{gap:18px;align-items:center}.broadcast-actions .text-link{font-size:14px}.watch-button{padding:15px 19px;font-size:15px}.zorg-actor{width:105vw;right:-21%;bottom:2%;mask-image:linear-gradient(#000 65%,transparent 97%)}.scene-shade{background:linear-gradient(180deg,#0009 0%,#0008 46%,transparent 60%,#080808 100%)}.office-backdrop{opacity:.58}.broadcast-bottom{bottom:20px;font-size:12px;gap:30px}.broadcast-bottom>span{max-width:185px}.audience{font-size:13px;max-width:220px;line-height:1.6;margin-top:22px}.audience strong{font-size:22px;display:block}.portfolio-intro{padding:45px 0}.portfolio-intro p,.portfolio-intro p+p{font-size:17px}.portfolio-intro br{display:none}.section-space{padding-top:65px;padding-bottom:0}.section-head h2{font-size:46px}.section-head{gap:25px}.rail-controls{gap:6px}.rail-controls button{width:40px;height:40px}.rail-controls .text-link{display:none}.latest-rail .latest-card{flex-basis:83%;min-width:0}.latest-card h3{font-size:23px}.selected .project-grid,.project-grid{grid-template-columns:1fr;gap:40px}.project-caption h3{font-size:26px}.project-caption p{font-size:15px}.section-head p{font-size:16px}.practice-copy p{font-size:19px}.prose{font-size:18px}.case-overview>p{font-size:21px}.story-media{margin:35px 0}.story-text h2{font-size:34px}.player-header{padding:16px}.player-header h2{font-size:15px}.player-body{padding:0}.site-footer{margin-top:65px}.contact-options>p{font-size:18px}}
@media(prefers-reduced-motion:reduce){.office-backdrop,.zorg-actor{transition:none!important;transform:none!important}}
.section-space{margin-top:0}.latest-section{margin-bottom:0}
.broadcast-copy h1{font-size:clamp(60px,6.8vw,96px);letter-spacing:-.04em}.section-head h2{letter-spacing:-.04em}
@media(max-width:700px){.broadcast-copy h1{font-size:clamp(46px,10.5vw,70px);letter-spacing:-.04em}.selected .section-head h2{font-size:clamp(38px,11.8vw,46px);letter-spacing:-.04em;white-space:normal}.selected .section-head p{font-size:16px;line-height:1.6;max-width:100%;width:100%}.selected .section-head{flex-wrap:wrap}}
/* Channel-led homepage and scroll choreography. */
.broadcast-logo{display:block;width:clamp(120px,11vw,165px);height:auto;margin-bottom:28px}.broadcast-copy{padding-top:100px;max-width:1120px}.broadcast-copy h1{font-size:clamp(54px,5.6vw,84px)}
.latest-rail .latest-card{flex-basis:23%;min-width:240px}.latest-rail .latest-image,.latest-index .latest-image{aspect-ratio:9/16}.latest-rail .latest-image img{object-fit:cover}
.compact-footer{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:55px var(--gutter);border-top:1px solid var(--line)}.compact-footer p{font-size:15px;color:var(--muted);margin:15px 0 0}.footer-connect{display:flex;flex-direction:column;gap:24px;align-items:flex-end;font-size:17px}.footer-connect>div{display:flex;gap:24px;font-size:15px}.footer-connect a{display:inline-flex;gap:12px;align-items:center}.footer-connect svg{width:16px;height:16px}
.project-image img,.latest-image img{transform:translate3d(var(--image-x,0px),var(--image-y,0px),0) scale(1.10);transition:transform .55s cubic-bezier(.16,1,.3,1)}.project-image:hover img{transform:translate3d(var(--image-x,0px),var(--image-y,0px),0) scale(1.14)}
.office-video{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;opacity:.67;transform:translate3d(var(--office-x,0px),var(--office-y,0px),0) scale(1.03);transition:transform 1.4s ease-out}.office-video:not(.ready){opacity:0}.office-scene:has(.office-video.ready) .office-backdrop{opacity:0}
@media(max-width:700px){.broadcast-copy{padding-top:84px}.broadcast-logo{width:115px;margin-bottom:24px}.broadcast-copy h1{font-size:clamp(40px,10.4vw,64px)}.latest-rail .latest-card{flex-basis:72%;min-width:0}.compact-footer{flex-direction:column;align-items:flex-start;gap:30px;padding-top:35px;padding-bottom:35px}.footer-connect{align-items:flex-start}.footer-connect>div{flex-wrap:wrap}.office-video{opacity:.58}}
@media(prefers-reduced-motion:reduce){.project-image img,.latest-image img,.project-image:hover img{transform:none}.office-video{display:none}.office-scene:has(.office-video.ready) .office-backdrop{opacity:.67}}
.zorg-actor{background-image:url('/assets/zorg-expressions.webp');background-size:300% 300%;background-position:50% 50%}
.story-media img{transform:translate3d(var(--image-x,0px),var(--image-y,0px),0) scale(1.06);transition:transform .55s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){.story-media img{transform:none}}
/* Latest titles live on the artwork; secondary detail unfolds on hover/focus. */
.latest-image::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 30%,#0005 55%,#000e 100%)}
.latest-overlay{position:absolute;z-index:2;inset:auto 24px 26px;color:#fff;pointer-events:none}
.latest-overlay h3{font-size:clamp(23px,2vw,30px);line-height:1.16;letter-spacing:-.025em;margin:0;text-wrap:balance}
.latest-reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(14px);transition:grid-template-rows .6s var(--ease),opacity .45s ease,transform .6s var(--ease);position:relative}
.latest-reveal p{min-height:0;overflow:hidden;margin:0;padding-right:48px;font-size:15px;line-height:1.55;color:#ecece8;transition:margin .6s var(--ease)}
.latest-action{position:absolute;right:0;bottom:0;width:36px;height:36px;display:grid;place-items:center}.latest-action svg{width:26px;height:26px}
.latest-image:hover .latest-reveal,.latest-image:focus-visible .latest-reveal{grid-template-rows:1fr;opacity:1;transform:translateY(0)}
.latest-image:hover .latest-reveal p,.latest-image:focus-visible .latest-reveal p{margin-top:16px}
.latest-image:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.inline-loop{cursor:pointer}.inline-loop:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
@media(hover:none){.latest-reveal{grid-template-rows:1fr;opacity:1;transform:none}.latest-reveal p{margin-top:16px}.latest-overlay{inset:auto 20px 22px}}
@media(prefers-reduced-motion:reduce){.latest-reveal,.latest-reveal p{transition:none;transform:none}}
/* Next-project navigation shares the black portfolio frame. */
.next-case{margin:90px var(--gutter) 0;border-top:1px solid var(--line)}
.next-case>a{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding-top:36px;color:var(--ink)}
.next-case-copy>p{font-size:16px;color:var(--muted);margin:0 0 24px}
.next-case h2{font-size:clamp(36px,5vw,72px);line-height:1.08;letter-spacing:-.04em;margin:0;text-wrap:balance;overflow-wrap:anywhere}
.next-case-action{display:inline-flex;align-items:center;gap:22px;font-size:17px;margin-top:30px}
.next-case-action svg{width:24px;height:24px;transition:transform .5s var(--ease)}
.next-case-image{aspect-ratio:16/10;overflow:hidden;background:#111}
.next-case-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.next-case>a:hover img,.next-case>a:focus-visible img{transform:scale(1.04)}
.next-case>a:hover svg{transform:translate(3px,-3px)}
.next-case>a:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
@media(max-width:700px){.next-case{margin-top:55px}.next-case>a{grid-template-columns:1fr;gap:28px;padding-top:28px}.next-case h2{font-size:clamp(36px,10vw,48px)}.next-case-copy>p{margin-bottom:15px}.next-case-action{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.next-case-image img,.next-case-action svg{transition:none}.next-case>a:hover img,.next-case>a:focus-visible img,.next-case>a:hover svg{transform:none}}

/* Three CSTV shows share one quiet frame; only the illustrated world changes. */
.channel-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s;pointer-events:none}
.channel-scene.is-active{opacity:1;visibility:visible;transition-delay:0s}
.office-scene:has(.office-video.ready) .office-backdrop{opacity:.67}
.channel-scene:has(.office-video.ready) .office-backdrop{opacity:0}
.jdawg-actor,.cash-actor{position:absolute;z-index:2;right:-2%;bottom:-3%;width:min(55vw,850px);aspect-ratio:1;filter:drop-shadow(-25px 0 40px #0007);transform:translate3d(var(--zorg-x,0px),var(--zorg-y,0px),0) rotate(var(--zorg-r,0deg));transition:transform .7s ease-out;mask-image:linear-gradient(#000 72%,transparent 98%)}
.jdawg-actor{background:url('/assets/jdawg-atlas.webp') 50% 50% / 300% 100% no-repeat}
.cash-actor{object-fit:contain;width:min(59vw,900px);right:-3%;bottom:0}
.channel-picker{display:flex;flex-wrap:wrap;gap:8px 24px}
.channel-picker button{padding:12px 0;background:none;border:0;border-bottom:1px solid transparent;color:#bbb;font:inherit;cursor:pointer;text-align:left;transition:color .2s,border-color .2s}
.channel-picker button:hover,.channel-picker button[aria-pressed=true]{color:#fff;border-bottom-color:#fff}
@media(max-width:900px){.jdawg-actor{width:65vw;right:-14%;bottom:3%}.cash-actor{width:74vw;right:-15%;bottom:5%}.channel-picker{gap:6px 16px}}
@media(max-width:700px){.jdawg-actor{width:105vw;right:-21%;bottom:2%}.cash-actor{width:112vw;right:-15%;bottom:5%}.broadcast-bottom{gap:12px;align-items:flex-end}.channel-picker{max-width:245px;gap:0 14px}.channel-picker button{font-size:13px;padding:9px 0}.broadcast-bottom>a{white-space:nowrap;font-size:12px}.cash-actor,.jdawg-actor{mask-image:linear-gradient(#000 65%,transparent 97%)}}
@media(prefers-reduced-motion:reduce){.channel-scene,.jdawg-actor,.cash-actor{transition:none;transform:none}.channel-scene:has(.office-video.ready) .office-backdrop{opacity:.67}}

/* The original chipstronghold collectible introduces the portfolio. */
.selected-heading{min-height:320px;align-items:center;margin-bottom:36px}
.stronghold-box{position:relative;width:350px;height:320px;flex:none}
.stronghold-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.box-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;background:transparent;color:var(--ink);border:1px solid var(--line);font:inherit;cursor:pointer}
.box-load svg{width:22px;height:22px}
.stronghold-box.is-loaded .box-load{visibility:hidden}
@media(max-width:700px){.selected-heading{min-height:0;gap:0;align-items:center}.selected-heading h2{font-size:clamp(34px,7vw,46px);max-width:190px}.stronghold-box{width:42vw;height:220px}.box-load{font-size:13px;padding:12px;flex-direction:column}.selected-heading{margin-bottom:24px}}

/* Temporary comparison is URL-selected, leaving the chosen homepage intact. */
.hero-comparison{display:none}
html[data-hero] .hero-comparison{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 28px;padding:14px var(--gutter);border-block:1px solid var(--line);font-size:14px;background:#10110f}
.hero-comparison span{color:var(--muted)}
.hero-comparison a{padding:6px 0;border-bottom:1px solid transparent}
html[data-hero=framed] .hero-comparison a[href='/?hero=framed'],html[data-hero=wide] .hero-comparison a[href='/?hero=wide']{border-color:var(--accent);color:var(--accent)}
html[data-hero=framed] .broadcast{margin:24px var(--gutter) 0;max-width:none}
html[data-hero=framed] .office-scene{min-height:650px;height:calc(100svh - 200px);max-height:900px}
html[data-hero=framed] .broadcast-copy{padding-top:65px}
html[data-hero=framed] .broadcast-copy h1{font-size:clamp(46px,5.2vw,76px)}
.footer-connect>div{flex-wrap:wrap;row-gap:16px}
@media(max-width:700px){html[data-hero=framed] .broadcast{margin:16px 16px 0}html[data-hero=framed] .office-scene{height:820px;min-height:0}html[data-hero=framed] .broadcast-copy{padding:65px 22px 140px}html[data-hero=framed] .broadcast-copy h1{font-size:clamp(38px,9vw,60px)}.hero-comparison span{display:none}}
@media(min-width:701px){html[data-hero=framed] .zorg-actor,html[data-hero=framed] .jdawg-actor{width:min(50vw,620px)}html[data-hero=framed] .cash-actor{width:min(52vw,650px)}}

.latest-rail.is-draggable{cursor:grab;user-select:none;-webkit-user-select:none}
.latest-rail.is-draggable .latest-image{cursor:grab;-webkit-user-drag:none}
.latest-rail.is-dragging,.latest-rail.is-coasting{scroll-snap-type:none;scroll-behavior:auto}
.latest-rail.is-dragging,.latest-rail.is-dragging .latest-image{cursor:grabbing}
.latest-rail.is-draggable img{-webkit-user-drag:none}
/* A fine screen-print texture sits behind the character and interface. */
.channel-scene::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,#000b .85px,transparent 1px);background-size:5px 5px;opacity:.6}
html[data-dots=off] .channel-scene::after{display:none}
.show-shelf{padding:28px var(--gutter) 32px;border-bottom:1px solid var(--line);background:#0d0d0d}
.show-reels{display:flex;justify-content:space-between;align-items:center;gap:36px;min-height:240px}
.show-reels[hidden]{display:none}
.show-reels-heading h2{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.03em;margin:0 0 12px}
.show-reels-heading p{color:var(--muted);font-size:15px;margin:0}
.show-reel-grid{display:flex;gap:14px}
.show-reel{position:relative;display:block;width:130px;aspect-ratio:9/16;overflow:hidden;background:#181818}
.show-reel>img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.show-reel:hover>img,.show-reel:focus-visible>img{transform:scale(1.06)}
.show-reel>span{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:14px;background:linear-gradient(transparent 48%,#000d);font-size:13px;line-height:1.3}
.show-reel svg{width:22px;height:22px}
.games-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px 28px;padding:0 var(--gutter)}
.game-art{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#171717}
.game-art>img{width:100%;height:100%;object-fit:cover}
.game-art>.game-logo{position:absolute;left:10%;top:25%;width:80%;height:auto;object-fit:contain}
.game-age{position:absolute;top:18px;left:18px;padding:7px 10px;background:#080808;color:#fff;font-size:13px;font-weight:600}
.game-action{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;padding:55px 22px 22px;background:linear-gradient(transparent,#000e);font-size:16px}
.game-action svg{width:24px;height:24px}.game-card h2{font-size:28px;font-weight:500;margin:18px 0 0;letter-spacing:-.025em}
.compact-footer{align-items:flex-start}.footer-connect{display:grid;grid-template-columns:auto auto;align-items:start;gap:60px;text-align:left}
.footer-connect>div{display:grid;grid-template-columns:repeat(2,minmax(100px,1fr));gap:18px 36px}
.footer-connect>div a{justify-content:space-between}
@media(max-width:900px){.games-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-connect{gap:30px;grid-template-columns:1fr}.show-reel{width:110px}}
@media(max-width:700px){.show-reels{flex-direction:column;align-items:flex-start;gap:24px;min-height:0}.show-reel-grid{width:100%;gap:10px}.show-reel{width:calc((100% - 20px)/3)}.show-reel>span{padding:10px;font-size:12px}.show-reels-heading h2{font-size:30px}.games-grid{grid-template-columns:1fr;gap:36px}.game-art{aspect-ratio:1}.footer-connect{width:100%;gap:28px}.footer-connect>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}}
@media(prefers-reduced-motion:reduce){.show-reel>img{transition:none;transform:none!important}}
.header-enquiries{display:flex;gap:22px;align-items:center}.header-enquiries .contact-link{font-size:14px;white-space:nowrap}.site-header nav{gap:22px}
.footer-enquiries{display:flex;flex-direction:column;gap:18px}
.selected-heading{position:relative;min-height:420px;margin-top:70px;margin-bottom:60px;isolation:isolate}
.selected-heading h2{max-width:48%;position:relative;z-index:3}
.stronghold-box{position:absolute;right:-35px;top:-140px;width:min(58vw,740px);height:680px;z-index:2;overflow:hidden}
.stronghold-box iframe{width:140%;height:140%;left:-20%;top:-20%}
/* The box renders on a transparent canvas, so it can spin past its frame uncropped.
   Cards stay above its empty canvas margins so they keep their hover and clicks,
   and the grid starts below the box's swing. */
.stronghold-box{overflow:visible}
.latest-rail,.games-rail,.selected .project-grid{position:relative;z-index:3}
.selected-heading{margin-bottom:150px}
.relume-feature{padding-inline:var(--gutter)}.relume-film{position:relative;background:#111;overflow:hidden}.relume-film video{display:block;width:100%;max-height:720px;object-fit:contain}.relume-film .watch-button{position:absolute;bottom:28px;left:28px}
.about-interview{padding:0 var(--gutter)}.interview-screen{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}.interview-screen>img{width:100%;height:100%;object-fit:cover}.interview-screen iframe{position:absolute;inset:0;border:0;width:100%;height:100%;pointer-events:none}.interview-screen .watch-button{position:absolute;left:28px;bottom:28px;z-index:2}.about-summary{max-width:800px;margin:60px auto}.about-summary p{font-size:24px;line-height:1.65}.about-summary a{text-decoration:underline;text-underline-offset:5px}
@media(max-width:1150px){.header-enquiries{display:none}.site-header nav{margin-left:auto}}
@media(max-width:700px){.selected-heading{margin-top:20px;min-height:0;flex-direction:column;align-items:flex-start;margin-bottom:45px;gap:0}.selected-heading h2{max-width:none}.stronghold-box{position:relative;right:auto;top:auto;width:100%;height:400px;margin-top:-45px;margin-bottom:-75px}.about-summary{margin:32px 0}.about-summary p{font-size:20px}.interview-screen .watch-button,.relume-film .watch-button{left:14px;bottom:14px;font-size:13px;padding:12px 16px}.relume-feature .section-head{display:block}.relume-feature .section-head p{margin-top:15px}}

/* Soft exhibition frames across photography, films and project artwork. */
:root{--media-radius:12px}
.project-image,.latest-image,.story-media,.case-hero,.next-case-image,.game-art,.show-reel,.interview-screen,.relume-film,.article-cover,.article-film,.project-gallery figure,.about-layout figure>img{border-radius:var(--media-radius);overflow:hidden}
.story-media img,.story-media video,.article-prose img,.prose img,.project-gallery img,.article-film video{border-radius:var(--media-radius)}
html[data-hero=framed] .office-scene{border-radius:var(--media-radius)}
.project-image{transform-origin:center bottom}
@media(max-width:700px){:root{--media-radius:9px}}

/* ── Streaming billboard, Lusion-inspired cards and film (2026-10-09) ──
   These rules supersede earlier hero, show-shelf, card-caption and Relume film rules. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{overflow-x:clip}

/* Billboard: the selected show fills the hero; its episodes sit inside the bottom edge. */
.billboard{--row-overlap:clamp(150px,21vh,220px);--tile:clamp(118px,10vw,196px)}
.billboard .office-scene{height:calc(100svh - 96px);min-height:720px;max-height:1080px}
.billboard .scene-shade{background:linear-gradient(90deg,#000d 0%,#0009 32%,#0000 62%),linear-gradient(0deg,#080808 0%,#080808d9 15%,#0000 48%),linear-gradient(180deg,#0007 0%,#0000 22%)}
.billboard .office-scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;background:linear-gradient(#08080800,#080808cc 55%,#080808);pointer-events:none}
.billboard-copy{position:absolute;z-index:3;left:var(--gutter);bottom:calc(var(--row-overlap) + clamp(30px,4.5vh,64px));width:min(780px,58vw);pointer-events:none}
.billboard-copy a,.billboard-copy button{pointer-events:auto}
.billboard-brand{display:flex;align-items:center;gap:16px;margin-bottom:clamp(12px,2vh,22px)}
.billboard-brand .broadcast-logo{width:clamp(78px,6.2vw,120px);margin:0}
.billboard-brand span{font-size:clamp(12px,.85vw,16px);letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:#deded8}
.show-titles{display:grid}
.show-info{grid-area:1/1;align-self:end;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .5s var(--ease),transform .9s var(--ease),visibility 0s .5s}
.show-info.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.show-name{font-size:clamp(54px,5.8vw,128px);line-height:.94;letter-spacing:-.055em;font-weight:600;margin:0 0 clamp(12px,1.8vh,20px);text-wrap:balance;text-shadow:0 4px 40px #0008}
.show-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0;font-size:clamp(15px,1.05vw,20px);color:#dcdcd6}
.show-meta span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 12px;border-radius:50%;background:currentColor;vertical-align:middle;opacity:.65}
.show-meta span:first-child{color:var(--accent)}
.show-meta span.show-rating{display:inline-flex;align-items:center;height:1.65em;padding:0 .5em;margin-right:14px;border:1px solid #ffffff80;border-radius:4px;background:#0006;color:#fff;font-size:.82em;font-weight:700;letter-spacing:.06em}
.show-meta .show-rating+span::before{display:none}
.show-meta .show-rating+span{color:var(--accent)}
.billboard-tagline{font-size:clamp(19px,1.5vw,30px)!important;line-height:1.4!important;letter-spacing:-.015em!important;font-weight:400!important;color:#eceae4;margin:clamp(14px,2.2vh,24px) 0 clamp(20px,3vh,32px)!important;max-width:620px}
.billboard-tagline em{font-style:normal;color:var(--accent)}
.billboard .broadcast-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.billboard .watch-button{margin:0;font-size:clamp(16px,1.1vw,21px);font-weight:600;padding:.95em 1.65em}
.info-button{display:inline-flex;align-items:center;gap:10px;padding:.95em 1.55em;border-radius:40px;background:#ffffff29;color:#fff;font-size:clamp(16px,1.1vw,21px);font-weight:600;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .25s,transform .35s var(--ease)}
.info-button:hover{background:#ffffff45;transform:translateY(-2px)}
.info-button svg{width:1.2em;height:1.2em}
.billboard .audience{margin-top:clamp(16px,2.4vh,28px);font-size:clamp(14px,.95vw,18px)}
.billboard-row{position:relative;z-index:5;margin-top:calc(var(--row-overlap) * -1);padding:0 var(--gutter)}
.billboard-row-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:6px}
.billboard .channel-picker{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none}
.billboard .channel-picker button{flex:none;padding:9px 16px;border:1px solid #ffffff38;border-radius:30px;background:#0007;color:#e6e6e0;font-size:15px;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .25s,color .25s,border-color .25s}
.billboard .channel-picker button:hover{border-color:#fff;color:#fff}
.billboard .channel-picker button[aria-pressed=true]{background:#f2f1ec;border-color:#f2f1ec;color:#111}
.billboard .rail-controls button{width:42px;height:42px;border-radius:50%;border:1px solid #ffffff38;background:#0007;color:#fff;font-size:18px}
.billboard .show-shelf{padding:0;border:0;background:none}
.billboard .show-reels{display:block;min-height:0}
.billboard .show-reels[hidden]{display:none}
.billboard .show-reel-grid{display:flex;gap:clamp(10px,.9vw,16px);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:16px var(--gutter) 26px;margin:0 calc(var(--gutter) * -1);scroll-padding-inline:var(--gutter)}
.billboard .show-reel-grid::-webkit-scrollbar{display:none}
.billboard .show-reel{flex:0 0 var(--tile);width:var(--tile);aspect-ratio:9/16;border-radius:10px;scroll-snap-align:start;box-shadow:0 10px 30px #0007;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.billboard .show-reel:hover,.billboard .show-reel:focus-visible{transform:scale(1.06);box-shadow:0 22px 44px #000c,0 0 0 2px #f2f1ec;outline:0;z-index:1}
.billboard .show-reel>span{padding:12px;font-size:clamp(13px,.85vw,16px);font-weight:600;background:linear-gradient(#0000 50%,#000d)}
.billboard .show-reel>b{position:absolute;z-index:2;top:10px;left:10px;padding:4px 7px;border-radius:4px;background:var(--accent);color:#111;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.hero-rule{margin-top:clamp(18px,3vw,40px)}

/* Games: its own section below Latest, Disney+-style wide tiles bleeding to the page edge. */
.games-section{--game-tile:clamp(290px,26vw,520px)}
.games-rail{display:flex;gap:clamp(10px,.9vw,16px);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:16px var(--gutter) 26px;margin:0 calc(var(--gutter) * -1);scroll-padding-inline:var(--gutter)}
.games-rail::-webkit-scrollbar{display:none}
.game-tile{position:relative;flex:0 0 var(--game-tile);aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#171717;scroll-snap-align:start;box-shadow:0 10px 30px #0007;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.game-tile:hover,.game-tile:focus-visible{transform:scale(1.05);box-shadow:0 22px 44px #000c,0 0 0 2px #f2f1ec;outline:0;z-index:1}
.game-tile>img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.game-tile:hover>img:first-child{transform:scale(1.04)}
.game-tile>.game-tile-logo{position:absolute;left:15%;top:16%;width:70%;height:auto;object-fit:contain}
.game-tile>video,.game-art>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}
.game-tile.is-playing>video,.game-art.is-playing>video{opacity:1}
.game-art>.game-age,.game-art>.game-action{z-index:1}
.game-tile>b{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;height:22px;padding:0 7px;border:1px solid #ffffff80;border-radius:4px;background:#000a;color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.game-tile>span{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;background:linear-gradient(#0000,#000d);font-size:clamp(15px,1.05vw,20px);font-weight:600;letter-spacing:-.01em}

/* Cross rules: + marks above and below frames, turning from × as they arrive. */
.cross-rule{position:relative;height:13px;color:#8d8d88}
.cross-rule>i{position:absolute;top:0;left:var(--x);width:13px;height:13px;transform:translateX(calc(var(--x) * -1));transition:opacity .6s ease,rotate .9s var(--ease),scale .9s var(--ease);transition-delay:calc(var(--n) * 80ms)}
.cross-rule>i::before,.cross-rule>i::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;background:currentColor}
.cross-rule>i::before{width:13px;height:1px}
.cross-rule>i::after{width:1px;height:13px}
.cross-rule:not(.is-in)>i{opacity:0;rotate:45deg;scale:.4}
.rule-label{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#cfcfca;white-space:nowrap}
.hero-rule{margin-inline:var(--gutter)}
.case-rule{margin:18px var(--gutter) 0}

/* Split headings */
.split-word{display:inline-block;white-space:nowrap;overflow-x:visible;overflow-y:clip;padding-bottom:.14em;margin-bottom:-.14em}
.split-char{display:inline-block;transition:transform 1.1s var(--ease) calc(var(--i) * 22ms)}
.is-split:not(.is-in) .split-char{transform:translateY(115%)}

/* Featured work: Lusion grid, captions and scroll-in settle. */
.selected .project-grid,.project-grid{gap:clamp(56px,5.6vw,110px) 28px}
.project-image,.project-card:nth-child(even) .project-image{aspect-ratio:634/412}
.project-card .project-image{--k:calc(1 - var(--e, 1));--grow:.11;transform-origin:var(--origin,50% 0);transform:translate3d(0,calc(var(--k) * 80px),0) rotate(calc(var(--k) * var(--side, 0) * 2.2deg)) scale(calc(1 + var(--k) * var(--grow)));will-change:transform}
.project-card .project-image img{scale:calc(1 + var(--k) * .16)}
.project-card .project-caption{display:block;padding-top:20px}
.project-card .project-tags{margin:0 0 10px;font-size:13px;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.4em}
.project-title{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.project-card .project-title h3{margin:0;font-size:clamp(28px,3vw,54px);font-weight:400;line-height:1.1;letter-spacing:-.035em;transition:transform .6s var(--ease)}
.project-arrow{position:absolute;left:0;top:50%;display:flex;width:clamp(26px,2.3vw,40px);color:var(--accent);opacity:0;transform:translate(-18px,-50%);transition:opacity .35s ease,transform .6s var(--ease);pointer-events:none}
.project-arrow svg{width:100%;height:auto}
.project-card:hover .project-title h3,.project-card:focus-within .project-title h3{transform:translateX(clamp(38px,3.2vw,56px))}
.project-card:hover .project-arrow,.project-card:focus-within .project-arrow{opacity:1;transform:translate(0,-50%)}
.project-year{flex:none;padding-bottom:.35em;font-size:16px;color:var(--muted);white-space:nowrap}
.roll-word{display:inline-block;white-space:nowrap;-webkit-user-select:none;user-select:none}
/* Each letter window is 1.4em tall so descenders (g, y, p) aren't clipped;
   negative margins keep the original 1.1em line spacing. */
.roll{position:relative;display:inline-block;height:1.4em;line-height:1.4;margin:-.15em 0;overflow-x:visible;overflow-y:clip;vertical-align:bottom}
.roll-space{visibility:hidden}
.roll-strip{position:absolute;left:0;right:0;top:0;display:block;text-align:center;transform:translateY(-75%)}
.roll-strip>span{display:block;height:1.4em;line-height:1.4;white-space:pre}

/* Latest rail: cards bleed to the page edge and settle out of a gentle arc. */
.latest-rail{padding:24px var(--gutter) 120px;margin:-24px calc(var(--gutter) * -1) -90px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.latest-rail::-webkit-scrollbar{display:none}
.latest-rail .latest-image{--k:calc(1 - var(--e, 1));transform-origin:var(--origin,50% 0);transform:translate3d(0,calc(var(--k) * (60px + 50px * var(--reach, 0))),0) rotate(calc(var(--k) * var(--side, 0) * 3.4deg)) scale(calc(1 + var(--k) * .1));will-change:transform}
.latest-rail .latest-image img{scale:calc(1 + var(--k) * .14)}

/* Case-study media sizes, from the original site: full width, a centred half-width
   frame, a narrow portrait (phone) frame and side-by-side pairs. */
.ordered-story .story-media.is-small{width:clamp(320px,51%,880px);margin-inline:auto}
.ordered-story .story-media.is-tiny{width:clamp(240px,23%,400px);margin-inline:auto}
.story-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,.75vw,14px);margin:60px 0}
.story-pair .story-media{margin:0;aspect-ratio:679/545}
.story-pair .story-media img{width:100%;height:100%;object-fit:cover}
/* Subtle version of the homepage settle: lag, slight oversize, pairs lean apart. */
.ordered-story .story-media:not(.story-embed){--k:calc(1 - var(--e, 1));transform-origin:var(--origin,50% 0);transform:translate3d(0,calc(var(--k) * 56px),0) rotate(calc(var(--k) * var(--side, 0) * 1.4deg)) scale(calc(1 + var(--k) * .045))}
.ordered-story .story-media img,.ordered-story .story-media video{scale:calc(1 + var(--k, 0) * .1)}

@media(max-width:900px){
 .billboard-copy{width:min(680px,80vw)}
}
@media(max-width:700px){
 .billboard{--row-overlap:118px;--tile:112px}
 .billboard .office-scene{height:max(700px,calc(100svh - 80px));min-height:0;max-height:none}
 .billboard .scene-shade{background:linear-gradient(180deg,#000c 0%,#0008 40%,#0000 58%,#080808e6 86%,#080808 100%)}
 .billboard-copy{top:40px;bottom:auto;left:var(--gutter);right:var(--gutter);width:auto}
 .billboard-brand{gap:12px}
 .billboard-brand .broadcast-logo{width:74px}
 .billboard-brand span{font-size:11px;letter-spacing:.26em}
 .show-name{font-size:clamp(44px,12.5vw,58px)}
 .show-meta{font-size:14px}
 .billboard-tagline{font-size:17px!important;margin:12px 0 20px!important}
 .billboard .watch-button,.info-button{font-size:15px;padding:13px 18px}
 .billboard .audience{font-size:13px;margin-top:16px}
 .billboard .rail-controls{display:none}
 .billboard .channel-picker{max-width:none;margin-right:calc(var(--gutter) * -1);padding-right:var(--gutter)}
 .billboard-row-head{display:block}
 .hero-rule>i:nth-child(2),.hero-rule>i:nth-child(3){display:none}
 .billboard .channel-picker button{font-size:13px;padding:8px 13px}
 .billboard .show-reel>span{padding:9px;font-size:12px}
 .games-section{--game-tile:80vw}
 .hero-rule .rule-label{font-size:11px}
 .project-card .project-image{--grow:.05}
 .project-card .project-title h3{font-size:26px}
 .project-card .project-tags{font-size:12px}
 .project-year{font-size:14px}
 .ordered-story .story-media.is-small{width:100%}
 .ordered-story .story-media.is-tiny{width:68%}
 .story-pair{margin:35px 0}
}
@media(prefers-reduced-motion:reduce){
 .project-card .project-image,.project-card .project-image img,.latest-rail .latest-image,.latest-rail .latest-image img,.ordered-story .story-media,.ordered-story .story-media img,.ordered-story .story-media video{transform:none;scale:none}
 .cross-rule>i,.show-info,.billboard .show-reel,.game-tile,.game-tile>img{transition:none}
}

/* ── Disney+-style billboard (2026-10-09, round 2) ──
   A contained, shorter billboard card with a top-centre show switcher that fills as it
   auto-advances; episodes sit in a compact row beneath it. Supersedes the full-height
   hero and overlapping row above. */
.billboard{--tile:clamp(96px,7.4vw,140px)}
.billboard-stage{padding:clamp(12px,1.4vw,24px) var(--gutter) 0}
.billboard .office-scene{height:clamp(420px,54svh,660px);min-height:0;max-height:none;border-radius:var(--media-radius);overflow:hidden;clip-path:inset(0 round var(--media-radius))}
.billboard .office-scene::after{height:28%;bottom:-2px}
.billboard .scene-shade{background:linear-gradient(90deg,#000e 0%,#000a 30%,#0000 62%),linear-gradient(0deg,#0009 0%,#0000 40%),linear-gradient(180deg,#0008 0%,#0000 26%)}
.billboard .zorg-actor,.billboard .jdawg-actor{width:auto;height:104%;aspect-ratio:1;right:5%;bottom:-6%}
.billboard .cash-actor{width:auto;height:100%;right:3%;bottom:-2%}
.billboard-copy{top:50%;bottom:auto;left:clamp(26px,4vw,72px);width:min(600px,46%);transform:translateY(-44%)}
.billboard-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;margin-bottom:clamp(12px,1.8vh,18px);border-radius:4px;background:var(--accent);color:#111;font-size:13px;font-weight:700;letter-spacing:.02em}
.billboard-brand{margin-bottom:clamp(8px,1.2vh,14px)}
.billboard-brand .broadcast-logo{width:clamp(64px,5vw,96px)}
.show-name{font-size:clamp(40px,4.3vw,92px);margin-bottom:clamp(8px,1.2vh,14px)}
.show-meta{font-size:clamp(14px,.95vw,18px)}
.billboard-tagline{font-size:clamp(16px,1.15vw,22px)!important;margin:clamp(10px,1.6vh,16px) 0 clamp(16px,2.4vh,24px)!important}
.billboard .watch-button,.info-button{font-size:clamp(15px,1vw,19px);padding:.85em 1.45em}
.billboard .audience{display:none}

/* Segmented show switcher, top centre. */
.show-switch{position:absolute;z-index:5;top:clamp(14px,2vh,22px);left:50%;transform:translateX(-50%);display:flex;gap:4px;max-width:calc(100% - 24px);padding:4px;border:1px solid #ffffff24;border-radius:999px;background:#000a;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow-x:auto;scrollbar-width:none}
.show-switch::-webkit-scrollbar{display:none}
.show-switch button{position:relative;flex:none;padding:9px clamp(12px,1.1vw,18px) 11px;border:0;border-radius:999px;background:none;color:#cfcfca;font:inherit;font-size:clamp(13px,.9vw,16px);font-weight:500;white-space:nowrap;cursor:pointer;transition:background .3s,color .3s}
.show-switch button:hover{color:#fff}
.show-switch button[aria-pressed=true]{background:#ffffff26;color:#fff}
.show-switch i{position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:#ffffff2e;opacity:0;transition:opacity .3s;overflow:hidden}
.show-switch i::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--progress,0));transition:transform 1s linear}
.show-switch button[aria-pressed=true] i{opacity:1}
.show-switch button.is-instant i::after{transition:none}
.switch-short{display:none}

/* Compact episodes row under the billboard (no overlap). */
.billboard-row{position:relative;margin-top:clamp(18px,1.8vw,30px)}
.billboard .row-arrows{position:absolute;top:-4px;right:var(--gutter);z-index:2}
.billboard .row-arrows button{width:38px;height:38px;font-size:16px}
.show-reels-head{display:flex;align-items:baseline;gap:14px;margin:0 0 2px;padding-right:110px}
.show-reels-head h2{margin:0;font-size:clamp(18px,1.3vw,24px);font-weight:600;letter-spacing:-.02em}
.show-reels-head span{font-size:14px;color:var(--muted)}
.billboard .show-reel-grid{gap:clamp(8px,.7vw,12px);padding-top:12px;padding-bottom:18px}
.billboard .show-reel{border-radius:8px}
.billboard .show-reel>span{padding:9px;font-size:clamp(12px,.8vw,14px)}
.billboard .show-reel>b{top:7px;left:7px;font-size:10px;padding:3px 6px}
.hero-rule{margin-top:clamp(12px,1.6vw,26px)}

/* Features: landscape video tiles that open the film player. */
.features-section{--game-tile:clamp(290px,26vw,520px)}
.feature-tile{border:0;padding:0;font:inherit;color:#fff;text-align:left;cursor:pointer}
.feature-play{position:absolute;right:12px;bottom:12px;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#f2f1ec;color:#111;transition:background .25s,transform .4s var(--ease)}
.feature-play svg{width:16px;height:16px;margin-left:2px}
.feature-tile:hover .feature-play,.feature-tile:focus-visible .feature-play{background:var(--accent);transform:scale(1.08)}
.feature-tile>span{padding-right:64px}

@media(max-width:700px){
 .billboard{--tile:104px}
 .billboard-stage{padding:10px 12px 0}
 .billboard .office-scene{height:min(600px,calc(100svh - 150px))}
 .billboard .scene-shade{background:linear-gradient(180deg,#0009 0%,#0000 22%,#0000 38%,#000c 70%,#000e 100%)}
 .billboard .zorg-actor,.billboard .jdawg-actor{height:64%;right:-12%;top:46px;bottom:auto}
 .billboard .cash-actor{height:60%;right:-10%;top:52px;bottom:auto}
 .billboard-copy{top:auto;bottom:22px;left:18px;right:18px;width:auto;transform:none}
 .billboard-tag{height:22px;font-size:11px;margin-bottom:10px}
 .billboard-brand .broadcast-logo{width:60px}
 .show-name{font-size:clamp(34px,10vw,46px)}
 .billboard-tagline{font-size:15px!important;margin:8px 0 16px!important}
 .billboard .watch-button,.info-button{font-size:14px;padding:12px 16px}
 .show-switch{top:10px;padding:3px;gap:2px}
 .show-switch button{font-size:13px;padding:7px 14px 9px}
 .switch-long{display:none}
 .switch-short{display:inline}
 .show-switch i{left:10px;right:10px;bottom:4px}
 .show-reels-head{padding-right:0}
 .billboard .row-arrows{display:none}
 .billboard-row{margin-top:16px}
}
@media(prefers-reduced-motion:reduce){.show-switch i::after{transition:none}}

/* Round 3: one left line for the billboard copy and the episodes row, a tighter join,
   and the same square arrows as Latest. */
.billboard{--card-inset:clamp(24px,3.2vw,60px)}
.billboard .office-scene{height:clamp(400px,50svh,600px)}
.billboard-copy{left:var(--card-inset)}
.billboard-row{margin-top:clamp(12px,1.1vw,18px)}
.show-reels-head{padding-left:var(--card-inset);padding-right:calc(var(--card-inset) + 120px)}
.billboard .show-reel-grid{padding-top:10px;padding-left:calc(var(--gutter) + var(--card-inset));scroll-padding-left:calc(var(--gutter) + var(--card-inset))}
.billboard .row-arrows{top:-14px;right:calc(var(--gutter) + var(--card-inset));gap:12px}
.billboard .row-arrows button{width:48px;height:48px;border:1px solid var(--line);border-radius:0;background:transparent;font-size:24px}
@media(max-width:700px){
 .billboard{--card-inset:18px}
 .billboard .office-scene{height:min(580px,calc(100svh - 150px))}
 .show-reels-head{padding-left:6px;padding-right:0;flex-wrap:wrap;gap:4px 10px}
 .billboard .show-reel-grid{padding-left:calc(var(--gutter) + 6px);scroll-padding-left:calc(var(--gutter) + 6px)}
}
/* The billboard hangs flush from the nav line: no top gap, square top corners. */
.billboard-stage{padding-top:0}
.billboard .office-scene{border-radius:0 0 var(--media-radius) var(--media-radius);clip-path:inset(0 round 0 0 var(--media-radius) var(--media-radius))}
@media(max-width:700px){.billboard-stage{padding-top:0}}

/* Fixed header: solid at the top, then shrinks and turns to frosted glass on scroll.
   Fixed (not sticky) so the shrink never shifts the page; body padding holds its place. */
body{padding-top:96px}
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;max-width:none;margin:0;height:96px;padding-inline:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));background:#080808;border-bottom:1px solid var(--line);transition:height .4s var(--ease),background-color .4s ease,border-color .4s ease}
.site-header .wordmark{transition:font-size .4s var(--ease)}
.site-header.is-scrolled{height:64px;background:#080808a6;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:#ffffff14}
.site-header.is-scrolled .wordmark{font-size:22px}
.site-header #mobile-menu{top:100%}
@media(max-width:700px){
 body{padding-top:80px}
 .site-header{height:80px}
 .site-header.is-scrolled{height:60px}
 .site-header.is-scrolled .wordmark{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .wordmark{transition:none}}
/* Only the active show title takes space, so the logo line sits right above it and
   moves up only when a title wraps. */
.show-titles{position:relative;display:block}
.show-info{position:absolute;left:0;right:0;bottom:0}
.show-info.is-active{position:relative}

/* Episodes lift up over the billboard's bottom fade. The card grows by the same amount
   and the copy anchors above the row, so the overall height stays put. */
.billboard{--row-lift:calc(var(--tile) * 16 / 9 * .55 + 46px)}
.billboard .office-scene{height:calc(clamp(400px,50svh,600px) + var(--row-lift) - 40px)}
.billboard .office-scene::after{height:46%;background:linear-gradient(#08080800,#080808b3 45%,#080808 92%)}
.billboard-copy{top:auto;bottom:calc(var(--row-lift) + clamp(18px,2.6vh,32px));transform:none}
.billboard-row{margin-top:calc(var(--row-lift) * -1)}
@media(max-width:700px){
 .billboard{--row-lift:calc(var(--tile) * 16 / 9 * .4 + 40px)}
 .billboard .office-scene{height:calc(min(560px,calc(100svh - 170px)) + var(--row-lift))}
 .billboard-copy{bottom:calc(var(--row-lift) + 14px)}
 .billboard .office-scene::after{height:40%}
}

/* Per-show synopsis (Netflix-style) replaces the shared tagline; the h1 stays for search. */
.show-desc{max-width:520px;margin:clamp(10px,1.4vh,14px) 0 0;font-size:clamp(15px,1.05vw,19px);line-height:1.5;color:#e4e3dd;text-wrap:pretty}
.billboard .broadcast-actions{margin-top:clamp(16px,2.4vh,26px)}
@media(max-width:700px){.show-desc{font-size:14px;line-height:1.45}.billboard .broadcast-actions{margin-top:14px}}
.billboard-copy{width:min(760px,52%)}
@media(max-width:700px){.billboard-copy{width:auto}}
/* Hero episode tiles a touch bigger. */
.billboard{--tile:clamp(110px,8.5vw,162px)}
@media(max-width:700px){.billboard{--tile:116px}}
/* Games and Features tiles a touch bigger (~15%). */
.games-section,.features-section{--game-tile:clamp(330px,30vw,600px)}
@media(max-width:700px){.games-section,.features-section{--game-tile:84vw}}

/* Games and Features tiles share the Latest/Selected work entrance: they arrive slightly
   oversized, tilted from their inner corner and lagging, then settle flat. Hover zooms the
   image inside a steady frame (as project and Latest cards do) instead of scaling the tile. */
.games-rail .game-tile{--k:calc(1 - var(--e, 1));transform-origin:var(--origin,50% 0);transform:translate3d(0,calc(var(--k) * (60px + 50px * var(--reach, 0))),0) rotate(calc(var(--k) * var(--side, 0) * 3.4deg)) scale(calc(1 + var(--k) * .1));transition:box-shadow .45s var(--ease);will-change:transform}
.games-rail .game-tile:hover,.games-rail .game-tile:focus-visible{transform:translate3d(0,calc(var(--k) * (60px + 50px * var(--reach, 0))),0) rotate(calc(var(--k) * var(--side, 0) * 3.4deg)) scale(calc(1 + var(--k) * .1))}
.games-rail .game-tile>img:first-child{scale:calc(1 + var(--k) * .14);transition:transform .6s var(--ease)}
.games-rail .game-tile:hover>img:first-child,.games-rail .game-tile:focus-visible>img:first-child{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.games-rail .game-tile,.games-rail .game-tile:hover,.games-rail .game-tile>img:first-child{transform:none;scale:none}}

/* The episodes row has no heading (the billboard already names the show and count);
   arrows sit in the fade just above the tiles on the right. */
.billboard{--row-lift:calc(var(--tile) * 16 / 9 * .55 + 14px)}
.billboard .row-arrows{top:-58px}
@media(max-width:700px){.billboard{--row-lift:calc(var(--tile) * 16 / 9 * .4 + 10px)}}
/* Hero video tiles a little bigger with more air between them. */
.billboard{--tile:clamp(124px,9.6vw,184px)}
.billboard .show-reel-grid{gap:clamp(12px,1vw,18px)}
@media(max-width:700px){.billboard{--tile:124px}.billboard .show-reel-grid{gap:10px}}

/* Games and Features: titles and details sit under the image, streaming-style.
   Game tiles use the 4:5 cover ratio from the Games page; Features stay 16:9 video. */
.games-section{--game-tile:clamp(230px,20vw,380px)}
.tile-card{flex:0 0 var(--game-tile);min-width:0;scroll-snap-align:start}
.games-rail .game-tile{display:block;width:100%;flex:none}
.games-section .game-tile{aspect-ratio:4/5}
.features-section .game-tile{aspect-ratio:16/9}
.tile-caption{padding-top:14px}
.tile-caption h3{margin:0;font-size:clamp(18px,1.25vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.tile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:8px 0 0;font-size:14px;color:var(--muted)}
.tile-meta span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 9px;border-radius:50%;background:currentColor;vertical-align:middle;opacity:.7}
.tile-meta .tile-rating{display:inline-flex;align-items:center;height:21px;padding:0 6px;margin-right:10px;border:1px solid #ffffff80;border-radius:4px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em}
.tile-meta .tile-rating+span::before{display:none}
.tile-blurb{margin:8px 0 0;font-size:15px;line-height:1.45;color:#c9c8c2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.game-card .tile-meta{margin-top:10px}
.game-card .tile-blurb{-webkit-line-clamp:3;max-width:44ch}
.feature-tile>span{display:none}
@media(max-width:700px){.games-section{--game-tile:62vw}.tile-blurb{font-size:14px}}
/* Game and Features cards enter as a whole so the caption travels with its image. */
.games-rail .tile-card{--k:calc(1 - var(--e, 1));transform-origin:var(--origin,50% 0);transform:translate3d(0,calc(var(--k) * (60px + 50px * var(--reach, 0))),0) rotate(calc(var(--k) * var(--side, 0) * 3.4deg)) scale(calc(1 + var(--k) * .1));will-change:transform}
.games-rail .game-tile,.games-rail .game-tile:hover,.games-rail .game-tile:focus-visible{transform:none;will-change:auto}
@media(prefers-reduced-motion:reduce){.games-rail .tile-card{transform:none}}
/* Room inside the scrolling row for cards that enter lower and larger than they settle. */
.games-rail{padding-bottom:140px;margin-bottom:-114px}

/* ── Review round (2026-10-14) ───────────────────────────────────────────── */

/* Header: page links plus one prominent enquiry action. */
.header-enquiries{display:flex}
.header-cta{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--ink);border-radius:999px;font-size:15px;font-weight:600;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.header-cta svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.header-cta:hover,.header-cta:focus-visible{background:var(--accent);border-color:var(--accent);color:#111}
.header-cta:hover svg{transform:translate(2px,-2px)}
.site-header.is-scrolled .header-cta{padding:8px 15px;font-size:14px}
#mobile-menu .mobile-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:14px 18px;border-radius:999px;background:var(--accent);color:#111;font-weight:600}
#mobile-menu .mobile-cta svg{width:16px;height:16px}
@media(max-width:700px){.header-enquiries{display:none}}

/* Show switcher: same idea, much quieter — plain tabs with a fine progress line. */
.show-switch{gap:clamp(14px,1.6vw,26px);padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;top:clamp(16px,2.2vh,24px)}
.show-switch button{padding:6px 0 9px;border-radius:0;background:none!important;color:#ffffff8c;font-size:clamp(12px,.8vw,14px);font-weight:500;letter-spacing:.01em;text-shadow:0 1px 12px #000a}
.show-switch button:hover{color:#ffffffd9}
.show-switch button[aria-pressed=true]{color:#fff}
.show-switch i{left:0;right:0;bottom:2px;height:1px;background:#ffffff26}
.show-switch i::after{background:#ffffffb3}
@media(max-width:700px){.show-switch{gap:18px}.show-switch button{font-size:12px;padding:6px 0 8px}.show-switch i{left:0;right:0;bottom:2px}}

/* Games and Features: roomier cards, clear hierarchy, metadata as quiet pills. */
.games-rail{gap:clamp(22px,2.2vw,40px)}
.tile-caption{padding-top:18px}
.tile-caption h3{font-size:clamp(20px,1.5vw,28px);letter-spacing:-.025em}
.tile-meta{gap:6px;margin-top:12px;font-size:12px;color:#c4c3bd}
.tile-meta span{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:#ffffff12;white-space:nowrap}
.tile-meta span+span::before{display:none}
.tile-meta .tile-rating{height:24px;margin-right:0;padding:0 9px;border:1px solid #ffffffa6;border-radius:999px;background:none;color:#fff;font-size:11px}
.tile-blurb{margin-top:12px;font-size:14px;line-height:1.5;color:#9d9c96;max-width:46ch}
.game-card .tile-meta{margin-top:12px}

/* Selected work: heading sits on the grid; the 3D box keeps a fixed square canvas. */
.selected-heading{display:flex;align-items:flex-end;justify-content:space-between;min-height:0;margin:24px 0 clamp(28px,3vw,44px);gap:24px}
.selected-heading h2{max-width:none;padding-bottom:4px}
.stronghold-box{position:relative;right:auto;top:auto;flex:none;width:clamp(260px,28vw,460px);height:auto;aspect-ratio:1;margin:0 -2% 0 0}
.stronghold-box iframe{left:-10%;top:-10%;width:120%;height:120%}
@media(max-width:700px){
 .selected-heading{flex-direction:row;align-items:flex-end;margin:12px 0 26px;gap:8px}
 .selected-heading h2{max-width:none}
 .stronghold-box{width:min(46vw,220px);height:auto;margin:0 -6px 0 0}
}

/* Closing call to action after Features. */
.closing-cta{padding-top:clamp(70px,8vw,130px)}
.closing-card{position:relative;overflow:hidden;border-radius:var(--media-radius);isolation:isolate;min-height:clamp(380px,38vw,560px);display:flex;align-items:flex-end}
.closing-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.04)}
.closing-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080808f2 0%,#080808cc 42%,#08080833 100%),linear-gradient(0deg,#080808d9,#0000 60%)}
.closing-card::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,#000b .85px,transparent 1px);background-size:5px 5px;opacity:.5;pointer-events:none}
.closing-copy{padding:clamp(28px,4.5vw,72px);max-width:760px}
.closing-kicker{margin:0 0 14px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600}
.closing-cta h2{margin:0;font-size:clamp(40px,5vw,84px);line-height:1;letter-spacing:-.045em;font-weight:500}
.closing-copy>p:not(.closing-kicker){margin:20px 0 28px;max-width:560px;font-size:clamp(16px,1.2vw,20px);line-height:1.55;color:#d8d7d1}
.closing-copy .broadcast-actions{display:flex;flex-wrap:wrap;gap:12px}
.closing-copy .watch-button{margin:0}
.closing-copy .watch-button svg{width:16px;height:16px}

/* Footer: brand and tagline, then two clear groups — pages and social icons. */
.site-footer-v2{display:grid;grid-template-columns:minmax(0,1.6fr) auto auto;gap:clamp(28px,5vw,96px);align-items:start;padding:clamp(48px,5vw,72px) var(--gutter) 28px;border-top:1px solid var(--line);max-width:var(--max);margin-inline:auto}
.footer-tagline{margin:14px 0 0;max-width:420px;font-size:15px;line-height:1.55;color:var(--muted)}
.footer-label{margin:0 0 14px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#8a8984}
.footer-pages{display:flex;flex-direction:column;gap:10px;font-size:16px}
.footer-pages a{width:max-content;border-bottom:1px solid transparent;transition:border-color .2s}
.footer-pages a:hover,.footer-pages a:focus-visible{border-color:currentColor}
.social-icons{display:flex;flex-wrap:wrap;gap:8px;max-width:180px}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:#d4d3cd;transition:color .2s,border-color .2s,background .2s}
.social-icon svg{width:19px;height:19px}
.social-icon:hover,.social-icon:focus-visible{color:#111;background:var(--accent);border-color:var(--accent)}
.footer-legal{grid-column:1/-1;margin:clamp(24px,3vw,40px) 0 0;padding-top:20px;border-top:1px solid #ffffff10;font-size:13px;color:#77766f}
@media(max-width:800px){.site-footer-v2{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.social-icons{max-width:none}}

/* Shared enquiry page: a quiet broadcast-desk feel with a lime “channel open” light. */
.enquiry-page{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,110px);align-items:start;padding:clamp(48px,6vw,110px) var(--gutter) clamp(70px,8vw,140px);max-width:var(--max);margin:0 auto}
.enquiry-page h1{margin:0;font-size:clamp(54px,6.4vw,112px);line-height:.95;letter-spacing:-.05em;font-weight:500}
.enquiry-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#cfcec8}
.enquiry-signal{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 #c7fd5366;animation:enquiry-pulse 2.4s ease-out infinite}
@keyframes enquiry-pulse{0%{box-shadow:0 0 0 0 #c7fd5373}70%{box-shadow:0 0 0 12px #c7fd5300}100%{box-shadow:0 0 0 0 #c7fd5300}}
.enquiry-lead{margin:28px 0 10px;font-size:clamp(22px,2vw,32px);line-height:1.25;letter-spacing:-.02em;color:#fff}
.enquiry-copy p:not(.enquiry-lead){margin:0;max-width:440px;font-size:17px;line-height:1.6;color:#bdbcb6}
.enquiry-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:34px 0 0;padding:22px 0 0;border-top:1px solid var(--line);list-style:none;max-width:520px}
.enquiry-proof strong{display:block;font-size:clamp(24px,2vw,32px);font-weight:600;letter-spacing:-.03em;color:#fff}
.enquiry-proof span{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:#9d9c96}
.enquiry-direct{margin:34px 0 0;font-size:15px;color:#9d9c96}
.enquiry-direct a{color:#fff;border-bottom:1px solid #ffffff4d}
.copy-email{margin-left:8px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:none;color:#cfcec8;font:inherit;font-size:12px;cursor:pointer}
.copy-email:hover{border-color:#fff;color:#fff}
.copy-status{margin-left:8px;font-size:12px;color:var(--accent)}
.enquiry-form{position:relative;padding:clamp(24px,3vw,44px);border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#151614 0%,#0d0d0c 60%);box-shadow:0 30px 80px #0008;isolation:isolate}
.enquiry-form::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background-image:radial-gradient(circle,#ffffff0d .8px,transparent 1px);background-size:6px 6px;pointer-events:none}
.enquiry-type{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.enquiry-type label{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#9d9c96}
.select-wrap{position:relative;display:inline-flex}
.select-wrap::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.enquiry-type select{appearance:none;-webkit-appearance:none;padding:12px 44px 12px 20px;border:1px solid var(--accent);border-radius:999px;background:#c7fd5314;color:#fff;font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.enquiry-type .select-wrap{color:var(--accent)}
.enquiry-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.field{display:flex;flex-direction:column;gap:8px}
.field>span:not(.select-wrap){font-size:13px;letter-spacing:.06em;color:#bdbcb6}
.field input,.field textarea,.field select{width:100%;padding:12px 0;border:0;border-bottom:1px solid #ffffff38;border-radius:0;background:transparent;color:#fff;font:inherit;font-size:18px;transition:border-color .25s}
.field select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer}
.field .select-wrap{display:flex}
.field .select-wrap::after{right:4px}
.field select option,.enquiry-type select option{background:#151614;color:#fff}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--accent)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{box-shadow:0 2px 0 0 var(--accent)}
.field textarea{resize:vertical;min-height:140px;line-height:1.55}
.field-message{margin-top:24px}
.enquiry-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:30px}
.enquiry-actions .watch-button{margin:0;border:0;cursor:pointer;font-size:17px;font-weight:600}
.enquiry-actions .watch-button svg{width:16px;height:16px}
.enquiry-note{margin:0;font-size:14px;color:#9d9c96}
.enquiry-page[data-type=contact] .enquiry-type select{border-color:#ffffff59;background:#ffffff0d}
.enquiry-page[data-type=contact] .enquiry-type .select-wrap{color:#fff}
@media(max-width:900px){.enquiry-page{grid-template-columns:1fr}.enquiry-proof{max-width:none}}
@media(max-width:560px){.enquiry-grid{grid-template-columns:1fr}.enquiry-type{flex-direction:column;align-items:flex-start}.enquiry-proof{grid-template-columns:1fr 1fr 1fr;gap:10px}.enquiry-proof strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){.enquiry-signal{animation:none}}

/* Video player: no title bar (YouTube/Vimeo carry their own); a floating close. */
.player-dialog{position:fixed}
.player-close{position:absolute;top:18px;right:18px;z-index:3;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid #ffffff3d;border-radius:50%;background:#000a;color:#fff;cursor:pointer}
.player-close svg{width:22px;height:22px}
.player-close:hover,.player-close:focus-visible{background:#fff;color:#111}
.player-body{display:flex;justify-content:center;padding:clamp(56px,7vh,84px) 4vw 12px}
.player-body video{max-height:calc(100dvh - 140px)}
.player-status{padding:0 4vw 18px;text-align:center;color:#cfcec8}
.player-status a{color:#fff;border-bottom:1px solid #ffffff73}
.selected.section-space{padding-top:clamp(36px,4vw,64px)}
.site-footer-v2{margin-top:clamp(56px,6vw,90px)}

/* Creator page: lead, six working principles, experience with years, brands. */
.about-aside{margin-top:18px!important;font-size:18px!important;color:#9d9c96;font-style:italic}
.about-chapters .section-head{margin-bottom:clamp(28px,3vw,44px)}
.chapter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(24px,3vw,48px)}
.chapter{padding-top:20px;border-top:1px solid var(--line)}
.chapter-number{margin:0 0 14px;font-size:13px;letter-spacing:.14em;color:var(--accent)}
.chapter h3{margin:0 0 12px;font-size:clamp(22px,1.7vw,30px);font-weight:500;letter-spacing:-.025em}
.chapter p:last-child{margin:0;font-size:16px;line-height:1.65;color:#bdbcb6}
.experience-years{margin-left:12px;padding-left:12px;border-left:1px solid var(--line);color:#8a8984;white-space:nowrap}
.brand-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.brand-chips li{padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-size:16px;color:#e4e3dd}
@media(max-width:900px){.chapter-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.chapter-grid{grid-template-columns:1fr}.experience-years{display:block;margin:4px 0 0;padding:0;border:0}}
/* Lead films: the image is the film's own thumbnail, with a centred play action. */
.case-hero.has-lead{position:relative}
.case-hero.has-lead::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#0000 35%,#0006 100%);pointer-events:none}
.case-hero.has-lead .watch-button{position:absolute;left:50%;top:50%;bottom:auto;right:auto;z-index:2;margin:0;transform:translate(-50%,-50%);font-size:clamp(17px,1.45vw,23px);font-weight:600;padding:1em 1.75em;box-shadow:0 18px 50px #0009}
.case-hero.has-lead .watch-button:hover{transform:translate(-50%,calc(-50% - 2px))}
@media(max-width:700px){
 .selected .section-head.selected-heading{flex-wrap:nowrap;align-items:flex-end}
 .selected .selected-heading h2{max-width:60%;font-size:clamp(34px,10vw,46px)}
 .selected .stronghold-box{width:38vw}
}

/* ── Feedback round (2026-10-14, b) ───────────────────────────────────── */

/* Selected work: a bigger 3D box that sits behind the tiles; heading low on the grid. */
.selected-heading{align-items:flex-end;margin-bottom:clamp(20px,2.2vw,32px)}
.selected-heading h2{position:relative;z-index:4}
.stronghold-box{width:clamp(320px,40vw,640px);margin:0 -3% calc(clamp(320px,40vw,640px) * -.32) 0;z-index:1}
.selected .project-grid{position:relative;z-index:3}
@media(max-width:700px){.selected .stronghold-box{width:52vw;margin:0 -10px -18vw 0}.selected .selected-heading h2{max-width:52%}}

/* Show switcher: the pill treatment back, kept small so it doesn't shout. */
.show-switch{gap:2px;padding:3px;border:1px solid #ffffff1f;border-radius:999px;background:#0009;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.show-switch button{padding:7px 14px 9px;border-radius:999px;color:#ffffffa6;font-size:clamp(12px,.8vw,14px)}
.show-switch button[aria-pressed=true]{background:#ffffff1f!important;color:#fff}
.show-switch i{left:14px;right:14px;bottom:4px;height:1.5px;background:#ffffff1f}
.show-switch i::after{background:var(--accent)}
@media(max-width:700px){.show-switch{gap:0}.show-switch button{padding:6px 12px 8px}.show-switch i{left:12px;right:12px;bottom:3px}}

/* Rows enter from just below their resting place rather than far beneath it. */
.latest-rail .latest-image,.games-rail .tile-card{transform:translate3d(0,calc(var(--k) * (24px + 22px * var(--reach, 0))),0) rotate(calc(var(--k) * var(--side, 0) * 3.4deg)) scale(calc(1 + var(--k) * .07))}

/* Game covers drift inside their frames while scrolling, like Work and Latest. */
.games-rail .game-tile>img:first-child{transform:translate3d(var(--image-x,0px),var(--image-y,0px),0) scale(1.1)}
.games-rail .game-tile:hover>img:first-child,.games-rail .game-tile:focus-visible>img:first-child{transform:translate3d(var(--image-x,0px),var(--image-y,0px),0) scale(1.15)}
@media(prefers-reduced-motion:reduce){.games-rail .game-tile>img:first-child{transform:none}}

/* Features show only their running time. */
.features-section .tile-meta span{background:none;padding:0;height:auto;color:#9d9c96;font-size:13px}

/* Closing call to action: anchored copy and matching buttons. */
.closing-card{align-items:center;min-height:clamp(360px,34vw,520px)}
.closing-copy .watch-button,.closing-copy .info-button{height:54px;padding:0 26px;font-size:16px;font-weight:600;line-height:1}
@media(max-width:700px){
 .closing-card{align-items:flex-end;min-height:520px}
 .closing-card::before{background:linear-gradient(0deg,#080808f2 0%,#080808b3 45%,#08080826 80%)}
 .closing-copy .watch-button,.closing-copy .info-button{width:100%;justify-content:center}
}

/* Footer: partnership action under the tagline and a large closing wordmark. */
.footer-cta{margin-top:22px}
.footer-mark{grid-column:1/-1;margin:clamp(30px,4vw,60px) 0 0;font-size:clamp(34px,10.6vw,216px);font-weight:700;line-height:.8;letter-spacing:-.06em;white-space:nowrap;background:linear-gradient(180deg,#f2f1ec2e,#f2f1ec08 85%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.footer-mark span{font-size:.28em;vertical-align:top;letter-spacing:0}
.footer-legal{margin-top:20px}
.field>span em{font-style:normal;color:#77766f;margin-left:6px}
.field-wide{grid-column:1/-1}

/* Mobile hero: a little shorter, with smaller characters. */
@media(max-width:700px){
 .billboard .office-scene{height:calc(min(500px,calc(100svh - 210px)) + var(--row-lift))}
 .billboard .zorg-actor,.billboard .jdawg-actor{height:50%;right:-6%;top:44px}
 .billboard .cash-actor{height:46%;right:-4%;top:52px}
}
.stronghold-box{margin-right:0}
.stronghold-box iframe{left:-12%;width:118%}
.footer-mark{padding-bottom:.14em;margin-bottom:-.1em}

/* Footer channel guide: socials as TV channels. Hover tunes in with a burst of static,
   then floods the tile with the platform's own colours. */
.site-footer-v2{grid-template-columns:minmax(0,1.1fr) auto minmax(0,1.5fr)}
.channel-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.channel{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;align-items:center;column-gap:10px;min-height:104px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#ffffff06;overflow:hidden;isolation:isolate;color:#e4e3dd;--brand:#f2f1ec;--brand-ink:#111;transition:border-color .3s,color .3s,transform .45s var(--ease)}
.channel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--brand);opacity:0;transform:scaleY(.04);transition:opacity .25s,transform .45s var(--ease) .12s}
.channel::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,#fff3 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#0000 0 2px,#ffffff14 2px 3px);mix-blend-mode:overlay}
.channel-num{grid-column:1/3;font-size:11px;letter-spacing:.16em;color:#8a8984;font-variant-numeric:tabular-nums}
.channel-icon{grid-row:2/4;width:30px;height:30px;transition:transform .5s var(--ease)}
.channel-name{grid-column:2;font-size:16px;font-weight:600;letter-spacing:-.01em}
.channel-handle{grid-column:2;font-size:12px;color:#8a8984;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-arrow{grid-column:3;grid-row:1;display:flex;opacity:.35;transition:opacity .3s,transform .4s var(--ease)}
.channel-arrow svg{width:15px;height:15px}
.channel:hover,.channel:focus-visible{color:var(--brand-ink);border-color:transparent;transform:translateY(-3px);outline:none}
.channel:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.channel:hover::before,.channel:focus-visible::before{opacity:1;transform:none}
.channel:hover::after,.channel:focus-visible::after{animation:channel-static .42s steps(6) both}
.channel:hover .channel-icon,.channel:focus-visible .channel-icon{transform:scale(1.12) rotate(-6deg)}
.channel:hover .channel-num,.channel:hover .channel-handle,.channel:focus-visible .channel-num,.channel:focus-visible .channel-handle{color:inherit;opacity:.75}
.channel:hover .channel-arrow,.channel:focus-visible .channel-arrow{opacity:1;transform:translate(2px,-2px)}
@keyframes channel-static{0%{opacity:.9;background-position:0 0,0 0}50%{opacity:.6;background-position:0 7px,3px 0}100%{opacity:0;background-position:0 -5px,-2px 0}}
.channel[data-platform=instagram]{--brand:linear-gradient(135deg,#feda75,#fa7e1e 25%,#d62976 55%,#962fbf 78%,#4f5bd5);--brand-ink:#fff}
.channel[data-platform=tiktok]{--brand:#000;--brand-ink:#fff}
.channel[data-platform=tiktok]:hover .channel-icon,.channel[data-platform=tiktok]:focus-visible .channel-icon{filter:drop-shadow(-2px -1px 0 #25f4ee) drop-shadow(2px 1px 0 #fe2c55)}
.channel[data-platform=youtube]{--brand:#ff0033;--brand-ink:#fff}
.channel[data-platform=facebook]{--brand:#1877f2;--brand-ink:#fff}
.channel[data-platform=linkedin]{--brand:#0a66c2;--brand-ink:#fff}
.channel[data-platform=x]{--brand:#f2f1ec;--brand-ink:#000}
/* Tuning in on arrival: each channel flickers on in turn. */
.channel-guide.is-in .channel{animation:channel-on .6s steps(1,end) both;animation-delay:calc(var(--n) * 90ms)}
.channel-guide.is-in .channel::after{animation:channel-static .5s steps(5) both;animation-delay:calc(var(--n) * 90ms)}
@keyframes channel-on{0%{opacity:0}20%{opacity:.7}35%{opacity:.15}55%{opacity:.9}70%{opacity:.4}100%{opacity:1}}
@media(max-width:900px){.site-footer-v2{grid-template-columns:1fr 1fr}.footer-follow{grid-column:1/-1}}
@media(max-width:560px){.channel-guide{grid-template-columns:1fr 1fr}.channel{min-height:92px}}
@media(prefers-reduced-motion:reduce){.channel,.channel::before,.channel-icon,.channel-arrow{transition:none}.channel:hover::after,.channel-guide.is-in .channel,.channel-guide.is-in .channel::after{animation:none}.channel:hover{transform:none}}
.channel::before{transform-origin:50% 100%}
/* Touch screens have no hover: each channel keeps a stripe of its colour. */
@media(hover:none){.channel::before{opacity:1;transform:scaleY(.05)}}
@media(max-width:560px){.channel-handle{display:none}.channel{min-height:84px}}
@media(hover:none){.channel[data-platform=tiktok]::before{background:linear-gradient(90deg,#25f4ee,#fe2c55)}}

/* Channel guide, compact: smaller tiles with each channel's audience on the right. */
.channel{min-height:0;padding:10px 12px;column-gap:9px;row-gap:1px;border-radius:10px}
.channel-num{font-size:10px}
.channel-icon{width:22px;height:22px}
.channel-name{font-size:14px}
.channel-handle{font-size:11px}
.channel-arrow svg{width:13px;height:13px}
.channel-count{grid-column:3;grid-row:2/4;align-self:end;display:flex;flex-direction:column;align-items:flex-end;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8a8984;line-height:1.2}
.channel-count b{font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums}
.channel:hover .channel-count,.channel:focus-visible .channel-count,.channel:hover .channel-count b,.channel:focus-visible .channel-count b{color:inherit}
@media(max-width:560px){.channel{min-height:0}.channel-count{font-size:9px}.channel-count b{font-size:14px}}

/* Beta flag beside an in-development game's name. */
.beta-tag{display:inline-flex;align-items:center;height:19px;margin-left:8px;padding:0 7px;border-radius:999px;background:var(--accent);color:#111;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;vertical-align:.3em}

/* Enquiry stats: two now the series count has gone. */
.enquiry-proof{grid-template-columns:repeat(2,minmax(0,1fr));max-width:400px}

/* Closing card reads as a card: the office image stays visible with a clear edge, only the copy side is shaded. */
.closing-card{border:1px solid #ffffff2e;box-shadow:0 0 0 1px #0006,0 30px 80px #000a}
.closing-card::before{background:linear-gradient(90deg,#080808d9 0%,#08080899 38%,#08080800 68%)}
.closing-backdrop{transform:none}
/* Audience sits under the platform name (in place of the handle) so it never clips. */
.channel:has(.channel-count) .channel-handle{display:none}
.channel-count{grid-column:2/4;grid-row:3;align-self:center;flex-direction:row;align-items:baseline;gap:5px;white-space:nowrap;overflow:hidden}
.channel-count b{font-size:13px}
@media(max-width:560px){.channel-count b{font-size:13px}}

/* Mobile menu: full-screen black sheet, big links, close button bottom centre within thumb reach. */
body>#mobile-menu{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;gap:0;margin:0;padding:22px var(--gutter) calc(28px + env(safe-area-inset-bottom));background:#000;color:#f2f1ec;border:0;box-shadow:none;overflow-y:auto;overscroll-behavior:contain}
body>#mobile-menu[hidden]{display:none}
#mobile-menu .mobile-menu-mark{font-size:22px;width:max-content}
#mobile-menu .mobile-menu-links{display:flex;flex-direction:column;gap:6px;margin:auto 0 0;padding-top:48px}
#mobile-menu .mobile-menu-links a{width:max-content;font-size:clamp(48px,14vw,72px);line-height:1.02;letter-spacing:-.05em;font-weight:500;animation:menu-in .6s var(--ease) both;animation-delay:calc(var(--i) * 60ms + 60ms)}
#mobile-menu .mobile-menu-links a:active{color:var(--accent)}
#mobile-menu .mobile-cta{align-self:flex-start;margin:32px 0 0;font-size:16px;animation:menu-in .6s var(--ease) .3s both}
.mobile-menu-close{display:flex;align-items:center;justify-content:center;flex:none;width:64px;height:64px;margin:auto auto 0;border:1px solid #ffffff59;border-radius:50%;background:none;color:#fff;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.mobile-menu-close svg{width:24px;height:24px}
.mobile-menu-close:hover,.mobile-menu-close:focus-visible{background:#fff;color:#000;border-color:#fff;outline:none}
#mobile-menu .mobile-menu-links{margin-top:auto}
#mobile-menu .mobile-cta+.mobile-menu-close{margin-top:auto}
html.menu-open,html.menu-open body{overflow:hidden}
@keyframes menu-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#mobile-menu .mobile-menu-links a,#mobile-menu .mobile-cta{animation:none}}
@media(min-width:701px){body>#mobile-menu{display:none}}

/* Latest posts with a film play it on rollover, under the title overlay. */
.latest-image>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .5s}
.latest-image.is-playing>video{opacity:1}

/* Latest: framed artwork for wide/square images, so text graphics and pale backgrounds aren't cropped. */
.latest-image.is-framed{background:#0d0d0d}
.latest-wash{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(28px) saturate(1.2) brightness(.42);transform:scale(1.1)}
.latest-image.is-framed>img.latest-art{position:absolute;left:7%;right:7%;top:8%;width:86%;height:auto;max-height:56%;object-fit:contain;border-radius:8px;box-shadow:0 18px 40px #000a,0 0 0 1px #ffffff14;transition:transform .8s var(--ease)}
.latest-image.is-framed:hover>img.latest-art{transform:translateY(-4px) scale(1.02)}
.latest-image.is-framed>img.latest-art{left:50%;right:auto;width:auto;height:auto;max-width:86%;max-height:56%;transform:translateX(-50%)}
.latest-image.is-framed:hover>img.latest-art{transform:translateX(-50%) translateY(-4px) scale(1.02)}

/* Desktop header: wordmark left, page links truly centred, Brand partnerships right. */
@media(min-width:701px){
 .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
 .site-header>.wordmark{justify-self:start}
 .site-header>nav{margin:0;justify-self:center}
 .site-header>.header-enquiries{justify-self:end}
}

/* Latest post cover: the whole image over a dark blurred wash of itself (no pale letterbox). */
.article-cover-frame{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--media-radius);background:#0d0d0d;display:flex;justify-content:center;align-items:center;padding:clamp(20px,3vw,48px);max-height:760px}
.article-cover-frame>.latest-wash{z-index:-1}
.article-cover-frame>.article-cover{position:relative;width:auto;max-width:100%;max-height:min(680px,70vh);background:none;border-radius:10px;box-shadow:0 24px 60px #000b,0 0 0 1px #ffffff14}

/* Big monitors: the layout widens (no small centred column) and the hero grows with it. */
@media(min-width:2200px){:root{--max:2320px}}
@media(min-width:3000px){:root{--max:2760px}}
@media(min-width:1600px){.billboard .office-scene{height:calc(clamp(400px,56svh,820px) + var(--row-lift) - 40px)}}
/* Big monitors: headline, copy, buttons, tabs and tiles scale together from their 1920 sizes (×1.25 from 2200px, ×1.45 from 3000px). */
@media(min-width:2200px){
 :root{--k:1.25}
 html:not(#_) body .site-header nav a{font-size:calc(16px*var(--k))}
 html:not(#_) body .site-header .wordmark{font-size:calc(26px*var(--k))}
 html:not(#_) body .header-cta{font-size:calc(15px*var(--k));padding:calc(10px*var(--k)) calc(18px*var(--k))}
 html:not(#_) body .header-cta svg{width:calc(14px*var(--k));height:calc(14px*var(--k))}
 html:not(#_) body .broadcast{max-width:none}
 html:not(#_) body .billboard-copy{width:min(calc(760px*var(--k)),52%)}
 html:not(#_) body .billboard-tag{font-size:calc(12px*var(--k));padding:calc(4px*var(--k)) calc(8px*var(--k))}
 html:not(#_) body .billboard-brand{font-size:calc(14px*var(--k))}
 html:not(#_) body [data-row-rail]{width:calc(36px*var(--k));height:calc(36px*var(--k))}
 html:not(#_) body .show-name{font-size:calc(82.56px*var(--k))}
 html:not(#_) body .show-desc{font-size:calc(19px*var(--k));max-width:calc(520px*var(--k))}
 html:not(#_) body .show-meta{font-size:calc(18px*var(--k))}
 html:not(#_) body .show-rating{font-size:calc(14.76px*var(--k));height:auto;padding:calc(3px*var(--k)) calc(7.38px*var(--k))}
 html:not(#_) body .broadcast-logo{width:calc(165px*var(--k))}
 html:not(#_) body :is(.watch-button,.info-button){font-size:calc(19px*var(--k));padding:calc(16px*var(--k)) calc(28px*var(--k))}
 html:not(#_) body :is(.watch-button,.info-button) svg{width:calc(16px*var(--k));height:calc(16px*var(--k))}
 html:not(#_) body .show-switch button{font-size:calc(14px*var(--k));padding:calc(7px*var(--k)) calc(14px*var(--k))}
 html:not(#_) body .billboard{--tile:calc(184px*var(--k))}
 html:not(#_) body .show-reel>span{font-size:calc(14px*var(--k))}
 html:not(#_) body .section-head h2{font-size:calc(84px*var(--k))}
 html:not(#_) body .tile-caption h3{font-size:calc(28px*var(--k))}
 html:not(#_) body .tile-meta{font-size:calc(12px*var(--k))}
 html:not(#_) body .tile-meta .tile-rating{height:calc(24px*var(--k))}
 html:not(#_) body .tile-blurb{font-size:calc(14px*var(--k))}
 html:not(#_) body .latest-overlay h3{font-size:calc(30px*var(--k))}
 html:not(#_) body .latest-reveal p{font-size:calc(15px*var(--k))}
 html:not(#_) body .project-card h3{font-size:calc(54px*var(--k))}
 html:not(#_) body .closing-cta h2{font-size:calc(84px*var(--k))}
 html:not(#_) body .closing-copy>p:not(.closing-kicker){font-size:calc(20px*var(--k));max-width:calc(560px*var(--k))}
 html:not(#_) body .closing-copy{max-width:calc(760px*var(--k))}
 html:not(#_) body .footer-tagline{font-size:calc(15px*var(--k));max-width:calc(420px*var(--k))}
 html:not(#_) body .footer-pages{font-size:calc(16px*var(--k))}
 html:not(#_) body .channel-name{font-size:calc(14px*var(--k))}
 html:not(#_) body .channel-count b{font-size:calc(13px*var(--k))}
 html:not(#_) body .channel-icon{width:calc(22px*var(--k));height:calc(22px*var(--k))}
 html:not(#_) body .games-section{--game-tile:min(20vw,calc(380px*var(--k)))}
 html:not(#_) body .features-section{--game-tile:min(30vw,calc(600px*var(--k)))}
}
@media(min-width:3000px){:root{--k:1.45}}
/* Enquiry stats: three again (views, research-led design, design leadership). */
.enquiry-proof{grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px}

/* Contact: the two entities under “Let’s talk.” — dimmed, the one you're contacting lights up. */
.enquiry-entities{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);margin:clamp(24px,2.6vw,36px) 0 0}
.entity{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;border:0;background:none;color:#8a8984;font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;opacity:.32;filter:grayscale(1);transition:opacity .4s var(--ease),filter .4s var(--ease),color .4s,transform .4s var(--ease)}
.entity img{display:block;height:clamp(52px,5vw,72px);width:auto}
.entity:hover,.entity:focus-visible{opacity:.65;outline:none}
.entity:focus-visible img{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}
.entity-rule{align-self:stretch;width:1px;background:var(--line)}
.enquiry-page[data-type=hello] .entity[data-entity~=hello],.enquiry-page[data-type=brand] .entity[data-entity~=brand],.enquiry-page[data-type=press] .entity[data-entity~=press]{opacity:1;filter:none;color:var(--accent)}
@media(max-width:560px){.entity img{height:46px}.enquiry-entities{gap:18px}}
/* Enquiry stats: two per type (social reach for brand/press, experience for say hello). */
.enquiry-proof{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
/* Character atlases retain the original cutouts while their images decode. */
.jdawg-actor.has-expressions{background-image:url('/assets/jdawg-expressions-v2.webp');background-size:300% 300%}
.cash-static{display:block;width:100%;height:100%;object-fit:contain}
.cash-poses{position:absolute;inset:0;background:0 0 / 200% 200% no-repeat;visibility:hidden}
.cash-actor.has-poses .cash-static{visibility:hidden}
.cash-actor.has-poses .cash-poses{visibility:visible;background-image:url('/assets/cash-poses-v3.webp')}
@media(prefers-reduced-motion:reduce){.jdawg-actor,.cash-actor{transform:none!important}.channel-scene .office-video{display:none}.channel-scene .office-backdrop{opacity:.67!important}}

/* Keep the complete duo inside the billboard, including pointer travel. */
@media(max-width:700px){.billboard .cash-actor{right:2%;max-width:96%}}

/* Hero loading: J-Dawg starts on the neutral cell of his expression atlas (no separate fallback image),
   Wayne and Clint show their first pose straight away, and scenes not yet warmed fetch no character art. */
.jdawg-actor{background:url('/assets/jdawg-expressions-v2.webp') 50% 50% / 300% 300% no-repeat}
.cash-poses{visibility:visible;background-image:url('/assets/cash-poses-v3.webp')}
.channel-scene:not(.is-warm) :is(.zorg-actor,.jdawg-actor,.cash-poses){background-image:none!important}

/* Experience: each role flips to what it taught, then back, on a staggered loop. */
.exp-role{display:inline-grid;justify-items:end;perspective:400px}
.exp-face{grid-area:1/1;backface-visibility:hidden;transform-origin:50% 50% -.4em;animation:exp-role 9s var(--ease) infinite both;animation-delay:calc(var(--i) * .45s)}
.exp-lesson{color:var(--accent);animation-name:exp-lesson}
@keyframes exp-role{0%,42%{opacity:1;transform:none}50%,92%{opacity:0;transform:rotateX(90deg)}100%{opacity:1;transform:none}}
@keyframes exp-lesson{0%,42%{opacity:0;transform:rotateX(-90deg)}50%,92%{opacity:1;transform:none}100%{opacity:0;transform:rotateX(-90deg)}}
@media(max-width:700px){.exp-role{justify-items:start}}
@media(prefers-reduced-motion:reduce){.exp-face{animation:none}.exp-lesson{display:none}}

/* Creator: brands from the original site as a slow, endless logo marquee (white, pauses on hover). */
.brand-marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000);mask-image:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000)}
.brand-track{display:flex;flex:none;align-items:center;gap:clamp(48px,6vw,96px);margin:0;padding:clamp(14px,2vw,28px) clamp(24px,3vw,48px);list-style:none;animation:brand-scroll 48s linear infinite}
.brand-track li{display:flex;align-items:center;justify-content:center;height:clamp(34px,3.2vw,52px)}
.brand-track img{display:block;width:auto;height:100%;max-width:clamp(120px,12vw,190px);object-fit:contain;filter:brightness(0) invert(1);opacity:.62;transition:opacity .3s}
.brand-track li:hover img{opacity:1}
.brand-marquee:hover .brand-track{animation-play-state:paused}
@keyframes brand-scroll{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.brand-track{animation:none;flex-wrap:wrap;justify-content:center;flex:1}.brand-track[aria-hidden]{display:none}.brand-marquee{-webkit-mask-image:none;mask-image:none}}
.brand-track li.is-compact{height:clamp(44px,4.2vw,68px)}

/* Work headline: the rolling line and the punchline share one cell, so the heading never changes height. */
.cycle-heading{display:grid}
.cycle-heading>.cycle-main,.cycle-heading>.cycle-punch{grid-area:1/1;white-space:nowrap}
.cycle-punch{visibility:hidden}
.cycle-heading.is-punch>.cycle-main{visibility:hidden}
.cycle-heading.is-punch>.cycle-punch{visibility:visible}
.cycle-heading.is-flicker>.cycle-main,.cycle-heading.is-flicker>.cycle-punch{animation:cycle-flicker .55s steps(1,end) both}
@keyframes cycle-flicker{0%{opacity:0}12%{opacity:1}22%{opacity:.15}34%{opacity:1}48%{opacity:.35}60%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.cycle-punch{display:none}}

/* Hero: the artwork melts into the page on the left instead of showing a hard edge (copy stays fully opaque). */
.billboard .channel-scene{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 14%);mask-image:linear-gradient(90deg,#0000 0,#000 14%)}
@media(max-width:700px){.billboard .channel-scene{-webkit-mask-image:none;mask-image:none}}

/* Closing card parallax: the video is oversized and slides up to ±9% of the card's height as it scrolls past. */
.closing-backdrop{transform:translate3d(0,calc(var(--drift,0) * 9%),0) scale(1.22);will-change:transform}
@media(prefers-reduced-motion:reduce){.closing-backdrop{transform:none}}

/* Logo ® is larger and scales with the wordmark (header, scrolled header, footer, mobile menu). */
.wordmark span{font-size:.6em;line-height:1;margin:.02em 0 0 .1em}
.footer-mark span{font-size:.4em}

/* Player: vertical episodes size to their own shape, so the controls sit under the picture, not across the screen. */
.player-body video{width:auto;max-width:100%;height:auto}

/* Tile pop-up (Games, Features): one system for every row of tiles. */
.pop-template{display:none}
.game-tile .feature-play{pointer-events:none}
.game-tile:hover .feature-play,.game-tile:focus-visible .feature-play{background:var(--accent);transform:scale(1.08)}
@media(hover:hover) and (pointer:fine){.games-rail .tile-blurb{display:none}}
.tile-pop{position:fixed;z-index:90;overflow:hidden;border-radius:14px;background:#181818;box-shadow:0 0 0 1px #ffffff12,0 30px 90px #000d;animation:pop-in .32s var(--ease) both}
.tile-pop.is-closing{animation:pop-out .18s ease both}
@keyframes pop-in{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@keyframes pop-out{to{opacity:0;transform:scale(.9)}}
.pop-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;cursor:pointer;isolation:isolate}
.pop-wash{position:absolute;inset:-12%;background-size:cover;background-position:center;filter:blur(26px) saturate(1.2) brightness(.45);z-index:-1}
.pop-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pop-still.is-cover{left:50%;width:auto;max-width:none;transform:translateX(-50%);object-fit:contain}
.pop-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;opacity:0;transition:opacity .5s;pointer-events:none}
iframe.pop-video{transform:scale(1.22)}
.pop-video.is-ready{opacity:1}
.pop-media::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(#0000,#000c);pointer-events:none}
.pop-title{position:absolute;z-index:2;left:22px;right:22px;bottom:16px;font-size:clamp(24px,1.9vw,34px);font-weight:700;line-height:1;letter-spacing:-.035em;color:#fff;text-shadow:0 2px 18px #0009}
.pop-panel{padding:18px 22px 22px}
.pop-actions{display:flex;align-items:center;gap:10px}
.pop-play,.pop-more{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;cursor:pointer;transition:background .2s,border-color .2s,transform .3s var(--ease)}
.pop-play{border:0;background:#f2f1ec;color:#111}
.pop-play svg{width:18px;height:18px;margin-left:3px}
.pop-play:hover{background:var(--accent);transform:scale(1.06)}
.pop-more{margin-left:auto;border:2px solid #ffffff59;color:#fff}
.pop-more:first-child{margin-left:0}
.pop-more svg{width:20px;height:20px}
.pop-more:hover{border-color:#fff}
.pop-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:16px 0 0;font-size:15px;color:#bcbbb5}
.pop-box{display:inline-flex;align-items:center;height:24px;padding:0 7px;border:1px solid #ffffff80;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.04em;color:#fff}
.pop-blurb{margin:10px 0 0;font-size:15px;line-height:1.45;color:#f2f1ec}
@media(min-width:2200px){html:not(#_) body .tile-pop .pop-title{font-size:calc(34px*var(--k))}html:not(#_) body .pop-meta,html:not(#_) body .pop-blurb{font-size:calc(15px*var(--k))}html:not(#_) body .pop-play,html:not(#_) body .pop-more{width:calc(48px*var(--k));height:calc(48px*var(--k))}}

/* Mobile: 16px gutters; hero, its episode row and the closing card run edge to edge. */
@media(max-width:700px){
 :root{--gutter:16px}
 .billboard-stage{padding-inline:0}
 .billboard .office-scene{border-radius:0;clip-path:none}
 .billboard-row{padding-inline:var(--gutter)}
 .show-reel-grid{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
 .closing-card{margin-inline:calc(-1 * var(--gutter));border-radius:0;border-inline:0}
}
@media(max-width:700px){.billboard .show-reels .show-reel-grid{width:calc(100% + 2 * var(--gutter));max-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}}

/* Games page: the same tiles as the homepage row, in a grid. */
.games-page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(220px,20vw,340px),1fr));gap:clamp(28px,3vw,48px) clamp(16px,1.8vw,28px);padding:0 var(--gutter) clamp(70px,8vw,130px);max-width:var(--max);margin:0 auto}
.games-page-grid .game-tile{display:block;width:100%;aspect-ratio:4/5}
.games-page-grid .tile-caption h2{margin:0;font-size:clamp(20px,1.5vw,28px);font-weight:500;letter-spacing:-.025em}
@media(hover:hover) and (pointer:fine){.games-page-grid .tile-blurb{display:none}}
@media(max-width:700px){.games-page-grid{grid-template-columns:1fr 1fr;gap:28px 12px}.games-page-grid .tile-caption h2{font-size:18px}}
@media(min-width:2200px){html:not(#_) body .games-page-grid .tile-caption h2{font-size:calc(28px*var(--k))}}

/* Channel guide: a smooth CRT power-up, tile by tile, instead of a flicker. X uses its own black. */
.motion-ready .channel-guide:not(.is-in) .channel{opacity:0}
.channel-guide.is-in .channel{animation:channel-power .95s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n) * 110ms)}
.channel-guide.is-in .channel::after{animation:none}
@keyframes channel-power{0%{opacity:0;transform:scale(.94,.03);filter:brightness(2.6)}30%{opacity:1;transform:scale(1,.05);filter:brightness(2.4)}65%{transform:scale(1,1.015);filter:brightness(1.35)}100%{opacity:1;transform:none;filter:none}}
.channel[data-platform=x]{--brand:#000;--brand-ink:#fff}
.channel[data-platform=x]:hover,.channel[data-platform=x]:focus-visible{box-shadow:inset 0 0 0 1px #ffffff59}
@media(hover:none){.channel[data-platform=x]::before{background:linear-gradient(90deg,#fff,#8a8a8a)}}
@media(prefers-reduced-motion:reduce){.channel-guide.is-in .channel{animation:none}}

/* Creator interview: no hairline under the video (image baseline gap / sub-pixel edge). */
.interview-screen{background:#000}
.interview-screen>img{display:block}
.interview-screen iframe{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
/* Case-study film button on phones: a compact one-line pill in the bottom-left corner, not a big centred block. */
@media(max-width:700px){
 .case-hero.has-lead .watch-button{left:12px;top:auto;bottom:12px;transform:none;white-space:nowrap;font-size:14px;padding:10px 16px 10px 13px;gap:8px}
 .case-hero.has-lead .watch-button:hover{transform:none}
 .case-hero.has-lead .watch-button svg{width:14px;height:14px}
}
@media(max-width:700px){.case-hero.has-lead{aspect-ratio:16/9;height:auto;min-height:0}.case-hero.has-lead>img{width:100%;height:100%;object-fit:cover}}
/* Logos keep their own tones in reverse (dark → white, greys stay grey) so two-tone marks like Telstra and PayPal read; white marks stay as they are. */
.brand-track img{filter:grayscale(1) invert(1)}
.brand-track li.is-light img{filter:none}
/* Brands strip as a swipeable scroller (JS drives the drift; CSS animation off). */
.brand-marquee.is-scroller{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.brand-marquee.is-scroller::-webkit-scrollbar{display:none}
.brand-marquee.is-scroller .brand-track{animation:none}
@media(prefers-reduced-motion:reduce){.brand-marquee.is-scroller .brand-track[aria-hidden]{display:flex}}
@media(prefers-reduced-motion:reduce){.brand-marquee.is-scroller .brand-track{flex-wrap:nowrap;flex:none}}

/* Media boxes sit on the page colour, so no pale edge shows round the rounded corners (most visible on tilted Latest cards). */
.latest-image,.case-gallery figure,.next-project{background:#0d0d0d}
.latest-image{-webkit-backface-visibility:hidden;backface-visibility:hidden}
@media(max-width:700px){.closing-cta{padding-bottom:0}main:has(>.closing-cta:last-child)+.site-footer{margin-top:0;border-top:0}}
@media(max-width:700px){.closing-card{border-bottom:0;box-shadow:none}}
.footer-legal{color:#8f8e88}

/* Game demos: the player becomes a full-screen arcade cabinet. */
.player-dialog.is-game .player-body{flex:1;padding:clamp(56px,6vh,72px) clamp(12px,2vw,28px) 8px;min-height:0}
.player-dialog.is-game .player-body iframe{display:block;width:100%;height:100%;max-width:none;border:0;border-radius:12px;background:#0d0d0d}
.player-dialog.is-game .player-status{padding:8px 0 14px}
.player-dialog.is-game .player-status a{color:#cfcec8;border-bottom:1px solid #ffffff40}

/* Show switcher uses the short names everywhere (Eshays · Glebal · Cashies). */
.show-switch .switch-long{display:none}
.show-switch .switch-short{display:inline}

/* 3D box: no visible placeholder; the scene fades in once it has drawn. */
.box-load{border:0;color:transparent;background:none}
.box-load svg{display:none}
.box-load:focus-visible{color:var(--ink);outline:2px solid var(--accent)}
.stronghold-box iframe{opacity:0;transition:opacity .9s var(--ease)}
.stronghold-box.is-ready iframe{opacity:1}
@media(prefers-reduced-motion:reduce){.stronghold-box iframe{transition:none}}

/* Enquiry form: hidden spam trap, sending and sent states. */
.enquiry-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.enquiry-form.is-sending [type="submit"]{opacity:.6;cursor:progress}
.enquiry-form.is-sent .enquiry-note{color:var(--accent)}
.enquiry-note a{color:inherit;border-bottom:1px solid currentColor}

/* Games that aren't out yet: no link, a “Coming soon” tag instead of the play badge. */
.game-tile.is-soon{cursor:default}
.soon-tag{position:absolute;right:12px;bottom:12px;z-index:1;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:#080808cc;border:1px solid #ffffff40;color:#f2f1ec;font-size:12px;font-weight:600;letter-spacing:.04em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pop-soon{display:inline-flex;align-items:center;height:48px;padding:0 18px;border-radius:999px;border:1px solid #ffffff40;color:#f2f1ec;font-size:15px;font-weight:600}

/* Mobile hero characters: the transparent fade starts lower, so more of the character stays solid. */
@media(max-width:700px){.billboard :is(.jdawg-actor,.zorg-actor,.cash-actor){-webkit-mask-image:linear-gradient(#000 80%,transparent 100%);mask-image:linear-gradient(#000 80%,transparent 100%)}}
/* Coming soon tag: a small pill, not the old full-width caption bar that spans in game tiles inherit. */
.game-tile>span.soon-tag{left:auto;right:12px;bottom:12px;padding:0 11px;height:26px;background:#080808b3;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;border:1px solid #ffffff38}
@media(max-width:700px){.game-tile>span.soon-tag{right:10px;bottom:10px;height:24px;padding:0 10px;font-size:10px}}
/* Homepage Games head: more room between “All games” and the arrows on desktop. */
@media(min-width:701px){.games-section .rail-controls .text-link{margin-right:clamp(20px,2vw,36px)}}

/* Creator intro: the “best person to work with” line reads as part of the intro, same size and colour. */
.about-summary p.about-aside{font-size:24px!important;color:inherit;font-style:normal;margin-top:0!important}
@media(max-width:700px){.about-summary p.about-aside{font-size:20px!important}}
/* Nothing may push the page sideways on phones: iOS lets you swipe into any overflow. */
html{overflow-x:clip}
@media(max-width:700px){.stronghold-box iframe{left:-12%;width:112%}}
@media(max-width:700px){.selected .project-grid,.project-grid{grid-template-columns:minmax(0,1fr)}.stronghold-box{max-width:calc(100vw - var(--gutter) - 140px);margin-right:0}}
/* Eshays hero: Play and Behind the scenes sit on one row on phones; only the narrowest phones stack them. */
@media(max-width:700px){.billboard .broadcast-actions{flex-wrap:nowrap;gap:10px}.broadcast-actions .watch-button,.broadcast-actions .info-button{padding-inline:14px;white-space:nowrap}}
@media(max-width:359px){.billboard .broadcast-actions{flex-wrap:wrap}}
/* Posts: YouTube plays in the post; newer / older posts at the bottom. */
.article-embed{position:relative;aspect-ratio:16/9;background:#000}
.article-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(48px,6vw,80px);padding-top:28px;border-top:1px solid var(--line,rgba(255,255,255,.12))}
.post-nav-link{display:flex;align-items:center;gap:16px;min-width:0;color:inherit;text-decoration:none}
.post-nav-link:last-child{flex-direction:row-reverse;text-align:right}
.post-nav-art{flex:none;width:96px;aspect-ratio:1;object-fit:cover;border-radius:var(--media-radius)}
.post-nav-link span{display:grid;gap:6px;min-width:0}
.post-nav-link small{font-size:13px;opacity:.6}
.post-nav-link strong{font-size:17px;font-weight:500;line-height:1.25}
.post-nav-link:hover strong{text-decoration:underline;text-underline-offset:4px}
@media(max-width:700px){.post-nav{gap:12px}.post-nav-link{flex-direction:column;align-items:flex-start;gap:10px}.post-nav-link:last-child{flex-direction:column;align-items:flex-end}.post-nav-art{width:100%;aspect-ratio:4/3}.post-nav-link strong{font-size:15px}}
/* Film posts (Latest items that are a video): header, a few lines, the video, then the original on Instagram. */
.film-post-video{width:min(100%,420px);margin:clamp(28px,4vw,48px) auto 0;background:#000}
.film-post-video video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.film-post-out{margin-top:24px;text-align:center}