:root {
  --bg: #fbfbf7;
  --ink: #121417;
  --muted: #868b93;
  --line: rgba(20, 24, 30, 0.11);
  --line-strong: rgba(20, 24, 30, 0.22);
  --blue: #2f72ff;
  --cyan: #56b6ff;
  --green: #16b986;
  --violet: #6e68ff;
  --gold: #d9a52d;
  --card: rgba(255, 255, 255, 0.72);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  overflow-x: hidden;
}

.opening-intro {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: block;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 680ms ease,
    visibility 680ms ease;
  visibility: hidden;
}

.opening-active .opening-intro {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.opening-intro.is-exiting {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.opening-word-wheel {
  --opening-word-gap: clamp(56px, 6.8vw, 78px);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent calc(50% - clamp(52px, 6vw, 68px)),
    #000 calc(50% - clamp(36px, 4.5vw, 48px)),
    #000 calc(50% + clamp(36px, 4.5vw, 48px)),
    transparent calc(50% + clamp(52px, 6vw, 68px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent calc(50% - clamp(52px, 6vw, 68px)),
    #000 calc(50% - clamp(36px, 4.5vw, 48px)),
    #000 calc(50% + clamp(36px, 4.5vw, 48px)),
    transparent calc(50% + clamp(52px, 6vw, 68px)),
    transparent 100%
  );
}

.opening-word-wheel::before {
  content: "";
  position: absolute;
  top: calc(50% - clamp(18px, 2.5vw, 26px));
  left: 50%;
  width: clamp(118px, 17vw, 210px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(18, 20, 23, 0.22), transparent);
  transform: translateX(-50%);
}

.opening-word-wheel::after {
  content: "";
  position: absolute;
  top: calc(50% + clamp(18px, 2.5vw, 26px));
  left: 50%;
  width: clamp(118px, 17vw, 210px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(18, 20, 23, 0.22), transparent);
  transform: translateX(-50%);
}

.opening-word-wheel span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(18, 20, 23, 0.42);
  font-size: clamp(1.05rem, 1.7vw, 1.42rem);
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  opacity: var(--word-opacity, 0.14);
  filter: blur(var(--word-blur, 1.4px));
  transform:
    translate(
      -50%,
      calc(-50% + var(--slot, 0) * var(--opening-word-gap))
    )
    scale(var(--word-scale, 0.92));
  transition:
    color 90ms ease,
    filter 90ms ease,
    opacity 90ms ease,
    transform 90ms ease;
  will-change: transform, opacity, filter;
}

.opening-word-wheel span.is-active {
  color: var(--blue);
  font-weight: 720;
  text-shadow: 0 0 26px rgba(47, 114, 255, 0.32);
}

.opening-label {
  top: calc(50% - clamp(74px, 9vh, 100px));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
}

.opening-label-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--blue);
  animation: system-dot-flash 2.4s ease-in-out infinite;
}

.route-transition {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  background: rgba(251, 251, 247, 0.48);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 560ms ease,
    visibility 560ms ease;
  visibility: hidden;
}

.route-transition-active .route-transition {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.route-transition.is-exiting {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.route-transition-flowers {
  position: relative;
  width: clamp(118px, 15vw, 172px);
  height: clamp(86px, 11vw, 124px);
}

.route-transition-flower {
  --route-flower-size: 28px;
  --route-flower-color: var(--blue);
  --route-flower-glow: rgba(47, 114, 255, 0.2);
  --route-flower-duration: 1.15s;
  --route-flower-direction: normal;
  position: absolute;
  width: var(--route-flower-size);
  height: var(--route-flower-size);
  opacity: 0.84;
  transform: translate(-50%, -50%);
}

.route-transition-flower::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--route-flower-color);
  -webkit-mask: var(--orbit-mask) center / contain no-repeat;
  mask: var(--orbit-mask) center / contain no-repeat;
  filter: drop-shadow(0 0 9px var(--route-flower-glow));
  animation: route-flower-spin var(--route-flower-duration) linear infinite;
  animation-direction: var(--route-flower-direction);
}

.route-transition-flower-a {
  --route-flower-size: clamp(28px, 3.4vw, 42px);
  --route-flower-color: var(--blue);
  --route-flower-glow: rgba(47, 114, 255, 0.22);
  --route-flower-duration: 1.08s;
  top: 50%;
  left: 50%;
}

.route-transition-flower-b {
  --route-flower-size: clamp(21px, 2.55vw, 32px);
  --route-flower-color: var(--green);
  --route-flower-glow: rgba(22, 185, 134, 0.2);
  --route-flower-duration: 1.32s;
  --route-flower-direction: reverse;
  top: 66%;
  left: 28%;
}

.route-transition-flower-c {
  --route-flower-size: clamp(17px, 2vw, 25px);
  --route-flower-color: var(--cyan);
  --route-flower-glow: rgba(86, 182, 255, 0.2);
  --route-flower-duration: 0.94s;
  top: 32%;
  left: 73%;
}

.route-transition-active body {
  overflow: hidden;
}

.opening-active body {
  overflow: hidden;
}

.page-background,
.particle-layer,
.site-header,
main,
.hero > :not(.corner) {
  transition:
    opacity 720ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.opening-active body > .particle-layer,
.opening-active body > .site-header,
.opening-active body > main {
  opacity: 0;
}

.opening-active body > .site-header,
.route-transition-active body > .site-header,
.screen-entering:not(.screen-nav-in) body > .site-header {
  transform: translateY(-100%);
}

.screen-entering:not(.screen-content-in) body > .particle-layer,
.screen-entering:not(.screen-content-in) .hero > :not(.corner) {
  opacity: 0;
}

.screen-entering .corner {
  opacity: 0;
  transform:
    translate(var(--corner-enter-x, 0), var(--corner-enter-y, 0))
    rotate(var(--corner-rotate, 0deg))
    scale(0.3);
}

.screen-corners-in .corner {
  opacity: 0.22;
  transform:
    translate(0, 0)
    rotate(var(--corner-rotate, 0deg))
    scale(1);
}

.system-label.is-dot-flashing::before {
  animation: system-dot-flash 980ms steps(1, end) 120ms 1;
}

.page-background {
  --grid-size: clamp(36px, 5.2vw, 72px);
  --grid-scroll-y: 0px;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 60%, rgba(0, 0, 0, 0.72) 74%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 0 60%, rgba(0, 0, 0, 0.72) 74%, transparent 100%);
  -webkit-mask-size: 100vw 100svh;
  mask-size: 100vw 100svh;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  mask-position: top center;
  backface-visibility: hidden;
  contain: layout paint style;
  transform: translateZ(0);
  will-change: transform;
}

.page-background::after {
  content: "";
  position: absolute;
  /* one extra tile at the bottom: the layer translates up by at most one
     tile (JS wraps the offset), so the pattern stays seamless */
  inset: 0 0 calc(-1 * var(--grid-size));
  z-index: 1;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size);
  transform: translate3d(0, var(--grid-scroll-y), 0);
  opacity: 0.42;
}

.grainient-field {
  position: absolute;
  inset: -34%;
  z-index: 0;
  background:
    radial-gradient(ellipse at 8% 18%, rgba(168, 200, 103, 0.36) 0 18%, rgba(168, 200, 103, 0.13) 34%, transparent 58%),
    radial-gradient(ellipse at 86% 14%, rgba(177, 217, 220, 0.38) 0 18%, rgba(177, 217, 220, 0.14) 36%, transparent 60%),
    radial-gradient(ellipse at 48% 46%, rgba(246, 229, 175, 0.82) 0 18%, rgba(246, 229, 175, 0.28) 38%, transparent 62%),
    radial-gradient(ellipse at 84% 78%, rgba(134, 197, 202, 0.34) 0 20%, rgba(134, 197, 202, 0.12) 40%, transparent 64%),
    radial-gradient(ellipse at 18% 86%, rgba(243, 203, 139, 0.32) 0 18%, rgba(243, 203, 139, 0.12) 38%, transparent 64%),
    linear-gradient(118deg, rgba(255, 255, 255, 0.88), rgba(168, 200, 103, 0.14), rgba(246, 229, 175, 0.16), rgba(134, 197, 202, 0.13), rgba(255, 255, 255, 0.82));
  background-size:
    132% 126%,
    138% 130%,
    116% 116%,
    134% 128%,
    128% 134%,
    100% 100%;
  background-position:
    0% 8%,
    100% 6%,
    48% 50%,
    92% 86%,
    4% 94%,
    center;
  filter: saturate(1.08) contrast(1.14) blur(36px);
  mix-blend-mode: normal;
  opacity: 0.5;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1.16);
  transform-origin: 50% 50%;
  animation: grainient-flow 6.8s ease-in-out infinite alternate;
  backface-visibility: hidden;
  contain: paint;
  will-change: transform;
}

.grainient-field::before,
.grainient-field::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
}

.grainient-field::before {
  background:
    conic-gradient(from 0deg at 50% 50%, rgba(246, 229, 175, 0.38), rgba(168, 200, 103, 0.16), rgba(177, 217, 220, 0.18), rgba(134, 197, 202, 0.16), rgba(243, 203, 139, 0.18), rgba(246, 229, 175, 0.38));
  filter: blur(42px);
  opacity: 0.3;
  animation: grainient-warp 9s ease-in-out infinite alternate;
}

.grainient-field::after {
  background-image: url("../images/noise.jpg");
  background-size: 220px 220px;
  opacity: 0.08;
  mix-blend-mode: soft-light;
}

/* transform-only: animating background-position forced a full repaint of a
   blur(36px)-filtered, 168%-viewport element every frame, on every page */
@keyframes grainient-flow {
  0% {
    transform: translate3d(-4.5%, -3%, 0) rotate(-4deg) scale(1.16);
  }

  50% {
    transform: translate3d(3.8%, 2.8%, 0) rotate(5deg) scale(1.19);
  }

  100% {
    transform: translate3d(2.6%, -3.4%, 0) rotate(-6deg) scale(1.18);
  }
}

@keyframes grainient-warp {
  0% {
    transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1);
  }

  50% {
    transform: translate3d(4%, 3.2%, 0) rotate(22deg) scale(1.06);
  }

  100% {
    transform: translate3d(2.8%, -4%, 0) rotate(-20deg) scale(1.04);
  }
}

.particle-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backface-visibility: hidden;
  contain: paint;
  transform: translateZ(0);
}

.particle-layer canvas {
  display: block;
  width: 100vw;
  height: 100svh;
  pointer-events: none;
}

button,
a {
  font: inherit;
}

main {
  position: relative;
  z-index: 2;
  isolation: isolate;
}

.hover-flower-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 100%;
  pointer-events: none;
}

.falling-text-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  min-height: 100%;
  overflow: visible;
  pointer-events: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  height: 58px;
  padding: 0 clamp(14px, 3vw, 42px);
  border-bottom: 1px solid rgba(20, 24, 30, 0.035);
  background: rgba(251, 251, 247, 0.3);
  backdrop-filter: blur(22px) saturate(1.14);
}

.brand {
  color: var(--ink);
  text-decoration: none;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0;
}

.site-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(14px, 2.8vw, 42px);
  height: 100%;
}

