:root {
  --paper: #dcd8c0;
  --ink: #050505;
  --taupe: #bab5a1;
  --muted: #696659;
  --line: rgba(5, 5, 5, 0.22);
  --nav-height: 64px;
  --footer-height: 56px;
  font-family: "General Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

html.is-smooth-scrolling {
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  letter-spacing: 0;
}

body.is-transitioning {
  cursor: wait;
}

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

.magnetic {
  translate: var(--mag-x, 0px) var(--mag-y, 0px);
  transition: translate 520ms cubic-bezier(0.16, 1, 0.3, 1), background 360ms ease, color 260ms ease;
  will-change: translate;
}

.split-heading {
  overflow: hidden;
  transform: none;
}

.split-word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 105%, 0) rotate(2deg);
  transition:
    opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--word-index, 0) * 46ms);
  will-change: transform, opacity;
}

.split-heading.is-visible .split-word {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.fade-up {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 780ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 780ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--fade-delay, 0ms);
}

.fade-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.split-heading.fade-up {
  transform: none;
}

.split-heading.fade-up.is-visible {
  transform: none;
}

img,
canvas {
  display: block;
  max-width: 100%;
}

.frame {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-top: var(--nav-height);
  padding-bottom: var(--footer-height);
}

.ambient-field {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.ambient-word {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  color: rgba(5, 5, 5, 0.42);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(12px, 0.95vw, 18px);
  font-style: italic;
  line-height: 1;
  transform:
    translate3d(calc(var(--mx-raw, 0) * var(--drift-x, 12px)), calc(var(--my-raw, 0) * var(--drift-y, 8px)), 0)
    rotate(var(--rot, 0deg));
  animation: ambient-float var(--speed, 8s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.ambient-word::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--line-w, 220px);
  height: 1px;
  background: rgba(5, 5, 5, 0.18);
  content: "";
  transform: translateX(18px);
  transform-origin: left center;
  animation: ray-pulse calc(var(--speed, 8s) * 0.78) ease-in-out infinite;
}

.ambient-word span {
  position: relative;
  z-index: 1;
  padding: 3px 5px;
  background: rgba(220, 216, 192, 0.42);
}

.work-page .ambient-word,
.contact-page .ambient-word {
  color: rgba(220, 216, 192, 0.5);
}

.work-page .ambient-word::before,
.contact-page .ambient-word::before {
  background: rgba(220, 216, 192, 0.18);
}

.work-page .ambient-word span,
.contact-page .ambient-word span {
  background: rgba(5, 5, 5, 0.46);
}

.motion-box {
  position: fixed;
  z-index: 4;
  width: var(--w, 54px);
  height: var(--h, 54px);
  left: var(--x);
  top: var(--y);
  border: 1px solid rgba(5, 5, 5, 0.22);
  pointer-events: none;
  transform:
    translate3d(calc(var(--mx-raw, 0) * var(--drift-x, 18px)), calc(var(--my-raw, 0) * var(--drift-y, 12px)), 0)
    rotate(var(--rot, 0deg));
  animation: box-flicker var(--speed, 3s) steps(1, end) infinite;
}

.work-page .motion-box,
.contact-page .motion-box {
  border-color: rgba(220, 216, 192, 0.24);
}

.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ink);
  transform: translateY(100%);
  pointer-events: none;
}

.page-wipe.is-entering {
  animation: wipe-in 850ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.page-wipe.is-leaving {
  animation: wipe-out 620ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: 76px;
  height: 76px;
  border: 1px solid currentColor;
  color: rgba(5, 5, 5, 0.68);
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: width 260ms ease, height 260ms ease, color 260ms ease;
}

.cursor::before,
.cursor::after {
  position: absolute;
  content: "";
  background: currentColor;
}

.cursor::before {
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
}

.cursor::after {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

.cursor.is-active {
  width: 118px;
  height: 118px;
  color: rgba(5, 5, 5, 0.34);
}

.scroll-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  width: var(--scroll, 0%);
  height: 2px;
  background: var(--ink);
  pointer-events: none;
}

@keyframes wipe-in {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

@keyframes wipe-out {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

.frame::before,
.frame::after {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  content: "";
}

.frame::before {
  opacity: 0.24;
  background:
    linear-gradient(90deg, transparent calc(25% - 1px), var(--ink) calc(25% - 1px), var(--ink) 25%, transparent 25%),
    linear-gradient(90deg, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) 50%, transparent 50%),
    linear-gradient(90deg, transparent calc(75% - 1px), var(--ink) calc(75% - 1px), var(--ink) 75%, transparent 75%),
    linear-gradient(0deg, transparent calc(33.333% - 1px), var(--ink) calc(33.333% - 1px), var(--ink) 33.333%, transparent 33.333%),
    linear-gradient(0deg, transparent calc(66.666% - 1px), var(--ink) calc(66.666% - 1px), var(--ink) 66.666%, transparent 66.666%);
  animation: signal-flicker 4.8s steps(1, end) infinite;
}

.frame::after {
  opacity: 0.24;
  background:
    radial-gradient(circle at 18% 22%, rgba(5, 5, 5, 0.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 61%, rgba(5, 5, 5, 0.16) 0 1px, transparent 1.6px),
    radial-gradient(circle at 41% 84%, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.5px),
    repeating-radial-gradient(circle at 50% 50%, rgba(5, 5, 5, 0.1) 0 0.7px, transparent 0.8px 4px),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(5, 5, 5, 0.28) 8px),
    radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(5, 5, 5, 0.28), transparent 160px);
  background-size: 120px 120px, 150px 150px, 180px 180px, 5px 5px, auto, auto;
  mix-blend-mode: multiply;
  animation: scan-flicker 2.6s steps(1, end) infinite;
}

@keyframes signal-flicker {
  0%, 100% { opacity: 0.22; }
  8% { opacity: 0.32; }
  9% { opacity: 0.16; }
  46% { opacity: 0.28; }
  47% { opacity: 0.14; }
  74% { opacity: 0.34; }
}

@keyframes scan-flicker {
  0%, 100% { opacity: 0.18; transform: translateY(0); }
  18% { opacity: 0.28; }
  19% { opacity: 0.12; transform: translateY(1px); }
  61% { opacity: 0.25; }
  62% { opacity: 0.1; transform: translateY(-1px); }
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 12px clamp(16px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
  background: rgba(220, 216, 192, 0.9);
  backdrop-filter: blur(14px);
  font-size: 12px;
  text-transform: uppercase;
}

.home .nav {
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

.home .nav-links {
  border: 1px solid rgba(5, 5, 5, 0.55);
  background: rgba(220, 216, 192, 0.34);
  backdrop-filter: blur(10px);
  padding: 14px 18px;
  color: rgba(5, 5, 5, 0.5);
}

.home .nav-links [aria-current="page"] {
  color: rgba(5, 5, 5, 0.86);
}

.home .brand {
  max-width: none;
}

.home main {
  max-width: 100vw;
  overflow-x: hidden;
}

.nav::after {
  display: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-width: 44px;
  line-height: 1;
}

.brand img {
  width: clamp(34px, 3.6vw, 52px);
  height: clamp(38px, 4vw, 58px);
  object-fit: contain;
  filter: contrast(1.08);
}

.brand span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: clamp(12px, 2vw, 28px);
  color: var(--muted);
}

.nav-links a {
  position: relative;
  display: inline-block;
  transition: transform 260ms ease, color 260ms ease;
}

.nav-links a::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0;
  transform: scaleX(0.25);
  transform-origin: left center;
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links a:hover {
  transform: translateY(-2px);
}

.nav-links a:hover::after,
.nav-links [aria-current="page"]::after {
  opacity: 0.72;
  transform: scaleX(1);
  animation: box-flicker 1.2s steps(1, end) infinite;
}

.nav-links a:hover,
.nav-links [aria-current="page"],
.social a:hover {
  color: var(--ink);
}

.place {
  justify-self: end;
  color: var(--muted);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  min-height: calc(100vh - 58px);
  border-bottom: 1px solid var(--line);
}

.synapse-open {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.18), transparent 34vw),
    repeating-linear-gradient(90deg, rgba(5, 5, 5, 0.075) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(5, 5, 5, 0.075) 0 1px, transparent 1px 52px),
    var(--paper);
}

