@font-face {
  font-family: "Helvetica Neue Medium";
  src: url("/public/assets/helvetica-neue-medium.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Helvetica Neue Light";
  src: url("/public/assets/helvetica-neue-light.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "Helvetica Neue Regular";
  src: url("/public/assets/helvetica-neue-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Helvetica Neue Bold";
  src: url("/public/assets/helvetica-neue-bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Mourier";
  src: url("/public/assets/mourier.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --black: #000;
  --panel: #020202;
  --white: #fff;
  --brand-green: #00f082;
  --muted: #828282;
  --edge: 40px;
  --tile: 355px;
  --gap: 10px;
  --ease: cubic-bezier(0.44, 0, 0.56, 1);
  --logo-top: 30px;
  --logo-left: 40px;
  --logo-width: clamp(100px, 8.8vw, 130px);
}

html[data-theme="light"] {
  color-scheme: light;
  --black: #f3f2ee;
  --panel: #e8e7e2;
  --white: #111111;
  --brand-green: #00b86b;
  --muted: #626262;
}

html[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--black); color: var(--white); transition: background-color 460ms cubic-bezier(.16, 1, .3, 1), color 360ms ease; }

body {
  overflow: hidden;
  font-family: "Helvetica Neue Medium", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }

.page {
  width: 100%;
  height: 100svh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  background: var(--black);
  transition: background-color 460ms cubic-bezier(.16, 1, .3, 1);
}

.home-dither-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 460ms cubic-bezier(.16, 1, .3, 1);
}

body:is(.is-home-page, .is-about-page) .home-dither-background { opacity: .4; }
html[data-theme="dark"] body:is(.is-home-page, .is-about-page) .home-dither-background { opacity: .3; }

.gallery-stage,
.socials {
  position: relative;
  z-index: 1;
}

.intro {
  flex: none;
  width: 100%;
  padding: var(--edge);
  overflow: hidden;
}

.intro-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

.portrait { width: 35px; height: 35px; display: block; border-radius: 4px; object-fit: cover; }

.intro-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: max-content; }

.intro h1 {
  width: 476px;
  max-width: calc(100vw - (var(--edge) * 2));
  margin: 0;
  font: 500 18px/normal "Helvetica Neue Medium", sans-serif;
  text-transform: uppercase;
  text-wrap: balance;
}

.contact-trigger {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  font: 500 12px/normal "Helvetica Neue Medium", sans-serif;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 1px;
}

.gallery-stage {
  flex: 1 0 0;
  width: 100%;
  min-height: 1px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.ticker-plane {
  width: 100vw;
  height: var(--tile);
  flex: none;
  transform-style: preserve-3d;
  transform: perspective(967px) translateZ(186px) rotate(-20deg) rotateX(19deg) rotateY(37deg);
}

.ticker-viewport { width: 100%; height: 100%; position: relative; overflow: visible; cursor: grab; touch-action: pan-y; user-select: none; }
.ticker-viewport.is-dragging { cursor: grabbing; }

.ticker-track {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--tile);
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
}

.ticker-item { width: var(--tile); height: var(--tile); flex: 0 0 var(--tile); margin: 0; position: relative; overflow: hidden; }
.ticker-item img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }

.pixel-grid {
  --pixel-x: 50%;
  --pixel-y: 50%;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle 92px at var(--pixel-x) var(--pixel-y), #000 0 55%, rgba(0,0,0,.82) 72%, transparent 100%);
  mask-image: radial-gradient(circle 92px at var(--pixel-x) var(--pixel-y), #000 0 55%, rgba(0,0,0,.82) 72%, transparent 100%);
  transition: opacity 180ms ease;
}

.portfolio-hover-label {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 70;
  min-width: 10px;
  min-height: 10px;
  max-width: 10px;
  max-height: 10px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0c0c0c;
  color: var(--white);
  opacity: 0;
  pointer-events: none;
  will-change: transform, max-width, max-height, padding, opacity;
  transition: opacity 140ms ease, max-width 400ms cubic-bezier(.16, 1, .3, 1), max-height 400ms cubic-bezier(.16, 1, .3, 1), padding 300ms ease;
}

.portfolio-hover-label > span {
  white-space: nowrap;
  opacity: 0;
  transform: scale(.8) translateY(4px);
  font: 400 18px/1 "Helvetica Neue Regular", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  transition: opacity 300ms cubic-bezier(.16, 1, .3, 1), transform 300ms cubic-bezier(.16, 1, .3, 1);
}

.portfolio-hover-label.is-visible {
  max-width: 400px;
  max-height: 100px;
  padding: 9px 16px;
  opacity: 1;
}

.portfolio-hover-label.is-visible > span { opacity: 1; transform: scale(1) translateY(0); }
.portfolio-hover-label .scramble-glyph { color: var(--brand-green); }

html[data-theme="light"] .portfolio-hover-label {
  background: #d9d9d9;
  color: #181818;
}

.home-torch-light {
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle var(--torch-core-radius, 16.4vmax) at var(--torch-light-x, 50vw) var(--torch-light-y, 50vh), rgba(255, 191, 105, .24) 0%, rgba(255, 151, 65, .18) 18%, rgba(255, 111, 26, .11) 38%, rgba(255, 92, 12, .058) 58%, rgba(255, 82, 8, .022) 78%, transparent 100%);
  transition: opacity 520ms cubic-bezier(.16, 1, .3, 1);
  will-change: background, opacity;
}

.home-torch-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html.has-torch-cursor[data-theme="dark"] body:is(.is-home-page, .is-about-page) .home-torch-light { opacity: 1; }

.torch-cursor {
  position: fixed;
  left: var(--torch-x, -200px);
  top: var(--torch-y, -200px);
  z-index: 150;
  width: 60px;
  height: 118px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -22%) rotate(var(--torch-tilt, 0deg));
  transform-origin: 50% 22%;
  filter: drop-shadow(0 0 11px rgba(255, 118, 20, .42));
  will-change: left, top, opacity, transform;
  transition: opacity 100ms ease, transform 130ms cubic-bezier(.16, 1, .3, 1);
}

.torch-cursor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22%;
  z-index: 4;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 194, 64, .82);
  border-radius: 50%;
  background: rgba(255, 132, 24, .18);
  box-shadow: 0 0 8px rgba(255, 116, 20, .65);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease, width 220ms cubic-bezier(.16, 1, .3, 1), height 220ms cubic-bezier(.16, 1, .3, 1), background-color 180ms ease, box-shadow 220ms ease;
}