.site-nav button,
.site-nav a {
  appearance: none;
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(18, 20, 23, 0.62);
  cursor: pointer;
  font-size: 0.93rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav button::after,
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--ink);
  opacity: 0;
  transform: scaleX(0.28);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.site-nav button:hover,
.site-nav button.is-active,
.site-nav a:hover,
.site-nav a.is-active {
  color: var(--ink);
}

.site-nav button.is-active::after,
.site-nav a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: 86px clamp(20px, 5vw, 78px) 50px;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero,
.intro-panel,
.work-machine,
.section-panel {
  scroll-margin-top: 58px;
}

.grid-field {
  display: none;
}

.grid-field::after {
  content: none;
}

.corner {
  --corner-rotate: 0deg;
  --corner-enter-x: 0;
  --corner-enter-y: 0;
  position: fixed;
  z-index: 1;
  pointer-events: none;
  width: 42px;
  height: 42px;
  opacity: 0.22;
  transform: translate(0, 0) rotate(var(--corner-rotate));
  transition:
    opacity 560ms ease,
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.corner::before,
.corner::after {
  content: "";
  position: absolute;
  background: var(--ink);
}

.corner::before {
  width: 2px;
  height: 100%;
}

.corner::after {
  width: 100%;
  height: 2px;
}

.corner-tl {
  --corner-enter-x: calc(50vw - clamp(22px, 4vw, 72px) - 21px);
  --corner-enter-y: calc(50svh - 94px - 21px);
  top: 94px;
  left: clamp(22px, 4vw, 72px);
}

.corner-tr {
  --corner-rotate: 90deg;
  --corner-enter-x: calc(-50vw + clamp(22px, 4vw, 72px) + 21px);
  --corner-enter-y: calc(50svh - 94px - 21px);
  top: 94px;
  right: clamp(22px, 4vw, 72px);
}

.corner-bl {
  --corner-rotate: -90deg;
  --corner-enter-x: calc(50vw - clamp(22px, 4vw, 72px) - 21px);
  --corner-enter-y: calc(-50svh + 46px + 21px);
  bottom: 46px;
  left: clamp(22px, 4vw, 72px);
}

.corner-br {
  --corner-rotate: 180deg;
  --corner-enter-x: calc(-50vw + clamp(22px, 4vw, 72px) + 21px);
  --corner-enter-y: calc(-50svh + 46px + 21px);
  right: clamp(22px, 4vw, 72px);
  bottom: 46px;
}

.system-label {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: rgba(90, 101, 116, 0.46);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: clamp(0.65rem, 1vw, 0.86rem);
  letter-spacing: 0;
  text-transform: uppercase;
}

.label-ready {
  top: 27%;
  left: 12%;
}

.label-ready::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--blue);
  vertical-align: middle;
}

.label-stack {
  top: calc(100% + 16px);
  right: clamp(-190px, -11vw, -118px);
  left: auto;
  color: rgba(90, 101, 116, 0.42);
  transform: rotate(-1.5deg);
}

.label-stack::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 7px;
  border-radius: 999px;
  background: rgba(47, 114, 255, 0.68);
  vertical-align: middle;
}

@keyframes system-dot-flash {
  0%,
  100% {
    background: rgba(47, 114, 255, 0.68);
    box-shadow: none;
    opacity: 1;
  }

  10%,
  34% {
    background: rgba(47, 114, 255, 1);
    box-shadow: 0 0 12px rgba(47, 114, 255, 0.52);
    opacity: 1;
  }

  24%,
  48% {
    background: rgba(22, 185, 134, 1);
    box-shadow: 0 0 12px rgba(22, 185, 134, 0.48);
    opacity: 1;
  }

  62% {
    background: rgba(47, 114, 255, 0.34);
    box-shadow: none;
    opacity: 0.46;
  }
}

.particle-stage {
  position: relative;
  z-index: 1;
  width: min(100%, 1220px);
  height: clamp(260px, 35vw, 470px);
  margin-top: 12px;
  cursor: crosshair;
  pointer-events: none;
}

.orbit-dot {
  --orbit-size: 14px;
  --orbit-top: 24%;
  --orbit-left: 74%;
  --orbit-opacity: 0.5;
  --orbit-duration: 1.2s;
  --orbit-direction: normal;
  --orbit-angle: 0deg;
  --orbit-color: var(--blue);
  --orbit-glow: rgba(47, 114, 255, 0.18);
  position: absolute;
  top: var(--orbit-top);
  left: var(--orbit-left);
  z-index: 4;
  width: var(--orbit-size);
  height: var(--orbit-size);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  rotate: var(--orbit-angle);
  transition:
    opacity 1300ms ease,
    transform 1300ms ease;
}

.orbit-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  color: var(--orbit-color);
  background: currentColor;
  -webkit-mask: var(--orbit-mask) center / contain no-repeat;
  mask: var(--orbit-mask) center / contain no-repeat;
  filter: drop-shadow(0 0 7px var(--orbit-glow));
  animation: orbit-spin var(--orbit-duration) linear infinite;
  animation-direction: var(--orbit-direction);
}

.orbit-dot.is-visible {
  opacity: var(--orbit-opacity);
  transform: translate(-50%, -50%) scale(1);
  transition-duration: 90ms;
}

.orbit-dot-spark::before {
  --orbit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23000' points='50,0 58,34 92,8 66,42 100,50 66,58 92,92 58,66 50,100 42,66 8,92 34,58 0,50 34,42 8,8 42,34'/%3E%3C/svg%3E");
}

.orbit-dot-daisy::before {
  --orbit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cellipse cx='50' cy='20' rx='15' ry='25'/%3E%3Cellipse cx='50' cy='20' rx='15' ry='25' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='15' ry='25' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='15' ry='25' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='15' ry='25' transform='rotate(288 50 50)'/%3E%3Ccircle cx='50' cy='50' r='13'/%3E%3C/g%3E%3C/svg%3E");
}

.orbit-dot-clover::before {
  --orbit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cellipse cx='50' cy='30' rx='16' ry='20'/%3E%3Cellipse cx='50' cy='30' rx='16' ry='20' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='16' ry='20' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='16' ry='20' transform='rotate(270 50 50)'/%3E%3Ccircle cx='50' cy='50' r='11'/%3E%3C/g%3E%3C/svg%3E");
}

.orbit-dot-ring::before {
  --orbit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Ccircle cx='50' cy='10' r='8'/%3E%3Ccircle cx='78' cy='22' r='8'/%3E%3Ccircle cx='90' cy='50' r='8'/%3E%3Ccircle cx='78' cy='78' r='8'/%3E%3Ccircle cx='50' cy='90' r='8'/%3E%3Ccircle cx='22' cy='78' r='8'/%3E%3Ccircle cx='10' cy='50' r='8'/%3E%3Ccircle cx='22' cy='22' r='8'/%3E%3Ccircle cx='50' cy='50' r='9'/%3E%3C/g%3E%3C/svg%3E");
}

.orbit-dot-bloom::before {
  --orbit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cellipse cx='50' cy='30' rx='8' ry='19'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9'/%3E%3C/g%3E%3C/svg%3E");
}

@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes route-flower-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
  margin: clamp(-116px, -7.8vw, -70px) auto 0;
  text-align: center;
}

.eyebrow {
  margin: 0 0 12px;
  color: rgba(90, 101, 116, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.hero-copy h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.hero-copy p:last-child {
  margin: 0 auto;
  max-width: 680px;
  color: rgba(18, 20, 23, 0.48);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 450;
  line-height: 1.45;
}

.type-target {
  white-space: pre-wrap;
}

.type-target.is-typing::after,
.type-target.has-cursor::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.08em;
  margin-left: 7px;
  background: var(--blue);
  vertical-align: -0.16em;
  animation: type-cursor-blink 1s steps(1, end) infinite;
}

.intro-title .type-target.is-typing::after,
.intro-title .type-target.has-cursor::after {
  content: none;
}

.eyebrow.type-target {
  min-height: 1em;
}

.hero-copy p:last-child.type-target {
  min-height: 2.95em;
}

.scroll-fade-text {
  opacity: var(--scroll-fade-opacity, 1);
  transition: opacity 80ms linear;
  will-change: opacity;
}

.falling-text-trigger {
  cursor: pointer;
}

.falling-source-hidden {
  opacity: 0 !important;
}

.falling-word {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-block;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 12px 24px rgba(18, 20, 23, 0.08);
  will-change: transform;
}

.falling-word.is-title {
  color: var(--ink) !important;
}

.falling-word.is-copy {
  color: rgba(18, 20, 23, 0.48) !important;
}

.scrambled-text-trigger {
  cursor: pointer;
}

.scrambled-char {
  display: inline-block;
  min-width: 0.16ch;
  will-change: contents;
}

.scrambled-char.is-scrambling {
  color: rgba(47, 114, 255, 0.64);
}

@keyframes type-cursor-blink {
  50% {
    opacity: 0;
  }
}

.scroll-cue,
.hover-text-cue {
  appearance: none;
  position: absolute;
  z-index: 2;
  bottom: 42px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(18, 20, 23, 0.11);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(18, 20, 23, 0.58);
  box-shadow: 0 14px 40px rgba(18, 20, 23, 0.05);
  cursor: pointer;
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  transform: translateX(-50%);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.hover-text-cue {
  z-index: 4;
  top: calc(50% + clamp(26px, 4vh, 48px));
  bottom: auto;
  left: calc(50% + clamp(218px, 22vw, 336px));
  margin: 0;
  cursor: default;
  pointer-events: none;
  transform: none;
}

.hero.is-leaving .scroll-cue {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
}

.intro-panel.has-hovered-text .hover-text-cue {
  opacity: 0;
  transform: translateY(-8px);
}

.scroll-cue::after {
  content: "";
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(18, 20, 23, 0.38);
  border-bottom: 2px solid rgba(18, 20, 23, 0.38);
  transform: translateX(-50%) rotate(45deg);
}

.intro-panel {
  --intro-flower-opacity: 0;
  --intro-static-flower-opacity: 0;
  --intro-title-opacity: 1;
  --intro-text-reveal: 0;
  --intro-content-shift: clamp(116px, 18.4vh, 166px);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(112px, 12vh, 132px) clamp(22px, 8vw, 130px) clamp(84px, 11vh, 124px);
  background: transparent;
  isolation: isolate;
  overflow: visible;
  text-align: center;
}

.intro-title {
  position: relative;
  z-index: 3;
  width: min(100%, 480px);
  opacity: calc(var(--intro-title-opacity) * var(--intro-text-reveal));
  transform: translateY(var(--intro-content-shift));
  will-change: opacity;
}

.intro-title h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(3.25rem, 4.45vw, 4rem);
  line-height: 1.085;
  letter-spacing: 0;
  font-weight: 450;
  white-space: nowrap;
}

.intro-title h2.type-target {
  min-height: 1.1em;
}

.intro-copy {
  position: relative;
  z-index: 3;
  width: min(100%, 680px);
  margin-top: clamp(32px, 4.2vh, 46px);
  opacity: var(--intro-text-reveal);
  transform: translateY(var(--intro-content-shift));
  transition: opacity 120ms linear;
}

.intro-copy p {
  margin: 0;
  color: rgba(18, 20, 23, 0.48);
  font-size: clamp(1rem, 1.32vw, 1.22rem);
  font-weight: 450;
  line-height: 1.45;
}

.intro-copy p.type-target {
  min-height: 4.35em;
}

.intro-copy .intro-note {
  margin-top: 26px;
  color: rgba(18, 20, 23, 0.48);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  font-weight: 450;
  line-height: 1.45;
}

.intro-copy .intro-note.type-target {
  min-height: 1.45em;
}

.intro-role-line {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 550;
  line-height: 1.2;
}

.intro-role {
  color: rgba(90, 101, 116, 0.62);
}

.intro-role::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.02em;
  margin-left: 5px;
  background: var(--blue);
  vertical-align: -0.14em;
  animation: type-cursor-blink 1s steps(1, end) infinite;
}