.synapse-open .hero-3d {
  opacity: 0.3;
  filter: blur(0.1px) contrast(1.08);
}

.open-title {
  position: relative;
  z-index: 12;
  margin: 0;
  color: rgba(5, 5, 5, 0.68);
  font-size: clamp(46px, 7.8vw, 126px);
  font-weight: 800;
  line-height: 0.82;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  transform: translateY(2vh);
  animation: title-breathe 5.5s ease-in-out infinite;
  pointer-events: auto;
}

.open-title::before,
.open-title::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
}

.open-title::before {
  color: rgba(5, 5, 5, 0.42);
  transform: translate(0, 0);
}

.open-title::after {
  color: rgba(5, 5, 5, 0.28);
  clip-path: inset(58% 0 24% 0);
}

.open-title:hover,
.open-title:focus-visible,
.open-title.is-glitching {
  animation: title-glitch 520ms steps(1, end) infinite;
}

.open-title:hover::before,
.open-title:focus-visible::before,
.open-title.is-glitching::before {
  opacity: 1;
  animation: glitch-layer-a 520ms steps(1, end) infinite;
}

.open-title:hover::after,
.open-title:focus-visible::after,
.open-title.is-glitching::after {
  opacity: 1;
  animation: glitch-layer-b 380ms steps(1, end) infinite;
}

.open-title span {
  display: block;
}

.open-kicker {
  position: absolute;
  left: clamp(18px, 4vw, 56px);
  bottom: 32px;
  z-index: 4;
  max-width: 380px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  text-transform: uppercase;
}

.open-scroll {
  position: absolute;
  left: 50%;
  bottom: 32px;
  z-index: 4;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.open-mail {
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  bottom: 32px;
  z-index: 4;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  padding: 8px 10px;
  border: 1px solid transparent;
  transition: border-color 320ms ease, background 320ms ease, translate 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.open-mail:hover {
  border-color: rgba(5, 5, 5, 0.22);
  background: rgba(220, 216, 192, 0.52);
}

.open-tools {
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  top: 0;
  z-index: 24;
  display: flex;
}

.open-tool {
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(5, 5, 5, 0.55);
  border-top: 0;
  color: rgba(5, 5, 5, 0.65);
  font-size: 12px;
  text-transform: uppercase;
}

.open-mark {
  display: none;
}

.open-mark span {
  display: none;
}

.open-tagline {
  position: absolute;
  right: 7vw;
  top: 48%;
  z-index: 4;
  max-width: 190px;
  color: rgba(5, 5, 5, 0.54);
  font-size: 12px;
  line-height: 1.25;
  text-transform: uppercase;
}

.open-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 116px;
  z-index: 2;
  background: linear-gradient(0deg, rgba(220, 216, 192, 0.9), rgba(220, 216, 192, 0));
  pointer-events: none;
}

.ray-word {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  color: rgba(5, 5, 5, 0.66);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 0.95vw, 17px);
  font-style: italic;
  line-height: 1;
  transform: translate(
    calc(-50% + (var(--mx-raw, 0) * var(--depth, 18px))),
    calc(-50% + (var(--my-raw, 0) * var(--depth-y, 12px)))
  );
  animation: word-orbit var(--speed, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.ray-word::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--line-w, 260px);
  height: 1px;
  background: rgba(5, 5, 5, 0.22);
  content: "";
  transform: rotate(calc(var(--rot) + (var(--mx-raw, 0) * var(--rot-drift, 6deg)))) translateX(var(--line-offset, 22px)) scaleX(var(--line-scale, 1));
  transform-origin: left center;
  animation: ray-pulse var(--speed, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.ray-word > span {
  position: relative;
  z-index: 1;
  padding: 3px 5px;
  background: rgba(220, 216, 192, 0.5);
}

@keyframes word-orbit {
  0%, 100% {
    margin-left: 0;
    margin-top: 0;
    opacity: 0.7;
  }
  33% {
    margin-left: var(--orbit-x, 12px);
    margin-top: calc(var(--orbit-y, 10px) * -1);
    opacity: 1;
  }
  66% {
    margin-left: calc(var(--orbit-x, 12px) * -0.7);
    margin-top: var(--orbit-y, 10px);
    opacity: 0.82;
  }
}

@keyframes ray-pulse {
  0%, 100% { opacity: 0.42; }
  45% { opacity: 0.88; }
  72% { opacity: 0.24; }
}

@keyframes title-breathe {
  0%, 100% {
    transform: translateY(2vh) scale(1);
    opacity: 0.86;
  }
  50% {
    transform: translateY(1.2vh) scale(1.012);
    opacity: 0.74;
  }
}

@keyframes title-glitch {
  0%, 100% { transform: translateY(2vh) scale(1); filter: none; }
  12% { transform: translate(calc(-3px + var(--mx-raw, 0) * 6px), calc(2vh + 2px)) scale(1.006); filter: contrast(1.08); }
  18% { transform: translate(calc(4px + var(--mx-raw, 0) * -5px), calc(2vh - 2px)) scale(0.998); }
  28% { transform: translateY(2vh) skewX(-1deg); }
  38% { transform: translate(2px, calc(2vh + 1px)); filter: blur(0.3px); }
  42% { transform: translate(-5px, calc(2vh - 1px)); }
  55% { transform: translateY(2vh); filter: none; }
  72% { transform: translate(3px, calc(2vh + 3px)); }
}

@keyframes glitch-layer-a {
  0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  10% { transform: translate(-12px, -2px); clip-path: inset(0 0 68% 0); }
  20% { transform: translate(9px, 3px); clip-path: inset(24% 0 48% 0); }
  34% { transform: translate(-4px, 0); clip-path: inset(52% 0 20% 0); }
  52% { transform: translate(13px, -1px); clip-path: inset(12% 0 72% 0); }
  78% { transform: translate(-7px, 2px); clip-path: inset(70% 0 4% 0); }
}

@keyframes glitch-layer-b {
  0%, 100% { transform: translate(0, 0); clip-path: inset(60% 0 18% 0); }
  16% { transform: translate(10px, 1px); clip-path: inset(8% 0 76% 0); }
  31% { transform: translate(-8px, -3px); clip-path: inset(36% 0 42% 0); }
  47% { transform: translate(5px, 2px); clip-path: inset(72% 0 8% 0); }
  64% { transform: translate(-11px, 0); clip-path: inset(18% 0 60% 0); }
  86% { transform: translate(6px, -1px); clip-path: inset(48% 0 30% 0); }
}

.hero::before,
.page-hero::before {
  position: absolute;
  top: clamp(18px, 4vw, 56px);
  right: clamp(18px, 4vw, 56px);
  z-index: 3;
  width: clamp(64px, 9vw, 128px);
  height: clamp(44px, 6vw, 86px);
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) 50%, transparent 50%),
    linear-gradient(0deg, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) 50%, transparent 50%);
  content: "";
  animation: box-flicker 3.4s steps(1, end) infinite;
}