.torch-cursor.is-action::after {
  width: 34px;
  height: 34px;
  border-color: rgba(255, 210, 96, .95);
  background: rgba(255, 116, 20, .1);
  box-shadow: 0 0 10px rgba(255, 137, 28, .9), 0 0 24px rgba(255, 89, 0, .58), inset 0 0 12px rgba(255, 183, 56, .26);
  opacity: 1;
  animation: torch-target-pulse 900ms ease-in-out infinite;
}

.torch-cursor img {
  position: absolute;
  height: auto;
  opacity: 0;
}

.torch-cursor-base {
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 41.83px;
  opacity: 1 !important;
}

.torch-flame-frame {
  z-index: 1;
}

.torch-flame-one { left: 17.31px; top: 1.15px; width: 42.12px; animation: torch-frame-one 720ms steps(1, end) infinite; }
.torch-flame-two { left: 13.27px; top: 12.31px; width: 46.73px; animation: torch-frame-two 720ms steps(1, end) infinite; }
.torch-flame-three { left: 16.73px; top: 14.62px; width: 43.27px; animation: torch-frame-three 720ms steps(1, end) infinite; }

.torch-embers {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
}

.torch-embers i {
  position: absolute;
  left: var(--ember-x);
  top: var(--ember-y);
  width: var(--ember-size);
  height: calc(var(--ember-size) + 2.4px);
  border-radius: 55% 45% 62% 38%;
  background: linear-gradient(to top, #ff4d00, #ffad1f 58%, #fff0a0);
  box-shadow: 0 0 7px rgba(255, 112, 14, .9);
  opacity: 0;
  animation: torch-ember-rise var(--ember-duration) cubic-bezier(.22, .68, .38, 1) var(--ember-delay) infinite;
  animation-play-state: paused;
}

html[data-theme="dark"] .torch-embers i { animation-play-state: running; }

.torch-embers i:nth-child(1) { --ember-x: 26px; --ember-y: 8px; --ember-size: 3.7px; --ember-duration: 1.3s; --ember-delay: -.2s; --ember-drift: -9px; --ember-rise: -44px; }
.torch-embers i:nth-child(2) { --ember-x: 35px; --ember-y: 14px; --ember-size: 5px; --ember-duration: 1.55s; --ember-delay: -.85s; --ember-drift: 11px; --ember-rise: -56px; }
.torch-embers i:nth-child(3) { --ember-x: 30px; --ember-y: 2px; --ember-size: 3.1px; --ember-duration: 1.8s; --ember-delay: -1.3s; --ember-drift: 5px; --ember-rise: -64px; }
.torch-embers i:nth-child(4) { --ember-x: 22px; --ember-y: 19px; --ember-size: 4.2px; --ember-duration: 1.45s; --ember-delay: -.55s; --ember-drift: -12px; --ember-rise: -49px; }
.torch-embers i:nth-child(5) { --ember-x: 40px; --ember-y: 21px; --ember-size: 3.4px; --ember-duration: 1.7s; --ember-delay: -1.1s; --ember-drift: 8px; --ember-rise: -47px; }
.torch-embers i:nth-child(6) { --ember-x: 31px; --ember-y: 16px; --ember-size: 2.6px; --ember-duration: 1.2s; --ember-delay: -.7s; --ember-drift: -5px; --ember-rise: -37px; }
.torch-embers i:nth-child(7) { --ember-x: 36px; --ember-y: 6px; --ember-size: 4.1px; --ember-duration: 1.95s; --ember-delay: -1.6s; --ember-drift: 14px; --ember-rise: -66px; }
.torch-embers i:nth-child(8) { --ember-x: 24px; --ember-y: 11px; --ember-size: 2.9px; --ember-duration: 1.65s; --ember-delay: -1.35s; --ember-drift: -10px; --ember-rise: -59px; }

html.has-torch-cursor[data-theme="dark"],
html.has-torch-cursor[data-theme="dark"] body,
html.has-torch-cursor[data-theme="dark"] body * { cursor: none !important; }

html.has-torch-cursor[data-theme="dark"] .torch-cursor.is-visible { opacity: 1; }

.site-footer-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 19px;
  padding: var(--edge);
  color: #484848;
  font: 500 12px/normal "Helvetica Neue Medium", sans-serif;
}

.socials { flex: none; overflow: hidden; }

.site-footer-row a {
  color: inherit;
  text-decoration: none;
  text-transform: none;
  transition: color 180ms ease;
}

.site-footer-copyright {
  margin-right: auto;
  white-space: nowrap;
}

.subpage-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
}

html[data-theme="light"] .site-footer-row { color: #b2b2b2; }

.site-footer-row a:hover, .site-footer-row a:focus-visible { color: var(--white); }
.site-footer-row a[href*="github.com"]:hover,
.site-footer-row a[href*="github.com"]:focus-visible { color: #111; }
html[data-theme="dark"] .site-footer-row a[href*="github.com"]:hover,
html[data-theme="dark"] .site-footer-row a[href*="github.com"]:focus-visible { color: #fff; }
.site-footer-row a:nth-of-type(1):is(:hover, :focus-visible) { color: #02afed; }
.site-footer-row a:nth-of-type(2):is(:hover, :focus-visible) { color: #ff5e3b; }
.site-footer-row a:nth-of-type(3):is(:hover, :focus-visible) { color: #ff2542; }
.site-footer-row a:nth-of-type(4):is(:hover, :focus-visible) { color: #111; }
html[data-theme="dark"] .site-footer-row a:nth-of-type(4):is(:hover, :focus-visible) { color: #fff; }

.home-video-trigger {
  position: absolute;
  right: var(--edge);
  bottom: 82px;
  z-index: 4;
  width: clamp(168px, 12vw, 220px);
  aspect-ratio: 824 / 481;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 2px;
  background: #d8d8d5;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1), border-color 220ms ease;
}

.home-video-trigger > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1), filter 300ms ease;
}

.home-video-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .06);
}

.home-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: rgba(12, 12, 12, .46);
  color: #fff;
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  transform: translate(-50%, -50%);
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1);
}

.home-video-play svg { width: 21px; fill: currentColor; }
.home-video-trigger:hover,
.home-video-trigger:focus-visible { transform: translateY(-4px); outline: 0; }
.home-video-trigger:hover > img,
.home-video-trigger:focus-visible > img { transform: scale(1.035); filter: contrast(1.04); }
.home-video-trigger:hover .home-video-play,
.home-video-trigger:focus-visible .home-video-play { transform: translate(-50%, -50%) scale(1.12); }

.featured-video-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.featured-video-modal[hidden] { display: none; }

.featured-video-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.featured-video-dialog {
  position: relative;
  z-index: 1;
  max-width: calc(100vw - 48px);
  max-height: calc(100svh - 48px);
  display: flex;
  flex-direction: column;
  color: #f4f4f4;
}

.featured-video-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.featured-video-bar { padding-bottom: 14px; }

.featured-video-close {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: 300 25px/1 "Helvetica Neue Light", sans-serif;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, transform 220ms ease;
}

.featured-video-close:hover,
.featured-video-close:focus-visible { color: var(--brand-green); border-color: var(--brand-green); transform: rotate(6deg); outline: 0; }

.featured-video-player {
  width: min(42svh, calc(100vw - 48px));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
}

.featured-video-player iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}


.site-logo {
  position: fixed;
  top: var(--logo-top);
  left: var(--logo-left);
  z-index: 30;
  width: var(--logo-width);
  color: var(--brand-green);
  opacity: 0;
  transform: rotate(-6deg);
  transform-origin: center;
  pointer-events: auto;
  animation: site-logo-reveal .01s linear 3150ms forwards;
}

.site-logo svg { width: 100%; height: auto; display: block; overflow: visible; }

.logo-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo-s { stroke-width: 11; }
.logo-flourish { stroke-width: 8; }

.primary-nav {
  position: fixed;
  top: 37px;
  right: var(--edge);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 42px);
  opacity: 1;
  visibility: visible;
}