.intro-bio.type-target {
  min-height: 4.35em;
}

.intro-flower {
  --orbit-mask: none;
  position: absolute;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
  will-change: opacity, transform;
}

.intro-flower::before {
  content: none;
}

.intro-flower::after {
  content: none;
}

.intro-flower-cloud {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 50% 50%;
  rotate: var(--intro-flower-rotation, 0deg);
  will-change: rotate;
}

.intro-panel.has-canvas-formed-flowers .intro-flower-cloud {
  opacity: var(--intro-static-flower-opacity, 0);
}

.intro-flower-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--flower-dot-size);
  height: var(--flower-dot-size);
  border-radius: 999px;
  background: var(--flower-dot-color);
  opacity: var(--flower-dot-opacity);
  filter: drop-shadow(0 0 3px rgba(47, 114, 255, 0.16));
  transform: translate(calc(-50% + var(--flower-x)), calc(-50% + var(--flower-y)));
}

.intro-flower-primary {
  --intro-dot-size: clamp(1.7px, 0.17vw, 2.35px);
  --intro-small-dot-size: clamp(1.2px, 0.12vw, 1.65px);
  --intro-particle-map:
    0 0 0 rgba(18, 20, 23, 0.68),
    0 -18px 0 rgba(47, 114, 255, 0.44),
    0 -30px 0 rgba(18, 20, 23, 0.64),
    -4px -42px 0 rgba(31, 41, 55, 0.62),
    4px -42px 0 rgba(86, 182, 255, 0.4),
    14px -12px 0 rgba(18, 20, 23, 0.6),
    24px -22px 0 rgba(47, 114, 255, 0.4),
    31px -31px 0 rgba(31, 41, 55, 0.58),
    40px -36px 0 rgba(86, 182, 255, 0.34),
    18px 0 0 rgba(47, 114, 255, 0.42),
    30px 0 0 rgba(18, 20, 23, 0.64),
    42px -4px 0 rgba(31, 41, 55, 0.6),
    42px 4px 0 rgba(86, 182, 255, 0.36),
    14px 12px 0 rgba(18, 20, 23, 0.6),
    24px 22px 0 rgba(47, 114, 255, 0.38),
    31px 31px 0 rgba(31, 41, 55, 0.58),
    40px 36px 0 rgba(86, 182, 255, 0.32),
    0 18px 0 rgba(47, 114, 255, 0.42),
    0 30px 0 rgba(18, 20, 23, 0.64),
    -4px 42px 0 rgba(31, 41, 55, 0.62),
    4px 42px 0 rgba(86, 182, 255, 0.36),
    -14px 12px 0 rgba(18, 20, 23, 0.6),
    -24px 22px 0 rgba(47, 114, 255, 0.38),
    -31px 31px 0 rgba(31, 41, 55, 0.58),
    -40px 36px 0 rgba(86, 182, 255, 0.32),
    -18px 0 0 rgba(47, 114, 255, 0.42),
    -30px 0 0 rgba(18, 20, 23, 0.64),
    -42px -4px 0 rgba(31, 41, 55, 0.6),
    -42px 4px 0 rgba(86, 182, 255, 0.36),
    -14px -12px 0 rgba(18, 20, 23, 0.6),
    -24px -22px 0 rgba(47, 114, 255, 0.4),
    -31px -31px 0 rgba(31, 41, 55, 0.58),
    -40px -36px 0 rgba(86, 182, 255, 0.34);
  --intro-particle-map-soft:
    8px -24px 0 rgba(47, 114, 255, 0.32),
    -8px -24px 0 rgba(86, 182, 255, 0.26),
    22px -8px 0 rgba(110, 104, 255, 0.22),
    24px 8px 0 rgba(86, 182, 255, 0.24),
    8px 24px 0 rgba(47, 114, 255, 0.3),
    -8px 24px 0 rgba(86, 182, 255, 0.24),
    -22px 8px 0 rgba(110, 104, 255, 0.22),
    -24px -8px 0 rgba(86, 182, 255, 0.24),
    0 8px 0 rgba(31, 41, 55, 0.45),
    0 -8px 0 rgba(31, 41, 55, 0.45);
  --intro-flower-rotation: var(--intro-spin-cw, 0deg);
  top: calc(50% - clamp(150px, 18vh, 190px));
  left: calc(50% + clamp(54px, 5.5vw, 78px));
  width: clamp(108px, 9.2vw, 132px);
  height: clamp(108px, 9.2vw, 132px);
  color: var(--blue);
  opacity: calc(var(--intro-flower-opacity, 0) * 0.86);
  transform: translate(-50%, -50%);
}

.intro-flower-secondary {
  --intro-dot-size: clamp(1.7px, 0.16vw, 2.2px);
  --intro-small-dot-size: clamp(1.2px, 0.11vw, 1.55px);
  --intro-particle-map:
    0 0 0 rgba(18, 20, 23, 0.66),
    0 -18px 0 rgba(47, 114, 255, 0.42),
    -8px -27px 0 rgba(31, 41, 55, 0.58),
    8px -27px 0 rgba(86, 182, 255, 0.36),
    0 -36px 0 rgba(18, 20, 23, 0.62),
    18px 0 0 rgba(47, 114, 255, 0.42),
    27px -8px 0 rgba(31, 41, 55, 0.58),
    27px 8px 0 rgba(86, 182, 255, 0.34),
    36px 0 0 rgba(18, 20, 23, 0.62),
    0 18px 0 rgba(47, 114, 255, 0.42),
    -8px 27px 0 rgba(31, 41, 55, 0.58),
    8px 27px 0 rgba(86, 182, 255, 0.34),
    0 36px 0 rgba(18, 20, 23, 0.62),
    -18px 0 0 rgba(47, 114, 255, 0.42),
    -27px -8px 0 rgba(31, 41, 55, 0.58),
    -27px 8px 0 rgba(86, 182, 255, 0.34),
    -36px 0 0 rgba(18, 20, 23, 0.62),
    10px -10px 0 rgba(31, 41, 55, 0.5),
    10px 10px 0 rgba(31, 41, 55, 0.5),
    -10px 10px 0 rgba(31, 41, 55, 0.5),
    -10px -10px 0 rgba(31, 41, 55, 0.5);
  --intro-particle-map-soft:
    8px -18px 0 rgba(86, 182, 255, 0.24),
    -8px -18px 0 rgba(47, 114, 255, 0.24),
    18px 8px 0 rgba(110, 104, 255, 0.2),
    18px -8px 0 rgba(86, 182, 255, 0.22),
    8px 18px 0 rgba(47, 114, 255, 0.24),
    -8px 18px 0 rgba(86, 182, 255, 0.22),
    -18px 8px 0 rgba(110, 104, 255, 0.2),
    -18px -8px 0 rgba(47, 114, 255, 0.24),
    0 0 0 rgba(18, 20, 23, 0.42);
  --intro-flower-rotation: var(--intro-spin-ccw, 0deg);
  top: calc(50% - clamp(44px, 6vh, 72px));
  left: calc(50% - clamp(54px, 5.5vw, 78px));
  width: clamp(96px, 8.2vw, 118px);
  height: clamp(96px, 8.2vw, 118px);
  color: #16b986;
  opacity: calc(var(--intro-flower-opacity, 0) * 0.86);
  transform: translate(-50%, -50%);
}

.intro-flower-secondary::before {
  animation-duration: 2.3s;
  animation-direction: normal;
  filter: drop-shadow(0 0 7px rgba(47, 114, 255, 0.14));
}

.intro-flower-tertiary {
  --intro-flower-rotation: var(--intro-spin-slow, 0deg);
  top: calc(50% - clamp(10px, 1.2vh, 18px));
  left: calc(50% + clamp(150px, 14vw, 210px));
  width: clamp(74px, 6.8vw, 96px);
  height: clamp(74px, 6.8vw, 96px);
  opacity: calc(var(--intro-flower-opacity, 0) * 0.78);
  transform: translate(-50%, -50%);
}

.intro-flower-quaternary {
  --intro-flower-rotation: var(--intro-spin-fast-ccw, 0deg);
  top: calc(50% - clamp(154px, 18vh, 186px));
  left: calc(50% - clamp(145px, 13vw, 196px));
  width: clamp(66px, 6vw, 88px);
  height: clamp(66px, 6vw, 88px);
  opacity: calc(var(--intro-flower-opacity, 0) * 0.7);
  transform: translate(-50%, -50%);
}

.section-panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 960px);
  gap: clamp(20px, 5vw, 70px);
  min-height: 72svh;
  padding: clamp(80px, 12vw, 150px) clamp(22px, 8vw, 130px);
  background: transparent;
}

.work-machine {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100svh;
  padding: clamp(92px, 10vh, 118px) clamp(22px, 8vw, 130px) clamp(72px, 8vh, 92px);
  background: transparent;
  overflow: hidden;
  place-items: center;
}

.work-machine-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: clamp(20px, 3vh, 30px);
  width: min(100%, 1080px);
  min-width: 0;
  margin: 0 auto;
  text-align: left;
}

.tech-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: center;
  width: min(100%, 920px);
  margin: 0 auto;
  min-width: 0;
}

.tech-copy {
  position: relative;
  display: flex;
  width: 100%;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(150px, 20vh, 210px);
  padding-bottom: 0;
  overflow: visible;
}

.tech-copy h2 {
  margin: 0;
  color: var(--ink);
  max-width: 100%;
  font-size: clamp(3.25rem, 4.45vw, 4rem);
  font-weight: 450;
  line-height: 1.085;
  letter-spacing: 0;
  white-space: normal;
}

.tech-copy h2.type-target {
  min-height: 2.18em;
}

.tech-copy p {
  max-width: 680px;
  margin: clamp(18px, 2.8vh, 28px) 0 0;
  color: rgba(18, 20, 23, 0.48);
  font-size: clamp(1rem, 1.32vw, 1.22rem);
  font-weight: 450;
  line-height: 1.45;
}

.tech-copy p.type-target {
  min-height: 4.35em;
}

.work-machine-inner .label-stack {
  position: absolute;
  top: auto;
  right: clamp(72px, 12vw, 168px);
  bottom: clamp(-38px, -2.8vh, -16px);
  left: auto;
  display: inline-block;
  width: fit-content;
  margin: 0;
  transform: none;
}