.hero-side {
  display: grid;
  align-content: space-between;
  gap: 34px;
  padding: clamp(18px, 3vw, 42px);
  border-right: 1px solid var(--line);
}

.intro-copy {
  max-width: 430px;
  font-size: clamp(15px, 1.55vw, 20px);
  line-height: 1.16;
}

.word-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 14px;
  max-width: 440px;
  color: var(--muted);
  font-size: 12px;
  text-transform: lowercase;
}

.word-cloud span {
  border-bottom: 1px solid rgba(5, 5, 5, 0.28);
  padding-bottom: 2px;
}

.hero-main,
.page-hero {
  position: relative;
  display: grid;
  align-content: end;
  overflow: hidden;
  min-height: 500px;
  padding: clamp(18px, 3vw, 42px);
}

.page-hero {
  min-height: 64vh;
  border-bottom: 1px solid var(--line);
}

.hero-3d,
.contact-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-3d {
  opacity: 0.78;
  mix-blend-mode: multiply;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.34;
  mix-blend-mode: multiply;
}

.hero-title,
.page-title {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 1040px;
  font-size: clamp(38px, 6.5vw, 104px);
  line-height: 0.83;
  font-weight: 700;
  text-transform: uppercase;
}

.hero-title span,
.page-title span {
  display: block;
}

.scroll-note {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
}

.ticker {
  position: relative;
  height: clamp(54px, 7vw, 88px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
  color: var(--paper);
}

.live-desk {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
  min-height: 76vh;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.desk-index {
  position: sticky;
  top: 58px;
  min-height: calc(86vh - 48px);
  display: grid;
  align-content: space-between;
  padding: clamp(18px, 3vw, 42px);
  border-right: 1px solid var(--line);
}

.desk-count {
  display: grid;
  gap: 8px;
  width: max-content;
}

.desk-count strong {
  font-size: clamp(46px, 7vw, 106px);
  line-height: 0.78;
}

.desk-count span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.desk-copy {
  max-width: 360px;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 1.02;
}

.desk-stage {
  display: grid;
  align-content: stretch;
}

.desk-panel {
  --shift-x: 0px;
  --shift-y: 0px;
  min-height: 24vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 260px);
  gap: clamp(16px, 3vw, 38px);
  align-items: stretch;
  padding: clamp(18px, 3vw, 38px);
  border-bottom: 1px solid var(--line);
  transform: translate3d(var(--shift-x), var(--shift-y), 0);
  transition: background 360ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.desk-panel:hover {
  background:
    radial-gradient(circle at var(--hover-x, 50%) var(--hover-y, 50%), rgba(255, 255, 255, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.08);
}

.desk-panel h3 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 52px);
  line-height: 0.86;
  text-transform: uppercase;
}

.desk-panel p {
  margin: 18px 0 0;
  max-width: 540px;
  color: var(--muted);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.35;
}

.desk-media {
  position: relative;
  align-self: center;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(5, 5, 5, 0.12) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(5, 5, 5, 0.12) 0 1px, transparent 1px 26px),
    rgba(186, 181, 161, 0.5);
  transform: perspective(900px) rotateY(calc(var(--mx-raw, 0) * -6deg)) rotateX(calc(var(--my-raw, 0) * 4deg));
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.desk-visual {
  position: absolute;
  inset: 14px;
}

.desk-visual::before,
.desk-visual::after {
  position: absolute;
  content: "";
}

.visual-archive {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 7px;
}

.visual-archive span {
  border: 1px solid rgba(5, 5, 5, 0.36);
  background: rgba(5, 5, 5, 0.08);
}

.visual-archive span:nth-child(2),
.visual-archive span:nth-child(5),
.visual-archive span:nth-child(9) {
  background: rgba(5, 5, 5, 0.55);
}

.visual-archive span:nth-child(3) {
  grid-column: span 2;
}

.visual-system::before {
  inset: 8% 10%;
  border: 1px solid rgba(5, 5, 5, 0.36);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(5, 5, 5, 0.32) calc(50% - 1px), rgba(5, 5, 5, 0.32) 50%, transparent 50%),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(5, 5, 5, 0.32) calc(50% - 1px), rgba(5, 5, 5, 0.32) 50%, transparent 50%);
}

.visual-system::after {
  left: 18%;
  top: 26%;
  width: 64%;
  height: 48%;
  border: 1px solid rgba(5, 5, 5, 0.7);
  box-shadow:
    -20px -18px 0 -12px rgba(5, 5, 5, 0.7),
    24px 22px 0 -12px rgba(5, 5, 5, 0.7),
    0 0 0 18px rgba(220, 216, 192, 0.18);
}

.visual-build::before {
  left: 50%;
  top: 50%;
  width: 38%;
  aspect-ratio: 1;
  border: 1px solid rgba(5, 5, 5, 0.68);
  transform: translate(-50%, -50%) rotate(45deg);
}

.visual-build::after {
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: rgba(5, 5, 5, 0.62);
  box-shadow:
    0 -42px 0 rgba(5, 5, 5, 0.18),
    0 42px 0 rgba(5, 5, 5, 0.18);
}

.desk-panel:hover .visual-archive span:nth-child(2),
.desk-panel:hover .visual-archive span:nth-child(5),
.desk-panel:hover .visual-archive span:nth-child(9) {
  animation: box-blink 850ms steps(1, end) infinite;
}

.desk-panel:hover .visual-system::after,
.desk-panel:hover .visual-build::before {
  animation: box-flicker 900ms steps(1, end) infinite;
}

.ticker-track {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: 200%;
  animation: drift 28s linear infinite;
}

