:root {
  /* VV Design System tokens — sourced from VV-Design-System-Agent-Runtime/src/styles/tokens.css. */
  --vv-color-black-111111-100: #111111;
  --vv-color-black-141414-100: #141414;
  --vv-color-black-1f1f1f-100: #1f1f1f;
  --vv-color-white-100: #ffffff;
  --vv-color-white-90: rgb(255 255 255 / 90%);
  --vv-color-white-60: rgb(255 255 255 / 60%);
  --vv-color-white-50: rgb(255 255 255 / 50%);
  --vv-color-white-30: rgb(255 255 255 / 30%);
  --vv-color-white-20: rgb(255 255 255 / 20%);
  --vv-color-white-10: rgb(255 255 255 / 10%);
  --vv-color-bg-app: var(--vv-color-black-111111-100);
  --vv-color-bg-page: var(--vv-color-black-141414-100);
  --vv-color-text-primary: var(--vv-color-white-100);
  --vv-color-text-secondary: var(--vv-color-white-90);
  --vv-color-text-tertiary: var(--vv-color-white-50);
  --vv-color-border-subtle: var(--vv-color-white-10);
  --vv-color-border-strong: var(--vv-color-white-20);
  --vv-radius-sm: 4px;
  --vv-radius-md: 6px;
  --vv-radius-lg: 8px;
  --vv-space-8: 8px;
  --vv-space-16: 16px;
  --vv-space-20: 20px;
  --vv-space-24: 24px;
  --vv-space-32: 32px;
  --black: #000;
  --ink: #09090b;
  --body: #272727;
  --muted: #6d6d6d;
  --hero-gray: #878787;
  --panel: rgba(247, 247, 247, 0.6);
  --blue: #0080ff;
  --pink: #cc85c0;
  --red: #d62727;
  --purple-fade: rgba(91, 95, 199, 0.4);
  --section-fade: rgba(49, 49, 49, 0.4);
  --page-x: 80px;
  --wide: 1172px;
  --content: 906px;
  --project-ratio: 566 / 376;
  --glass-fill: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.82);
  --glass-shadow: 0 18px 54px rgba(0, 0, 0, 0.12);
  --glass-blur: 16px;
  --hairline: rgba(0, 0, 0, 0.1);
  --soft-fill: #f7f7f5;
  --falling-gray: rgba(34, 34, 34, 0.24);
  --falling-bg: #fff;
  --pixel-size: clamp(10px, 1.05vw, 15px);
  --pixel-dot: clamp(1.4px, 0.18vw, 2.3px);
  /* Typography hierarchy: VV's 400 / 500 / 700 weight scale, with a CJK reading stack. */
  --font-cjk: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-sans: Urbanist, var(--font-cjk);
  --font-ui: Urbanist, var(--font-cjk);
  --font-display: Urbanist, var(--font-cjk);
  --font-hero: Urbanist, var(--font-cjk);
  --font-label: Urbanist, var(--font-cjk);
  --text-display: clamp(44px, 5.4vw, 64px);
  --text-display-home: clamp(38px, 4.9vw, 64px);
  --text-title: clamp(40px, 5vw, 64px);
  --text-section: 28px;
  --text-subsection: 24px;
  --text-lead: 22px;
  --text-body: 16px;
  --text-small: 14px;
  --text-label: 13px;
  --text-caption: 12px;
  --leading-tight: 1.08;
  --leading-display: 1.12;
  --leading-title: 1.18;
  --leading-section: 1.32;
  --leading-lead: 1.55;
  --leading-body: 1.8;
  --leading-small: 1.45;
  --leading-label: 1.38;
  --weight-display: 400;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
}

* {
  box-sizing: border-box;
}

html {
  background: #fff;
  color: var(--black);
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html:has(body[data-page="home"]),
body[data-page="home"] { overflow-x: clip; background: var(--vv-color-bg-app); }

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

body {
  margin: 0;
  min-width: 320px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: #fff;
  background: #000;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  height: 64px;
  padding: 8px var(--page-x);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px) saturate(1.2);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 82px;
  height: 48px;
  padding: 0 4px;
  color: var(--ink);
  font-size: var(--text-lead);
  line-height: 1;
}
.brand--avatar { width: auto; min-width: 0; gap: 10px; padding: 0; white-space: nowrap; }
.brand--avatar > span:first-child {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 0;
}
.brand-label { display: inline-block; white-space: nowrap; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-links {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.nav-links a {
  padding: 6px 4px;
  color: #000;
  font-size: var(--text-body);
  line-height: var(--leading-small);
  border-bottom: 1px solid transparent;
  transition:
    border-color 160ms ease,
    opacity 160ms ease;
}

.nav-links a:hover {
  opacity: 0.45;
}

.nav-links a[aria-current="page"] {
  border-color: currentColor;
}

.language-switch {
  justify-self: end;
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(44px, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: rgba(247, 247, 245, 0.8);
}

.language-switch button {
  min-width: 44px;
  min-height: 30px;
  padding: 0 10px;
  color: var(--muted);
  font: var(--weight-medium) var(--text-caption) / 1 var(--font-ui);
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.language-switch button[aria-pressed="true"] {
  color: #000;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 64px);
  padding: clamp(48px, 8vh, 96px) var(--page-x);
  background: #fff;
  isolation: isolate;
  perspective: 1100px;
}

.home-hero > .discipline,
.home-hero > h1 {
  position: relative;
  z-index: 2;
}

.falling-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--falling-bg);
  opacity: 1;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 6%, #000 96%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 5%, #000 96%, transparent 100%),
    radial-gradient(ellipse at 38% 48%, transparent 0 22%, rgba(0, 0, 0, 0.42) 44%, #000 100%);
  mask-composite: intersect;
}

.falling-pattern::before {
  position: absolute;
  inset: -16%;
  content: "";
  background:
    radial-gradient(ellipse at 18% 24%, rgba(0, 0, 0, 0.3) 0 8%, transparent 23%),
    radial-gradient(ellipse at 72% 18%, rgba(0, 0, 0, 0.24) 0 9%, transparent 25%),
    radial-gradient(ellipse at 46% 58%, rgba(0, 0, 0, 0.28) 0 10%, transparent 27%),
    radial-gradient(ellipse at 82% 72%, rgba(0, 0, 0, 0.25) 0 8%, transparent 25%),
    radial-gradient(ellipse at 16% 82%, rgba(0, 0, 0, 0.18) 0 8%, transparent 25%);
  filter: url("#ethereal-shadow") blur(4px);
  opacity: 0.86;
  transform: scale(1.05);
  animation: ethereal-drift 32s linear infinite;
}

.falling-pattern.is-react-shadow::before,
.falling-pattern.is-react-shadow::after {
  opacity: 0;
}

#hero-shadow-root,
.hero-shadow {
  position: absolute;
  inset: 0;
}

.hero-shadow {
  overflow: hidden;
}

.hero-shadow__svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.falling-pattern::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.08) 0 0.8px, transparent 1.1px),
    linear-gradient(135deg, rgba(0, 0, 0, 0.024), transparent 36%, rgba(0, 0, 0, 0.014));
  background-size: 8px 8px, 100% 100%;
  opacity: 0.28;
  mix-blend-mode: multiply;
}

.discipline {
  margin: 0 0 clamp(32px, 7vh, 76px);
  color: rgba(0, 0, 0, 0.58);
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: var(--leading-label);
}

.home-hero h1 {
  position: relative;
  width: max-content;
  max-width: none;
  margin: 0;
  color: rgba(0, 0, 0, 0.56);
  font-size: clamp(40px, 6.8vw, 96px);
  font-weight: var(--weight-display);
  line-height: 0.96;
  letter-spacing: 0;
  white-space: nowrap;
  transform-style: preserve-3d;
  will-change: transform;
  isolation: isolate;
}

.home-hero__sentence {
  display: block;
  padding: 0 18vw 0 0;
}

.hero-word {
  position: relative;
  z-index: 2;
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-letter {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 54%;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero-word--accent {
  position: relative;
  color: #030303;
}

.home-gsap-shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform-style: preserve-3d;
}

.home-gsap-decor {
  position: absolute;
  display: block;
  z-index: 3;
  opacity: 1;
  will-change: transform;
}

.home-gsap-decor__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-gsap-decor.is-empty .home-gsap-decor__img {
  display: none;
}

.home-gsap-decor.is-empty {
  display: none;
}

/* Empty slots only show their drop-zone box in the authoring tool, so the
   live site never renders an empty placeholder. */
.home-hero.is-decor-edit .home-gsap-decor.is-empty {
  display: block;
  border: 1.5px dashed rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
}

/* Baked from the authoring tool (decor-layout.json). */
.home-gsap-decor--1 {
  left: clamp(280px, 46vw, 700px);
  top: -2.2em;
  width: clamp(120px, 14vw, 220px);
  aspect-ratio: 295 / 263;
  height: auto;
}

.home-gsap-decor--1 .home-gsap-decor__img {
  border-radius: 8px;
}

.home-gsap-decor--3 {
  left: clamp(450px, 70vw, 1040px);
  top: 0.82em;
  width: clamp(180px, 26vw, 420px);
  aspect-ratio: 586 / 359;
  height: auto;
}

/* Default editable position for the new slot (adjust via ?edit-decor). */
.home-gsap-decor--5 {
  left: 700px;
  top: -120px;
  width: 220px;
  height: 220px;
}

/* ---- Decoration authoring mode (?edit-decor) ---- */
.home-hero.is-decor-edit {
  overflow-x: auto;
  overflow-y: hidden;
}

.home-hero.is-decor-edit .home-gsap-shapes {
  pointer-events: none;
}

.home-hero.is-decor-edit .home-gsap-decor {
  pointer-events: auto;
  cursor: grab;
  outline: 1px solid rgba(0, 0, 0, 0.28);
  outline-offset: 2px;
  touch-action: none;
}

.home-hero.is-decor-edit .home-gsap-decor:active {
  cursor: grabbing;
}

.home-hero.is-decor-edit .home-gsap-decor.is-empty {
  background: rgba(0, 0, 0, 0.04);
}

.home-hero.is-decor-edit .home-gsap-decor.is-drop {
  outline: 2px dashed rgba(0, 0, 0, 0.6);
}

.home-gsap-decor__resize {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  background: #fff;
  cursor: nwse-resize;
  pointer-events: auto;
  touch-action: none;
}

.decor-edit-toolbar {
  position: fixed;
  top: 76px;
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(0, 0, 0, 0.78);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

.decor-edit-toolbar__hint {
  max-width: 220px;
  color: rgba(0, 0, 0, 0.6);
}

.decor-edit-toolbar button {
  padding: 5px 10px;
  font: inherit;
  color: #fff;
  background: #10120f;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.decor-edit-toolbar button:last-child {
  color: rgba(0, 0, 0, 0.78);
  background: rgba(0, 0, 0, 0.06);
}

.hero-proof {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(32px, 6vh, 64px);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 5vh, 48px);
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: rgba(0, 0, 0, 0.74);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  transform: translateX(-50%);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 220ms ease;
}

.hero-scroll:hover {
  border-color: rgba(0, 0, 0, 0.22);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.11);
  transform: translateX(-50%) translateY(4px);
}