.tech-canvas-shell {
  position: relative;
  isolation: isolate;
  align-self: center;
  width: 100%;
  aspect-ratio: 1056 / 512;
  min-height: clamp(170px, 23vh, 238px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tech-canvas-shell canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 52%, transparent 96%);
  mask-image: radial-gradient(ellipse at center, #000 52%, transparent 96%);
}

.work-roller {
  position: relative;
  z-index: 3;
  isolation: isolate;
  align-self: center;
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow: hidden;
}

.tech-roller-card {
  position: relative;
  isolation: isolate;
  z-index: 1;
  width: 100%;
  min-width: 0;
  height: clamp(190px, 25vh, 248px);
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.006);
  box-shadow:
    0 22px 64px rgba(18, 20, 23, 0.05),
    inset 2px 1px 6px rgba(255, 255, 255, 0.18),
    inset -1px -1px 8px rgba(18, 20, 23, 0.02);
  -webkit-backdrop-filter: blur(10.5px) saturate(1.2);
  backdrop-filter: blur(10.5px) saturate(1.2);
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.16) 8%,
    #000 22%,
    #000 78%,
    rgba(0, 0, 0, 0.16) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.16) 8%,
    #000 22%,
    #000 78%,
    rgba(0, 0, 0, 0.16) 92%,
    transparent 100%
  );
}

.tech-roller-card::before {
  content: "";
  inset: 0;
  z-index: 1;
  position: absolute;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.22) 0 9%, rgba(255, 255, 255, 0.045) 28%, transparent 58%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.08), transparent 30%);
  opacity: 0.38;
  pointer-events: none;
}

.tech-roller-card::after {
  content: "";
  position: absolute;
  z-index: 6;
  top: 100%;
  left: -95%;
  width: 150%;
  height: 12px;
  background: rgba(255, 255, 255, 0.8);
  filter: blur(30px);
  transform: rotate(50deg);
  animation: glass-shine 10s ease-in-out infinite;
  pointer-events: none;
}

.tech-frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(18, 20, 23, 0.12);
}

.tech-frame-bar span {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(18, 20, 23, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
}

.work-roller-window {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.4vh, 14px);
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: clamp(14px, 1.8vh, 18px) 0;
}

.work-roller-window::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
    to right,
    rgba(251, 251, 247, 0.22) 0%,
    rgba(251, 251, 247, 0.08) 9%,
    transparent 28%,
    transparent 72%,
    rgba(251, 251, 247, 0.08) 91%,
    rgba(251, 251, 247, 0.22) 100%
  );
  pointer-events: none;
}

.work-roller-window::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 4;
  -webkit-backdrop-filter: blur(4px) saturate(0.98);
  backdrop-filter: blur(4px) saturate(0.98);
  -webkit-mask-image: linear-gradient(
    to right,
    #000 0%,
    rgba(0, 0, 0, 0.42) 8%,
    transparent 20%,
    transparent 80%,
    rgba(0, 0, 0, 0.42) 92%,
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    #000 0%,
    rgba(0, 0, 0, 0.42) 8%,
    transparent 20%,
    transparent 80%,
    rgba(0, 0, 0, 0.42) 92%,
    #000 100%
  );
  pointer-events: none;
}

@keyframes glass-shine {
  0% {
    top: 104%;
    left: -110%;
  }

  50%,
  100% {
    top: -6%;
    left: 68%;
  }
}

.roller-lane {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  height: clamp(66px, 8.8vh, 88px);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 6%,
    #000 19%,
    #000 81%,
    rgba(0, 0, 0, 0.12) 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 6%,
    #000 19%,
    #000 81%,
    rgba(0, 0, 0, 0.12) 94%,
    transparent 100%
  );
}

.roller-track {
  display: flex;
  width: max-content;
  animation: tech-roll-left 24s linear infinite;
  will-change: transform;
}

.roller-lane-reverse .roller-track {
  animation-name: tech-roll-right;
  animation-duration: 26s;
}

.roller-lane-methods {
  height: clamp(52px, 7vh, 68px);
}

.roller-set {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: clamp(28px, 4.4vw, 48px);
  padding: 0 clamp(14px, 2vw, 24px);
}

.roller-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 11px;
  width: auto;
  min-height: clamp(66px, 8.6vh, 86px);
  margin: 0;
  padding: 7px clamp(6px, 0.8vw, 14px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  text-align: center;
}

.tool-logo {
  display: block;
  width: clamp(24px, 2vw, 30px);
  height: clamp(24px, 2vw, 30px);
  object-fit: contain;
  opacity: 0.52;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.roller-item:hover .tool-logo {
  opacity: 0.9;
  transform: scale(1.12);
}

.tool-name {
  color: rgba(18, 20, 23, 0.46);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: clamp(0.98rem, 1.34vw, 1.24rem);
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.roller-method-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: rgba(18, 20, 23, 0.46);
  font-size: clamp(1rem, 1.42vw, 1.28rem);
  font-weight: 520;
  line-height: 1;
  margin-right: clamp(32px, 4.2vw, 54px);
  white-space: nowrap;
}

@keyframes tech-roll-left {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes tech-roll-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.section-panel h2 {
  max-width: 850px;
  margin: 0 0 20px;
  color: var(--ink);
  font-size: clamp(3.25rem, 4.45vw, 4rem);
  font-weight: 450;
  line-height: 1.085;
  letter-spacing: 0;
}

.section-copy {
  max-width: 660px;
  margin: 0;
  color: rgba(18, 20, 23, 0.56);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.55;
}

.work-projects-section {
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: clamp(20px, 2.8vw, 32px);
  min-height: 100svh;
  overflow: hidden;
  padding-top: clamp(78px, 8vh, 98px);
  padding-bottom: clamp(38px, 5vh, 58px);
}

.work-projects-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  width: min(100%, 900px);
  margin: 0 auto;
  padding-top: 0;
  text-align: left;
}

.work-header-copy {
  min-width: 0;
}

.work-mode-switch {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  margin: 0 0 8px;
}

.mode-toggle {
  display: flex;
  width: 34px;
  height: 72px;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 0;
  background: #a8bce0;
  cursor: pointer;
  transition: background-color 300ms 300ms;
}

.mode-toggle-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fbfbf7;
  box-shadow: 0 2px 5px rgba(18, 20, 23, 0.14);
  margin-top: 0;
  transition: margin 480ms ease-in-out;
}

#work-mode-check:checked + .mode-toggle {
  background-color: #a3c9b4;
}

#work-mode-check:checked + .mode-toggle .mode-toggle-circle {
  margin-top: calc(72px - 6px - 28px);
}

.mode-burst-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: visible;
  pointer-events: none;
}

.mode-burst-piece {
  position: absolute;
  will-change: transform, opacity;
}

.mode-burst-piece.is-icon {
  font-size: 19px;
  line-height: 1;
}

.mode-burst-piece.is-ribbon {
  width: 5px;
  height: 13px;
  border-radius: 2px;
}

.mode-toggle-text {
  display: flex;
  height: 72px;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
  text-align: left;
}

.mode-label {
  color: rgba(90, 101, 116, 0.42);
  cursor: pointer;
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1;
  transition: color 240ms ease;
}

.mode-label:hover {
  color: rgba(18, 20, 23, 0.7);
}

.mode-label.is-active {
  color: var(--ink);
}

.work-projects-section h2 {
  margin-bottom: 16px;
}

.work-projects-copy {
  max-width: 560px;
  margin: 0;
  color: rgba(18, 20, 23, 0.48);
  font-size: clamp(1rem, 1.32vw, 1.22rem);
  font-weight: 450;
  line-height: 1.45;
}

.project-showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(18px, 2.2vw, 26px);
  width: min(100%, 1060px);
  min-width: 0;
  margin: 0 auto;
}

.work-filter {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 900px);
  margin: 0 auto;
}

.work-projects-section[data-work-mode="play"] .work-filter {
  display: none;
}

.work-filter-group {
  --wf-color-1: var(--blue);
  --wf-color-2: #56b6ff;
  --wf-color-3: #6e68ff;
  --wf-color-4: #a8bce0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(4px, 0.8vw, 8px);
}

.work-filter button {
  appearance: none;
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  padding: 8px 16px;
  color: rgba(90, 101, 116, 0.56);
  cursor: pointer;
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  transition: color 220ms ease;
}

/* crisp translucent selection pill on the button itself; the goo layer
   below only carries the blurred merge + particles */
.work-filter button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(47, 114, 255, 0.14);
  opacity: 0;
  transform: scale(0.55);
  transition:
    opacity 240ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-filter button:hover {
  color: rgba(18, 20, 23, 0.78);
}

.work-filter button.is-active {
  color: var(--ink);
}

.work-filter button.is-active::after {
  opacity: 1;
  transform: scale(1);
}

/* gooey layer: positioned over the active pill by JS. Everything visual
   lives inside its canvas — shapes are drawn plain to an offscreen canvas,
   then stamped through ctx.filter = url(#wf-goo) in one drawImage so the
   pill and dots merge like metaballs. (A url()-filtered DOM layer whose
   children update per-frame goes stale on this site — canvas repaints
   reliably; don't move the goo back to CSS filter + DOM children.) */
.work-filter-goo {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
}

.work-filter-goo canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* translucency must sit AFTER the goo filter: the alpha matrix (a*18-6)
     would amplify a pre-filter 0.45 straight back to opaque */
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .work-filter-goo {
    display: none;
  }
}

.project-card.is-filtered-out {
  opacity: 0.16;
  filter: saturate(0.3);
}

.project-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 900px);
  height: auto;
  min-width: 0;
  margin: 0 auto;
  overflow: visible;
}

.project-card {
  position: relative;
  top: auto;
  left: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.8vw, 36px);
  width: 100%;
  min-width: 0;
  border-top: 1px solid rgba(18, 20, 23, 0.1);
  padding: clamp(12px, 2vh, 18px) clamp(2px, 0.8vw, 10px);
  background: transparent;
  cursor: pointer;
  transition:
    filter 420ms ease,
    opacity 420ms ease;
}

.project-rail {
  border-bottom: 1px solid rgba(18, 20, 23, 0.1);
}

.project-card:hover {
  transform: none;
}

.project-card[data-work-tag="hard"] {
  perspective: none;
}

.project-visual {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --background-x: 50%;
  --background-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-top: 0.5;
  --pointer-from-left: 0.5;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  position: relative;
  z-index: 1;
  width: clamp(116px, 13.5vw, 172px);
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  transition: none;
  will-change: auto;
}

.project-visual.entering {
  transition: transform 180ms ease-out;
}

.project-visual.active {
  transition: none;
  transform: none;
}

.project-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.project-card:hover .project-visual::after,
.project-visual.active::after {
  opacity: 1;
}

.visual-holo {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: visible;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 260ms ease,
    transform 300ms ease;
}

.holo-pattern {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(88px, 10vw, 132px);
  height: clamp(64px, 7vw, 96px);
  background: var(--holo-icon, none) center / contain no-repeat;
  filter: drop-shadow(0 14px 22px rgba(18, 20, 23, 0.13));
  opacity: 0.94;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
  transition: transform 300ms ease;
}

.project-card:hover .visual-holo,
.project-visual.active .visual-holo {
  opacity: 1;
}

.visual-holo[data-holo="ida"] {
  --holo-icon: url("../images/press/award-badge-ida.png");
}

.visual-holo[data-holo="muse"] {
  --holo-icon: url("../images/press/award-badge-muse.png");
}

.visual-holo[data-holo="nyu"] {
  --holo-icon: url("../images/press/logo-nyu-tisch.png");
}