.ticker span {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 15px 24px;
  font-size: clamp(18px, 2.3vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes drift {
  to {
    transform: translateX(-50%);
  }
}

.section {
  position: relative;
  padding: clamp(30px, 5vw, 68px) clamp(16px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
}

.section,
.live-desk,
.about-transition,
.work-calendar,
.contact {
  --section-reveal: 0;
}

.section > *,
.desk-panel,
.transition-row,
.calendar-cell,
.contact > * {
  opacity: calc(0.58 + (var(--section-reveal, 1) * 0.42));
  transform:
    translate3d(0, calc((1 - var(--section-reveal, 1)) * 26px), 0)
    scale(calc(0.985 + (var(--section-reveal, 1) * 0.015)));
  transition:
    opacity 880ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 880ms cubic-bezier(0.16, 1, 0.3, 1);
}

.section.is-visible,
.live-desk.is-visible,
.about-transition.is-visible,
.work-calendar.is-visible,
.contact.is-visible {
  --section-reveal: 1;
}

.section::before {
  position: absolute;
  top: clamp(18px, 4vw, 56px);
  right: clamp(18px, 4vw, 56px);
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  content: "";
  animation: box-flicker 3.1s steps(1, end) infinite;
}

.section::after {
  position: absolute;
  top: clamp(18px, 4vw, 56px);
  right: calc(clamp(18px, 4vw, 56px) + 66px);
  color: var(--muted);
  content: "00 / 100";
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  animation: text-flicker 2.8s steps(1, end) infinite;
}

.section-head {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(18px, 5vw, 72px);
  align-items: start;
  margin-bottom: clamp(28px, 5vw, 58px);
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.display-lines {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 48px);
  line-height: 0.96;
  text-transform: uppercase;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: end;
}

.about-media {
  width: min(100%, 360px);
  justify-self: start;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--taupe);
}

.about-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

.manifesto-media {
  position: relative;
  background: #cfc8ad;
}

.manifesto-media::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(5, 5, 5, 0.14) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgba(5, 5, 5, 0.1) 0 1px, transparent 1px 32px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.24), transparent 48%);
  content: "";
  pointer-events: none;
}

.manifesto-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.98;
  mix-blend-mode: multiply;
  transform: translate3d(calc(var(--mx, 0px) * -0.12), calc(var(--my, 0px) * -0.1), 0);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.manifesto-label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 8px 10px;
  border: 1px solid rgba(5, 5, 5, 0.28);
  background: rgba(207, 200, 173, 0.72);
  color: rgba(5, 5, 5, 0.7);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.about-copy {
  margin: 0;
  max-width: 820px;
  font-size: clamp(19px, 2.35vw, 34px);
  line-height: 1;
}

.metrics,
.services {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  perspective: 1200px;
}

.metrics {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 40px;
}

.metric,
.service {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.metric {
  min-height: 118px;
  padding: 14px;
}

.metric strong {
  display: block;
  font-size: clamp(30px, 4.4vw, 62px);
  line-height: 0.85;
}

.metric span {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.services {
  grid-template-columns: repeat(4, 1fr);
}

.places-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.about-transition {
  position: relative;
  overflow: hidden;
  min-height: 82vh;
  padding: clamp(52px, 8vw, 112px) clamp(16px, 3vw, 42px);
  background: #020202;
  color: var(--paper);
}

.about-transition::before {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background:
    repeating-linear-gradient(90deg, rgba(220, 216, 192, 0.18) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(220, 216, 192, 0.12) 0 1px, transparent 1px 72px);
  content: "";
  pointer-events: none;
}

.transition-intro {
  position: relative;
  z-index: 1;
  min-height: 44vh;
  display: grid;
  align-content: end;
  max-width: 760px;
}

.transition-intro p {
  margin: 0;
  font-size: clamp(20px, 2.25vw, 34px);
  line-height: 0.98;
  text-transform: uppercase;
}

.transition-board {
  position: relative;
  z-index: 1;
  display: grid;
  border-top: 1px solid rgba(220, 216, 192, 0.22);
}

.transition-row {
  --reveal: 0;
  display: grid;
  grid-template-columns: 110px minmax(220px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(18px, 4vw, 64px);
  align-items: stretch;
  min-height: 250px;
  padding: clamp(20px, 3vw, 42px) 0;
  border-bottom: 1px solid rgba(220, 216, 192, 0.22);
  opacity: calc(0.35 + (var(--reveal) * 0.65));
  transform: translateY(calc((1 - var(--reveal)) * 42px));
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.transition-row.is-visible {
  --reveal: 1;
}

.transition-no {
  color: rgba(220, 216, 192, 0.58);
  font-size: 13px;
  text-transform: uppercase;
}

.transition-title h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 54px);
  line-height: 0.78;
  text-transform: uppercase;
}

.transition-title p {
  margin: 18px 0 0;
  max-width: 420px;
  color: rgba(220, 216, 192, 0.62);
  font-size: 13px;
  line-height: 1.35;
  text-transform: uppercase;
}

.transition-items {
  display: grid;
  align-content: end;
  border-left: 1px solid rgba(220, 216, 192, 0.22);
}

.transition-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0 18px clamp(18px, 3vw, 42px);
  border-top: 1px solid rgba(220, 216, 192, 0.18);
  transform: translateX(calc((1 - var(--reveal)) * 36px));
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.transition-item span {
  color: rgba(220, 216, 192, 0.48);
  font-size: 12px;
}

.transition-item strong {
  display: block;
  font-size: clamp(16px, 1.6vw, 24px);
  line-height: 0.95;
  text-transform: uppercase;
}

.tech-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: end;
  align-items: flex-end;
  padding-left: clamp(18px, 3vw, 42px);
  border-left: 1px solid rgba(220, 216, 192, 0.22);
}

.tech-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 13px;
  border: 1px solid rgba(220, 216, 192, 0.24);
  color: var(--paper);
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(calc((1 - var(--reveal)) * 26px));
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), background 280ms ease;
}

.tech-pill:hover {
  background: rgba(220, 216, 192, 0.1);
}

.place-card {
  min-height: 150px;
  display: grid;
  align-content: space-between;
  gap: 28px;
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  transition: background 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.place-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-6px);
}

.place-card img {
  width: 100%;
  max-height: 74px;
  object-fit: contain;
  object-position: left center;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}

.place-card strong {
  display: block;
  font-size: clamp(17px, 1.55vw, 23px);
  line-height: 0.95;
  text-transform: uppercase;
}