.hero-scroll svg {
  width: 21px;
  height: 21px;
}

.hero-scroll path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  color: rgba(0, 0, 0, 0.72);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(10px);
}

.home-hero strong {
  font-weight: 650;
}

.letter-swap {
  display: inline-flex;
  align-items: baseline;
  overflow: hidden;
  vertical-align: baseline;
  line-height: 1;
}

.swap-letter {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  line-height: 1.08;
  white-space: pre;
}

.swap-letter > span {
  position: relative;
  display: inline-block;
  padding-bottom: 0.08em;
}

.swap-letter > span + span {
  position: absolute;
  left: 0;
}

.blue {
  color: #030303;
}

.pink {
  color: #030303;
}

.red {
  color: #030303;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px 40px;
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto 112px;
  align-items: start;
}

/* Desktop project rail: vertical scroll advances the work horizontally. */
.project-showcase {
  width: 100vw;
  margin: -120px 0 112px;
  overflow: clip;
}

.project-rail__viewport {
  width: 100%;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  perspective: 1200px;
}

.project-rail__motion {
  width: max-content;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.project-rail__track.work-grid {
  display: flex;
  gap: clamp(16px, 1.2vw, 24px);
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0 max(var(--page-x), 23.2vw) 28px;
  transform-style: preserve-3d;
}

.project-rail__track .project-card {
  flex: 0 0 clamp(420px, 53.6vw, 1100px);
  content-visibility: visible;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: transform 880ms cubic-bezier(.16, 1, .3, 1), opacity 760ms ease;
}
.project-rail__track .project-card__visual {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: transform 880ms cubic-bezier(.16, 1, .3, 1), opacity 760ms ease;
}
.project-card__shade {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  background: rgb(20 20 20 / 50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 880ms cubic-bezier(.16, 1, .3, 1);
}

.project-card--disabled {
  cursor: not-allowed;
}

.project-card__disabled-hint {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  color: var(--vv-color-text-primary);
  font: 500 13px / 1 var(--font-cjk);
  white-space: nowrap;
  border: 1px solid var(--vv-color-white-10);
  border-radius: 999px;
  background: rgb(20 20 20 / 78%);
  box-shadow: 0 10px 24px rgb(0 0 0 / 26%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 4px));
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.project-card__disabled-hint svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.project-card--disabled:hover .project-card__disabled-hint,
.project-card--disabled:focus-visible .project-card__disabled-hint {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Keep the secondary destinations available by URL while simplifying the
   primary top bar to the core portfolio routes. */
.site-nav .nav-links a[href*="archives"],
.site-nav .nav-links a[href*="about"],
.site-nav .nav-links a[href="#archives"] {
  display: none;
}

.project-rail__track .project-card__media {
  border-radius: 18px;
  box-shadow: 0 22px 52px rgb(0 0 0 / 24%);
  aspect-ratio: 16 / 9;
}
.project-rail__track .project-card__body { display: none; }
.project-rail__caption {
  position: absolute;
  right: 0;
  bottom: clamp(64px, 7vh, 80px);
  left: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 44px minmax(0, min(62vw, 720px));
  gap: 18px;
  width: fit-content;
  margin: 0 auto;
  color: var(--vv-color-text-primary);
  text-align: left;
  pointer-events: none;
  opacity: var(--project-caption-progress, 0);
  transform: translateY(calc((1 - var(--project-caption-progress, 0)) * 16px));
  transition: opacity 180ms linear, transform 220ms cubic-bezier(.22, 1, .36, 1);
  animation: project-caption-enter 520ms cubic-bezier(.22, 1, .36, 1) both;
}
.project-rail__caption > div { display: grid; gap: 8px; min-width: 0; }
@keyframes project-caption-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.project-rail__caption-number {
  padding-top: 4px;
  color: var(--vv-color-white-60);
  font: 500 13px / 1 var(--font-ui);
  letter-spacing: .08em;
}
.project-rail__caption-meta,
.project-rail__caption-status {
  margin: 0;
  color: var(--vv-color-white-60);
  font: 400 14px / 1.35 var(--font-cjk);
}
.project-rail__caption h2 {
  margin: 0;
  color: var(--vv-color-text-primary);
  font: 500 clamp(24px, 2.2vw, 36px) / 1.08 var(--font-ui);
  letter-spacing: -.035em;
  white-space: nowrap;
  text-wrap: nowrap;
}
.project-rail__caption-status { color: var(--vv-color-white-40); }

.motion-ready .project-showcase .project-card.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Project information stays beneath the thumbnail; never appears as hover copy. */
.project-card__glass {
  display: none;
}

/* Home: restrained VV-token dark mode, with hierarchy carried by grayscale and weight. */
body[data-page="home"] {
  color: var(--vv-color-text-primary);
  background: var(--vv-color-bg-app);
}
/* The page background lives on body so the fixed particle canvas remains visible
   through the Hero and horizontal project rail. */
body[data-page="home"] main,
body[data-page="home"] .project-showcase,
body[data-page="home"] .project-rail__viewport { background: transparent; }

.chromatic-waves {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  overflow: clip;
  opacity: 1;
  mix-blend-mode: normal;
}

.chromatic-waves canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100%;
  z-index: 1;
}

.chromatic-waves__image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  width: auto;
  height: 100dvh;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
body[data-page="home"] #home-root > :not(.chromatic-waves):not(.site-nav) { position: relative; z-index: 1; }

body[data-page="home"] .site-nav {
  position: fixed !important;
  top: 0 !important;
  right: 0;
  left: 0;
  z-index: 40;
  transform: none !important;
  border-bottom-color: transparent;
  background: rgb(17 17 17 / 50%);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
body[data-page="home"] #home-root { padding-top: 64px; }

body[data-page="home"] .brand,
body[data-page="home"] .nav-links a {
  color: var(--vv-color-text-secondary);
}

body[data-page="home"] .nav-links { gap: 8px; }
body[data-page="home"] .nav-links a {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  color: rgb(254 254 254 / 60%);
  font-weight: 400;
  transition: background-color 160ms ease, color 160ms ease;
}
body[data-page="home"] .nav-links a:hover { background: rgb(254 254 254 / 8%); color: rgb(254 254 254 / 90%); opacity: 1; }
body[data-page="home"] .nav-links a:active { background: rgb(254 254 254 / 5%); }
body[data-page="home"] .nav-links a[aria-current="page"] { background: rgb(254 254 254 / 5%); color: rgb(254 254 254 / 90%); font-weight: 600; }

body[data-page="home"] .language-switch {
  border-color: var(--vv-color-border-subtle);
  background: rgb(255 255 255 / 5%);
}

body[data-page="home"] .language-switch button { color: var(--vv-color-text-tertiary); }
body[data-page="home"] .language-switch button[aria-pressed="true"] {
  color: var(--vv-color-text-primary);
  background: transparent;
  box-shadow: none;
}
body[data-page="home"] .home-hero { background: var(--vv-color-bg-page); }
body[data-page="home"] .falling-pattern {
  background: var(--vv-color-bg-page);
  opacity: 0.22;
  filter: grayscale(1) invert(1);
}

body[data-page="home"] .home-gsap-decor {
  opacity: 0.22;
  filter: grayscale(1) contrast(0.8);
}

body[data-page="home"] .discipline {
  color: var(--vv-color-text-tertiary);
  font-weight: var(--weight-body);
}

body[data-page="home"] .home-hero h1 { color: var(--vv-color-text-tertiary); }
body[data-page="home"] .home-hero .hero-word--accent,
body[data-page="home"] .home-hero .blue,
body[data-page="home"] .home-hero .pink,
body[data-page="home"] .home-hero .red {
  color: var(--vv-color-text-primary);
  font-weight: var(--weight-medium);
}

body[data-page="home"] .hero-proof span,
body[data-page="home"] .hero-scroll { color: var(--vv-color-white-60); }

body[data-page="home"] .work-manifest { border-top-color: var(--vv-color-border-subtle); }
body[data-page="home"] .work-manifest__rows a {
  border-bottom-color: var(--vv-color-border-subtle);
}
body[data-page="home"] .work-manifest strong,
body[data-page="home"] .project-card__title { color: var(--vv-color-text-primary); }
body[data-page="home"] .work-manifest span,
body[data-page="home"] .work-manifest em,
body[data-page="home"] .project-card__number,
body[data-page="home"] .project-card__meta,
body[data-page="home"] .project-card__status,
body[data-page="home"] .eyebrow { color: var(--vv-color-text-tertiary); }

body[data-page="home"] .project-card { color: var(--vv-color-text-primary); }
body[data-page="home"] .project-card__media,
body[data-page="home"] .project-card__media--contain,
body[data-page="home"] .project-card__media--prompt,
body[data-page="home"] .project-card__media--discovery,
body[data-page="home"] .project-card__media--system,
body[data-page="home"] .project-card__media--delta {
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .project-card__media::before { display: none; }
body[data-page="home"] .project-card:hover .project-card__media img {
  filter: none;
  transform: none;
}
body[data-page="home"] .project-card__body {
  min-height: 80px;
  padding-top: var(--vv-space-16);
  border-bottom: 0;
}

.archive-grid-section {
  width: min(1440px, calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
  padding: clamp(72px, 10vw, 144px) 0 96px;
}
.archive-grid__eyebrow { margin: 0 0 14px; color: var(--vv-color-white-40); font: 500 12px/1 var(--font-ui); letter-spacing: .12em; }
.archive-grid__intro h1 { margin: 0 0 56px; color: var(--vv-color-text-primary); font: 300 clamp(48px, 8vw, 112px)/.95 var(--font-ui); letter-spacing: -.06em; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 28px; }
.archive-card { display: grid; gap: 10px; color: var(--vv-color-text-primary); }
.archive-card__media { display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: rgb(254 254 254 / 5%); }
.archive-card--disabled { cursor: not-allowed; }
.archive-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.archive-card:hover .archive-card__media img { transform: scale(1.035); }
.archive-card__meta { color: var(--vv-color-white-50); font: 400 14px/1.4 var(--font-cjk); }
.archive-card strong { font: 500 clamp(24px, 2.4vw, 38px)/1.08 var(--font-ui); letter-spacing: -.04em; }

/* Home introduction: a fixed personal anchor with a scrolling set of traits. */
.who-am-i {
  position: relative;
  isolation: isolate;
  width: min(1440px, calc(100% - 2 * var(--page-x)));
  min-height: calc(100svh - 64px);
  margin: 0 auto;
}

.who-am-i__single {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 64px);
  padding: clamp(56px, 9vh, 128px) 0;
}

.who-am-i__eyebrow,
.who-trait__index {
  margin: 0;
  color: var(--vv-color-text-tertiary);
  font: var(--weight-medium) var(--text-label) / var(--leading-label) var(--font-ui);
  letter-spacing: .08em;
}

.who-am-i__identity { display: none; }
.who-am-i__identity p { margin: 0; }
.who-am-i__sentence { display: block; }

.who-am-i h1 {
  position: absolute;
  top: 42.1296%;
  left: 8.8542%;
  width: 82.2917%;
  margin: 0;
  color: var(--vv-color-text-primary);
  text-align: center;
  font: 300 80px / 1 var(--font-ui);
  letter-spacing: 0;
  white-space: nowrap;
}
.who-am-i h1 strong { font-weight: 700; }
.who-am-i__prompt { font-weight: 200; opacity: .7; }
.hero-morph { position: relative; display: inline-grid; min-width: 6.2ch; vertical-align: baseline; }
.hero-morph__term { grid-area: 1 / 1; text-align: right; will-change: transform, filter, opacity; }

.who-am-i__caption { position: absolute; top: calc(100% + 24px); right: 0; display: grid; margin: 0; color: rgb(255 255 255 / 80%); font: 400 clamp(15px, 1.67vw, 32px) / 1.22 var(--font-cjk); text-align: right; }
.who-am-i__caption > span { display: grid; grid-area: 1 / 1; margin: 0; opacity: 0; white-space: nowrap; }
.who-am-i__scroll-note { position: absolute; top: calc(42.1296% + clamp(72px, 8.8542vw, 170px) + 184px); left: 50%; width: max-content; max-width: calc(100% - 2 * var(--page-x)); margin: 0; color: var(--vv-color-white-60); font: 500 clamp(14px, 1.67vw, 32px) / 1.22 var(--font-cjk); opacity: 0; transform: translateX(-50%); }

.who-am-i__sentence {
  display: flex;
  flex-wrap: wrap;
  gap: .18em .24em;
  align-items: baseline;
  margin-top: clamp(18px, 2vw, 34px);
}

.who-morph {
  position: relative;
  min-width: 0;
  margin-left: 12px;
}

.who-morph__defs { position: absolute; width: 0; height: 0; pointer-events: none; }
.who-morph__index { margin: 0 0 clamp(30px, 5vw, 72px); color: var(--vv-color-text-tertiary); font: var(--weight-medium) var(--text-label) / var(--leading-label) var(--font-ui); letter-spacing: .08em; }
.who-morph__index,
.who-morph__caption { position: relative; display: grid; }
.who-morph__index-item,
.who-morph__caption-item { grid-area: 1 / 1; opacity: 0; }
.who-morph__index-item.is-initial,
.who-morph__caption-item.is-initial,
.who-morph__term.is-initial { opacity: 1; }
.who-morph__word { position: relative; display: grid; place-items: center start; min-height: 1em; overflow: visible; }
.who-morph__term { grid-area: 1 / 1; opacity: 0; color: var(--vv-color-text-primary); font: 700 clamp(64px, 8.5vw, 148px) / .8 var(--font-hero); letter-spacing: -.065em; white-space: nowrap; will-change: transform, filter, opacity; }
.who-morph__term--next { opacity: 0; color: var(--vv-color-text-primary); }
.who-morph__caption { margin: clamp(12px, 1.5vw, 20px) 0 0; color: var(--vv-color-white-60); font: var(--weight-body) var(--text-lead) / 1.6 var(--font-cjk); }

.who-am-i__work-link {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  width: fit-content;
  margin-top: clamp(42px, 6vw, 84px);
  padding-bottom: 8px;
  color: var(--vv-color-text-primary);
  font: var(--weight-medium) var(--text-lead) / 1 var(--font-ui);
  border-bottom: 1px solid var(--vv-color-border-strong);
}

.who-am-i__work-link span { color: #ff9aaa; }

.work-manifest {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto 56px;
  padding-top: clamp(48px, 8vh, 80px);
  border-top: 1px solid var(--hairline);
}

.work-manifest__rows {
  display: grid;
}

.work-manifest__rows a {
  display: grid;
  grid-template-columns: 64px 1fr minmax(180px, 0.55fr);
  gap: 28px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.work-manifest__rows a:hover {
  opacity: 0.54;
  transform: translateX(8px);
}

.work-manifest span,
.project-card__number {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
}

.work-manifest strong {
  color: #000;
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.work-manifest em {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-style: normal;
  line-height: var(--leading-small);
  text-align: right;
}

.project-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  color: #000;
  content-visibility: auto;
  contain-intrinsic-size: 566px 520px;
}

.project-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--project-ratio);
  overflow: hidden;
  border-radius: 4px;
  background: #f3f3f3;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  isolation: isolate;
  transform: translateZ(0);
}

.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 480ms ease;
  will-change: transform;
}

.project-card__media--contain img {
  display: block;
  margin-top: auto;
  object-fit: contain;
  object-position: center bottom;
  padding: 0;
}

.project-card__media--contain {
  background: transparent;
}

.project-card__media::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.52), transparent 24%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.22), transparent 44%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 380ms ease;
}