.visual-holo[data-holo="polyu"] {
  --holo-icon: url("../images/press/logo-polyu-blockchain.png");
}

.visual-holo[data-holo="adesign"] {
  --holo-icon: url("../images/press/award-badge-a-design.png");
}

/* each box matches its badge's aspect ratio so `contain` fills it and
   every logo lands at a similar visual weight */
.visual-holo[data-holo="ida"] .holo-pattern {
  width: clamp(70px, 7vw, 100px);
  height: clamp(70px, 7vw, 100px);
}

.visual-holo[data-holo="adesign"] .holo-pattern {
  width: clamp(84px, 9.3vw, 122px);
  height: clamp(59px, 6.6vw, 86px);
}

.visual-holo[data-holo="nyu"] .holo-pattern {
  width: clamp(80px, 9vw, 118px);
  height: clamp(60px, 6.7vw, 88px);
}

.visual-holo[data-holo="muse"] .holo-pattern {
  /* official Muse Design Awards lockup is 450x245 (1.84:1) */
  width: clamp(100px, 9.6vw, 138px);
  height: clamp(54px, 5.2vw, 75px);
}

.visual-holo[data-holo="polyu"] .holo-pattern {
  /* 5.22:1 lockup held to NYU's visual width, not the old 164px banner */
  width: clamp(84px, 9.2vw, 120px);
  height: clamp(16px, 1.8vw, 23px);
}

.project-card:hover .holo-pattern,
.project-visual.active .holo-pattern {
  transform: translate(-50%, -50%) scale(1);
}

.holo-shine,
.holo-glare {
  display: none;
}

.project-visual img {
  display: block;
  width: 100%;
  /* explicit auto so a height="" attribute can never override the 1.6 ratio */
  height: auto;
  aspect-ratio: 1.6;
  border: 1px solid rgba(18, 20, 23, 0.08);
  border-radius: 8px;
  object-fit: cover;
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-visual img,
.project-visual.active img {
  transform: scale(1.03);
}

.project-card[data-project-link="projects/scentverse.html"] .project-visual img {
  object-position: center 95%;
}

.project-card[data-project-link="projects/zkp-dynamics.html"] .project-visual img {
  object-position: center;
}

.project-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0;
  transition: opacity 250ms ease;
}

.project-card:hover .project-content {
  opacity: 0.65;
}

.project-card .project-kicker {
  margin: 0 0 8px;
  color: rgba(18, 20, 23, 0.48);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.project-card h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: clamp(1.28rem, 1.85vw, 1.6rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
  transition: color 200ms ease;
}

.project-card:hover h3 {
  color: var(--ink);
}

.project-card p {
  margin: 0;
  color: rgba(18, 20, 23, 0.5);
  font-size: clamp(0.84rem, 1.02vw, 0.94rem);
  line-height: 1.36;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 9px;
}

.project-tags span {
  color: rgba(90, 101, 116, 0.52);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 650;
}

.project-tags span:not(:last-child)::after {
  content: " / ";
  white-space: pre;
  color: rgba(90, 101, 116, 0.34);
}

.project-card-sketch {
  padding: clamp(13px, 2vh, 18px) clamp(2px, 0.8vw, 10px);
}

.project-card-sketch h3 {
  margin-bottom: 5px;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
}

.work-projects-section[data-work-mode="play"] .project-card[data-work-tag="hard"],
.work-projects-section:not([data-work-mode="play"]) .project-card[data-work-tag="play"] {
  display: none;
}

.project-link-flower {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(0.35) rotate(0deg);
  -webkit-mask: var(--project-button-flower) center / contain no-repeat;
  mask: var(--project-button-flower) center / contain no-repeat;
  transition:
    opacity 180ms ease,
    transform 620ms cubic-bezier(0.18, 0.84, 0.24, 1);
}

.project-link-flower-a {
  --project-button-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cellipse cx='50' cy='30' rx='8' ry='19'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='30' rx='8' ry='19' transform='rotate(315 50 50)'/%3E%3Ccircle cx='50' cy='50' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--blue);
}

.project-link-flower-b {
  --project-button-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23000'%3E%3Cellipse cx='50' cy='20' rx='15' ry='25'/%3E%3Cellipse cx='50' cy='20' rx='15' ry='25' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='15' ry='25' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='15' ry='25' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='20' rx='15' ry='25' transform='rotate(288 50 50)'/%3E%3Ccircle cx='50' cy='50' r='13'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--green);
}

.project-link-flower-a.is-bursting {
  opacity: 1;
  transform: translate3d(-46px, -42px, 0) scale(1) rotate(-160deg);
}

.project-link-flower-b.is-bursting {
  opacity: 1;
  transform: translate3d(48px, -38px, 0) scale(0.96) rotate(150deg);
}

.project-detail-page {
  min-height: 100svh;
}

.project-detail-main {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding: clamp(108px, 13vh, 150px) clamp(22px, 6vw, 90px) clamp(72px, 9vh, 110px);
}

/* when the section TOC is visible on the left, hand it that column and
   center the article in the space that remains — a centered column
   underneath a left sidebar read as lopsided */
@media (min-width: 1280px) {
  .project-detail-main {
    padding-left: 292px;
  }
}

.project-detail-shell {
  display: flex;
  flex-direction: column;
  width: min(100%, 840px);
  max-width: calc(100vw - 44px);
  margin: 0 auto;
}

.project-detail-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100%, 840px, calc(100vw - 44px));
  min-width: 0;
  max-width: 100%;
  margin: 0 auto clamp(30px, 5vh, 46px);
  text-align: left;
}

.project-detail-head .eyebrow {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.project-detail-copy h1 {
  width: 100%;
  min-width: 0;
  max-width: calc(100vw - 44px);
  margin: 0 0 18px;
  color: var(--ink);
  font-size: clamp(3.25rem, 4.45vw, 4rem);
  font-weight: 450;
  line-height: 1.085;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.project-detail-copy .project-detail-lead {
  /* same column width as the case blocks below, no narrower inset */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: rgba(18, 20, 23, 0.52);
  font-size: clamp(1rem, 1.32vw, 1.2rem);
  font-weight: 450;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.project-page-meta {
  width: 100%;
  min-width: 0;
  margin: 18px 0 0;
  color: rgba(90, 101, 116, 0.6);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
}

.project-meta-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(52px, 7vw, 92px);
  row-gap: clamp(34px, 5vh, 54px);
  width: 100%;
  min-width: 0;
  margin: clamp(34px, 5.5vh, 52px) 0 0;
  padding: 0;
  color: rgba(18, 20, 23, 0.52);
  list-style: none;
  text-align: left;
  align-self: stretch;
}

.project-meta-list li {
  display: block;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  font-size: clamp(0.94rem, 1.08vw, 1.02rem);
  font-weight: 450;
  line-height: 1.48;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.project-meta-list span {
  display: block;
  margin: 0 0 13px;
  color: rgba(18, 20, 23, 0.38);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.project-meta-list a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(18, 20, 23, 0.12);
  border-radius: 5px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.4);
  color: rgba(18, 20, 23, 0.72);
  box-shadow: 0 12px 34px rgba(18, 20, 23, 0.045);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.project-meta-link-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  object-fit: contain;
}

.project-meta-list a:hover {
  border-color: rgba(18, 20, 23, 0.28);
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  transform: translateY(-1px);
}

.project-meta-list small {
  display: block;
  margin-top: 5px;
  color: rgba(18, 20, 23, 0.36);
  font-size: 0.76em;
  line-height: 1.45;
}

.case-block {
  width: 100%;
  margin-top: clamp(38px, 6.4vh, 60px);
}

.case-block h2 {
  width: 100%;
  max-width: none;
  margin: 0 0 12px;
  color: var(--ink);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 550;
  line-height: 1.2;
}

.case-block p {
  width: 100%;
  max-width: none;
  margin: 0 0 10px;
  color: rgba(18, 20, 23, 0.58);
  font-size: clamp(0.95rem, 1.15vw, 1.03rem);
  line-height: 1.62;
}

.case-block .project-detail-figure {
  margin-top: 18px;
}

.project-detail-figure video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.project-detail-figure {
  margin: clamp(22px, 3.6vh, 34px) 0 0;
  overflow: hidden;
  border-radius: 10px;
  clip-path: inset(0 round 10px);
}

.project-detail-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}

.project-detail-figure iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: inherit;
}

.project-media-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(14px, 2vw, 22px);
  margin-top: 18px;
}

.project-media-grid .project-detail-figure {
  display: flex;
  height: 100%;
  aspect-ratio: 16 / 10;
  margin-top: 0;
}

.project-media-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.project-comic-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: 18px;
}

.project-comic-figure {
  margin-top: 0;
  border-radius: 0;
}

.case-block .project-comic-stack + p {
  margin-top: clamp(24px, 3.4vh, 32px);
}


.project-comic-figure img {
  width: 100%;
  height: auto;
}

.project-comic-stack.is-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-comic-stack.is-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.project-comic-stack.is-five .project-media-item p {
  text-align: center;
}

.case-media-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26%);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
}

.case-media-split .project-detail-figure {
  margin-top: 0;
}

.case-table-wrap {
  margin-top: clamp(22px, 3.6vh, 34px);
  overflow-x: auto;
}

.case-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.case-table th,
.case-table td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: left;
  vertical-align: top;
}

.case-table thead th {
  color: rgba(18, 20, 23, 0.38);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.case-table tbody th {
  color: var(--ink);
  font-weight: 600;
}

.case-table td {
  color: rgba(18, 20, 23, 0.68);
}

.case-criteria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 22px;
  margin: 18px 0 26px;
  padding: 0;
  list-style: none;
}

.case-criteria li {
  position: relative;
  padding-left: 15px;
  font-size: 0.95rem;
  color: rgba(18, 20, 23, 0.72);
}

.case-criteria li::before {
  content: "";
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.case-flow-diagram {
  display: block;
  width: 100%;
  height: auto;
}

.case-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(128px, 16vw, 144px);
  align-items: start;
  gap: clamp(18px, 2.6vw, 28px);
  margin-top: 18px;
}

.case-split-copy {
  padding: 0;
}

.case-split-copy p:last-child {
  margin-bottom: 0;
}

.case-split-figure {
  justify-self: end;
  width: 100%;
  aspect-ratio: 400 / 474;
  margin-top: 0;
}

.case-split-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-block .case-split-figure {
  margin-top: 0;
}

.case-split-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 30vw, 330px);
  align-items: center;
  gap: clamp(24px, 3.4vw, 44px);
  margin-top: clamp(38px, 6.4vh, 60px);
}

.case-split-duo-copy {
  min-width: 0;
}

.case-split-duo-copy .case-block:first-child {
  margin-top: 0;
}

.case-split-duo-figure {
  margin: 0;
  width: 100%;
}

.case-split-duo-figure img {
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .case-split-duo {
    grid-template-columns: 1fr;
  }

  .case-split-duo-figure {
    max-width: 400px;
    margin: 20px auto 0;
  }
}

.case-split-figure.is-logo {
  aspect-ratio: auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-split-figure.is-logo img {
  width: 66.67%;
  height: auto;
}

.project-media-grid .project-detail-figure img,
.project-media-grid .project-detail-figure video,
.project-media-grid .project-detail-figure iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-media-grid .project-contained-figure img {
  object-fit: contain;
}

.project-media-item p {
  margin: 8px 0 0;
  max-width: none;
}

.case-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
  margin-top: 18px;
}