.place-card span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.service {
  position: relative;
  min-height: 240px;
  padding: 16px;
  display: grid;
  align-content: space-between;
  overflow: hidden;
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  transition:
    background 360ms ease,
    color 360ms ease,
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service::before,
.service::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.service::before {
  inset: 16px;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(5, 5, 5, 0.24) calc(50% - 1px), rgba(5, 5, 5, 0.24) 50%, transparent 50%),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(5, 5, 5, 0.18) calc(50% - 1px), rgba(5, 5, 5, 0.18) 50%, transparent 50%);
  transform: scale(0.86) rotate(-2deg);
  transition: opacity 320ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service::after {
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(5, 5, 5, 0.28);
  opacity: 0.4;
  transform: translate3d(14px, 14px, 0) rotate(0deg);
  transition: opacity 320ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

.service h3 {
  margin: 0;
  font-size: clamp(19px, 2.05vw, 30px);
  line-height: 0.98;
  text-transform: uppercase;
  transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 360ms ease;
}

.service p,
.project p {
  color: var(--muted);
  line-height: 1.35;
}

.service .eyebrow {
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), opacity 320ms ease;
}

.service div p {
  transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1), color 320ms ease;
}

.service:hover,
.service:focus-within,
.service.is-active {
  z-index: 2;
  background:
    radial-gradient(circle at var(--hover-x, 50%) var(--hover-y, 50%), rgba(255, 255, 255, 0.2), transparent 42%),
    rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(5, 5, 5, 0.12);
  transform:
    translate3d(0, -14px, 0)
    rotateX(calc(4deg + var(--service-tilt-x, 0deg)))
    rotateY(calc(-3deg + var(--service-tilt-y, 0deg)));
}

.service:hover::before,
.service:focus-within::before,
.service.is-active::before {
  opacity: 1;
  transform: scale(1.08) rotate(1deg);
  animation: service-scan 1.4s steps(1, end) infinite;
}

.service:hover::after,
.service:focus-within::after,
.service.is-active::after {
  opacity: 1;
  transform: translate3d(-8px, -8px, 0) rotate(90deg);
  animation: box-flicker 1.8s steps(1, end) infinite;
}

.service:hover .eyebrow,
.service:focus-within .eyebrow,
.service.is-active .eyebrow {
  opacity: 0.74;
  transform: translate3d(8px, -8px, 24px);
}

.service:hover h3,
.service:focus-within h3,
.service.is-active h3 {
  letter-spacing: 0.02em;
  transform: translate3d(14px, -12px, 46px);
}

.service:hover div p,
.service:focus-within div p,
.service.is-active div p {
  color: rgba(5, 5, 5, 0.78);
  transform: translate3d(14px, -4px, 34px);
}

.display-lines {
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-manifesto {
  --about-scroll: 0;
  min-height: calc(100vh - var(--nav-height));
  display: grid;
  align-content: center;
  gap: clamp(18px, 3.4vw, 38px);
  padding-inline: clamp(10px, 2vw, 32px);
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(5, 5, 5, 0.075) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(5, 5, 5, 0.07) 0 1px, transparent 1px 52px),
    var(--paper);
}

.about-manifesto .eyebrow {
  justify-self: center;
  color: rgba(5, 5, 5, 0.56);
}

.about-manifesto-lines {
  display: grid;
  gap: clamp(7px, 0.9vw, 13px);
  text-align: center;
}

.about-manifesto-line {
  margin: 0;
  color: rgba(5, 5, 5, 0.74);
  font-size: clamp(30px, 4.15vw, 68px);
  font-weight: 900;
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-manifesto-line:nth-child(even) {
  transform: translateX(calc((var(--mx-raw, 0) * -10px) + ((var(--about-scroll, 0) - 0.5) * -42px)));
}

.about-manifesto-line:nth-child(odd) {
  transform: translateX(calc((var(--mx-raw, 0) * 10px) + ((var(--about-scroll, 0) - 0.5) * 42px)));
}

.about-manifesto-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 980px;
  margin: 0 auto;
}

.about-manifesto-tags span {
  border: 1px solid rgba(5, 5, 5, 0.22);
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(5, 5, 5, 0.58);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
}

.services-section {
  min-height: clamp(520px, 72vh, 760px);
  padding: clamp(36px, 5vw, 72px) clamp(16px, 3vw, 42px);
  background:
    repeating-linear-gradient(90deg, rgba(5, 5, 5, 0.075) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(5, 5, 5, 0.07) 0 1px, transparent 1px 52px),
    var(--paper);
}

.services-title {
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  margin-bottom: clamp(48px, 8vw, 110px);
}

.services-title h2 {
  margin: 0;
  color: rgba(5, 5, 5, 0.72);
  font-size: clamp(42px, 5.2vw, 82px);
  line-height: 0.86;
  text-transform: uppercase;
}

.service-rows {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(5, 5, 5, 0.22);
  border-left: 0;
  perspective: 1400px;
}

.service-row {
  --service-open: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  padding: 18px clamp(0px, 1vw, 12px);
  border-right: 0;
  border-bottom: 1px solid rgba(5, 5, 5, 0.22);
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.035), transparent 40%),
    transparent;
  color: rgba(5, 5, 5, 0.72);
  overflow: hidden;
  transform:
    translate3d(0, 0, 0)
    rotateX(calc(var(--service-tilt-x, 0deg) * 0.45))
    rotateY(calc(var(--service-tilt-y, 0deg) * 0.45));
  transition:
    min-height 520ms cubic-bezier(0.16, 1, 0.3, 1),
    background 360ms ease,
    color 260ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-row:hover,
.service-row:focus-within,
.service-row.is-active {
  --service-open: 1;
  min-height: 132px;
  background:
    radial-gradient(circle at var(--hover-x, 50%) var(--hover-y, 50%), rgba(5, 5, 5, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.11);
  color: rgba(5, 5, 5, 0.9);
  box-shadow: none;
}

.service-row::before {
  inset: auto;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--service-open) * 100%);
  opacity: 1;
  background: rgba(5, 5, 5, 0.035);
  transform: none;
  transition: width 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-row::after {
  right: clamp(54px, 5vw, 90px);
  top: 50%;
  bottom: auto;
  width: 42px;
  height: 42px;
  border-color: rgba(5, 5, 5, 0.18);
  opacity: calc(0.18 + (var(--service-open) * 0.62));
  transform: translateY(-50%) rotate(calc(var(--service-open) * 90deg));
}

.service-row h3 {
  margin: 0;
  font-size: clamp(20px, 2.15vw, 36px);
  line-height: 0.95;
  color: currentColor;
  text-transform: uppercase;
  transform: translateX(calc(var(--service-open) * 10px));
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1), color 260ms ease;
}

.service-row h3.split-heading {
  overflow: visible;
}

.service-row:hover h3,
.service-row:focus-within h3,
.service-row.is-active h3 {
  letter-spacing: 0;
}

