@font-face {
  font-family: MiSans;
  src: url('./assets/fonts/MiSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2000-206F, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

@font-face {
  font-family: MiSans;
  src: url('./assets/fonts/MiSans-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2000-206F, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

@font-face {
  font-family: Gabarito;
  src: url('./assets/fonts/Gabarito-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: Gabarito;
  src: url('./assets/fonts/Gabarito-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122;
}

:root {
  color-scheme: dark;
  --background: #0a0a0a;
  --foreground: #fff;
  --gutter: 32px;
  --card-width: 400px;
  --card-height: 500px;
  --image-height: 450px;
  --page-content-top: 128px;
  --project-optical-offset: 14px;
  --media-gap: 12px;
  --about-copy-width: 920px;
  --about-label-width: 180px;
  --ease: cubic-bezier(.44, 0, .56, 1);
  font-family: Gabarito, MiSans, Arial, sans-serif;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { min-width: 280px; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
/* Images do not capture the pointer: their surrounding controls remain usable. */
img { pointer-events: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Videos keep pointer events for their controls, but must not start a native drag. */
video { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.project-media, .work-media, .gallery-card, .about-hero { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.site-pointer { position: fixed; z-index: 9999; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: width .3s ease-in-out, height .3s ease-in-out, opacity .15s; }
.has-custom-cursor .site-pointer { opacity: 1; }
.site-pointer.is-active { width: 40px; height: 40px; }
@media (any-hover: hover) and (any-pointer: fine) {
  html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; }
}

a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.home { position: relative; isolation: isolate; width: 100%; height: 100svh; height: 100dvh; overflow: hidden; }
/* Difference blend inverts against the page; the shadow keeps labels legible where a composited scroll layer does not participate. */
.top-bar {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--gutter);
  font-family: Gabarito, MiSans, sans-serif;
  pointer-events: none;
  mix-blend-mode: difference;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.65);
}

.brand { font-size: 13.6px; line-height: 16.8px; letter-spacing: -.14px; pointer-events: auto; transition: opacity .25s, color .18s; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
.brand:hover { opacity: .65; }
.brand sup { font-size: 9px; vertical-align: top; line-height: 13px; margin-left: 1px; }
.location { display: flex; align-items: baseline; gap: 4px; font-size: 11.8px; line-height: 14.4px; white-space: nowrap; transition: color .18s; -webkit-user-select: none; user-select: none; }
.location time { font-variant-numeric: tabular-nums; min-width: 28px; }
.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.studio-name { margin: 0; font-size: 48px; line-height: 48px; font-weight: 600; letter-spacing: -2.4px; }
.description { width: 232px; margin: 0; font-size: 20px; line-height: 24px; font-weight: 400; letter-spacing: -.8px; }
.text-line { display: block; white-space: nowrap; }
.gallery {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 2650px;
  perspective-origin: center;
  transform-style: preserve-3d;
  touch-action: none;
  outline: none;
  cursor: grab;
}
.gallery:focus-visible::after { content: ''; position: absolute; inset: 8px; border: 1px solid #ffffff40; border-radius: 4px; pointer-events: none; }
.gallery.is-dragging { cursor: grabbing; }
.scene { position: absolute; inset: 0; transform-origin: center; transform-style: preserve-3d; pointer-events: none; will-change: transform; }
.gallery-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-width);
  height: var(--card-height);
  display: block;
  border-radius: 8px;
  background: var(--background);
  overflow: hidden;
  transform-origin: center;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.gallery-card[hidden] { display: none; }
.gallery-card img { display: block; width: 100%; height: var(--image-height); border-radius: 8px; object-fit: cover; object-position: center; pointer-events: none; -webkit-user-drag: none; }
.gallery.is-dragging .gallery-card { cursor: grabbing; }
.gallery-card:focus-visible { outline-offset: -3px; }
.dock {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(31px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  height: 42px;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(160,160,160,.2);
  font-family: Gabarito, MiSans, sans-serif;
  isolation: isolate;
}
.dock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(18,18,18,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

.dock-pill {
  position: absolute;
  z-index: 2;
  left: 0;
  transform: translateX(var(--pill-x));
  top: 4px;
  width: 74px;
  height: 34px;
  border-radius: 99px;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.dock-pill[data-active="0"] { --pill-x: 4px; }
.dock-pill[data-active="1"] { --pill-x: 82px; }
.dock-pill[data-active="2"] { --pill-x: 160px; }
.dock-pill[data-active="3"] { --pill-x: 238px; }
html.pill-ready .dock-pill { transition: transform .34s cubic-bezier(.22, 1, .36, 1), width .34s cubic-bezier(.22, 1, .36, 1); }
.dock-link { position: relative; z-index: 1; display: grid; place-items: center; width: 74px; height: 34px; border-radius: 99px; font-size: 14px; line-height: 18.2px; color: #fafafa; background: transparent; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
.dock-link:hover { opacity: .65; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.accessible-control { position: fixed; z-index: 40; left: var(--gutter); bottom: 32px; border: 1px solid #888; border-radius: 40px; padding: 12px 18px; color: #fff; background: #141414; opacity: 0; pointer-events: none; }
.accessible-control:focus-visible { opacity: 1; pointer-events: auto; }
.no-script { position: absolute; inset: auto 24px 120px; text-align: center; font-size: 14px; }
.no-script a { text-decoration: underline; }
/* Shared motion: persistent chrome, character reveals, and viewport entrances. */
.motion-boot .home { opacity: 0; }
.home:focus { outline: none; }
.motion-word { display: inline-block; white-space: nowrap; }
.motion-char { display: inline-block; }
.reveal-pending { opacity: 0; }
.reveal-running:not(.motion-text) {
  animation: content-in 600ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}
.motion-text.reveal-running .motion-char {
  animation: character-in 650ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + var(--char-delay, 0ms));
}
@keyframes character-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes content-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 810px) and (max-width: 1199px) {
  :root { --gutter: 24px; }
  .studio-name { font-size: 40px; line-height: 40px; letter-spacing: -2px; }
  .description { width: 187px; font-size: 16px; line-height: 20px; letter-spacing: -.64px; }
}
@media (max-width: 809px) {
  :root { --gutter: 16px; --card-width: 260px; --card-height: 260px; --image-height: 260px; }
  .top-bar { padding-top: max(24px, env(safe-area-inset-top)); }
  .hero-copy { flex-direction: column; justify-content: flex-start; gap: 8px; padding-top: 96px; text-align: center; }
  .studio-name { font-size: 32px; line-height: 32px; letter-spacing: -1.6px; }
  .description { font-size: 16px; line-height: 20px; letter-spacing: -.64px; width: 232px; }
  .dock { bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .dock-link, .dock-pill { width: 62px; }
  .dock-pill[data-active="0"] { --pill-x: 4px; }
  .dock-pill[data-active="1"] { --pill-x: 70px; }
  .dock-pill[data-active="2"] { --pill-x: 136px; }
  .dock-pill[data-active="3"] { --pill-x: 202px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .hero-copy { flex-direction: row; align-items: center; padding-top: 0; text-align: left; }
  .description { width: 170px; font-size: 14px; line-height: 18px; }
  .dock { bottom: 16px; }
}
.home.document { overflow: auto; padding-bottom: 140px; }
.doc { padding: var(--page-content-top) 32px 0; }
.doc-title { margin: 0; max-width: 1216px; font-size: 96px; font-weight: 600; line-height: 96px; letter-spacing: -1.92px; }
/* Compact image-led works grid, inspired by VincDesign. */
.work-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 8px; margin-top: 48px; }
.work-card { position: relative; min-width: 0; margin: 0; color: inherit; outline: none; }
.work-card[hidden] { display: none; }
.work-media { position: relative; overflow: hidden; aspect-ratio: 1.414 / 1; background: #161616; isolation: isolate; }
.work-media picture { display: block; width: 100%; height: 100%; }
.work-media::after { content: ''; position: absolute; z-index: 1; inset: 0; background: rgba(0,0,0,.64); opacity: 0; transition: opacity 500ms ease; pointer-events: none; }
.work-media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 650ms cubic-bezier(.22, 1, .36, 1); }
.work-name { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 24px; margin: 0; font-size: clamp(20px, 1.6vw, 36px); line-height: 1.428; font-weight: 400; letter-spacing: 0; color: #fff; opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 500ms cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.work-name span { display: inline; line-height: 1.25; }
.work-name--long span[lang="en"] { font-size: clamp(13px, 1.3vw, 26px); white-space: nowrap; }
.work-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; z-index: 3; }
.work-card:focus-visible .work-media::after { opacity: 1; }
.work-card:focus-visible .work-name { opacity: 1; transform: translateY(0); }
.work-card:focus-visible img { transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) {
  .work-card:hover .work-media::after { opacity: 1; }
  .work-card:hover .work-name { opacity: 1; transform: translateY(0); }
  .work-card:hover img { transform: scale(1.05); }
}
@media (max-width: 1100px) and (min-width: 601px) {
  .work-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .work-columns { grid-template-columns: 1fr; margin-top: 32px; }
  .work-name { left: 16px; right: 16px; bottom: 16px; font-size: clamp(16px, 4.3vw, 24px); }
}
@media (hover: none), (pointer: coarse) {
  .work-media::after { opacity: 1; background: linear-gradient(transparent 45%, rgba(0,0,0,.7)); }
  .work-name { opacity: 1; transform: none; }
}

.about-hero { position: relative; height: clamp(360px, 70svh, 760px); overflow: hidden; background: #161616; }
.about-hero picture { display: block; width: 100%; height: 100%; }
.about-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.contact-hero-image { animation: contact-image-drift 24s ease-in-out infinite alternate; }
@keyframes contact-image-drift { from { transform: scale(1); } to { transform: scale(1.08); } }
.contact-links { width: min(100%, 1064px); padding: 96px 32px 0; }
.contact-link { display: grid; width: 100%; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 24px 16px; border: 0; border-top: 1px solid #2a2a2a; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; line-height: 24px; text-align: left; cursor: pointer; }
.contact-link > span:first-child { color: #a0a0a0; }
.contact-value { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.contact-address { overflow-wrap: anywhere; transition: opacity .2s; }
.contact-link:hover .contact-address { opacity: .6; }
.copy-feedback { display: inline-block; max-width: 0; overflow: hidden; opacity: 0; transform: translateY(6px); color: #a0a0a0; font-size: 14px; line-height: 20px; white-space: nowrap; transition: opacity .3s ease, transform .3s ease, max-width .3s ease, margin .3s ease; }
.contact-link.show-feedback .copy-feedback { max-width: 100px; margin-left: 12px; opacity: 1; transform: translateY(0); }
@media (max-width: 809px) {
  .contact-links { padding: 64px 16px 0; }
  .contact-link { grid-template-columns: calc((100% - 24px) / 3 - 10px) minmax(0, 1fr); gap: 12px; padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) { .contact-hero-image { animation: none; } }

.about-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), transparent 35%); pointer-events: none; }
.about-hero h1 { max-width: 900px; margin: 0; font-size: 56px; font-weight: 600; line-height: 56px; letter-spacing: -1.68px; }
.split { display: grid; grid-template-columns: var(--about-label-width) minmax(0, 1fr); gap: 16px; padding: 96px 32px 0; }
.kicker { margin: 0; font-weight: 400; color: #a0a0a0; font-size: 15px; line-height: 18px; }
.sheet { width: min(100%, 1000px); }
.about-lead .sheet { width: min(100%, var(--about-copy-width)); }
.split .sheet { width: min(100%, calc(var(--about-copy-width) - var(--about-label-width) - 16px)); }
.about-lead { margin-top: 64px; padding-top: 32px; border-top: 1px solid #2a2a2a; }
.about-body { display: grid; grid-template-columns: minmax(0, min(var(--about-copy-width), 65%)) minmax(0, 1fr); gap: clamp(32px, 4vw, 96px); margin: 64px 32px 0; padding-top: 32px; border-top: 1px solid #2a2a2a; align-items: start; }
.about-copy { min-width: 0; }
.about-body .about-lead { margin: 0; padding: 0; border: 0; }
.about-body .split { padding: 96px 0 0; }
.about-jellyfish { position: relative; align-self: stretch; min-width: 0; min-height: clamp(640px, 82svh, 920px); overflow: hidden; }
.about-jellyfish-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; mask-image: linear-gradient(transparent, #000 7%, #000 92%, transparent); }
@media (max-width: 1200px) {
  .about-body { grid-template-columns: 1fr; gap: 32px; }
  .about-jellyfish { min-height: 800px; }
}
.about-intro { margin: 0; font-size: 16px; line-height: 24px; }
.about-bio { display: grid; gap: 16px; }
.about-bio + .about-bio { margin-top: 40px; }
.experience-list { margin: 0; }
.experience-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: center; min-height: 80px; padding: 20px 16px; border-top: 1px solid #2a2a2a; }
.experience-row dt { color: #a0a0a0; font-size: 16px; line-height: 24px; }
.experience-row dd { margin: 0; font-size: 16px; line-height: 24px; }
.client-wall { padding: 96px 32px 0; }
.client-wall-line { height: 1px; margin-bottom: 32px; background: #2a2a2a; }
.client-marquee { overflow: hidden; padding: 22px 0; }
.client-row { overflow: hidden; }
.client-track { display: flex; width: max-content; animation: clients-scroll 300s linear infinite; }
.client-group { display: flex; flex: none; width: max(100vw, 5760px); align-items: center; justify-content: space-around; }
.client-logo { display: grid; flex: 1 0 0; place-items: center; height: 122px; padding: 12px 24px; }
.client-logo img { display: block; width: auto; height: auto; max-width: min(100%, 130px); max-height: 60px; transform: scale(var(--logo-scale, 1)); }
.client-logo img[src$="148-356.svg"],
.client-logo img[src$="148-351.svg"] { --logo-scale: 1.12; }
.client-logo img[src$="148-355.svg"] { --logo-scale: 1.17; }
.client-logo img[src$="148-358.svg"] { --logo-scale: 1.2; }
.client-logo img[src$="148-342.svg"],
.client-logo img[src$="148-354.svg"],
.client-logo img[src$="148-349.svg"] { --logo-scale: 1.05; }
.client-marquee:hover .client-track { animation-play-state: paused; }
@keyframes clients-scroll { to { transform: translateX(-50%); } }
@media (max-width: 809px) {
  .client-wall { --client-logo-width: calc((100vw - 32px) / 8); padding: 64px 16px 0; }
  .client-wall-line { margin-bottom: 24px; }
  .client-track { animation-duration: 64s; }
  @supports (animation-duration: calc(1px / 1px * 1s)) {
    /* Scale the loop duration with the track width to keep the speed steady. */
    .client-track { animation-duration: calc(var(--client-logo-width) / 1px * 1.5s); }
  }
  .client-group { width: max-content; }
  .client-logo { flex: none; width: var(--client-logo-width); height: 60px; padding: 8px 5px; }
  .client-logo img { max-width: 100%; max-height: 32px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .client-track { animation: none !important; } }
.service { display: grid; grid-template-columns: 140px 180px minmax(0, 1fr); gap: 24px; align-items: center; min-height: 72px; padding: 0 16px; border-top: 1px solid #2a2a2a; }
.service b { font-size: 16px; font-weight: 600; line-height: 24px; }
.service .service-cn { color: #fff; font-size: 16px; line-height: 24px; }
.service span, .service i { color: #a0a0a0; font-style: normal; font-size: 16px; line-height: 24px; }
.service i { font-size: 14px; line-height: 20px; }
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
  .split .sheet { width: min(100%, var(--about-copy-width)); }
  .service { padding: 16px; }
}
@media (max-width: 809px) {
  :root { --page-content-top: 112px; --project-optical-offset: 6px; }
  .doc { padding: var(--page-content-top) 16px 0; }
  .doc-title { font-size: 48px; line-height: 48px; letter-spacing: -1.6px; }
  .split { padding-left: 16px; padding-right: 16px; }
  .about-hero { height: 52svh; min-height: 320px; }
  .service { grid-template-columns: calc((100% - 24px) / 3 - 10px) calc((100% - 24px) / 3 + 10px) minmax(0, 1fr); gap: 12px; padding: 16px 0; }
  .experience-row { grid-template-columns: calc((100% - 24px) / 3 - 10px) minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .experience-row dt { font-size: 14px; line-height: 21px; }
  .experience-row dd { font-size: 14px; line-height: 21px; }
  .service b, .service .service-cn { font-size: 14px; line-height: 21px; }
  .about-hero h1 { font-size: 32px; line-height: 36px; letter-spacing: -1.2px; }
  .about-body { margin: 40px 16px 0; padding-top: 24px; gap: 24px; }
  .about-body .split { padding-top: 64px; }
  .about-jellyfish { min-height: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
  .reveal-pending { opacity: 1; }
  .work-card:hover img, .work-card:focus-visible img { transform: none; }
}

/* Project details: the title stays in place while the images scroll. */
.project-page { box-shadow: inset 0 1px #1d1d1d; }
.project-layout { display: grid; grid-template-columns: minmax(220px, 39%) minmax(0, 1fr); gap: 24px; padding: calc(var(--page-content-top) + var(--project-optical-offset)) var(--gutter) 0; }
.project-aside { position: sticky; top: calc(var(--page-content-top) + var(--project-optical-offset)); align-self: start; }
.project-title, .project-subtitle { margin: 0; font-size: clamp(24px, 2.1vw, 36px); line-height: 1.15; font-weight: 400; letter-spacing: -.04em; }
.project-subtitle { margin-top: 4px; }
.project-subtitle--long { font-size: clamp(18px, 1.65vw, 28px); letter-spacing: -.03em; overflow-wrap: anywhere; }
.project-intro { max-width: 1050px; margin-bottom: 48px; }
.project-intro p { margin: 0 0 20px; font-size: 16px; line-height: 1.55; }
.project-intro p:last-child { margin-bottom: 0; }
.project-pending { color: #8f8f8f; }
.project-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.project-media img, .project-image-placeholder { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; }
.project-media img { object-fit: cover; }
.project-image-placeholder { display: grid; place-items: center; padding: 24px; color: #777; background: #161616; font-size: 14px; text-align: center; }
.project-media > :nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.project-back { display: inline-block; margin-top: 56px; color: #aaa; font-size: 14px; transition: color .2s; }
.project-back:hover { color: #fff; }
.work-link { display: block; color: inherit; }
.work-card-logo .work-media img { object-fit: contain; padding: 24%; }
.work-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.work-card:focus-within .work-media::after { opacity: 1; }
.work-card:focus-within .work-name { opacity: 1; transform: translateY(0); }
.work-card:focus-within img { transform: scale(1.05); }
@media (max-width: 809px) {
  .project-layout { display: block; }
  .project-aside { position: static; margin-bottom: 32px; }
  .project-title, .project-subtitle { font-size: 28px; }
  .project-subtitle--long { font-size: 22px; }
  .project-intro { margin-bottom: 32px; }
  .project-media { gap: 8px; }
  .project-image-placeholder { font-size: 12px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .work-card:focus-within img { transform: none; } }

/* Gava Coffee: image proportions and artwork placement follow the Figma Cases layout. */
.project-page.has-project-media .project-intro p { white-space: pre-line; }
.project-page.has-project-media .project-description-zh,
.project-page.has-project-media .project-description-en { font-size: 20px; line-height: 1.5; }
/* Each media slot keeps its Figma aspect ratio, including the two paired rows. */
.project-media--case .project-tile { position: relative; overflow: hidden; border-radius: 6px; background: transparent; grid-column: auto; }
.project-media--case .project-tile--wide { grid-column: 1 / -1; }
.project-media--case .project-pair { grid-column: 1 / -1; display: grid; gap: 12px; min-width: 0; }
.project-media--case .project-pair .project-tile { aspect-ratio: auto !important; height: 100%; min-width: 0; }
.project-media--case .project-tile img,
.project-media--case .project-tile video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
/* Cover fractional-pixel seams at video edges without changing the tile's geometry. */
.project-media--case .project-tile video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.project-media--gava .project-tile img.gava-crop-moodboard { inset: auto; left: -3.63%; top: -7.69%; width: 107.26%; height: 115.38%; }
.project-media--gava .project-tile img.gava-crop-sign { inset: auto; left: -.01%; top: -22.66%; width: 100.04%; height: 150.56%; }
.project-media--gava .project-tile img.gava-crop-cup { inset: auto; left: -2.71%; top: 0; width: 105.52%; height: 100%; }
.project-media--daoji .project-tile img.daoji-layer--frame-1 { animation: kf_229_151_opacity_0 4s linear infinite; }
.project-media--daoji .project-tile img.daoji-layer--frame-2 { animation: kf_229_154_opacity_0 4s linear infinite; }
.project-media--daoji .project-tile img.daoji-layer--frame-3 { animation: kf_229_157_opacity_0 4s linear infinite; }
.project-media--daoji .project-tile img.daoji-layer--frame-4 { animation: kf_229_160_opacity_0 4s linear infinite; }
.project-media--daoji .project-tile[data-node-id="233:97"] .project-layer,
.project-media--daoji .project-tile[data-node-id="233:96"] .project-layer { border-radius: 6px; }
@keyframes kf_229_151_opacity_0 { 0% { animation-timing-function: step-end; opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
@keyframes kf_229_154_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 25% { animation-timing-function: step-end; opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes kf_229_157_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 50% { animation-timing-function: step-end; opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes kf_229_160_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .project-media--daoji .project-tile img[class*="daoji-layer--frame-"] { animation: none; opacity: 0; }
  .project-media--daoji .project-tile img.daoji-layer--frame-1 { opacity: 1; }
}
@media (max-width: 809px) { .project-page.has-project-media .project-description-zh, .project-page.has-project-media .project-description-en { font-size: 18px; } }

/* Relative artwork layers share a canvas that scales with each case tile. */
.project-layer { position: absolute; overflow: hidden; }
/* Fishing Harvest: shared 4.5-second Figma photo timeline. */
.project-media--fishing-harvest .fishing-harvest-layer--frame-1 { animation: kf_245_194_opacity_0 4.5s linear; animation-iteration-count: infinite; }
@keyframes kf_245_194_opacity_0 { 0% { animation-timing-function: step-end; opacity: 1; } 33.333% { opacity: 0; } 100% { opacity: 0; } }
.project-media--fishing-harvest .fishing-harvest-layer--frame-2 { animation: kf_245_197_opacity_0 4.5s linear; animation-iteration-count: infinite; }
@keyframes kf_245_197_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 33.333% { animation-timing-function: step-end; opacity: 1; } 66.667% { opacity: 0; } 100% { opacity: 0; } }
.project-media--fishing-harvest .fishing-harvest-layer--frame-3 { animation: kf_245_200_opacity_0 4.5s linear; animation-iteration-count: infinite; }
@keyframes kf_245_200_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 66.667% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .project-media--fishing-harvest img[class*="fishing-harvest-layer--frame-"] { animation: none; opacity: 0; }
  .project-media--fishing-harvest img.fishing-harvest-layer--frame-1 { opacity: 1; }
}
/* Luke: 4-second wordmark crossfade, original guide GIF, 7.2-second card carousel. */
@property --motion-translate-x { syntax: '<number>'; initial-value: 0; inherits: false; }
@property --motion-scale-x { syntax: '<number>'; initial-value: 1; inherits: false; }
@property --motion-scale-y { syntax: '<number>'; initial-value: 1; inherits: false; }
.project-media--luke .luke-layer--buzz-2,
.project-media--luke .luke-layer--buzz-3,
.project-media--luke .luke-layer--buzz-4 { opacity: 0; }
.project-media--luke .luke-layer--buzz-1 { animation: kf_245_787_opacity_0 4s linear infinite; }
.project-media--luke .luke-layer--buzz-2 { animation: kf_245_788_opacity_0 4s linear infinite; }
.project-media--luke .luke-layer--buzz-3 { animation: kf_245_789_opacity_0 4s linear infinite; }
.project-media--luke .luke-layer--buzz-4 { animation: kf_245_790_opacity_0 4s linear infinite; }
@keyframes kf_245_787_opacity_0 { 0% { animation-timing-function: step-end; opacity: 1; } 25% { opacity: 0; } 75% { animation-timing-function: step-end; opacity: 0; } 100% { opacity: 1; } }
@keyframes kf_245_788_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 25% { animation-timing-function: step-end; opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }
@keyframes kf_245_789_opacity_0 { 0% { opacity: 0; } 25% { animation-timing-function: step-end; opacity: 0; } 50% { animation-timing-function: step-end; opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes kf_245_790_opacity_0 { 0% { opacity: 0; } 50% { animation-timing-function: step-end; opacity: 0; } 75% { animation-timing-function: step-end; opacity: 1; } 100% { opacity: 0; } }
.project-media--luke .project-tile[data-node-id="268:75"] { container-type: size; }
.project-media--luke .project-tile[data-node-id="268:75"] .project-layer {
  --motion-origin-x: 50;
  --motion-origin-y: 50;
  --motion-scale-x: 1;
  --motion-scale-y: 1;
  --motion-translate-x: 0;
  transform-origin: 0 0;
  transform: translate(calc(var(--motion-origin-x) * 1%), calc(var(--motion-origin-y) * 1%)) translateX(calc(var(--motion-translate-x) * 100cqw / 1839)) scale(var(--motion-scale-x), var(--motion-scale-y)) translate(calc(var(--motion-origin-x) * -1%), calc(var(--motion-origin-y) * -1%));
}
.project-media--luke .project-layer[data-layer-node="268:77"],
.project-media--luke .project-layer[data-layer-node="268:78"],
.project-media--luke .project-layer[data-layer-node="268:86"],
.project-media--luke .project-layer[data-layer-node="268:87"] { animation: kf_268_77_tx 7.2s linear infinite; }
.project-media--luke .project-layer[data-layer-node="268:79"] { animation: kf_268_79_sx 7.2s linear infinite, kf_268_79_sy 7.2s linear infinite, kf_268_79_tx 7.2s linear infinite; }
.project-media--luke .project-layer[data-layer-node="268:80"] { animation: kf_268_80_sx 7.2s linear infinite, kf_268_80_sy 7.2s linear infinite, kf_268_80_tx 7.2s linear infinite; }
.project-media--luke .project-layer[data-layer-node="268:81"] { animation: kf_268_81_sx 7.2s linear infinite, kf_268_81_sy 7.2s linear infinite, kf_268_81_tx 7.2s linear infinite; }
.project-media--luke .project-layer[data-layer-node="268:82"] { animation: kf_268_82_sx 7.2s linear infinite, kf_268_82_sy 7.2s linear infinite, kf_268_82_tx 7.2s linear infinite; }
.project-media--luke .project-layer[data-layer-node="268:83"] { animation: kf_268_83_sx 7.2s linear infinite, kf_268_83_sy 7.2s linear infinite, kf_268_83_tx 7.2s linear infinite; }
.project-media--luke .project-layer[data-layer-node="268:84"] { animation: kf_268_84_sx 7.2s linear infinite, kf_268_84_sy 7.2s linear infinite, kf_268_84_tx 7.2s linear infinite; }
.project-media--luke .project-layer[data-layer-node="268:85"] { animation: kf_268_85_sx 7.2s linear infinite, kf_268_85_sy 7.2s linear infinite, kf_268_85_tx 7.2s linear infinite; }
@keyframes kf_268_77_tx { 0% { --motion-translate-x: 0; } 11.111% { animation-timing-function: ease-in-out; --motion-translate-x: 0; } 16.667% { --motion-translate-x: -450; } 27.778% { animation-timing-function: ease-in-out; --motion-translate-x: -450; } 33.333% { --motion-translate-x: -900; } 44.444% { animation-timing-function: ease-in-out; --motion-translate-x: -900; } 50% { --motion-translate-x: -1350; } 61.111% { animation-timing-function: ease-in-out; --motion-translate-x: -1350; } 66.667% { --motion-translate-x: -1800; } 77.778% { animation-timing-function: ease-in-out; --motion-translate-x: -1800; } 83.333% { --motion-translate-x: -2250; } 94.444% { animation-timing-function: ease-in-out; --motion-translate-x: -2250; } 100% { --motion-translate-x: -2700; } }
@keyframes kf_268_79_sx { 0% { --motion-scale-x: 1; } 11.111% { animation-timing-function: ease-in-out; --motion-scale-x: 1; } 16.667% { --motion-scale-x: 0.746479; } 100% { --motion-scale-x: 0.746479; } }
@keyframes kf_268_79_sy { 0% { --motion-scale-y: 1; } 11.111% { animation-timing-function: ease-in-out; --motion-scale-y: 1; } 16.667% { --motion-scale-y: 0.746479; } 100% { --motion-scale-y: 0.746479; } }
@keyframes kf_268_79_tx { 0% { --motion-translate-x: 0; } 11.111% { animation-timing-function: ease-in-out; --motion-translate-x: 0; } 16.667% { --motion-translate-x: -470; } 27.778% { animation-timing-function: ease-in-out; --motion-translate-x: -470; } 33.333% { --motion-translate-x: -920; } 44.444% { animation-timing-function: ease-in-out; --motion-translate-x: -920; } 50% { --motion-translate-x: -1370; } 61.111% { animation-timing-function: ease-in-out; --motion-translate-x: -1370; } 66.667% { --motion-translate-x: -1820; } 77.778% { animation-timing-function: ease-in-out; --motion-translate-x: -1820; } 83.333% { --motion-translate-x: -2270; } 94.444% { animation-timing-function: ease-in-out; --motion-translate-x: -2270; } 100% { --motion-translate-x: -2720; } }
@keyframes kf_268_80_sx { 0% { --motion-scale-x: 1; } 11.111% { animation-timing-function: ease-in-out; --motion-scale-x: 1; } 16.667% { --motion-scale-x: 1.339623; } 27.778% { animation-timing-function: ease-in-out; --motion-scale-x: 1.339623; } 33.333% { --motion-scale-x: 1; } 100% { --motion-scale-x: 1; } }
@keyframes kf_268_80_sy { 0% { --motion-scale-y: 1; } 11.111% { animation-timing-function: ease-in-out; --motion-scale-y: 1; } 16.667% { --motion-scale-y: 1.339623; } 27.778% { animation-timing-function: ease-in-out; --motion-scale-y: 1.339623; } 33.333% { --motion-scale-y: 1; } 100% { --motion-scale-y: 1; } }
@keyframes kf_268_80_tx { 0% { --motion-translate-x: 0; } 11.111% { animation-timing-function: ease-in-out; --motion-translate-x: 0; } 16.667% { --motion-translate-x: -470; } 27.778% { animation-timing-function: ease-in-out; --motion-translate-x: -470; } 33.333% { --motion-translate-x: -940; } 44.444% { animation-timing-function: ease-in-out; --motion-translate-x: -940; } 50% { --motion-translate-x: -1390; } 61.111% { animation-timing-function: ease-in-out; --motion-translate-x: -1390; } 66.667% { --motion-translate-x: -1840; } 77.778% { animation-timing-function: ease-in-out; --motion-translate-x: -1840; } 83.333% { --motion-translate-x: -2290; } 94.444% { animation-timing-function: ease-in-out; --motion-translate-x: -2290; } 100% { --motion-translate-x: -2740; } }
@keyframes kf_268_81_sx { 0% { --motion-scale-x: 1; } 27.778% { animation-timing-function: ease-in-out; --motion-scale-x: 1; } 33.333% { --motion-scale-x: 1.339623; } 44.444% { animation-timing-function: ease-in-out; --motion-scale-x: 1.339623; } 50% { --motion-scale-x: 1; } 100% { --motion-scale-x: 1; } }
@keyframes kf_268_81_sy { 0% { --motion-scale-y: 1; } 27.778% { animation-timing-function: ease-in-out; --motion-scale-y: 1; } 33.333% { --motion-scale-y: 1.339623; } 44.444% { animation-timing-function: ease-in-out; --motion-scale-y: 1.339623; } 50% { --motion-scale-y: 1; } 100% { --motion-scale-y: 1; } }
@keyframes kf_268_81_tx { 0% { --motion-translate-x: 0; } 11.111% { animation-timing-function: ease-in-out; --motion-translate-x: 0; } 16.667% { --motion-translate-x: -450; } 27.778% { animation-timing-function: ease-in-out; --motion-translate-x: -450; } 33.333% { --motion-translate-x: -920; } 44.444% { animation-timing-function: ease-in-out; --motion-translate-x: -920; } 50% { --motion-translate-x: -1390; } 61.111% { animation-timing-function: ease-in-out; --motion-translate-x: -1390; } 66.667% { --motion-translate-x: -1840; } 77.778% { animation-timing-function: ease-in-out; --motion-translate-x: -1840; } 83.333% { --motion-translate-x: -2290; } 94.444% { animation-timing-function: ease-in-out; --motion-translate-x: -2290; } 100% { --motion-translate-x: -2740; } }
@keyframes kf_268_82_sx { 0% { --motion-scale-x: 1; } 44.444% { animation-timing-function: ease-in-out; --motion-scale-x: 1; } 50% { --motion-scale-x: 1.339623; } 61.111% { animation-timing-function: ease-in-out; --motion-scale-x: 1.339623; } 66.667% { --motion-scale-x: 1; } 100% { --motion-scale-x: 1; } }
@keyframes kf_268_82_sy { 0% { --motion-scale-y: 1; } 44.444% { animation-timing-function: ease-in-out; --motion-scale-y: 1; } 50% { --motion-scale-y: 1.339623; } 61.111% { animation-timing-function: ease-in-out; --motion-scale-y: 1.339623; } 66.667% { --motion-scale-y: 1; } 100% { --motion-scale-y: 1; } }
@keyframes kf_268_82_tx { 0% { --motion-translate-x: 0; } 11.111% { animation-timing-function: ease-in-out; --motion-translate-x: 0; } 16.667% { --motion-translate-x: -450; } 27.778% { animation-timing-function: ease-in-out; --motion-translate-x: -450; } 33.333% { --motion-translate-x: -900; } 44.444% { animation-timing-function: ease-in-out; --motion-translate-x: -900; } 50% { --motion-translate-x: -1370; } 61.111% { animation-timing-function: ease-in-out; --motion-translate-x: -1370; } 66.667% { --motion-translate-x: -1840; } 77.778% { animation-timing-function: ease-in-out; --motion-translate-x: -1840; } 83.333% { --motion-translate-x: -2290; } 94.444% { animation-timing-function: ease-in-out; --motion-translate-x: -2290; } 100% { --motion-translate-x: -2740; } }
@keyframes kf_268_83_sx { 0% { --motion-scale-x: 1; } 61.111% { animation-timing-function: ease-in-out; --motion-scale-x: 1; } 66.667% { --motion-scale-x: 1.339623; } 77.778% { animation-timing-function: ease-in-out; --motion-scale-x: 1.339623; } 83.333% { --motion-scale-x: 1; } 100% { --motion-scale-x: 1; } }
@keyframes kf_268_83_sy { 0% { --motion-scale-y: 1; } 61.111% { animation-timing-function: ease-in-out; --motion-scale-y: 1; } 66.667% { --motion-scale-y: 1.339623; } 77.778% { animation-timing-function: ease-in-out; --motion-scale-y: 1.339623; } 83.333% { --motion-scale-y: 1; } 100% { --motion-scale-y: 1; } }
@keyframes kf_268_83_tx { 0% { --motion-translate-x: 0; } 11.111% { animation-timing-function: ease-in-out; --motion-translate-x: 0; } 16.667% { --motion-translate-x: -450; } 27.778% { animation-timing-function: ease-in-out; --motion-translate-x: -450; } 33.333% { --motion-translate-x: -900; } 44.444% { animation-timing-function: ease-in-out; --motion-translate-x: -900; } 50% { --motion-translate-x: -1350; } 61.111% { animation-timing-function: ease-in-out; --motion-translate-x: -1350; } 66.667% { --motion-translate-x: -1820; } 77.778% { animation-timing-function: ease-in-out; --motion-translate-x: -1820; } 83.333% { --motion-translate-x: -2290; } 94.444% { animation-timing-function: ease-in-out; --motion-translate-x: -2290; } 100% { --motion-translate-x: -2740; } }
@keyframes kf_268_84_sx { 0% { --motion-scale-x: 1; } 77.778% { animation-timing-function: ease-in-out; --motion-scale-x: 1; } 83.333% { --motion-scale-x: 1.339623; } 94.444% { animation-timing-function: ease-in-out; --motion-scale-x: 1.339623; } 100% { --motion-scale-x: 1; } }
@keyframes kf_268_84_sy { 0% { --motion-scale-y: 1; } 77.778% { animation-timing-function: ease-in-out; --motion-scale-y: 1; } 83.333% { --motion-scale-y: 1.339623; } 94.444% { animation-timing-function: ease-in-out; --motion-scale-y: 1.339623; } 100% { --motion-scale-y: 1; } }
@keyframes kf_268_84_tx { 0% { --motion-translate-x: 0; } 11.111% { animation-timing-function: ease-in-out; --motion-translate-x: 0; } 16.667% { --motion-translate-x: -450; } 27.778% { animation-timing-function: ease-in-out; --motion-translate-x: -450; } 33.333% { --motion-translate-x: -900; } 44.444% { animation-timing-function: ease-in-out; --motion-translate-x: -900; } 50% { --motion-translate-x: -1350; } 61.111% { animation-timing-function: ease-in-out; --motion-translate-x: -1350; } 66.667% { --motion-translate-x: -1800; } 77.778% { animation-timing-function: ease-in-out; --motion-translate-x: -1800; } 83.333% { --motion-translate-x: -2270; } 94.444% { animation-timing-function: ease-in-out; --motion-translate-x: -2270; } 100% { --motion-translate-x: -2740; } }
@keyframes kf_268_85_sx { 0% { --motion-scale-x: 1; } 94.444% { animation-timing-function: ease-in-out; --motion-scale-x: 1; } 100% { --motion-scale-x: 1.339623; } }
@keyframes kf_268_85_sy { 0% { --motion-scale-y: 1; } 94.444% { animation-timing-function: ease-in-out; --motion-scale-y: 1; } 100% { --motion-scale-y: 1.339623; } }
@keyframes kf_268_85_tx { 0% { --motion-translate-x: 0; } 11.111% { animation-timing-function: ease-in-out; --motion-translate-x: 0; } 16.667% { --motion-translate-x: -450; } 27.778% { animation-timing-function: ease-in-out; --motion-translate-x: -450; } 33.333% { --motion-translate-x: -900; } 44.444% { animation-timing-function: ease-in-out; --motion-translate-x: -900; } 50% { --motion-translate-x: -1350; } 61.111% { animation-timing-function: ease-in-out; --motion-translate-x: -1350; } 66.667% { --motion-translate-x: -1800; } 77.778% { animation-timing-function: ease-in-out; --motion-translate-x: -1800; } 83.333% { --motion-translate-x: -2250; } 94.444% { animation-timing-function: ease-in-out; --motion-translate-x: -2250; } 100% { --motion-translate-x: -2720; } }
@media (prefers-reduced-motion: reduce) {
  .project-media--luke .luke-layer--buzz-1,
  .project-media--luke .luke-layer--buzz-2,
  .project-media--luke .luke-layer--buzz-3,
  .project-media--luke .luke-layer--buzz-4 { animation: none; opacity: 0; }
  .project-media--luke .luke-layer--buzz-1 { opacity: 1; }
  .project-media--luke .project-tile[data-node-id="268:75"] .project-layer { animation: none; }
}
.blooming-island-layer--frame-2,
.blooming-island-layer--frame-3,
.blooming-island-layer--frame-4,
.cypark-layer--frame-2,
.cypark-layer--frame-3,
.cypark-layer--frame-4 { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .blooming-island-layer--frame-1, .cypark-layer--frame-1 { animation: kf_286_369_opacity_0 4s linear infinite; }
  .blooming-island-layer--frame-2, .cypark-layer--frame-2 { animation: kf_286_372_opacity_0 4s linear infinite; }
  .blooming-island-layer--frame-3, .cypark-layer--frame-3 { animation: kf_286_375_opacity_0 4s linear infinite; }
  .blooming-island-layer--frame-4, .cypark-layer--frame-4 { animation: kf_286_378_opacity_0 4s linear infinite; }
}
@keyframes kf_286_369_opacity_0 { 0% { animation-timing-function: step-end; opacity: 1; } 25% { animation-timing-function: step-end; opacity: 0; } 100% { opacity: 1; } }
@keyframes kf_286_372_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 25% { animation-timing-function: step-end; opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes kf_286_375_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 50% { animation-timing-function: step-end; opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes kf_286_378_opacity_0 { 0% { animation-timing-function: step-end; opacity: 0; } 75% { animation-timing-function: step-end; opacity: 1; } 100% { opacity: 0; } }
.project-layer video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 809px) { .project-media--case .project-pair { gap: 8px; } }
.case-cover-mark { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.gallery-card .case-cover-mark { height: var(--image-height); border-radius: 8px; }
.work-media .case-cover-mark { transition: transform 650ms cubic-bezier(.22, 1, .36, 1); }
.work-card:focus-within .case-cover-mark { transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) { .work-card:hover .case-cover-mark { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .work-card:hover .case-cover-mark, .work-card:focus-within .case-cover-mark { transform: none; } }

.work-media .luxebeans-cover-photo { object-fit: fill; }

/* Grid compositions take their gap from the page token, not from Figma frames. */
.project-media--case .project-tile--grid { display: block; }
.project-media--case .project-grid {
  position: absolute;
  display: grid;
  gap: var(--media-gap);
}
.project-media--case .project-grid-cell { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.project-media--case .project-tile--grid .project-grid-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Cypark 303:522 remains a freeform 1-left / 2-right composition. */
.project-media--cypark .project-tile[data-node-id="303:522"] .project-layer[data-layer-node="303:608"] {
  left: calc(29.472% + 12px) !important;
  width: calc(70.528% - 12px) !important;
  height: calc(38.7755% - 6px) !important;
}
.project-media--cypark .project-tile[data-node-id="303:522"] .project-layer[data-layer-node="303:626"],
.project-media--cypark .project-tile[data-node-id="303:522"] .project-layer[data-layer-node="303:627"],
.project-media--cypark .project-tile[data-node-id="303:522"] .project-layer[data-layer-node="303:628"],
.project-media--cypark .project-tile[data-node-id="303:522"] .project-layer[data-layer-node="303:629"] {
  left: calc(29.472% + 12px) !important;
  width: calc(70.528% - 12px) !important;
  top: calc(38.7755% + 6px) !important;
  height: calc(61.2245% - 6px) !important;
}
@media (max-width: 809px) {
  :root { --media-gap: 8px; }
  .project-media--cypark .project-tile[data-node-id="303:522"] .project-layer[data-layer-node="303:608"] {
    left: calc(29.472% + 8px) !important;
    width: calc(70.528% - 8px) !important;
    height: calc(38.7755% - 4px) !important;
  }
  .project-media--cypark .project-tile[data-node-id="303:522"] .project-layer[data-layer-node="303:626"],
  .project-media--cypark .project-tile[data-node-id="303:522"] .project-layer[data-layer-node="303:627"],
  .project-media--cypark .project-tile[data-node-id="303:522"] .project-layer[data-layer-node="303:628"],
  .project-media--cypark .project-tile[data-node-id="303:522"] .project-layer[data-layer-node="303:629"] {
    left: calc(29.472% + 8px) !important;
    width: calc(70.528% - 8px) !important;
    top: calc(38.7755% + 4px) !important;
    height: calc(61.2245% - 4px) !important;
  }
}