.primary-nav a {
  height: 18px;
  display: block;
  overflow: hidden;
  color: var(--muted);
  font: 500 14px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(2px);
  transition: color 220ms ease;
}

.nav-label {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

.nav-label > span {
  height: 18px;
  flex: 0 0 18px;
  display: flex;
  align-items: center;
}

.nav-label > span:last-child { color: var(--brand-green); }

.primary-nav a:hover .nav-label,
.primary-nav a:focus-visible .nav-label { transform: translateY(-18px); }

.primary-nav a[aria-current="page"] .nav-label > span:first-child { color: var(--brand-green); }

.theme-toggle {
  position: relative;
  width: 28px;
  height: 28px;
  margin: -7px 0 -7px 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.theme-choice {
  position: absolute;
  inset: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.theme-choice-light { color: #ff4b12; }
.theme-choice-dark { color: var(--brand-green); }
.theme-choice svg {
  width: 22px;
  height: 22px;
  display: block;
  transform-origin: center;
  transition: opacity 300ms ease, transform 480ms cubic-bezier(.16, 1, .3, 1), color 320ms ease;
}
.theme-choice-light svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.theme-choice-dark svg { fill: currentColor; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }

html[data-theme="dark"] .theme-choice-light svg { opacity: 0; transform: rotate(-90deg) scale(.3); }
html[data-theme="dark"] .theme-choice-dark svg { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .theme-choice-light svg { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .theme-choice-dark svg { opacity: 0; transform: rotate(90deg) scale(.3); }

.theme-toggle:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }

.ai-orb-trigger {
  position: fixed;
  top: 31px;
  left: calc(var(--logo-left) + var(--logo-width) + 18px);
  z-index: 45;
  width: 54px;
  height: 54px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px) scale(.82);
  animation: ai-trigger-reveal 720ms cubic-bezier(.16, 1, .3, 1) 2920ms forwards;
}

.ai-character {
  position: relative;
  width: 44px;
  height: 44px;
  display: block;
  transform-origin: center;
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
  animation: ai-character-float 3.8s ease-in-out infinite;
}

.ai-character svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ai-character-body {
  transform-box: fill-box;
  transform-origin: center;
  animation: ai-character-turn 12s linear infinite;
}

.ai-character-body > path:first-child { stroke: rgba(255,255,255,.28); stroke-width: 2; }

.ai-character-highlight { opacity: .74; }
#ai-character-fill stop { transition: stop-color 360ms ease; }
html[data-theme="dark"] #ai-character-fill stop:nth-child(1) { stop-color: #f2f2f2; }
html[data-theme="dark"] #ai-character-fill stop:nth-child(2) { stop-color: #d8d8d8; }
html[data-theme="dark"] #ai-character-fill stop:nth-child(3) { stop-color: #b9b9b9; }
html[data-theme="dark"] #ai-character-fill stop:nth-child(4) { stop-color: #929292; }
html[data-theme="dark"] .ai-character-body > path:first-child { stroke: rgba(255,255,255,.58); }
html[data-theme="dark"] .ai-character-highlight { opacity: .52; }
html[data-theme="dark"] .ai-eye { fill: #090909; }
html[data-theme="dark"] .ai-mouth { stroke: #090909; }
.ai-character-face {
  transform: scale(1.08);
  transform-origin: center;
  animation: ai-character-look-around 5.2s cubic-bezier(.44, 0, .56, 1) infinite;
}

.ai-character-eyes {
  transform-origin: 105.5px 112.5px;
  animation: ai-character-blink 5.2s linear infinite;
}
.ai-eye-unit { transform-box: fill-box; transform-origin: center; }
.ai-eye { fill: #f6f6f2; }
.ai-mouth {
  fill: none;
  stroke: #f6f6f2;
  stroke-width: 8;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}
.ai-mouth--smile { animation: ai-character-smile 5.2s ease-in-out infinite; }
.ai-mouth--thinking,
.ai-mouth--error { display: none; }

.ai-orb-trigger:hover .ai-character,
.ai-orb-trigger:focus-visible .ai-character { transform: scale(1.14) rotate(7deg); }
.ai-orb-trigger[aria-expanded="true"] .ai-character { transform: scale(1); }
.ai-orb-trigger[aria-expanded="true"] { top: 9px; left: 18px; z-index: 90; }
.ai-orb-trigger:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.ai-orb-trigger.is-busy .ai-character { animation: ai-character-think-bounce 740ms ease-in-out infinite alternate; }
.ai-orb-trigger.is-busy .ai-character-face { animation: none; transform: scale(1.08); }
.ai-orb-trigger.is-busy .ai-character-eyes { animation: ai-character-scan 1.15s ease-in-out infinite alternate; }
.ai-orb-trigger.is-busy .ai-mouth--smile { display: none; }
.ai-orb-trigger.is-busy .ai-mouth--thinking { display: block; animation: ai-character-thinking-mouth 740ms ease-in-out infinite alternate; }
.ai-orb-trigger[data-mood="success"] .ai-eye-unit--right { animation: ai-character-wink 1.1s cubic-bezier(.16, 1, .3, 1) both; }
.ai-orb-trigger[data-mood="success"] .ai-character { animation: ai-character-success 700ms cubic-bezier(.16, 1, .3, 1) both; }
.ai-orb-trigger[data-mood="error"] .ai-character-face { animation: ai-character-error-shake 520ms ease-in-out 2; }
.ai-orb-trigger[data-mood="error"] .ai-character-eyes { animation: ai-character-error-eyes 520ms ease-in-out 2; }
.ai-orb-trigger[data-mood="error"] .ai-mouth--smile { display: none; }
.ai-orb-trigger[data-mood="error"] .ai-mouth--error { display: block; }

.ai-assistant {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 80;
  width: min(390px, 100vw);
  height: 100svh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
  background: color-mix(in srgb, var(--black) 97%, transparent);
  color: var(--white);
  box-shadow: 18px 0 54px rgba(0,0,0,.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 480ms cubic-bezier(.16, 1, .3, 1), opacity 280ms ease;
}

.ai-assistant.is-open { opacity: 1; transform: translateX(0); }
.ai-assistant.is-closing { pointer-events: none; }
html[data-theme="light"] .ai-assistant { box-shadow: 18px 0 54px rgba(20,20,20,.08); }

.ai-assistant-header {
  min-height: 72px;
  padding: 18px 26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
}

.ai-assistant-close { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 300 32px/1 "Helvetica Neue Light", sans-serif; transition: color 180ms ease, transform 300ms ease; }
.ai-assistant-close:hover, .ai-assistant-close:focus-visible { color: var(--brand-green); transform: rotate(8deg); outline: 0; }

.ai-assistant-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
}

.ai-assistant-tabs button {
  height: 60px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 500 12px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .08em;
}
.ai-assistant-tabs svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-assistant-tabs button:last-child { border-right: 0; }
.ai-assistant-tabs button[aria-selected="true"] { background: var(--brand-green); color: #04140d; }
.ai-assistant-tabs button:focus-visible { outline: 1px solid var(--white); outline-offset: -4px; }

.ai-assistant-panel { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.ai-chat-log { min-height: 0; padding: 44px 30px 30px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overscroll-behavior: contain; }
.ai-message { max-width: 90%; margin: 0; padding: 13px 15px; color: var(--white); background: color-mix(in srgb, var(--white) 7%, transparent); font: 400 14px/1.65 "Helvetica Neue Regular", sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-message--welcome { max-width: 100%; padding: 0; background: transparent; color: color-mix(in srgb, var(--white) 72%, transparent); font-size: 16px; line-height: 1.65; }
.ai-message--user { align-self: flex-end; background: var(--brand-green); color: #05150e; }
.ai-message--error { color: #ff5e3b; border: 1px solid color-mix(in srgb, #ff5e3b 40%, transparent); background: transparent; }
.ai-message.is-thinking { color: var(--muted); }
.ai-message a { color: var(--brand-green); text-decoration: underline; text-underline-offset: 2px; }
.ai-message--user a { color: inherit; }

.ai-suggestions { margin-top: 26px; display: grid; gap: 12px; }
.ai-suggestions button { width: 100%; min-height: 62px; padding: 0 18px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 14px; align-items: center; gap: 12px; border: 1px solid color-mix(in srgb, var(--white) 13%, transparent); border-radius: 32px; background: color-mix(in srgb, var(--black) 90%, transparent); color: color-mix(in srgb, var(--white) 78%, transparent); cursor: pointer; text-align: left; transition: border-color 180ms ease, color 180ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1); }
.ai-suggestions button:hover, .ai-suggestions button:focus-visible { border-color: var(--brand-green); color: var(--white); transform: translateX(3px); outline: 0; }
.ai-suggestions svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-suggestions span { font: 400 13px/1.4 "Helvetica Neue Regular", sans-serif; }
.ai-suggestions b { font: 300 27px/1 "Helvetica Neue Light", sans-serif; text-align: right; }

.ai-prompt-form { padding: 14px 20px 20px; display: block; border-top: 0; }
.ai-prompt-form label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ai-prompt-control { position: relative; display: flex; align-items: center; }
.ai-prompt-form textarea { width: 100%; height: 64px; min-height: 64px; padding: 21px 70px 21px 16px; overflow: hidden; resize: none; border: 1px solid color-mix(in srgb, var(--brand-green) 78%, var(--white)); border-radius: 14px; outline: 0; background: color-mix(in srgb, var(--white) 3%, transparent); color: var(--white); font: 400 13px/20px "Helvetica Neue Regular", sans-serif; }
.ai-prompt-form textarea::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }
.ai-prompt-form textarea:focus { border-color: var(--brand-green); }
.ai-prompt-control button { position: absolute; top: 50%; right: 8px; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 10px; background: var(--white); color: var(--black); cursor: pointer; font: 500 0/1 "Helvetica Neue Medium", sans-serif; transform: translateY(-50%); }
.ai-prompt-form button b { color: var(--brand-green); font: 700 24px/1 "Helvetica Neue Bold", sans-serif; }
.ai-prompt-form button:disabled { cursor: wait; opacity: .45; }

.ai-image-output { min-height: 0; padding: 18px; display: grid; place-items: center; overflow: auto; }
.ai-image-output img { width: 100%; height: auto; display: block; background: var(--panel); }
.ai-image-result { width: 100%; display: grid; gap: 10px; }
.ai-image-download { min-height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--white) 22%, transparent); background: var(--black); color: var(--white); font: 500 9px/1 "Helvetica Neue Medium", sans-serif; letter-spacing: .12em; text-decoration: none; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.ai-image-download:hover,
.ai-image-download:focus-visible { border-color: var(--brand-green); background: var(--brand-green); color: #04140d; outline: none; }
.ai-image-placeholder { width: 100%; aspect-ratio: 1 / 1; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: 1px dashed color-mix(in srgb, var(--white) 22%, transparent); color: var(--muted); }
.ai-image-placeholder span { color: var(--brand-green); font: 500 8px/1 "Helvetica Neue Medium", sans-serif; letter-spacing: .12em; }
.ai-image-placeholder p { max-width: 23em; margin: 0; font: 400 12px/1.5 "Helvetica Neue Regular", sans-serif; }
.ai-image-placeholder.is-error { border-color: color-mix(in srgb, #ff5e3b 52%, transparent); color: #ff5e3b; }

@keyframes ai-character-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes ai-trigger-reveal { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ai-character-turn { to { rotate: 360deg; } }
@keyframes ai-character-look-around {
  0%, 14%, 48%, 100% { transform: translate(0, 0) scale(1.08) rotate(0); }
  22%, 37% { transform: translate(-10px, -3px) scale(1.08) rotate(-3deg); }
  57% { transform: translate(2px, 2px) scale(1.08) rotate(1deg); }
  66%, 84% { transform: translate(10px, -1px) scale(1.08) rotate(3deg); }
  91% { transform: translate(-2px, 1px) scale(1.08) rotate(-1deg); }
}
@keyframes ai-character-blink { 0%, 27%, 31%, 72%, 76%, 100% { transform: scaleY(1); } 29%, 74% { transform: scaleY(.12); } }
@keyframes ai-character-smile { 0%, 18%, 48%, 100% { transform: translateY(0) scale(1); } 28%, 38% { transform: translateY(1px) scaleX(.94) rotate(-2deg); } 66%, 84% { transform: translateY(-1px) scaleX(1.08) rotate(2deg); } }
@keyframes ai-character-thinking-mouth { to { transform: scaleX(.72) translateY(2px); } }
@keyframes ai-character-think-bounce { to { translate: 0 -3px; scale: 1.06; } }
@keyframes ai-character-scan { from { transform: translateX(-9px) scaleY(.82); } to { transform: translateX(9px) scaleY(.82); } }
@keyframes ai-character-wink { 0%, 30%, 72%, 100% { transform: scaleY(1); } 48%, 58% { transform: scaleY(.12); } }
@keyframes ai-character-success { 0% { transform: scale(1); } 45% { transform: scale(1.22) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes ai-character-error-shake { 0%, 100% { transform: translateX(0) scale(1.08) rotate(0); } 30% { transform: translateX(-7px) scale(1.08) rotate(-7deg); } 70% { transform: translateX(7px) scale(1.08) rotate(7deg); } }
@keyframes ai-character-error-eyes { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.38) rotate(-4deg); } }

body.is-work-page {
  overflow-x: hidden;
  overflow-y: auto;
  --work-column: min(74vw, 1080px);
}

body.is-work-page .page {
  height: auto;
  min-height: 100svh;
  display: block;
  overflow: visible;
  background-color: var(--black);
}

.work-page {
  width: 100%;
  position: relative;
  background: transparent;
  color: var(--white);
}

.work-hero {
  width: var(--work-column);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(112px, 13vh, 150px) 0 clamp(44px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.work-hero-main {
  width: 100%;
  display: block;
}

.work-page-title {
  width: 100%;
  margin: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  font: 700 clamp(210px, 33vw, 480px)/.72 "Helvetica Neue Bold", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.025em;
  text-transform: none;
  transform: scaleX(.88);
  transform-origin: center;
}

.work-title-pixels {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: var(--work-title-pixel-opacity, 0);
  image-rendering: pixelated;
}

.work-page-title span {
  position: relative;
  z-index: 1;
  display: inline-block;
  animation: work-letter-in 900ms cubic-bezier(.16, 1, .3, 1) both;
}

.work-page-title.is-pixelating span { visibility: hidden; }

.work-page-title span:nth-child(2) { animation-delay: 60ms; }
.work-page-title span:nth-child(3) { animation-delay: 120ms; }
.work-page-title span:nth-child(4) { animation-delay: 180ms; }

.work-grid {
  width: var(--work-column);
  margin: 0 auto;
  padding: 0 0 clamp(190px, 20vw, 320px);
  display: flex;
  flex-direction: column;
  gap: clamp(130px, 15vw, 240px);
}

.work-card {
  min-width: 0;
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 900ms cubic-bezier(.16, 1, .3, 1), transform 1100ms cubic-bezier(.16, 1, .3, 1);
}

.work-card.is-visible { opacity: 1; transform: translateY(0); }
.work-card.is-ai-target { outline: 2px solid var(--brand-green); outline-offset: 12px; }
.work-card:first-child { opacity: 1; transform: none; }

.work-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--panel);
}

.work-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.002);
  transition: transform 1000ms cubic-bezier(.16, 1, .3, 1), filter 500ms ease;
}

.work-card-meta {
  padding-top: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.work-card-meta h2 {
  margin: 0;
  font: 700 clamp(34px, 4.2vw, 64px)/.84 "Helvetica Neue Bold", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.065em;
  transform: scaleX(.84);
  transform-origin: left top;
  transition: color 220ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1);
}

.work-card-details {
  flex: none;
  padding-top: 2px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 7px;
}

.work-card-meta p {
  margin: 0;
  padding: 4px 6px 3px;
  background: var(--white);
  color: var(--black);
  font: 700 9px/1 "Helvetica Neue Bold", sans-serif;
  text-transform: uppercase;
}

.work-card-details span {
  color: var(--muted);
  font: 500 10px/1 "Helvetica Neue Medium", sans-serif;
}

.work-card:hover .work-card-media img { transform: scale(1.018); }
.work-card:hover .work-card-meta h2 { color: var(--brand-green); }

.work-page-footer {
  margin-top: 30px;
}

body.is-blogs-page {
  overflow-x: hidden;
  overflow-y: auto;
  --blogs-column: min(86vw, 1260px);
}

body.is-blogs-page .page {
  height: auto;
  min-height: 100svh;
  display: block;
  overflow: visible;
  background-color: var(--black);
}

.blogs-page {
  width: var(--blogs-column);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  color: var(--white);
}

.blogs-hero {
  padding: clamp(112px, 13vh, 148px) 0 clamp(34px, 4vw, 54px);
  border-bottom: 1px solid color-mix(in srgb, var(--white) 15%, transparent);
}

.blogs-hero-meta {
  margin-bottom: clamp(24px, 3vw, 38px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--muted);
  font: 500 10px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .12em;
}

.blogs-hero-meta span:first-child { color: var(--brand-green); }

.blogs-hero-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  align-items: end;
  gap: clamp(36px, 7vw, 110px);
}

.blogs-hero h1 {
  margin: 0 0 -.08em;
  color: var(--white);
  font: 700 clamp(76px, 10vw, 148px)/.78 "Helvetica Neue Bold", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.075em;
  transform: scaleX(.86);
  transform-origin: left bottom;
}

.blogs-hero-heading p {
  margin: 0;
  padding-bottom: 6px;
  color: color-mix(in srgb, var(--white) 66%, transparent);
  font: 400 clamp(14px, 1.2vw, 17px)/1.65 "Helvetica Neue Regular", sans-serif;
}

.blogs-grid {
  padding: clamp(34px, 4vw, 56px) 0 clamp(110px, 12vw, 170px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 30px);
  row-gap: clamp(54px, 6vw, 84px);
}

.blog-card {
  min-width: 0;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 780ms cubic-bezier(.16, 1, .3, 1), transform 980ms cubic-bezier(.16, 1, .3, 1);
}

.blog-card.is-visible { opacity: 1; transform: translateY(0); }
.blog-card:first-child { opacity: 1; transform: none; }
.blog-card-link {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.blog-card-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--panel);
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.002);
  filter: saturate(.92) contrast(1.02);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1), filter 420ms ease;
}

.blog-card-copy {
  min-width: 0;
  padding-top: 15px;
}

.blog-card-index {
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  color: var(--muted);
  font: 500 8px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .12em;
}

.blog-card-index span:first-child { color: var(--brand-green); }
.blog-card-index span + span::before { content: "·"; margin-right: 8px; }

.blog-card h2 {
  max-width: 13em;
  margin: 0;
  color: var(--white);
  font: 700 clamp(18px, 1.5vw, 24px)/1.08 "Helvetica Neue Bold", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.035em;
  transition: color 260ms ease;
}

.blog-card-copy > p {
  max-width: 34em;
  margin: 9px 0 0;
  color: color-mix(in srgb, var(--white) 52%, transparent);
  font: 400 12px/1.5 "Helvetica Neue Regular", sans-serif;
}

.blog-card-link:hover .blog-card-media img,
.blog-card-link:focus-visible .blog-card-media img { transform: scale(1.025); filter: saturate(1.04) contrast(1.03); }
.blog-card-link:hover h2,
.blog-card-link:focus-visible h2 { color: var(--brand-green); }
.blog-card-link:focus-visible { outline: 1px solid var(--brand-green); outline-offset: 8px; }

@media (max-width: 1100px) and (min-width: 721px) {
  .blogs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blogs-footer {
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
}

@keyframes work-letter-in {
  from { opacity: 0; filter: blur(14px); transform: translateY(28%); }
  to { opacity: 1; transform: translateY(0); }
}

.about-page {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: block;
  overflow: hidden;
  background: transparent;
}

.about-copy {
  min-width: 0;
  padding: 0 0 var(--edge) var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 3;
}

.about-index {
  margin: 118px 0 0;
  color: color-mix(in srgb, var(--white) 32%, transparent);
  font: 500 9px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .16em;
}

.about-copy > div { padding-bottom: clamp(12px, 3vh, 34px); }

.about-kicker,
.about-drag-hint {
  margin: 0;
  color: color-mix(in srgb, var(--white) 42%, transparent);
  font: 500 10px/1.2 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .13em;
}

.about-copy h1 {
  margin: 14px 0 22px;
  color: var(--white);
  font: 700 clamp(100px, 12.8vw, 190px)/.72 "Helvetica Neue Bold", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.075em;
  transform: scaleX(.88);
  transform-origin: left center;
}

.about-intro {
  max-width: 410px;
  margin: 0;
  color: color-mix(in srgb, var(--white) 78%, transparent);
  font: 400 clamp(15px, 1.3vw, 20px)/1.55 "Helvetica Neue Regular", sans-serif;
}

.about-drag-hint {
  margin-top: 28px;
  color: var(--brand-green);
}

.lanyard-scene {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.about-sticker-rain {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.about-sticker {
  position: absolute;
  top: 0;
  left: var(--left);
  width: min(var(--size), 22vw);
  height: auto;
  opacity: 1;
  will-change: transform;
  animation: about-sticker-fall 43.329s linear var(--delay) infinite;
}

.about-sticker-rain.is-randomized .about-sticker {
  opacity: 0;
  animation: none;
}

@keyframes about-sticker-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -24vh, 0) rotate(var(--rotate-start));
  }
  2.3% {
    opacity: 1;
  }
  15% {
    transform: translate3d(var(--drift), 25vh, 0) rotate(var(--rotate-one));
  }
  31% {
    transform: translate3d(var(--drift-back), 76vh, 0) rotate(var(--rotate-two));
  }
  46.15% {
    opacity: 1;
    transform: translate3d(0, 126vh, 0) rotate(var(--rotate-end));
  }
  48%, 100% {
    opacity: 0;
    transform: translate3d(0, 132vh, 0) rotate(var(--rotate-end));
  }
}

.lanyard-webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: 0;
  cursor: grab;
}

.lanyard-webgl.is-dragging { cursor: grabbing; }
.lanyard-webgl:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-green); }

.lanyard-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  color: color-mix(in srgb, var(--white) 32%, transparent);
  font: 500 9px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .18em;
  transform: translate(-50%, -50%);
  transition: opacity 280ms ease;
}

.lanyard-scene.is-ready .lanyard-loading { opacity: 0; }

.route-placeholder {
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  padding: var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background: transparent;
  transition: background-color 460ms cubic-bezier(.16, 1, .3, 1);
}

.route-placeholder[hidden] { display: none; }

.route-index {
  margin: 116px 0 0;
  color: rgba(255,255,255,.28);
  font: 500 9px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.route-heading-wrap { width: 100%; }

.route-title {
  margin: 0;
  color: var(--white);
  font: 500 clamp(54px, 9vw, 138px)/.82 "Helvetica Neue Medium", sans-serif;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.route-rule {
  width: 100%;
  height: 1px;
  margin: clamp(24px, 3vw, 44px) 0 18px;
  display: block;
  background: linear-gradient(90deg, var(--brand-green) 0 12%, rgba(255,255,255,.14) 12% 100%);
}

.route-note {
  margin: 0;
  color: rgba(255,255,255,.36);
  font: 500 10px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
  animation: loader-hide .01s step-end 3250ms forwards;
}

.loader::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--black);
  opacity: 1;
  animation: loader-curtain-fade 950ms cubic-bezier(.76, 0, .24, 1) 2050ms forwards;
}

.loader-dither-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: .4;
  pointer-events: none;
  animation: loader-curtain-fade 950ms cubic-bezier(.76, 0, .24, 1) 2050ms forwards;
}

html[data-theme="dark"] .loader-dither-background { opacity: .3; }

.loader-scene {
  --land-x: clamp(130px, 29vw, 465px);
  --land-y: clamp(48px, 6.5vw, 82px);
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.loader-copy {
  position: absolute;
  left: 50%;
  top: 56%;
  width: min(1180px, calc(100vw - 80px));
  color: var(--white);
  opacity: 0;
  transform: translate(-50%, 72px);
  animation: loader-copy-in 850ms cubic-bezier(.16, 1, .3, 1) 1150ms forwards;
}

.loader-copy p { margin: 0; }

.loader-kicker {
  margin-bottom: 14px !important;
  color: rgba(255,255,255,.48);
  font: 500 10px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.loader-title-line {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  font: 400 clamp(50px, 7.2vw, 112px)/.82 "Mourier", sans-serif;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.loader-by {
  color: rgba(255,255,255,.22);
  font-size: .46em;
  letter-spacing: .02em;
}

.loader-signature-space {
  width: clamp(130px, 17vw, 250px);
  color: transparent;
  font: 500 12px/1 "Helvetica Neue Medium", sans-serif;
}

.loader-year {
  margin-top: 16px !important;
  color: rgba(255,255,255,.34);
  font: 500 10px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .16em;
  text-align: right;
}

.loader-signature {
  position: absolute;
  left: 50%;
  top: 42%;
  width: clamp(270px, 34vw, 500px);
  color: var(--brand-green);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-6deg);
  transform-origin: center;
  filter: drop-shadow(0 0 18px rgba(0,240,130,.08));
  animation:
    signature-appear 180ms ease-out 100ms forwards,
    signature-to-logo 1000ms cubic-bezier(.76, 0, .24, 1) 2050ms forwards,
    signature-handoff 80ms linear 3150ms forwards;
  will-change: left, top, width, transform;
}

.loader-signature svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.signature-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.signature-s { stroke-width: 11; animation: signature-draw 650ms cubic-bezier(.5, 0, .25, 1) 180ms forwards; }
.signature-n { animation: signature-draw 380ms cubic-bezier(.5, 0, .25, 1) 600ms forwards; }
.signature-a { animation: signature-draw 360ms cubic-bezier(.5, 0, .25, 1) 830ms forwards; }
.signature-k { animation: signature-draw 360ms cubic-bezier(.5, 0, .25, 1) 1050ms forwards; }
.signature-e { animation: signature-draw 360ms cubic-bezier(.5, 0, .25, 1) 1270ms forwards; }
.signature-flourish {
  stroke-width: 8;
  animation: signature-draw 480ms cubic-bezier(.5, 0, .25, 1) 1510ms forwards;
}

.loader-index {
  position: absolute;
  left: 40px;
  bottom: 34px;
  color: rgba(255,255,255,.3);
  font: 500 9px/1 "Helvetica Neue Medium", sans-serif;
  letter-spacing: .14em;
  opacity: 0;
  animation: loader-index-in 500ms ease 1050ms forwards;
}

@keyframes signature-appear { to { opacity: 1; } }
@keyframes signature-draw {
  0% { opacity: 0; stroke-dashoffset: 1; stroke-linecap: butt; }
  4% { opacity: 0; stroke-dashoffset: .96; stroke-linecap: butt; }
  5% { opacity: 1; stroke-dashoffset: .95; stroke-linecap: round; }
  100% { opacity: 1; stroke-dashoffset: 0; stroke-linecap: round; }
}

@keyframes torch-frame-one {
  0%, 32% { opacity: 1; }
  33%, 100% { opacity: 0; }
}

@keyframes torch-frame-two {
  0%, 32%, 66%, 100% { opacity: 0; }
  33%, 65% { opacity: 1; }
}

@keyframes torch-frame-three {
  0%, 65% { opacity: 0; }
  66%, 100% { opacity: 1; }
}

@keyframes torch-target-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.88); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes torch-ember-rise {
  0% { opacity: 0; transform: translate3d(0, 7px, 0) rotate(0deg) scale(.35); }
  14% { opacity: .95; }
  62% { opacity: .55; }
  100% { opacity: 0; transform: translate3d(var(--ember-drift), var(--ember-rise), 0) rotate(150deg) scale(.08); }
}
@keyframes signature-to-logo {
  to {
    left: var(--logo-left);
    top: var(--logo-top);
    width: var(--logo-width);
    transform: translate(0, 0) rotate(-6deg);
    filter: drop-shadow(0 0 0 rgba(0,240,130,0));
  }
}
@keyframes signature-handoff { to { opacity: 0; } }
@keyframes site-logo-reveal { to { opacity: 1; } }
@keyframes site-nav-reveal { to { opacity: 1; visibility: visible; } }
@keyframes loader-curtain-fade { to { opacity: 0; } }
@keyframes loader-hide { to { visibility: hidden; } }
@keyframes signature-land {
  to {
    top: 56%;
    transform: translate(calc(-50% + var(--land-x)), calc(-50% + var(--land-y))) scale(.48) rotate(-8deg);
    filter: drop-shadow(0 0 10px rgba(0,240,130,0));
  }
}
@keyframes loader-copy-in { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes loader-index-in { to { opacity: 1; } }
@keyframes loader-exit { 0% { opacity: 1; visibility: visible; } 99% { visibility: visible; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }

.contact-scrim {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(0,0,0,.72);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(.57,.08,.88,.77);
}

.contact-drawer {
  position: fixed;
  right: -1px;
  top: 0;
  bottom: 0;
  z-index: 90;
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: auto;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.07);
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.contact-scrim[hidden], .contact-drawer[hidden] { display: none; }
.contact-scrim.is-open { opacity: 1; }
.contact-drawer.is-open { opacity: 1; transform: translateX(0); }

.drawer-bar {
  width: 100%;
  min-height: 79px;
  padding: 28px 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.drawer-bar > span {
  color: rgba(255,255,255,.45);
  font: 500 10px/normal "Helvetica Neue Medium", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drawer-close {
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.5);
  cursor: pointer;
  font: 300 18px/1 "Helvetica Neue Light", sans-serif;
}

.drawer-intro { width: 100%; padding: 32px 28px 0; display: flex; flex-direction: column; gap: 8px; }
.drawer-intro h2 { margin: 0; font: 500 22px/1.1 "Helvetica Neue Medium", sans-serif; letter-spacing: -.02em; }
.drawer-intro p { margin: 0; color: rgba(255,255,255,.35); font: 400 13px/1.5 "Helvetica Neue Regular", sans-serif; }

.contact-form { width: 100%; padding: 28px 28px 40px; display: flex; flex-direction: column; gap: 20px; }
.field { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.field > span, .project-types legend { color: rgba(255,255,255,.3); font: 400 10px/normal "Helvetica Neue Regular", sans-serif; letter-spacing: .1em; text-transform: uppercase; }

.field input {
  width: 100%;
  height: 44px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px;
  outline: 0;
  background: rgba(255,255,255,.04);
  color: var(--white);
  font: 400 14px/1.2 "Helvetica Neue Regular", sans-serif;
}

.field input::placeholder { color: rgba(255,255,255,.18); }
.field input:focus { border-color: rgba(255,255,255,.28); }

.project-types { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.project-types legend { margin-bottom: 12px; padding: 0; }
.check-list { width: 100%; padding: 16px; display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: rgba(255,255,255,.02); }
.check-list label { display: flex; align-items: center; gap: 12px; cursor: pointer; color: rgba(255,255,255,.75); font: 400 14px/1 "Helvetica Neue Regular", sans-serif; }

.check-list input {
  appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px;
  background: rgba(255,255,255,.05);
}

.check-list input:checked { border-color: var(--white); background: var(--white); }
.check-list input:checked::after { content: ""; width: 7px; height: 4px; border-left: 1.5px solid var(--black); border-bottom: 1.5px solid var(--black); transform: translateY(-1px) rotate(-45deg); }

.form-divider { width: 100%; height: 1px; background: rgba(255,255,255,.07); }
.submit-button { width: 100%; height: 44px; border: 0; border-radius: 4px; background: var(--white); color: var(--black); cursor: pointer; font: 500 12px/1 "Helvetica Neue Medium", sans-serif; text-transform: uppercase; }

@media (max-width: 809.98px) {
  :root { --edge: 25px; --logo-top: 20px; --logo-left: 25px; --logo-width: 90px; }
  .ai-orb-trigger { top: 16px; left: calc(var(--logo-left) + var(--logo-width) + 10px); width: 46px; height: 46px; }
  .ai-character { width: 36px; height: 36px; }
  .ai-assistant { inset: 0; width: 100%; height: 100svh; }
  .ai-assistant-header { min-height: 68px; padding: 16px 22px; }
  .ai-chat-log { padding: 34px 24px 24px; }
  .ai-prompt-form { padding: 14px 16px 18px; }
  .ai-message { max-width: 92%; }
  .page { min-height: 560px; }
  .intro-copy, .intro h1 { width: 100%; }
  .gallery-stage { width: 100%; }
  .ticker-plane { width: 780px; }
  .contact-drawer { width: 100%; right: 0; }
  .loader-scene { --land-x: clamp(58px, 18vw, 90px); --land-y: 126px; }
  .loader-copy { top: 52%; width: calc(100vw - 50px); }
  .loader-title-line { flex-wrap: wrap; row-gap: 18px; font-size: clamp(40px, 12vw, 58px); }
  .loader-title-line > :first-child { flex: 0 0 100%; }
  .loader-by { margin-left: 2px; }
  .loader-signature-space { width: 145px; }
  .loader-year { display: none; }
  .loader-signature { top: 36%; width: min(78vw, 360px); }
  .loader-index { left: 25px; bottom: 25px; }
  .primary-nav {
    top: 24px;
    right: 25px;
    grid-template-columns: auto auto;
    display: grid;
    gap: 9px 15px;
    justify-items: end;
  }
  .primary-nav a { font-size: 9px; letter-spacing: 0; }
  .theme-toggle { grid-column: 2; justify-self: end; margin-top: -3px; transform: scale(.9); transform-origin: right top; }
  .home-video-trigger { right: var(--edge); bottom: 76px; width: min(44vw, 176px); }
  .home-video-play { width: 28px; height: 28px; }
  .featured-video-modal { padding: 16px; }
  .featured-video-dialog { max-width: calc(100vw - 32px); max-height: calc(100svh - 32px); }
  .featured-video-player { width: min(44svh, calc(100vw - 32px)); }
  .route-index { margin-top: 112px; }
  .route-title { font-size: clamp(48px, 16vw, 76px); line-height: .88; }
  body.is-work-page { --work-column: calc(100vw - 50px); }
  .work-hero { min-height: 0; padding: 118px 0 52px; }
  .work-page-title { font-size: clamp(128px, 47vw, 225px); letter-spacing: -.015em; transform: scaleX(.86); }
  .work-grid { padding: 0 0 130px; gap: 104px; }
  .work-card-meta { gap: 16px; }
  .work-card-meta h2 { font-size: clamp(29px, 9vw, 48px); }
  .work-card-details { padding-top: 0; gap: 6px; }
  .work-card-meta p { font-size: 8px; }
  body.is-blogs-page { --blogs-column: calc(100vw - 50px); }
  .blogs-hero { padding: 118px 0 34px; }
  .blogs-hero-meta { margin-bottom: 28px; align-items: flex-start; }
  .blogs-hero-meta span:last-child { max-width: 120px; text-align: right; line-height: 1.4; }
  .blogs-hero-heading { grid-template-columns: 1fr; gap: 22px; }
  .blogs-hero h1 { font-size: clamp(76px, 25vw, 118px); }
  .blogs-hero-heading p { max-width: 330px; font-size: 13px; }
  .blogs-grid { padding: 32px 0 110px; grid-template-columns: 1fr; row-gap: 64px; }
  .blog-card-link { min-height: 0; display: flex; }
  .blog-card-media { aspect-ratio: 16 / 10; }
  .blog-card-copy { padding-top: 14px; }
  .blog-card h2 { max-width: 14em; font-size: clamp(23px, 6.8vw, 32px); line-height: 1.06; }
  .blog-card-index { margin-bottom: 11px; font-size: 8px; gap: 9px; }
  .blog-card-index span + span::before { margin-right: 9px; }
  .blog-card-copy > p { display: block; margin-top: 10px; }
  .about-page {
    grid-template-columns: 1fr;
    grid-template-rows: 46% 54%;
    overflow-y: auto;
  }
  .about-copy {
    min-height: 360px;
    padding: 0 25px 0;
  }
  .about-index { margin-top: 112px; }
  .about-copy > div { padding-bottom: 12px; }
  .about-copy h1 { margin: 12px 0 14px; font-size: clamp(78px, 26vw, 128px); }
  .about-intro { max-width: 330px; font-size: 14px; }
  .about-drag-hint { margin-top: 16px; }
  .lanyard-scene {
    min-height: 500px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-card, .blog-card { opacity: 1; transform: none; transition: none; }
  .work-page-title span { animation: none; }
  .ai-character, .ai-character-body, .ai-character-eyes, .ai-eye-unit, .ai-character-face, .ai-mouth { animation: none !important; }
  .about-sticker-rain { display: none; }
  .torch-flame-frame { animation: none; }
  .torch-flame-one { opacity: 1; }
  .torch-cursor.is-action::after { animation: none; }
  .torch-embers { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .portfolio-hover-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .site-logo { opacity: 1; animation: none; }
  .primary-nav { opacity: 1; visibility: visible; animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}