.service-count {
  justify-self: end;
  color: rgba(5, 5, 5, 0.62);
  font-size: clamp(18px, 2vw, 32px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
}

.service-icon {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  color: currentColor;
}

.service-icon::before,
.service-icon::after {
  position: absolute;
  content: "";
}

.icon-code::before {
  inset: 4px 2px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: skewX(-20deg);
}

.icon-code::after {
  inset: 4px 2px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: skewX(-20deg);
}

.icon-ai::before {
  inset: 3px;
  border: 1px solid currentColor;
}

.icon-ai::after {
  inset: 7px;
  background:
    radial-gradient(circle, currentColor 0 2px, transparent 2px),
    linear-gradient(currentColor, currentColor);
  background-position: center, center;
  background-size: 4px 4px, 100% 1px;
  background-repeat: no-repeat;
}

.icon-flow::before {
  left: 4px;
  top: 4px;
  width: 14px;
  height: 14px;
  border: 1px dashed currentColor;
  border-radius: 50%;
}

.icon-flow::after {
  left: 9px;
  top: 0;
  width: 4px;
  height: 22px;
  background: currentColor;
  box-shadow: -8px 10px 0 currentColor, 8px 10px 0 currentColor;
  opacity: 0.72;
}

.icon-grid::before {
  inset: 2px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 7px 1px,
    linear-gradient(currentColor, currentColor) 0 10px / 7px 1px,
    linear-gradient(currentColor, currentColor) 10px 0 / 7px 1px,
    linear-gradient(currentColor, currentColor) 10px 10px / 7px 1px,
    linear-gradient(90deg, currentColor, currentColor) 0 0 / 1px 7px,
    linear-gradient(90deg, currentColor, currentColor) 10px 0 / 1px 7px,
    linear-gradient(90deg, currentColor, currentColor) 0 10px / 1px 7px,
    linear-gradient(90deg, currentColor, currentColor) 10px 10px / 1px 7px;
  background-repeat: no-repeat;
}

.service-detail {
  grid-column: 2 / 4;
  max-width: min(760px, 72vw);
  display: grid;
  gap: 8px;
  opacity: var(--service-open);
  transform: translate3d(0, calc((1 - var(--service-open)) * -8px), 0);
  transition: opacity 360ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.service-detail p {
  margin: 0;
  color: rgba(5, 5, 5, 0.62);
  font-size: 14px;
  line-height: 1.35;
}

.service-detail span {
  color: rgba(5, 5, 5, 0.48);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
}

.project-list {
  border-top: 1px solid var(--line);
}

.work-calendar {
  --calendar-bg: #030303;
  --calendar-line: rgba(220, 216, 192, 0.18);
  --calendar-muted: rgba(220, 216, 192, 0.56);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(178px, 21vh);
  min-height: calc(100vh - 58px);
  overflow: hidden;
  border-top: 1px solid var(--calendar-line);
  border-left: 1px solid var(--calendar-line);
  background: var(--calendar-bg);
  color: var(--paper);
}

.work-page {
  background: #030303;
}

.work-page .frame {
  padding-bottom: 0;
  background: #030303;
}

.work-page .footer {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
}

.work-page .frame::before {
  opacity: 0.18;
}

.work-page .frame::after {
  opacity: 0.14;
  mix-blend-mode: screen;
}

.calendar-cell {
  --cell-tilt-x: 0deg;
  --cell-tilt-y: 0deg;
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--calendar-line);
  border-bottom: 1px solid var(--calendar-line);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(220, 216, 192, 0.05) calc(50% - 1px), rgba(220, 216, 192, 0.05) 50%, transparent 50%),
    #030303;
  transform: perspective(900px) rotateX(var(--cell-tilt-x)) rotateY(var(--cell-tilt-y));
  transition: background 360ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1), filter 360ms ease;
}

.calendar-cell::before {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 8;
  min-width: 22px;
  padding: 4px 5px 3px;
  border: 1px solid rgba(220, 216, 192, 0.2);
  background: rgba(3, 3, 3, 0.72);
  color: rgba(220, 216, 192, 0.78);
  content: attr(data-no);
  font-size: 11px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calendar-entry {
  display: grid;
  align-content: end;
  padding: clamp(14px, 1.7vw, 24px);
  color: var(--paper);
  transition: background 360ms ease, transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-entry:hover {
  background: rgba(220, 216, 192, 0.06);
}

.calendar-cell:hover {
  z-index: 3;
  background:
    radial-gradient(circle at var(--hover-x, 50%) var(--hover-y, 50%), rgba(220, 216, 192, 0.12), transparent 40%),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(220, 216, 192, 0.1) calc(50% - 1px), rgba(220, 216, 192, 0.1) 50%, transparent 50%),
    #050505;
  filter: brightness(1.08);
}

.calendar-entry h2,
.calendar-entry h3 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 0.86;
  letter-spacing: 0;
}

.calendar-entry p {
  margin: 8px 0 0;
  color: var(--paper);
  font-size: 13px;
  line-height: 1.15;
}

.calendar-entry span {
  display: block;
  margin-top: 8px;
  color: var(--calendar-muted);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(0.35) contrast(1.04);
  opacity: 0.86;
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1), filter 720ms ease, opacity 720ms ease;
}

.calendar-media {
  background: var(--calendar-bg);
}

.calendar-media:hover img {
  transform: scale(1.08);
  filter: grayscale(0);
  opacity: 1;
}

.calendar-fit {
  background: var(--calendar-bg);
}

.calendar-fit img {
  object-fit: contain;
  object-position: center top;
  padding: 0;
}

.calendar-fit-dark {
  background: #050505;
}

.calendar-site {
  background: #050505;
}

.site-frame {
  width: 1440px;
  height: 900px;
  border: 0;
  transform: scale(0.28);
  transform-origin: top left;
  filter: grayscale(0.18) contrast(1.05);
  opacity: 0.86;
  pointer-events: none;
}

.calendar-site::after {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  padding: 7px 9px;
  border: 1px solid rgba(220, 216, 192, 0.28);
  background: rgba(3, 3, 3, 0.66);
  color: var(--paper);
  content: attr(data-label);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
}

.calendar-span-2 {
  grid-column: span 2;
}

.calendar-span-3 {
  grid-column: span 3;
}

.calendar-start-2 {
  grid-column-start: 2;
}

.calendar-start-3 {
  grid-column-start: 3;
}

.calendar-start-4 {
  grid-column-start: 4;
}

.calendar-start-5 {
  grid-column-start: 5;
}

.calendar-start-6 {
  grid-column-start: 6;
}

.calendar-row-2 {
  grid-row-start: 2;
}

.calendar-row-3 {
  grid-row-start: 3;
}

.calendar-row-4 {
  grid-row-start: 4;
}

.calendar-row-5 {
  grid-row-start: 5;
}

.calendar-row-6 {
  grid-row-start: 6;
}

.calendar-row-7 {
  grid-row-start: 7;
}

.calendar-tall {
  grid-row: span 2;
}

.calendar-focus-top img {
  object-position: center top;
}

.calendar-focus-left img {
  object-position: left center;
}

.calendar-focus-right img {
  object-position: right center;
}

.calendar-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.48;
  pointer-events: none;
}

.calendar-note {
  padding: 44px 14px 14px;
  display: grid;
  align-content: start;
  color: var(--calendar-muted);
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
}

.project {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1fr) 110px;
  gap: clamp(16px, 3vw, 42px);
  align-items: stretch;
  padding: clamp(18px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--line);
  perspective: 1100px;
}