.project-card:hover .project-card__media img {
  transform: scale(1.032) translateY(-2px);
  filter: saturate(1.05) contrast(1.01);
}

.project-card:hover .project-card__media::before {
  opacity: 1;
}

/* Figma project thumbnails: retain the actual product UI, crop away the cover copy. */
.project-card__media--prompt { background: linear-gradient(180deg, #141414 42%, #1e3c8f 78%, #4376ff); }
.project-card__media--discovery { background: linear-gradient(145deg, #f7f3ff, #ddd1ff 52%, #7470d7); }
.project-card__media--system { background: linear-gradient(145deg, #111 0%, #343434 58%, #d6d6d6); }
.project-card__media--delta { background: linear-gradient(145deg, #eff6ff, #d2e9ff 45%, #6ca8ff); }
.project-card__media--prompt img,
.project-card__media--discovery img,
.project-card__media--system img,
.project-card__media--delta img {
  object-fit: cover;
  object-position: right center;
  transform: scale(1.52);
  transform-origin: right center;
}

.project-card:hover .project-card__media--prompt img,
.project-card:hover .project-card__media--discovery img,
.project-card:hover .project-card__media--system img,
.project-card:hover .project-card__media--delta img { transform: scale(1.56); }

/* User-supplied project covers already include the full mockup composition. */
.project-card__media--provided-thumbnail img,
.project-card:hover .project-card__media--provided-thumbnail img {
  object-fit: contain;
  object-position: center;
  transform: none;
}

/* The supplied timeline cover is intentionally oversized so the monitor feels
   closer and its stand exits the bottom edge of the thumbnail. */
body[data-page="home"] .project-card__media--prompt.project-card__media--provided-thumbnail img,
body[data-page="home"] .project-card:hover .project-card__media--prompt.project-card__media--provided-thumbnail img {
  object-fit: contain;
  object-position: center;
  transform: none;
  transform-origin: center;
}

/* Keep the supplied homepage mockup proportional while extending its visual
   footprint 20 px downward within the existing thumbnail crop. */
body[data-page="home"] .project-card__media--discovery.project-card__media--provided-thumbnail img,
body[data-page="home"] .project-card:hover .project-card__media--discovery.project-card__media--provided-thumbnail img {
  object-fit: contain;
  object-position: center;
  transform: none;
  transform-origin: center;
}

/* The user-provided VV UI cover is portrait. Its black canvas blends into the
   no-background card while a restrained scale keeps all three planes legible. */
body[data-page="home"] .project-card__media--system-cover img,
body[data-page="home"] .project-card:hover .project-card__media--system-cover img {
  object-fit: contain;
  object-position: center;
  transform: scale(1.18);
  transform-origin: center;
}

/* DA thumbnail: the Figma group export owns the monitor; only the source GIF
   is overlaid in its measured screen rectangle. */
.project-card__media--da-thumbnail {
  display: grid;
  place-items: center;
}

.da-thumbnail {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3840 / 2160;
}

.da-thumbnail > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: none;
}

.da-thumbnail__screen {
  position: absolute;
  left: 14.64%;
  top: 10.28%;
  width: 70.1%;
  height: 71.6%;
  overflow: hidden;
  border-radius: 0;
}

.da-thumbnail__screen > .da-thumbnail__motion {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: none;
}

.project-card:hover .da-thumbnail > img { transform: none; }

.project-card__glass {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 18px 20px;
  color: rgba(0, 0, 0, 0.86);
  font-family: var(--font-ui);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.28);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.28);
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 360ms ease,
    transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-card__glass-kicker {
  color: rgba(0, 0, 0, 0.58);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.project-card__glass-text {
  color: rgba(0, 0, 0, 0.88);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  line-height: var(--leading-small);
}

.project-card:hover .project-card__glass,
.project-card:focus-visible .project-card__glass {
  opacity: 1;
  transform: translateY(0);
}

.project-card__body {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 4px 20px;
  min-height: 88px;
  padding-top: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.project-card__meta,
.project-card__status {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.project-card__meta {
  grid-column: 2 / -1;
}

.project-card__number {
  grid-row: 1 / 3;
  padding-top: 2px;
}

.project-card__title {
  display: block;
  grid-column: 2;
  max-width: 240px;
  color: #000;
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.project-card__status {
  justify-self: end;
  padding-top: 8px;
  white-space: nowrap;
}

.about-page {
  padding-bottom: 96px;
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: clamp(36px, 7vw, 96px);
  align-items: start;
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
  padding: 80px 0 108px;
}

.about-hero h1 {
  max-width: 980px;
  margin: 0;
  color: #000;
  font-size: clamp(72px, 12vw, 168px);
  font-weight: var(--weight-display);
  line-height: 0.86;
  letter-spacing: 0;
}

.about-role {
  margin: 28px 0 0;
  color: #000;
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.about-hero h2 {
  max-width: 980px;
  margin: 48px 0 0;
  color: var(--hero-gray);
  font-size: var(--text-title);
  font-weight: var(--weight-display);
  line-height: var(--leading-title);
  letter-spacing: 0;
  text-wrap: balance;
}

.about-intro {
  max-width: 640px;
  margin: 42px 0 0 auto;
  color: var(--body);
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: var(--leading-lead);
  text-wrap: pretty;
}

.about-portrait {
  position: sticky;
  top: 96px;
  margin: 12px 0 0;
}

.about-portrait img,
.about-portrait__placeholder {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.about-portrait img {
  object-fit: cover;
}

.about-portrait__placeholder {
  place-items: center;
  color: rgba(0, 0, 0, 0.66);
  font-family: var(--font-ui);
  font-size: clamp(42px, 8vw, 76px);
  font-weight: var(--weight-semibold);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0.04)),
    #ecefea;
}

.about-ledger,
.about-section {
  width: min(var(--content), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
}

.about-ledger {
  display: grid;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.ledger-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ledger-row:last-child {
  border-bottom: 0;
}

.ledger-row p,
.experience-item span,
.principle-grid span {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.ledger-row h2,
.about-section h2 {
  margin: 0;
  color: #000;
  font-family: var(--font-sans);
  font-size: var(--text-section);
  font-weight: var(--weight-body);
  line-height: var(--leading-section);
}

.about-section {
  padding-top: 132px;
}

.about-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 100px;
}

.experience-list {
  display: grid;
  gap: 0;
}

.experience-item {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 34px;
  padding: 0 0 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.experience-item:last-child {
  margin-bottom: 0;
}

.experience-item h3,
.principle-grid h3 {
  margin: 0;
  color: #000;
  font-family: var(--font-sans);
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.experience-item p,
.principle-grid p {
  margin: 8px 0 0;
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.principle-band {
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
}

.principle-grid article {
  min-height: 260px;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.principle-grid h3 {
  margin-top: 54px;
}

.about-contact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  padding-top: 132px;
}

.about-contact .eyebrow {
  grid-column: 1 / -1;
}

.about-contact h2 {
  max-width: 560px;
  color: var(--hero-gray);
  font-size: var(--text-title);
  font-weight: var(--weight-display);
  line-height: var(--leading-title);
}

.about-contact a {
  color: #000;
  font-family: var(--font-sans);
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
  border-bottom: 1px solid currentColor;
}

.contact-links {
  display: grid;
  gap: 12px;
  justify-items: end;
}

.motion-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
  transition-delay: var(--delay, 0ms);
}

.motion-ready .reveal.is-visible,
.reveal {
  opacity: 1;
  transform: translateY(0);
}

.case-page {
  font-family: var(--font-sans);
}

.case-hero {
  display: grid;
  grid-template-columns: 1fr 180px;
  column-gap: 132px;
  min-height: 262px;
  padding: 48px var(--page-x) 56px;
  background: #fff;
}

.case-title h1 {
  margin: 0;
  color: #000;
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  letter-spacing: 0;
}

.case-title p {
  margin: 25px 0 0;
  color: var(--muted);
  font-size: var(--text-body);
  line-height: var(--leading-small);
}

.case-title span {
  display: inline-flex;
  margin-top: 16px;
  padding: 4px 8px;
  color: var(--muted);
  background: #f7f7f7;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
}

.case-meta {
  display: grid;
  gap: 16px;
  align-content: start;
  padding-top: 8px;
}

.case-meta p {
  margin: 0 0 2px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  line-height: var(--leading-label);
}

.case-meta strong {
  display: block;
  color: #000;
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-small);
}

.full-bleed-media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #e9e9e9;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.full-bleed-media img {
  width: 100%;
  height: 757px;
  object-fit: cover;
}

.case-context {
  width: min(var(--content), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
  padding: 96px 0 16px;
}

.case-context h2 {
  max-width: 900px;
  margin: 0;
  color: #000;
  font-size: var(--text-section);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.case-context__grid,
.case-note-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.case-context__grid article,
.case-note-grid article {
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.case-context__grid span,
.case-note-grid span {
  display: block;
  margin-bottom: 10px;
  color: #000;
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.case-context__grid p,
.case-note-grid p {
  margin: 0;
  color: var(--body);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.chapter-heading {
  width: min(1066px, calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
  padding: 154px 0 84px;
  text-align: center;
}

.chapter-heading h2 {
  margin: 0;
  color: var(--section-fade);
  font-family: var(--font-label);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
}

.chapter-heading h2 span {
  font-size: var(--text-lead);
  line-height: var(--leading-label);
}

.chapter-heading p {
  margin: 10px 0 0;
  color: var(--purple-fade);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-small);
}

.split-brief,
.case-section,
.feature-section,
.statement {
  width: min(var(--content), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
}

.split-brief {
  display: grid;
  grid-template-columns: 471px 1fr;
  gap: 10px;
  align-items: start;
  padding-bottom: 40px;
}

.brief-copy article {
  padding: 0 0 28px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.brief-copy article:last-child {
  border-bottom: 0;
}

.split-brief figure {
  margin: 163px 0 0;
  overflow: hidden;
  border-radius: 10px;
}

.brief-copy {
  display: grid;
  gap: 28px;
}

.brief-copy article h3,
.section-copy h3,
.statement h3 {
  margin: 0;
  color: #000;
  font-family: var(--font-sans);
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.brief-copy article p,
.section-copy p,
.callout {
  margin: 10px 0 0;
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
}

.case-section,
.feature-section {
  padding-top: 40px;
}

.section-copy {
  margin-bottom: 40px;
}

.section-copy .case-note-grid {
  margin-top: 28px;
}

.eyebrow {
  margin: 0 0 4px !important;
  color: var(--section-fade) !important;
  font-family: var(--font-label) !important;
  font-size: var(--text-label) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--leading-label) !important;
  text-transform: uppercase;
}

.media-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 445px;
  margin: 0;
  padding: 40px;
  overflow: hidden;
  border-radius: 40px;
  background: var(--panel);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.04),
    0 24px 80px rgba(0, 0, 0, 0.035);
}

.media-panel.compact {
  min-height: 436px;
}

.media-panel.short {
  min-height: 306px;
}

.media-panel.tall {
  min-height: 640px;
}

.media-panel img {
  width: 100%;
  height: auto;
}

.statement {
  width: min(1066px, calc(100% - 2 * var(--page-x)));
  padding: 88px 80px;
  margin-top: 40px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.statement h3 {
  max-width: 906px;
  font-size: var(--text-section);
  line-height: var(--leading-section);
  text-wrap: balance;
}

.callout {
  max-width: 906px;
  margin: 40px auto 0;
  padding-left: 34px;
  border-left: 2px solid rgba(91, 95, 199, 0.3);
}

.feature-section {
  padding-top: 40px;
}

.final-section {
  padding-bottom: 40px;
}

.lesson-section {
  padding-top: 80px;
  padding-bottom: 100px;
  border-top: 1px solid var(--hairline);
}

.two-col-title {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}

.two-col-title .eyebrow {
  grid-column: 1 / -1;
}

.dual-panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.media-panel.phone {
  min-height: 705px;
  padding: 40px 24px;
}

.play-page {
  padding-bottom: 112px;
}

.play-hero {
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
  padding: 80px 0 56px;
}

.play-hero h1 {
  max-width: 900px;
  margin: 0;
  color: var(--hero-gray);
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: 0;
  text-wrap: balance;
}

.experiment-grid {
  display: grid;
  gap: 88px;
  width: min(var(--wide), calc(100% - 2 * var(--page-x)));
  margin: 0 auto;
}

.experiment-card {
  display: grid;
  gap: 22px;
  color: #000;
}

.experiment-card__media {
  position: relative;
  min-height: clamp(560px, 68vw, 760px);
  overflow: hidden;
  border-radius: 4px;
  background: #f4eee4;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
    0 24px 80px rgba(0, 0, 0, 0.05);
  isolation: isolate;
}

.experiment-card__media--ascii {
  min-height: clamp(500px, 56vw, 640px);
  background: #fff;
}

.experiment-card__media--ascii::after {
  background:
    radial-gradient(circle at 72% 18%, rgba(15, 23, 42, 0.035), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(15, 23, 42, 0.035));
  mix-blend-mode: multiply;
}

.seed-bloom,
.seed-bloom canvas,
.ascii-whale,
.ascii-whale canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.seed-bloom,
.ascii-whale {
  position: absolute;
  inset: 0;
}

.experiment-card__media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 22% 14%, rgba(255, 244, 210, 0.42), transparent 26%),
    linear-gradient(180deg, transparent 50%, rgba(42, 28, 18, 0.18));
  mix-blend-mode: soft-light;
}

.experiment-card__glass {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: grid;
  gap: 8px;
  max-width: 520px;
  padding: 20px 22px;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.88);
  font-family: var(--font-ui);
  border: 0;
  border-radius: 18px;
  background: transparent;
  isolation: isolate;
}

.liquid-glass-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.experiment-card__glass::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)),
    rgba(255, 255, 255, 0.46);
  backdrop-filter: blur(12px) url("#liquid-glass-card") saturate(1.45);
  -webkit-backdrop-filter: blur(12px) saturate(1.45);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    inset 2px 3px 0 -2px rgba(255, 255, 255, 0.92),
    inset -2px -2px 0 -2px rgba(255, 255, 255, 0.72),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.48),
    inset -0.3px -1px 4px rgba(0, 0, 0, 0.12),
    inset -1.5px 2.5px 0 -2px rgba(0, 0, 0, 0.18),
    inset 0 3px 4px -2px rgba(0, 0, 0, 0.16),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.08),
    0 1px 5px rgba(0, 0, 0, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.1);
  transition:
    background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
    transform 400ms cubic-bezier(1, 0, 0.4, 1);
}

.experiment-card__glass::after {
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  content: "";
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.72), transparent 28%),
    radial-gradient(circle at 86% 96%, rgba(0, 0, 0, 0.12), transparent 34%);
  mix-blend-mode: soft-light;
}

.experiment-card__glass > * {
  position: relative;
  z-index: 1;
}

.experiment-card__glass--light {
  color: rgba(0, 0, 0, 0.9);
}

.experiment-card__glass--light::before {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.56)),
    rgba(255, 255, 255, 0.5);
}

.experiment-card__glass span {
  color: rgba(0, 0, 0, 0.54);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.experiment-card__glass strong {
  font-size: var(--text-section);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

.experiment-card__glass p {
  max-width: 440px;
  margin: 0;
  color: rgba(0, 0, 0, 0.72);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.experiment-card__body {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 4px 20px;
  align-items: start;
  min-height: 88px;
  padding-top: 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.experiment-card__body p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.experiment-card__body h2 {
  margin: 4px 0 0;
  color: #000;
  font-size: var(--text-subsection);
  font-weight: var(--weight-medium);
  line-height: var(--leading-section);
}

.experiment-reset {
  min-height: 38px;
  padding: 0 16px;
  color: rgba(0, 0, 0, 0.76);
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 180ms ease;
}

.experiment-reset:hover {
  border-color: rgba(0, 0, 0, 0.24);
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}

@keyframes ethereal-drift {
  0% {
    transform: translate3d(-4%, -3%, 0) scale(1.05) rotate(0deg);
  }
  50% {
    transform: translate3d(3%, 2%, 0) scale(1.08) rotate(1.5deg);
  }
  100% {
    transform: translate3d(-4%, -3%, 0) scale(1.05) rotate(0deg);
  }
}

@media (max-width: 760px) {
  .project-showcase {
    width: min(var(--wide), calc(100% - 2 * var(--page-x)));
    margin: 0 auto 112px;
    overflow: visible;
  }

  .project-rail__viewport {
    height: auto;
    overflow: visible;
    display: block;
    perspective: none;
  }

  .project-rail__motion { width: 100%; }

  .project-rail__track.work-grid {
    display: grid;
    width: 100%;
    gap: 24px;
    margin: 0;
    padding: 0;
  }

  .project-rail__track .project-card {
    flex-basis: auto;
    transform: none !important;
    opacity: 1 !important;
  }

  .project-rail__track .project-card__body { display: grid; }
  .project-rail__caption { display: none; }

  .project-card__title {
    font-size: 18px;
    line-height: 1.35;
  }
}

@media (max-width: 1020px) {
  .who-am-i h1 { white-space: normal; }
  .hero-morph { display: block; margin-top: 16px; }
}

@media (max-width: 900px) {
  :root {
    --page-x: 24px;
    --text-display: clamp(40px, 10vw, 58px);
    --text-display-home: clamp(38px, 10vw, 58px);
    --text-title: clamp(38px, 9vw, 52px);
    --text-lead: 19px;
  }

  .site-nav {
    grid-template-columns: 1fr auto;
    height: auto;
    min-height: 64px;
  }

  .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 8px;
    justify-content: flex-start;
  }

  .nav-links a {
    font-size: var(--text-small);
  }

  .home-hero {
    min-height: calc(100svh - 64px);
    padding-block: 56px;
  }

  .home-hero h1 {
    font-size: clamp(36px, 9vw, 62px);
  }

  .home-gsap-decor--1 {
    left: clamp(230px, 52vw, 430px);
    top: -2em;
    width: clamp(104px, 18vw, 146px);
  }

  .home-gsap-decor--3 {
    left: clamp(360px, 68vw, 560px);
    top: 0.24em;
    width: clamp(150px, 28vw, 220px);
  }

  .falling-pattern {
    display: none;
  }

  .discipline {
    margin-bottom: 40px;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

.project-showcase {
    width: min(var(--wide), calc(100% - 2 * var(--page-x)));
    margin-right: auto;
    margin-left: auto;
    overflow: visible;
  }

  .project-rail__track.work-grid {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .project-rail__viewport {
    height: auto;
    overflow: visible;
    display: block;
  }

  .project-rail__motion { width: 100%; }

  .project-rail__track .project-card {
    flex-basis: auto;
  }

  .work-manifest {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .work-manifest__rows a {
    grid-template-columns: 44px 1fr;
    gap: 18px;
  }

  .work-manifest em {
    grid-column: 2;
    text-align: left;
  }

  .project-card {
    min-height: auto;
  }

  .play-hero {
    padding-top: 64px;
  }

  .experiment-card__media {
    min-height: 600px;
  }

  .experiment-card__media--ascii {
    min-height: 520px;
  }

  .case-hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .language-switch {
    grid-column: 2;
  }

  .about-hero {
    grid-template-columns: 1fr;
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .about-portrait {
    position: relative;
    top: auto;
    width: min(100%, 320px);
    order: -1;
  }

  .about-intro {
    max-width: none;
    margin-top: 32px;
  }

  .ledger-row,
  .about-split,
  .about-contact,
  .case-context__grid,
  .case-note-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-section {
    padding-top: 92px;
  }

  .principle-grid {
    grid-template-columns: 1fr;
  }

  .principle-grid article {
    min-height: auto;
  }

  .principle-grid h3 {
    margin-top: 34px;
  }

  .full-bleed-media img {
    height: auto;
    min-height: 360px;
  }

  .chapter-heading {
    padding: 96px 0 56px;
  }

  .split-brief {
    grid-template-columns: 1fr;
  }

  .split-brief figure {
    margin-top: 0;
  }

  .media-panel {
    min-height: auto !important;
    padding: 24px;
    border-radius: 28px;
  }

  .statement {
    width: min(var(--content), calc(100% - 2 * var(--page-x)));
    padding: 64px 0;
  }

  .dual-panels,
  .two-col-title {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  :root {
    --text-display: clamp(34px, 12vw, 46px);
    --text-display-home: clamp(34px, 12vw, 46px);
    --text-title: clamp(34px, 11vw, 44px);
    --text-section: 24px;
    --text-lead: 18px;
  }

  .site-nav {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 6px;
    padding-block: 12px;
  }

  .brand {
    height: auto;
  }

  .language-switch {
    grid-column: 1;
    justify-self: start;
    order: 3;
  }

  .home-hero {
    min-height: calc(100svh - 92px);
  }

  .home-hero h1 {
    font-size: clamp(31px, 9.5vw, 44px);
  }

  .home-gsap-shapes {
    opacity: 0.82;
  }

  .home-gsap-decor--1 {
    left: 56vw;
    top: -1.9em;
    width: 92px;
  }

  .home-gsap-decor--3 {
    left: 70vw;
    top: 0.8em;
    width: 128px;
  }

  .hero-proof {
    margin-top: 28px;
    padding-bottom: 48px;
  }

  .experience-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-contact a {
    font-size: var(--text-lead);
  }

  .contact-links {
    justify-items: start;
  }

  .project-card__body {
    grid-template-columns: 38px 1fr;
    min-height: auto;
  }

  .project-card__status {
    grid-column: 2;
    justify-self: start;
    padding: 0 0 18px;
  }

  .project-card__glass {
    opacity: 1;
    transform: none;
  }

  .experiment-card__media {
    min-height: 560px;
  }

  .experiment-card__media--ascii {
    min-height: 480px;
  }

  .experiment-card__glass {
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 16px;
  }

  .experiment-card__body {
    grid-template-columns: 38px 1fr;
    min-height: auto;
  }

  .experiment-reset {
    grid-column: 2;
    justify-self: start;
    margin-bottom: 18px;
  }
}

/* Compact mobile top bar: keep identity and primary routes on one line. */
@media (max-width: 760px) {
  /* Mobile type ramp: keep supporting text readable (12px floor) while
     preserving a clear display / title / body hierarchy. */
  :root {
    --page-x: 16px;
    --text-display: clamp(32px, 10vw, 46px);
    --text-display-home: clamp(32px, 10vw, 46px);
    --text-title: 24px;
    --text-section: 22px;
    --text-subsection: 20px;
    --text-lead: 18px;
    --text-body: 14px;
    --text-small: 12px;
    --text-label: 12px;
    --text-caption: 12px;
  }

  .site-nav {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0;
    padding-block: 8px;
  }
  .site-nav .nav-links {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    gap: 4px;
  }
  .site-nav .nav-links a { padding-inline: 10px; }
  .site-nav .language-switch { display: none; }

  .who-am-i h1 {
    text-align: left;
  }
  .who-am-i .hero-morph {
    display: grid;
    width: 100%;
    min-width: 0;
    text-align: left;
    justify-items: start;
  }
  .who-am-i .hero-morph__term {
    justify-self: start;
    text-align: left;
    transform-origin: left center;
  }
  .who-am-i .who-am-i__caption {
    right: auto;
    left: 0;
    text-align: left;
  }
  .who-am-i .who-am-i__caption > span {
    text-align: left;
  }

  .who-am-i h1,
  .who-morph__term {
    font-size: clamp(42px, 14vw, 64px);
  }

  .who-am-i__caption {
    font-size: clamp(12px, 3.8vw, 16px);
  }

  .who-am-i__scroll-note {
    font-size: clamp(12px, 3.8vw, 16px);
  }

  .project-card__title {
    font-size: 18px;
    line-height: 1.35;
  }
}

@media (max-width: 760px) {
  .who-am-i {
    display: block;
    width: min(100%, calc(100% - 2 * var(--page-x)));
    min-height: 0;
  }

  .who-am-i__single {
    position: relative;
    top: auto;
    min-height: 74svh;
    padding: 72px 0 56px;
    border-right: 0;
    border-bottom: 1px solid var(--vv-color-border-subtle);
  }

  .who-am-i h1 { font-size: clamp(74px, 24vw, 120px); }

  .who-am-i__sentence { gap: .2em; }
  .who-morph { margin-left: 0; }

  .who-am-i h1,
  .who-morph__term { font-size: clamp(42px, 14vw, 64px); }
  .who-am-i h1 { white-space: normal; line-height: .96; }
  .hero-morph { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .home-hero h1 {
    width: min(100%, 980px);
    white-space: normal;
    text-wrap: balance;
  }

  .home-gsap-shapes {
    display: none;
  }

  .project-card__media img,
  .project-card__glass,
  .project-card__media::before,
  .falling-pattern::before,
  .falling-pattern::after {
    animation: none !important;
    transition: none;
  }
}

/* Prompt timeline case study — rebuilt as HTML rather than a flattened Figma export. */
.case-page { background: #f6f6f4; color: #111; }
.case-page .site-nav { z-index: 10; }
.site-nav--inverse { color: #fff; }
.site-nav--inverse .brand, .site-nav--inverse .nav-links a { color: inherit; }
.case-nav-back { color: inherit; font: 500 var(--text-label)/1 var(--font-ui); }
.case-shell { width: min(1280px, calc(100% - 2 * var(--page-x))); margin-inline: auto; }
.timeline-hero { position: relative; overflow: hidden; padding: 160px 0 88px; color: #fff; background: linear-gradient(180deg, #121212 39%, #182858 73%, #4376ff 100%); }
.timeline-hero::after { position: absolute; inset: auto -10% -30% 30%; height: 65%; content: ""; background: radial-gradient(ellipse, rgba(27, 86, 255, .54), transparent 68%); filter: blur(24px); pointer-events: none; }
.timeline-hero__intro { position: relative; z-index: 1; max-width: 1280px; }
.case-kicker { margin: 0 0 22px; color: rgba(255,255,255,.55); font: 600 11px/1.2 var(--font-ui); letter-spacing: .13em; }
.timeline-hero h1 { max-width: 760px; margin: 0; font-family: var(--font-display); font-size: clamp(48px, 6.2vw, 88px); font-weight: 500; letter-spacing: -.065em; line-height: .98; background: linear-gradient(105deg, #3c89ff 4%, #00fff8 78%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.timeline-hero__lede { max-width: 470px; margin: 28px 0 54px; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.7; }
.timeline-product { position: relative; z-index: 1; display: grid; grid-template-columns: 68px 280px minmax(400px, 1fr) 230px; grid-template-rows: 48px 1fr 180px; height: min(660px, 52vw); min-height: 480px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: #161616; box-shadow: 0 50px 90px rgba(0,0,0,.42); transform: perspective(1800px) rotateX(3deg); transform-origin: center top; }
.product-topbar { grid-column: 1/-1; display: flex; align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid #292929; color: rgba(255,255,255,.65); font: 11px var(--font-ui); }
.timeline-product--image { display: block; height: auto; min-height: 0; margin: 0; aspect-ratio: 1012 / 925; background: transparent; }.timeline-product--image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-topbar strong { color: #fff; font-size: 13px; letter-spacing: .08em; }.product-topbar__state { margin-left: auto; padding: 6px 12px; border-radius: 100px; background: #2b2b2b; color: #fff; }.product-topbar i { width: 22px; height: 22px; border-radius: 50%; background: #303030; }
.product-tools { grid-row: 2/-1; display: grid; align-content: start; justify-items: center; gap: 19px; padding-top: 22px; border-right: 1px solid #292929; color: #777; font: 16px/1 var(--font-ui); }.product-tools .is-active { color: #ff9a1e; }
.product-prompt { padding: 22px 16px; border-right: 1px solid #292929; color: #aaa; font: 11px/1.3 var(--font-ui); }.product-prompt p { margin: 0 0 24px; color: #fff; font-weight: 600; }.product-prompt label { display: block; margin-bottom: 8px; }.product-input, .product-select { box-sizing: border-box; width: 100%; padding: 11px; border: 1px solid #373737; border-radius: 6px; background: #202020; color: #bdbdbd; line-height: 1.55; }.product-select { margin-top: 12px; color: #777; }.product-select b { float: right; color: #ddd; }.product-prompt button { width: 100%; margin-top: 16px; padding: 11px; border: 0; border-radius: 7px; background: #f69a22; color: #171717; font: 600 11px var(--font-ui); }
.product-stage { position: relative; overflow: hidden; min-width: 0; background: #101010; }.stage-grid { position: absolute; inset: 10% -15% -20%; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 25px 25px; transform: perspective(380px) rotateX(61deg); transform-origin: top; }.product-stage img { position: absolute; z-index: 1; right: 19%; bottom: -15%; width: 43%; mix-blend-mode: lighten; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }.stage-label, .stage-controls { position: absolute; z-index: 2; font: 10px var(--font-ui); color: rgba(255,255,255,.64); }.stage-label { top: 16px; right: 16px; }.stage-controls { bottom: 16px; left: 16px; padding: 7px 10px; border-radius: 6px; background: rgba(18,18,18,.8); }.stage-controls b { color: #fff; }
.product-assets { padding: 16px 12px; border-left: 1px solid #292929; color: #fff; background: #181818; }.assets-title { display: flex; justify-content: space-between; padding: 3px 4px 16px; border-bottom: 1px solid #292929; font: 600 12px var(--font-ui); }.assets-title span { color: #777; }.asset-row { display: flex; gap: 9px; align-items: center; margin-top: 13px; padding: 8px; border: 1px solid transparent; border-radius: 7px; }.asset-row:first-of-type { border-color: rgba(255,160,51,.5); background: #202020; }.asset-row > div { width: 42px; height: 42px; border-radius: 4px; background: linear-gradient(135deg, #6c5441, #2c2421); }.asset-row:nth-of-type(3) > div { background: linear-gradient(135deg, #6e81a5, #273041); }.asset-row p { margin: 0; font: 10px/1.5 var(--font-ui); }.asset-row small { color: #777; }
.product-timeline { grid-column: 2 / 4; position: relative; overflow: hidden; padding: 13px 18px; border-top: 1px solid #292929; background: #171717; }.timeline-ruler { display: flex; justify-content: space-between; color: #777; font: 9px var(--font-ui); }.timeline-track { position: relative; display: flex; gap: 7px; height: 49px; margin-top: 11px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }.timeline-track--sub { height: 34px; margin-top: 2px; }.playhead { position: absolute; z-index: 3; top: -2px; bottom: -7px; left: 36%; width: 1px; background: #ff9a1e; }.clip { display: block; box-sizing: border-box; min-width: 18%; padding: 7px; border-radius: 4px; color: rgba(255,255,255,.76); font: 9px var(--font-ui); }.clip--blue { background: #365b68; }.clip--green { background: #445c4c; }.clip--purple { background: #4e445f; }.clip--orange { background: #624633; }.clip--muted { min-width: 34%; background: #2c2c2c; }.clip.is-short { min-width: 22%; }
.case-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 115px 0; }.case-summary span { color: #777; font: 600 11px var(--font-ui); letter-spacing: .1em; }.case-summary h2 { margin: 18px 0; font-size: 21px; font-weight: 500; }.case-summary p { max-width: 310px; margin: 0; color: #6e6e6e; font-size: 15px; line-height: 1.65; }
.case-section { padding: 130px 0; }.case-section--split { display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; border-top: 1px solid #dcdcd8; }.case-section--split .case-kicker, .timeline-workflow .case-kicker { color: #777; }.case-section h2 { max-width: 760px; margin: 0; font-size: clamp(38px, 5vw, 66px); font-weight: 400; letter-spacing: -.055em; line-height: 1.02; }.case-copy { max-width: 560px; margin: 35px 0 0; color: #626262; font-size: 18px; line-height: 1.8; }
.timeline-anatomy { color: #fff; background: #151515; }.timeline-anatomy .case-kicker { color: rgba(255,255,255,.48); }.anatomy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 70px; background: #353535; }.anatomy-grid article { min-height: 250px; padding: 30px; background: #151515; }.anatomy-grid b { color: #4e83ff; font: 500 13px var(--font-ui); }.anatomy-grid h3 { margin: 65px 0 12px; font-size: 24px; font-weight: 400; }.anatomy-grid p { max-width: 230px; margin: 0; color: #aaa; font-size: 14px; line-height: 1.6; }
.timeline-workflow { display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; }.workflow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 68px; }.workflow-steps article { min-height: 150px; padding: 22px; border-top: 1px solid #222; }.workflow-steps span { color: #777; font: 11px var(--font-ui); }.workflow-steps h3 { margin: 30px 0 8px; font-size: 20px; font-weight: 500; }.workflow-steps p { margin: 0; color: #777; font-size: 14px; line-height: 1.55; }.workflow-steps i { color: #777; font-style: normal; }.case-outro { padding: 115px 0; color: #fff; background: #121212; }.case-outro a { color: #fff; font-size: clamp(44px, 7vw, 94px); font-weight: 400; letter-spacing: -.06em; }.case-outro a span { color: #4376ff; }
@media (max-width: 760px) { .case-nav-back { display: none; }.timeline-hero { padding-top: 120px; }.timeline-product { grid-template-columns: 42px 1fr; grid-template-rows: 42px 300px 172px; min-height: 0; height: auto; transform: none; }.product-topbar { padding: 0 10px; }.product-topbar span:not(.product-topbar__state), .product-topbar i { display: none; }.product-prompt, .product-assets { display: none; }.product-stage { grid-column: 2; }.product-timeline { grid-column: 2; padding: 10px; }.timeline-track { gap: 3px; }.clip { padding: 5px 3px; font-size: 7px; }.case-summary, .case-section--split, .timeline-workflow { grid-template-columns: 1fr; gap: 35px; padding-block: 76px; }.case-summary { gap: 42px; }.anatomy-grid { grid-template-columns: 1fr; margin-top: 42px; }.anatomy-grid article { min-height: 180px; }.anatomy-grid h3 { margin-top: 32px; }.workflow-steps { grid-template-columns: 1fr; margin-top: 42px; }.workflow-steps i { transform: rotate(90deg); justify-self: center; } }

/* Final portfolio/card overrides. */
.project-card__glass { display: none; }
.project-card__status { display: none; }
.project-card__body { grid-template-columns: 44px 1fr; }
.case-page--timeline .site-nav { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: rgba(255,255,255,.12); }
.timeline-hero h1 { max-width: 1040px; }
.product-stage img { mix-blend-mode: multiply; filter: contrast(1.08) brightness(1.15) drop-shadow(0 20px 30px rgba(0,0,0,.5)); }

/* Figma artboard renderer: every section preserves the original 1920×1080 composition. */
.figma-case-page { margin: 0; background: #141414; font-family: "Inter", "Noto Sans SC", sans-serif; }.figma-case { overflow: hidden; }.figma-artboard { position: relative; container-type: inline-size; width: min(1920px, 100vw); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; }.figma-stage { position: absolute; inset: 0; }.figma-stage h1, .figma-stage h2, .figma-stage h3, .figma-stage h4, .figma-stage p { margin: 0; }.figma-stage--cover { color: #fff; background: linear-gradient(180deg, #141414 51.759%, #1e3c8f 81.25%, #4376ff 100%); }.cover-ui { position: absolute; left: 37.9%; top: -1.57%; width: 82.81%; max-width: none; }.cover-title { position: absolute; left: 5%; top: 40.93%; width: 34.12%; }.cover-title h1 { font-size: 3.333cqw; font-weight: 600; line-height: 1.28; letter-spacing: -.05em; background: linear-gradient(100deg, #4376ff 13%, #00fffb 85%); -webkit-background-clip: text; color: transparent; }.cover-title p { margin: 1.8cqw 0 0 .22cqw; color: rgba(255,255,255,.5); font-size: .833cqw; }.cover-summary { position: absolute; top: 65.37%; width: 18.75%; }.cover-summary b { color: rgba(255,255,255,.38); font-size: .573cqw; letter-spacing: .08em; }.cover-summary h2 { margin-top: 1.04cqw; font-size: .938cqw; font-weight: 500; }.cover-summary p { margin-top: 1.25cqw; color: rgba(255,255,255,.62); font-size: .833cqw; line-height: 1.45; }.cover-summary--context { left: 5%; }.cover-summary--approach { left: 26.15%; }.cover-summary--outcome { left: 47.29%; }.cover-rule { position: absolute; top: 81.67%; width: 1px; height: 15.37%; background: rgba(255,255,255,.18); }.cover-rule--1 { left: 19.17%; }.cover-rule--2 { left: 40.31%; }.cover-rule--3 { left: 61.46%; }
.figma-stage--problem, .figma-stage--research { color: #fff; background: #141414; }.slide-kicker { position: absolute; top: 8.89%; left: 5%; color: #455dae; font-size: .729cqw; font-weight: 600; letter-spacing: .04em; }.slide-index { position: absolute; top: 8.89%; right: 5%; color: rgba(255,255,255,.45); font-size: .729cqw; font-weight: 500; }.slide-number { position: absolute; top: 1.67%; right: 4.17%; color: rgba(255,255,255,.04); font-size: 8.854cqw; font-weight: 700; line-height: 1; }.figma-stage--problem h2, .figma-stage--research h2 { position: absolute; top: 12.96%; left: 5%; color: #fff; font-size: 2.5cqw; font-weight: 500; letter-spacing: -.035em; }.slide-subtitle { position: absolute; top: 19.63%; left: 5.21%; color: rgba(255,255,255,.42); font-size: .833cqw; }.problem-ui { position: absolute; left: 28.13%; top: 31.67%; width: 51.56%; height: 52.5%; overflow: hidden; }.problem-ui img { width: 100%; height: 110.28%; object-fit: cover; object-position: top; transform: translateY(-10.27%); }.problem-line { position: absolute; left: 42.97%; width: 35.99%; height: 1px; background: rgba(255,255,255,.25); }.problem-line--1 { top: 49.91%; }.problem-line--2 { top: 69.63%; }.problem-callout { position: absolute; left: 81.35%; width: 11.88%; color: #fff; font: 400 .938cqw/1.56 "Noto Sans SC", sans-serif; }.problem-callout--1 { top: 48.7%; }.problem-callout--2 { top: 67.96%; }.problem-pills { position: absolute; top: 32.96%; left: 5.21%; display: grid; gap: .625cqw; justify-items: start; }.problem-pills p { margin-bottom: .15cqw; color: rgba(255,255,255,.6); font-size: 1.042cqw; }.problem-pills span { position: relative; display: block; box-sizing:border-box; height:2.917cqw; padding:.77cqw 1.25cqw; border-radius:999px; background:#314fa1; color:#fff; font-size:1.042cqw; line-height:1; }.problem-pills span img { position:absolute; left:3.82%; top:85.55%; width:.833cqw; height:.686cqw; transform:rotate(30deg); transform-origin:center; }.problem-pills span:nth-of-type(2) { margin-left: 1.5cqw; }.problem-pills span:nth-of-type(3) { margin-left: 3.4cqw; }.problem-pills span:nth-of-type(4) { margin-left: 1.15cqw; }.problem-pills span:nth-of-type(5) { margin-left: 2.2cqw; }.problem-pills span:nth-of-type(6) { margin-left: .8cqw; }
.figma-stage--research .slide-kicker { top: 7.59%; color: #4376ff; }.figma-stage--research .slide-index { top: 7.59%; }.figma-stage--research .slide-number { top: .74%; }.figma-stage--research h2 { top: 12.22%; }.figma-stage--research .slide-subtitle { top: 18.7%; color: rgba(255,255,255,.4); }.research-pill { position: absolute; top: 31.02%; height: 1.35cqw; padding: .18cqw 2.5cqw; border-radius: 999px; background: linear-gradient(90deg,#455dae,rgba(69,93,174,0)); color:#fff; font-size:.521cqw; font-weight:600; letter-spacing:.06em; line-height:1.35cqw; }.research-pill--product { left:6.35%; }.research-pill--user { left:50.52%; }.research-heading { position:absolute; top:30.65%; color:rgba(255,255,255,.7); font-size:1.25cqw; font-weight:500; }.research-heading--product { left:13.85%; }.research-heading--user { left:56.77%; }.research-item { position:absolute; width:15.63%; color:rgba(255,255,255,.42); font-size:.729cqw; line-height:1.55; }.research-item b { color:rgba(255,255,255,.6); font-size:.573cqw; }.research-item h4 { margin: .2cqw 0 1.15cqw 1.9cqw; color:#fff; font-size:1.56cqw; font-weight:500; line-height:1.35; }.research-item p { margin:0 0 .55cqw 1.9cqw; }.research-good { color:rgba(106,140,255,.95); }.research-item--1 { left:6.67%; top:40.83%; }.research-item--2 { left:29.74%; top:40.83%; }.research-visual { position:absolute; overflow:hidden; opacity:.3; }.research-visual--1 { left:11.56%; top:60.46%; width:18.23%; height:20.18%; }.research-visual--2 { left:29.74%; top:59.72%; width:16.61%; height:21.57%; opacity:.5; }.research-visual img { width:100%; height:100%; object-fit:cover; }.research-user-copy { position:absolute; left:50.52%; top:48.24%; width:37%; color:rgba(255,255,255,.62); font-size:.729cqw; line-height:1.6; }.research-user-copy p { margin-bottom:2.6cqw; }.research-user-copy b { display:block; color:#6a8cff; font-size:.729cqw; }.research-user-copy small { display:block; margin: .7cqw 0 0 2.5cqw; color:rgba(255,255,255,.46); font-size:.677cqw; }
@media (max-width: 760px) { .figma-artboard { min-width: 720px; margin-left: 0; transform-origin: left top; } .figma-case { overflow-x: auto; } }

/* Figma case studies: one native 1920 × 1080 canvas per source frame.
   Static frames remain a single Figma export so vector geometry cannot drift. */
.figma-case--slides { width: 100%; overflow: hidden; }
.figma-case--slides.is-deck {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  padding: 78px 64px 54px;
  background: #090909;
}
.figma-case--slides.is-deck.is-entering { opacity: 0; }
.figma-case--slides.is-deck .figma-artboard {
  display: none;
  /* Anchor each frame to the viewport, not the padded deck. The deck's
     horizontal padding previously shifted the containing block left, so a
     hash entry could render the active frame against the left edge. */
  position: fixed;
  z-index: 1;
  top: 50vh;
  left: 50vw;
  width: min(1280px, calc(100vw - 128px));
  max-height: calc(100vh - 132px);
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 24px 90px rgb(0 0 0 / 48%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.94);
  transform-origin: center;
  transition: transform 720ms cubic-bezier(.22, 1, .36, 1), opacity 480ms ease;
  will-change: transform, opacity;
}
.figma-case--slides.is-deck .figma-artboard[data-deck-visible] {
  display: block;
}
.figma-case--slides.is-deck .figma-artboard.is-active {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.figma-case--slides.is-deck .figma-artboard.is-prev,
.figma-case--slides.is-deck .figma-artboard.is-next {
  z-index: 2;
  opacity: .5;
  cursor: pointer;
  filter: saturate(.86);
}
.figma-case--slides.is-deck .figma-artboard.is-prev { transform: translate(calc(-50% - 70vw), -50%) scale(.88); }
.figma-case--slides.is-deck .figma-artboard.is-next { transform: translate(calc(-50% + 70vw), -50%) scale(.88); }
.figma-case--slides.is-deck .figma-artboard.is-active > img:first-child { border-radius: inherit; }
.case-deck-controls {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  color: rgb(254 254 254 / 80%);
  font-family: var(--font-ui);
}
.case-deck__home {
  position: absolute;
  top: 22px;
  left: 28px;
  pointer-events: auto;
  padding: 8px 14px;
  border-radius: 999px;
  color: rgb(254 254 254 / 72%);
  background: rgb(254 254 254 / 8%);
  font-size: 13px;
}
.case-deck__pager {
  position: absolute;
  right: 28px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}
.case-deck__button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  color: rgb(254 254 254 / 80%);
  background: rgb(254 254 254 / 8%);
  cursor: pointer;
}
.case-deck__button:hover { background: rgb(254 254 254 / 14%); }
.case-deck__pager span {
  min-width: 58px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgb(254 254 254 / 56%);
}
.case-project-nav {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 152px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: auto;
}
.case-project-nav__item {
  position: relative;
  width: 32px;
  flex: 0 0 32px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: width 480ms cubic-bezier(.22, 1, .36, 1), flex-basis 480ms cubic-bezier(.22, 1, .36, 1);
}
.case-project-nav.has-active .case-project-nav__item.is-active {
  width: 64px;
  flex-basis: 64px;
}
.case-project-nav.has-active .case-project-nav__item:not(.is-active) {
  width: calc((100% - 88px) / 3);
  flex-basis: calc((100% - 88px) / 3);
}
.case-project-nav__item span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: rgb(254 254 254 / 60%);
  transition: background-color 220ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}
.case-project-nav__item:hover span,
.case-project-nav__item:focus-visible span,
.case-project-nav__item.is-active span { background: rgb(254 254 254 / 90%); }
.case-project-nav__item.is-active span { transform: none; }
.case-project-nav__item::after {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 2;
  width: max-content;
  max-width: 280px;
  padding: 7px 10px;
  border-radius: 7px;
  color: rgb(254 254 254 / 90%);
  background: rgb(20 20 20 / 94%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 30%);
  content: attr(data-tooltip);
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.case-project-nav__item:hover::after,
.case-project-nav__item:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Project pages share the same top bar as the home page. */
.figma-case-page .site-nav--case {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  color: rgb(254 254 254 / 88%);
  border-bottom-color: rgb(254 254 254 / 5%);
  background: rgb(12 12 12 / 50%);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.figma-case-page .site-nav--case .brand,
.figma-case-page .site-nav--case .nav-links a { color: rgb(254 254 254 / 88%); }
.figma-case-page .site-nav--case .brand {
  width: auto;
  min-width: 0;
  gap: 10px;
  padding: 0;
  white-space: nowrap;
  font: 400 var(--text-lead) / 1 var(--font-ui);
}
.figma-case-page .site-nav--case .nav-links { gap: 8px; }
.figma-case-page .site-nav--case .nav-links a {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  color: rgb(254 254 254 / 60%);
  font-weight: 400;
  transition: background-color 160ms ease, color 160ms ease;
}
.figma-case-page .site-nav--case .nav-links a:hover { background: rgb(254 254 254 / 8%); color: rgb(254 254 254 / 90%); }
.figma-case-page .site-nav--case .nav-links a[aria-current="page"] { border: 0; background: rgb(254 254 254 / 5%); color: rgb(254 254 254 / 90%); font-weight: 600; }
.figma-case-page .site-nav--case .language-switch {
  border-color: var(--vv-color-border-subtle);
  background: rgb(254 254 254 / 5%);
}
.figma-case-page .site-nav--case .language-switch button { color: var(--vv-color-text-tertiary); }
.figma-case-page .site-nav--case .language-switch button[aria-pressed="true"] {
  color: var(--vv-color-text-primary);
  background: transparent;
  box-shadow: none;
}
.figma-case-page .case-deck__home { display: none; }
.project-brand-avatar {
  display: inline-flex;
  width: 48px;
  height: 48px;
  overflow: hidden;
  flex: 0 0 48px;
  border-radius: 0;
}
.project-brand-avatar > span,
.project-brand-avatar svg,
.project-brand-avatar canvas { display: block; width: 48px !important; height: 48px !important; }
.figma-case-page .figma-case--slides.is-deck { padding-top: 78px; }
@media (max-width: 760px) {
  .figma-case--slides.is-deck { padding: 68px 14px 72px; }
  .figma-case--slides.is-deck .figma-artboard { top: 68px; width: 100%; min-width: 0; border-radius: 12px; }
  .figma-case--slides.is-deck .figma-artboard.is-prev,
  .figma-case--slides.is-deck .figma-artboard.is-next { display: none; }
  .case-deck__home { top: 14px; left: 14px; }
  .case-deck__pager { right: 14px; bottom: 14px; }
  .figma-case-page .figma-case--slides.is-deck { padding-top: 68px; }
}
@media (max-width: 760px) {
  .figma-case--slides.is-deck {
    position: relative;
    inset: auto;
    min-height: 0;
    padding: 80px 0 0;
    overflow: visible;
  }
  .figma-case--slides.is-deck .figma-artboard,
  .figma-case--slides.is-deck .figma-artboard[data-deck-visible] {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: min(1920px, 100vw);
    min-width: 0;
    max-height: none;
    margin: 0 auto 24px;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
    filter: none;
  }
  .project-rail__caption { display: none; }
  .project-rail__caption h2 { white-space: normal; text-wrap: balance; }
  .figma-case--slides.is-deck .figma-artboard.is-prev,
  .figma-case--slides.is-deck .figma-artboard.is-next { cursor: default; }
  .case-deck__pager { display: none; }
  .case-project-nav { display: none; }
}
.figma-artboard--export { background: #141414; }
.figma-artboard--export > img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Dynamic Figma media stays isolated from the static 1920 × 1080 export.
   Slide 16 coordinates: x 751, y 324, w 1073, h 546. Figma uses an IMAGE
   fill in FILL mode, which maps to an HTML cover crop rather than stretching. */
.figma-artboard--timeline-gif > img:first-child { position: relative; z-index: 0; }
.figma-artboard--timeline-gif > .figma-artboard__media { position: absolute; z-index: 2; left: 39.1146%; top: 30%; display: block; width: 55.8854%; height: 50.5556%; max-width: none; object-fit: cover; object-position: center; }
.figma-artboard--tool-discovery-gifs > img:first-child { position: relative; z-index: 0; }
.figma-artboard--tool-discovery-gifs > .figma-artboard__media { position: absolute; z-index: 2; display: block; max-width: none; object-fit: cover; object-position: center; }
.figma-artboard--tool-discovery-gifs > .figma-artboard__media--left { left: 9.4271%; top: 28.7963%; width: 38.125%; height: 41.1111%; }
.figma-artboard--tool-discovery-gifs > .figma-artboard__media--right { left: 52.2917%; top: 28.8889%; width: 37.9688%; height: 40.9259%; }
.figma-artboard--timeline-media > img:first-child { position: relative; z-index: 0; }
.figma-artboard--timeline-media > .figma-artboard__media { position: absolute; z-index: 2; display: block; max-width: none; object-fit: cover; object-position: center; }
.figma-artboard--timeline-media--48 > .figma-artboard__media { left: 19.2805%; top: 30.1155%; width: 60.8976%; height: 61.5267%; }
.figma-artboard--timeline-media--57 > .figma-artboard__media { left: 26.2083%; top: 40.55%; width: 47.1756%; height: 48.055%; }
.figma-artboard--timeline-media--58 > .figma-artboard__media { left: 31.68%; top: 25.635%; width: 62.0968%; height: 63.2543%; }
.figma-artboard--timeline-media--62 > .figma-artboard__media { left: 5%; top: 33.7037%; width: 31.25%; height: 103.2407%; }
.figma-artboard--timeline-media--64 > .figma-artboard__media { left: 30.1042%; top: 40.5556%; width: 39.8438%; height: 40%; }
.figma-artboard--timeline-media--65 > .figma-artboard__media { left: 32.3438%; top: 40.463%; width: 35.3125%; height: 40.0926%; }
.figma-artboard--timeline-media--60 > .figma-artboard__media { left: 73.4896%; top: 17.2222%; width: 19.0625%; height: 73.8889%; border-radius: 2.9167cqw; }
.figma-artboard--timeline-media--68 > .figma-artboard__media { top: 19.4444%; width: 22.6563%; height: 68.1481%; object-position: center bottom; clip-path: inset(0 0 6.088% 0); }
.figma-artboard--timeline-media--68 > .figma-artboard__media--music { left: 29.9479%; }
.figma-artboard--timeline-media--68 > .figma-artboard__media--image { left: 52.1875%; }
.figma-artboard--timeline-media--68 > .figma-artboard__media--location { left: 74.4271%; }
.figma-stage--model { color:#fff; background:#141414; }.model-background { position:absolute; top:-.09%; left:21.85%; width:56.3%; height:100.1%; object-fit:cover; transform:rotate(-90deg); opacity:.6; }.figma-stage--model .slide-kicker { top:8.89%; }.figma-stage--model .slide-index { top:8.89%; }.figma-stage--model .slide-number { top:1.67%; }.figma-stage--model h2 { position:absolute; top:12.96%; left:5%; font-size:2.5cqw; font-weight:500; letter-spacing:-.035em; }.figma-stage--model .slide-subtitle { top:19.63%; }.model-flow { position:absolute; display:flex; align-items:center; justify-content:space-between; left:5%; top:39.81%; width:89.48%; }.model-flow article { box-sizing:border-box; width:13.54%; height:10.42cqw; padding:1.15cqw 1.04cqw; border:1px solid #7df6fd; border-radius:.94cqw; }.model-flow article i { display:block; width:2.19cqw; height:1.77cqw; border-radius:999px; background:rgba(255,255,255,.1); color:rgba(255,255,255,.68); text-align:center; font:500 .625cqw/1.77cqw Inter,sans-serif; font-style:normal; }.model-flow article b { display:block; margin-top:1.2cqw; color:rgba(255,255,255,.38); font-size:.625cqw; }.model-flow article h3 { margin:.85cqw 0 0; font:600 1.042cqw/1.55 "Noto Sans SC",sans-serif; }.model-flow article.is-focus { background:rgba(67,118,255,.25); box-shadow:0 0 2.3cqw rgba(125,246,253,.28); }.model-flow article.is-focus i { background:rgba(67,118,255,.6); color:#fff; }.model-flow > img { width:5.79%; height:7.07cqw; object-fit:contain; transform:scaleY(-1); }.model-conclusion { position:absolute; top:66.67%; left:50%; width:85%; transform:translateX(-50%); color:#fff; text-align:center; font:500 1.667cqw/1.45 "Noto Sans SC",sans-serif; }
.problem-pills span { margin-left:0 !important; }
.problem-pills span img { left:.1115cqw; top:2.495cqw; width:.8333cqw; height:.6862cqw; }
.model-background { top:-.09%; left:50%; width:56.3%; height:200.18%; object-fit:cover; transform:translateX(-50%) rotate(-90deg); transform-origin:center; }