/* a grid with exactly two cards splits the full row in half instead of
   leaving a lopsided empty third column */
.case-decision-grid:has(.case-decision-card:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-decision-card {
  min-width: 0;
  border: 1px solid rgba(18, 20, 23, 0.1);
  border-radius: 8px;
  padding: clamp(14px, 2vw, 18px);
  background: rgba(255, 255, 255, 0.46);
  box-shadow: 0 18px 48px rgba(18, 20, 23, 0.045);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
}

.case-decision-card h3 {
  margin: 0 0 6px;
  color: rgba(18, 20, 23, 0.38);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.11em;
  line-height: 1.2;
  text-transform: uppercase;
}

.case-decision-card h3:not(:first-child) {
  margin-top: 16px;
}

.case-decision-card p {
  margin: 0;
  color: rgba(18, 20, 23, 0.6);
  font-size: clamp(0.88rem, 1vw, 0.95rem);
  line-height: 1.5;
}

.interview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
  margin-top: 18px;
}

.interview-card {
  min-width: 0;
  border: 1px solid rgba(18, 20, 23, 0.08);
  border-radius: 8px;
  padding: clamp(15px, 2vw, 18px);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 16px 46px rgba(18, 20, 23, 0.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
}

.case-block .interview-role {
  margin: 0 0 10px;
  color: rgba(90, 101, 116, 0.56);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.case-block .interview-note {
  margin: 0;
  color: rgba(18, 20, 23, 0.6);
  font-size: clamp(0.9rem, 1.02vw, 0.96rem);
  line-height: 1.56;
}

.case-block .interview-finding {
  margin: 18px 0 0;
  border-left: 2px solid rgba(47, 114, 255, 0.32);
  padding-left: 15px;
  color: rgba(18, 20, 23, 0.64);
}

.case-decision-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.case-decision-list li {
  min-width: 0;
  border: 1px solid rgba(18, 20, 23, 0.08);
  border-radius: 8px;
  padding: clamp(15px, 2vw, 18px);
  background: rgba(255, 255, 255, 0.4);
  color: rgba(18, 20, 23, 0.6);
  font-size: clamp(0.92rem, 1.08vw, 0.99rem);
  line-height: 1.58;
}

.case-decision-list span {
  display: block;
  margin: 0 0 8px;
  color: rgba(90, 101, 116, 0.56);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.case-code-block {
  margin: 18px 0 0;
  overflow: auto;
  border: 1px solid rgba(18, 20, 23, 0.08);
  border-radius: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.32);
  color: rgba(18, 20, 23, 0.62);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.55;
}

.case-timing-chart {
  margin: 18px 0 0;
  border: 1px solid rgba(18, 20, 23, 0.08);
  border-radius: 10px;
  padding: clamp(16px, 2.4vw, 22px) clamp(14px, 2.4vw, 22px) clamp(8px, 1.4vw, 12px);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 16px 46px rgba(18, 20, 23, 0.04);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
}

.case-timing-legend {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.2vw, 20px);
  margin: 0 0 14px;
  color: rgba(90, 101, 116, 0.6);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.case-timing-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.case-timing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--muted);
  font-style: normal;
}

.case-timing-dot.is-v1 {
  background: var(--blue);
}

.case-timing-bar-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  flex: none;
  border-radius: 2px;
  background: rgba(47, 114, 255, 0.32);
  font-style: normal;
}

.case-timing-legend-unit {
  margin-left: auto;
  color: rgba(90, 101, 116, 0.4);
}

.case-timing-row,
.case-timing-axis {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vw, 14px);
  min-height: 32px;
  border-bottom: 1px solid rgba(20, 24, 30, 0.08);
}

.case-timing-row.is-average {
  border-top: 1px solid rgba(20, 24, 30, 0.16);
  border-bottom: none;
}

.case-timing-id {
  flex: 0 0 clamp(26px, 7vw, 36px);
  color: rgba(18, 20, 23, 0.42);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.72rem;
}

.case-timing-row.is-average .case-timing-id {
  color: var(--blue);
  font-weight: 700;
}

.case-timing-track {
  position: relative;
  flex: 1 1 0%;
  height: 100%;
  min-height: 32px;
}

.case-timing-segment {
  position: absolute;
  top: 50%;
  height: 3px;
  border-radius: 2px;
  background: rgba(47, 114, 255, 0.32);
  transform: translateY(-50%);
}

.case-timing-point {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  border: 2px solid var(--bg);
  transform: translate(-50%, -50%);
}

.case-timing-point.is-v1 {
  background: var(--blue);
}

.case-timing-times {
  flex: 0 0 clamp(78px, 20vw, 96px);
  color: rgba(90, 101, 116, 0.6);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.7rem;
  text-align: right;
}

.case-timing-saved {
  flex: 0 0 clamp(34px, 9vw, 46px);
  color: var(--blue);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: right;
}

.case-timing-axis {
  min-height: 22px;
  border-bottom: none;
}

.case-timing-tick {
  position: absolute;
  top: 3px;
  transform: translateX(-50%);
  color: rgba(90, 101, 116, 0.4);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.62rem;
}

.case-timing-caption {
  margin: 10px 0 0;
  color: rgba(18, 20, 23, 0.4);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.68rem;
  line-height: 1.5;
}

.project-detail-footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 6vh, 56px);
}

.project-back-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid rgba(18, 20, 23, 0.12);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.24);
  color: rgba(90, 101, 116, 0.68);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.74rem;
  font-weight: 750;
  text-decoration: none;
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  backdrop-filter: blur(10px) saturate(1.12);
  transition:
    color 180ms ease,
    background 180ms ease;
}

.project-back-link:hover {
  background: rgba(255, 255, 255, 0.42);
  color: var(--ink);
}

.label-reel {
  top: auto;
  bottom: clamp(28px, 7vh, 64px);
  right: clamp(16px, 3.2vw, 52px);
  left: auto;
}

.label-reel::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 7px;
  border-radius: 999px;
  background: rgba(47, 114, 255, 0.68);
  vertical-align: middle;
}

.press-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
}

.press-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 720px);
  text-align: center;
}

.press-list {
  display: flex;
  width: min(100%, 720px);
  flex-direction: column;
  margin: clamp(34px, 6vh, 56px) 0 0;
  padding: 0;
  list-style: none;
}

.press-item {
  display: grid;
  grid-template-columns: clamp(56px, 6vw, 76px) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 30px);
  border-top: 1px solid rgba(18, 20, 23, 0.1);
  padding: clamp(16px, 2.6vh, 24px) clamp(2px, 0.8vw, 10px);
  text-align: left;
}

.press-item:last-child {
  border-bottom: 1px solid rgba(18, 20, 23, 0.1);
}

.press-year {
  margin: 0;
  color: rgba(90, 101, 116, 0.5);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.press-body h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}

.press-body p {
  margin: 0;
  color: rgba(18, 20, 23, 0.5);
  font-size: clamp(0.9rem, 1.1vw, 0.98rem);
  line-height: 1.5;
}

.contact-cue {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: clamp(26px, 5vh, 42px);
  padding: 0 14px;
  border: 1px solid rgba(18, 20, 23, 0.11);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(18, 20, 23, 0.58);
  box-shadow: 0 14px 40px rgba(18, 20, 23, 0.05);
  cursor: pointer;
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  text-decoration: none;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.contact-cue:hover {
  border-color: rgba(18, 20, 23, 0.22);
  color: var(--ink);
  transform: translateY(-2px);
}

.project-detail-section {
  width: 100%;
  margin-top: clamp(26px, 4vh, 38px);
}

.project-detail-section h2 {
  width: 100%;
  margin: 0 0 12px;
  color: rgba(90, 101, 116, 0.6);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.project-detail-section ul {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-detail-section li {
  position: relative;
  padding-left: 15px;
  color: rgba(18, 20, 23, 0.6);
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  line-height: 1.5;
}

.project-detail-section li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(18, 20, 23, 0.34);
}

.contact-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  text-align: center;
}

.contact-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* config-only anchors: JS reads --flower-top/--flower-left/data-shape/
   data-size off these to place flowers on the shared canvas below; they
   never render anything themselves */
/* fixed + viewport-sized, same technique as .particle-layer for the hero
   canvas — it only ever paints while .contact-panel is near the viewport
   (setupContactFlowers clears it otherwise), so it stays inert everywhere
   else on the page. This also means it never contributes to page scroll
   height the way an absolutely-positioned overflowing child would. */
.contact-flower-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100vw;
  height: 100svh;
  pointer-events: none;
  contain: paint;
}

@media (max-width: 900px) {
  .contact-flower-canvas {
    display: none;
  }
}

.contact-copy {
  max-width: 520px;
  margin: 0 0 clamp(24px, 4.5vh, 38px);
  color: rgba(18, 20, 23, 0.5);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 450;
  line-height: 1.5;
}

.roller-lane:hover .roller-track {
  animation-play-state: paused;
}

.tool-name {
  transition:
    transform 220ms ease,
    color 220ms ease;
}

.roller-item:hover .tool-name {
  color: var(--ink);
  transform: scale(1.16);
}

.target-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  will-change: transform;
}

body.target-cursor-live .target-cursor {
  opacity: 1;
}

body.target-cursor-live .work-projects-section,
body.target-cursor-live .work-projects-section * {
  cursor: none !important;
}

.target-cursor-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: background 180ms ease;
}

.target-cursor-spin {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.target-cursor-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2.5px solid var(--ink);
  will-change: transform;
  transition: border-color 180ms ease;
}

.target-cursor .corner-tl {
  border-right: 0;
  border-bottom: 0;
}

.target-cursor .corner-tr {
  border-left: 0;
  border-bottom: 0;
}

.target-cursor .corner-br {
  border-left: 0;
  border-top: 0;
}

.target-cursor .corner-bl {
  border-right: 0;
  border-top: 0;
}

.target-cursor.is-locked .target-cursor-dot {
  background: var(--blue);
}

.target-cursor.is-locked .target-cursor-corner {
  border-color: var(--blue);
}

.target-cursor.is-pressed {
  transform-origin: center;
}

.target-cursor.is-pressed .target-cursor-dot {
  transform: translate(-50%, -50%) scale(0.7);
}

html.is-playground-open,
body.is-playground-open {
  overflow: hidden;
}

.playground-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 40px);
}

.playground-overlay[hidden] {
  display: none;
}

.playground-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(251, 251, 247, 0.66);
  -webkit-backdrop-filter: blur(18px) saturate(0.94);
  backdrop-filter: blur(18px) saturate(0.94);
}

.playground-panel {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 980px);
  flex-direction: column;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.playground-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(12px, 2vh, 18px);
}

.playground-nav-cycle {
  display: flex;
  gap: 10px;
}