.project::after {
  position: absolute;
  top: 18px;
  right: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  content: "";
  animation: box-blink 1.8s steps(1, end) infinite;
}

.project figure {
  margin: 0;
  aspect-ratio: 6 / 4;
  overflow: hidden;
  background: var(--taupe);
  border: 1px solid var(--line);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.project:hover figure {
  background:
    radial-gradient(circle at var(--hover-x, 50%) var(--hover-y, 50%), rgba(5, 5, 5, 0.08), transparent 42%),
    var(--taupe);
}

.project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 700ms ease, filter 700ms ease;
}

.project:hover img {
  transform: scale(1.05);
  filter: grayscale(0.2);
}

.project h3 {
  margin: 0 0 16px;
  font-size: clamp(22px, 2.9vw, 44px);
  line-height: 0.95;
  text-transform: uppercase;
}

.project p {
  margin: 0;
  max-width: 620px;
  font-size: clamp(15px, 1.5vw, 19px);
}

.meta {
  display: grid;
  align-content: space-between;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.contact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
  gap: clamp(24px, 6vw, 80px);
  min-height: calc(100vh - 58px);
  align-items: end;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.contact::before {
  position: absolute;
  top: clamp(18px, 4vw, 56px);
  left: clamp(18px, 4vw, 56px);
  z-index: 2;
  width: clamp(82px, 12vw, 160px);
  height: clamp(54px, 8vw, 112px);
  border: 1px solid rgba(220, 216, 192, 0.28);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(220, 216, 192, 0.28) calc(50% - 1px), rgba(220, 216, 192, 0.28) 50%, transparent 50%),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(220, 216, 192, 0.28) calc(50% - 1px), rgba(220, 216, 192, 0.28) 50%, transparent 50%);
  content: "";
  animation: box-flicker 2.9s steps(1, end) infinite;
}

.contact-3d {
  opacity: 0.55;
  transform: translate3d(calc(var(--mx, 0px) * -0.45), calc(var(--my, 0px) * -0.35), 0);
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact > :not(canvas) {
  position: relative;
  z-index: 1;
}

.contact .eyebrow,
.contact p {
  color: rgba(220, 216, 192, 0.68);
}

.contact h1,
.contact h2 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(32px, 4.4vw, 68px);
  line-height: 0.86;
  text-transform: uppercase;
}

.contact-panel {
  border-top: 1px solid rgba(220, 216, 192, 0.26);
  padding-top: 20px;
  display: grid;
  gap: 18px;
  font-size: 15px;
}

.contact-form {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 920px;
  margin-top: clamp(22px, 4vw, 46px);
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(220, 216, 192, 0.22);
  background: rgba(5, 5, 5, 0.28);
  backdrop-filter: blur(10px);
}

.contact-form label {
  display: grid;
  gap: 8px;
}

.contact-form .field-wide {
  grid-column: 1 / -1;
}

.contact-form span {
  color: rgba(220, 216, 192, 0.64);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(220, 216, 192, 0.24);
  border-radius: 0;
  background: rgba(220, 216, 192, 0.06);
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  padding: 12px 12px;
  outline: none;
  transition: border-color 260ms ease, background 260ms ease;
}

.contact-form textarea {
  min-height: 132px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(220, 216, 192, 0.78);
  background: rgba(220, 216, 192, 0.1);
}

.contact-form button {
  justify-self: start;
  min-width: 180px;
  border: 1px solid rgba(220, 216, 192, 0.42);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 14px 16px;
  text-transform: uppercase;
  transition: background 260ms ease, color 260ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-form button:hover {
  background: transparent;
  color: var(--paper);
}

.contact-panel a,
.project-link {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  color: rgba(220, 216, 192, 0.68);
  font-size: 12px;
  text-transform: uppercase;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, auto) minmax(180px, 1fr);
  gap: 20px;
  align-items: center;
  padding: 12px clamp(16px, 3vw, 42px);
  border-top: 1px solid rgba(220, 216, 192, 0.26);
  background: var(--ink);
  color: rgba(220, 216, 192, 0.62);
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
}

.footer strong {
  color: var(--paper);
}

.footer-links {
  display: flex;
  gap: clamp(12px, 2vw, 24px);
}

.footer-links a:hover,
.footer-contact a:hover {
  color: var(--paper);
}

.footer-contact {
  justify-self: end;
  display: flex;
  gap: 16px;
}

.footer-cta {
  color: var(--paper);
  text-align: center;
}

.footer-cta a {
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 4px 6px;
  transition: background 280ms ease, color 280ms ease, translate 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-cta a:hover {
  background: rgba(220, 216, 192, 0.1);
}

.cookie-consent {
  position: fixed;
  right: clamp(14px, 3vw, 34px);
  bottom: calc(var(--footer-height) + 18px);
  z-index: 90;
  width: min(390px, calc(100vw - 28px));
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(220, 216, 192, 0.28);
  background: rgba(5, 5, 5, 0.92);
  color: rgba(220, 216, 192, 0.76);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px);
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-consent.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-consent strong {
  display: block;
  margin-bottom: 6px;
  color: var(--paper);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}

.cookie-consent p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.cookie-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.cookie-actions button {
  border: 1px solid rgba(220, 216, 192, 0.34);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 10px 12px;
  text-transform: uppercase;
  transition: background 260ms ease, color 260ms ease;
}

.cookie-actions button[data-cookie-accept] {
  background: var(--paper);
  color: var(--ink);
}

.cookie-actions button:hover {
  background: rgba(220, 216, 192, 0.16);
  color: var(--paper);
}

.signal-box {
  position: fixed;
  right: clamp(18px, 4vw, 56px);
  bottom: 18px;
  z-index: 31;
  display: grid;
  grid-template-columns: 28px auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(5, 5, 5, 0.34);
  background: rgba(220, 216, 192, 0.72);
  color: var(--ink);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

.signal-box::before {
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  content: "";
  animation: box-blink 1.1s steps(1, end) infinite;
}

.signal-box-invert {
  color: var(--paper);
  border-color: rgba(220, 216, 192, 0.34);
  background: rgba(5, 5, 5, 0.42);
}

@keyframes box-blink {
  0%, 42%, 100% { opacity: 1; }
  43%, 48% { opacity: 0.18; }
  78% { opacity: 0.55; }
}

@keyframes box-flicker {
  0%, 100% { opacity: 0.85; }
  12% { opacity: 0.32; }
  13% { opacity: 0.9; }
  54% { opacity: 0.44; }
  55% { opacity: 0.78; }
  82% { opacity: 0.2; }
}

@keyframes text-flicker {
  0%, 100% { opacity: 0.8; content: "00 / 100"; }
  23% { opacity: 0.25; content: "07 / 100"; }
  24% { opacity: 0.85; content: "00 / 100"; }
  68% { opacity: 0.3; content: "11 / 100"; }
  69% { opacity: 0.82; content: "00 / 100"; }
}

@keyframes service-scan {
  0%, 100% { opacity: 0.72; transform: scale(1.08) rotate(1deg) translateY(0); }
  18% { opacity: 0.42; transform: scale(1.06) rotate(1deg) translateY(1px); }
  19% { opacity: 0.84; transform: scale(1.1) rotate(1deg) translateY(-1px); }
  58% { opacity: 0.48; }
  59% { opacity: 0.78; }
}

@media (max-width: 980px) {
  .nav {
    grid-template-columns: 1fr auto;
  }

  .place {
    display: none;
  }

  .hero,
  .about-grid,
  .contact,
  .live-desk,
  .desk-panel {
    grid-template-columns: 1fr;
  }

  .contact {
    align-items: start;
    min-height: auto;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .desk-index {
    position: relative;
    top: auto;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .desk-media {
    width: min(52vw, 300px);
    justify-self: center;
  }

  .hero-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .hero-main {
    min-height: 460px;
  }

  .ray-word::before {
    width: calc(var(--line-w, 180px) * 0.52);
  }

  .project,
  .services,
  .places-grid {
    grid-template-columns: 1fr;
  }

  .services-section {
    min-height: auto;
  }

  .service-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 72px;
  }

  .service-row:hover,
  .service-row:focus-within,
  .service-row.is-active {
    min-height: 150px;
  }

  .service-detail {
    grid-column: 1 / -1;
    max-width: none;
  }

  .transition-row {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .transition-items,
  .tech-cloud {
    border-left: 0;
    padding-left: 0;
  }

  .meta {
    display: flex;
    justify-content: space-between;
  }

  .work-calendar {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    grid-auto-rows: minmax(150px, auto);
    overflow-x: auto;
  }

  .calendar-start-2,
  .calendar-start-3,
  .calendar-start-4,
  .calendar-start-5,
  .calendar-start-6,
  .calendar-row-2,
  .calendar-row-3,
  .calendar-row-4,
  .calendar-row-5,
  .calendar-row-6,
  .calendar-row-7 {
    grid-column-start: auto;
    grid-row-start: auto;
  }

  .calendar-span-3 {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  :root {
    --nav-height: 116px;
    --footer-height: 0px;
  }

  .nav {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 16px;
  }

  .home .nav {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    justify-content: stretch;
    width: 100%;
  }

  .home .nav-links {
    padding: 8px 10px;
  }

  .nav-links a {
    min-width: 0;
    white-space: nowrap;
  }

  .signal-box {
    display: none;
  }

  .cursor {
    display: none;
  }

  .footer {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    padding: 16px 18px;
  }

  .footer-contact {
    justify-self: start;
    flex-wrap: wrap;
  }

  .desk-panel {
    min-height: auto;
    gap: 14px;
    padding: 18px 16px;
  }

  .desk-panel h3 {
    font-size: clamp(20px, 7vw, 30px);
    line-height: 0.92;
  }

  .desk-panel p {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.28;
  }

  .desk-media {
    width: min(72vw, 230px);
    justify-self: center;
    aspect-ratio: 1 / 1;
  }

  .desk-visual {
    inset: 10px;
  }

  .visual-archive {
    gap: 5px;
  }

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

  .calendar-site {
    min-height: 190px;
  }

  .site-frame {
    width: 100%;
    height: 100%;
    transform: none;
  }

  .calendar-span-2,
  .calendar-span-3 {
    grid-column: span 2;
  }

  .calendar-tall {
    grid-row: span 1;
  }

  .hero-main {
    min-height: 420px;
  }

  .synapse-open {
    align-content: center;
    min-height: 720px;
    padding-top: 72px;
    padding-bottom: 132px;
  }

  .open-title {
    z-index: 14;
    font-size: clamp(36px, 12vw, 60px);
    max-width: 94vw;
    transform: translateY(-12px);
  }

  .open-tagline {
    left: 50%;
    right: auto;
    top: calc(50% + 92px);
    z-index: 15;
    width: min(260px, 72vw);
    max-width: none;
    margin: 0;
    color: rgba(5, 5, 5, 0.68);
    font-size: 10px;
    line-height: 1.35;
    text-align: center;
    transform: translateX(-50%);
  }

  .open-kicker {
    left: 18px;
    right: 18px;
    bottom: 62px;
    z-index: 15;
    max-width: none;
    font-size: 10px;
    line-height: 1.35;
  }

  .open-scroll,
  .open-mail {
    bottom: 20px;
  }

  .ray-word {
    font-size: 13px;
  }

  .ray-word:nth-of-type(n + 9) {
    display: none;
  }

  .section-head,
  .metrics {
    grid-template-columns: 1fr;
  }

  .about-manifesto {
    min-height: auto;
    padding-block: 42px;
    padding-inline: 14px;
  }

  .about-manifesto-line {
    font-size: clamp(23px, 7vw, 34px);
    line-height: 1.06;
    text-align: left;
    text-wrap: auto;
  }

  .about-manifesto-line:nth-child(even) {
    transform: translateX(calc((var(--mx-raw, 0) * -4px) + ((var(--about-scroll, 0) - 0.5) * -16px)));
  }

  .about-manifesto-line:nth-child(odd) {
    transform: translateX(calc((var(--mx-raw, 0) * 4px) + ((var(--about-scroll, 0) - 0.5) * 16px)));
  }

  .about-manifesto .eyebrow,
  .about-manifesto-tags {
    justify-self: start;
    justify-content: flex-start;
  }

  .about-media {
    width: min(100%, 280px);
    justify-self: center;
  }

  .manifesto-label {
    left: 12px;
    bottom: 12px;
    font-size: 10px;
  }

  .services-title {
    margin-bottom: 28px;
  }

  .services-title h2 {
    font-size: clamp(34px, 11vw, 54px);
  }

  .service-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 14px 0;
    gap: 12px;
  }

  .service-row:hover,
  .service-row:focus-within,
  .service-row.is-active {
    min-height: 138px;
  }

  .service-row h3 {
    font-size: clamp(18px, 5.4vw, 26px);
  }

  .service-count {
    font-size: 16px;
  }

  .service-detail p {
    font-size: 13px;
  }

  .service-detail span {
    line-height: 1.25;
  }

  .contact {
    gap: 22px;
    padding-top: 32px;
  }

  .contact h1,
  .contact h2 {
    font-size: clamp(30px, 11vw, 48px);
    line-height: 0.92;
  }

  .contact-3d {
    opacity: 0.36;
  }

  .contact-panel {
    gap: 12px;
    font-size: 14px;
  }

  .contact-form {
    padding: 14px;
    margin-top: 8px;
  }

  .contact-form button {
    width: 100%;
  }

  .cookie-consent {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .cookie-actions {
    justify-content: stretch;
  }

  .cookie-actions button {
    flex: 1;
  }

  .transition-item {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 16px 0;
    transform: none;
  }

  .transition-item strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .metric {
    min-height: 92px;
  }
}