.playground-nav-btn {
  appearance: none;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(18, 20, 23, 0.11);
  border-radius: 4px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(18, 20, 23, 0.58);
  box-shadow: 0 14px 40px rgba(18, 20, 23, 0.05);
  cursor: pointer;
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.playground-nav-btn:hover {
  border-color: rgba(18, 20, 23, 0.22);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  transform: translateY(-2px);
}

.playground-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(78svh, 620px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #0f0f0e;
}

.playground-stage canvas,
.playground-stage video {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.sketchbook__hint {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 16, 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 1;
  transition: opacity 0.35s ease;
}

.sketchbook__hint.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.sketchbook__hint-inner {
  max-width: 440px;
  color: #fff;
  text-align: center;
}

.sketchbook__hint-eyebrow {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sketchbook__hint-body {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: -0.005em;
  line-height: 1.55;
}

.sketchbook__hint-sub {
  display: inline-block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
}

.sketchbook__hint-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(18, 20, 23, 0.11);
  border-radius: 4px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(18, 20, 23, 0.58);
  box-shadow: 0 14px 40px rgba(18, 20, 23, 0.05);
  cursor: pointer;
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.sketchbook__hint-btn:hover {
  border-color: rgba(18, 20, 23, 0.22);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  transform: translateY(-2px);
}

.sketchbook__hint-btn:active {
  transform: translateY(0);
}

.case-back {
  appearance: none;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(18, 20, 23, 0.11);
  border-radius: 4px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(18, 20, 23, 0.58);
  box-shadow: 0 14px 40px rgba(18, 20, 23, 0.05);
  cursor: pointer;
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
  position: fixed;
  top: 84px;
  left: clamp(16px, 4vw, 44px);
  z-index: 20;
}

.case-back:hover {
  border-color: rgba(18, 20, 23, 0.22);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  transform: translateY(-2px);
}

.case-pager {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: clamp(40px, 7vh, 64px);
  border-top: 1px solid rgba(18, 20, 23, 0.1);
  padding-top: clamp(18px, 3vh, 26px);
}

.case-pager-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
}

.case-pager-link.is-next {
  text-align: right;
}

.case-pager-dir {
  color: rgba(90, 101, 116, 0.55);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.case-pager-title {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 500;
  transition: color 180ms ease;
}

.case-pager-link:hover .case-pager-title {
  color: var(--ink);
}

@media (max-width: 760px) {
  .site-header {
    grid-template-columns: 1fr;
    height: auto;
    gap: 14px;
    padding: 14px 16px 0;
  }

  .brand {
    justify-self: start;
  }

  .site-nav {
    width: calc(100vw - 32px);
    height: 42px;
    justify-content: flex-start;
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav button,
  .site-nav a {
    font-size: 0.86rem;
  }

  .hero {
    padding: 118px 18px 58px;
    align-content: center;
  }

  .intro-panel {
    --intro-content-shift: clamp(82px, 12vh, 104px);
    min-height: 100svh;
    padding: 132px 18px 82px;
    scroll-margin-top: 104px;
  }

  .intro-title {
    max-width: 100%;
  }

  .intro-title h2 {
    font-size: clamp(2.55rem, 11vw, 3.05rem);
    line-height: 1.05;
  }

  .intro-copy {
    width: 100%;
    max-width: 100%;
    margin-top: 30px;
  }

  .intro-copy p {
    font-size: clamp(0.92rem, 3.9vw, 1rem);
    line-height: 1.45;
  }

  .intro-copy .intro-note {
    margin-top: 20px;
    font-size: clamp(0.9rem, 3.6vw, 0.98rem);
  }

  .intro-flower-primary {
    top: calc(50% - 146px);
    left: calc(50% + 46px);
    width: 92px;
    height: 92px;
  }

  .intro-flower-secondary {
    top: calc(50% - 58px);
    left: calc(50% - 46px);
    width: 82px;
    height: 82px;
  }

  .intro-flower-tertiary {
    top: calc(50% - 24px);
    left: calc(50% + 116px);
    width: 66px;
    height: 66px;
  }

  .intro-flower-quaternary {
    top: calc(50% - 142px);
    left: calc(50% - 94px);
    width: 60px;
    height: 60px;
  }

  .grid-field {
    display: none;
  }

  .particle-stage {
    height: clamp(300px, 82vw, 370px);
    margin-top: 20px;
  }

  .hero-copy {
    margin-top: -66px;
    text-align: left;
  }

  .hero-copy p:last-child {
    font-size: 1.08rem;
  }

  .label-ready {
    top: 25%;
    left: 10%;
  }

  .page-background {
    --grid-size: 34px;
    inset: 0;
  }

  .scroll-cue {
    bottom: 24px;
  }

  .hover-text-cue {
    top: calc(50% + 18px);
    right: 18px;
    left: auto;
    transform: none;
  }

  .section-panel {
    grid-template-columns: 1fr;
    min-height: 62svh;
    padding: 72px 18px;
    scroll-margin-top: 104px;
  }

  .work-projects-section {
    min-height: 100svh;
    gap: 22px;
    padding: 96px 18px 42px;
  }

  .work-projects-section h2 {
    margin-bottom: 14px;
  }

  .work-projects-header {
    display: block;
  }

  .work-mode-switch {
    margin: 20px 0 0;
  }

  .project-rail {
    width: 100%;
    height: auto;
  }

  .label-reel {
    display: none;
  }

  .project-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    padding: 16px 2px;
  }

  .project-visual {
    width: 96px;
  }

  .project-card p {
    font-size: 0.84rem;
    line-height: 1.4;
  }

  .project-tags {
    margin-top: 8px;
  }

  .project-tags span {
    font-size: 0.62rem;
  }

  .case-back {
    top: auto;
    bottom: 18px;
    left: 16px;
  }

  .project-detail-page .case-back {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    margin: 112px 0 0 18px;
  }

  .work-machine {
    min-height: 100svh;
    padding: 118px 18px 58px;
    scroll-margin-top: 104px;
  }

  .work-machine-inner {
    align-items: stretch;
    gap: 18px;
    width: 100%;
    text-align: left;
  }

  .tech-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tech-copy {
    min-height: auto;
  }

  .tech-copy h2 {
    max-width: 100%;
  }

  .work-machine-inner .label-stack {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    display: inline-block;
    justify-self: start;
    margin-top: 10px;
    margin-left: clamp(44px, 18vw, 94px);
    transform: none;
  }

  .tech-canvas-shell {
    aspect-ratio: 1056 / 512;
    min-height: clamp(150px, 32vw, 210px);
  }

  .work-roller {
    width: 100%;
    max-width: none;
  }

  .tech-roller-card {
    height: 180px;
    border-radius: 0;
  }

  .work-roller-window {
    gap: 12px;
    height: 100%;
    padding: 16px 0;
  }

  .roller-set {
    gap: 24px;
    padding: 0 14px;
  }

  .roller-item {
    width: auto;
    min-height: 60px;
    padding: 8px 6px;
  }

  .tool-name {
    font-size: 1rem;
  }

  .contact-panel {
    min-height: 100svh;
  }

  .project-detail-main {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 26px 18px 68px;
  }

  .project-detail-shell {
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
    margin: 0;
  }

  .project-detail-head {
    align-items: flex-start;
    width: min(330px, calc(100vw - 36px));
    max-width: min(330px, calc(100vw - 36px));
    margin-right: 0;
    margin-left: 0;
    text-align: left;
  }

  .project-detail-copy h1 {
    width: min(300px, 100%);
    max-width: min(300px, 100%);
    font-size: clamp(2.2rem, 9.2vw, 2.55rem);
    text-align: left;
    text-wrap: balance;
  }

  .project-detail-copy .project-detail-lead,
  .project-page-meta {
    width: min(300px, calc(100vw - 48px));
    max-width: min(300px, calc(100vw - 48px));
    margin-right: 0;
    margin-left: 0;
    overflow-wrap: normal;
    text-align: left;
    word-break: normal;
  }

  .project-meta-list {
    width: min(330px, calc(100vw - 36px));
    max-width: min(330px, calc(100vw - 36px));
    margin-right: 0;
    margin-left: 0;
  }

  .project-meta-list {
    grid-template-columns: 1fr;
    justify-content: flex-start;
    text-align: left;
  }

  .project-media-grid {
    grid-template-columns: 1fr;
  }

  .case-decision-grid {
    grid-template-columns: 1fr;
  }

  .project-comic-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .project-comic-stack.is-five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-comic-stack.is-pair {
    grid-template-columns: 1fr;
  }

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

  .case-media-split .project-detail-figure {
    margin-top: clamp(22px, 3.6vh, 34px);
  }

  .case-criteria {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-detail-figure.is-diagram {
    overflow-x: auto;
  }

  .project-detail-figure.is-diagram .case-flow-diagram {
    min-width: 760px;
  }

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

  .case-split-copy {
    padding-top: 0;
    padding-bottom: 0;
  }

  .case-split-figure {
    height: auto;
    justify-self: start;
    width: min(144px, 48vw);
  }

  .case-split-figure img {
    height: 100%;
    object-fit: cover;
  }

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

  .project-detail-section,
  .case-block {
    width: min(330px, calc(100vw - 36px));
    max-width: min(330px, calc(100vw - 36px));
    margin-right: 0;
    margin-left: 0;
  }

  .project-meta-list li,
  .project-detail-section li,
  .case-block p,
  .case-decision-list li,
  .case-decision-card p {
    overflow-wrap: normal;
    word-break: normal;
  }

  .case-timing-tick:nth-of-type(2n) {
    display: none;
  }

}

@media (max-width: 420px) {
  .site-nav {
    gap: 18px;
  }

  .site-nav button,
  .site-nav a {
    font-size: 0.82rem;
  }

  .intro-panel {
    padding-top: 126px;
  }

  .intro-title h2 {
    font-size: clamp(2.42rem, 10.8vw, 2.85rem);
  }

  .intro-copy p {
    font-size: clamp(0.9rem, 3.9vw, 0.98rem);
  }

  .intro-copy .intro-note {
    font-size: 0.9rem;
  }

  .intro-copy {
    max-width: 100%;
    margin-top: 28px;
  }

  .tech-copy h2 {
    font-size: clamp(2.42rem, 10.8vw, 2.85rem);
    font-weight: 450;
    line-height: 1.05;
  }

  .work-roller-window {
    height: 100%;
  }

  .project-detail-copy h1 {
    font-size: clamp(1.95rem, 8.8vw, 2.25rem);
  }

  .project-detail-shell,
  .project-detail-head,
  .project-meta-list {
    width: min(330px, calc(100vw - 36px));
    max-width: min(330px, calc(100vw - 36px));
  }

  .project-detail-copy .project-detail-lead,
  .project-page-meta {
    width: min(292px, calc(100vw - 48px));
    max-width: min(292px, calc(100vw - 48px));
  }

  .project-detail-copy h1 {
    width: min(292px, calc(100vw - 36px));
    max-width: min(292px, calc(100vw - 36px));
  }

  .roller-item {
    width: auto;
    min-height: 72px;
    padding: 8px 6px;
  }

  .tool-name {
    font-size: 0.95rem;
  }

  .intro-flower-primary {
    top: calc(50% - 132px);
    width: 84px;
    height: 84px;
  }

  .intro-flower-secondary {
    top: calc(50% - 52px);
    width: 74px;
    height: 74px;
  }

  .intro-flower-tertiary {
    top: calc(50% - 20px);
    left: calc(50% + 104px);
    width: 58px;
    height: 58px;
  }

  .intro-flower-quaternary {
    top: calc(50% - 130px);
    left: calc(50% - 82px);
    width: 54px;
    height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .orbit-dot,
  .orbit-dot::before,
  .grainient-field,
  .grainient-field::before,
  .intro-flower::before,
  .type-target.is-typing::after,
  .type-target.has-cursor::after,
  .system-label.is-dot-flashing::before {
    animation: none;
  }

  .project-card {
    transition: none;
  }
}

/* ---------------------------------------------------------------- */
/* Case study components: capabilities, TOC, entrance, lightbox,    */
/* compare slider, map table, notes, pager buttons, press hover     */
/* ---------------------------------------------------------------- */

.case-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.case-capabilities span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 11px;
  border: 1px solid rgba(47, 114, 255, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
  color: rgba(18, 20, 23, 0.6);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.case-capabilities span::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--blue, #2f72ff);
  opacity: 0.7;
}

.case-block > h2 {
  scroll-margin-top: 96px;
}

.case-toc {
  position: fixed;
  top: 176px;
  left: clamp(16px, 4vw, 44px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 216px;
}

.case-toc a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: rgba(90, 101, 116, 0.48);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
  transition: color 180ms ease;
}

.case-toc-index {
  position: relative;
  flex: 0 0 auto;
}

.case-toc-index::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue, #2f72ff);
  opacity: 0;
  transform: translateY(-50%) scale(0.5);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.case-toc a:hover {
  color: rgba(18, 20, 23, 0.72);
}

.case-toc a.is-active {
  color: var(--ink);
}

.case-toc a.is-active .case-toc-index::before {
  opacity: 0.85;
  transform: translateY(-50%) scale(1);
}

@media (max-width: 1279px) {
  .case-toc {
    display: none;
  }
}

.case-anim {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 620ms ease,
    transform 620ms ease;
}

.case-anim.is-inview {
  opacity: 1;
  transform: none;
}

.case-anim .case-decision-card,
.case-anim .interview-card,
.case-anim .case-map-row {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 480ms ease,
    transform 480ms ease;
}

.case-anim.is-inview .case-decision-card,
.case-anim.is-inview .interview-card,
.case-anim.is-inview .case-map-row {
  opacity: 1;
  transform: none;
}

.case-anim.is-inview .case-decision-card:nth-child(2),
.case-anim.is-inview .interview-card:nth-child(2),
.case-anim.is-inview .case-map-row:nth-child(3) {
  transition-delay: 90ms;
}

.case-anim.is-inview .case-decision-card:nth-child(3),
.case-anim.is-inview .interview-card:nth-child(3),
.case-anim.is-inview .case-map-row:nth-child(4) {
  transition-delay: 180ms;
}

.case-anim.is-inview .interview-card:nth-child(4),
.case-anim.is-inview .case-map-row:nth-child(5) {
  transition-delay: 270ms;
}

@media (prefers-reduced-motion: reduce) {
  .case-anim,
  .case-anim .case-decision-card,
  .case-anim .interview-card,
  .case-anim .case-map-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.project-detail-figure img.is-zoomable {
  cursor: zoom-in;
}

body.case-lightbox-open {
  overflow: hidden;
}

.case-lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 5vw, 60px);
  background: rgba(251, 251, 247, 0.92);
  backdrop-filter: blur(16px) saturate(1.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.case-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.case-lightbox img,
.case-lightbox video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(18, 20, 23, 0.18);
  cursor: zoom-out;
}

.case-lightbox-caption {
  position: absolute;
  bottom: clamp(42px, 7.6vh, 64px);
  left: 50%;
  max-width: min(80vw, 640px);
  margin: 0;
  padding: 4px 12px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: rgba(251, 251, 247, 0.85);
  color: rgba(18, 20, 23, 0.75);
  font-size: 0.95rem;
  text-align: center;
}

.case-lightbox.is-plain img {
  border-radius: 0;
  box-shadow: none;
}

.case-lightbox-nav {
  appearance: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(18, 20, 23, 0.11);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(18, 20, 23, 0.58);
  box-shadow: 0 14px 40px rgba(18, 20, 23, 0.05);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.case-lightbox-nav:hover,
.case-lightbox-nav:focus-visible {
  border-color: rgba(18, 20, 23, 0.22);
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
}

.case-lightbox-nav.is-prev {
  left: clamp(16px, 4vw, 44px);
}

.case-lightbox-nav.is-next {
  right: clamp(16px, 4vw, 44px);
}

.case-lightbox-count {
  position: absolute;
  bottom: clamp(16px, 3.4vh, 30px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: rgba(18, 20, 23, 0.45);
}

.project-detail-figure video.is-zoomable {
  cursor: zoom-in;
}

.compare-slider {
  --compare: 50%;
  position: relative;
  margin: 22px 0 0;
  overflow: hidden;
  border: 1px solid rgba(18, 20, 23, 0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(18, 20, 23, 0.06);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.compare-slider img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.compare-under,
.compare-over {
  margin: 0;
}

.compare-over {
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: inset(0 calc(100% - var(--compare)) 0 0);
}

.compare-over img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.compare-handle {
  appearance: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare);
  width: 2px;
  margin-left: -1px;
  padding: 0;
  border: 0;
  background: rgba(18, 20, 23, 0.5);
  cursor: ew-resize;
}

.compare-handle::after {
  content: "< >";
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 28px;
  border: 1px solid rgba(18, 20, 23, 0.14);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(18, 20, 23, 0.62);
  box-shadow: 0 10px 26px rgba(18, 20, 23, 0.14);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.72rem;
  transform: translate(-50%, -50%);
}

.compare-tag {
  position: absolute;
  top: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid rgba(18, 20, 23, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.85);
  color: rgba(18, 20, 23, 0.6);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 650;
  pointer-events: none;
}

.compare-tag-a {
  left: 10px;
}

.compare-tag-b {
  right: 10px;
}

.case-map-table {
  display: flex;
  flex-direction: column;
  margin: 20px 0 0;
  border-top: 1px solid rgba(18, 20, 23, 0.1);
}

.case-map-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(14px, 2.6vw, 30px);
  padding: clamp(13px, 2vh, 17px) 2px;
  border-bottom: 1px solid rgba(18, 20, 23, 0.08);
}

.case-map-head {
  padding-top: 10px;
  padding-bottom: 10px;
}

.case-map-head span {
  color: rgba(90, 101, 116, 0.55);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.case-map-row p {
  margin: 0;
  color: rgba(18, 20, 23, 0.66);
  font-size: clamp(0.9rem, 1.08vw, 0.97rem);
  line-height: 1.55;
}

.case-map-row p.case-map-constraint {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 700px) {
  .case-map-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.case-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(47, 114, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
}

.case-note-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(47, 114, 255, 0.72);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.case-note p {
  margin: 0;
  color: rgba(18, 20, 23, 0.62);
  font-size: clamp(0.9rem, 1.08vw, 0.97rem);
  line-height: 1.6;
}

.case-pager-link {
  position: relative;
  align-items: flex-start;
}

.case-pager-link.is-next {
  align-items: flex-end;
}

.case-pager-btn {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(18, 20, 23, 0.11);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  color: rgba(18, 20, 23, 0.58);
  box-shadow: 0 14px 40px rgba(18, 20, 23, 0.05);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.case-pager-link:hover .case-pager-btn {
  border-color: rgba(18, 20, 23, 0.22);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  transform: translateY(-2px);
}

.case-pager-preview {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  z-index: 5;
  width: clamp(180px, 20vw, 250px);
  overflow: hidden;
  border: 1px solid rgba(18, 20, 23, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(18, 20, 23, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.97);
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.18, 0.84, 0.24, 1);
}

.case-pager-link.is-next .case-pager-preview {
  left: auto;
  right: 0;
}

.case-pager-link:hover .case-pager-preview {
  opacity: 1;
  transform: none;
}

.case-pager-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 16px;
}

.contact-mini {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(18, 20, 23, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
  color: rgba(18, 20, 23, 0.5);
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.76rem;
  text-decoration: none;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.contact-mini:hover {
  border-color: rgba(18, 20, 23, 0.22);
  color: var(--ink);
  transform: translateY(-2px);
}

.press-item {
  position: relative;
  transition: background 200ms ease;
}

.press-stagger .press-item {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 560ms ease,
    transform 560ms ease,
    background 200ms ease;
}

.press-stagger.is-inview .press-item {
  opacity: 1;
  transform: none;
}

.press-stagger.is-inview .press-item:nth-child(2) {
  transition-delay: 70ms;
}

.press-stagger.is-inview .press-item:nth-child(3) {
  transition-delay: 140ms;
}

.press-stagger.is-inview .press-item:nth-child(4) {
  transition-delay: 210ms;
}

.press-stagger.is-inview .press-item:nth-child(5) {
  transition-delay: 280ms;
}

@media (prefers-reduced-motion: reduce) {
  .press-stagger .press-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.press-item.has-link:hover {
  background: rgba(255, 255, 255, 0.4);
}

.press-link {
  position: static;
  color: inherit;
  text-decoration: none;
}

.press-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.press-arrow {
  display: inline-block;
  margin-left: 7px;
  color: rgba(47, 114, 255, 0.5);
  font-size: 0.8em;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.press-item.has-link:hover .press-arrow {
  opacity: 1;
  transform: none;
}

.press-hover-logo {
  position: absolute;
  top: 50%;
  right: -128px;
  z-index: 2;
  display: block;
  width: 96px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) rotate(5deg) scale(0.9);
  transition:
    opacity 240ms ease,
    transform 300ms cubic-bezier(0.18, 0.84, 0.24, 1);
}

/* wide banner-style lockups (e.g. the IEEE SMC society logo) need more
   width than a square badge to stay legible at this scale */
.press-hover-logo.is-wide-logo {
  right: -190px;
  width: 168px;
}

.press-hover-logo img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 10px 24px rgba(18, 20, 23, 0.14));
}

/* white badge variants flip to ink so they read on the cream background */
.press-hover-logo img.press-logo-invert {
  mix-blend-mode: normal;
  filter: invert(0.82) drop-shadow(0 10px 24px rgba(18, 20, 23, 0.14));
}

.press-item:hover .press-hover-logo {
  opacity: 1;
  transform: translateY(-50%) rotate(0deg) scale(1);
}

.press-hover-logo .project-link-flower {
  top: 8px;
  left: 6px;
}

.press-item:hover .project-link-flower-a {
  opacity: 1;
  transform: translate3d(-30px, -26px, 0) scale(0.72) rotate(-160deg);
}

.press-item:hover .project-link-flower-b {
  opacity: 1;
  transform: translate3d(96px, 54px, 0) scale(0.6) rotate(150deg);
}

@media (max-width: 1080px) {
  .press-hover-logo {
    display: none;
  }
}

/* mobile fixes from the responsive audit: touch devices have no hover, so
   the hover cue is noise that collides with the intro title; the fixed
   corner brackets strike through full-width text; the 30%-cream header
   smears over images that scroll beneath it */
@media (max-width: 760px) {
  .hover-text-cue {
    display: none;
  }

  .corner {
    display: none;
  }

  .site-header {
    background: rgba(251, 251, 247, 0.88);
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
  }
}

/* focusable dismiss for assistive tech; the visible UI closes by clicking
   anywhere or pressing Escape (user removed the visible close button) */
.case-lightbox-sr-close {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}