/* GVD v60 combined stylesheet. */
/* ---- src/styles.css ---- */
:root {
  --bg: #f6f5f1;
  --ink: #0a0a0b;
  --muted: #747780;
  --line: rgba(10, 10, 11, 0.14);
  --line-soft: rgba(10, 10, 11, 0.08);
  --accent: #0a0a0b;
  --display: "grtsk-vf";
  --body: "grtsk-vf";
  --mono: "futura-100-cyrillic";
  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-h: 88px;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "grtsk-vf" !important;
  background: var(--bg);
  color: var(--ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
::selection { background: var(--accent); color: #fff; }
.mono { font-family: "futura-100-cyrillic" !important; }
.svg-defs { position: absolute; pointer-events: none; }

#depth-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
#ambient-grain { display: none; }
#scene-flash {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(10,10,11,.045) 4px 5px);
}
#scene-flash.is-active { animation: signalFlash .34s steps(5, end); }
@keyframes signalFlash {
  0% { opacity: 0; transform: translateX(0); }
  18% { opacity: .52; transform: translateX(-3px); }
  42% { opacity: .12; transform: translateX(2px); }
  64% { opacity: .28; transform: translateX(-1px); }
  100% { opacity: 0; transform: translateX(0); }
}

/* Preloader */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  overflow: hidden;
  background: var(--bg);
  transition: opacity .55s var(--ease), visibility .55s;
}
#preloader.is-done { opacity: 0; visibility: hidden; }
#preloader-canvas { width: 100%; height: 100%; display: block; }
.preloader-copy {
  position: absolute;
  left: clamp(20px, 4vw, 68px);
  right: clamp(20px, 4vw, 68px);
  bottom: clamp(22px, 4vh, 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
}

/* Header */
.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  padding: 18px clamp(20px, 3.7vw, 68px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.brand-lockup,
.site-header button { pointer-events: auto; }
.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  line-height: 1.1;
  gap: 6px;
}
.brand-name {
  font-family: "grtsk-vf" !important;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -.02em;
}
.brand-role {
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
}

.binary-link,
.binary-button {
  position: relative;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: "futura-100-cyrillic" !important;
  letter-spacing: .015em;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
.binary-label {
  display: inline-block;
  white-space: pre;
  font-variant-ligatures: none;
}
.binary-link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  gap: 24px;
  padding: 8px 0 9px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}
.binary-link::before,
.binary-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}
.binary-link::before { opacity: .34; }
.binary-link::after {
  height: 2px;
  transform: scaleX(0);
  transition: transform .42s var(--ease);
}
.binary-link:hover::after,
.binary-link:focus-visible::after { transform: scaleX(1); }
.binary-link b {
  font-weight: 400;
  transition: transform .38s var(--ease);
}
.binary-link:hover b,
.binary-link:focus-visible b { transform: translateX(5px); }
.binary-link-light { color: #fff; }
.binary-link-header {
  align-self: flex-start;
  gap: 16px;
  padding-top: 7px;
  font-family: "grtsk-vf" !important;
  font-size: clamp(15px, 1.05vw, 19px);
  font-weight: 520;
  letter-spacing: -.025em;
}
.binary-link-header i {
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  transition: transform .42s var(--ease);
}
.binary-link-header:hover i,
.binary-link-header:focus-visible i { transform: rotate(225deg) scale(.72); }

.binary-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  min-height: 54px;
  padding: 0 22px 0 24px;
  border: 1px solid var(--ink);
  border-radius: 14px 14px 4px 14px;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  transition: color .38s var(--ease), transform .38s var(--ease), border-radius .38s var(--ease);
}
.binary-button::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--accent);
  transform: translate3d(-103%,0,0);
  transition: transform .48s var(--ease);
}
.binary-button:hover,
.binary-button:focus-visible {
  color: #fff;
  border-radius: 4px 14px 14px 14px;
  transform: translateY(-2px);
}
.binary-button:hover::before,
.binary-button:focus-visible::before { transform: translate3d(0,0,0); }
.binary-button b {
  font-size: 15px;
  font-weight: 400;
  transition: transform .38s var(--ease);
}
.binary-button:hover b,
.binary-button:focus-visible b { transform: translate(3px,-3px); }
.binary-button-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.binary-button-primary::before { background: var(--accent); }
.binary-button-large { min-height: 60px; padding-inline: 28px 24px; }
.binary-button-submit { min-width: 280px; }


/* Depth navigation */
.depth-nav {
  position: fixed;
  z-index: 1000;
  top: 50%;
  right: clamp(14px, 1.6vw, 28px);
  width: 16px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.depth-nav-track {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--line);
}
.depth-nav-track i {
  display: block;
  width: 100%;
  height: 0;
  background: var(--accent);
}
.depth-nav button {
  position: relative;
  z-index: 2;
  width: 13px;
  height: 13px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.depth-nav button i {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(10,10,11,.5);
  background: var(--bg);
  transform: rotate(45deg) scale(.66);
  transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.depth-nav button.is-active i,
.depth-nav button:hover i {
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(45deg) scale(1);
}
.depth-nav button span {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translate(8px,-50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 6px 9px;
  background: var(--accent);
  color: #fff;
  font-family: "futura-100-cyrillic" !important;
  font-size: 9px;
  letter-spacing: .06em;
  transition: opacity .25s, transform .25s;
}
.depth-nav button:hover span { opacity: 1; transform: translate(0,-50%); }

/* Fixed depth stage */
html.is-depth,
html.is-depth body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
#depth-stage { position: relative; z-index: 10; }
html.is-depth #depth-stage {
  position: fixed;
  inset: 0;
  perspective: 1450px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.station {
  position: relative;
  min-height: 100dvh;
  padding: var(--header-h) clamp(26px, 6vw, 112px) 44px;
  display: flex;
  align-items: center;
}
html.is-depth .station {
  position: absolute;
  inset: 0;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
  pointer-events: none;
}
html.is-depth .station.is-active { pointer-events: auto; }
.station-shell {
  width: min(100%, 1420px);
  margin: 0 auto;
}
.station-shell-wide { width: min(100%, 1540px); }
.scene-header { max-width: 1120px; }
.scene-label {
  margin: 0 0 15px;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .14em;
  color: var(--accent);
}
.scene-title,
.contact-title {
  margin: 0;
  font-family: "grtsk-vf" !important;
  font-weight: 900;
  font-size: clamp(44px, 5.45vw, 104px);
  line-height: .89;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.signal-title { position: relative; }
.signal-title::before,
.signal-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.signal-title.is-glitching { filter: none; }
.signal-title.is-glitching::before {
  opacity: .68;
  clip-path: inset(12% 0 68% 0);
  animation: glitchSliceA .38s steps(5, end);
}
.signal-title.is-glitching::after {
  opacity: .5;
  clip-path: inset(63% 0 11% 0);
  animation: glitchSliceB .38s steps(6, end);
}
@keyframes glitchSliceA {
  0%,100% { transform: translate(0); }
  20% { transform: translate(-11px, 1px) skewX(-7deg); }
  43% { transform: translate(8px, -1px) scaleX(1.015); }
  68% { transform: translate(-4px, 0); }
}
@keyframes glitchSliceB {
  0%,100% { transform: translate(0); }
  18% { transform: translate(9px, -1px) scaleX(.99); }
  51% { transform: translate(-13px, 1px) skewX(5deg); }
  76% { transform: translate(4px, 0); }
}
.scene-reveal { will-change: opacity, transform; }

/* Hero */
.hero-shell {
  position: relative;
  padding-top: clamp(12px, 2vh, 28px);
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 9px;
  letter-spacing: .13em;
  color: var(--accent);
}
.live-dot { width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); animation: livePulse 1.9s ease-in-out infinite; }
@keyframes livePulse { 50% { transform: rotate(45deg) scale(.55); opacity: .35; } }
.hero-name {
  margin: 0;
  max-width: 1300px;
  font-family: "grtsk-vf" !important;
  font-weight: 900;
  font-size: clamp(68px, 8.6vw, 164px);
  line-height: .82;
  letter-spacing: -.067em;
}
.hero-role {
  margin: 22px 0 38px;
  color: var(--muted);
  font-family: "grtsk-vf" !important;
  font-size: clamp(24px, 2.25vw, 42px);
  font-weight: 550;
  letter-spacing: -.03em;
}
.hero-thesis {
  max-width: 780px;
  margin: 0 0 20px;
  font-family: "grtsk-vf" !important;
  font-size: clamp(28px, 2.55vw, 48px);
  line-height: 1.02;
  font-weight: 760;
  letter-spacing: -.035em;
}
.hero-description {
  max-width: 730px;
  margin: 0 0 18px;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.52;
  color: rgba(10,10,11,.76);
}
.hero-audience { margin: 0; color: var(--muted); font-size: 15px; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 30px; }
.depth-instruction {
  position: absolute;
  right: 0;
  bottom: 3px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--muted);
  writing-mode: vertical-rl;
}
.depth-instruction i { width: 1px; height: 58px; background: linear-gradient(var(--accent), transparent); }

/* Impact */
.station-impact .scene-header { margin-bottom: clamp(36px, 5vh, 66px); }
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.impact-item {
  position: relative;
  min-height: 275px;
  padding: 26px 26px 24px 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.impact-item + .impact-item { padding-left: 26px; }
.impact-item:last-child { border-right: 0; }
.impact-item strong {
  font-family: "grtsk-vf" !important;
  font-size: clamp(62px, 6vw, 114px);
  line-height: .8;
  letter-spacing: -.06em;
  font-weight: 900;
  color: var(--accent);
}
.impact-item p { margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: 230px; }
.impact-item p b { font-family: "grtsk-vf" !important; font-size: 20px; }
.impact-item p span { color: var(--muted); line-height: 1.35; font-size: 13px; }
.impact-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }

/* Work */
.work-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); gap: clamp(44px, 6vw, 100px); align-items: center; }
.work-copy .scene-header { margin-bottom: 28px; }
.work-list { border-top: 1px solid var(--line); }
.work-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  min-height: 130px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding .38s var(--ease), color .3s;
}
.work-row:hover,
.work-row.is-active { padding-left: 18px; }
.work-row h3 {
  margin: 0 0 7px;
  font-family: "grtsk-vf" !important;
  font-size: clamp(23px, 1.75vw, 34px);
  line-height: 1;
  letter-spacing: -.035em;
}
.work-row p { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.42; font-size: 13px; }
.work-row > span { font-size: 10px; color: var(--muted); transition: color .3s, transform .3s; }
.work-row:hover > span,
.work-row.is-active > span { color: var(--accent); transform: translateX(4px); }
.work-visual {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 68vh;
  overflow: hidden;
  border-radius: 2px 54px 2px 2px;
  background: #eae9e4;
  box-shadow: 0 38px 85px rgba(10,10,11,.11);
}
#work-canvas { width: 100%; height: 100%; display: block; }
.work-visual figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 47px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(246,245,241,.88);
  backdrop-filter: blur(12px);
  font-size: 8px;
  letter-spacing: .08em;
}

/* Capabilities */
.capability-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(410px, .75fr); gap: clamp(60px, 8vw, 150px); align-items: center; }
.capability-heading .scene-title { max-width: 880px; }
.capability-thesis { margin: 28px 0 0; max-width: 720px; font-family: "grtsk-vf" !important; font-size: clamp(21px, 2vw, 37px); line-height: 1.12; letter-spacing: -.025em; }
.capability-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.capability-list li { position: relative; padding: 17px 0; border-bottom: 1px solid var(--line); overflow: hidden; font-size: 15px; }
.capability-list li i { position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateX(-102%); transition: transform .42s var(--ease); }
.capability-list li span { position: relative; transition: color .25s, transform .42s var(--ease); display: block; }
.capability-list li:hover i { transform: translateX(0); }
.capability-list li:hover span { color: #fff; transform: translateX(12px); }

.technology-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(60px, 8vw, 140px); align-items: end; }
.technology-intro { margin: 23px 0 0; max-width: 650px; color: var(--muted); line-height: 1.5; font-size: 16px; }
.technology-flow { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.technology-flow span { position: relative; padding: 15px 0 15px 38px; border-bottom: 1px solid var(--line); font-family: "futura-100-cyrillic" !important; font-size: 11px; letter-spacing: .015em; }
.technology-flow span::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; border: 1px solid var(--accent); transform: translateY(-50%) rotate(45deg); transition: background .25s, transform .25s; }
.technology-flow span:hover::before { background: var(--accent); transform: translateY(-50%) rotate(135deg); }

.systems-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); gap: clamp(60px, 8vw, 150px); align-items: center; }
.systems-note { margin: 30px 0 0; max-width: 610px; color: var(--muted); font-size: 9px; line-height: 1.6; letter-spacing: .07em; text-transform: uppercase; }
.systems-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.systems-list li { min-height: 105px; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; font-family: "grtsk-vf" !important; font-weight: 680; font-size: 18px; line-height: 1.05; transition: color .25s, background .25s; }
.systems-list li:hover { color: #fff; background: var(--ink); }

/* Tasks */
.tasks-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(60px, 8vw, 150px); align-items: start; }
.tasks-list { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
.tasks-list span { position: relative; min-height: 82px; padding: 21px 42px 18px 0; border-bottom: 1px solid var(--line); font-family: "grtsk-vf" !important; font-size: clamp(19px, 1.45vw, 28px); line-height: 1.06; letter-spacing: -.025em; transition: padding .35s var(--ease), color .25s; }
.tasks-list span:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 30px; }
.tasks-list span:nth-child(even) { padding-left: 30px; }
.tasks-list span::after { content: "↗"; position: absolute; right: 15px; top: 20px; font-family: "futura-100-cyrillic" !important; font-size: 11px; color: var(--accent); opacity: 0; transform: translate(-8px, 8px); transition: opacity .25s, transform .35s var(--ease); }
.tasks-list span:hover { color: var(--accent); }
.tasks-list span:hover::after { opacity: 1; transform: translate(0); }

/* Experience */
.experience-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(65px, 8vw, 150px); align-items: start; }
.experience-copy { border-top: 1px solid var(--line); padding-top: 20px; columns: 2; column-gap: 34px; }
.experience-copy p { break-inside: avoid; margin: 0 0 18px; color: rgba(10,10,11,.78); font-size: 14px; line-height: 1.55; }
.experience-copy .binary-link { margin-top: 12px; break-inside: avoid; }

/* Collaboration */
.station-collaboration .scene-header { margin-bottom: 36px; }
.collaboration-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.collaboration-option { min-height: 340px; padding: 36px clamp(25px, 3vw, 54px) 32px 0; display: flex; flex-direction: column; }
.collaboration-option + .collaboration-option { padding-left: clamp(25px, 3vw, 54px); border-left: 1px solid var(--line); }
.collaboration-option h3 { margin: 0 0 28px; font-family: "grtsk-vf" !important; font-size: clamp(34px, 3.2vw, 62px); line-height: .92; letter-spacing: -.045em; }
.collaboration-option p { max-width: 620px; margin: 0 0 16px; line-height: 1.55; color: var(--muted); font-size: 14px; }
.collaboration-option .binary-link { margin-top: auto; }
.collaboration-option-dark { position: relative; color: var(--ink); z-index: 1; }
.collaboration-option-dark::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw) 0 0; background: rgba(47,79,217,.065); border-left: 2px solid var(--accent); border-radius: 0 0 0 58px; }
.collaboration-option-dark p { color: var(--muted); }
.collaboration-option-dark .budget { color: var(--accent); font-size: 10px; letter-spacing: .04em; }
.collaboration-option-dark .binary-link-light { color: var(--ink); }

/* Process */
.process-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(60px, 8vw, 150px); align-items: start; }
.process-flow { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.process-flow li { position: relative; display: grid; grid-template-columns: .35fr 1fr; gap: 30px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.process-flow li::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--accent); transition: width .5s var(--ease); }
.process-flow li:hover::before { width: 100%; }
.process-flow h3 { margin: 0; font-family: "grtsk-vf" !important; font-size: 28px; letter-spacing: -.03em; }
.process-flow p { margin: 0; max-width: 600px; color: var(--muted); line-height: 1.5; font-size: 14px; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(60px, 8vw, 150px); align-items: end; }
.contact-title { font-size: clamp(62px, 7.4vw, 142px); max-width: 1050px; }
.contact-main > p:not(.scene-label) { max-width: 720px; margin: 22px 0 0; color: var(--muted); line-height: 1.5; font-size: 15px; }
.contact-main .binary-button { margin-top: 34px; }
.site-footer { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 36px; border-left: 1px solid var(--line); padding-left: clamp(28px, 4vw, 70px); }
.site-footer > div:first-child { display: flex; flex-direction: column; gap: 7px; }
.site-footer strong { font-family: "grtsk-vf" !important; font-size: 24px; }
.site-footer > div:first-child span { color: var(--muted); font-size: 12px; }
.site-footer > div:first-child .mono { font-size: 9px; letter-spacing: .06em; }
.social-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.social-links a { display: flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; font-family: "futura-100-cyrillic" !important; font-size: 10px; border-bottom: 1px solid var(--line); transition: color .3s; }
.social-links svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .4s var(--ease); }
.social-links a:hover { color: var(--accent); }
.social-links a:hover svg { transform: rotate(-8deg) scale(1.08); }

/* Work modal */
.modal-layer { position: fixed; inset: 0; z-index: 1800; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: opacity .35s, visibility .35s; }
.modal-layer.is-open { visibility: visible; opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10,10,11,.5); backdrop-filter: blur(16px); }
.work-modal-panel { position: relative; width: min(620px, calc(100vw - 36px)); padding: 46px; background: var(--bg); border-radius: 4px 54px 4px 4px; box-shadow: 0 35px 120px rgba(0,0,0,.28); transform: translateZ(-200px) scale(.88); transition: transform .5s var(--ease); }
.modal-layer.is-open .work-modal-panel { transform: translateZ(0) scale(1); }
.work-modal-panel h2 { margin: 0 0 34px; font-family: "grtsk-vf" !important; font-size: clamp(44px, 5vw, 70px); line-height: .92; letter-spacing: -.045em; }
.work-modal-panel > a { display: flex; align-items: center; justify-content: space-between; min-height: 70px; border-top: 1px solid var(--line); text-decoration: none; font-family: "grtsk-vf" !important; font-size: 24px; font-weight: 700; transition: color .25s, padding .35s var(--ease); }
.work-modal-panel > a:last-child { border-bottom: 1px solid var(--line); }
.work-modal-panel > a:hover { padding-left: 12px; color: var(--accent); }
.work-modal-panel > a b { font-family: "futura-100-cyrillic" !important; font-size: 13px; }
.modal-close { position: absolute; right: 18px; top: 16px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 25px; cursor: pointer; }

/* Fullscreen contact overlay */
.contact-overlay { position: fixed; inset: 0; z-index: 2000; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .5s var(--ease), visibility .4s; }
.contact-overlay.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
.contact-overlay-header { position: sticky; top: 0; z-index: 5; min-height: 78px; padding: 17px clamp(20px, 4vw, 68px); display: flex; justify-content: space-between; align-items: center; background: rgba(246,245,241,.88); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.contact-overlay-header > div { display: flex; flex-direction: column; gap: 5px; }
.contact-overlay-header .mono { font-size: 8px; letter-spacing: .14em; color: var(--muted); }
.overlay-close { border: 0; background: none; font-family: "futura-100-cyrillic" !important; font-size: 10px; letter-spacing: .05em; cursor: pointer; display: flex; align-items: center; gap: 14px; }
.overlay-close b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 20px; font-weight: 400; }
.contact-overlay-body { width: min(100%, 1500px); margin: 0 auto; padding: clamp(48px, 7vw, 110px) clamp(20px, 5vw, 84px) 100px; }
.form-intro { display: grid; grid-template-columns: .65fr 1.35fr; column-gap: 60px; align-items: end; margin-bottom: 70px; }
.form-intro .scene-label { align-self: start; }
.form-intro h2 { grid-column: 2; margin: 0 0 18px; font-family: "grtsk-vf" !important; font-size: clamp(58px, 7vw, 134px); line-height: .82; letter-spacing: -.06em; }
.form-intro > p:last-child { grid-column: 2; max-width: 670px; margin: 0; color: var(--muted); line-height: 1.5; }
#contact-form { display: grid; grid-template-columns: .7fr 1.3fr; column-gap: 70px; }
.form-section { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; padding: 38px 0; border-top: 1px solid var(--line); }
.form-section-wide { grid-column: 2; }
.form-section h3 { grid-column: 1 / -1; margin: 0 0 12px; font-family: "grtsk-vf" !important; font-size: 30px; letter-spacing: -.03em; }
.form-field { display: flex; flex-direction: column; gap: 9px; }
.form-field-wide { grid-column: 1 / -1; }
.form-field > span,
.usage-fieldset legend { font-family: "futura-100-cyrillic" !important; font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 13px 0;
  outline: none;
  font-size: 17px;
  transition: border-color .25s;
}
.form-field textarea { resize: vertical; min-height: 105px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--accent); }
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea { border-color: #c22; }
.usage-fieldset { border-left: 0; border-right: 0; border-bottom: 0; }
.usage-fieldset legend { padding: 0; margin-bottom: 16px; }
.choice-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.choice-grid label { cursor: pointer; }
.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid span { min-height: 58px; border: 1px solid var(--line); border-radius: 11px 11px 3px 11px; display: grid; place-items: center; padding: 0 16px; font-family: "futura-100-cyrillic" !important; font-size: 10px; color: var(--muted); transition: background .25s, color .25s, border-color .25s; }
.choice-grid input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.conditional-fields[hidden] { display: none; }
.form-submit-area { display: flex; align-items: center; gap: 28px; padding-top: 35px; border-top: 1px solid var(--line); }
.binary-button-submit { min-width: 280px; }
.form-submit-area p { max-width: 510px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.contact-success { max-width: 900px; margin-left: auto; padding: 70px 0 120px; }
.contact-success h2 { margin: 0 0 24px; font-family: "grtsk-vf" !important; font-size: clamp(60px, 8vw, 140px); line-height: .84; letter-spacing: -.06em; }
.contact-success > p:not(.scene-label) { color: var(--muted); line-height: 1.5; max-width: 650px; }
.contact-success .binary-link { margin-top: 26px; }
body.overlay-open { overflow: hidden !important; }

/* Flow/mobile mode */
html.is-flow #depth-stage { position: relative; z-index: 10; }
html.is-flow .station { opacity: 1; visibility: visible; }
html.is-flow .depth-nav { display: none; }
html.is-flow .depth-instruction { display: none; }
html.is-flow .station + .station { border-top: 1px solid var(--line-soft); }
html.is-flow .scene-reveal { opacity: 0; transform: translateY(24px); }
html.is-flow .scene-reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .7s var(--ease), transform .7s var(--ease); }

@media (max-height: 780px) and (min-width: 961px) {
  :root { --header-h: 72px; }
  .site-header { padding-top: 13px; }
  .hero-name { font-size: clamp(65px, 7.8vw, 130px); }
  .hero-role { margin: 14px 0 22px; }
  .hero-thesis { font-size: clamp(25px, 2.15vw, 38px); margin-bottom: 14px; }
  .hero-description { font-size: 15px; line-height: 1.4; }
  .hero-actions { margin-top: 20px; }
  .scene-title { font-size: clamp(40px, 4.7vw, 82px); }
  .impact-item { min-height: 230px; }
  .work-row { min-height: 105px; padding-block: 14px; }
  .work-row p { font-size: 12px; }
  .capability-list li { padding-block: 12px; }
  .systems-list li { min-height: 82px; }
  .tasks-list span { min-height: 66px; padding-top: 14px; }
  .collaboration-option { min-height: 290px; padding-top: 25px; }
  .process-flow li { padding-block: 17px; }
}

@media (max-width: 1100px) {
  .work-layout,
  .capability-layout,
  .technology-layout,
  .systems-layout,
  .tasks-layout,
  .experience-layout,
  .process-layout,
  .contact-layout { gap: 42px; }
  .scene-title { font-size: clamp(42px, 5.3vw, 78px); }
  .work-layout { grid-template-columns: 1.2fr .8fr; }
  .capability-layout,
  .systems-layout { grid-template-columns: 1fr .82fr; }
  .tasks-list span { font-size: 19px; }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .site-header { padding: 14px 18px; align-items: center; }
  .brand-name { font-size: 15px; }
  .brand-role { font-size: 8px; }
  .binary-link-header { font-size: 14px; }
  .station { min-height: auto; padding: 110px 20px 90px; align-items: flex-start; }
  .station-hero { min-height: 100dvh; align-items: center; padding-top: 100px; }
  .hero-name { font-size: clamp(62px, 17vw, 110px); }
  .hero-role { margin: 17px 0 28px; font-size: 26px; }
  .hero-thesis { font-size: 31px; }
  .hero-description { font-size: 15px; }
  .hero-actions { flex-wrap: wrap; }
  .scene-title { font-size: clamp(48px, 12vw, 84px); }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .impact-item:nth-child(2) { border-right: 0; }
  .impact-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .work-layout,
  .capability-layout,
  .technology-layout,
  .systems-layout,
  .tasks-layout,
  .experience-layout,
  .process-layout,
  .contact-layout { grid-template-columns: 1fr; }
  .work-visual { grid-row: 1; max-height: none; aspect-ratio: 16 / 11; border-radius: 2px 40px 2px 2px; }
  .work-copy { grid-row: 2; }
  .systems-list { margin-top: 18px; }
  .tasks-list { margin-top: 15px; }
  .experience-copy { columns: 1; }
  .collaboration-grid { grid-template-columns: 1fr; }
  .collaboration-option + .collaboration-option { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .collaboration-option-dark { padding-left: 24px !important; padding-right: 24px; }
  .collaboration-option-dark::before { inset: 0 calc(50% - 50vw); border-radius: 0; }
  .site-footer { border-left: 0; border-top: 1px solid var(--line); padding: 34px 0 0; margin-top: 26px; }
  .form-intro { grid-template-columns: 1fr; gap: 14px; }
  .form-intro h2,
  .form-intro > p:last-child { grid-column: 1; }
  #contact-form { grid-template-columns: 1fr; }
  .form-section,
  .form-section-wide { grid-column: 1; }
}

@media (max-width: 640px) {
  .site-header .brand-role { display: none; }
  .binary-link-header .binary-label { max-width: 130px; overflow: hidden; }
  .station { padding-inline: 17px; padding-bottom: 72px; }
  .hero-name { font-size: clamp(58px, 19vw, 88px); line-height: .82; }
  .hero-thesis { font-size: 27px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .scene-title { font-size: clamp(45px, 13.5vw, 68px); }
  .impact-grid { grid-template-columns: 1fr; }
  .impact-item,
  .impact-item + .impact-item { min-height: 210px; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .work-row { grid-template-columns: 1fr; gap: 13px; }
  .work-row:hover,
  .work-row.is-active { padding-left: 0; }
  .work-row > span { justify-self: start; }
  .work-visual { aspect-ratio: 4 / 5; }
  .capability-thesis { font-size: 23px; }
  .systems-list,
  .tasks-list { grid-template-columns: 1fr; }
  .tasks-list span:nth-child(odd) { border-right: 0; padding-right: 42px; }
  .tasks-list span:nth-child(even) { padding-left: 0; }
  .collaboration-option { min-height: 320px; }
  .process-flow li { grid-template-columns: 1fr; gap: 9px; }
  .social-links { grid-template-columns: 1fr; }
  .work-modal-panel { padding: 40px 24px 28px; }
  .contact-overlay-header { padding-inline: 16px; }
  .overlay-close { font-size: 0; }
  .contact-overlay-body { padding-inline: 17px; }
  .form-intro { margin-bottom: 45px; }
  .form-intro h2 { font-size: 61px; }
  .form-section { grid-template-columns: 1fr; padding-block: 28px; }
  .form-field,
  .form-field-wide { grid-column: 1; }
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .choice-grid span { min-height: 50px; font-size: 9px; text-align: center; }
  .form-submit-area { flex-direction: column; align-items: stretch; }
  .binary-button-submit { min-width: 0; width: 100%; }
}

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

/* Layout safety */
html, body { max-width: 100%; overflow-x: clip; }
.station-shell,
.scene-header,
.work-layout,
.capability-layout,
.technology-layout,
.systems-layout,
.tasks-layout,
.experience-layout,
.collaboration-grid,
.process-layout,
.contact-layout,
.contact-main,
.site-footer { min-width: 0; max-width: 100%; }
.work-layout > *,
.capability-layout > *,
.technology-layout > *,
.systems-layout > *,
.tasks-layout > *,
.experience-layout > *,
.process-layout > *,
.contact-layout > * { min-width: 0; }

@media (max-width: 640px) {
  .scene-title { font-size: clamp(38px, 11.4vw, 52px); overflow-wrap: anywhere; }
  .contact-title { font-size: clamp(42px, 12vw, 58px); overflow-wrap: anywhere; }
  .experience-layout,
  .contact-layout { width: 100%; }
}

/* =========================================================
   v6 - refined loader, exact star cursor and brand mark
   ========================================================= */
#preloader {
  --loader-progress: 0;
  display: grid;
  place-items: center;
  background: transparent;
  isolation: isolate;
  transition: visibility .01s linear .95s;
}
.preloader-panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.2%;
  z-index: 0;
  background: var(--bg);
  will-change: transform;
  transition: transform .9s cubic-bezier(.76,0,.24,1);
}
.preloader-panel-top { top: 0; transform-origin: top; }
.preloader-panel-bottom { bottom: 0; transform-origin: bottom; }
#preloader.is-leaving .preloader-panel-top { transform: translate3d(0,-101%,0); }
#preloader.is-leaving .preloader-panel-bottom { transform: translate3d(0,101%,0); }
.preloader-center {
  position: relative;
  z-index: 2;
  width: min(440px, calc(100vw - 48px));
  display: grid;
  justify-items: center;
  gap: 18px;
  transition: opacity .28s ease, transform .6s var(--ease);
}
#preloader.is-leaving .preloader-center { opacity: 0; transform: scale(.96); }
.preloader-slices {
  position: relative;
  width: clamp(128px, 13vw, 220px);
  aspect-ratio: 271.53 / 131.77;
}
.preloader-slices img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translate3d(var(--slice-x),0,0);
  transition:
    opacity .18s linear var(--slice-delay),
    transform .72s cubic-bezier(.16,1,.3,1) var(--slice-delay);
}
#preloader.is-assembling .preloader-slices img { opacity: 1; transform: translate3d(0,0,0); }
#preloader.is-locked .preloader-slices img:nth-child(3n+1) { transform: translate3d(-1px,0,0); }
#preloader.is-locked .preloader-slices img:nth-child(3n+2) { transform: translate3d(1px,0,0); }
.preloader-word {
  font-family: "grtsk-vf" !important;
  font-size: clamp(28px, 3.3vw, 48px);
  font-weight: 860;
  letter-spacing: -.06em;
  line-height: 1;
  text-transform: lowercase;
}
.preloader-progress {
  width: min(280px, 72vw);
  height: 1px;
  overflow: hidden;
  background: var(--line);
}
.preloader-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(var(--loader-progress));
  transform-origin: left center;
  transition: transform .12s linear;
}
#preloader .preloader-copy {
  z-index: 2;
  text-transform: lowercase;
  transition: opacity .24s ease;
}
#preloader.is-leaving .preloader-copy { opacity: 0; }

.brand-lockup {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.brand-symbol {
  width: 31px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 auto;
}
.brand-copy { display: inline-flex; flex-direction: column; gap: 6px; }

/* Custom desktop cursor */
#site-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-80px,-80px,0);
  will-change: transform;
  transition: opacity .18s ease;
}
#site-cursor.is-visible { opacity: 1; }
#site-cursor.is-hidden { opacity: 0; }
#site-cursor img {
  width: 20px;
  height: 20px;
  display: block;
  transform: translate(-50%,-50%) scale(.72) rotate(0deg);
  transform-origin: center;
  transition: transform .24s var(--ease);
  filter: none;
  mix-blend-mode: normal;
}
#site-cursor-label {
  position: absolute;
  left: 15px;
  top: -18px;
  min-width: max-content;
  padding: 7px 10px 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: "futura-100-cyrillic" !important;
  font-size: 9px;
  letter-spacing: .04em;
  line-height: 1;
  opacity: 0;
  transform: translate3d(-6px,3px,0) scale(.94);
  transition: opacity .2s ease, transform .32s var(--ease);
}
#site-cursor.is-action img { transform: translate(-50%,-50%) scale(1.18) rotate(45deg); }
#site-cursor.is-action #site-cursor-label { opacity: 1; transform: translate3d(0,0,0) scale(1); }
#site-cursor.is-pressed img { transform: translate(-50%,-50%) scale(.76) rotate(90deg); }
html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor #depth-nav button,
html.has-custom-cursor .work-visual { cursor: none !important; }
html.has-custom-cursor input,
html.has-custom-cursor textarea,
html.has-custom-cursor select,
html.has-custom-cursor label { cursor: auto; }

#work-canvas { image-rendering: pixelated; }

@media (max-width: 960px), (hover: none), (pointer: coarse) {
  #site-cursor { display: none !important; }
  .brand-symbol { width: 26px; height: 13px; }
  .preloader-copy span:last-child { display: none; }
}

/* =========================================================
   v8 - linked work media + animated gvd mark
   ========================================================= */
.work-visual {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.work-visual::after { content: none !important; display: none !important; }
.work-visual-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 47px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(246,245,241,.88);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: 8px;
  letter-spacing: .08em;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.work-visual:hover .work-visual-caption,
.work-visual:focus-visible .work-visual-caption {
  background: rgba(47,79,217,.94);
  color: #fff;
}
.work-visual:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Preloader: the supplied gvd symbol is scanned into focus, then the page opens. */
#preloader {
  --loader-progress: 0;
  --loader-mask: 100%;
  --loader-position: 0%;
}
.preloader-center {
  width: min(420px, calc(100vw - 48px));
  gap: 24px;
}
.preloader-mark {
  position: relative;
  width: clamp(150px, 15vw, 250px);
  aspect-ratio: 271.53 / 131.77;
  overflow: visible;
}
.preloader-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.preloader-logo-ghost {
  opacity: .11;
  filter: grayscale(1);
}
.preloader-logo-fill {
  opacity: 1;
  clip-path: inset(var(--loader-mask) 0 0 0);
  will-change: clip-path;
}
.preloader-logo-echo {
  opacity: 0;
  clip-path: polygon(0 20%,100% 20%,100% 35%,0 35%,0 60%,100% 60%,100% 72%,0 72%);
  transform: translate3d(0,0,0);
  filter: invert(31%) sepia(79%) saturate(2440%) hue-rotate(220deg) brightness(90%);
}
.preloader-scan {
  position: absolute;
  z-index: 4;
  left: -8%;
  right: -8%;
  top: var(--loader-position);
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(47,79,217,.32);
  transform: translateY(-1px);
  transition: top .08s linear;
}
.preloader-wordline {
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.preloader-word {
  font-size: clamp(25px, 2.5vw, 38px);
  letter-spacing: -.055em;
}
#preloader-state {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: lowercase;
}
#preloader.is-loading .preloader-logo-echo {
  animation: preloaderLogoSignal 1.25s steps(1,end) infinite;
}
#preloader.is-ready .preloader-logo-fill {
  animation: preloaderLogoLock .32s steps(1,end) 1;
}
#preloader.is-ready .preloader-logo-echo { opacity: 0; animation: none; }
#preloader.is-leaving .preloader-center {
  opacity: 0;
  transform: translate3d(0,-8px,0) scale(.985);
}
@keyframes preloaderLogoSignal {
  0%, 68%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  69% { opacity: .42; transform: translate3d(-7px,0,0); }
  73% { opacity: .22; transform: translate3d(5px,0,0); }
  77% { opacity: 0; transform: translate3d(0,0,0); }
}
@keyframes preloaderLogoLock {
  0%,100% { transform: translate3d(0,0,0); }
  32% { transform: translate3d(-2px,0,0); }
  58% { transform: translate3d(2px,0,0); }
}

/* Cyclic signal animation for the supplied logo in the fixed header. */
.brand-mark {
  position: relative;
  width: 31px;
  height: 16px;
  flex: 0 0 auto;
}
.brand-mark .brand-symbol,
.brand-symbol-echo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-mark .brand-symbol {
  animation: brandSignalBase 7.8s steps(1,end) infinite;
}
.brand-symbol-echo {
  opacity: 0;
  pointer-events: none;
  clip-path: polygon(0 10%,100% 10%,100% 32%,0 32%,0 56%,100% 56%,100% 75%,0 75%);
  filter: invert(31%) sepia(79%) saturate(2440%) hue-rotate(220deg) brightness(90%);
  animation: brandSignalEcho 7.8s steps(1,end) infinite;
}
.brand-lockup:hover .brand-symbol,
.brand-lockup:focus-visible .brand-symbol {
  animation-duration: 1.25s;
}
.brand-lockup:hover .brand-symbol-echo,
.brand-lockup:focus-visible .brand-symbol-echo {
  animation-duration: 1.25s;
}
@keyframes brandSignalBase {
  0%, 88%, 100% { transform: translate3d(0,0,0); clip-path: inset(0); }
  89% { transform: translate3d(-1px,0,0); clip-path: inset(0 0 52% 0); }
  90% { transform: translate3d(1px,0,0); clip-path: inset(45% 0 0 0); }
  91.5% { transform: translate3d(0,0,0); clip-path: inset(0); }
}
@keyframes brandSignalEcho {
  0%, 87.8%, 92%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  88.4% { opacity: .72; transform: translate3d(4px,0,0); }
  89.4% { opacity: .38; transform: translate3d(-3px,0,0); }
  90.6% { opacity: .55; transform: translate3d(2px,0,0); }
}

@media (max-width: 960px), (hover: none), (pointer: coarse) {
  .brand-mark { width: 26px; height: 13px; }
  .brand-mark .brand-symbol,
  .brand-symbol-echo { width: 100%; height: 100%; }
  .brand-mark .brand-symbol,
  .brand-symbol-echo { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-logo-echo,
  .brand-mark .brand-symbol,
  .brand-symbol-echo { animation: none !important; }
}

/* =========================================================
   v9 - editorial type hierarchy, persistent scroll cue,
   performance-safe motion
   ========================================================= */
:root {
  --type-secondary: #b9bab7;
}

.type-hierarchy {
  text-wrap: balance;
}
.type-hierarchy .type-primary,
.type-hierarchy .type-secondary {
  display: inline;
}
.type-primary { color: var(--ink); }
.type-secondary { color: var(--type-secondary); }
.kinetic-segment {
  display: inline-block !important;
  transform-origin: 0 70%;
  backface-visibility: hidden;
}
.scene-title,
.contact-title {
  text-transform: none;
}
.hero-thesis {
  max-width: 920px;
  line-height: .98;
}
.capability-thesis.type-hierarchy {
  max-width: 760px;
  line-height: 1.08;
}
.scene-reveal { will-change: auto; }

.global-scroll-cue {
  position: fixed;
  z-index: 980;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  color: rgba(10,10,11,.7);
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: lowercase;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.global-scroll-cue img {
  width: 11px;
  height: 11px;
  opacity: .82;
}
.global-scroll-cue > i {
  position: relative;
  display: block;
  width: 58px;
  height: 1px;
  background: rgba(10,10,11,.16);
  overflow: visible;
}
.global-scroll-cue > i > b {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--accent);
  transform: translate3d(0,-50%,0) rotate(45deg);
  animation: scrollCueTravel 1.8s var(--ease) infinite;
}
.global-scroll-cue.is-end > i > b {
  animation-direction: reverse;
}
body.overlay-open .global-scroll-cue { opacity: 0; transform: translate(-50%, 8px); }
@keyframes scrollCueTravel {
  0% { transform: translate3d(0,-50%,0) rotate(45deg); opacity: .25; }
  35% { opacity: 1; }
  100% { transform: translate3d(53px,-50%,0) rotate(45deg); opacity: .15; }
}

/* Keep the spatial scene composited, but avoid reserving GPU layers forever. */
html.is-depth .station { contain: layout paint style; }
html.is-depth .station.is-active { contain: layout style; }

@media (max-width: 960px) {
  :root { --type-secondary: #b2b3b0; }
  #ambient-grain { display: none; }
  #scene-flash { display: none; }
  html.is-flow .station:not(.station-hero) {
    content-visibility: auto;
    contain-intrinsic-size: 820px;
  }
  .global-scroll-cue {
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 7px 10px;
    background: rgba(246,245,241,.78);
    backdrop-filter: none;
    border-radius: 999px;
  }
  .global-scroll-cue > i { width: 38px; }
  @keyframes scrollCueTravel {
    0% { transform: translate3d(0,-50%,0) rotate(45deg); opacity: .25; }
    35% { opacity: 1; }
    100% { transform: translate3d(33px,-50%,0) rotate(45deg); opacity: .15; }
  }
  .hero-thesis { line-height: 1.01; }
}

@media (prefers-reduced-motion: reduce) {
  .global-scroll-cue > i > b { animation: none; left: calc(50% - 2px); }
}

/* =========================================================
   v10 - editorial work links with inline five-step media
   ========================================================= */
.work-layout {
  display: block;
  width: min(100%, 1500px);
}
.work-layout > .scene-header {
  margin-bottom: clamp(18px, 2.8vh, 34px);
}
.work-list {
  border-top: 1px solid var(--line);
}
.work-row {
  --work-media-width: clamp(180px, 18vw, 330px);
  --work-media-height: clamp(88px, 9.4vw, 174px);
  --work-media-shift: clamp(102px, 10vw, 184px);
  position: relative;
  display: block;
  min-height: 0;
  padding: clamp(16px, 2.1vh, 26px) 0 clamp(14px, 1.8vh, 22px);
  overflow: visible;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  transition: color .28s var(--ease);
}
.work-row:hover,
.work-row.is-active {
  padding-left: 0;
}
.work-title {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: .22em;
  min-height: var(--work-media-height);
  margin: 0;
  font-family: "grtsk-vf" !important;
  font-size: clamp(38px, 4.65vw, 84px);
  font-weight: 760;
  line-height: .88;
  letter-spacing: -.055em;
  text-wrap: balance;
}
.work-title-segment {
  position: relative;
  z-index: 2;
  display: block;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  transition:
    transform .58s cubic-bezier(.16,1,.3,1),
    color .34s var(--ease),
    opacity .34s var(--ease);
}
.work-title-before {
  justify-self: end;
  text-align: right;
}
.work-title-after {
  justify-self: start;
  text-align: left;
}
.work-inline-media {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: var(--work-media-width);
  height: var(--work-media-height);
  overflow: hidden;
  opacity: 0;
  background: #0b0b0c;
  border-radius: 2px 30px 2px 2px;
  box-shadow: 0 20px 44px rgba(10,10,11,.12);
  transform: translate3d(-50%,-50%,0) scaleX(.025);
  transform-origin: center;
  transition:
    opacity .18s linear,
    transform .58s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.work-inline-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.work-row:hover .work-title-before,
.work-row.is-active .work-title-before {
  transform: translate3d(calc(var(--work-media-shift) * -1),0,0);
}
.work-row:hover .work-title-after,
.work-row.is-active .work-title-after {
  transform: translate3d(var(--work-media-shift),0,0);
}
.work-row:hover .work-inline-media,
.work-row.is-active .work-inline-media {
  z-index: 1;
  opacity: 1;
  transform: translate3d(-50%,-50%,0) scaleX(1);
}
.work-row:hover .work-title-segment,
.work-row.is-active .work-title-segment {
  color: var(--ink);
}
.work-row-meta {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}
.work-row-meta > span {
  max-width: 760px;
}
.work-row-meta > b {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .06em;
  transition: color .3s, transform .35s var(--ease);
}
.work-row:hover .work-row-meta > b,
.work-row.is-active .work-row-meta > b {
  color: var(--accent);
  transform: translate3d(5px,0,0);
}
.work-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

/* The old separate media plane is intentionally removed in v10. */
.work-visual,
.work-visual-caption,
#work-canvas { display: none !important; }

@media (max-width: 1280px) and (min-width: 961px) {
  .work-row {
    --work-media-width: clamp(150px, 17vw, 230px);
    --work-media-height: clamp(76px, 8.8vw, 128px);
    --work-media-shift: clamp(86px, 9.5vw, 130px);
  }
  .work-title { font-size: clamp(34px, 4.15vw, 58px); }
  .work-row-meta { font-size: 11px; }
}

@media (max-width: 960px) {
  .work-layout { display: block; }
  .work-layout > .scene-header { margin-bottom: 24px; }
  .work-row {
    --work-media-width: 100%;
    --work-media-height: auto;
    --work-media-shift: 0px;
    padding: 22px 0 26px;
    content-visibility: auto;
    contain-intrinsic-size: 520px;
  }
  .work-title {
    display: block;
    min-height: 0;
    font-size: clamp(36px, 11.5vw, 64px);
    line-height: .93;
  }
  .work-title-segment {
    display: inline;
    transform: none !important;
  }
  .work-inline-media {
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 18px 0 15px;
    opacity: 1;
    border-radius: 2px 28px 2px 2px;
    transform: none !important;
    box-shadow: 0 16px 38px rgba(10,10,11,.1);
  }
  .work-row-meta {
    display: grid;
    gap: 12px;
    margin-top: 0;
    font-size: 12px;
  }
  .work-row-meta > b { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .work-title-segment,
  .work-inline-media,
  .work-row-meta > b { transition: none !important; }
}

/* =========================================================
   v11 - scroll-linked depth, performance pass, editorial UI
   ========================================================= */
#scene-flash { display: none !important; }
.scene-label { display: none !important; }

html.is-depth .station-shell {
  transform: translateZ(0);
  backface-visibility: hidden;
}
html.is-depth .scene-reveal {
  transform: translate3d(0, var(--scene-segment-y, 0px), 0);
}
html.is-depth .kinetic-segment {
  opacity: var(--scene-segment-opacity, 1);
  transform: translate3d(0, var(--scene-segment-y, 0px), 0);
}
html.is-flow .station-shell { filter: none !important; }

.signal-title::before,
.signal-title::after {
  opacity: var(--scene-signal-opacity, 0) !important;
  animation: none !important;
  filter: none !important;
  mix-blend-mode: multiply;
  transition: none !important;
}
.signal-title::before {
  clip-path: inset(14% 0 58% 0);
  transform: translate3d(var(--scene-signal-shift, 0px), 0, 0) scaleX(1.012);
}
.signal-title::after {
  clip-path: inset(61% 0 10% 0);
  transform: translate3d(var(--scene-signal-shift-neg, 0px), 0, 0) skewX(-1.5deg);
}
.signal-title.is-glitching::before,
.signal-title.is-glitching::after { animation: none !important; }

/* Refined cyclic header signal: tiny slice displacement, no full-logo shake. */
.brand-mark .brand-symbol { animation: none !important; }
.brand-symbol-echo {
  animation: brandQuietSignal 8.4s steps(1, end) infinite !important;
  opacity: 0;
  clip-path: inset(38% 0 42% 0);
}
@keyframes brandQuietSignal {
  0%, 88%, 92%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  89% { opacity: .24; transform: translate3d(2px,0,0); }
  90% { opacity: .12; transform: translate3d(-1px,0,0); }
  91% { opacity: .2; transform: translate3d(1px,0,0); }
}

/* Editorial actions: no pill or filled panel. */
.binary-button,
.binary-button-primary,
.binary-button-large,
.binary-button-submit {
  min-width: 0;
  min-height: 0;
  padding: 9px 0 10px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent !important;
  color: var(--ink) !important;
  justify-content: flex-start;
  gap: 14px;
  isolation: auto;
  box-shadow: none;
  transform: none;
}
.binary-button::before {
  content: "";
  position: relative;
  inset: auto;
  z-index: auto;
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
  -webkit-mask: url("../public/assets/pic_star.svg") center / contain no-repeat;
  mask: url("../public/assets/pic_star.svg") center / contain no-repeat;
  transform: rotate(0deg) scale(.78);
  transition: transform .42s var(--ease), color .3s;
}
.binary-button::after {
  content: "";
  position: absolute;
  left: 27px;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  opacity: .26;
  transform: scaleX(.18);
  transform-origin: left center;
  transition: transform .48s var(--ease), opacity .3s;
}
.binary-button:hover,
.binary-button:focus-visible {
  color: var(--accent) !important;
  border-radius: 0;
  transform: none;
}
.binary-button:hover::before,
.binary-button:focus-visible::before { transform: rotate(90deg) scale(1); }
.binary-button:hover::after,
.binary-button:focus-visible::after { transform: scaleX(1); opacity: .62; }
.binary-button b {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
  transition: transform .38s var(--ease);
}
.binary-button:hover b,
.binary-button:focus-visible b { transform: translate3d(4px,-3px,0); }

.capability-list li i { display: none; }
.capability-list li:hover span { color: var(--accent); transform: translateX(8px); }
.collaboration-option-dark::before {
  background: transparent;
  border-left: 1px solid var(--line);
  border-radius: 0;
}

/* One compact contextual scroll cue. Only one direction is visible at a time. */
.global-scroll-cue {
  left: clamp(22px, 3.2vw, 58px);
  right: auto;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  background: transparent;
  color: rgba(10,10,11,.64);
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: lowercase;
  transition: opacity .24s, transform .32s var(--ease);
}
.scroll-cue-icon {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(10,10,11,.19);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
  transition: opacity .16s, transform .28s var(--ease);
}
.scroll-cue-label {
  white-space: nowrap;
  transition: opacity .16s, transform .28s var(--ease);
}
.global-scroll-cue[data-direction="next"] .scroll-cue-icon { animation: cueNext 1.9s var(--ease) infinite; }
.global-scroll-cue[data-direction="previous"] .scroll-cue-icon { animation: cuePrevious 1.9s var(--ease) infinite; }
.global-scroll-cue.is-switching .scroll-cue-icon,
.global-scroll-cue.is-switching .scroll-cue-label {
  opacity: 0;
  transform: translateY(5px);
}
body.overlay-open .global-scroll-cue { opacity: 0; transform: translateY(8px); pointer-events: none; }
@keyframes cueNext { 50% { transform: translateY(3px); } }
@keyframes cuePrevious { 50% { transform: translateY(-3px); } }

/* Work scene fit and editorial hover media. */
.station-work { padding-top: calc(var(--header-h) + 18px); padding-bottom: 54px; }
.station-work .station-shell { align-self: center; }
.station-work .scene-title { font-size: clamp(42px, 4.25vw, 76px); line-height: .9; }
.work-layout > .scene-header { margin-bottom: clamp(8px, 1.3vh, 16px); }
.work-row {
  --work-media-width: clamp(160px, 16vw, 285px);
  --work-media-height: clamp(78px, 8.2vw, 145px);
  --work-media-shift: clamp(90px, 8.8vw, 156px);
  padding: clamp(10px, 1.35vh, 16px) 0 clamp(9px, 1.2vh, 14px);
}
.work-title {
  min-height: var(--work-media-height);
  font-size: clamp(31px, 3.55vw, 62px);
  line-height: .9;
}
.work-row-meta { margin-top: 2px; font-size: 11px; }
.work-inline-media { border-radius: 0 26px 0 0; box-shadow: 0 18px 38px rgba(10,10,11,.1); }

/* Lightweight overlays: no live backdrop blur over animated canvas. */
.modal-layer { transition: opacity .24s, visibility .24s; }
.modal-backdrop { background: rgba(10,10,11,.48); backdrop-filter: none !important; }
.work-modal-panel {
  border-radius: 0 34px 0 0;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
  transform: translate3d(0,12px,0) scale(.98);
  transition: transform .34s var(--ease);
  contain: layout paint;
}
.modal-layer.is-open .work-modal-panel { transform: translate3d(0,0,0) scale(1); }
.contact-overlay-header { backdrop-filter: none !important; background: rgba(246,245,241,.97); }
body.overlay-open #ambient-grain { display: none; }
body.overlay-open #depth-canvas { opacity: 0; visibility: hidden; }

/* New glitch preloader: sliced lock-up, no scanning bars. */
#preloader {
  --loader-progress: 0;
  --loader-jitter: 5px;
  display: grid;
  place-items: center;
  transition: opacity .42s var(--ease), visibility .42s, transform .42s var(--ease);
}
.preloader-center { width: min(420px, calc(100vw - 54px)); }
.preloader-mark {
  position: relative;
  width: min(340px, 72vw);
  margin: 0 auto;
  aspect-ratio: 2.25 / 1;
}
.preloader-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.preloader-logo-base {
  opacity: calc(.16 + var(--loader-progress) * .84);
  filter: none;
}
.preloader-logo-slice {
  opacity: var(--loader-slice-opacity, .7);
  animation: loaderSliceSignal 1.25s steps(1, end) infinite;
}
.preloader-logo-slice-a { clip-path: inset(12% 0 67% 0); animation-delay: -.2s; }
.preloader-logo-slice-b { clip-path: inset(42% 0 36% 0); animation-delay: -.65s; }
.preloader-logo-slice-c { clip-path: inset(72% 0 10% 0); animation-delay: -.95s; }
@keyframes loaderSliceSignal {
  0%, 72%, 100% { transform: translate3d(0,0,0); }
  74% { transform: translate3d(var(--loader-jitter),0,0) scaleX(1.012); }
  77% { transform: translate3d(calc(var(--loader-jitter) * -0.7),0,0); }
  80% { transform: translate3d(1px,0,0); }
}
.preloader-wordline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 22px;
  margin-top: 12px;
}
.preloader-word { font-family: "grtsk-vf" !important; font-size: 42px; font-weight: 900; letter-spacing: -.05em; }
.preloader-wordline .mono { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.preloader-copy { color: var(--muted); }
#preloader.is-ready .preloader-logo-slice { opacity: 0; animation: none; }
#preloader.is-ready .preloader-logo-base { opacity: 1; filter: none; }
#preloader.is-leaving { opacity: 0; visibility: hidden; transform: scale(1.008); }
.preloader-panel,
.preloader-scan,
.preloader-logo-ghost,
.preloader-logo-fill,
.preloader-logo-echo { display: none !important; }

@media (max-height: 780px) and (min-width: 961px) {
  .station-work { padding-top: calc(var(--header-h) + 8px); padding-bottom: 38px; }
  .station-work .scene-title { font-size: clamp(38px, 3.8vw, 62px); }
  .work-row {
    --work-media-height: clamp(65px, 7.2vw, 105px);
    --work-media-width: clamp(145px, 14.4vw, 230px);
    --work-media-shift: clamp(78px, 8vw, 125px);
    padding: 7px 0 8px;
  }
  .work-title { font-size: clamp(28px, 3.1vw, 50px); }
  .work-row-meta { font-size: 10px; line-height: 1.3; }
}

@media (max-width: 960px) {
  html.is-flow .station-shell { filter: none !important; }
  .global-scroll-cue {
    left: 12px;
    right: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 7px 9px;
    background: rgba(246,245,241,.9);
    border: 1px solid var(--line-soft);
    font-size: 7px;
  }
  .scroll-cue-icon { width: 18px; height: 18px; font-size: 10px; }
  .station-work { padding-top: var(--header-h); }
  .work-title { font-size: clamp(34px, 10.5vw, 58px); }
  .preloader-mark { width: min(280px, 76vw); }
  .preloader-word { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-icon,
  .preloader-logo-slice,
  .brand-symbol-echo { animation: none !important; }
  html.is-depth .station-shell { filter: none !important; }
}

/* v11 performance guardrails */
html.is-low-power #ambient-grain { display: none !important; }
html.is-low-power .brand-symbol-echo { animation-duration: 12s !important; }
html.is-low-power .signal-title::before,
html.is-low-power .signal-title::after { display: none !important; }
/* Preloader must remain opaque until the hand-off completes. */
#preloader { background: var(--bg) !important; }


/* =========================================================
   v12 - performance and typography correction
   ========================================================= */
#depth-nav-progress {
  height: 100% !important;
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

html.is-depth .station-shell {
  filter: none !important;
  will-change: auto;
}
html.is-depth .station {
  will-change: transform, opacity;
  contain: layout style;
}

.scene-title,
.contact-title,
.hero-name {
  font-variation-settings: normal !important;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
.hero-name {
  font-weight: 900;
  letter-spacing: -.045em;
}

/* Glitch affects only two clipped copies. The readable base text is never distorted. */
.signal-title {
  isolation: isolate;
  filter: none !important;
}
.signal-title::before,
.signal-title::after {
  color: currentColor;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.signal-title::before {
  clip-path: inset(17% 0 61% 0);
  transform: translate3d(var(--scene-signal-shift, 0px), 0, 0) scaleX(1.01);
}
.signal-title::after {
  clip-path: inset(62% 0 14% 0);
  transform: translate3d(var(--scene-signal-shift-neg, 0px), 0, 0) skewX(-1.2deg);
}

.scene-reveal,
.kinetic-segment {
  will-change: transform, opacity;
}

#site-cursor img {
  filter: none !important;
  mix-blend-mode: normal !important;
}

#preloader,
.preloader-logo-base,
#preloader.is-leaving {
  filter: none !important;
}

@media (max-width: 960px), (prefers-reduced-motion: reduce) {
  html.is-flow .scene-reveal,
  html.is-flow .kinetic-segment {
    transform: none !important;
    opacity: 1 !important;
  }
}


/* =========================================================
   v12.1 - cinematic title reveal + strict performance pass
   ========================================================= */

/* Never animate live blur or backdrop blur. */
.modal-backdrop,
.contact-overlay-header,
.work-inline-media,
.work-visual,
.station-shell,
#preloader,
.preloader-logo-base,
.preloader-logo-slice {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Keep the readable title as a clean film-title plate. */
.scene-title,
.contact-title,
.hero-name,
.hero-role,
.hero-thesis {
  font-variation-settings: normal !important;
  font-synthesis: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.hero-name {
  font-weight: 850;
  letter-spacing: -.035em;
}
.scene-title,
.contact-title { letter-spacing: -.042em; }

/* Scroll-linked reveal: clean base title + two clipped signal echoes. */
html.is-depth .signal-title {
  opacity: var(--scene-title-opacity, 1);
  transform: translate3d(0, var(--scene-title-y, 0px), 0) scaleX(var(--scene-title-scale, 1));
  transform-origin: 50% 60%;
  backface-visibility: hidden;
}
.signal-title::before,
.signal-title::after {
  color: currentColor;
  opacity: var(--scene-signal-opacity, 0) !important;
  animation: none !important;
  mix-blend-mode: normal !important;
  text-shadow: none !important;
  backface-visibility: hidden;
  pointer-events: none;
}
.signal-title::before {
  clip-path: inset(18% 0 58% 0);
  transform: translate3d(var(--scene-signal-shift, 0px), -1px, 0) scaleX(1.012);
}
.signal-title::after {
  clip-path: inset(63% 0 12% 0);
  transform: translate3d(var(--scene-signal-shift-neg, 0px), 1px, 0) scaleX(.992);
}

/* Meaningful hierarchy settles like a film title, without per-letter layout work. */
html.is-depth .kinetic-segment {
  opacity: var(--scene-segment-opacity, 1);
  transform: translate3d(0, var(--scene-segment-y, 0px), 0);
  backface-visibility: hidden;
}
.type-hierarchy .kinetic-segment:nth-child(2) { transition-delay: 0ms; }
.type-hierarchy .kinetic-segment:nth-child(3) { transition-delay: 0ms; }
.type-hierarchy .kinetic-segment:nth-child(4) { transition-delay: 0ms; }

/* Avoid creating dozens of permanent GPU layers. Only scene planes are promoted. */
.scene-reveal,
.kinetic-segment,
.signal-title::before,
.signal-title::after { will-change: auto !important; }
html.is-depth .station {
  will-change: transform, opacity;
  contain: layout paint style;
}

/* Static grain is visually subtle; low-power and mobile omit it entirely. */
#ambient-grain { opacity: .018; animation: none !important; }
html.is-low-power #ambient-grain { display: none !important; }

/* Overlay interaction must stay responsive. */
body.overlay-open #ambient-grain,
body.overlay-open #depth-canvas { visibility: hidden !important; }
body.overlay-open .station { pointer-events: none !important; }

/* Preloader uses sharp sliced typography, never soft blur. */
#preloader { contain: strict; }
.preloader-logo-slice { opacity: var(--loader-slice-opacity, .55); }
#preloader.is-ready .preloader-logo-slice { opacity: 0; }

@media (max-width: 960px) {
  #ambient-grain { display: none !important; }
  .signal-title::before,
  .signal-title::after { display: none !important; }
  .scene-title,
  .contact-title,
  .hero-name { transform: none !important; opacity: 1 !important; }
}


/* =========================================================
   v13 - slow glitter, command-line loader, unified capabilities
   ========================================================= */

/* Wide Grtsk titles: use the actual variable axes when available. */
.scene-title,
.contact-title,
.hero-name,
.work-title,
.capability-thesis {
  font-family: "grtsk-vf" !important;
  font-synthesis: none;
  font-optical-sizing: auto;
}
.scene-title,
.contact-title,
.hero-name {
  font-weight: 900 !important;
  font-stretch: 120%;
  font-variation-settings: "wght" 900, "wdth" 120 !important;
  letter-spacing: -.045em;
}
.capability-thesis {
  font-weight: 780;
  font-stretch: 112%;
  font-variation-settings: "wght" 780, "wdth" 112 !important;
}

/* Command-line preloader. No duplicated status beside gvd. */
#preloader {
  --loader-progress: 0;
  display: grid;
  place-items: center;
  background: var(--bg) !important;
  contain: strict;
  transition: opacity .42s var(--ease), visibility .42s, transform .42s var(--ease);
}
.preloader-console {
  width: min(720px, calc(100vw - 56px));
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(34px, 6vw, 82px);
}
.preloader-lockup {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 17px;
}
.preloader-mark {
  width: min(236px, 32vw);
  aspect-ratio: 2.25 / 1;
  margin: 0;
}
.preloader-word {
  font-family: "grtsk-vf" !important;
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 900;
  font-stretch: 120%;
  font-variation-settings: "wght" 900, "wdth" 120;
  letter-spacing: -.055em;
  line-height: .8;
}
.preloader-terminal {
  min-height: 190px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  display: grid;
  align-content: center;
  gap: 7px;
  color: rgba(10,10,11,.72);
  font-size: clamp(10px, 1vw, 12px);
  line-height: 1.55;
  letter-spacing: .035em;
}
.terminal-line {
  min-height: 1.55em;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 7px;
  gap: 7px;
  align-items: baseline;
  opacity: .24;
  transform: translate3d(0, 4px, 0);
  transition: opacity .26s, transform .32s var(--ease), color .26s;
}
.terminal-line.is-active,
.terminal-line.is-complete {
  opacity: 1;
  transform: translate3d(0,0,0);
}
.terminal-line.is-active { color: var(--ink); }
.terminal-line.is-complete { color: rgba(10,10,11,.58); }
.terminal-prompt { color: var(--accent); }
.terminal-caret {
  width: 5px;
  height: 1em;
  background: var(--accent);
  transform: translateY(2px);
  animation: terminalCaret .78s steps(1,end) infinite;
}
@keyframes terminalCaret { 50% { opacity: 0; } }
.preloader-logo-base { opacity: calc(.22 + var(--loader-progress) * .78); }
.preloader-logo-slice { opacity: calc((1 - var(--loader-progress)) * .54); }
#preloader.is-ready .preloader-logo-slice { opacity: 0; animation: none; }
#preloader.is-leaving { opacity: 0; visibility: hidden; transform: scale(1.006); }

/* One shared composition for all three capability scenes. */
.capability-layout,
.technology-layout,
.systems-layout {
  display: grid !important;
  grid-template-columns: minmax(0, .96fr) minmax(430px, 1.04fr) !important;
  gap: clamp(52px, 7vw, 126px) !important;
  align-items: center !important;
}
.capability-heading {
  align-self: center;
  max-width: 760px;
}
.capability-heading .scene-title {
  max-width: 820px;
  margin-bottom: clamp(22px, 3vh, 38px);
}
.capability-thesis {
  max-width: 720px;
  margin: 0;
  font-size: clamp(23px, 2.15vw, 38px);
  line-height: 1.08;
}
.capability-intro {
  max-width: 650px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.55;
}
.systems-note {
  max-width: 620px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.55;
  letter-spacing: .08em;
  text-transform: lowercase;
}
.capability-list {
  width: 100%;
  max-width: 760px;
  justify-self: end;
  align-self: center;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.capability-list li {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 55px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  overflow: visible;
  color: var(--ink);
  font-family: "futura-100-cyrillic" !important;
  font-size: clamp(11px, 1vw, 15px);
  line-height: 1.35;
  opacity: var(--scene-segment-opacity, 1);
  transform: translate3d(var(--scene-list-shift, 0px), 0, 0);
}
.capability-list li::before,
.capability-list li::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--accent);
  -webkit-mask: url("../public/assets/pic_star.svg") center / contain no-repeat;
  mask: url("../public/assets/pic_star.svg") center / contain no-repeat;
  opacity: 0;
  transform: rotate(-45deg) scale(.28);
  transition: opacity .24s, transform .4s var(--ease);
}
.capability-list li::after {
  justify-self: end;
  transform: rotate(45deg) scale(.28);
}
.capability-list li > span {
  position: relative;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  transition: color .25s, transform .4s var(--ease);
}
.capability-list li > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .42s var(--ease);
}
.capability-list li:hover::before,
.capability-list li:hover::after,
.capability-list li:focus-within::before,
.capability-list li:focus-within::after {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.capability-list li:hover > span,
.capability-list li:focus-within > span {
  color: var(--accent);
  transform: translate3d(3px,0,0);
}
.capability-list li:hover > span::after,
.capability-list li:focus-within > span::after { transform: scaleX(1); }

@media (max-height: 780px) and (min-width: 961px) {
  .capability-layout,
  .technology-layout,
  .systems-layout { gap: clamp(38px, 5vw, 88px) !important; }
  .capability-heading .scene-title { margin-bottom: 18px; }
  .capability-thesis { font-size: clamp(20px, 1.8vw, 31px); }
  .capability-intro,
  .systems-note { margin-top: 18px; }
  .capability-list li { min-height: 44px; padding: 8px 0; }
}

@media (max-width: 960px) {
  .preloader-console {
    grid-template-columns: 1fr;
    gap: 26px;
    width: min(560px, calc(100vw - 38px));
  }
  .preloader-mark { width: min(210px, 58vw); }
  .preloader-terminal { min-height: 178px; }
  .capability-layout,
  .technology-layout,
  .systems-layout {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
  .capability-list { max-width: none; justify-self: stretch; }
  .capability-list li { min-height: 50px; }
  .scene-title,
  .contact-title,
  .hero-name {
    font-stretch: 112%;
    font-variation-settings: "wght" 900, "wdth" 112 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-caret,
  .preloader-logo-slice { animation: none !important; }
  .capability-list li { transform: none !important; opacity: 1 !important; }
}


/* =========================================================
   v14 - monochrome pixel titles, terminal loader, symbol lists
   ========================================================= */
:root {
  --accent: #0a0a0b;
  --type-secondary: #b8b9b6;
}
::selection { background: var(--ink); color: var(--bg); }

/* Pure black and white system. */
.scene-label { display: none !important; }
.live-dot,
.binary-link-header i,
.depth-nav-track i,
.depth-nav button.is-active i,
.depth-nav button:hover i,
.terminal-caret,
.terminal-prompt { background-color: var(--ink) !important; color: var(--ink) !important; }
.depth-nav button span { background: var(--ink) !important; color: var(--bg) !important; }

/* One readable title only: no duplicate glitch layers. */
.signal-title::before,
.signal-title::after { display: none !important; content: none !important; }
html.is-depth .signal-title,
html.is-depth .capability-thesis {
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition: none !important;
}
html.is-depth .station[data-pixel-stage="0"] .signal-title,
html.is-depth .station[data-pixel-stage="0"] .capability-thesis {
  -webkit-mask-image: none;
  mask-image: none;
}
html.is-depth .station[data-pixel-stage="1"] .signal-title,
html.is-depth .station[data-pixel-stage="1"] .capability-thesis {
  -webkit-mask-image: repeating-conic-gradient(#000 0 31%, transparent 0 50%);
  mask-image: repeating-conic-gradient(#000 0 31%, transparent 0 50%);
  -webkit-mask-size: 3px 3px;
  mask-size: 3px 3px;
}
html.is-depth .station[data-pixel-stage="2"] .signal-title,
html.is-depth .station[data-pixel-stage="2"] .capability-thesis {
  -webkit-mask-image: repeating-conic-gradient(#000 0 29%, transparent 0 50%);
  mask-image: repeating-conic-gradient(#000 0 29%, transparent 0 50%);
  -webkit-mask-size: 5px 5px;
  mask-size: 5px 5px;
}
html.is-depth .station[data-pixel-stage="3"] .signal-title,
html.is-depth .station[data-pixel-stage="3"] .capability-thesis {
  -webkit-mask-image: repeating-conic-gradient(#000 0 27%, transparent 0 50%);
  mask-image: repeating-conic-gradient(#000 0 27%, transparent 0 50%);
  -webkit-mask-size: 8px 8px;
  mask-size: 8px 8px;
}
html.is-depth .station[data-pixel-stage="4"] .signal-title,
html.is-depth .station[data-pixel-stage="4"] .capability-thesis {
  -webkit-mask-image: repeating-conic-gradient(#000 0 25%, transparent 0 50%);
  mask-image: repeating-conic-gradient(#000 0 25%, transparent 0 50%);
  -webkit-mask-size: 12px 12px;
  mask-size: 12px 12px;
}
html.is-depth .station[data-pixel-stage="5"] .signal-title,
html.is-depth .station[data-pixel-stage="5"] .capability-thesis {
  -webkit-mask-image: repeating-conic-gradient(#000 0 22%, transparent 0 50%);
  mask-image: repeating-conic-gradient(#000 0 22%, transparent 0 50%);
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
}

/* Grtsk remains wide and heavy, without synthetic deformation. */
.scene-title,
.contact-title,
.hero-name {
  font-family: "grtsk-vf" !important;
  font-weight: 900 !important;
  font-stretch: 120%;
  font-variation-settings: "wght" 900, "wdth" 120 !important;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

/* Real terminal composition below the standalone logo. */
#preloader { background: var(--bg) !important; }
.preloader-console {
  width: min(690px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: 1fr !important;
  justify-items: center;
  gap: 38px;
}
.preloader-mark {
  width: min(245px, 36vw);
  aspect-ratio: 2.06 / 1;
}
.preloader-word { display: none !important; }
.preloader-terminal {
  width: 100%;
  min-height: 224px;
  padding: 0;
  display: block;
  border: 1px solid rgba(10,10,11,.22);
  background: rgba(255,255,255,.22);
  color: var(--ink);
  font-size: clamp(10px, .9vw, 12px);
  line-height: 1.55;
  letter-spacing: .025em;
}
.terminal-window-bar {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(10,10,11,.16);
}
.terminal-window-bar span {
  width: 6px;
  height: 6px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.terminal-window-bar b {
  margin-left: 7px;
  font-weight: 400;
  color: rgba(10,10,11,.48);
}
.terminal-history {
  min-height: 188px;
  padding: 18px 20px 17px;
  display: grid;
  align-content: center;
  gap: 9px;
}
.terminal-line {
  min-height: 1.55em;
  display: grid;
  grid-template-columns: 14px minmax(0,1fr) 7px;
  gap: 8px;
  align-items: baseline;
  opacity: .18;
  transform: none;
}
.terminal-line.is-active,
.terminal-line.is-complete { opacity: 1; }
.terminal-line.is-complete { color: rgba(10,10,11,.56); }
.terminal-prompt {
  background: none !important;
  color: var(--ink) !important;
  font-weight: 700;
}

/* Unified, larger capability rows with changing symbols close to the word. */
.capability-list {
  max-width: 820px;
  justify-self: stretch;
}
.capability-list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 64px;
  padding: 14px 0;
  font-size: clamp(15px, 1.22vw, 20px);
  letter-spacing: -.015em;
  cursor: default;
  outline: none;
}
.capability-list li::before,
.capability-list li::after {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: var(--ink);
  font-family: "futura-100-cyrillic" !important;
  font-size: .92em;
  line-height: 1;
  opacity: .28;
  transform: scale(.82);
  transition: opacity .18s, transform .28s var(--ease);
}
.capability-list li::before { content: attr(data-symbol-left); }
.capability-list li::after { content: attr(data-symbol-right); }
.capability-list li > .cap-label {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: calc(100% - 58px);
  color: var(--ink) !important;
  transform: none !important;
  transition: letter-spacing .32s var(--ease);
}
.capability-list li > .cap-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s var(--ease);
}
.capability-list li:hover::before,
.capability-list li:hover::after,
.capability-list li:focus::before,
.capability-list li:focus::after,
.capability-list li.is-symbol-active::before,
.capability-list li.is-symbol-active::after {
  opacity: 1;
  transform: scale(1);
}
.capability-list li:hover > .cap-label,
.capability-list li:focus > .cap-label,
.capability-list li.is-symbol-active > .cap-label { letter-spacing: .01em; }
.capability-list li:hover > .cap-label::after,
.capability-list li:focus > .cap-label::after,
.capability-list li.is-symbol-active > .cap-label::after { transform: scaleX(1); }

@media (max-height: 780px) and (min-width: 961px) {
  .capability-list li { min-height: 50px; padding: 9px 0; font-size: clamp(14px, 1.05vw, 18px); }
}
@media (max-width: 960px) {
  .preloader-console { width: min(560px, calc(100vw - 34px)); gap: 28px; }
  .preloader-mark { width: min(215px, 58vw); }
  .preloader-terminal { min-height: 230px; }
  .capability-list li { min-height: 56px; font-size: clamp(15px, 4vw, 19px); }
  .scene-title,
  .contact-title,
  .hero-name { font-variation-settings: "wght" 900, "wdth" 112 !important; font-stretch: 112%; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-depth .signal-title,
  html.is-depth .capability-thesis { -webkit-mask-image: none !important; mask-image: none !important; }
}

/* =========================================================
   v15 - fail-safe gvd.local loader + monochrome signal lockup
   ========================================================= */

/* The terminal sits directly below the standalone mark and reads like a real shell. */
.preloader-console {
  width: min(720px, calc(100vw - 48px));
  grid-template-columns: 1fr !important;
  justify-items: center;
  gap: clamp(30px, 5vh, 48px);
}
.preloader-lockup { gap: 0 !important; }
.preloader-mark {
  width: min(270px, 36vw);
  margin: 0 auto;
  isolation: isolate;
}
.preloader-word { display: none !important; }
.preloader-terminal {
  width: 100%;
  min-height: 238px;
  padding: 0 !important;
  border: 1px solid rgba(10,10,11,.20);
  background: rgba(246,245,241,.76);
  color: var(--ink);
  overflow: hidden;
}
.terminal-window-bar {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(10,10,11,.16);
}
.terminal-window-bar span {
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .62;
}
.terminal-window-bar b {
  margin-left: 8px;
  color: rgba(10,10,11,.58);
  font-weight: 400;
  letter-spacing: .06em;
}
.terminal-history {
  min-height: 198px;
  padding: 22px 22px 20px;
  display: grid;
  align-content: center;
  gap: 10px;
}
.terminal-line {
  min-height: 1.6em;
  display: grid !important;
  grid-template-columns: 96px minmax(0,1fr) 6px !important;
  gap: 10px;
  align-items: baseline;
  opacity: .20;
  transform: translate3d(0,3px,0);
  transition: opacity .2s ease, transform .28s var(--ease), color .2s ease;
}
.terminal-line.is-active,
.terminal-line.is-complete {
  opacity: 1;
  transform: translate3d(0,0,0);
}
.terminal-line.is-complete { color: rgba(10,10,11,.55); }
.terminal-prompt {
  color: rgba(10,10,11,.52) !important;
  background: none !important;
  white-space: nowrap;
  font-size: .88em;
}
.terminal-text { min-width: 0; overflow-wrap: anywhere; }
.terminal-caret {
  width: 5px;
  height: 1em;
  background: var(--ink) !important;
  animation: terminalCaret .72s steps(1,end) infinite;
}

/* The base artwork stays crisp. Glitch exists only in short clipped bursts. */
.preloader-logo-base,
.preloader-logo-slice,
.brand-mark .brand-symbol,
.brand-symbol-echo {
  filter: none !important;
  animation: none !important;
  will-change: auto !important;
}
.preloader-logo-base { opacity: .84 !important; }
.preloader-logo-slice,
.brand-symbol-echo {
  opacity: 0;
  pointer-events: none;
}
.preloader-logo-slice-a,
.brand-symbol-echo-a { clip-path: inset(8% 0 68% 0); }
.preloader-logo-slice-b,
.brand-symbol-echo-b { clip-path: inset(39% 0 37% 0); }
.preloader-logo-slice-c,
.brand-symbol-echo-c { clip-path: inset(72% 0 8% 0); }

#preloader.is-signal-glitch .preloader-logo-base,
.brand-lockup.is-signal-glitch .brand-symbol {
  animation: gvdSignalBase .34s steps(1,end) both !important;
}
#preloader.is-signal-glitch .preloader-logo-slice-a,
.brand-lockup.is-signal-glitch .brand-symbol-echo-a {
  animation: gvdSignalSliceA .34s steps(1,end) both !important;
}
#preloader.is-signal-glitch .preloader-logo-slice-b,
.brand-lockup.is-signal-glitch .brand-symbol-echo-b {
  animation: gvdSignalSliceB .34s steps(1,end) both !important;
}
#preloader.is-signal-glitch .preloader-logo-slice-c,
.brand-lockup.is-signal-glitch .brand-symbol-echo-c {
  animation: gvdSignalSliceC .34s steps(1,end) both !important;
}

@keyframes gvdSignalBase {
  0%, 16%, 42%, 70%, 100% { transform: translate3d(0,0,0); opacity: 1; }
  17% { transform: translate3d(-1px,0,0); opacity: .90; }
  43% { transform: translate3d(1px,0,0); opacity: .94; }
  71% { transform: translate3d(0,-1px,0); opacity: .96; }
}
@keyframes gvdSignalSliceA {
  0%, 12%, 31%, 58%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  13% { opacity: .72; transform: translate3d(-7px,0,0); }
  19% { opacity: .34; transform: translate3d(4px,0,0); }
  32% { opacity: .52; transform: translate3d(3px,0,0); }
  40% { opacity: .18; transform: translate3d(-2px,0,0); }
  59% { opacity: .30; transform: translate3d(-4px,0,0); }
  66% { opacity: 0; transform: translate3d(0,0,0); }
}
@keyframes gvdSignalSliceB {
  0%, 22%, 45%, 76%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  23% { opacity: .56; transform: translate3d(6px,0,0); }
  29% { opacity: .24; transform: translate3d(-3px,0,0); }
  46% { opacity: .42; transform: translate3d(-5px,0,0); }
  54% { opacity: .16; transform: translate3d(2px,0,0); }
  77% { opacity: .26; transform: translate3d(3px,0,0); }
  84% { opacity: 0; transform: translate3d(0,0,0); }
}
@keyframes gvdSignalSliceC {
  0%, 34%, 61%, 88%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  35% { opacity: .48; transform: translate3d(-4px,0,0); }
  42% { opacity: .20; transform: translate3d(3px,0,0); }
  62% { opacity: .36; transform: translate3d(5px,0,0); }
  69% { opacity: .12; transform: translate3d(-2px,0,0); }
  89% { opacity: .22; transform: translate3d(-3px,0,0); }
  95% { opacity: 0; transform: translate3d(0,0,0); }
}

/* The fixed identity uses the same signal language as the loader. */
.brand-mark {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.brand-mark .brand-symbol,
.brand-symbol-echo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-copy { position: relative; }
.brand-name,
.brand-role {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
.brand-name::before,
.brand-name::after,
.brand-role::before,
.brand-role::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: currentColor;
  opacity: 0;
  pointer-events: none;
}
.brand-name::before,
.brand-role::before { clip-path: inset(8% 0 57% 0); }
.brand-name::after,
.brand-role::after { clip-path: inset(58% 0 8% 0); }
.brand-lockup.is-signal-glitch .brand-name::before,
.brand-lockup.is-signal-glitch .brand-role::before {
  animation: gvdTextSliceA .34s steps(1,end) both;
}
.brand-lockup.is-signal-glitch .brand-name::after,
.brand-lockup.is-signal-glitch .brand-role::after {
  animation: gvdTextSliceB .34s steps(1,end) both;
}
@keyframes gvdTextSliceA {
  0%, 16%, 43%, 72%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  17% { opacity: .58; transform: translate3d(-4px,0,0); }
  26% { opacity: .18; transform: translate3d(2px,0,0); }
  44% { opacity: .40; transform: translate3d(3px,0,0); }
  53% { opacity: 0; transform: translate3d(0,0,0); }
  73% { opacity: .22; transform: translate3d(-2px,0,0); }
  80% { opacity: 0; transform: translate3d(0,0,0); }
}
@keyframes gvdTextSliceB {
  0%, 28%, 55%, 84%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  29% { opacity: .46; transform: translate3d(4px,0,0); }
  38% { opacity: .14; transform: translate3d(-2px,0,0); }
  56% { opacity: .34; transform: translate3d(-3px,0,0); }
  65% { opacity: 0; transform: translate3d(0,0,0); }
  85% { opacity: .18; transform: translate3d(2px,0,0); }
  92% { opacity: 0; transform: translate3d(0,0,0); }
}

@media (max-width: 960px) {
  .preloader-console { width: min(600px, calc(100vw - 32px)); gap: 28px; }
  .preloader-mark { width: min(230px, 62vw); }
  .preloader-terminal { min-height: 244px; }
  .terminal-history { padding: 18px 14px; gap: 9px; }
  .terminal-line {
    grid-template-columns: 72px minmax(0,1fr) 5px !important;
    gap: 8px;
    font-size: 9px;
  }
  .terminal-prompt { overflow: hidden; text-overflow: clip; }
}

@media (prefers-reduced-motion: reduce) {
  #preloader.is-signal-glitch .preloader-logo-base,
  #preloader.is-signal-glitch .preloader-logo-slice,
  .brand-lockup.is-signal-glitch .brand-symbol,
  .brand-lockup.is-signal-glitch .brand-symbol-echo,
  .brand-lockup.is-signal-glitch .brand-name::before,
  .brand-lockup.is-signal-glitch .brand-name::after,
  .brand-lockup.is-signal-glitch .brand-role::before,
  .brand-lockup.is-signal-glitch .brand-role::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* =========================================================
   v16 - actual raster pixelation + concise terminal sequence
   ========================================================= */

/* Disable the old checker masks. The new effect rasterizes the real glyphs. */
html.is-depth .signal-title,
html.is-depth .capability-thesis,
html.is-depth .hero-thesis {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.pixel-text-target {
  position: relative;
  isolation: isolate;
}
.pixel-text-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
  opacity: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pixel-text-target.is-pixelated {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
.pixel-text-target.is-pixelated > :not(.pixel-text-canvas) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
.pixel-text-target.is-pixelated > .pixel-text-canvas {
  opacity: 1;
}

/* Command → output, without list numbering or decorative counters. */
.preloader-console {
  width: min(720px, calc(100vw - 48px));
  gap: clamp(26px, 4.4vh, 42px);
}
.preloader-terminal {
  min-height: 252px;
}
.terminal-history {
  min-height: 212px;
  padding: 18px 24px 20px;
  display: block;
  overflow: hidden;
}
.terminal-entry {
  margin: 0 0 12px;
  color: var(--ink);
}
.terminal-entry:last-child { margin-bottom: 0; }
.terminal-command {
  min-height: 1.5em;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: rgba(10,10,11,.86);
}
.terminal-prompt {
  flex: 0 0 auto;
  color: rgba(10,10,11,.48) !important;
  font-weight: 500;
}
.terminal-command-text { min-width: 0; }
.terminal-caret {
  display: inline-block;
  width: 5px;
  height: .95em;
  margin-left: 1px;
  background: var(--ink) !important;
  animation: terminalCaret .72s steps(1,end) infinite;
}
.terminal-output {
  min-height: 1.45em;
  padding-left: 108px;
  color: rgba(10,10,11,.43);
  opacity: 0;
  transform: translate3d(0,3px,0);
  transition: opacity .18s ease, transform .24s var(--ease);
}
.terminal-output.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
}
.terminal-entry.is-complete .terminal-command { color: rgba(10,10,11,.62); }
.preloader-copy { justify-content: flex-start !important; }

@media (max-width: 720px) {
  .preloader-console { width: min(560px, calc(100vw - 28px)); }
  .preloader-terminal { min-height: 286px; }
  .terminal-history { min-height: 246px; padding: 18px 16px; }
  .terminal-command { gap: 8px; font-size: 9px; }
  .terminal-output { padding-left: 0; margin-top: 2px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-text-canvas { display: none !important; }
  .pixel-text-target.is-pixelated,
  .pixel-text-target.is-pixelated > :not(.pixel-text-canvas) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

/* =========================================================
   v17 - crisp typography, restrained cyclic signal, light cue
   ========================================================= */

/* Keep the settled DOM type on the normal raster path. */
html.is-depth .station,
html.is-depth .station-shell,
html.is-depth .scene-header,
html.is-depth .signal-title,
html.is-depth .scene-reveal,
html.is-depth .kinetic-segment {
  overflow: visible !important;
}

html.is-depth .scene-reveal,
html.is-depth .kinetic-segment {
  transform: none !important;
  opacity: var(--scene-segment-opacity, 1);
}

html.is-depth .signal-title {
  transform: none !important;
  opacity: var(--scene-title-opacity, 1);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  backface-visibility: visible;
}

/* The pixel canvas is only used while a title is in transit. */
.pixel-text-target { overflow: visible !important; }
.pixel-text-canvas {
  inset: auto !important;
  z-index: 5;
  contain: strict;
  transform: translateZ(0);
}

/* A barely perceptible variable-font breath on one settled title only. */
@keyframes gvdTitleBreath {
  0%, 100% { font-variation-settings: "wght" 900, "wdth" 120; }
  50% { font-variation-settings: "wght" 900, "wdth" 119.35; }
}
html.is-entered.is-depth:not(.is-low-power):not(.is-depth-moving) .station.is-active .signal-title {
  animation: gvdTitleBreath 11s ease-in-out infinite;
}
html.is-depth.is-depth-moving .signal-title,
html.is-low-power .signal-title {
  animation: none !important;
  font-variation-settings: "wght" 900, "wdth" 120 !important;
}

/* Restrained recurring monochrome signal - no hover trigger and no heavy deformation. */
#preloader.is-signal-glitch .preloader-logo-base,
.brand-lockup.is-signal-glitch .brand-symbol {
  animation: gvdSignalBaseV17 .26s steps(1,end) both !important;
}
#preloader.is-signal-glitch .preloader-logo-slice-a,
.brand-lockup.is-signal-glitch .brand-symbol-echo-a {
  animation: gvdSignalSliceAV17 .26s steps(1,end) both !important;
}
#preloader.is-signal-glitch .preloader-logo-slice-b,
.brand-lockup.is-signal-glitch .brand-symbol-echo-b {
  animation: gvdSignalSliceBV17 .26s steps(1,end) both !important;
}
#preloader.is-signal-glitch .preloader-logo-slice-c,
.brand-lockup.is-signal-glitch .brand-symbol-echo-c {
  animation: gvdSignalSliceCV17 .26s steps(1,end) both !important;
}
.brand-lockup.is-signal-glitch .brand-name::before,
.brand-lockup.is-signal-glitch .brand-role::before {
  animation: gvdTextSliceAV17 .26s steps(1,end) both !important;
}
.brand-lockup.is-signal-glitch .brand-name::after,
.brand-lockup.is-signal-glitch .brand-role::after {
  animation: gvdTextSliceBV17 .26s steps(1,end) both !important;
}

@keyframes gvdSignalBaseV17 {
  0%, 23%, 48%, 74%, 100% { transform: translate3d(0,0,0); opacity: 1; }
  24% { transform: translate3d(-1px,0,0); opacity: .97; }
  49% { transform: translate3d(1px,0,0); opacity: .98; }
  75% { transform: translate3d(0,-.5px,0); opacity: .99; }
}
@keyframes gvdSignalSliceAV17 {
  0%, 18%, 41%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  19% { opacity: .34; transform: translate3d(-2px,0,0); }
  29% { opacity: .12; transform: translate3d(1px,0,0); }
  42% { opacity: .22; transform: translate3d(1.5px,0,0); }
  51% { opacity: 0; transform: translate3d(0,0,0); }
}
@keyframes gvdSignalSliceBV17 {
  0%, 33%, 61%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  34% { opacity: .28; transform: translate3d(2px,0,0); }
  45% { opacity: .09; transform: translate3d(-1px,0,0); }
  62% { opacity: .18; transform: translate3d(-1.5px,0,0); }
  72% { opacity: 0; transform: translate3d(0,0,0); }
}
@keyframes gvdSignalSliceCV17 {
  0%, 56%, 82%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  57% { opacity: .22; transform: translate3d(-1.5px,0,0); }
  68% { opacity: .08; transform: translate3d(1px,0,0); }
  83% { opacity: .14; transform: translate3d(1px,0,0); }
  91% { opacity: 0; transform: translate3d(0,0,0); }
}
@keyframes gvdTextSliceAV17 {
  0%, 20%, 48%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  21% { opacity: .28; transform: translate3d(-1.5px,0,0); }
  32% { opacity: .08; transform: translate3d(1px,0,0); }
  49% { opacity: .16; transform: translate3d(1px,0,0); }
  58% { opacity: 0; transform: translate3d(0,0,0); }
}
@keyframes gvdTextSliceBV17 {
  0%, 47%, 75%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  48% { opacity: .22; transform: translate3d(1.5px,0,0); }
  59% { opacity: .07; transform: translate3d(-1px,0,0); }
  76% { opacity: .13; transform: translate3d(-1px,0,0); }
  86% { opacity: 0; transform: translate3d(0,0,0); }
}

/* Icon-only gesture cue centered below the scene. */
.global-scroll-cue {
  position: fixed !important;
  z-index: 1100;
  left: 50% !important;
  right: auto !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  top: auto !important;
  width: 38px;
  height: 54px;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  transform: translateX(-50%) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink);
  opacity: .7;
  pointer-events: none;
}
.scroll-gesture {
  position: relative;
  width: 24px;
  height: 44px;
  display: grid;
  justify-items: center;
}
.scroll-gesture-track {
  position: relative;
  display: block;
  width: 18px;
  height: 29px;
  border: 1px solid currentColor;
  border-radius: 11px;
  opacity: .8;
}
.scroll-gesture-track b {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: currentColor;
}
.scroll-gesture-chevron {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}
.global-scroll-cue[data-direction="next"] .scroll-gesture-track b {
  animation: gvdWheelNext 1.65s var(--ease) infinite;
}
.global-scroll-cue[data-direction="previous"] .scroll-gesture-track b {
  animation: gvdWheelPrevious 1.65s var(--ease) infinite;
}
.global-scroll-cue[data-direction="previous"] .scroll-gesture-chevron {
  top: 33px;
  bottom: auto;
  transform: translateX(-50%) rotate(225deg);
}
.global-scroll-cue.is-pulsing .scroll-gesture { animation: gvdCuePulse .44s var(--ease) 1; }
@keyframes gvdWheelNext {
  0% { transform: translate3d(0,0,0); opacity: 0; }
  18% { opacity: 1; }
  70% { transform: translate3d(0,11px,0); opacity: .75; }
  100% { transform: translate3d(0,14px,0); opacity: 0; }
}
@keyframes gvdWheelPrevious {
  0% { transform: translate3d(0,13px,0); opacity: 0; }
  18% { opacity: 1; }
  70% { transform: translate3d(0,2px,0); opacity: .75; }
  100% { transform: translate3d(0,0,0); opacity: 0; }
}
@keyframes gvdCuePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.08); opacity: .58; }
}
body.overlay-open .global-scroll-cue { opacity: 0 !important; }

/* The side progress stays quiet; the bottom gesture explains the action. */
.depth-nav button span { display: none !important; }

@media (max-width: 960px) {
  .global-scroll-cue {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) scale(.9) !important;
  }
  html.is-flow .signal-title { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-gesture-track b,
  .global-scroll-cue.is-pulsing .scroll-gesture,
  .station.is-active .signal-title { animation: none !important; }
}

/* =========================================================
   v18 - regression repair: locked XY, ambient glitter, clean symbols
   ========================================================= */

/* Scene content never drifts on X/Y. The depth feeling comes from the star
   corridor, opacity and a tiny local scale on non-title groups. */
html.is-depth .station {
  transform: none !important;
  will-change: opacity;
  backface-visibility: visible;
  contain: layout style;
}
html.is-depth .station .scene-reveal {
  opacity: var(--scene-segment-opacity, 1);
  transform: scale(var(--scene-depth-scale, 1)) !important;
  transform-origin: 50% 50%;
}
html.is-depth .station .signal-title {
  opacity: var(--scene-title-opacity, 1) !important;
  transform: none !important;
  animation: none !important;
  transform-origin: 50% 50%;
}
html.is-depth .station.is-active:not(.is-depth-moving) .signal-title {
  transform: none !important;
}
html.is-depth.is-depth-moving .station .scene-reveal {
  will-change: transform, opacity;
}
html.is-depth:not(.is-depth-moving) .station .scene-reveal {
  will-change: auto;
}

/* Pixel canvas only exists during the last part of an incoming transition. */
.pixel-text-target { overflow: visible !important; }
.pixel-text-canvas {
  transform: none !important;
  contain: layout paint style;
  image-rendering: pixelated !important;
}

/* Keep the full star field visible whenever no overlay is open. */
#depth-canvas {
  z-index: 1 !important;
  opacity: 1;
  visibility: visible;
}
#depth-stage { z-index: 10; }
body:not(.overlay-open) #depth-canvas {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Capability symbols must fully disappear after pointer/focus leave. */
.capability-list li::before,
.capability-list li::after {
  opacity: 0;
  transform: scale(.78);
}
.capability-list li.is-symbol-active::before,
.capability-list li.is-symbol-active::after,
.capability-list li:hover::before,
.capability-list li:hover::after,
.capability-list li:focus-within::before,
.capability-list li:focus-within::after {
  opacity: 1;
  transform: scale(1);
}
.capability-list li > .cap-label {
  position: relative;
  display: inline-block;
  max-width: calc(100% - 58px);
}

/* Slightly clearer cyclic identity glitch; the readable base never moves. */
.brand-lockup.is-signal-glitch .brand-symbol-echo-a,
.brand-lockup.is-signal-glitch .brand-name::before,
.brand-lockup.is-signal-glitch .brand-role::before {
  opacity: .34 !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-b,
.brand-lockup.is-signal-glitch .brand-name::after,
.brand-lockup.is-signal-glitch .brand-role::after {
  opacity: .24 !important;
}

/* The terminal outputs are Ukrainian; commands retain a real shell syntax. */
.terminal-output { color: rgba(10,10,11,.58); }

@media (max-width: 960px) {
  html.is-flow .station .scene-reveal,
  html.is-flow .station .signal-title {
    transform: none !important;
  }
  #depth-canvas { opacity: .9; }
}

/* =========================================================
   v19 - stable depth, mobile parity, glitter + cleanup
   ========================================================= */

html.is-depth .station,
html.is-depth .station-shell,
html.is-depth .station .scene-reveal,
html.is-depth .station .kinetic-segment,
html.is-depth .station .signal-title {
  transform: none !important;
  translate: none !important;
}
html.is-depth .station .scene-reveal,
html.is-depth .station .kinetic-segment,
html.is-depth .station .signal-title {
  opacity: 1 !important;
}
html.is-depth .station {
  will-change: opacity;
  contain: layout style;
}
html.is-depth.is-depth-moving .station .scene-reveal,
html.is-depth.is-depth-moving .station .kinetic-segment,
html.is-depth.is-depth-moving .station .signal-title {
  will-change: auto !important;
}

.pixel-text-target,
.pixel-text-target.is-pixelated {
  overflow: visible !important;
  transform: none !important;
  clip-path: none !important;
}
.pixel-text-canvas {
  transform: none !important;
  clip-path: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  contain: paint;
}

#depth-canvas {
  z-index: 4 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#depth-stage { z-index: 10 !important; }
.site-header,
.depth-nav,
.global-scroll-cue { z-index: 1000; }

.brand-lockup { isolation: isolate; }
.brand-name,
.brand-role,
.brand-mark { position: relative; }
.brand-name::before,
.brand-name::after,
.brand-role::before,
.brand-role::after,
.brand-symbol-echo {
  opacity: 0;
  pointer-events: none;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-a,
.brand-lockup.is-signal-glitch .brand-name::before,
.brand-lockup.is-signal-glitch .brand-role::before {
  opacity: .42 !important;
  animation: gvdV19SliceA .36s steps(1,end) both !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-b,
.brand-lockup.is-signal-glitch .brand-name::after,
.brand-lockup.is-signal-glitch .brand-role::after {
  opacity: .30 !important;
  animation: gvdV19SliceB .36s steps(1,end) both !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-c {
  opacity: .22 !important;
  animation: gvdV19SliceC .36s steps(1,end) both !important;
}
@keyframes gvdV19SliceA {
  0%, 15%, 42%, 72%, 100% { transform: translate3d(0,0,0); opacity: 0; }
  16% { transform: translate3d(-3px,0,0); opacity: .48; }
  24% { transform: translate3d(2px,0,0); opacity: .18; }
  43% { transform: translate3d(2px,0,0); opacity: .34; }
  51% { transform: translate3d(0,0,0); opacity: 0; }
  73% { transform: translate3d(-1px,0,0); opacity: .20; }
}
@keyframes gvdV19SliceB {
  0%, 27%, 56%, 84%, 100% { transform: translate3d(0,0,0); opacity: 0; }
  28% { transform: translate3d(3px,0,0); opacity: .40; }
  36% { transform: translate3d(-1px,0,0); opacity: .14; }
  57% { transform: translate3d(-2px,0,0); opacity: .28; }
  66% { transform: translate3d(0,0,0); opacity: 0; }
  85% { transform: translate3d(1px,0,0); opacity: .16; }
}
@keyframes gvdV19SliceC {
  0%, 38%, 68%, 100% { transform: translate3d(0,0,0); opacity: 0; }
  39% { transform: translate3d(-2px,0,0); opacity: .28; }
  47% { transform: translate3d(1px,0,0); opacity: .10; }
  69% { transform: translate3d(2px,0,0); opacity: .20; }
  77% { transform: translate3d(0,0,0); opacity: 0; }
}

.capability-list li::before,
.capability-list li::after {
  content: "" !important;
  opacity: 0 !important;
  transform: scale(.76) !important;
}
.capability-list li.is-symbol-active::before { content: attr(data-symbol-left) !important; }
.capability-list li.is-symbol-active::after { content: attr(data-symbol-right) !important; }
.capability-list li.is-symbol-active::before,
.capability-list li.is-symbol-active::after {
  opacity: 1 !important;
  transform: scale(1) !important;
}
.capability-list li:not(.is-symbol-active) > .cap-label::after { transform: scaleX(0) !important; }
.capability-list li:not(.is-symbol-active) > .cap-label { letter-spacing: -.015em !important; }

.terminal-window-bar {
  grid-template-columns: auto auto auto minmax(0,1fr) auto !important;
}
#preloader-progress {
  justify-self: end;
  font-style: normal;
  color: rgba(10,10,11,.52);
  font-size: 9px;
  letter-spacing: .08em;
}
#preloader { --loader-progress: 0; }
#preloader .preloader-terminal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(var(--loader-progress));
  transform-origin: left center;
  transition: transform .22s linear;
}
.preloader-terminal { position: relative; }
.station-hero.is-active .hero-meta { opacity: 1 !important; visibility: visible !important; }

@media (max-width: 960px) {
  :root { --header-h: 64px; }
  html.is-depth,
  html.is-depth body { height: 100%; overflow: hidden !important; }
  html.is-depth #depth-stage { position: fixed; inset: 0; }
  html.is-depth .station {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100dvh;
    padding: 76px 16px 54px;
    align-items: center;
    overflow: hidden;
  }
  html.is-depth .station-shell {
    width: 100%;
    max-height: calc(100dvh - 130px);
    margin: 0 auto;
  }
  .site-header { height: 64px; padding: 12px 15px; align-items: flex-start; }
  .brand-lockup { gap: 4px; }
  .brand-mark { width: 28px; height: 15px; }
  .brand-name { font-size: 14px; }
  .brand-role { font-size: 7.5px; letter-spacing: .08em; }
  .binary-link-header { font-size: 12px; gap: 10px; padding-top: 4px; }
  .binary-link-header i { width: 6px; height: 6px; }
  .depth-nav { display: none !important; }
  .global-scroll-cue { display: flex !important; bottom: max(9px, env(safe-area-inset-bottom)); }
  #depth-canvas { opacity: .96 !important; }

  .hero-shell { padding-top: 0; }
  .hero-meta { margin-bottom: 10px; font-size: 7.5px; }
  .hero-name { font-size: clamp(48px, 15.2vw, 70px); line-height: .84; letter-spacing: -.055em; }
  .hero-role { margin: 13px 0 18px; font-size: clamp(18px, 5.6vw, 25px); }
  .hero-thesis { margin-bottom: 13px; font-size: clamp(20px, 6vw, 27px); line-height: 1; }
  .hero-description { margin-bottom: 11px; font-size: 12.5px; line-height: 1.38; }
  .hero-audience { font-size: 11px; }
  .hero-actions { margin-top: 17px; gap: 18px; flex-wrap: wrap; }
  .binary-link { font-size: 9.5px; gap: 12px; padding-block: 6px; }

  .scene-title,
  .contact-title { font-size: clamp(38px, 11vw, 58px); line-height: .88; }
  .station-impact .scene-header { margin-bottom: 18px; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .impact-item { min-height: 118px; padding: 14px 10px 12px 0; }
  .impact-number { font-size: clamp(38px, 11vw, 58px); }
  .impact-item strong { font-size: 11px; }
  .impact-item p { font-size: 8.5px; line-height: 1.35; }

  .station-work { padding-top: 74px; padding-bottom: 50px; }
  .station-work .scene-title { font-size: clamp(36px, 10vw, 52px); }
  .work-layout > .scene-header { margin-bottom: 12px; }
  .work-row { padding: 10px 0; }
  .work-row-title { font-size: clamp(17px, 5vw, 24px); }
  .work-row p { font-size: 9px; line-height: 1.25; margin-top: 6px; }
  .work-row-meta { font-size: 8px; }
  .work-inline-media { max-height: 92px; }

  .capability-layout,
  .technology-layout,
  .systems-layout {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-content: center;
  }
  .capability-heading .scene-title { margin-bottom: 12px; }
  .capability-thesis { font-size: clamp(17px, 5vw, 23px); line-height: 1.04; }
  .capability-intro { margin-top: 10px; font-size: 10.5px; line-height: 1.35; }
  .systems-note { margin-top: 9px; font-size: 7px; }
  .capability-list { max-width: none; }
  .capability-list li { min-height: 36px; padding: 6px 0; font-size: clamp(10.5px, 3.15vw, 14px); gap: 7px; }

  .tasks-layout,
  .experience-layout,
  .collaboration-layout,
  .process-layout,
  .contact-layout { grid-template-columns: 1fr !important; gap: 16px !important; }
  .tasks-list { grid-template-columns: 1fr 1fr; gap: 0 13px; }
  .tasks-list span { min-height: 42px; padding: 8px 0; font-size: 11px; line-height: 1.25; }
  .experience-copy p { font-size: 11px; line-height: 1.35; margin-block: 8px; }
  .experience-aside { padding-top: 0; }
  .collaboration-grid { grid-template-columns: 1fr 1fr; }
  .collaboration-option { min-height: 250px; padding: 18px 12px; }
  .collaboration-option h3 { font-size: 20px; }
  .collaboration-option p { font-size: 9.5px; line-height: 1.3; }
  .process-flow { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .process-flow li { padding: 10px 0; }
  .process-flow h3 { font-size: 15px; }
  .process-flow p { font-size: 9px; line-height: 1.3; }
  .contact-main > p:not(.scene-label) { margin-top: 10px; font-size: 11px; line-height: 1.35; }
  .contact-main .binary-button { margin-top: 15px; }
  .site-footer { border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0; gap: 12px; }
  .site-footer strong { font-size: 18px; }
  .social-links { grid-template-columns: 1fr 1fr; gap: 5px 14px; }
  .social-links a { padding: 5px 0; font-size: 8px; }
  .social-links svg { width: 18px; height: 18px; }

  .preloader-console { width: min(600px, calc(100vw - 28px)); gap: 18px; }
  .preloader-mark { width: min(190px, 54vw); }
  .preloader-terminal { min-height: 230px; }
  .terminal-history { padding: 14px 12px; }
  .terminal-entry { font-size: 8.5px; }
}

@media (max-width: 420px) and (max-height: 740px) {
  html.is-depth .station { padding-top: 68px; padding-bottom: 45px; }
  html.is-depth .station-shell { max-height: calc(100dvh - 113px); }
  .hero-name { font-size: 45px; }
  .hero-role { font-size: 17px; margin-block: 10px 14px; }
  .hero-thesis { font-size: 19px; }
  .hero-description { font-size: 10.5px; }
  .scene-title,
  .contact-title { font-size: 35px; }
  .capability-list li { min-height: 31px; padding-block: 4px; font-size: 10px; }
  .impact-item { min-height: 102px; }
  .work-row { padding-block: 7px; }
  .collaboration-option { min-height: 220px; }
}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  pointer-events: auto;
}
.site-location {
  font-size: 8px;
  letter-spacing: .11em;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 960px) {
  .header-actions { gap: 2px; }
  .site-location { font-size: 6.5px; letter-spacing: .08em; }
}

/* =========================================================
   v20 - final stability pass: fixed title plane, ambient depth,
   readable loader and full-screen mobile parity
   ========================================================= */

/* Scene content stays in one XY plane. Only station opacity and title pixels
   change during navigation; the depth sensation lives in the star field. */
html.is-depth .station,
html.is-depth .station-shell,
html.is-depth .station .scene-reveal,
html.is-depth .station .kinetic-segment,
html.is-depth .station .signal-title {
  transform: none !important;
  translate: none !important;
}
html.is-depth .station .scene-reveal,
html.is-depth .station .kinetic-segment,
html.is-depth .station .signal-title {
  opacity: 1 !important;
}
html.is-depth .station {
  will-change: opacity;
  contain: layout style;
}

/* Exact title-canvas registration. Earlier inset:auto rules moved the raster
   below the real heading; these coordinates are now explicit and immutable. */
.pixel-text-target {
  position: relative !important;
  overflow: visible !important;
  transform: none !important;
  clip-path: none !important;
}
.pixel-text-canvas {
  position: absolute !important;
  inset: var(--pixel-top, -34px) auto auto var(--pixel-left, -34px) !important;
  width: var(--pixel-width, auto) !important;
  height: var(--pixel-height, auto) !important;
  transform: none !important;
  clip-path: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  contain: paint;
  pointer-events: none;
}

/* Persistent background space. */
#depth-canvas {
  z-index: 3 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#depth-stage { z-index: 10 !important; }
.site-header,
.depth-nav,
.global-scroll-cue { z-index: 1000; }

/* Real symbol nodes replace historical pseudo-elements so hover state can
   always be cleared without stale glyphs. */
.capability-list li::before,
.capability-list li::after {
  content: none !important;
  display: none !important;
}
.capability-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  align-items: center;
  column-gap: 10px;
}
.capability-list li > .cap-label {
  min-width: 0;
  max-width: none !important;
  display: inline-block;
  width: max-content;
  max-width: 100% !important;
  position: relative;
}
.cap-symbol {
  display: block;
  width: 22px;
  min-height: 1em;
  font-family: "futura-100-cyrillic" !important;
  font-style: normal;
  font-size: .82em;
  line-height: 1;
  text-align: center;
  opacity: 0;
  transform: scale(.72);
  transition: opacity .16s ease, transform .22s var(--ease);
}
.capability-list li.is-symbol-active .cap-symbol {
  opacity: 1;
  transform: scale(1);
}
.capability-list li:not(.is-symbol-active) .cap-symbol { color: transparent; }
.capability-list li:not(.is-symbol-active) > .cap-label::after { transform: scaleX(0) !important; }

/* Cyclic identity signal: readable base remains fixed, only thin echoes move. */
.brand-lockup { isolation: isolate; }
.brand-lockup.is-signal-glitch .brand-symbol-echo-a,
.brand-lockup.is-signal-glitch .brand-name::before,
.brand-lockup.is-signal-glitch .brand-role::before {
  opacity: .52 !important;
  animation: gvdV20SignalA .31s steps(1, end) both !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-b,
.brand-lockup.is-signal-glitch .brand-name::after,
.brand-lockup.is-signal-glitch .brand-role::after {
  opacity: .38 !important;
  animation: gvdV20SignalB .31s steps(1, end) both !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-c {
  opacity: .28 !important;
  animation: gvdV20SignalC .31s steps(1, end) both !important;
}
@keyframes gvdV20SignalA {
  0%, 18%, 48%, 78%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  19% { opacity: .52; transform: translate3d(-3px,0,0); }
  28% { opacity: .18; transform: translate3d(1px,0,0); }
  49% { opacity: .36; transform: translate3d(2px,0,0); }
  58% { opacity: 0; transform: translate3d(0,0,0); }
  79% { opacity: .22; transform: translate3d(-1px,0,0); }
}
@keyframes gvdV20SignalB {
  0%, 30%, 60%, 88%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  31% { opacity: .42; transform: translate3d(3px,0,0); }
  40% { opacity: .14; transform: translate3d(-1px,0,0); }
  61% { opacity: .30; transform: translate3d(-2px,0,0); }
  70% { opacity: 0; transform: translate3d(0,0,0); }
  89% { opacity: .16; transform: translate3d(1px,0,0); }
}
@keyframes gvdV20SignalC {
  0%, 42%, 72%, 100% { opacity: 0; transform: translate3d(0,0,0); }
  43% { opacity: .28; transform: translate3d(-2px,0,0); }
  53% { opacity: .10; transform: translate3d(1px,0,0); }
  73% { opacity: .20; transform: translate3d(2px,0,0); }
  82% { opacity: 0; transform: translate3d(0,0,0); }
}

/* Loader: no percentage label, one restrained progress line, and a one-time
   pixel gate that reveals the first scene. */
.terminal-window-bar {
  grid-template-columns: auto auto auto minmax(0, 1fr) !important;
}
#preloader-progress { display: none !important; }
#preloader { --loader-progress: 0; }
.preloader-terminal { position: relative; }
.preloader-terminal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(var(--loader-progress));
  transform-origin: left center;
  transition: transform .25s linear;
}
.preloader-copy {
  justify-content: space-between !important;
  gap: 24px;
}
.preloader-pixel-gate {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  pointer-events: none;
}
.preloader-pixel-gate i {
  display: block;
  background: var(--bg);
  transform: scale(1.02);
  transform-origin: center;
}
#preloader.is-leaving {
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
}
#preloader.is-leaving .preloader-console,
#preloader.is-leaving .preloader-copy {
  opacity: 0;
  transition: opacity .20s ease;
}
#preloader.is-leaving .preloader-pixel-gate i {
  animation: gvdPixelGate .52s var(--ease) var(--gate-delay) forwards;
}
@keyframes gvdPixelGate {
  to { opacity: 0; transform: scale(.72); }
}

/* Mobile is the same full-screen depth product, not a separate long page. */
@media (max-width: 960px) {
  :root { --header-h: 60px; }
  html.is-depth,
  html.is-depth body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    touch-action: none;
  }
  html.is-depth #depth-stage { position: fixed; inset: 0; }
  html.is-depth .station {
    position: absolute;
    inset: 0;
    height: 100dvh;
    min-height: 0;
    padding: 68px 16px 48px;
    align-items: center;
    overflow: hidden;
  }
  html.is-depth .station-shell {
    width: 100%;
    max-height: calc(100dvh - 116px);
    margin: 0 auto;
  }
  .site-header {
    height: 60px;
    padding: 10px 14px;
    align-items: flex-start;
  }
  .brand-lockup { gap: 3px; }
  .brand-mark { width: 28px; height: 16px; }
  .brand-name { font-size: 14px; }
  .brand-role { font-size: 7px; letter-spacing: .08em; }
  .binary-link-header { font-size: 11.5px; padding-top: 3px; }
  .site-location { font-size: 6.8px; }
  .depth-nav { display: none !important; }
  .global-scroll-cue { bottom: max(7px, env(safe-area-inset-bottom)); }

  .hero-meta { margin-bottom: 8px; font-size: 7px; }
  .hero-name { font-size: clamp(47px, 14.8vw, 68px); line-height: .84; }
  .hero-role { margin: 11px 0 15px; font-size: clamp(18px, 5.2vw, 23px); }
  .hero-thesis { margin-bottom: 10px; font-size: clamp(19px, 5.5vw, 25px); line-height: 1; }
  .hero-description { margin-bottom: 8px; font-size: 11px; line-height: 1.34; }
  .hero-audience { font-size: 9.5px; }
  .hero-actions { margin-top: 13px; gap: 16px; }
  .binary-link { font-size: 8.8px; padding-block: 5px; }

  .scene-label { margin-bottom: 7px; font-size: 6.8px; }
  .scene-title,
  .contact-title { font-size: clamp(36px, 10.8vw, 53px); line-height: .88; }

  .station-impact .scene-header { margin-bottom: 12px; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .impact-item { min-height: 105px; padding: 11px 8px 9px 0; }
  .impact-item:nth-child(2) { border-right: 0; }
  .impact-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .impact-number,
  .impact-item strong { font-size: clamp(36px, 10vw, 52px); }
  .impact-item p { gap: 3px; }
  .impact-item p b { font-size: 12px; }
  .impact-item p span { font-size: 8px; line-height: 1.25; }

  .station-work { padding-top: 64px; padding-bottom: 42px; }
  .station-work .station-shell { display: block; }
  .station-work .work-layout { display: block !important; }
  .station-work .scene-header { margin-bottom: 8px; }
  .station-work .scene-title { font-size: clamp(34px, 9.8vw, 49px); }
  .work-row { min-height: 0; padding: 7px 0; }
  .work-row:hover,
  .work-row.is-active { padding-left: 0; }
  .work-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .25em; font-size: clamp(17px, 4.8vw, 22px); line-height: .98; }
  .work-title-segment { transform: none !important; }
  .work-inline-media {
    order: 3;
    flex: 0 0 100%;
    width: 100% !important;
    height: 0;
    margin: 0;
    border-radius: 0 18px 0 0;
    opacity: 0;
    transition: height .38s var(--ease), opacity .24s ease, margin .38s var(--ease);
  }
  .work-row.is-active .work-inline-media {
    height: clamp(62px, 10.5vh, 88px);
    margin: 6px 0 4px;
    opacity: 1;
  }
  .work-row-meta { margin-top: 4px; font-size: 7.8px; line-height: 1.24; }
  .work-row-meta > span { display: none; }
  .work-row.is-active .work-row-meta > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .work-row-meta > b { font-size: 7.5px; }

  .capability-layout,
  .technology-layout,
  .systems-layout {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-content: center;
  }
  .capability-heading .scene-title { margin-bottom: 8px; }
  .capability-thesis { margin-top: 8px; font-size: clamp(16px, 4.7vw, 21px); line-height: 1.03; }
  .capability-intro { margin-top: 7px; font-size: 9px; line-height: 1.28; }
  .systems-note { margin-top: 6px; font-size: 6.2px; line-height: 1.35; }
  .capability-list li {
    grid-template-columns: 15px minmax(0,1fr) 15px;
    column-gap: 5px;
    min-height: 31px;
    padding: 4px 0;
    font-size: clamp(10px, 3vw, 13px);
  }
  .cap-symbol { width: 15px; font-size: .72em; }

  .tasks-layout,
  .experience-layout,
  .collaboration-layout,
  .process-layout,
  .contact-layout { grid-template-columns: 1fr !important; gap: 10px !important; }
  .tasks-list { grid-template-columns: 1fr 1fr; gap: 0 11px; }
  .tasks-list span { min-height: 36px; padding: 6px 0; font-size: 9.6px; line-height: 1.2; }
  .tasks-list span:nth-child(even) { padding-left: 10px; }
  .tasks-list span:nth-child(odd) { padding-right: 10px; }

  .experience-copy {
    columns: 2;
    column-gap: 14px;
    padding-top: 8px;
  }
  .experience-copy p { margin-bottom: 7px; font-size: 8.2px; line-height: 1.28; }
  .experience-aside { padding-top: 0; }

  .collaboration-grid { grid-template-columns: 1fr 1fr; }
  .collaboration-option { min-height: 0; padding: 12px 10px 10px 0; }
  .collaboration-option + .collaboration-option { padding-left: 10px; }
  .collaboration-option h3 { margin-bottom: 9px; font-size: clamp(18px, 5vw, 23px); }
  .collaboration-option p { margin-bottom: 7px; font-size: 8.2px; line-height: 1.25; }
  .collaboration-option .budget { font-size: 7px; }
  .collaboration-option .binary-link { margin-top: 6px; font-size: 7.5px; }

  .process-flow { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .process-flow li { display: block; padding: 8px 0; }
  .process-flow h3 { margin-bottom: 4px; font-size: 14px; }
  .process-flow p { font-size: 8px; line-height: 1.25; }

  .contact-main > p:not(.scene-label) { margin-top: 7px; font-size: 9px; line-height: 1.28; }
  .contact-main .binary-button { margin-top: 10px; }
  .site-footer { border-left: 0; border-top: 1px solid var(--line); padding: 9px 0 0; gap: 7px; }
  .site-footer strong { font-size: 15px; }
  .site-footer > div:first-child span { font-size: 8px; }
  .social-links { grid-template-columns: 1fr 1fr; gap: 3px 12px; }
  .social-links a { padding: 3px 0; font-size: 7px; }
  .social-links svg { width: 15px; height: 15px; }

  .preloader-console { width: min(600px, calc(100vw - 26px)); gap: 16px; }
  .preloader-mark { width: min(180px, 50vw); }
  .preloader-terminal { min-height: 225px; }
  .terminal-history { min-height: 184px; padding: 13px 11px; }
  .terminal-command,
  .terminal-output { font-size: 8px; }
  .terminal-output { padding-left: 0; margin-top: 1px; }
  .preloader-copy { font-size: 7px; }
}

@media (max-width: 420px) and (max-height: 720px) {
  html.is-depth .station { padding-top: 62px; padding-bottom: 38px; }
  html.is-depth .station-shell { max-height: calc(100dvh - 100px); }
  .hero-name { font-size: 43px; }
  .hero-role { font-size: 17px; }
  .hero-thesis { font-size: 18px; }
  .hero-description { font-size: 9.8px; }
  .scene-title,
  .contact-title { font-size: 34px; }
  .impact-item { min-height: 91px; }
  .work-row.is-active .work-inline-media { height: 55px; }
  .capability-list li { min-height: 27px; font-size: 9.5px; }
  .experience-copy p { font-size: 7.5px; }
}

/* v20.1 loader stacking correction: the pixel gate covers the page until its
   own cells dissolve; loader content stays above it until fade-out. */
.preloader-pixel-gate { z-index: 0 !important; }
.preloader-console,
.preloader-copy { position: relative; z-index: 1; }

/* v20.2 capability grid correction: old absolute <i> rules must not steal the
   first grid column from the label. */
.capability-list li > .cap-symbol {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  background: none !important;
  transform: scale(.72) !important;
}
.capability-list li > .cap-symbol-left { grid-column: 1; }
.capability-list li > .cap-label { grid-column: 2; width: auto !important; }
.capability-list li > .cap-symbol-right { grid-column: 3; }
.capability-list li.is-symbol-active > .cap-symbol { transform: scale(1) !important; }

/* =========================================================
   v21 - mobile parity and transition quality pass
   Only fixes requested mobile spacing, full-screen fit,
   title-pixel timing and spatial star movement.
   ========================================================= */

/* Keep title planes fixed. The transition is opacity + raster pixel stages only. */
html.is-depth .station,
html.is-depth .station-shell,
html.is-depth .signal-title,
html.is-depth .pixel-text-target,
html.is-depth .pixel-text-canvas {
  translate: none !important;
}
html.is-depth .station,
html.is-depth .station-shell,
html.is-depth .signal-title {
  transform: none !important;
}

/* The pixel canvas must remain available on touch devices. */
@media (max-width: 960px) {
  .pixel-text-canvas {
    display: block !important;
  }
  .pixel-text-target.is-pixelated {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  :root {
    --header-h: 66px;
    --mobile-scene-top: calc(var(--header-h) + 24px + env(safe-area-inset-top));
    --mobile-scene-bottom: calc(52px + env(safe-area-inset-bottom));
  }

  .site-header {
    height: var(--header-h);
    padding: calc(11px + env(safe-area-inset-top)) 16px 8px;
  }

  html.is-depth .station {
    padding: var(--mobile-scene-top) 18px var(--mobile-scene-bottom) !important;
    align-items: center;
    overflow: hidden;
  }

  html.is-depth .station-shell,
  html.is-depth .station-shell-wide {
    width: 100%;
    max-height: calc(100dvh - var(--mobile-scene-top) - var(--mobile-scene-bottom));
    min-height: 0;
    margin: 0 auto;
  }

  /* Results: keep values and their captions in the same visual group. */
  .station-impact .scene-header {
    margin-bottom: 12px !important;
  }
  .station-impact .station-shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .impact-grid {
    min-height: 0;
    grid-template-columns: 1fr 1fr !important;
  }
  .impact-item,
  .impact-item + .impact-item {
    min-height: 0 !important;
    height: clamp(142px, 20.5vh, 176px);
    padding: 12px 9px 10px 0 !important;
    justify-content: flex-start !important;
    gap: 14px;
  }
  .impact-item:nth-child(even) {
    padding-left: 12px !important;
  }
  .impact-item strong,
  .impact-number {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: .82;
  }
  .impact-item p {
    margin-top: auto;
    gap: 4px;
  }
  .impact-item p b {
    font-size: 13px !important;
  }
  .impact-item p span {
    font-size: 8.5px !important;
    line-height: 1.28;
  }

  /* Work page stays inside one viewport under the fixed header. */
  .station-work {
    padding-top: var(--mobile-scene-top) !important;
    padding-bottom: var(--mobile-scene-bottom) !important;
  }
  .station-work .station-shell {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }
  .work-list {
    min-height: 0;
  }
  .work-row {
    padding-block: 8px !important;
  }
  .work-row.is-active .work-inline-media {
    height: clamp(58px, 9.2vh, 78px) !important;
  }

  /* Collaboration is not a two-column table on a narrow viewport. */
  .station-collaboration .scene-header {
    margin-bottom: 10px !important;
  }
  .station-collaboration .station-shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .collaboration-grid {
    grid-template-columns: 1fr !important;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .collaboration-option,
  .collaboration-option + .collaboration-option {
    min-height: 0 !important;
    padding: 12px 0 11px !important;
    border-left: 0 !important;
  }
  .collaboration-option + .collaboration-option {
    border-top: 1px solid var(--line);
  }
  .collaboration-option h3 {
    margin: 0 0 7px;
    font-size: clamp(19px, 5.6vw, 24px) !important;
    line-height: .94;
  }
  .collaboration-option p {
    margin: 0 0 6px;
    max-width: none;
    font-size: 8.8px !important;
    line-height: 1.28 !important;
  }
  .collaboration-option .budget {
    margin-bottom: 4px;
    font-size: 7.3px !important;
  }
  .collaboration-option .binary-link {
    margin-top: 3px !important;
    font-size: 8px !important;
  }
  .collaboration-option-dark::before {
    display: none !important;
  }

  /* Keep the cue outside the content zone. */
  .global-scroll-cue {
    left: 50% !important;
    right: auto !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 420px) and (max-height: 760px) {
  :root {
    --mobile-scene-top: calc(var(--header-h) + 18px + env(safe-area-inset-top));
    --mobile-scene-bottom: calc(44px + env(safe-area-inset-bottom));
  }
  .scene-title,
  .contact-title {
    font-size: 33px !important;
  }
  .impact-item,
  .impact-item + .impact-item {
    height: clamp(126px, 19vh, 146px);
  }
  .collaboration-option,
  .collaboration-option + .collaboration-option {
    padding-block: 8px !important;
  }
  .collaboration-option p {
    font-size: 7.8px !important;
  }
}

/* =========================================================
   v21.1 - capability hover restored and made deterministic
   Symbols are real nodes, never pseudo-content, so nothing can remain after leave.
   ========================================================= */
.capability-list li::before,
.capability-list li::after {
  content: none !important;
  display: none !important;
}
.capability-list li {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) 22px !important;
  align-items: center;
  column-gap: 8px;
  cursor: default;
  overflow: visible !important;
}
.capability-list li > .cap-label {
  position: relative;
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100%;
  grid-column: 2;
  letter-spacing: -.012em;
  transition: letter-spacing .28s var(--ease), opacity .2s ease;
}
.capability-list li > .cap-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s var(--ease);
}
.capability-list li > .cap-symbol {
  position: static !important;
  inset: auto !important;
  display: inline-grid !important;
  place-items: center;
  width: 22px;
  min-width: 22px;
  height: 22px;
  color: var(--ink) !important;
  background: none !important;
  font-family: "futura-100-cyrillic" !important;
  font-style: normal;
  font-size: .78em;
  line-height: 1;
  opacity: 0;
  transform: scale(.58) rotate(-12deg) !important;
  transition: opacity .16s ease, transform .28s var(--ease);
  pointer-events: none;
}
.capability-list li > .cap-symbol-left { grid-column: 1; }
.capability-list li > .cap-symbol-right { grid-column: 3; }
.capability-list li.is-symbol-active > .cap-symbol {
  opacity: 1;
  transform: scale(1) rotate(0deg) !important;
}
.capability-list li.is-symbol-active > .cap-label {
  letter-spacing: .006em !important;
}
.capability-list li.is-symbol-active > .cap-label::after {
  transform: scaleX(1) !important;
}
.capability-list li:not(.is-symbol-active) > .cap-symbol {
  opacity: 0 !important;
  color: transparent !important;
  transform: scale(.58) rotate(-12deg) !important;
}
.capability-list li:not(.is-symbol-active) > .cap-label::after {
  transform: scaleX(0) !important;
}

@media (hover: hover) and (pointer: fine) {
  .capability-list li { cursor: crosshair; }
}

@media (max-width: 960px) {
  .capability-list li {
    grid-template-columns: 17px minmax(0, 1fr) 17px !important;
    column-gap: 5px;
  }
  .capability-list li > .cap-symbol {
    width: 17px;
    min-width: 17px;
    height: 17px;
    font-size: .7em;
  }
  .capability-list li > .cap-label::after { bottom: -3px; }
}

/* =========================================================
   v22 - spatial stars, adjacent capability symbols, one mobile preview
   ========================================================= */

/* Keep the page light: no grain or live backdrop blur. */
#ambient-grain { display: none !important; }
.modal-backdrop,
.contact-overlay-header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#depth-canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  opacity: .92 !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

/* Capability symbols belong directly beside the label, not at row edges. */
.capability-list li,
.capability-list li:hover,
.capability-list li:focus,
.capability-list li:focus-within {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  padding-inline: 0 !important;
  overflow: visible !important;
}
.capability-list li::before,
.capability-list li::after {
  content: none !important;
  display: none !important;
}
.capability-list li > .cap-label {
  order: 2;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 42px) !important;
  display: inline-block !important;
}
.capability-list li > .cap-symbol {
  position: static !important;
  inset: auto !important;
  flex: 0 0 15px !important;
  width: 15px !important;
  min-width: 15px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  color: transparent !important;
  transform: scale(.55) rotate(-12deg) !important;
  transition: opacity .14s ease, transform .22s var(--ease) !important;
  pointer-events: none !important;
}
.capability-list li > .cap-symbol-left { order: 1; }
.capability-list li > .cap-symbol-right { order: 3; }
.capability-list li.is-symbol-active > .cap-symbol {
  opacity: 1 !important;
  color: var(--ink) !important;
  transform: scale(1) rotate(0deg) !important;
}
.capability-list li:not(.is-symbol-active) > .cap-symbol {
  opacity: 0 !important;
  color: transparent !important;
}
.capability-list li:not(.is-symbol-active) > .cap-label::after {
  transform: scaleX(0) !important;
}

/* Media previews are lazy and only the active row owns a visible banner. */
.work-inline-media { box-shadow: none !important; }

@media (max-width: 960px) {
  #depth-canvas { opacity: .88 !important; }

  .work-row .work-inline-media {
    display: none !important;
    width: 100% !important;
    height: clamp(64px, 9.5vh, 82px) !important;
    margin: 7px 0 4px !important;
    opacity: 0 !important;
    transition: opacity .18s ease !important;
  }
  .work-row.is-active .work-inline-media {
    display: block !important;
    opacity: 1 !important;
  }
  .work-row:not(.is-active) .work-row-meta > span {
    display: none !important;
  }
  .work-row.is-active .work-row-meta > span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .capability-list li {
    gap: 5px !important;
  }
  .capability-list li > .cap-symbol {
    flex-basis: 12px !important;
    width: 12px !important;
    min-width: 12px !important;
    height: 15px !important;
    font-size: .68em !important;
  }
  .capability-list li > .cap-label {
    max-width: calc(100% - 34px) !important;
  }
}

/* =========================================================
   v23 - true Grtsk breadth + three open mobile work banners
   ========================================================= */
:root {
  --display: "grtsk-vf";
  --grtsk-title-width: 176;
  --grtsk-hero-width: 166;
  --grtsk-work-width: 152;
  --grtsk-copy-width: 132;
}

/* Grtsk is a width system, not a horizontally compressed fallback. */
.scene-title,
.contact-title,
.hero-name,
.impact-number,
.impact-item strong {
  font-family: "grtsk-vf" !important;
  font-weight: 700 !important;
  font-stretch: 176%;
  font-variation-settings: "wght" 700, "wdth" var(--grtsk-title-width), "slnt" 0 !important;
  font-synthesis: none !important;
}
.hero-name {
  font-stretch: 166%;
  font-variation-settings: "wght" 700, "wdth" var(--grtsk-hero-width), "slnt" 0 !important;
}
.work-title {
  font-family: "grtsk-vf" !important;
  font-weight: 650 !important;
  font-stretch: 152%;
  font-variation-settings: "wght" 650, "wdth" var(--grtsk-work-width), "slnt" 0 !important;
  transition: font-variation-settings .52s var(--ease), letter-spacing .52s var(--ease);
}
.capability-thesis,
.brand-name {
  font-family: "grtsk-vf" !important;
  font-synthesis: none !important;
}
.capability-thesis {
  font-weight: 600 !important;
  font-stretch: 132%;
  font-variation-settings: "wght" 600, "wdth" var(--grtsk-copy-width), "slnt" 0 !important;
}
.brand-name {
  font-weight: 700 !important;
  font-stretch: 142%;
  font-variation-settings: "wght" 700, "wdth" 142, "slnt" 0 !important;
}

/* Remove the old width-breath. A subtle slant pulse changes the drawing,
   not the element's X/Y position or line box. */
html.is-entered.is-depth .station.is-active .signal-title { animation: none !important; }
@keyframes grtskEditorialPulse {
  0%, 78%, 100% { font-variation-settings: "wght" 700, "wdth" var(--grtsk-title-width), "slnt" 0; }
  84% { font-variation-settings: "wght" 700, "wdth" var(--grtsk-title-width), "slnt" -1.2; }
  90% { font-variation-settings: "wght" 700, "wdth" var(--grtsk-title-width), "slnt" .55; }
  95% { font-variation-settings: "wght" 700, "wdth" var(--grtsk-title-width), "slnt" 0; }
}
html.is-entered.is-depth:not(.is-depth-moving):not(.is-low-power) .station.is-active .scene-title .type-secondary {
  animation: grtskEditorialPulse 13.5s ease-in-out infinite;
}
@media (hover: hover) and (pointer: fine) {
  .work-row:hover .work-title {
    font-variation-settings: "wght" 650, "wdth" 158, "slnt" -1.5 !important;
    letter-spacing: -.045em;
  }
}

/* On phones, all three public-work media slots are intentionally open.
   They are compact and reveal sequentially, so the scene still fits one viewport. */
@media (max-width: 960px) {
  :root {
    --grtsk-title-width: 158;
    --grtsk-hero-width: 148;
    --grtsk-work-width: 146;
  }
  .scene-title,
  .contact-title,
  .impact-number,
  .impact-item strong {
    font-stretch: 158%;
    font-variation-settings: "wght" 700, "wdth" 158, "slnt" 0 !important;
  }
  .hero-name {
    font-stretch: 148%;
    font-variation-settings: "wght" 700, "wdth" 148, "slnt" 0 !important;
  }
  .work-title {
    display: block !important;
    min-height: 0 !important;
    font-size: clamp(17px, 5.25vw, 22px) !important;
    line-height: .96 !important;
    font-stretch: 146%;
    font-variation-settings: "wght" 650, "wdth" 146, "slnt" 0 !important;
  }
  .work-title-segment {
    display: inline !important;
    transform: none !important;
  }
  .station-work .scene-title {
    font-size: clamp(32px, 9.2vw, 43px) !important;
  }
  .station-work .scene-header {
    margin-bottom: 5px !important;
  }
  .work-row,
  .work-row.is-active,
  .work-row.is-mobile-open {
    padding: 5px 0 6px !important;
  }
  .work-row .work-inline-media,
  .work-row.is-active .work-inline-media,
  .work-row.is-mobile-open .work-inline-media {
    position: relative !important;
    z-index: 1 !important;
    left: auto !important;
    top: auto !important;
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    height: clamp(54px, 7.6vh, 68px) !important;
    aspect-ratio: auto !important;
    margin: 5px 0 4px !important;
    opacity: 1 !important;
    transform: none !important;
    border-radius: 0 17px 0 0 !important;
  }
  .work-row-meta {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 8px !important;
    margin-top: 0 !important;
    font-size: 7.5px !important;
    line-height: 1.18 !important;
  }
  .work-row .work-row-meta > span,
  .work-row.is-active .work-row-meta > span,
  .work-row.is-mobile-open .work-row-meta > span {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    min-width: 0;
  }
  .work-row-meta > b {
    justify-self: end !important;
    white-space: nowrap;
    font-size: 7px !important;
  }
  html.is-entered.is-depth .station.is-active .scene-title .type-secondary {
    animation-duration: 16s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-title .type-secondary,
  .work-title { animation: none !important; transition: none !important; }
}

/* =========================================================
   v24 - mobile header clearance + Grtsk title correction
   Scope is intentionally limited to the two requested fixes.
   ========================================================= */

/* Grtsk Variable uses a 100-1000 width axis. Apply the expanded
   drawing to editorial titles, not to the statistics. */
:root {
  --grtsk-title-width: 760;
  --grtsk-hero-width: 680;
  --grtsk-mobile-title-width: 620;
  --grtsk-mobile-hero-width: 560;
}

.scene-title,
.contact-title {
  font-family: "grtsk-vf" !important;
  font-weight: 700 !important;
  font-stretch: 180% !important;
  font-variation-settings: "wght" 700, "wdth" var(--grtsk-title-width), "slnt" 0 !important;
  font-synthesis: none !important;
}

.hero-name {
  font-family: "grtsk-vf" !important;
  font-weight: 700 !important;
  font-stretch: 170% !important;
  font-variation-settings: "wght" 700, "wdth" var(--grtsk-hero-width), "slnt" 0 !important;
  font-synthesis: none !important;
}

/* Ensure semantic color spans keep the exact same Grtsk drawing. */
.scene-title > .type-primary,
.scene-title > .type-secondary,
.contact-title > .type-primary,
.contact-title > .type-secondary {
  font-family: "grtsk-vf" !important;
  font-weight: inherit !important;
  font-stretch: inherit !important;
  font-variation-settings: inherit !important;
}

/* Statistics return to the neutral Grtsk width. */
.impact-number,
.impact-item strong {
  font-family: "grtsk-vf" !important;
  font-weight: 700 !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" 700, "wdth" 500, "slnt" 0 !important;
}

/* The pulse follows the corrected wide title axis. */
@keyframes grtskEditorialPulse {
  0%, 78%, 100% { font-variation-settings: "wght" 700, "wdth" var(--grtsk-title-width), "slnt" 0; }
  84% { font-variation-settings: "wght" 700, "wdth" var(--grtsk-title-width), "slnt" -1.1; }
  90% { font-variation-settings: "wght" 700, "wdth" var(--grtsk-title-width), "slnt" .45; }
  95% { font-variation-settings: "wght" 700, "wdth" var(--grtsk-title-width), "slnt" 0; }
}

@media (max-width: 960px) {
  :root {
    /* Fixed header + visual breathing room + device safe area. */
    --mobile-scene-top: calc(var(--header-h) + 44px + env(safe-area-inset-top, 0px));
    --mobile-scene-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  }

  html.is-depth .station,
  .station-work {
    padding-top: var(--mobile-scene-top) !important;
  }

  html.is-depth .station-shell,
  html.is-depth .station-shell-wide {
    max-height: calc(100dvh - var(--mobile-scene-top) - var(--mobile-scene-bottom)) !important;
  }

  .scene-title,
  .contact-title {
    font-stretch: 165% !important;
    font-variation-settings: "wght" 700, "wdth" var(--grtsk-mobile-title-width), "slnt" 0 !important;
  }

  .hero-name {
    font-stretch: 155% !important;
    font-variation-settings: "wght" 700, "wdth" var(--grtsk-mobile-hero-width), "slnt" 0 !important;
  }

  /* Keep three open work cards inside the reduced content area. */
  .station-work .scene-header { margin-bottom: 3px !important; }
  .work-row,
  .work-row.is-active,
  .work-row.is-mobile-open { padding-block: 4px !important; }
  .work-row .work-inline-media,
  .work-row.is-active .work-inline-media,
  .work-row.is-mobile-open .work-inline-media {
    height: clamp(50px, 7vh, 64px) !important;
  }
}

@media (max-width: 420px) and (max-height: 760px) {
  :root {
    --mobile-scene-top: calc(var(--header-h) + 36px + env(safe-area-inset-top, 0px));
    --mobile-scene-bottom: calc(42px + env(safe-area-inset-bottom, 0px));
  }
}


/* =========================================================
   v25 - unified Grtsk brand system + loader/work polish
   One typographic language across every editorial scene.
   ========================================================= */
:root {
  --gvd-title-wdth: 690;
  --gvd-hero-wdth: 730;
  --gvd-brand-wdth: 650;
  --gvd-role-wdth: 620;
  --gvd-work-wdth: 610;
  --gvd-title-wght: 760;
  --gvd-title-gray: #b8b9b6;
}

/* One branded display system for every title requested in the brief. */
.hero-name,
.scene-title,
.contact-title,
.brand-name,
.site-footer strong,
.contact-overlay .brand-name {
  font-family: "grtsk-vf" !important;
  font-synthesis: none !important;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: geometricPrecision;
}

.hero-name {
  font-weight: 790 !important;
  font-stretch: 173% !important;
  font-variation-settings: "wght" 790, "wdth" var(--gvd-hero-wdth), "slnt" 0 !important;
  letter-spacing: -.058em !important;
}

.scene-title,
.contact-title {
  font-weight: var(--gvd-title-wght) !important;
  font-stretch: 168% !important;
  font-variation-settings: "wght" var(--gvd-title-wght), "wdth" var(--gvd-title-wdth), "slnt" 0 !important;
  letter-spacing: -.052em !important;
  line-height: .89 !important;
  text-wrap: balance;
}

.scene-title > .type-primary,
.scene-title > .type-secondary,
.contact-title > .type-primary,
.contact-title > .type-secondary {
  font-family: "grtsk-vf" !important;
  font-weight: inherit !important;
  font-stretch: inherit !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-rendering: inherit;
}

.type-secondary { color: var(--gvd-title-gray) !important; }
.type-primary { color: var(--ink) !important; }

/* Identity lockup uses the same family, while the role stays thin and wide. */
.brand-name,
.site-footer strong,
.contact-overlay .brand-name {
  font-weight: 760 !important;
  font-stretch: 155% !important;
  font-variation-settings: "wght" 760, "wdth" var(--gvd-brand-wdth), "slnt" 0 !important;
  letter-spacing: -.045em !important;
}

.hero-role,
.brand-role {
  font-family: "grtsk-vf" !important;
  font-synthesis: none !important;
  font-weight: 330 !important;
  font-stretch: 148% !important;
  font-variation-settings: "wght" 330, "wdth" var(--gvd-role-wdth), "slnt" 0 !important;
  letter-spacing: -.018em !important;
}

.hero-role { color: var(--muted); }
.brand-role { color: var(--muted); }

/* Work item typography remains subordinate to the page title but belongs to the same system. */
.work-title {
  font-family: "grtsk-vf" !important;
  font-synthesis: none !important;
  font-weight: 700 !important;
  font-stretch: 150% !important;
  font-variation-settings: "wght" 700, "wdth" var(--gvd-work-wdth), "slnt" 0 !important;
  letter-spacing: -.045em !important;
}

/* Statistics must not compete with the editorial titles. */
.impact-number,
.impact-item strong {
  font-stretch: normal !important;
  font-variation-settings: "wght" 720, "wdth" 500, "slnt" 0 !important;
}

/* A barely visible cyclical typographic change. No X/Y movement and no reflow. */
@keyframes gvdTitleBreathV25 {
  0%, 82%, 100% { font-variation-settings: "wght" var(--gvd-title-wght), "wdth" var(--gvd-title-wdth), "slnt" 0; }
  88% { font-variation-settings: "wght" 770, "wdth" 700, "slnt" -.45; }
  94% { font-variation-settings: "wght" 755, "wdth" 684, "slnt" .18; }
}
html.is-entered.is-depth:not(.is-depth-moving):not(.is-low-power) .station.is-active .scene-title {
  animation: gvdTitleBreathV25 17s ease-in-out infinite !important;
}
html.is-depth-moving .scene-title,
html.is-low-power .scene-title { animation: none !important; }

/* Loader signal: base artwork never wanders. Only three narrow raster slices deform. */
#preloader.is-signal-glitch .preloader-logo-base {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}
#preloader.is-signal-glitch .preloader-logo-slice-a {
  animation: gvdLoaderSliceA25 .42s steps(1,end) both !important;
}
#preloader.is-signal-glitch .preloader-logo-slice-b {
  animation: gvdLoaderSliceB25 .42s steps(1,end) both !important;
}
#preloader.is-signal-glitch .preloader-logo-slice-c {
  animation: gvdLoaderSliceC25 .42s steps(1,end) both !important;
}
@keyframes gvdLoaderSliceA25 {
  0%, 16%, 44%, 100% { opacity: 0; transform: translate3d(0,0,0) scaleX(1); }
  17% { opacity: .52; transform: translate3d(-4px,0,0) scaleX(1.018); }
  27% { opacity: .16; transform: translate3d(1px,0,0) scaleX(.995); }
  45% { opacity: .28; transform: translate3d(2px,0,0) scaleX(1.008); }
  58% { opacity: 0; transform: translate3d(0,0,0) scaleX(1); }
}
@keyframes gvdLoaderSliceB25 {
  0%, 30%, 62%, 100% { opacity: 0; transform: translate3d(0,0,0) scaleX(1); }
  31% { opacity: .46; transform: translate3d(4px,0,0) scaleX(.985); }
  42% { opacity: .14; transform: translate3d(-1px,0,0) scaleX(1.01); }
  63% { opacity: .24; transform: translate3d(-3px,0,0) scaleX(1.012); }
  75% { opacity: 0; transform: translate3d(0,0,0) scaleX(1); }
}
@keyframes gvdLoaderSliceC25 {
  0%, 48%, 78%, 100% { opacity: 0; transform: translate3d(0,0,0) scaleX(1); }
  49% { opacity: .34; transform: translate3d(-2px,0,0) scaleX(1.015); }
  61% { opacity: .10; transform: translate3d(1px,0,0) scaleX(.992); }
  79% { opacity: .20; transform: translate3d(2px,0,0) scaleX(1.006); }
  90% { opacity: 0; transform: translate3d(0,0,0) scaleX(1); }
}

/* Public work keeps a measured editorial rhythm and visible pixel canvases. */
.station-work .work-list { overflow: visible; }
.work-inline-media canvas { image-rendering: pixelated; }
.work-row[data-pixel-stage="1"] .work-inline-media,
.work-row[data-pixel-stage="2"] .work-inline-media,
.work-row[data-pixel-stage="3"] .work-inline-media,
.work-row[data-pixel-stage="4"] .work-inline-media {
  opacity: 1 !important;
}

@media (max-width: 960px) {
  :root {
    --gvd-title-wdth: 625;
    --gvd-hero-wdth: 650;
    --gvd-brand-wdth: 610;
    --gvd-role-wdth: 580;
    --gvd-work-wdth: 570;
    --mobile-scene-top: calc(var(--header-h) + 62px + env(safe-area-inset-top, 0px));
    --mobile-scene-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
  }

  html.is-depth .station {
    padding-top: var(--mobile-scene-top) !important;
    padding-bottom: var(--mobile-scene-bottom) !important;
  }
  html.is-depth .station-shell,
  html.is-depth .station-shell-wide {
    max-height: calc(100dvh - var(--mobile-scene-top) - var(--mobile-scene-bottom)) !important;
  }

  .hero-name {
    font-stretch: 160% !important;
    font-variation-settings: "wght" 790, "wdth" var(--gvd-hero-wdth), "slnt" 0 !important;
  }
  .scene-title,
  .contact-title {
    font-stretch: 158% !important;
    font-variation-settings: "wght" var(--gvd-title-wght), "wdth" var(--gvd-title-wdth), "slnt" 0 !important;
    letter-spacing: -.047em !important;
  }
  .brand-name {
    font-stretch: 150% !important;
    font-variation-settings: "wght" 760, "wdth" var(--gvd-brand-wdth), "slnt" 0 !important;
  }
  .hero-role,
  .brand-role {
    font-stretch: 145% !important;
    font-variation-settings: "wght" 330, "wdth" var(--gvd-role-wdth), "slnt" 0 !important;
  }

  /* The three banners remain open, proportional and below the fixed identity bar. */
  .station-work {
    padding-top: calc(var(--mobile-scene-top) + 4px) !important;
  }
  .station-work .station-shell-wide {
    justify-content: flex-start !important;
  }
  .station-work .scene-header {
    flex: 0 0 auto;
    margin-bottom: 7px !important;
  }
  .station-work .scene-title {
    font-size: clamp(32px, 9.35vw, 43px) !important;
    line-height: .9 !important;
  }
  .work-list {
    display: grid !important;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }
  .work-row,
  .work-row.is-active,
  .work-row.is-mobile-open {
    min-height: 0 !important;
    padding: 5px 0 6px !important;
    display: grid !important;
    grid-template-rows: auto minmax(48px, 1fr) auto;
    align-content: stretch;
  }
  .work-title {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: .96 !important;
    font-stretch: 148% !important;
    font-variation-settings: "wght" 700, "wdth" var(--gvd-work-wdth), "slnt" 0 !important;
  }
  .work-row .work-inline-media,
  .work-row.is-active .work-inline-media,
  .work-row.is-mobile-open .work-inline-media {
    min-height: 48px !important;
    height: auto !important;
    max-height: 78px !important;
    margin: 4px 0 3px !important;
    border-radius: 0 15px 0 0 !important;
  }
  .work-row-meta {
    min-height: 13px;
    font-size: 7.2px !important;
    line-height: 1.15 !important;
  }
}

@media (max-width: 420px) and (max-height: 760px) {
  :root {
    --mobile-scene-top: calc(var(--header-h) + 50px + env(safe-area-inset-top, 0px));
    --mobile-scene-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
  .station-work .scene-title { font-size: 30px !important; }
  .work-title { font-size: 16px !important; }
  .work-row .work-inline-media,
  .work-row.is-active .work-inline-media,
  .work-row.is-mobile-open .work-inline-media { max-height: 58px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-title { animation: none !important; }
}

/* =========================================================
   v26 - desktop editorial typography repair
   One Grtsk system, sane axis values, fixed title geometry.
   ========================================================= */
:root {
  --gvd-display-wdth: 168;
  --gvd-display-wght: 800;
  --gvd-hero-wdth: 164;
  --gvd-brand-wdth: 150;
  --gvd-role-wdth: 145;
  --gvd-work-wdth: 154;
  --gvd-title-gray: #b8b9b6;
}

/* Reset the invalid width-axis values introduced by the last pass. */
.hero-name,
.scene-title,
.contact-title,
.brand-name,
.brand-role,
.hero-role,
.work-title,
.site-footer strong,
.contact-overlay .brand-name {
  font-family: "grtsk-vf" !important;
  font-synthesis: none !important;
  font-kerning: normal !important;
  font-feature-settings: "kern" 1, "liga" 1 !important;
  text-rendering: optimizeLegibility !important;
}

.hero-name {
  font-weight: 820 !important;
  font-stretch: 164% !important;
  font-variation-settings: "wght" 820, "wdth" var(--gvd-hero-wdth), "slnt" 0 !important;
  letter-spacing: -.058em !important;
}

.scene-title,
.contact-title {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-weight: var(--gvd-display-wght) !important;
  font-stretch: 168% !important;
  font-variation-settings: "wght" var(--gvd-display-wght), "wdth" var(--gvd-display-wdth), "slnt" 0 !important;
  letter-spacing: -.052em !important;
  line-height: .88 !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.scene-title > .type-primary,
.scene-title > .type-secondary,
.contact-title > .type-primary,
.contact-title > .type-secondary {
  font-family: "grtsk-vf" !important;
  font-weight: var(--gvd-display-wght) !important;
  font-stretch: 168% !important;
  font-variation-settings: "wght" var(--gvd-display-wght), "wdth" var(--gvd-display-wdth), "slnt" 0 !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.scene-title .type-secondary,
.contact-title .type-secondary { color: var(--gvd-title-gray) !important; }
.scene-title .type-primary,
.contact-title .type-primary { color: var(--ink) !important; }

/* One optical system, four sizes chosen only by copy length. */
.scene-title.title-short,
.contact-title.title-short { font-size: clamp(66px, 5.2vw, 96px) !important; }
.scene-title.title-medium,
.contact-title.title-medium { font-size: clamp(58px, 4.65vw, 86px) !important; }
.scene-title.title-long,
.contact-title.title-long { font-size: clamp(49px, 4.02vw, 74px) !important; }
.scene-title.title-xlong,
.contact-title.title-xlong { font-size: clamp(40px, 3.38vw, 62px) !important; }

/* Keep titles inside the left grid column instead of spilling into the list. */
.capability-layout,
.tasks-layout,
.experience-layout,
.process-layout,
.contact-layout {
  align-items: center !important;
}
.capability-layout {
  grid-template-columns: minmax(0, .92fr) minmax(470px, 1.08fr) !important;
  gap: clamp(48px, 5.2vw, 98px) !important;
}
.capability-heading,
.scene-header,
.contact-main { min-width: 0 !important; }
.capability-heading .scene-title { max-width: 100% !important; }

/* Public work page uses the same headline language; item names are one subordinate family. */
.station-work .scene-header {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: clamp(24px, 3.2vh, 40px) !important;
}
.station-work .scene-title {
  max-width: 980px !important;
}
.work-title {
  font-weight: 760 !important;
  font-stretch: 154% !important;
  font-variation-settings: "wght" 760, "wdth" var(--gvd-work-wdth), "slnt" 0 !important;
  letter-spacing: -.045em !important;
  line-height: .94 !important;
}
.work-title-segment {
  font-family: "grtsk-vf" !important;
  font-weight: inherit !important;
  font-stretch: inherit !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
}

/* Identity lockup follows the same family without becoming a second display headline. */
.brand-name,
.site-footer strong,
.contact-overlay .brand-name {
  font-weight: 780 !important;
  font-stretch: 150% !important;
  font-variation-settings: "wght" 780, "wdth" var(--gvd-brand-wdth), "slnt" 0 !important;
  letter-spacing: -.04em !important;
}
.hero-role,
.brand-role {
  font-weight: 330 !important;
  font-stretch: 145% !important;
  font-variation-settings: "wght" 330, "wdth" var(--gvd-role-wdth), "slnt" 0 !important;
  letter-spacing: -.01em !important;
}

/* Earlier layout-specific overrides must not invent another title style. */
.station-work .scene-title,
.capability-heading .scene-title,
.station-impact .scene-title,
.station-tasks .scene-title,
.station-experience .scene-title,
.station-collaboration .scene-title,
.station-process .scene-title,
.station-contact .contact-title {
  font-family: "grtsk-vf" !important;
  font-weight: var(--gvd-display-wght) !important;
  font-stretch: 168% !important;
  font-variation-settings: "wght" var(--gvd-display-wght), "wdth" var(--gvd-display-wdth), "slnt" 0 !important;
}

/* Disable the prior slant/width pulse until the static brand system is verified. */
.scene-title,
.contact-title,
.scene-title .type-secondary,
.scene-title .type-primary,
.work-title { animation: none !important; }

@media (max-width: 1366px) and (min-width: 961px) {
  .scene-title.title-short,
  .contact-title.title-short { font-size: clamp(58px, 5vw, 78px) !important; }
  .scene-title.title-medium,
  .contact-title.title-medium { font-size: clamp(52px, 4.45vw, 70px) !important; }
  .scene-title.title-long,
  .contact-title.title-long { font-size: clamp(44px, 3.75vw, 60px) !important; }
  .scene-title.title-xlong,
  .contact-title.title-xlong { font-size: clamp(36px, 3.1vw, 50px) !important; }
  .capability-layout { grid-template-columns: minmax(0, .9fr) minmax(430px, 1.1fr) !important; gap: 48px !important; }
}

@media (max-width: 960px) {
  :root {
    --gvd-display-wdth: 156;
    --gvd-hero-wdth: 153;
    --gvd-brand-wdth: 145;
    --gvd-role-wdth: 140;
    --gvd-work-wdth: 148;
  }
  .scene-title,
  .contact-title,
  .scene-title > .type-primary,
  .scene-title > .type-secondary,
  .contact-title > .type-primary,
  .contact-title > .type-secondary {
    font-stretch: 156% !important;
    font-variation-settings: "wght" 800, "wdth" 156, "slnt" 0 !important;
  }
  .scene-title.title-short,
  .contact-title.title-short { font-size: clamp(38px, 10.2vw, 54px) !important; }
  .scene-title.title-medium,
  .contact-title.title-medium { font-size: clamp(35px, 9.35vw, 49px) !important; }
  .scene-title.title-long,
  .contact-title.title-long { font-size: clamp(31px, 8.15vw, 43px) !important; }
  .scene-title.title-xlong,
  .contact-title.title-xlong { font-size: clamp(27px, 7.15vw, 38px) !important; }
  .hero-name {
    font-stretch: 153% !important;
    font-variation-settings: "wght" 820, "wdth" 153, "slnt" 0 !important;
  }
  .brand-name {
    font-stretch: 145% !important;
    font-variation-settings: "wght" 780, "wdth" 145, "slnt" 0 !important;
  }
  .hero-role,
  .brand-role {
    font-stretch: 140% !important;
    font-variation-settings: "wght" 330, "wdth" 140, "slnt" 0 !important;
  }
  .work-title {
    font-stretch: 148% !important;
    font-variation-settings: "wght" 760, "wdth" 148, "slnt" 0 !important;
  }
}

/* =========================================================
   v27 - Ukrainian Grtsk lock, exact copy, clean editorial lists
   ========================================================= */
:root {
  /* Grtsk Variable documented axes: wght 100-700, wdth 100-1000. */
  --gvd-grtsk-heavy: 700;
  --gvd-grtsk-wide: 760;
  --gvd-grtsk-wide-compact: 680;
  --gvd-grtsk-role-width: 690;
  --gvd-title-gray: #b8b9b6;
}

/* One real Grtsk instance for every requested title, including Ukrainian. */
.hero-name,
.scene-title,
.contact-title,
.brand-name,
.brand-section-title,
.brand-form-title,
.collaboration-option h3,
.form-intro h2,
.contact-success h2,
.site-footer strong,
.contact-overlay .brand-name {
  font-family: "grtsk-vf" !important;
  font-weight: var(--gvd-grtsk-heavy) !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" var(--gvd-grtsk-heavy), "wdth" var(--gvd-grtsk-wide), "slnt" 0 !important;
  font-language-override: "UKR";
  font-feature-settings: "kern" 1, "liga" 1, "locl" 1 !important;
  font-synthesis: none !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased;
}

/* Both semantic color halves are the same font instance. */
.scene-title > .type-primary,
.scene-title > .type-secondary,
.contact-title > .type-primary,
.contact-title > .type-secondary {
  font-family: "grtsk-vf" !important;
  font-weight: inherit !important;
  font-stretch: inherit !important;
  font-variation-settings: inherit !important;
  font-language-override: inherit;
  font-feature-settings: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}
.scene-title .type-secondary,
.contact-title .type-secondary { color: var(--gvd-title-gray) !important; }
.scene-title .type-primary,
.contact-title .type-primary { color: var(--ink) !important; }

/* Heavy, wide and consistent editorial titles. */
.hero-name {
  font-size: clamp(72px, 7.35vw, 138px) !important;
  line-height: .84 !important;
  letter-spacing: -.058em !important;
}
.scene-title,
.contact-title {
  width: 100% !important;
  max-width: 100% !important;
  line-height: .9 !important;
  letter-spacing: -.047em !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance !important;
}
.scene-title.title-short,
.contact-title.title-short { font-size: clamp(56px, 4.55vw, 84px) !important; }
.scene-title.title-medium,
.contact-title.title-medium { font-size: clamp(50px, 4.05vw, 74px) !important; }
.scene-title.title-long,
.contact-title.title-long { font-size: clamp(43px, 3.45vw, 64px) !important; }
.scene-title.title-xlong,
.contact-title.title-xlong { font-size: clamp(34px, 2.85vw, 52px) !important; }

/* Capability headings use controlled line breaks instead of invading the list. */
.capability .scene-title > .type-primary,
.capability .scene-title > .type-secondary {
  display: block;
  width: max-content;
  max-width: 100%;
}
.capability-layout {
  grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr) !important;
  gap: clamp(64px, 6.5vw, 118px) !important;
  align-items: center !important;
}
.capability-heading {
  min-width: 0 !important;
  max-width: 100% !important;
}
.capability-heading .scene-title {
  max-width: 100% !important;
  margin: 0 0 clamp(22px, 2.7vh, 34px) !important;
}
.capability .scene-title.title-short { font-size: clamp(54px, 4.15vw, 76px) !important; }
.capability .scene-title.title-medium { font-size: clamp(48px, 3.75vw, 69px) !important; }
.capability .scene-title.title-long { font-size: clamp(42px, 3.2vw, 59px) !important; }

/* Thin wide role, still readable. */
.hero-role,
.brand-role {
  font-family: "grtsk-vf" !important;
  font-weight: 250 !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" 250, "wdth" var(--gvd-grtsk-role-width), "slnt" 0 !important;
  font-language-override: "UKR";
  font-feature-settings: "kern" 1, "liga" 1, "locl" 1 !important;
  font-synthesis: none !important;
  letter-spacing: -.008em !important;
  line-height: 1 !important;
}
.hero-role { font-size: clamp(25px, 2.15vw, 40px) !important; }
.brand-role { font-size: 11px !important; }

/* Exact production statement and quality paragraph rhythm. */
.capability-thesis {
  max-width: 720px !important;
  margin: 0 !important;
  font-family: "grtsk-vf" !important;
  font-weight: 620 !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" 620, "wdth" var(--gvd-grtsk-wide-compact), "slnt" 0 !important;
  font-language-override: "UKR";
  font-feature-settings: "kern" 1, "liga" 1, "locl" 1 !important;
  font-size: clamp(22px, 1.9vw, 34px) !important;
  line-height: 1.13 !important;
  letter-spacing: -.022em !important;
}
.capability-intro,
.hero-description,
.experience-copy p,
.collaboration-option p,
.process-flow p,
.contact-main > p:not(.scene-label) {
  letter-spacing: normal !important;
  line-height: 1.5 !important;
  text-wrap: pretty;
}

/* Collaboration subheads belong to the same bold Grtsk brand language. */
.collaboration-option h3,
.brand-section-title {
  font-size: clamp(36px, 3vw, 58px) !important;
  line-height: .94 !important;
  letter-spacing: -.04em !important;
}
.form-intro h2,
.brand-form-title,
.contact-success h2 {
  letter-spacing: -.047em !important;
  line-height: .9 !important;
}

/* Symmetric, identical symbols directly beside the capability label. */
.capability-list {
  width: 100% !important;
  max-width: 820px !important;
}
.capability-list li {
  display: grid !important;
  grid-template-columns: 1.12em max-content 1.12em !important;
  justify-content: start !important;
  align-items: center !important;
  gap: .58em !important;
  min-height: 62px !important;
  padding: 12px 0 !important;
  overflow: visible !important;
  font-size: clamp(17px, 1.16vw, 21px) !important;
  line-height: 1.15 !important;
}
.capability-list li > .cap-symbol {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 1.12em !important;
  height: 1.12em !important;
  min-width: 1.12em !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: "futura-100-cyrillic" !important;
  font-size: 1.08em !important;
  font-style: normal !important;
  line-height: 1 !important;
  color: transparent !important;
  opacity: 0 !important;
  transform: scale(.72) !important;
  transition: opacity .16s ease, transform .26s var(--ease), color .16s ease !important;
}
.capability-list li > .cap-label {
  grid-column: 2 !important;
  display: inline-block !important;
  width: auto !important;
  max-width: min(100%, 680px) !important;
  font-family: "futura-100-cyrillic" !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}
.capability-list li.is-symbol-active > .cap-symbol,
.capability-list li:hover > .cap-symbol,
.capability-list li:focus-visible > .cap-symbol {
  color: var(--ink) !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}
.capability-list li:not(.is-symbol-active):not(:hover):not(:focus-visible) > .cap-symbol {
  color: transparent !important;
  opacity: 0 !important;
}
.capability-list li > .cap-label::after {
  bottom: -.32em !important;
}

/* "З якими задачами працюю" is an editorial index, not a table. */
.tasks-layout {
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr) !important;
  gap: clamp(70px, 7vw, 135px) !important;
  align-items: center !important;
}
.tasks-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px clamp(28px, 3vw, 56px) !important;
  border: 0 !important;
  align-content: center;
}
.tasks-list .task-item,
.tasks-list > span {
  position: relative !important;
  min-height: 0 !important;
  padding: 13px 0 15px 27px !important;
  border: 0 !important;
  font-family: "grtsk-vf" !important;
  font-size: clamp(15px, 1.08vw, 19px) !important;
  font-weight: 620 !important;
  line-height: 1.24 !important;
  letter-spacing: -.012em !important;
  color: var(--ink) !important;
}
.tasks-list .task-item:nth-child(odd),
.tasks-list .task-item:nth-child(even),
.tasks-list > span:nth-child(odd),
.tasks-list > span:nth-child(even) {
  padding-left: 27px !important;
  padding-right: 0 !important;
  border-right: 0 !important;
}
.tasks-list .task-item::before,
.tasks-list > span::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-56%) scale(.72);
  font-family: "futura-100-cyrillic" !important;
  font-size: .82em;
  opacity: .34;
  transition: opacity .22s ease, transform .3s var(--ease);
}
.tasks-list .task-item::after,
.tasks-list > span::after {
  content: "" !important;
  position: absolute !important;
  left: 27px !important;
  right: 0 !important;
  bottom: 6px !important;
  top: auto !important;
  height: 1px !important;
  background: var(--ink) !important;
  opacity: .18 !important;
  transform: scaleX(.18) !important;
  transform-origin: left center !important;
  transition: transform .38s var(--ease), opacity .25s ease !important;
}
.tasks-list .task-item:hover::before,
.tasks-list > span:hover::before {
  opacity: 1;
  transform: translateY(-56%) scale(1);
}
.tasks-list .task-item:hover::after,
.tasks-list > span:hover::after {
  opacity: .65 !important;
  transform: scaleX(1) !important;
}

/* No old axis animation or section-specific title substitution. */
.scene-title,
.contact-title,
.hero-name,
.work-title { animation: none !important; }

@media (max-width: 1366px) and (min-width: 961px) {
  :root { --gvd-grtsk-wide: 710; --gvd-grtsk-wide-compact: 650; }
  .scene-title.title-short,
  .contact-title.title-short { font-size: clamp(50px, 4.4vw, 68px) !important; }
  .scene-title.title-medium,
  .contact-title.title-medium { font-size: clamp(45px, 3.85vw, 60px) !important; }
  .scene-title.title-long,
  .contact-title.title-long { font-size: clamp(39px, 3.3vw, 52px) !important; }
  .scene-title.title-xlong,
  .contact-title.title-xlong { font-size: clamp(32px, 2.72vw, 43px) !important; }
  .capability-layout { grid-template-columns: minmax(0, .84fr) minmax(450px, 1.16fr) !important; gap: 50px !important; }
  .capability-list li { min-height: 52px !important; padding: 9px 0 !important; font-size: clamp(15px, 1.1vw, 18px) !important; }
}

@media (max-width: 960px) {
  :root {
    --gvd-grtsk-wide: 650;
    --gvd-grtsk-wide-compact: 600;
    --gvd-grtsk-role-width: 620;
  }
  .hero-name { font-size: clamp(52px, 15vw, 76px) !important; }
  .scene-title.title-short,
  .contact-title.title-short { font-size: clamp(35px, 9.4vw, 48px) !important; }
  .scene-title.title-medium,
  .contact-title.title-medium { font-size: clamp(32px, 8.5vw, 44px) !important; }
  .scene-title.title-long,
  .contact-title.title-long { font-size: clamp(29px, 7.5vw, 39px) !important; }
  .scene-title.title-xlong,
  .contact-title.title-xlong { font-size: clamp(25px, 6.45vw, 34px) !important; }
  .capability .scene-title.title-short,
  .capability .scene-title.title-medium,
  .capability .scene-title.title-long { font-size: clamp(31px, 8vw, 42px) !important; }
  .capability-thesis { font-size: clamp(18px, 4.7vw, 23px) !important; line-height: 1.12 !important; }
  .capability-list li {
    grid-template-columns: 1em minmax(0, max-content) 1em !important;
    gap: .48em !important;
    min-height: 39px !important;
    padding: 6px 0 !important;
    font-size: clamp(11px, 3.1vw, 14px) !important;
  }
  .capability-list li > .cap-symbol {
    width: 1em !important;
    height: 1em !important;
    min-width: 1em !important;
    font-size: 1em !important;
  }
  .tasks-layout { display: flex !important; flex-direction: column !important; gap: 18px !important; }
  .tasks-list { grid-template-columns: 1fr 1fr !important; gap: 3px 16px !important; }
  .tasks-list .task-item,
  .tasks-list > span { padding: 8px 0 10px 18px !important; font-size: clamp(10.5px, 3.1vw, 13px) !important; line-height: 1.2 !important; }
  .tasks-list .task-item::after,
  .tasks-list > span::after { left: 18px !important; bottom: 4px !important; }
}

/* ========================================================================
   v27 final - Ukrainian Grtsk, clean copy, symmetric capability interaction
   ======================================================================== */

:root {
  --gvd-grtsk-family: "grtsk-vf";
  --display: "grtsk-vf";
  --gvd-title-wght: 700;
  --gvd-title-wdth: 720;
  --gvd-name-wdth: 690;
  --gvd-role-wght: 230;
  --gvd-role-wdth: 660;
}

html,
body {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* One brand font instance for every approved title, including Cyrillic. */
.hero-name,
.scene-title,
.contact-title,
.brand-name,
.brand-section-title,
.collaboration-option h3,
.form-intro h2,
.brand-form-title,
.contact-success h2,
.site-footer strong {
  font-family: "grtsk-vf" !important;
  font-synthesis: none !important;
  font-optical-sizing: auto;
  font-weight: var(--gvd-title-wght) !important;
  font-style: normal !important;
  font-stretch: ultra-expanded;
  font-variation-settings:
    "wght" var(--gvd-title-wght),
    "wdth" var(--gvd-title-wdth),
    "slnt" 0 !important;
  font-feature-settings: "kern" 1, "liga" 1, "locl" 1 !important;
  font-language-override: "UKR";
  letter-spacing: -.052em !important;
  line-height: .91 !important;
  word-spacing: normal !important;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

/* Grey and black fragments are the same Grtsk instance, not different fonts. */
.scene-title .type-secondary,
.scene-title .type-primary,
.contact-title .type-secondary,
.contact-title .type-primary,
.hero-name span,
.brand-section-title span {
  font: inherit !important;
  font-family: "grtsk-vf" !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
}

.hero-name {
  --gvd-title-wdth: var(--gvd-name-wdth);
}

/* Thin, wide and readable role. */
.hero-role,
.brand-role,
.site-footer > div:first-child > span:first-of-type {
  font-family: "grtsk-vf" !important;
  font-synthesis: none !important;
  font-weight: var(--gvd-role-wght) !important;
  font-style: normal !important;
  font-stretch: expanded;
  font-variation-settings:
    "wght" var(--gvd-role-wght),
    "wdth" var(--gvd-role-wdth),
    "slnt" 0 !important;
  font-feature-settings: "kern" 1, "liga" 1, "locl" 1 !important;
  letter-spacing: .01em !important;
  line-height: 1.02 !important;
}

/* Titles stay inside their column and never touch the capability index. */
.capability-heading {
  min-width: 0 !important;
  max-width: 100% !important;
  padding-right: clamp(24px, 2vw, 42px) !important;
}
.capability .scene-title {
  max-width: 100% !important;
  margin-right: 0 !important;
}
.capability .scene-title .kinetic-segment {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
}
.capability-thesis {
  max-width: 720px !important;
  margin-top: clamp(22px, 2.2vw, 38px) !important;
  font-family: "grtsk-vf" !important;
  font-synthesis: none !important;
  font-weight: 620 !important;
  font-variation-settings: "wght" 620, "wdth" 620, "slnt" 0 !important;
  font-feature-settings: "kern" 1, "liga" 1, "locl" 1 !important;
  letter-spacing: -.028em !important;
  line-height: 1.12 !important;
  text-wrap: pretty;
}
.capability-thesis .kinetic-segment {
  font: inherit !important;
  font-family: "grtsk-vf" !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

/* Paragraphs: no cramped glyphs, no artificial tracking. */
.hero-description,
.hero-audience,
.capability-intro,
.systems-note,
.experience-copy p,
.collaboration-option p,
.process-flow p,
.contact-main > p:not(.scene-label),
.work-row-meta,
.tasks-list .task-item {
  font-kerning: normal !important;
  font-feature-settings: "kern" 1, "liga" 1, "locl" 1 !important;
  letter-spacing: 0 !important;
  line-height: 1.48 !important;
  word-spacing: normal !important;
  text-wrap: pretty;
}

/* The old pseudo-symbol systems are fully disabled. */
.capability-list li::before,
.capability-list li::after {
  content: none !important;
  display: none !important;
}

/* Same animated symbol on both sides, directly beside the label and as tall as the line. */
.capability-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 820px !important;
}
.capability-list li {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 62px !important;
  padding: 12px 0 !important;
  gap: .52em !important;
  overflow: visible !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: clamp(17px, 1.16vw, 21px) !important;
  line-height: 1.12 !important;
}
.capability-list li > .cap-label {
  order: 2 !important;
  display: inline-block !important;
  width: auto !important;
  max-width: min(68vw, 690px) !important;
  font-family: "futura-100-cyrillic" !important;
  font-size: 1em !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  transform: none !important;
}
.capability-list li > .cap-symbol {
  position: static !important;
  order: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 1.08em !important;
  width: 1.08em !important;
  height: 1.08em !important;
  min-width: 1.08em !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "futura-100-cyrillic" !important;
  font-size: 1.04em !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: transparent !important;
  opacity: 0 !important;
  transform: scale(.78) !important;
  transition: opacity .16s ease, transform .22s var(--ease), color .16s ease !important;
}
.capability-list li > .cap-symbol-right {
  order: 3 !important;
}
.capability-list li.is-symbol-active > .cap-symbol,
.capability-list li:hover > .cap-symbol,
.capability-list li:focus-visible > .cap-symbol {
  color: var(--ink) !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}
.capability-list li:not(.is-symbol-active):not(:hover):not(:focus-visible) > .cap-symbol {
  color: transparent !important;
  opacity: 0 !important;
  transform: scale(.78) !important;
}
.capability-list li > .cap-label::after {
  left: 0 !important;
  right: 0 !important;
  bottom: -.34em !important;
}

/* Editorial task index - no table, no cells, no boxed grid. */
.tasks-layout {
  grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr) !important;
  gap: clamp(64px, 7vw, 130px) !important;
  align-items: center !important;
}
.tasks-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(4px, .55vh, 9px) !important;
  border: 0 !important;
  width: 100% !important;
  max-width: 760px !important;
}
.tasks-list .task-item,
.tasks-list > span {
  position: relative !important;
  display: inline-flex !important;
  align-items: baseline !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 7px 0 8px 1.55em !important;
  border: 0 !important;
  font-family: "grtsk-vf" !important;
  font-synthesis: none !important;
  font-size: clamp(17px, 1.28vw, 23px) !important;
  font-weight: 590 !important;
  font-variation-settings: "wght" 590, "wdth" 560, "slnt" 0 !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
}
.tasks-list .task-item:nth-child(2n),
.tasks-list > span:nth-child(2n) {
  margin-left: clamp(18px, 2.4vw, 46px) !important;
}
.tasks-list .task-item::before,
.tasks-list > span::before {
  content: "✦" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-53%) scale(.72) !important;
  font-family: "futura-100-cyrillic" !important;
  font-size: .82em !important;
  line-height: 1 !important;
  opacity: .28 !important;
  transition: opacity .2s ease, transform .28s var(--ease) !important;
}
.tasks-list .task-item::after,
.tasks-list > span::after {
  content: "" !important;
  position: absolute !important;
  left: 1.55em !important;
  right: 0 !important;
  bottom: 2px !important;
  top: auto !important;
  height: 1px !important;
  background: currentColor !important;
  opacity: .16 !important;
  transform: scaleX(.12) !important;
  transform-origin: left center !important;
  transition: transform .36s var(--ease), opacity .22s ease !important;
}
.tasks-list .task-item:hover::before,
.tasks-list > span:hover::before {
  opacity: 1 !important;
  transform: translateY(-53%) scale(1) !important;
}
.tasks-list .task-item:hover::after,
.tasks-list > span:hover::after {
  opacity: .62 !important;
  transform: scaleX(1) !important;
}

/* Approved collaboration titles use exactly the same heavy Grtsk brand voice. */
.collaboration-option h3,
.brand-section-title {
  font-size: clamp(38px, 3.25vw, 62px) !important;
  max-width: 12ch;
}

@media (max-width: 1366px) and (min-width: 961px) {
  :root {
    --gvd-title-wdth: 680;
    --gvd-name-wdth: 650;
    --gvd-role-wdth: 620;
  }
  .capability-list li {
    min-height: 52px !important;
    padding: 9px 0 !important;
    font-size: clamp(15px, 1.08vw, 18px) !important;
  }
  .tasks-list .task-item,
  .tasks-list > span {
    font-size: clamp(15px, 1.15vw, 20px) !important;
    padding-top: 5px !important;
    padding-bottom: 6px !important;
  }
}

@media (max-width: 960px) {
  :root {
    --gvd-title-wdth: 620;
    --gvd-name-wdth: 590;
    --gvd-role-wdth: 580;
  }
  .hero-role,
  .brand-role {
    letter-spacing: .012em !important;
  }
  .capability-heading {
    padding-right: 0 !important;
  }
  .capability-list li {
    min-height: 39px !important;
    padding: 6px 0 !important;
    gap: .42em !important;
    font-size: clamp(12px, 3.15vw, 14.5px) !important;
  }
  .capability-list li > .cap-label {
    max-width: calc(100vw - 104px) !important;
  }
  .capability-list li > .cap-symbol {
    flex-basis: 1em !important;
    width: 1em !important;
    height: 1em !important;
    min-width: 1em !important;
    font-size: 1em !important;
  }
  .tasks-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
  }
  .tasks-list {
    gap: 2px !important;
    max-width: none !important;
  }
  .tasks-list .task-item,
  .tasks-list > span {
    font-size: clamp(13px, 3.55vw, 16px) !important;
    padding: 6px 0 7px 1.35em !important;
  }
  .tasks-list .task-item:nth-child(2n),
  .tasks-list > span:nth-child(2n) {
    margin-left: 18px !important;
  }
  .tasks-list .task-item::after,
  .tasks-list > span::after {
    left: 1.35em !important;
  }
  .collaboration-option h3,
  .brand-section-title {
    font-size: clamp(30px, 8vw, 42px) !important;
  }
}


/* ---- src/v39-final.css ---- */
/* ======================================================================
   GVD v39 - stable Z-axis layout, fluid responsive system, Grtsk-only type
   Loaded last. Every station remains a fixed depth scene on every viewport.
   ====================================================================== */

:root {
  --gvd-font: "grtsk-vf";
  --gvd-bg: #f6f5f1;
  --gvd-ink: #09090a;
  --gvd-muted: #737780;
  --gvd-line: rgba(9, 9, 10, .16);
  --gvd-gutter: clamp(28px, 4.25vw, 78px);
  --gvd-nav-lane: clamp(38px, 3vw, 54px);
  --gvd-header-h: clamp(86px, 10.2vh, 108px);
  --gvd-scene-top: calc(var(--gvd-header-h) + clamp(8px, 1.4vh, 18px));
  --gvd-scene-bottom: clamp(76px, 10.5vh, 104px);
  --gvd-content-max: 1510px;
  --gvd-title-wdth: 158;
  --gvd-title-wght: 810;
  --gvd-ease: cubic-bezier(.22, 1, .36, 1);
}

html,
body,
body * {
  font-family: var(--gvd-font) !important;
}

html,
body {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: var(--gvd-bg) !important;
}

body {
  position: fixed !important;
  inset: 0 !important;
  touch-action: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.mono,
.scene-label,
.hero-meta,
.site-location,
.systems-note,
.budget,
.depth-nav button span,
.preloader-copy,
.preloader-terminal {
  font-family: var(--gvd-font) !important;
  font-weight: 360 !important;
  font-variation-settings: "wght" 360, "wdth" 98, "slnt" 0 !important;
  letter-spacing: .09em !important;
}

/* Header -------------------------------------------------------------- */
.site-header {
  position: fixed !important;
  z-index: 1200 !important;
  inset: 0 0 auto 0 !important;
  height: var(--gvd-header-h) !important;
  padding:
    clamp(16px, 2.2vh, 24px)
    calc(var(--gvd-gutter) + var(--gvd-nav-lane))
    10px
    var(--gvd-gutter) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: clamp(18px, 2.5vw, 42px) !important;
  pointer-events: none !important;
}

.brand-lockup,
.header-actions,
.site-header button {
  pointer-events: auto !important;
}

.brand-lockup {
  display: grid !important;
  grid-template-columns: clamp(48px, 4vw, 68px) max-content !important;
  align-items: start !important;
  gap: clamp(12px, 1.1vw, 18px) !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  color: var(--gvd-ink) !important;
  text-decoration: none !important;
}

.brand-mark {
  display: block !important;
  width: clamp(48px, 4vw, 68px) !important;
  height: clamp(27px, 2.25vw, 38px) !important;
  margin-top: 1px !important;
  overflow: visible !important;
}

.brand-mark img,
.brand-symbol {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.brand-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: max-content !important;
  min-width: 0 !important;
  gap: 7px !important;
}

.brand-name {
  display: block !important;
  width: max-content !important;
  white-space: nowrap !important;
  font-size: clamp(27px, 2.25vw, 39px) !important;
  line-height: .78 !important;
  font-weight: 820 !important;
  font-variation-settings: "wght" 820, "wdth" 155, "slnt" 0 !important;
  letter-spacing: -.045em !important;
}

.brand-role {
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  color: var(--gvd-muted) !important;
  font-size: clamp(10px, .79vw, 13px) !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  font-variation-settings: "wght" 300, "wdth" 112, "slnt" 0 !important;
}

.header-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: clamp(210px, 16vw, 286px) !important;
  min-width: 0 !important;
  gap: 12px !important;
}

.binary-link-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  gap: 12px !important;
  padding: 1px 0 9px !important;
  font-size: clamp(14px, 1vw, 18px) !important;
  line-height: 1.05 !important;
  font-weight: 570 !important;
  font-variation-settings: "wght" 570, "wdth" 110, "slnt" 0 !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
}

.binary-link-header .binary-label {
  min-width: 0 !important;
}

.site-location {
  align-self: flex-end !important;
  font-size: clamp(8px, .58vw, 10px) !important;
  line-height: 1 !important;
  color: #93969d !important;
}

/* Fixed depth viewport ------------------------------------------------ */
#depth-stage,
html.is-depth #depth-stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  perspective: 1450px !important;
  perspective-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  touch-action: none !important;
}

html.is-depth .station {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding:
    var(--gvd-scene-top)
    calc(var(--gvd-gutter) + var(--gvd-nav-lane))
    var(--gvd-scene-bottom)
    var(--gvd-gutter) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  transform: var(--depth-transform, translate3d(0,0,-920px)) !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;
  transition: none !important;
}

html.is-depth .station-shell,
html.is-depth .station-shell-wide {
  width: min(100%, var(--gvd-content-max)) !important;
  max-width: min(var(--gvd-content-max), calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane))) !important;
  min-width: 0 !important;
  max-height: calc(100dvh - var(--gvd-scene-top) - var(--gvd-scene-bottom)) !important;
  margin: 0 auto !important;
  transform: translateY(clamp(-14px, -1.1vh, -5px)) !important;
  transform-origin: center !important;
  overflow: visible !important;
}

/* Depth navigation keeps safe top/bottom offsets. */
html.is-depth #depth-nav {
  top: calc(var(--gvd-header-h) + clamp(18px, 2.6vh, 30px)) !important;
  right: clamp(12px, 1.3vw, 24px) !important;
  bottom: clamp(40px, 5.5vh, 64px) !important;
  width: 16px !important;
  height: auto !important;
  transform: none !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

html.is-depth #depth-nav .depth-nav-track {
  top: 4px !important;
  bottom: 4px !important;
}

.global-scroll-cue {
  bottom: clamp(14px, 2.1vh, 24px) !important;
}

/* Grtsk title lock ---------------------------------------------------- */
.scene-title,
.contact-title,
.hero-name,
.work-title,
.gvd-title,
.gvd-title *,
.signal-title,
.signal-title *,
.brand-section-title,
.gvd-section-title,
.process-flow h3,
.collaboration-option h3 {
  font-family: var(--gvd-font) !important;
}

.scene-title,
.contact-title,
.gvd-title,
.signal-title {
  font-weight: var(--gvd-title-wght) !important;
  font-variation-settings: "wght" var(--gvd-title-wght), "wdth" var(--gvd-title-wdth), "slnt" 0 !important;
  letter-spacing: -.055em !important;
  line-height: .84 !important;
}

.type-primary,
.type-secondary,
.kinetic-segment {
  font-family: inherit !important;
  font-variation-settings: inherit !important;
}

.type-primary {
  font-weight: 820 !important;
}

.type-secondary {
  font-weight: 690 !important;
}

/* Pixel titles are raster overlays of the same rendered Grtsk title. */
.pixel-text-target {
  position: relative !important;
  isolation: isolate !important;
}

.pixel-text-canvas {
  position: absolute !important;
  z-index: 4 !important;
  left: var(--pixel-left, 0) !important;
  top: var(--pixel-top, 0) !important;
  width: var(--pixel-width, 100%) !important;
  height: var(--pixel-height, 100%) !important;
  max-width: none !important;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  opacity: 0;
}

.pixel-text-target.is-pixelated::before,
.pixel-text-target.is-pixelated::after {
  opacity: 0 !important;
  animation: none !important;
}

.pixel-text-target.is-pixelated > :not(.pixel-text-canvas) {
  transition: none !important;
}

.pixel-text-target.is-pixelated[data-pixel-stage="1"] > :not(.pixel-text-canvas) {
  opacity: .18 !important;
}

.pixel-text-target.is-pixelated[data-pixel-stage="2"] > :not(.pixel-text-canvas),
.pixel-text-target.is-pixelated[data-pixel-stage="3"] > :not(.pixel-text-canvas),
.pixel-text-target.is-pixelated[data-pixel-stage="4"] > :not(.pixel-text-canvas),
.pixel-text-target.is-pixelated[data-pixel-stage="5"] > :not(.pixel-text-canvas) {
  opacity: 0 !important;
}

/* Shared scene typography -------------------------------------------- */
.scene-label {
  margin: 0 0 clamp(10px, 1.4vh, 16px) !important;
  font-size: clamp(8px, .55vw, 10px) !important;
  line-height: 1.2 !important;
  color: var(--gvd-ink) !important;
}

.scene-title,
.contact-title {
  margin: 0 !important;
  max-width: 100% !important;
  font-size: clamp(48px, min(5.15vw, 10.2vh), 96px) !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
}

.title-long { font-size: clamp(43px, min(4.65vw, 9.2vh), 86px) !important; }
.title-xlong { font-size: clamp(38px, min(4.05vw, 8.3vh), 76px) !important; }

/* Hero --------------------------------------------------------------- */
.station-hero .station-shell {
  max-width: min(var(--gvd-content-max), 1460px) !important;
}

.hero-shell {
  padding-top: 0 !important;
}

.hero-meta {
  margin: 0 0 clamp(12px, 1.7vh, 19px) !important;
  font-size: clamp(8px, .58vw, 10px) !important;
}

.hero-name {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: .16em !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 0 clamp(18px, 2.4vh, 27px) !important;
  white-space: nowrap !important;
  font-size: clamp(66px, min(6.25vw, 11.5vh), 116px) !important;
  line-height: .77 !important;
  font-weight: 830 !important;
  font-variation-settings: "wght" 830, "wdth" 160, "slnt" 0 !important;
  letter-spacing: -.06em !important;
}

.hero-name > span {
  display: inline-block !important;
}

.hero-role {
  margin: 0 0 clamp(24px, 3.1vh, 34px) !important;
  color: var(--gvd-muted) !important;
  font-size: clamp(36px, min(3.45vw, 6.8vh), 64px) !important;
  line-height: .92 !important;
  font-weight: 280 !important;
  font-variation-settings: "wght" 280, "wdth" 118, "slnt" 0 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
}

.hero-thesis {
  max-width: 1180px !important;
  margin: 0 0 clamp(17px, 2.2vh, 24px) !important;
  font-size: clamp(22px, min(2.1vw, 4vh), 36px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.035em !important;
}

.hero-description {
  max-width: 1260px !important;
  margin: 0 !important;
  color: var(--gvd-muted) !important;
  font-size: clamp(14px, .98vw, 18px) !important;
  line-height: 1.45 !important;
}

.hero-audience {
  margin: clamp(18px, 2.5vh, 28px) 0 0 !important;
  color: var(--gvd-muted) !important;
  font-size: clamp(17px, 1.35vw, 24px) !important;
  line-height: 1.2 !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(22px, 3vw, 50px) !important;
  margin-top: clamp(24px, 3.2vh, 36px) !important;
}

.hero-actions .binary-button,
.hero-actions .binary-link {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Impact ------------------------------------------------------------- */
.station-impact .scene-header {
  max-width: 1040px !important;
  margin-bottom: clamp(24px, 3.8vh, 42px) !important;
}

.impact-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 0 !important;
}

.impact-item {
  min-width: 0 !important;
  min-height: clamp(150px, 21vh, 220px) !important;
  padding: clamp(16px, 2vw, 28px) !important;
}

/* Public work -------------------------------------------------------- */
.work-layout {
  display: block !important;
  width: 100% !important;
}

.work-layout > .scene-header {
  margin-bottom: clamp(22px, 3.2vh, 36px) !important;
}

.work-list {
  width: 100% !important;
}

.work-row {
  width: 100% !important;
  min-width: 0 !important;
  padding: clamp(14px, 1.8vh, 21px) 0 !important;
  overflow: hidden !important;
}

.work-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(18px, 2.4vw, 42px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.work-title-segment {
  min-width: 0 !important;
  font-size: clamp(27px, min(2.55vw, 4.8vh), 47px) !important;
  line-height: .9 !important;
  font-weight: 760 !important;
  font-variation-settings: "wght" 760, "wdth" 145, "slnt" 0 !important;
  letter-spacing: -.045em !important;
  white-space: normal !important;
}

.work-title-before { text-align: right !important; }
.work-title-after { text-align: left !important; }

.work-inline-media {
  width: clamp(180px, 19vw, 330px) !important;
  max-width: 22vw !important;
  height: clamp(62px, 8.3vh, 92px) !important;
  min-width: 0 !important;
}

.work-row-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 24px !important;
  font-size: clamp(10px, .72vw, 13px) !important;
  line-height: 1.35 !important;
}

/* Capability pages --------------------------------------------------- */
.capability-layout {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr) !important;
  align-items: center !important;
  gap: clamp(52px, 7vw, 118px) !important;
  width: 100% !important;
}

.capability-heading {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 720px !important;
  margin: 0 !important;
}

.capability-heading .scene-title {
  width: 100% !important;
  margin-bottom: clamp(24px, 3.4vh, 38px) !important;
}

.capability-thesis {
  max-width: 690px !important;
  margin: 0 !important;
  font-size: clamp(21px, min(2vw, 3.8vh), 35px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
}

.capability-intro {
  max-width: 650px !important;
  margin: clamp(18px, 2.5vh, 26px) 0 0 !important;
  color: var(--gvd-muted) !important;
  font-size: clamp(14px, .95vw, 17px) !important;
  line-height: 1.42 !important;
}

.systems-note {
  max-width: 650px !important;
  margin-top: clamp(16px, 2.3vh, 24px) !important;
  font-size: clamp(8px, .6vw, 10px) !important;
  line-height: 1.45 !important;
}

.capability-list {
  justify-self: center !important;
  width: min(100%, 660px) !important;
  max-width: 660px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1px !important;
}

.capability-list li {
  min-width: 0 !important;
  min-height: clamp(42px, 6.2vh, 68px) !important;
  padding: 9px clamp(18px, 2.2vw, 32px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  font-size: clamp(14px, 1.05vw, 19px) !important;
  line-height: 1.2 !important;
  font-weight: 390 !important;
  font-variation-settings: "wght" 390, "wdth" 105, "slnt" 0 !important;
}

.capability-list li .cap-label {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

/* Tasks -------------------------------------------------------------- */
.tasks-layout {
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(430px, 1.18fr) !important;
  align-items: center !important;
  gap: clamp(52px, 7vw, 116px) !important;
}

.tasks-layout .scene-header {
  width: 100% !important;
  max-width: 650px !important;
  margin: 0 !important;
}

.tasks-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: center !important;
  gap: 0 clamp(18px, 2.2vw, 34px) !important;
  min-width: 0 !important;
}

.task-item,
.tasks-list span {
  min-width: 0 !important;
  min-height: clamp(55px, 7.4vh, 78px) !important;
  padding: clamp(12px, 1.6vh, 18px) 30px clamp(12px, 1.6vh, 18px) 0 !important;
  font-size: clamp(16px, 1.2vw, 22px) !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere !important;
}

/* Experience --------------------------------------------------------- */
.experience-layout {
  display: grid !important;
  grid-template-columns: minmax(0, .8fr) minmax(500px, 1.2fr) !important;
  align-items: center !important;
  gap: clamp(50px, 6.5vw, 110px) !important;
}

.experience-layout .scene-header {
  width: 100% !important;
  max-width: 670px !important;
  margin: 0 !important;
}

.experience-copy {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(28px, 3.5vw, 62px) !important;
}

.experience-column {
  min-width: 0 !important;
}

.experience-column p {
  margin-top: 0 !important;
  font-size: clamp(14px, 1.02vw, 18px) !important;
  line-height: 1.5 !important;
}

/* Collaboration ------------------------------------------------------ */
.station-collaboration .scene-header {
  margin-bottom: clamp(24px, 3.5vh, 40px) !important;
}

.collaboration-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.4vw, 36px) !important;
}

.collaboration-option {
  min-width: 0 !important;
  padding: clamp(22px, 2.7vw, 42px) !important;
}

.collaboration-option h3 {
  font-size: clamp(27px, 2.4vw, 45px) !important;
  line-height: .92 !important;
  font-weight: 760 !important;
  font-variation-settings: "wght" 760, "wdth" 142, "slnt" 0 !important;
}

.collaboration-option p {
  font-size: clamp(13px, .92vw, 17px) !important;
  line-height: 1.45 !important;
}

/* Process ------------------------------------------------------------ */
.process-layout {
  display: grid !important;
  grid-template-columns: minmax(0, .75fr) minmax(520px, 1.25fr) !important;
  align-items: center !important;
  gap: clamp(52px, 7vw, 118px) !important;
}

.process-layout .scene-header {
  max-width: 620px !important;
  margin: 0 !important;
}

.process-flow {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.3vw, 34px) !important;
  min-width: 0 !important;
}

.process-flow li {
  min-width: 0 !important;
  padding: clamp(16px, 2vh, 24px) 0 !important;
}

.process-flow h3 {
  font-size: clamp(27px, 2.1vw, 39px) !important;
  line-height: .95 !important;
  font-weight: 750 !important;
  font-variation-settings: "wght" 750, "wdth" 140, "slnt" 0 !important;
}

.process-flow p {
  font-size: clamp(13px, .9vw, 17px) !important;
  line-height: 1.42 !important;
}

/* Contact ------------------------------------------------------------ */
.contact-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr) !important;
  align-items: end !important;
  gap: clamp(48px, 6vw, 100px) !important;
}

.contact-main {
  min-width: 0 !important;
  max-width: 900px !important;
}

.contact-main > p:not(.scene-label) {
  max-width: 760px !important;
  font-size: clamp(14px, 1vw, 18px) !important;
  line-height: 1.48 !important;
}

.site-footer {
  min-width: 0 !important;
}

/* --------------------------------------------------------------------
   Tablet and phone - same depth scene, fluid re-composition, no page flow.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --gvd-gutter: clamp(17px, 4.8vw, 28px);
    --gvd-nav-lane: clamp(22px, 6vw, 30px);
    --gvd-header-h: calc(clamp(64px, 9.2vh, 78px) + env(safe-area-inset-top));
    --gvd-scene-top: calc(var(--gvd-header-h) + clamp(6px, 1vh, 10px));
    --gvd-scene-bottom: calc(clamp(58px, 8vh, 72px) + env(safe-area-inset-bottom));
    --gvd-title-wdth: 138;
    --gvd-title-wght: 800;
  }

  .site-header {
    padding:
      calc(11px + env(safe-area-inset-top))
      calc(var(--gvd-gutter) + var(--gvd-nav-lane))
      7px
      var(--gvd-gutter) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: clamp(8px, 2.4vw, 14px) !important;
  }

  .brand-lockup {
    grid-template-columns: clamp(31px, 8.7vw, 39px) minmax(0, 1fr) !important;
    gap: clamp(8px, 2.2vw, 11px) !important;
    width: clamp(178px, 54vw, 216px) !important;
  }

  .brand-mark {
    width: clamp(31px, 8.7vw, 39px) !important;
    height: clamp(16px, 4.55vw, 21px) !important;
  }

  .brand-copy {
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
  }

  .brand-name {
    width: max-content !important;
    max-width: 100% !important;
    font-size: clamp(19px, 5.7vw, 24px) !important;
    line-height: .8 !important;
    font-variation-settings: "wght" 820, "wdth" 148, "slnt" 0 !important;
  }

  .brand-role {
    font-size: clamp(6.8px, 1.95vw, 8.6px) !important;
    font-weight: 300 !important;
    font-variation-settings: "wght" 300, "wdth" 108, "slnt" 0 !important;
  }

  .header-actions {
    width: clamp(94px, 27vw, 112px) !important;
    gap: 7px !important;
  }

  .binary-link-header {
    gap: 6px !important;
    padding: 0 0 6px !important;
    font-size: clamp(9px, 2.7vw, 11px) !important;
    line-height: 1 !important;
  }

  .binary-link-header i {
    width: 5px !important;
    height: 5px !important;
  }

  .site-location {
    font-size: clamp(5.4px, 1.55vw, 6.7px) !important;
  }

  html.is-depth .station {
    padding:
      var(--gvd-scene-top)
      calc(var(--gvd-gutter) + var(--gvd-nav-lane))
      var(--gvd-scene-bottom)
      var(--gvd-gutter) !important;
  }

  html.is-depth .station-shell,
  html.is-depth .station-shell-wide {
    width: 100% !important;
    max-width: calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane)) !important;
    max-height: calc(100dvh - var(--gvd-scene-top) - var(--gvd-scene-bottom)) !important;
    transform: translateY(clamp(-8px, -.8vh, -3px)) !important;
  }

  html.is-depth #depth-nav {
    top: calc(var(--gvd-header-h) + 15px) !important;
    right: 6px !important;
    bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    width: 12px !important;
  }

  html.is-depth #depth-nav button {
    width: 10px !important;
    height: 10px !important;
  }

  html.is-depth #depth-nav button i {
    inset: 2.7px !important;
  }

  .global-scroll-cue {
    bottom: calc(7px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) scale(.72) !important;
    transform-origin: center bottom !important;
  }

  .scene-label {
    margin-bottom: clamp(7px, 1.1vh, 10px) !important;
    font-size: clamp(6px, 1.7vw, 7.5px) !important;
  }

  .scene-title,
  .contact-title {
    font-size: clamp(30px, min(8.8vw, 6.8vh), 42px) !important;
    line-height: .86 !important;
    letter-spacing: -.05em !important;
  }

  .title-long { font-size: clamp(28px, min(8.1vw, 6.2vh), 39px) !important; }
  .title-xlong { font-size: clamp(25px, min(7.4vw, 5.7vh), 35px) !important; }

  /* Hero keeps one coherent composition. */
  .station-hero .station-shell {
    max-width: 100% !important;
  }

  .hero-meta {
    margin-bottom: clamp(9px, 1.3vh, 12px) !important;
    font-size: clamp(6.2px, 1.8vw, 7.5px) !important;
  }

  .hero-name {
    gap: .12em !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-bottom: clamp(14px, 2vh, 19px) !important;
    font-size: clamp(32px, min(9.7vw, 7.4vh), 43px) !important;
    line-height: .79 !important;
    font-variation-settings: "wght" 830, "wdth" 136, "slnt" 0 !important;
    letter-spacing: -.055em !important;
  }

  .hero-role {
    margin-bottom: clamp(18px, 2.5vh, 24px) !important;
    font-size: clamp(25px, min(7.4vw, 5.5vh), 34px) !important;
    line-height: .92 !important;
    font-variation-settings: "wght" 280, "wdth" 112, "slnt" 0 !important;
  }

  .hero-thesis {
    margin-bottom: clamp(13px, 1.9vh, 18px) !important;
    font-size: clamp(17px, min(4.7vw, 3.6vh), 21px) !important;
    line-height: 1.06 !important;
  }

  .hero-description {
    font-size: clamp(11.5px, 3.15vw, 13.5px) !important;
    line-height: 1.4 !important;
  }

  .hero-audience {
    margin-top: clamp(13px, 1.9vh, 18px) !important;
    font-size: clamp(13px, 3.65vw, 16px) !important;
    line-height: 1.25 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: auto auto !important;
    justify-content: start !important;
    align-items: center !important;
    gap: clamp(14px, 4vw, 22px) !important;
    margin-top: clamp(17px, 2.4vh, 23px) !important;
  }

  .hero-actions .binary-button,
  .hero-actions .binary-link {
    min-width: 0 !important;
    width: auto !important;
    font-size: clamp(8px, 2.25vw, 9.5px) !important;
  }

  .hero-actions .binary-button {
    min-height: 38px !important;
    padding: 0 12px !important;
    gap: 10px !important;
  }

  /* Impact */
  .station-impact .scene-header {
    margin-bottom: 15px !important;
  }

  .impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .impact-item {
    min-height: clamp(90px, 14vh, 118px) !important;
    padding: 10px !important;
  }

  .impact-item strong {
    font-size: clamp(30px, 9vw, 43px) !important;
  }

  .impact-item p b { font-size: 11px !important; }
  .impact-item p span { font-size: 7.4px !important; line-height: 1.25 !important; }

  /* Work */
  .work-layout > .scene-header {
    margin-bottom: 10px !important;
  }

  .work-row {
    padding: clamp(7px, 1.2vh, 10px) 0 !important;
  }

  .work-title {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .work-title-before,
  .work-title-after {
    text-align: left !important;
  }

  .work-title-segment {
    font-size: clamp(17px, 4.9vw, 23px) !important;
    line-height: .93 !important;
  }

  .work-inline-media {
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  .work-row.is-active .work-inline-media,
  .work-row.is-mobile-open .work-inline-media {
    height: clamp(42px, 7vh, 58px) !important;
    opacity: 1 !important;
  }

  .work-row-meta {
    gap: 8px !important;
    margin-top: 3px !important;
    font-size: 6.5px !important;
    line-height: 1.25 !important;
  }

  /* Capability: left title + compact two-column capability grid. */
  .capability-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(13px, 2vh, 18px) !important;
  }

  .capability-heading {
    max-width: 100% !important;
  }

  .capability-heading .scene-title {
    margin-bottom: clamp(10px, 1.4vh, 14px) !important;
  }

  .capability-thesis {
    max-width: 100% !important;
    font-size: clamp(14px, 3.9vw, 18px) !important;
    line-height: 1.08 !important;
  }

  .capability-intro {
    margin-top: 8px !important;
    font-size: clamp(9.5px, 2.65vw, 11.5px) !important;
    line-height: 1.35 !important;
  }

  .systems-note {
    margin-top: 7px !important;
    font-size: clamp(5.7px, 1.55vw, 6.8px) !important;
    line-height: 1.35 !important;
  }

  .capability-list {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
  }

  .capability-list li {
    min-height: clamp(31px, 4.8vh, 40px) !important;
    padding: 5px 10px !important;
    font-size: clamp(8.5px, 2.45vw, 10.5px) !important;
    line-height: 1.18 !important;
  }

  .cap-symbol {
    display: none !important;
  }

  /* Tasks */
  .tasks-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(13px, 2vh, 18px) !important;
  }

  .tasks-layout .scene-header {
    max-width: 100% !important;
  }

  .tasks-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 13px !important;
  }

  .task-item,
  .tasks-list span {
    min-height: clamp(38px, 5.8vh, 50px) !important;
    padding: 8px 13px 8px 0 !important;
    font-size: clamp(9.5px, 2.7vw, 12px) !important;
    line-height: 1.18 !important;
  }

  /* Experience */
  .experience-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(13px, 2vh, 18px) !important;
  }

  .experience-layout .scene-header {
    max-width: 100% !important;
  }

  .experience-copy {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .experience-column p {
    margin: 0 0 8px !important;
    font-size: clamp(8.4px, 2.35vw, 10.4px) !important;
    line-height: 1.38 !important;
  }

  .experience-column .binary-link {
    font-size: clamp(7px, 2vw, 8.5px) !important;
  }

  /* Collaboration */
  .station-collaboration .scene-header {
    margin-bottom: 12px !important;
  }

  .collaboration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .collaboration-option {
    padding: clamp(12px, 3.4vw, 17px) !important;
  }

  .collaboration-option h3 {
    margin-bottom: 9px !important;
    font-size: clamp(17px, 4.9vw, 22px) !important;
  }

  .collaboration-option p {
    margin: 0 0 7px !important;
    font-size: clamp(7.6px, 2.15vw, 9px) !important;
    line-height: 1.34 !important;
  }

  .collaboration-option .binary-link {
    font-size: clamp(6.8px, 1.95vw, 8px) !important;
  }

  /* Process */
  .process-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(13px, 2vh, 18px) !important;
  }

  .process-layout .scene-header {
    max-width: 100% !important;
  }

  .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 14px !important;
  }

  .process-flow li {
    padding: 6px 0 !important;
  }

  .process-flow h3 {
    margin-bottom: 5px !important;
    font-size: clamp(18px, 5vw, 23px) !important;
  }

  .process-flow p {
    font-size: clamp(8.2px, 2.3vw, 10px) !important;
    line-height: 1.35 !important;
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .contact-main > p:not(.scene-label) {
    font-size: clamp(10px, 2.8vw, 12px) !important;
    line-height: 1.4 !important;
  }

  .site-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: end !important;
  }

  .social-links {
    display: grid !important;
    grid-template-columns: repeat(2, auto) !important;
    gap: 4px 12px !important;
  }
}

/* Narrow phones: preserve hierarchy without overlaps. */
@media (max-width: 430px) {
  :root {
    --gvd-gutter: clamp(15px, 4.4vw, 19px);
    --gvd-nav-lane: 21px;
  }

  .brand-lockup {
    width: clamp(168px, 51vw, 194px) !important;
  }

  .brand-name {
    font-size: clamp(18px, 5.35vw, 22px) !important;
  }

  .header-actions {
    width: clamp(88px, 26vw, 102px) !important;
  }

  .binary-link-header {
    font-size: clamp(8.3px, 2.45vw, 9.8px) !important;
  }

  .hero-name {
    font-size: clamp(31px, 9.35vw, 38px) !important;
    font-variation-settings: "wght" 830, "wdth" 132, "slnt" 0 !important;
  }

  .hero-role {
    font-size: clamp(24px, 7vw, 30px) !important;
  }

  .hero-actions {
    gap: 12px !important;
  }
}

/* Short screens: reduce vertical rhythm continuously, never switch layouts. */
@media (max-height: 720px) {
  :root {
    --gvd-header-h: clamp(62px, 9vh, 78px);
    --gvd-scene-bottom: clamp(54px, 8vh, 68px);
  }

  html.is-depth .station-shell,
  html.is-depth .station-shell-wide {
    transform: translateY(-3px) !important;
  }

  .hero-name { margin-bottom: 12px !important; }
  .hero-role { margin-bottom: 14px !important; }
  .hero-thesis { margin-bottom: 10px !important; }
  .hero-audience { margin-top: 10px !important; }
  .hero-actions { margin-top: 13px !important; }
  .capability-layout,
  .tasks-layout,
  .experience-layout,
  .process-layout { gap: 10px !important; }
  .capability-heading .scene-title { margin-bottom: 8px !important; }
  .station-collaboration .scene-header,
  .station-impact .scene-header { margin-bottom: 9px !important; }
}

/* Accessibility: no font/layout swap, only shorter motion. */
@media (prefers-reduced-motion: reduce) {
  .pixel-text-canvas { display: none !important; }
  .pixel-text-target > :not(.pixel-text-canvas) { opacity: 1 !important; }
}

/* Final specificity lock: no font-axis mutation during depth motion. */
html.is-depth.is-depth-moving .signal-title,
html.is-depth.is-depth-moving .signal-title *,
html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .signal-title,
html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .signal-title * {
  animation: none !important;
  transition-property: opacity !important;
}

html.is-depth.is-depth-moving .scene-title,
html.is-depth.is-depth-moving .contact-title,
html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .scene-title,
html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .contact-title {
  font-weight: var(--gvd-title-wght) !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" var(--gvd-title-wght), "wdth" var(--gvd-title-wdth), "slnt" 0 !important;
}

html.is-depth.is-depth-moving .hero-name,
html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .hero-name {
  font-weight: 830 !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" 830, "wdth" 160, "slnt" 0 !important;
}

html.is-depth.is-depth-moving .scene-title > *,
html.is-depth.is-depth-moving .contact-title > *,
html.is-depth.is-depth-moving .hero-name > *,
html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .scene-title > *,
html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .contact-title > *,
html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .hero-name > * {
  animation: none !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-stretch: inherit !important;
  font-variation-settings: inherit !important;
}

html.is-depth .station-work .station-shell.station-shell-wide.work-layout {
  width: 100% !important;
  max-width: min(var(--gvd-content-max), calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane))) !important;
  justify-self: stretch !important;
}

@media (max-width: 900px) {
  html.is-depth.is-depth-moving .hero-name,
  html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .hero-name {
    font-variation-settings: "wght" 830, "wdth" 136, "slnt" 0 !important;
  }
}

@media (max-width: 430px) {
  html.is-depth.is-depth-moving .hero-name,
  html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .hero-name {
    font-variation-settings: "wght" 830, "wdth" 132, "slnt" 0 !important;
  }
}


/* ---- src/v40-final.css ---- */
/* =====================================================================
   GVD v40 - production layout pass
   Stable Grtsk titles, one-gesture/one-scene depth navigation,
   fluid station fitting and collision-safe responsive geometry.
   ===================================================================== */

:root {
  --gvd-font: "grtsk-vf";
  --gvd-bg: #f6f5f1;
  --gvd-ink: #09090a;
  --gvd-muted: #737780;
  --gvd-soft: #c5c6c3;
  --gvd-line: rgba(9, 9, 10, .16);
  --gvd-gutter: clamp(24px, 4.2vw, 76px);
  --gvd-nav-lane: clamp(28px, 2.8vw, 48px);
  --gvd-header-h: clamp(76px, 10vh, 102px);
  --gvd-scene-top: calc(var(--gvd-header-h) + clamp(6px, 1vh, 12px));
  --gvd-scene-bottom: clamp(84px, 11.5vh, 116px);
  --gvd-content-max: 1480px;
  --gvd-title-wght: 810;
  --gvd-title-wdth: 154;
}

html,
body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: var(--gvd-bg) !important;
}

body {
  position: fixed !important;
  inset: 0 !important;
  touch-action: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body,
body * {
  box-sizing: border-box !important;
  font-family: var(--gvd-font) !important;
}

/* Typography is locked. No transition is allowed to mutate font axes. */
.scene-title,
.scene-title *,
.contact-title,
.contact-title *,
.hero-name,
.hero-name *,
.brand-name,
.brand-role,
.hero-role,
.work-title,
.work-title *,
.gvd-title,
.gvd-title * {
  font-family: var(--gvd-font) !important;
  font-style: normal !important;
  font-synthesis: none !important;
}

.scene-title,
.contact-title,
.gvd-title,
.signal-title {
  font-weight: var(--gvd-title-wght) !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" var(--gvd-title-wght), "wdth" var(--gvd-title-wdth), "slnt" 0 !important;
  letter-spacing: -.052em !important;
  line-height: .86 !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  transition: opacity .12s linear !important;
  animation: none !important;
}

.scene-title > .type-primary,
.scene-title > .type-secondary,
.contact-title > .type-primary,
.contact-title > .type-secondary,
.hero-name > span {
  font: inherit !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  animation: none !important;
  transition: opacity .12s linear !important;
}

.type-primary { color: var(--gvd-ink) !important; }
.type-secondary { color: var(--gvd-soft) !important; }

/* Thin Grtsk, not a secondary typeface. */
.brand-role,
.hero-role {
  font-family: var(--gvd-font) !important;
  font-weight: 270 !important;
  font-variation-settings: "wght" 270, "wdth" 108, "slnt" 0 !important;
  letter-spacing: -.015em !important;
}

/* Header ------------------------------------------------------------- */
.site-header {
  position: fixed !important;
  z-index: 1200 !important;
  inset: 0 0 auto 0 !important;
  height: var(--gvd-header-h) !important;
  padding:
    clamp(14px, 2.1vh, 22px)
    calc(var(--gvd-gutter) + var(--gvd-nav-lane))
    8px
    var(--gvd-gutter) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: clamp(20px, 3vw, 48px) !important;
  pointer-events: none !important;
}

.brand-lockup,
.header-actions,
.site-header button { pointer-events: auto !important; }

.brand-lockup {
  display: grid !important;
  grid-template-columns: clamp(44px, 3.8vw, 64px) minmax(0, max-content) !important;
  align-items: start !important;
  gap: clamp(11px, 1vw, 17px) !important;
  width: max-content !important;
  max-width: min(62vw, 640px) !important;
  min-width: 0 !important;
}

.brand-mark {
  width: clamp(44px, 3.8vw, 64px) !important;
  height: clamp(26px, 2.25vw, 38px) !important;
  overflow: visible !important;
}

.brand-symbol,
.brand-symbol-echo { width: 100% !important; height: 100% !important; object-fit: contain !important; }

.brand-copy {
  display: grid !important;
  gap: clamp(5px, .7vh, 8px) !important;
  min-width: 0 !important;
}

.brand-name {
  width: max-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  font-size: clamp(25px, 2.15vw, 39px) !important;
  line-height: .79 !important;
  font-weight: 820 !important;
  font-variation-settings: "wght" 820, "wdth" 148, "slnt" 0 !important;
  letter-spacing: -.055em !important;
}

.brand-role {
  width: 100% !important;
  white-space: nowrap !important;
  font-size: clamp(9px, .78vw, 13px) !important;
  line-height: 1 !important;
}

.header-actions {
  display: grid !important;
  width: clamp(214px, 16vw, 286px) !important;
  min-width: 0 !important;
  gap: 10px !important;
}

.binary-link-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  width: 100% !important;
  gap: 10px !important;
  padding: 0 0 9px !important;
  white-space: nowrap !important;
  font-size: clamp(13px, 1vw, 18px) !important;
  line-height: 1 !important;
}

.site-location {
  justify-self: end !important;
  font-size: clamp(7px, .58vw, 10px) !important;
}

/* Fixed depth viewport ----------------------------------------------- */
#depth-stage,
html.is-depth #depth-stage {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  perspective: 1450px !important;
  perspective-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  touch-action: none !important;
}

html.is-depth .station {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding:
    var(--gvd-scene-top)
    calc(var(--gvd-gutter) + var(--gvd-nav-lane))
    var(--gvd-scene-bottom)
    var(--gvd-gutter) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  transform: var(--depth-transform, translate3d(0,0,-920px)) !important;
  transform-style: preserve-3d !important;
  transform-origin: 50% 50% !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;
  transition: none !important;
}

html.is-depth .station-shell,
html.is-depth .station-shell-wide {
  --station-fit: 1;
  width: min(100%, var(--gvd-content-max)) !important;
  max-width: min(var(--gvd-content-max), calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane))) !important;
  min-width: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  transform: scale(var(--station-fit)) !important;
  transform-origin: center center !important;
  overflow: visible !important;
}

html.is-depth #depth-nav {
  top: calc(var(--gvd-header-h) + clamp(16px, 2.3vh, 28px)) !important;
  right: clamp(10px, 1.15vw, 22px) !important;
  bottom: clamp(42px, 6.2vh, 68px) !important;
  height: auto !important;
  transform: none !important;
}

.global-scroll-cue {
  bottom: clamp(12px, 2vh, 22px) !important;
}

/* DOM-fragment pixelation: the same browser-rendered Grtsk glyphs are
   clipped into a grid. No canvas font substitution is used. */
.pixel-text-target {
  position: relative !important;
  isolation: isolate !important;
}

.pixel-text-target > :not(.pixel-fragment-layer) {
  opacity: var(--pixel-source-opacity, 1) !important;
}

.pixel-fragment-layer {
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
  opacity: 0;
  color: inherit !important;
  font: inherit !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  white-space: inherit !important;
  text-align: inherit !important;
  transform: translate3d(0,0,0);
  transition: opacity 70ms linear, transform 70ms steps(2, end) !important;
}

.pixel-fragment-layer > * {
  font: inherit !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  color: inherit;
  animation: none !important;
  transition: none !important;
}

.hero-name > .pixel-fragment-layer {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: inherit !important;
}

.pixel-text-target.is-pixelated::before,
.pixel-text-target.is-pixelated::after { opacity: 0 !important; animation: none !important; }

/* Shared title constraints ------------------------------------------ */
.scene-label {
  margin: 0 0 clamp(8px, 1.2vh, 14px) !important;
  font-size: clamp(7px, .55vw, 9.5px) !important;
  line-height: 1.2 !important;
}

.scene-title,
.contact-title {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(44px, min(4.7vw, 8.7vh), 84px) !important;
}

.title-long { font-size: clamp(39px, min(4.15vw, 7.8vh), 74px) !important; }
.title-xlong { font-size: clamp(34px, min(3.55vw, 7vh), 64px) !important; }

/* Hero --------------------------------------------------------------- */
.station-hero .station-shell { max-width: min(var(--gvd-content-max), 1440px) !important; }
.hero-meta { margin: 0 0 clamp(10px, 1.4vh, 16px) !important; }

.hero-name {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: .15em !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 0 clamp(17px, 2.2vh, 25px) !important;
  white-space: nowrap !important;
  font-size: clamp(60px, min(5.9vw, 10.4vh), 108px) !important;
  line-height: .79 !important;
  font-weight: 830 !important;
  font-variation-settings: "wght" 830, "wdth" 158, "slnt" 0 !important;
  letter-spacing: -.058em !important;
}

.hero-role {
  margin: 0 0 clamp(20px, 2.7vh, 30px) !important;
  color: var(--gvd-muted) !important;
  font-size: clamp(32px, min(3.15vw, 5.8vh), 56px) !important;
  line-height: .94 !important;
  white-space: nowrap !important;
}

.hero-thesis {
  max-width: 1120px !important;
  margin: 0 0 clamp(14px, 1.9vh, 21px) !important;
  font-size: clamp(20px, min(1.9vw, 3.5vh), 32px) !important;
  line-height: 1.06 !important;
}

.hero-description {
  max-width: 1210px !important;
  margin: 0 !important;
  font-size: clamp(13px, .92vw, 17px) !important;
  line-height: 1.45 !important;
}

.hero-audience {
  margin: clamp(16px, 2.2vh, 24px) 0 0 !important;
  font-size: clamp(16px, 1.2vw, 22px) !important;
  line-height: 1.22 !important;
}

.hero-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(20px, 2.8vw, 44px) !important;
  margin-top: clamp(20px, 2.7vh, 31px) !important;
}
.hero-actions > * { flex: 0 0 auto !important; white-space: nowrap !important; }

/* Impact ------------------------------------------------------------- */
.station-impact .scene-header { max-width: 960px !important; margin-bottom: clamp(20px, 3vh, 34px) !important; }
.impact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.impact-item { min-width: 0 !important; min-height: clamp(132px, 18vh, 196px) !important; padding: clamp(14px, 1.8vw, 25px) !important; }

/* Public works ------------------------------------------------------- */
.work-layout > .scene-header { margin-bottom: clamp(16px, 2.4vh, 28px) !important; }
.work-row { padding: clamp(10px, 1.45vh, 17px) 0 !important; overflow: hidden !important; }
.work-title { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; gap: clamp(14px, 2vw, 34px) !important; }
.work-title-segment {
  min-width: 0 !important;
  font-size: clamp(24px, min(2.25vw, 4.15vh), 41px) !important;
  line-height: .92 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.work-inline-media { width: clamp(170px, 18vw, 310px) !important; max-width: 21vw !important; height: clamp(56px, 7.4vh, 82px) !important; }
.work-row-meta { font-size: clamp(9px, .67vw, 12px) !important; line-height: 1.35 !important; }

/* Two-column production scenes -------------------------------------- */
.capability-layout,
.tasks-layout,
.experience-layout,
.process-layout {
  display: grid !important;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
  align-items: center !important;
  gap: clamp(42px, 5.7vw, 90px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.capability-heading,
.tasks-layout .scene-header,
.experience-layout .scene-header,
.process-layout .scene-header {
  width: 100% !important;
  max-width: 620px !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.capability-heading .scene-title { margin-bottom: clamp(18px, 2.6vh, 30px) !important; }
.capability-thesis { max-width: 610px !important; font-size: clamp(19px, min(1.75vw, 3.2vh), 30px) !important; line-height: 1.1 !important; }
.capability-intro { max-width: 600px !important; margin-top: clamp(13px, 1.9vh, 20px) !important; font-size: clamp(13px, .88vw, 16px) !important; line-height: 1.42 !important; }
.systems-note { max-width: 600px !important; margin-top: 13px !important; font-size: clamp(7px, .55vw, 9px) !important; line-height: 1.4 !important; }

.capability-list {
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 620px !important;
  grid-template-columns: 1fr !important;
  gap: 1px !important;
}
.capability-list li {
  min-height: clamp(39px, 5.5vh, 58px) !important;
  padding: 8px clamp(15px, 1.8vw, 26px) !important;
  font-size: clamp(13px, .96vw, 17px) !important;
  line-height: 1.2 !important;
}
.capability-list li .cap-label { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; }

/* Tasks: explicit rhythm and equal cells, no word fragmentation. */
.tasks-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(clamp(48px, 6.5vh, 68px), auto) !important;
  gap: 0 clamp(20px, 2.5vw, 38px) !important;
  align-content: center !important;
  min-width: 0 !important;
}
.task-item,
.tasks-list span {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: clamp(10px, 1.4vh, 15px) 26px clamp(10px, 1.4vh, 15px) 0 !important;
  font-size: clamp(14px, 1.05vw, 19px) !important;
  line-height: 1.18 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.experience-copy {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(24px, 3vw, 48px) !important;
  min-width: 0 !important;
}
.experience-column { min-width: 0 !important; }
.experience-column p { margin: 0 0 clamp(12px, 1.8vh, 19px) !important; font-size: clamp(13px, .92vw, 16.5px) !important; line-height: 1.48 !important; }

.process-flow {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.8vw, 25px) clamp(24px, 3vw, 46px) !important;
  min-width: 0 !important;
}
.process-flow li { min-width: 0 !important; padding: clamp(11px, 1.6vh, 18px) 0 !important; }
.process-flow h3 { font-size: clamp(24px, 1.9vw, 35px) !important; line-height: .96 !important; }
.process-flow p { font-size: clamp(12px, .86vw, 15.5px) !important; line-height: 1.42 !important; }

/* Remaining scenes -------------------------------------------------- */
.station-collaboration .scene-header { margin-bottom: clamp(18px, 2.8vh, 30px) !important; }
.collaboration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(16px, 2vw, 30px) !important; }
.collaboration-option { min-width: 0 !important; padding: clamp(18px, 2.2vw, 34px) !important; }
.collaboration-option h3 { font-size: clamp(25px, 2.15vw, 39px) !important; }
.collaboration-option p { font-size: clamp(12px, .86vw, 15.5px) !important; line-height: 1.43 !important; }

.contact-layout { grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr) !important; gap: clamp(40px, 5vw, 82px) !important; align-items: end !important; }
.contact-main > p:not(.scene-label) { font-size: clamp(13px, .92vw, 16.5px) !important; line-height: 1.46 !important; }

/* Tablet ------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root {
    --gvd-gutter: clamp(21px, 3.8vw, 42px);
    --gvd-nav-lane: 32px;
    --gvd-title-wdth: 146;
  }

  .capability-layout,
  .tasks-layout,
  .experience-layout,
  .process-layout { gap: clamp(28px, 4vw, 48px) !important; }

  .scene-title,
  .contact-title { font-size: clamp(40px, min(5.3vw, 8vh), 64px) !important; }
  .title-long { font-size: clamp(36px, min(4.8vw, 7.3vh), 58px) !important; }
  .title-xlong { font-size: clamp(31px, min(4.2vw, 6.5vh), 51px) !important; }
}

/* Mobile/tablet keeps the same fixed Z-axis scene system. */
@media (max-width: 900px) {
  :root {
    --gvd-gutter: clamp(18px, 4.8vw, 25px);
    --gvd-nav-lane: clamp(20px, 5.4vw, 27px);
    --gvd-header-h: calc(clamp(62px, 8.6vh, 74px) + env(safe-area-inset-top));
    --gvd-scene-top: calc(var(--gvd-header-h) + clamp(5px, .7vh, 8px));
    --gvd-scene-bottom: calc(clamp(72px, 9.2vh, 86px) + env(safe-area-inset-bottom));
    --gvd-title-wdth: 136;
    --gvd-title-wght: 800;
  }

  .site-header {
    padding:
      calc(10px + env(safe-area-inset-top))
      calc(var(--gvd-gutter) + var(--gvd-nav-lane))
      6px
      var(--gvd-gutter) !important;
    gap: clamp(8px, 2.2vw, 13px) !important;
  }

  .brand-lockup {
    grid-template-columns: clamp(30px, 8.2vw, 38px) minmax(0, 1fr) !important;
    gap: clamp(8px, 2vw, 10px) !important;
    width: clamp(174px, 53vw, 210px) !important;
    max-width: 56vw !important;
  }
  .brand-mark { width: clamp(30px, 8.2vw, 38px) !important; height: clamp(18px, 4.8vw, 23px) !important; }
  .brand-copy { gap: 5px !important; }
  .brand-name { font-size: clamp(18px, 5.25vw, 23px) !important; font-variation-settings: "wght" 820, "wdth" 143, "slnt" 0 !important; }
  .brand-role { font-size: clamp(6.4px, 1.8vw, 8px) !important; }

  .header-actions { width: clamp(91px, 26vw, 110px) !important; gap: 6px !important; }
  .binary-link-header { gap: 5px !important; padding-bottom: 6px !important; font-size: clamp(8.5px, 2.45vw, 10.5px) !important; }
  .site-location { font-size: clamp(5px, 1.4vw, 6.3px) !important; }

  html.is-depth .station {
    padding:
      var(--gvd-scene-top)
      calc(var(--gvd-gutter) + var(--gvd-nav-lane))
      var(--gvd-scene-bottom)
      var(--gvd-gutter) !important;
  }

  html.is-depth .station-shell,
  html.is-depth .station-shell-wide {
    width: 100% !important;
    max-width: calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane)) !important;
  }

  html.is-depth #depth-nav {
    top: calc(var(--gvd-header-h) + 13px) !important;
    right: 5px !important;
    bottom: calc(30px + env(safe-area-inset-bottom)) !important;
    width: 12px !important;
  }
  html.is-depth #depth-nav button { width: 10px !important; height: 10px !important; }
  .global-scroll-cue { bottom: calc(7px + env(safe-area-inset-bottom)) !important; transform: translateX(-50%) scale(.72) !important; }

  .scene-label { margin-bottom: 7px !important; font-size: clamp(5.6px, 1.55vw, 7px) !important; }
  .scene-title,
  .contact-title { font-size: clamp(28px, min(7.8vw, 5.7vh), 37px) !important; line-height: .88 !important; }
  .title-long { font-size: clamp(26px, min(7.2vw, 5.25vh), 34px) !important; }
  .title-xlong { font-size: clamp(23px, min(6.4vw, 4.75vh), 31px) !important; }

  .hero-name {
    margin-bottom: clamp(12px, 1.6vh, 17px) !important;
    font-size: clamp(29px, min(8.1vw, 6vh), 38px) !important;
    line-height: .82 !important;
    font-variation-settings: "wght" 830, "wdth" 132, "slnt" 0 !important;
  }
  .hero-role { margin-bottom: clamp(14px, 2vh, 19px) !important; font-size: clamp(22px, min(6.1vw, 4.6vh), 29px) !important; line-height: .96 !important; }
  .hero-thesis { margin-bottom: 11px !important; font-size: clamp(14px, min(4vw, 3vh), 18px) !important; line-height: 1.08 !important; }
  .hero-description { font-size: clamp(10.5px, 2.85vw, 12.5px) !important; line-height: 1.38 !important; }
  .hero-audience { margin-top: 12px !important; font-size: clamp(12px, 3.25vw, 14.5px) !important; line-height: 1.25 !important; }
  .hero-actions {
    display: grid !important;
    grid-template-columns: max-content max-content !important;
    justify-content: start !important;
    gap: clamp(11px, 3.2vw, 17px) !important;
    margin-top: clamp(13px, 1.9vh, 18px) !important;
  }
  .hero-actions .binary-button,
  .hero-actions .binary-link { width: auto !important; min-width: 0 !important; font-size: clamp(7.2px, 2vw, 8.8px) !important; }
  .hero-actions .binary-button { min-height: 34px !important; padding: 0 10px !important; }

  .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .impact-item { min-height: clamp(78px, 11.5vh, 102px) !important; padding: 9px !important; }
  .impact-item strong { font-size: clamp(27px, 7.6vw, 37px) !important; }
  .impact-item p b { font-size: 10px !important; }
  .impact-item p span { font-size: 7px !important; line-height: 1.25 !important; }

  .work-layout > .scene-header { margin-bottom: 8px !important; }
  .work-row { padding: clamp(6px, .9vh, 8px) 0 !important; }
  .work-title { grid-template-columns: minmax(0, 1fr) !important; gap: 5px !important; }
  .work-title-before,
  .work-title-after { text-align: left !important; }
  .work-title-segment { font-size: clamp(16px, 4.45vw, 21px) !important; line-height: .95 !important; }
  .work-inline-media { grid-row: 2 !important; width: 100% !important; max-width: 100% !important; height: clamp(38px, 5.7vh, 50px) !important; margin: 0 !important; }
  .work-row-meta { margin-top: 3px !important; gap: 7px !important; font-size: clamp(7px, 1.95vw, 8.4px) !important; line-height: 1.25 !important; }

  .capability-layout,
  .tasks-layout,
  .experience-layout,
  .process-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(11px, 1.6vh, 15px) !important;
  }

  .capability-heading,
  .tasks-layout .scene-header,
  .experience-layout .scene-header,
  .process-layout .scene-header { max-width: 100% !important; }

  .capability-heading .scene-title { margin-bottom: 9px !important; }
  .capability-thesis { font-size: clamp(13px, 3.55vw, 16px) !important; line-height: 1.1 !important; }
  .capability-intro { margin-top: 7px !important; font-size: clamp(8.5px, 2.35vw, 10.5px) !important; line-height: 1.33 !important; }
  .systems-note { margin-top: 6px !important; font-size: clamp(5.2px, 1.45vw, 6.3px) !important; }
  .capability-list { max-width: 100% !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .capability-list li {
    min-height: clamp(29px, 4.2vh, 36px) !important;
    padding: 5px 8px !important;
    font-size: clamp(9px, 2.55vw, 11px) !important;
    line-height: 1.18 !important;
  }
  .cap-symbol { display: none !important; }

  .tasks-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(clamp(37px, 5.4vh, 45px), auto) !important;
    gap: 0 clamp(10px, 3vw, 15px) !important;
  }
  .task-item,
  .tasks-list span {
    padding: 6px 9px 6px 0 !important;
    font-size: clamp(9.6px, 2.72vw, 11.8px) !important;
    line-height: 1.2 !important;
  }

  .experience-copy { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(10px, 3vw, 15px) !important; }
  .experience-column p { margin-bottom: 8px !important; font-size: clamp(9.2px, 2.55vw, 11.1px) !important; line-height: 1.36 !important; }
  .experience-column .binary-link { font-size: clamp(7px, 1.95vw, 8.2px) !important; }

  .process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 5px 12px !important; }
  .process-flow li { padding: 5px 0 !important; }
  .process-flow h3 { margin-bottom: 4px !important; font-size: clamp(16px, 4.45vw, 20px) !important; }
  .process-flow p { font-size: clamp(8.5px, 2.38vw, 10.3px) !important; line-height: 1.32 !important; }

  .station-collaboration .scene-header { margin-bottom: 9px !important; }
  .collaboration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; }
  .collaboration-option { padding: clamp(10px, 2.8vw, 14px) !important; }
  .collaboration-option h3 { margin-bottom: 7px !important; font-size: clamp(15px, 4.2vw, 19px) !important; }
  .collaboration-option p { margin-bottom: 6px !important; font-size: clamp(7.8px, 2.18vw, 9.4px) !important; line-height: 1.32 !important; }
  .collaboration-option .binary-link { font-size: clamp(6.5px, 1.85vw, 7.7px) !important; }

  .contact-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .contact-main > p:not(.scene-label) { font-size: clamp(10px, 2.75vw, 12px) !important; line-height: 1.38 !important; }
  .site-footer { grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; }
  .social-links { grid-template-columns: repeat(2, auto) !important; gap: 3px 10px !important; }
}

@media (max-width: 430px) {
  :root {
    --gvd-gutter: clamp(15px, 4.3vw, 18px);
    --gvd-nav-lane: 20px;
  }
  .brand-lockup { width: clamp(166px, 52vw, 193px) !important; }
  .header-actions { width: clamp(86px, 26vw, 99px) !important; }
  .hero-name { font-size: clamp(28px, 8.45vw, 35px) !important; }
  .hero-role { font-size: clamp(21px, 6.35vw, 27px) !important; }
  .hero-actions { gap: 10px !important; }
}

@media (max-height: 700px) {
  :root {
    --gvd-header-h: clamp(58px, 8.4vh, 68px);
    --gvd-scene-bottom: clamp(58px, 8.8vh, 70px);
  }
  .hero-name { margin-bottom: 10px !important; }
  .hero-role { margin-bottom: 11px !important; }
  .hero-thesis { margin-bottom: 8px !important; }
  .hero-audience { margin-top: 8px !important; }
  .hero-actions { margin-top: 10px !important; }
  .capability-layout,
  .tasks-layout,
  .experience-layout,
  .process-layout { gap: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-fragment-layer { display: none !important; }
  .pixel-text-target > :not(.pixel-fragment-layer) { opacity: 1 !important; }
}

/* =====================================================================
   v40.1 - hard interaction/type lock and final responsive QA pass
   ===================================================================== */

/* Legacy title experiments are explicitly neutralized. The title plane never
   scales, skews, breathes or changes variable-font axes during navigation. */
html.is-depth .station .signal-title,
html.is-depth.is-depth-moving .station .signal-title,
html.is-entered.is-depth .station.is-active .signal-title,
html.is-entered.is-depth:not(.is-depth-moving) .station.is-active .signal-title {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  filter: none !important;
  animation: none !important;
  transition: opacity 70ms linear !important;
  text-shadow: none !important;
}

html.is-depth .scene-title,
html.is-depth .contact-title,
html.is-depth .scene-title *,
html.is-depth .contact-title * {
  font-family: var(--gvd-font) !important;
  font-style: normal !important;
  font-weight: var(--gvd-title-wght) !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" var(--gvd-title-wght), "wdth" var(--gvd-title-wdth), "slnt" 0 !important;
  font-synthesis: none !important;
  animation: none !important;
}

html.is-depth .hero-name,
html.is-depth .hero-name * {
  font-family: var(--gvd-font) !important;
  font-style: normal !important;
  font-weight: 830 !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" 830, "wdth" 158, "slnt" 0 !important;
  font-synthesis: none !important;
  animation: none !important;
}

html.is-depth .type-primary,
html.is-depth .type-secondary,
html.is-depth .kinetic-segment {
  font: inherit !important;
  font-variation-settings: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  animation: none !important;
  transform: none !important;
}

.signal-title::before,
.signal-title::after,
.pixel-text-canvas {
  display: none !important;
  content: none !important;
}

/* UI subtitle is the same Grtsk drawing, only lighter. */
.brand-role,
.hero-role,
.preloader-copy-role,
.site-footer > div > span:first-of-type {
  font-family: var(--gvd-font) !important;
  font-style: normal !important;
  font-weight: 270 !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" 270, "wdth" 108, "slnt" 0 !important;
  font-synthesis: none !important;
}

/* The depth product never exposes document scrolling or scroll chaining. */
html.is-depth,
html.is-depth body,
html.is-depth #depth-stage {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

html.is-depth #depth-nav {
  display: flex !important;
}

/* Work descriptions remain present on every viewport. */
.work-row-meta > span {
  display: block !important;
  min-width: 0 !important;
}

/* Clear task geometry: two equal columns, explicit baselines and separators. */
.tasks-list {
  border-top: 1px solid var(--gvd-line) !important;
}
.task-item,
.tasks-list span {
  border-bottom: 1px solid var(--gvd-line) !important;
}
.tasks-list .task-item:nth-child(odd) {
  border-right: 1px solid var(--gvd-line) !important;
}

@media (max-width: 900px) {
  /* Header columns are calculated from the available width rather than fixed
     percentages, so the identity and CTA cannot collide at intermediate sizes. */
  .site-header {
    grid-template-columns: minmax(0, 1fr) clamp(88px, 25.5vw, 106px) !important;
    gap: clamp(8px, 2.2vw, 12px) !important;
  }

  .brand-lockup {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: clamp(30px, 8.4vw, 38px) minmax(0, 1fr) !important;
  }
  .brand-copy { width: 100% !important; min-width: 0 !important; }
  .brand-name {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    font-size: clamp(17px, 4.85vw, 21px) !important;
    line-height: .82 !important;
  }
  .brand-role {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: clamp(6.5px, 1.78vw, 7.8px) !important;
  }
  .header-actions { width: 100% !important; min-width: 0 !important; }
  .binary-link-header {
    width: 100% !important;
    min-width: 0 !important;
    font-size: clamp(8.3px, 2.3vw, 10px) !important;
    letter-spacing: -.025em !important;
  }
  .binary-link-header .binary-label {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html.is-depth .hero-name,
  html.is-depth .hero-name * {
    font-variation-settings: "wght" 830, "wdth" 132, "slnt" 0 !important;
  }

  /* Readable copy without turning a scene into a vertically scrolling page. */
  .hero-description {
    font-size: clamp(11px, 2.9vw, 12.8px) !important;
    line-height: 1.4 !important;
  }
  .hero-audience {
    font-size: clamp(12.2px, 3.2vw, 14px) !important;
  }
  .capability-intro {
    font-size: clamp(9.2px, 2.42vw, 10.8px) !important;
    line-height: 1.38 !important;
  }
  .experience-column p {
    font-size: clamp(10.2px, 2.72vw, 11.8px) !important;
    line-height: 1.42 !important;
  }
  .process-flow p {
    font-size: clamp(9.2px, 2.46vw, 10.7px) !important;
    line-height: 1.38 !important;
  }
  .collaboration-option p {
    font-size: clamp(8.6px, 2.28vw, 9.8px) !important;
    line-height: 1.38 !important;
  }

  .tasks-list {
    gap: 0 !important;
  }
  .task-item,
  .tasks-list span {
    padding: 8px 10px !important;
    font-size: clamp(10px, 2.75vw, 11.8px) !important;
    line-height: 1.22 !important;
  }
  .tasks-list .task-item:nth-child(even) {
    padding-left: 12px !important;
  }

  .work-row-meta {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    font-size: clamp(7.6px, 2.02vw, 8.8px) !important;
  }

  /* Preserve a visible safety gap around the fixed navigation rail. */
  html.is-depth #depth-nav {
    top: calc(var(--gvd-header-h) + 16px) !important;
    right: 5px !important;
    bottom: calc(32px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 620px) {
  /* Long titles receive their own bounded measure; no title may enter the nav lane. */
  .scene-title,
  .contact-title,
  .title-long,
  .title-xlong {
    max-width: calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane)) !important;
  }

  .experience-copy {
    gap: clamp(12px, 3.3vw, 16px) !important;
  }

  .experience-column .binary-link {
    white-space: nowrap !important;
  }
}

@media (max-width: 380px), (max-height: 680px) {
  /* Short screens keep the same composition and Z-navigation, with a controlled
     density reduction instead of overflow or a document-scroll fallback. */
  .scene-title,
  .contact-title { font-size: clamp(26px, min(7.45vw, 5.35vh), 34px) !important; }
  .title-long { font-size: clamp(24px, min(6.9vw, 5vh), 31px) !important; }
  .title-xlong { font-size: clamp(22px, min(6.25vw, 4.6vh), 29px) !important; }
  .hero-name { font-size: clamp(27px, min(8vw, 5.8vh), 34px) !important; }
  .hero-role { font-size: clamp(20px, min(5.9vw, 4.25vh), 25px) !important; }
  .hero-description { font-size: clamp(10.2px, 2.82vw, 11.5px) !important; }
  .experience-column p { font-size: clamp(9.4px, 2.62vw, 10.5px) !important; }
  .task-item,
  .tasks-list span { font-size: clamp(9.4px, 2.65vw, 10.6px) !important; }
}

/* Public-work media is an in-flow grid item on touch layouts. This neutralizes
   the old absolute hover plane, which otherwise inflated and crossed the header. */
@media (max-width: 900px) {
  .station-work .work-list {
    display: grid !important;
    grid-template-rows: repeat(3, auto) !important;
    align-content: center !important;
    overflow: visible !important;
  }
  .station-work .work-row,
  .station-work .work-row.is-active,
  .station-work .work-row.is-mobile-open {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    min-height: 0 !important;
    padding: clamp(5px, .75vh, 7px) 0 !important;
  }
  .station-work .work-inline-media,
  .station-work .work-row.is-active .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media,
  .station-work .work-row:hover .work-inline-media {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    grid-row: 2 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(34px, 5.1vh, 46px) !important;
    margin: 4px 0 3px !important;
    opacity: 1 !important;
    z-index: 1 !important;
    transform: none !important;
    border-radius: 0 16px 0 0 !important;
    box-shadow: none !important;
  }
  .station-work .work-inline-canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  .station-work .work-title-segment,
  .station-work .work-row:hover .work-title-segment,
  .station-work .work-row.is-active .work-title-segment {
    transform: none !important;
  }
}

@media (max-width: 380px), (max-height: 680px) {
  .station-work .scene-header { margin-bottom: 4px !important; }
  .station-work .scene-title { font-size: clamp(25px, 7.1vw, 30px) !important; }
  .station-work .work-title-segment { font-size: clamp(14px, 4.1vw, 17px) !important; }
  .station-work .work-inline-media,
  .station-work .work-row.is-active .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media {
    height: clamp(29px, 4.6vh, 36px) !important;
  }
  .station-work .work-row-meta {
    font-size: clamp(6.7px, 1.88vw, 7.6px) !important;
    line-height: 1.2 !important;
  }
}

/* Approved two-family system: Grtsk for content/display, Futura 100 Cyrillic only for
   metadata and terminal-style micro UI. The identity subtitle stays Grtsk. */
.mono,
.scene-label,
.hero-meta,
.site-location,
.systems-note,
.budget,
.depth-nav button span,
.preloader-terminal,
.preloader-copy-location,
.work-row-meta > b {
  font-family: "futura-100-cyrillic" !important;
  font-style: normal !important;
  font-synthesis: none !important;
}

.brand-role,
.hero-role,
.preloader-copy-role {
  font-family: var(--gvd-font) !important;
}


/* ---- src/v41-final.css ---- */
/* =====================================================================
   GVD v41 - layout/art-direction correction
   Live Grtsk titles + pixel-cover transition, collision-safe mobile header,
   borderless process geometry and in-flow public-work media.
   ===================================================================== */

:root {
  --gvd-header-h: clamp(78px, 10.4vh, 104px);
  --gvd-scene-top: calc(var(--gvd-header-h) + clamp(8px, 1.1vh, 14px));
  --gvd-scene-bottom: clamp(82px, 10.8vh, 112px);
}

/* Keep the live font drawing permanently visible. The pixel effect is a
   mosaic cover over the same DOM title, so there is no alternate font frame. */
.pixel-text-target {
  position: relative !important;
  isolation: isolate !important;
}
.pixel-text-target > :not(.pixel-block-layer) {
  opacity: 1 !important;
}
.pixel-fragment-layer { display: none !important; }
.pixel-block-layer {
  position: absolute !important;
  z-index: 8 !important;
  inset: -.06em -.025em !important;
  display: grid !important;
  grid-template-columns: repeat(var(--pixel-columns), minmax(0, 1fr)) !important;
  grid-template-rows: repeat(var(--pixel-rows), minmax(0, 1fr)) !important;
  pointer-events: none !important;
  overflow: hidden !important;
  line-height: 0 !important;
}
.pixel-block {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--gvd-bg) !important;
  opacity: 0;
  transform: scale(.88);
  transform-origin: center !important;
  transition:
    opacity 42ms steps(1, end) var(--pixel-delay, 0ms),
    transform 64ms steps(2, end) var(--pixel-delay, 0ms) !important;
}
.pixel-text-target.is-pixelated { contain: paint; }

/* Thin Grtsk for every Creative Technologist subtitle. */
.brand-role,
.hero-role,
.preloader-copy-role,
.site-footer > div > span:first-of-type {
  font-family: var(--gvd-font) !important;
  font-style: normal !important;
  font-weight: 260 !important;
  font-stretch: normal !important;
  font-variation-settings: "wght" 260, "wdth" 104, "slnt" 0 !important;
  font-synthesis: none !important;
}
.brand-role {
  letter-spacing: .16em !important;
  line-height: 1 !important;
}

/* The identity and CTA have explicit lanes at every width. */
.site-header {
  align-items: start !important;
  overflow: visible !important;
}
.brand-lockup,
.brand-copy,
.header-actions,
.binary-link-header,
.binary-link-header .binary-label {
  min-width: 0 !important;
}

/* Remove the repeated grey table-frame language from content scenes. */
.impact-grid,
.impact-item,
.work-list,
.work-row,
.work-row-meta,
.capability-list,
.capability-list li,
.tasks-list,
.task-item,
.tasks-list span,
.experience-copy,
.collaboration-grid,
.collaboration-option,
.process-flow,
.process-flow li {
  border: 0 !important;
  outline: 0 !important;
}
.tasks-list .task-item:nth-child(odd),
.collaboration-option + .collaboration-option {
  border: 0 !important;
}

/* PUBLIC WORKS ------------------------------------------------------- */
.station-work .work-layout {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-content: center !important;
  gap: clamp(10px, 1.5vh, 18px) !important;
}
.station-work .work-layout > .scene-header {
  margin: 0 !important;
}
.station-work .work-list {
  display: grid !important;
  grid-template-rows: repeat(3, minmax(0, auto)) !important;
  align-content: center !important;
  gap: clamp(7px, 1.15vh, 13px) !important;
  width: 100% !important;
}
.station-work .work-row,
.station-work .work-row.is-active,
.station-work .work-row.is-mobile-open {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: clamp(4px, .7vh, 8px) !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: clamp(3px, .55vh, 7px) 0 !important;
  overflow: visible !important;
}
.station-work .work-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.station-work .work-title-segment {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  font-size: clamp(24px, min(2.2vw, 4vh), 39px) !important;
  line-height: .91 !important;
  font-weight: 760 !important;
  font-variation-settings: "wght" 760, "wdth" 142, "slnt" 0 !important;
  letter-spacing: -.044em !important;
  transform: none !important;
  white-space: normal !important;
}
.station-work .work-title-before { text-align: right !important; }
.station-work .work-title-after { text-align: left !important; }
.station-work .work-inline-media,
.station-work .work-row:hover .work-inline-media,
.station-work .work-row.is-active .work-inline-media,
.station-work .work-row.is-mobile-open .work-inline-media {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 0 !important;
  max-width: 0 !important;
  height: clamp(52px, 6.8vh, 76px) !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  border-radius: 0 22px 0 0 !important;
  box-shadow: none !important;
  transition:
    width .52s cubic-bezier(.22,.8,.2,1),
    max-width .52s cubic-bezier(.22,.8,.2,1),
    margin .52s cubic-bezier(.22,.8,.2,1),
    opacity .16s linear !important;
}
.station-work .work-row:hover .work-inline-media,
.station-work .work-row.is-active .work-inline-media,
.station-work .work-row.is-mobile-open .work-inline-media {
  width: clamp(170px, 18vw, 300px) !important;
  max-width: clamp(170px, 18vw, 300px) !important;
  margin: 0 clamp(12px, 1.5vw, 24px) !important;
  opacity: 1 !important;
}
.station-work .work-inline-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.station-work .work-row-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: clamp(18px, 2vw, 32px) !important;
  margin: 0 !important;
  font-size: clamp(8.8px, .64vw, 11.2px) !important;
  line-height: 1.32 !important;
}
.station-work .work-row-meta > span {
  max-width: min(780px, 72vw) !important;
}

/* PROCESS ------------------------------------------------------------ */
.process-layout {
  grid-template-columns: minmax(310px, .78fr) minmax(560px, 1.22fr) !important;
  align-items: center !important;
  gap: clamp(54px, 6.8vw, 112px) !important;
}
.process-layout .scene-header {
  max-width: 560px !important;
}
.process-flow {
  counter-reset: process-step !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: center !important;
  gap: clamp(32px, 4.2vh, 52px) clamp(34px, 4vw, 68px) !important;
  width: 100% !important;
  min-width: 0 !important;
}
.process-flow li {
  counter-increment: process-step !important;
  display: grid !important;
  grid-template-columns: clamp(24px, 2vw, 34px) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: clamp(12px, 1.2vw, 18px) !important;
  row-gap: clamp(8px, 1.1vh, 12px) !important;
  align-content: start !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.process-flow li::before {
  content: counter(process-step, decimal-leading-zero) !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
  color: var(--gvd-soft) !important;
  font-family: var(--gvd-font) !important;
  font-size: clamp(10px, .7vw, 12px) !important;
  font-weight: 560 !important;
  font-variation-settings: "wght" 560, "wdth" 105, "slnt" 0 !important;
  letter-spacing: .08em !important;
}
.process-flow h3 {
  grid-column: 2 !important;
  margin: 0 !important;
  font-size: clamp(25px, 1.95vw, 36px) !important;
  line-height: .94 !important;
  font-weight: 740 !important;
  font-variation-settings: "wght" 740, "wdth" 135, "slnt" 0 !important;
  letter-spacing: -.035em !important;
}
.process-flow p {
  grid-column: 2 !important;
  margin: 0 !important;
  max-width: 26ch !important;
  font-size: clamp(12px, .85vw, 15px) !important;
  line-height: 1.42 !important;
}

/* More deliberate content centering. */
html.is-depth .station-shell,
html.is-depth .station-shell-wide {
  transform-origin: center center !important;
}
.station-experience .experience-layout,
.station-process .process-layout,
.station-work .work-layout {
  align-self: center !important;
}

@media (max-width: 1100px) {
  .process-layout {
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr) !important;
    gap: clamp(34px, 4.4vw, 56px) !important;
  }
}

@media (max-width: 900px) {
  :root {
    --gvd-header-h: calc(clamp(66px, 8.2vh, 74px) + env(safe-area-inset-top));
    --gvd-scene-top: calc(var(--gvd-header-h) + clamp(7px, .9vh, 10px));
    --gvd-scene-bottom: calc(clamp(66px, 8.2vh, 76px) + env(safe-area-inset-bottom));
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) clamp(92px, 25vw, 108px) !important;
    gap: clamp(7px, 2vw, 10px) !important;
    padding:
      calc(10px + env(safe-area-inset-top))
      calc(var(--gvd-gutter) + var(--gvd-nav-lane))
      6px
      var(--gvd-gutter) !important;
  }
  .brand-lockup {
    grid-template-columns: clamp(29px, 7.8vw, 35px) minmax(0, 1fr) !important;
    gap: clamp(7px, 1.8vw, 9px) !important;
    width: 100% !important;
    max-width: none !important;
  }
  .brand-mark {
    width: clamp(29px, 7.8vw, 35px) !important;
    height: clamp(18px, 4.8vw, 22px) !important;
  }
  .brand-copy { gap: 5px !important; }
  .brand-name {
    width: max-content !important;
    max-width: 100% !important;
    overflow: visible !important;
    font-size: clamp(15px, 4.25vw, 18.5px) !important;
    line-height: .82 !important;
    font-variation-settings: "wght" 820, "wdth" 126, "slnt" 0 !important;
    letter-spacing: -.05em !important;
  }
  .brand-role {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    font-size: clamp(5.5px, 1.45vw, 6.4px) !important;
    letter-spacing: .16em !important;
  }
  .header-actions {
    width: 100% !important;
    gap: 6px !important;
  }
  .binary-link-header {
    width: 100% !important;
    gap: 4px !important;
    padding-bottom: 6px !important;
    font-size: clamp(7.8px, 2.12vw, 9.2px) !important;
    letter-spacing: -.025em !important;
  }
  .binary-link-header .binary-label {
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
  .site-location {
    font-size: clamp(4.8px, 1.28vw, 5.8px) !important;
    white-space: nowrap !important;
  }

  /* Public works: image remains between the two title segments and expands
     in normal flow, never over the text. */
  .station-work .work-layout {
    gap: clamp(6px, .9vh, 9px) !important;
  }
  .station-work .work-list {
    gap: clamp(4px, .6vh, 7px) !important;
  }
  .station-work .work-row,
  .station-work .work-row.is-active,
  .station-work .work-row.is-mobile-open {
    grid-template-rows: auto auto !important;
    gap: 3px !important;
    padding: clamp(2px, .4vh, 4px) 0 !important;
  }
  .station-work .work-title {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    justify-items: stretch !important;
  }
  .station-work .work-title-before,
  .station-work .work-title-after {
    text-align: left !important;
  }
  .station-work .work-title-segment {
    font-size: clamp(15px, 4.2vw, 19px) !important;
    line-height: .93 !important;
  }
  .station-work .work-inline-media,
  .station-work .work-row:hover .work-inline-media,
  .station-work .work-row.is-active .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media {
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    transition:
      height .46s cubic-bezier(.22,.8,.2,1),
      max-height .46s cubic-bezier(.22,.8,.2,1),
      margin .46s cubic-bezier(.22,.8,.2,1),
      opacity .15s linear !important;
  }
  .station-work .work-row:hover .work-inline-media,
  .station-work .work-row.is-active .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media {
    height: clamp(34px, 4.9vh, 44px) !important;
    max-height: clamp(34px, 4.9vh, 44px) !important;
    margin: 4px 0 !important;
    opacity: 1 !important;
  }
  .station-work .work-row-meta {
    gap: 7px !important;
    font-size: clamp(6.8px, 1.82vw, 7.8px) !important;
    line-height: 1.22 !important;
  }
  .station-work .work-row-meta > span {
    max-width: none !important;
  }

  .process-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: clamp(13px, 1.8vh, 18px) !important;
  }
  .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(15px, 2.2vh, 21px) clamp(12px, 3.2vw, 18px) !important;
  }
  .process-flow li {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
  }
  .process-flow li::before {
    font-size: clamp(7px, 1.85vw, 8px) !important;
  }
  .process-flow h3 {
    font-size: clamp(16px, 4.35vw, 19px) !important;
    line-height: .96 !important;
  }
  .process-flow p {
    max-width: none !important;
    font-size: clamp(8.4px, 2.25vw, 9.8px) !important;
    line-height: 1.32 !important;
  }

  .pixel-block-layer {
    inset: -.04em -.02em !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) clamp(88px, 25.5vw, 100px) !important;
  }
  .brand-name {
    font-size: clamp(14.8px, 4.15vw, 17.6px) !important;
  }
  .binary-link-header {
    font-size: clamp(7.5px, 2.05vw, 8.7px) !important;
  }
}

@media (max-width: 380px), (max-height: 680px) {
  :root {
    --gvd-header-h: calc(clamp(60px, 8.7vh, 66px) + env(safe-area-inset-top));
    --gvd-scene-bottom: calc(clamp(56px, 8.2vh, 64px) + env(safe-area-inset-bottom));
  }
  .site-header {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    gap: 6px !important;
  }
  .brand-lockup {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 6px !important;
  }
  .brand-mark { width: 28px !important; height: 18px !important; }
  .brand-name { font-size: clamp(13.8px, 4.05vw, 15.5px) !important; }
  .brand-role { font-size: 5.2px !important; }
  .binary-link-header { font-size: 7.1px !important; }
  .site-location { font-size: 4.5px !important; }

  .station-work .work-title-segment { font-size: clamp(13.5px, 4vw, 15.5px) !important; }
  .station-work .work-row-meta { font-size: clamp(6.1px, 1.72vw, 6.8px) !important; }
  .station-work .work-row:hover .work-inline-media,
  .station-work .work-row.is-active .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media {
    height: clamp(28px, 4.4vh, 34px) !important;
    max-height: clamp(28px, 4.4vh, 34px) !important;
  }

  .process-flow { gap: 12px 10px !important; }
  .process-flow h3 { font-size: clamp(14px, 4vw, 16px) !important; }
  .process-flow p { font-size: clamp(7.2px, 2.05vw, 8.2px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-block-layer { display: none !important; }
}

/* v41.1 - public work is one full-width column, never the legacy split grid. */
.station-work .work-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* v41.2 - neutralize the legacy work-row columns and segment placement. */
.station-work .work-row,
.station-work .work-row.is-active,
.station-work .work-row.is-mobile-open {
  grid-template-columns: minmax(0, 1fr) !important;
}
.station-work .work-title {
  min-height: 0 !important;
  column-gap: clamp(4px, .4vw, 8px) !important;
}
.station-work .work-title-before,
.station-work .work-title-after {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: auto !important;
}
@media (max-width: 900px) {
  .station-work .work-title-before,
  .station-work .work-title-after {
    justify-self: stretch !important;
  }
}


/* ---- src/v42-final.css ---- */
/* =====================================================================
   GVD v42 - Locomotive-style pixel loading, open mobile work media,
   brand-consistent work selector and lighter depth rendering.
   ===================================================================== */

:root {
  --gvd-modal-gutter: clamp(22px, 5vw, 84px);
}

/* PIXEL TYPE ---------------------------------------------------------
   Each fragment is a clipped clone of the live Grtsk title. The browser
   renders the same DOM glyphs, so the font and title geometry never swap. */
.pixel-block-layer,
.pixel-fragment-layer,
.pixel-text-canvas,
.pixel-text-canvas-v42 {
  display: none !important;
}
.pixel-text-target-v42 {
  position: relative !important;
  isolation: isolate !important;
}
.pixel-fragment-layer-v42 {
  position: absolute !important;
  z-index: 9 !important;
  inset: 0 auto auto 0 !important;
  display: block !important;
  pointer-events: none !important;
  overflow: hidden !important;
  contain: strict !important;
  transform: translateZ(0) !important;
}
.pixel-fragment-layer-v42[hidden] {
  display: none !important;
}
.pixel-fragment-v42 {
  position: absolute !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  transform-origin: center !important;
  filter: blur(var(--pixel-fragment-blur, 0)) contrast(1.16) !important;
  transition:
    opacity 38ms steps(1, end) var(--fragment-delay, 0ms),
    transform 70ms steps(2, end) var(--fragment-delay, 0ms),
    filter 64ms steps(2, end) !important;
}
.pixel-fragment-copy-v42 {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}
.pixel-fragment-copy-v42,
.pixel-fragment-copy-v42 * {
  font-family: var(--gvd-font) !important;
  font-style: normal !important;
  font-synthesis: none !important;
}
.pixel-text-target-v42.is-pixel-rendering > span:not(.pixel-fragment-layer-v42) {
  opacity: 0 !important;
}
.pixel-text-target-v42 > span:not(.pixel-fragment-layer-v42) {
  transition: opacity 55ms linear !important;
}

/* HEADER ------------------------------------------------------------- */
.brand-role,
.hero-role,
.preloader-copy-role {
  font-family: var(--gvd-font) !important;
  font-style: normal !important;
  font-weight: 270 !important;
  font-variation-settings: "wght" 270, "wdth" 104, "slnt" 0 !important;
  font-synthesis: none !important;
}
.brand-role {
  font-size: clamp(9.5px, .72vw, 11.5px) !important;
  line-height: 1.05 !important;
  min-height: 1em !important;
  opacity: .92 !important;
}
.site-header {
  overflow: visible !important;
}

/* PUBLIC WORKS ------------------------------------------------------- */
.station-work .work-layout {
  gap: clamp(8px, 1.15vh, 14px) !important;
}
.station-work .work-list {
  align-content: center !important;
  gap: clamp(4px, .65vh, 8px) !important;
}
.station-work .work-row,
.station-work .work-row.is-active,
.station-work .work-row.is-mobile-open {
  padding: clamp(4px, .55vh, 7px) 0 !important;
  gap: clamp(3px, .45vh, 6px) !important;
  overflow: visible !important;
}
.station-work .work-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: clamp(8px, .9vw, 16px) !important;
  width: 100% !important;
  min-width: 0 !important;
}
.station-work .work-title-before {
  grid-column: 1 !important;
  text-align: right !important;
}
.station-work .work-inline-media {
  grid-column: 2 !important;
  position: relative !important;
  inset: auto !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: clamp(48px, 6.3vh, 70px) !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  border-radius: 0 clamp(20px, 2vw, 34px) 0 0 !important;
  transform: translateZ(0) !important;
  transition:
    width .48s cubic-bezier(.22,.82,.2,1),
    max-width .48s cubic-bezier(.22,.82,.2,1),
    opacity .12s linear !important;
}
.station-work .work-title-after {
  grid-column: 3 !important;
  text-align: left !important;
}
.station-work .work-row:hover .work-inline-media,
.station-work .work-row:focus-visible .work-inline-media,
.station-work .work-row.is-active .work-inline-media,
.station-work .work-row.is-mobile-open .work-inline-media {
  width: clamp(180px, 18vw, 300px) !important;
  max-width: clamp(180px, 18vw, 300px) !important;
  opacity: 1 !important;
}
.station-work .work-title-segment {
  min-width: 0 !important;
  font-size: clamp(23px, min(2.05vw, 3.7vh), 36px) !important;
  line-height: .92 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}
.station-work .work-inline-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated !important;
}
.station-work .work-row[data-pixel-stage="5"] .work-inline-canvas {
  image-rendering: auto !important;
}
.station-work .work-row-meta {
  margin: 0 !important;
  gap: clamp(12px, 1.5vw, 24px) !important;
  font-size: clamp(8.6px, .62vw, 10.8px) !important;
  line-height: 1.28 !important;
}

/* WORK SELECTOR ------------------------------------------------------ */
.modal-layer {
  background: transparent !important;
  place-items: stretch !important;
}
.modal-backdrop {
  background: rgba(246,245,241,.96) !important;
  backdrop-filter: none !important;
}
.work-modal-panel {
  align-self: center !important;
  justify-self: center !important;
  width: min(1120px, calc(100vw - (var(--gvd-modal-gutter) * 2))) !important;
  padding: clamp(28px, 5.5vw, 74px) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: translate3d(0, 56px, -240px) scale(.94) !important;
  transition: transform .5s cubic-bezier(.22,.8,.2,1), opacity .26s linear !important;
}
.modal-layer.is-open .work-modal-panel {
  transform: translate3d(0,0,0) scale(1) !important;
}
.work-modal-panel::before {
  content: "GVD / PUBLIC OUTPUT" !important;
  display: block !important;
  margin-bottom: clamp(18px, 3vh, 34px) !important;
  font-family: var(--gvd-font) !important;
  font-size: clamp(8px, .65vw, 11px) !important;
  font-weight: 430 !important;
  font-variation-settings: "wght" 430, "wdth" 105, "slnt" 0 !important;
  letter-spacing: .16em !important;
}
.work-modal-panel > .scene-label {
  display: none !important;
}
.work-modal-panel h2 {
  max-width: 10ch !important;
  margin: 0 0 clamp(30px, 5vh, 62px) !important;
  font-family: var(--gvd-font) !important;
  font-size: clamp(58px, 8.2vw, 132px) !important;
  line-height: .82 !important;
  font-weight: 810 !important;
  font-variation-settings: "wght" 810, "wdth" 150, "slnt" 0 !important;
  letter-spacing: -.055em !important;
}
.work-modal-panel > a {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: min(780px, 100%) !important;
  min-height: auto !important;
  padding: clamp(9px, 1.4vh, 15px) 0 !important;
  border: 0 !important;
  color: var(--gvd-ink) !important;
  font-family: var(--gvd-font) !important;
  font-size: clamp(27px, 3vw, 52px) !important;
  font-weight: 720 !important;
  font-variation-settings: "wght" 720, "wdth" 132, "slnt" 0 !important;
  letter-spacing: -.035em !important;
  text-decoration: none !important;
}
.work-modal-panel > a::before {
  content: "✦" !important;
  position: absolute !important;
  left: -1.5em !important;
  opacity: 0 !important;
  transform: scale(.3) rotate(-45deg) !important;
  transition: opacity .18s, transform .34s cubic-bezier(.22,.8,.2,1) !important;
}
.work-modal-panel > a:hover,
.work-modal-panel > a:focus-visible {
  padding-left: clamp(12px, 1.2vw, 20px) !important;
}
.work-modal-panel > a:hover::before,
.work-modal-panel > a:focus-visible::before {
  opacity: 1 !important;
  transform: scale(1) rotate(0) !important;
}
.work-modal-panel > a b {
  font-family: var(--gvd-font) !important;
  font-size: .5em !important;
  font-weight: 430 !important;
}
.modal-close {
  top: clamp(18px, 3vw, 38px) !important;
  right: clamp(18px, 3vw, 38px) !important;
  width: clamp(42px, 4vw, 58px) !important;
  height: clamp(42px, 4vw, 58px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gvd-ink) !important;
  font-family: var(--gvd-font) !important;
  font-size: clamp(30px, 3vw, 44px) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

/* More visible ambient field without adding DOM nodes. */
#depth-canvas {
  opacity: .92 !important;
}

@media (max-width: 960px) {
  .station-work .work-layout {
    gap: clamp(6px, .8vh, 9px) !important;
  }
  .station-work .work-list {
    grid-template-rows: repeat(3, auto) !important;
    gap: clamp(5px, .7vh, 8px) !important;
  }
  .station-work .work-row,
  .station-work .work-row.is-mobile-open {
    padding: clamp(3px, .4vh, 5px) 0 !important;
    gap: 3px !important;
  }
  .station-work .work-title {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 3px !important;
  }
  .station-work .work-title-before {
    grid-column: 1 !important;
    grid-row: 1 !important;
    text-align: left !important;
  }
  .station-work .work-inline-media,
  .station-work .work-row:hover .work-inline-media,
  .station-work .work-row:focus-visible .work-inline-media,
  .station-work .work-row.is-active .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: clamp(42px, 5.6vh, 56px) !important;
    max-height: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    border-radius: 0 clamp(20px, 7vw, 34px) 0 0 !important;
    transition: none !important;
  }
  .station-work .work-title-after {
    grid-column: 1 !important;
    grid-row: 3 !important;
    text-align: left !important;
  }
  .station-work .work-title-segment {
    font-size: clamp(16.5px, 4.7vw, 21px) !important;
    line-height: .92 !important;
  }
  .station-work .work-row-meta {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    font-size: clamp(6.7px, 1.78vw, 7.9px) !important;
    line-height: 1.22 !important;
  }

  .work-modal-panel {
    width: calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane)) !important;
    padding: clamp(22px, 7vw, 34px) 0 !important;
  }
  .work-modal-panel h2 {
    max-width: 8ch !important;
    font-size: clamp(48px, 15vw, 76px) !important;
  }
  .work-modal-panel > a {
    font-size: clamp(26px, 8vw, 40px) !important;
  }
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) clamp(104px, 29vw, 122px) !important;
    column-gap: clamp(8px, 2.2vw, 11px) !important;
  }
  .brand-lockup {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .brand-copy {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .brand-name {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
  .header-actions {
    width: 100% !important;
    min-width: 0 !important;
  }
  .binary-link-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-width: 0 !important;
  }
  .binary-link-header .binary-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  .brand-lockup {
    grid-template-columns: clamp(30px, 7.8vw, 35px) minmax(0, 1fr) !important;
  }
  .brand-name {
    font-size: clamp(15.5px, 4.25vw, 18px) !important;
  }
  .brand-role {
    font-size: clamp(7.2px, 1.9vw, 8.5px) !important;
    line-height: 1.05 !important;
    opacity: .9 !important;
  }
  .binary-link-header {
    font-size: clamp(8px, 2.05vw, 9px) !important;
  }
  .site-location {
    font-size: clamp(5.2px, 1.35vw, 6px) !important;
  }
}

@media (max-width: 390px), (max-height: 680px) {
  .brand-role {
    font-size: 7px !important;
  }
  .station-work .work-inline-media,
  .station-work .work-row.is-mobile-open .work-inline-media {
    height: clamp(36px, 5.1vh, 44px) !important;
  }
  .station-work .work-title-segment {
    font-size: clamp(14.8px, 4.35vw, 17px) !important;
  }
  .station-work .work-row-meta {
    font-size: clamp(6px, 1.65vw, 6.8px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-fragment-layer-v42 { display: none !important; }
  .pixel-text-target-v42 > span { opacity: 1 !important; }
}


/* ---- src/v43-final.css ---- */
/* =====================================================================
   GVD v43 - desktop readability, continuous pixel in/out, mobile tasks.
   ===================================================================== */

/* Smooth pixel dissolve built from clipped clones of the same live Grtsk DOM
   title. It never changes font metrics or participates in layout. */
.pixel-fragment-layer-v42,
.pixel-block-layer,
.pixel-text-canvas,
.pixel-text-canvas-v42 {
  display: none !important;
}
.pixel-text-target-v43 {
  position: relative !important;
  isolation: isolate !important;
  contain: paint !important;
}
.pixel-text-target-v43 > span:not(.pixel-fragment-layer-v43) {
  opacity: var(--pixel-live-opacity, 1) !important;
  transition: none !important;
}
.pixel-fragment-layer-v43 {
  position: absolute !important;
  z-index: 9 !important;
  inset: 0 auto auto 0 !important;
  display: block !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 0;
  transform-origin: center !important;
  backface-visibility: hidden !important;
  will-change: opacity, filter, transform !important;
}
.pixel-fragment-layer-v43[hidden] {
  display: none !important;
}
.pixel-fragment-v43 {
  position: absolute !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  transform-origin: center !important;
  backface-visibility: hidden !important;
  will-change: opacity, transform !important;
}
.pixel-fragment-copy-v43 {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}
.pixel-fragment-copy-v43,
.pixel-fragment-copy-v43 * {
  font-family: var(--gvd-font) !important;
  font-style: normal !important;
  font-synthesis: none !important;
}

/* Readable desktop copy. Values stay height-aware so short laptops still fit
   inside a single Z station instead of triggering a page scroll. */
@media (min-width: 961px) {
  .scene-label {
    font-size: clamp(10px, min(.72vw, 1.45vh), 12px) !important;
  }
  .brand-role {
    font-size: clamp(11px, min(.78vw, 1.55vh), 13px) !important;
  }
  .site-location {
    font-size: clamp(8px, min(.58vw, 1.1vh), 10px) !important;
  }
  .hero-description {
    font-size: clamp(16px, min(1.02vw, 2.1vh), 19px) !important;
    line-height: 1.48 !important;
  }
  .hero-audience {
    font-size: clamp(15px, min(.94vw, 1.9vh), 18px) !important;
  }
  .impact-item p b {
    font-size: clamp(19px, min(1.3vw, 2.55vh), 23px) !important;
  }
  .impact-item p span {
    font-size: clamp(14px, min(.94vw, 1.85vh), 16.5px) !important;
    line-height: 1.38 !important;
  }
  .station-work .work-row-meta {
    font-size: clamp(11px, min(.76vw, 1.5vh), 13px) !important;
    line-height: 1.34 !important;
  }
  .capability-thesis {
    font-size: clamp(22px, min(1.72vw, 3.25vh), 31px) !important;
  }
  .capability-intro,
  .technology-intro {
    font-size: clamp(15px, min(1vw, 1.95vh), 18px) !important;
    line-height: 1.47 !important;
  }
  .systems-note {
    font-size: clamp(9px, min(.62vw, 1.2vh), 11px) !important;
    line-height: 1.5 !important;
  }
  .capability-list li {
    font-size: clamp(15px, min(1vw, 1.9vh), 18px) !important;
    line-height: 1.24 !important;
  }
  .task-item,
  .tasks-list span {
    font-size: clamp(16px, min(1.08vw, 2.05vh), 20px) !important;
    line-height: 1.18 !important;
  }
  .experience-column p {
    font-size: clamp(15.5px, min(1.02vw, 2vh), 18px) !important;
    line-height: 1.5 !important;
  }
  .collaboration-option p,
  .process-flow p,
  .contact-main > p:not(.scene-label) {
    font-size: clamp(14.5px, min(.98vw, 1.9vh), 17px) !important;
    line-height: 1.46 !important;
  }
  .collaboration-option .budget,
  .site-footer > div:first-child span,
  .social-links a {
    font-size: clamp(10.5px, min(.72vw, 1.4vh), 12.5px) !important;
  }
}

/* Mobile Tasks: a measured four-row / two-column system. Long labels use a
   narrower Grtsk axis and explicit grid cells, so no item can collide with the
   next one or with the navigation rail. */
@media (max-width: 900px) {
  .station-tasks .tasks-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, auto) !important;
    align-content: center !important;
    gap: clamp(13px, 2vh, 19px) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .station-tasks .scene-header {
    width: 100% !important;
    max-width: calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane)) !important;
    margin: 0 !important;
  }
  .station-tasks .scene-title {
    max-width: 12ch !important;
    font-size: clamp(31px, 9.1vw, 42px) !important;
    line-height: .88 !important;
  }
  .station-tasks .tasks-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, auto) !important;
    grid-auto-flow: row !important;
    align-content: center !important;
    gap: clamp(9px, 1.25vh, 13px) clamp(15px, 4.2vw, 22px) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 clamp(6px, 1.8vw, 10px) 0 0 !important;
    overflow: visible !important;
    border: 0 !important;
  }
  .station-tasks .task-item,
  .station-tasks .tasks-list > span {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: var(--gvd-font) !important;
    font-size: clamp(12.2px, 3.45vw, 15.4px) !important;
    font-weight: 610 !important;
    font-variation-settings: "wght" 610, "wdth" 112, "slnt" 0 !important;
    letter-spacing: -.018em !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  .station-tasks .task-item::before,
  .station-tasks .task-item::after,
  .station-tasks .tasks-list > span::before,
  .station-tasks .tasks-list > span::after {
    display: none !important;
    content: none !important;
  }
  .station-tasks .task-item:nth-child(odd),
  .station-tasks .task-item:nth-child(even) {
    padding: 0 !important;
    border: 0 !important;
  }
  .station-tasks .task-item:nth-child(1) { grid-area: 1 / 1; }
  .station-tasks .task-item:nth-child(2) { grid-area: 1 / 2; }
  .station-tasks .task-item:nth-child(3) { grid-area: 2 / 1; }
  .station-tasks .task-item:nth-child(4) { grid-area: 2 / 2; }
  .station-tasks .task-item:nth-child(5) { grid-area: 3 / 1; }
  .station-tasks .task-item:nth-child(6) { grid-area: 3 / 2; }
  .station-tasks .task-item:nth-child(7) { grid-area: 4 / 1; }
  .station-tasks .task-item:nth-child(8) { grid-area: 4 / 2; }
}

@media (max-width: 390px), (max-height: 700px) {
  .station-tasks .tasks-layout {
    gap: clamp(9px, 1.45vh, 13px) !important;
  }
  .station-tasks .scene-title {
    font-size: clamp(28px, 8.4vw, 34px) !important;
  }
  .station-tasks .tasks-list {
    gap: clamp(6px, .85vh, 9px) clamp(11px, 3.4vw, 16px) !important;
  }
  .station-tasks .task-item,
  .station-tasks .tasks-list > span {
    font-size: clamp(10.6px, 3.02vw, 12.7px) !important;
    line-height: 1.06 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-fragment-layer-v43 { display: none !important; }
  .pixel-text-target-v43 > span:not(.pixel-fragment-layer-v43) { opacity: 1 !important; }
}


/* ---- src/v44-final.css ---- */
/* =====================================================================
   GVD v44 - Locomotive-scale typography, unclipped titles, raster pixel
   dissolve, repaired header geometry and stronger signal glitch.
   ===================================================================== */

:root {
  --v44-header-x: clamp(34px, 4.35vw, 88px);
  --v44-title-pad: clamp(10px, .7vw, 16px);
}

/* Retire every older title-effect layer. v44 uses one raster canvas made from
   the live Grtsk title without changing the DOM metrics or font axes. */
.pixel-fragment-layer-v43,
.pixel-fragment-v43,
.pixel-fragment-layer-v42,
.pixel-fragment-v42,
.pixel-block-layer,
.pixel-text-canvas,
.pixel-text-canvas-v42 {
  display: none !important;
}

.signal-title,
.pixel-raster-target-v44 {
  position: relative !important;
  isolation: isolate !important;
  contain: none !important;
  overflow: visible !important;
  clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

.pixel-raster-target-v44 > span {
  opacity: var(--pixel-live-opacity, 1) !important;
  transition: none !important;
}

.pixel-raster-layer-v44 {
  position: absolute !important;
  z-index: 12 !important;
  left: calc(var(--pixel-pad, 16px) * -1) !important;
  top: calc(var(--pixel-pad, 16px) * -1) !important;
  display: block !important;
  width: calc(100% + (var(--pixel-pad, 16px) * 2)) !important;
  height: calc(100% + (var(--pixel-pad, 16px) * 2)) !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none !important;
  image-rendering: pixelated;
  transform-origin: center center !important;
  backface-visibility: hidden !important;
  will-change: opacity, filter, transform !important;
}

/* Titles must never crop ascenders, descenders or the pixel layer. */
.hero-name,
.scene-title,
.contact-title,
.scene-header,
.capability-heading,
.station-shell,
.station-shell-wide {
  overflow: visible !important;
  clip-path: none !important;
}

.hero-name,
.scene-title,
.contact-title {
  padding-top: .10em !important;
  padding-bottom: .14em !important;
  margin-top: -.10em !important;
  margin-bottom: -.10em !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Locomotive-like desktop hierarchy: an unmistakable H1 and large editorial
   section titles, while long titles scale down continuously instead of clip. */
@media (min-width: 961px) {
  :root {
    --gvd-content-max: min(1760px, calc(100vw - (var(--v44-header-x) * 2) - var(--gvd-nav-lane))) !important;
  }

  .site-header {
    height: auto !important;
    min-height: clamp(92px, 11vh, 126px) !important;
    padding: clamp(22px, 2.8vh, 34px) var(--v44-header-x) 14px !important;
    overflow: visible !important;
  }

  .brand-lockup {
    grid-template-columns: clamp(58px, 4.2vw, 82px) max-content !important;
    column-gap: clamp(16px, 1.25vw, 26px) !important;
    overflow: visible !important;
  }
  .brand-mark {
    width: clamp(58px, 4.2vw, 82px) !important;
    height: clamp(33px, 2.4vw, 47px) !important;
  }
  .brand-copy { gap: clamp(7px, .65vh, 10px) !important; overflow: visible !important; }
  .brand-name {
    font-size: clamp(31px, 2.55vw, 50px) !important;
    line-height: .78 !important;
  }
  .brand-role {
    font-size: clamp(12px, .92vw, 17px) !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }

  .header-actions {
    position: relative !important;
    width: clamp(252px, 18.5vw, 356px) !important;
    max-width: calc(100vw - (var(--v44-header-x) * 2) - 360px) !important;
    gap: clamp(10px, 1.1vh, 15px) !important;
    overflow: visible !important;
  }
  .binary-link-header {
    width: 100% !important;
    padding: 0 0 clamp(10px, 1.15vh, 14px) !important;
    gap: clamp(14px, 1.1vw, 22px) !important;
    font-size: clamp(17px, 1.25vw, 24px) !important;
    line-height: 1 !important;
    font-weight: 610 !important;
    font-variation-settings: "wght" 610, "wdth" 118, "slnt" 0 !important;
    overflow: visible !important;
  }
  .binary-link-header .binary-label {
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .site-location {
    position: static !important;
    inset: auto !important;
    align-self: flex-end !important;
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: clamp(10px, .72vw, 13px) !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
  }

  .station-hero .station-shell {
    width: min(100%, 1760px) !important;
    max-width: min(1760px, calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane))) !important;
  }
  .hero-name {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    font-size: clamp(112px, min(8.75vw, 16.2vh), 178px) !important;
    line-height: .80 !important;
    letter-spacing: -.06em !important;
    font-weight: 830 !important;
    font-variation-settings: "wght" 830, "wdth" 160, "slnt" 0 !important;
  }
  .hero-role {
    font-size: clamp(39px, min(3.45vw, 6.6vh), 68px) !important;
    line-height: .94 !important;
  }

  .scene-title.title-short,
  .contact-title.title-short {
    font-size: clamp(88px, min(6.8vw, 12.4vh), 136px) !important;
  }
  .scene-title.title-medium,
  .contact-title.title-medium {
    font-size: clamp(76px, min(5.9vw, 10.8vh), 118px) !important;
  }
  .scene-title.title-long,
  .contact-title.title-long {
    font-size: clamp(65px, min(5.05vw, 9.3vh), 101px) !important;
  }
  .scene-title.title-xlong,
  .contact-title.title-xlong {
    font-size: clamp(54px, min(4.25vw, 7.9vh), 84px) !important;
  }

  .scene-title,
  .contact-title {
    line-height: .84 !important;
    max-width: min(100%, 18ch) !important;
    text-wrap: balance !important;
  }
  .station-impact .scene-title,
  .station-work .scene-title,
  .station-collaboration .scene-title {
    max-width: 100% !important;
  }
  .capability-heading .scene-title,
  .station-tasks .scene-title,
  .station-experience .scene-title,
  .station-process .scene-title {
    max-width: 13ch !important;
  }

  /* Slightly stronger body hierarchy to match the larger title system. */
  .hero-description { font-size: clamp(17px, 1.08vw, 21px) !important; }
  .hero-audience { font-size: clamp(17px, 1.1vw, 22px) !important; }
  .capability-intro,
  .technology-intro,
  .experience-column p,
  .process-flow p,
  .collaboration-option p,
  .contact-main > p:not(.scene-label) {
    font-size: clamp(16px, 1.02vw, 20px) !important;
  }
}

/* Keep the location in its header cell at every breakpoint. */
.header-actions,
.site-location { min-width: 0 !important; }
.site-location {
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  text-align: right !important;
}

/* Brighter, more visible signal glitch on the logo and its two text lines. */
.brand-name,
.brand-role { position: relative !important; isolation: isolate !important; }
.brand-name::before,
.brand-name::after,
.brand-role::before,
.brand-role::after {
  content: attr(data-text) !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
}
.brand-lockup.is-signal-glitch .brand-symbol {
  filter: contrast(1.55) brightness(1.16) drop-shadow(3px 0 0 rgba(255,35,35,.78)) drop-shadow(-3px 0 0 rgba(0,196,255,.75)) !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-a {
  opacity: .95 !important;
  transform: translate3d(5px,-1px,0) scaleX(1.04) !important;
  filter: brightness(1.35) saturate(1.6) !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-b {
  opacity: .90 !important;
  transform: translate3d(-5px,1px,0) scaleX(.98) !important;
  filter: brightness(1.28) saturate(1.5) !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-c {
  opacity: .76 !important;
  transform: translate3d(2px,2px,0) !important;
}
.brand-lockup.is-signal-glitch .brand-name::before,
.brand-lockup.is-signal-glitch .brand-role::before {
  opacity: .92 !important;
  color: currentColor !important;
  transform: translate3d(4px,-1px,0) !important;
  clip-path: inset(8% 0 48% 0) !important;
  mix-blend-mode: multiply !important;
}
.brand-lockup.is-signal-glitch .brand-name::after,
.brand-lockup.is-signal-glitch .brand-role::after {
  opacity: .88 !important;
  color: currentColor !important;
  transform: translate3d(-4px,1px,0) !important;
  clip-path: inset(50% 0 6% 0) !important;
  mix-blend-mode: multiply !important;
}

@media (max-width: 960px) {
  .pixel-raster-layer-v44 { --pixel-pad: 12px; }
  .hero-name,
  .scene-title,
  .contact-title {
    padding-top: .08em !important;
    padding-bottom: .13em !important;
  }
  .site-location {
    position: static !important;
    transform: none !important;
    overflow: visible !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-raster-layer-v44 { display: none !important; }
  .pixel-raster-target-v44 > span { opacity: 1 !important; }
}


/* ---- src/v45-final.css ---- */
/* =====================================================================
   GVD v45 - final layout repair, monochrome signal-loss glitch and
   stepped progressive pixel loading for every primary title.
   ===================================================================== */

:root {
  --v45-edge: clamp(28px, 4.2vw, 82px);
  --v45-nav-safe: clamp(46px, 4.6vw, 72px);
}

/* Retire all previous title renderers. */
.pixel-raster-layer-v44,
.pixel-fragment-layer-v43,
.pixel-fragment-v43,
.pixel-fragment-layer-v42,
.pixel-fragment-v42,
.pixel-block-layer,
.pixel-text-canvas,
.pixel-text-canvas-v42 {
  display: none !important;
}

.signal-title,
.pixel-raster-target-v45 {
  position: relative !important;
  isolation: isolate !important;
  contain: none !important;
  overflow: visible !important;
  clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

.pixel-raster-target-v45 > span {
  opacity: var(--pixel-live-opacity, 1) !important;
  transition: none !important;
}

.pixel-raster-layer-v45 {
  position: absolute !important;
  z-index: 16 !important;
  left: calc(var(--pixel-pad, 24px) * -1) !important;
  top: calc(var(--pixel-pad, 24px) * -1) !important;
  width: calc(100% + (var(--pixel-pad, 24px) * 2)) !important;
  height: calc(100% + (var(--pixel-pad, 24px) * 2)) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  transform-origin: center !important;
  backface-visibility: hidden !important;
  will-change: opacity !important;
}
.pixel-raster-layer-v45[hidden] { display: none !important; }

/* No title may crop its own glyphs or raster layer. */
.hero-name,
.scene-title,
.contact-title,
.scene-header,
.capability-heading,
.station-shell,
.station-shell-wide,
.hero-shell,
.experience-layout,
.process-layout {
  overflow: visible !important;
  clip-path: none !important;
}
.hero-name,
.scene-title,
.contact-title {
  padding-block: .11em .16em !important;
  margin-block: -.11em -.08em !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------------------------------------------------------------------
   HEADER - protected left and right cells, no off-screen action/location.
   --------------------------------------------------------------------- */
.site-header {
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto) !important;
  align-items: start !important;
  gap: clamp(24px, 3vw, 54px) !important;
  padding-inline: var(--v45-edge) calc(var(--v45-edge) + var(--v45-nav-safe)) !important;
  overflow: visible !important;
}
.brand-lockup,
.brand-mark,
.brand-copy,
.header-actions {
  min-width: 0 !important;
  overflow: visible !important;
}
.header-actions {
  justify-self: end !important;
  align-items: stretch !important;
  width: clamp(220px, 18vw, 330px) !important;
  max-width: 100% !important;
}
.binary-link-header {
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: clamp(15px, 1.08vw, 21px) !important;
  font-weight: 620 !important;
  font-variation-settings: "wght" 620, "wdth" 116, "slnt" 0 !important;
}
.binary-link-header .binary-label {
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.site-location {
  position: static !important;
  inset: auto !important;
  align-self: end !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-align: right !important;
}

/* ---------------------------------------------------------------------
   MONOCHROME SIGNAL LOSS - horizontal tearing and compression, no RGB.
   --------------------------------------------------------------------- */
.brand-name,
.brand-role { position: relative !important; isolation: isolate !important; }
.brand-name::before,
.brand-name::after,
.brand-role::before,
.brand-role::after {
  content: attr(data-text) !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  color: currentColor !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
}
.brand-lockup.is-signal-glitch {
  animation: v45-signal-body 430ms steps(1, end) both !important;
}
.brand-lockup.is-signal-glitch .brand-symbol {
  filter: contrast(2.15) brightness(.76) !important;
  animation: v45-symbol-tear 430ms steps(1, end) both !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-a,
.brand-lockup.is-signal-glitch .brand-symbol-echo-b,
.brand-lockup.is-signal-glitch .brand-symbol-echo-c {
  opacity: .30 !important;
  filter: grayscale(1) contrast(2.4) brightness(.58) !important;
  mix-blend-mode: multiply !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-a {
  transform: translate3d(7px,-1px,0) skewX(-8deg) scaleX(1.08) !important;
  clip-path: inset(10% 0 58% 0) !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-b {
  transform: translate3d(-5px,1px,0) skewX(10deg) scaleX(.95) !important;
  clip-path: inset(44% 0 22% 0) !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-c {
  transform: translate3d(3px,0,0) scaleX(1.12) !important;
  clip-path: inset(74% 0 4% 0) !important;
}
.brand-lockup.is-signal-glitch .brand-name::before,
.brand-lockup.is-signal-glitch .brand-role::before {
  opacity: .90 !important;
  transform: translate3d(7px,-1px,0) skewX(-7deg) scaleX(1.04) !important;
  clip-path: inset(7% 0 59% 0) !important;
  filter: contrast(1.8) !important;
}
.brand-lockup.is-signal-glitch .brand-name::after,
.brand-lockup.is-signal-glitch .brand-role::after {
  opacity: .76 !important;
  transform: translate3d(-6px,1px,0) skewX(8deg) scaleX(.96) !important;
  clip-path: inset(55% 0 8% 0) !important;
  filter: contrast(2.2) !important;
}
@keyframes v45-signal-body {
  0%,100% { transform: none; filter: none; }
  12% { transform: translateX(2px) skewX(-1deg); filter: contrast(1.5); }
  20% { transform: translateX(-4px) scaleX(1.012); filter: contrast(2.2) brightness(.82); }
  34% { transform: translateX(3px) skewX(1.4deg); filter: contrast(1.7); }
  48% { transform: translateX(-1px) scaleX(.992); filter: contrast(2.4) brightness(.76); }
  62% { transform: translateX(4px) skewX(-1.1deg); filter: contrast(1.55); }
  78% { transform: translateX(-2px); filter: contrast(2); }
}
@keyframes v45-symbol-tear {
  0%,100% { transform: none; }
  16% { transform: translateX(5px) skewX(-9deg) scaleX(1.06); }
  30% { transform: translateX(-4px) skewX(8deg) scaleX(.94); }
  47% { transform: translateX(3px) scaleX(1.11); }
  65% { transform: translateX(-2px) skewX(-5deg); }
  82% { transform: translateX(1px) scaleX(.98); }
}

/* ---------------------------------------------------------------------
   DESKTOP GEOMETRY - large titles but strict non-overlapping columns.
   --------------------------------------------------------------------- */
@media (min-width: 961px) {
  :root {
    --gvd-content-max: min(1760px, calc(100vw - (var(--v45-edge) * 2) - var(--gvd-nav-lane))) !important;
  }

  .site-header {
    min-height: clamp(94px, 11vh, 126px) !important;
    padding-top: clamp(24px, 2.7vh, 34px) !important;
    padding-bottom: 14px !important;
  }
  .brand-lockup {
    grid-template-columns: clamp(58px, 4.1vw, 80px) max-content !important;
    column-gap: clamp(16px, 1.2vw, 24px) !important;
  }
  .brand-mark { width: clamp(58px, 4.1vw, 80px) !important; height: clamp(34px, 2.4vw, 47px) !important; }
  .brand-name { font-size: clamp(31px, 2.5vw, 49px) !important; line-height: .79 !important; }
  .brand-role { font-size: clamp(12px, .88vw, 16px) !important; line-height: 1 !important; opacity: 1 !important; }
  .site-location { font-size: clamp(9.5px, .66vw, 12px) !important; letter-spacing: .08em !important; }

  .station-hero .station-shell {
    width: min(100%, 1720px) !important;
    max-width: calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane)) !important;
  }
  .hero-name {
    font-stretch: 160% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    font-size: clamp(96px, min(8vw, 14.6vh), 158px) !important;
    line-height: .82 !important;
    letter-spacing: -.057em !important;
  }

  .station-experience .experience-layout {
    grid-template-columns: minmax(390px, .82fr) minmax(0, 1.18fr) !important;
    gap: clamp(62px, 6.1vw, 112px) !important;
    align-items: center !important;
  }
  .station-experience .scene-header {
    width: 100% !important;
    max-width: 650px !important;
    min-width: 0 !important;
  }
  .station-experience .scene-title {
    font-stretch: 148% !important;
    width: 100% !important;
    max-width: 10.4ch !important;
    font-size: clamp(50px, min(4.05vw, 8.5vh), 78px) !important;
    line-height: .86 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  .station-experience .experience-copy {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(30px, 3vw, 56px) !important;
    width: 100% !important;
    max-width: 900px !important;
  }
  .station-experience .experience-column p {
    font-size: clamp(15px, min(1vw, 1.95vh), 19px) !important;
    line-height: 1.48 !important;
  }

  .station-process .process-layout {
    grid-template-columns: minmax(350px, .72fr) minmax(0, 1.28fr) !important;
    gap: clamp(72px, 7vw, 128px) !important;
    align-items: center !important;
  }
  .station-process .scene-header {
    width: 100% !important;
    max-width: 610px !important;
    min-width: 0 !important;
  }
  .station-process .scene-title {
    font-stretch: 148% !important;
    max-width: 8.8ch !important;
    font-size: clamp(58px, min(4.7vw, 9.2vh), 90px) !important;
    line-height: .86 !important;
  }
  .station-process .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(32px, 4.2vh, 54px) clamp(40px, 4.4vw, 76px) !important;
    width: 100% !important;
    max-width: 920px !important;
  }
  .station-process .process-flow li {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    padding: 0 !important;
  }
  .station-process .process-flow h3 {
    font-size: clamp(25px, 1.8vw, 35px) !important;
    line-height: .96 !important;
  }
  .station-process .process-flow p {
    max-width: 26ch !important;
    font-size: clamp(14px, .92vw, 17px) !important;
    line-height: 1.44 !important;
  }
}

@media (min-width: 961px) and (max-width: 1280px) {
  .station-experience .experience-layout {
    grid-template-columns: minmax(330px, .76fr) minmax(0, 1.24fr) !important;
    gap: 46px !important;
  }
  .station-experience .scene-title {
    font-size: clamp(45px, 4.4vw, 62px) !important;
  }
  .station-process .process-layout {
    grid-template-columns: minmax(300px, .68fr) minmax(0, 1.32fr) !important;
    gap: 48px !important;
  }
  .station-process .scene-title {
    font-size: clamp(48px, 4.8vw, 68px) !important;
  }
}

/* ---------------------------------------------------------------------
   MOBILE - logo never crops, task grid never collides, title layers fit.
   --------------------------------------------------------------------- */
@media (max-width: 960px) {
  :root {
    --v45-edge: clamp(18px, 4.8vw, 28px);
    --v45-nav-safe: clamp(25px, 7vw, 34px);
  }
  .pixel-raster-layer-v45 { --pixel-pad: 16px; }

  .site-header {
    grid-template-columns: minmax(0, 1fr) clamp(92px, 26vw, 112px) !important;
    align-items: start !important;
    gap: clamp(7px, 2vw, 11px) !important;
    min-height: calc(clamp(72px, 9.2vh, 84px) + env(safe-area-inset-top)) !important;
    padding: calc(12px + env(safe-area-inset-top)) calc(var(--v45-edge) + var(--v45-nav-safe)) 9px var(--v45-edge) !important;
  }
  .brand-lockup {
    grid-template-columns: clamp(38px, 10vw, 46px) minmax(0, 1fr) !important;
    column-gap: clamp(8px, 2.3vw, 12px) !important;
    width: 100% !important;
    max-width: none !important;
  }
  .brand-mark {
    width: clamp(38px, 10vw, 46px) !important;
    height: clamp(22px, 5.8vw, 27px) !important;
    overflow: visible !important;
  }
  .brand-copy { min-width: 0 !important; gap: 5px !important; }
  .brand-name {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    font-size: clamp(17px, 4.75vw, 21px) !important;
    line-height: .82 !important;
    white-space: nowrap !important;
  }
  .brand-role {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    font-size: clamp(7px, 1.9vw, 8.8px) !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
    white-space: nowrap !important;
    opacity: .82 !important;
  }
  .header-actions {
    width: 100% !important;
    max-width: 112px !important;
    gap: 6px !important;
  }
  .binary-link-header {
    padding-bottom: 6px !important;
    gap: 5px !important;
    font-size: clamp(8px, 2.25vw, 10px) !important;
    line-height: 1 !important;
  }
  .site-location {
    font-size: clamp(5.4px, 1.42vw, 6.4px) !important;
    letter-spacing: .05em !important;
  }

  /* Keep signal tearing inside the mobile header cell. */
  .brand-lockup.is-signal-glitch .brand-symbol-echo-a { transform: translate3d(3px,0,0) skewX(-5deg) scaleX(1.04) !important; }
  .brand-lockup.is-signal-glitch .brand-symbol-echo-b { transform: translate3d(-3px,0,0) skewX(6deg) scaleX(.97) !important; }
  .brand-lockup.is-signal-glitch .brand-symbol-echo-c { transform: translate3d(2px,0,0) scaleX(1.05) !important; }
  .brand-lockup.is-signal-glitch .brand-name::before,
  .brand-lockup.is-signal-glitch .brand-role::before { transform: translate3d(3px,0,0) skewX(-4deg) !important; }
  .brand-lockup.is-signal-glitch .brand-name::after,
  .brand-lockup.is-signal-glitch .brand-role::after { transform: translate3d(-3px,0,0) skewX(4deg) !important; }

  .hero-name,
  .scene-title,
  .contact-title {
    max-width: calc(100vw - (var(--v45-edge) * 2) - var(--v45-nav-safe)) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .station-tasks .tasks-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-content: center !important;
    gap: clamp(14px, 2vh, 20px) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .station-tasks .scene-header {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .station-tasks .scene-title {
    max-width: 11ch !important;
    font-size: clamp(31px, 8.7vw, 40px) !important;
    line-height: .88 !important;
  }
  .station-tasks .tasks-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(10px, 1.35vh, 14px) clamp(18px, 5vw, 26px) !important;
    align-content: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .station-tasks .task-item,
  .station-tasks .tasks-list > span {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 0 7px !important;
    margin: 0 !important;
    font-size: clamp(12px, 3.42vw, 15.2px) !important;
    line-height: 1.08 !important;
    font-weight: 590 !important;
    font-variation-settings: "wght" 590, "wdth" 105, "slnt" 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    border: 0 !important;
  }
  .station-tasks .task-item::before,
  .station-tasks .task-item::after,
  .station-tasks .tasks-list > span::before,
  .station-tasks .tasks-list > span::after { display: none !important; content: none !important; }
}

@media (max-width: 380px), (max-height: 690px) {
  .station-tasks .tasks-layout { gap: 10px !important; }
  .station-tasks .scene-title { font-size: clamp(27px, 8vw, 32px) !important; }
  .station-tasks .tasks-list { gap: 7px 14px !important; }
  .station-tasks .task-item,
  .station-tasks .tasks-list > span {
    font-size: clamp(10.7px, 3.05vw, 12.2px) !important;
    line-height: 1.04 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-raster-layer-v45 { display: none !important; }
  .pixel-raster-target-v45 > span { opacity: 1 !important; }
  .brand-lockup.is-signal-glitch { animation: none !important; }
}


/* ---- src/v46-final.css ---- */
/* =====================================================================
   GVD v46 - collision-safe experience/process layouts and readable mobile
   header. No numbering in the process section. Avatar work is paused.
   ===================================================================== */

/* Header actions must always stay inside the viewport. */
.site-header,
.brand-lockup,
.brand-copy,
.header-actions,
.binary-link-header,
.site-location {
  min-width: 0 !important;
  max-width: 100% !important;
}

.site-location {
  opacity: 1 !important;
  visibility: visible !important;
  color: #747780 !important;
  text-shadow: none !important;
}

/* EXPERIENCE --------------------------------------------------------- */
.station-experience .experience-layout {
  display: grid !important;
  grid-template-columns: minmax(390px, .86fr) minmax(0, 1.14fr) !important;
  align-items: center !important;
  gap: clamp(56px, 5.4vw, 104px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.station-experience .scene-header {
  width: 100% !important;
  max-width: 620px !important;
  min-width: 0 !important;
  align-self: center !important;
}

.station-experience .scene-title {
  display: block !important;
  width: 100% !important;
  max-width: 8.9ch !important;
  font-size: clamp(46px, min(3.75vw, 7.8vh), 72px) !important;
  line-height: .88 !important;
  font-stretch: 142% !important;
  font-variation-settings: "wght" 820, "wdth" 142, "slnt" 0 !important;
  letter-spacing: -.047em !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.station-experience .experience-copy {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(28px, 2.8vw, 54px) !important;
  width: 100% !important;
  max-width: 860px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  columns: auto !important;
  border: 0 !important;
}

.station-experience .experience-column {
  min-width: 0 !important;
}

.station-experience .experience-column p {
  margin: 0 0 clamp(16px, 2vh, 24px) !important;
  max-width: 32ch !important;
  font-size: clamp(15px, min(.98vw, 1.9vh), 18px) !important;
  line-height: 1.5 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* PROCESS ------------------------------------------------------------ */
.station-process .process-layout {
  display: grid !important;
  grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr) !important;
  align-items: center !important;
  gap: clamp(58px, 6vw, 112px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.station-process .scene-header {
  width: 100% !important;
  max-width: 560px !important;
  min-width: 0 !important;
}

.station-process .scene-title {
  width: 100% !important;
  max-width: 7.8ch !important;
  font-size: clamp(52px, min(4.2vw, 8.5vh), 82px) !important;
  line-height: .87 !important;
  font-stretch: 144% !important;
  font-variation-settings: "wght" 820, "wdth" 144, "slnt" 0 !important;
  letter-spacing: -.05em !important;
  text-wrap: balance !important;
}

.station-process .process-flow {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(34px, 4.2vh, 56px) clamp(42px, 4.6vw, 78px) !important;
  width: 100% !important;
  max-width: 900px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: none !important;
  list-style: none !important;
}

.station-process .process-step,
.station-process .process-flow > * {
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  counter-increment: none !important;
}

.station-process .process-step::before,
.station-process .process-step::after,
.station-process .process-flow > *::before,
.station-process .process-flow > *::after {
  content: none !important;
  display: none !important;
}

.station-process .process-flow h3 {
  margin: 0 0 clamp(10px, 1.2vh, 15px) !important;
  font-size: clamp(25px, 1.9vw, 35px) !important;
  line-height: .98 !important;
  font-weight: 740 !important;
  font-variation-settings: "wght" 740, "wdth" 132, "slnt" 0 !important;
  letter-spacing: -.034em !important;
}

.station-process .process-flow p {
  margin: 0 !important;
  max-width: 29ch !important;
  font-size: clamp(14px, .9vw, 17px) !important;
  line-height: 1.48 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Medium desktop/tablet: stack the title over the copy before collisions can
   occur. The visual system remains centered and the Z-stage is unchanged. */
@media (min-width: 961px) and (max-width: 1320px) {
  .station-experience .experience-layout,
  .station-process .process-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    gap: clamp(24px, 3.2vh, 36px) !important;
  }

  .station-experience .scene-header,
  .station-process .scene-header {
    max-width: 100% !important;
  }

  .station-experience .scene-title {
    max-width: 15ch !important;
    font-size: clamp(44px, 5vw, 64px) !important;
  }

  .station-process .scene-title {
    max-width: 11ch !important;
    font-size: clamp(48px, 5.4vw, 70px) !important;
  }

  .station-experience .experience-copy,
  .station-process .process-flow {
    max-width: 100% !important;
  }
}

/* MOBILE ------------------------------------------------------------ */
@media (max-width: 720px) {
  :root {
    --gvd-header-h: calc(clamp(98px, 12.4vh, 114px) + env(safe-area-inset-top)) !important;
    --gvd-scene-top: calc(var(--gvd-header-h) + clamp(6px, .8vh, 9px)) !important;
  }

  .site-header {
    height: var(--gvd-header-h) !important;
    min-height: var(--gvd-header-h) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    align-items: start !important;
    gap: clamp(9px, 1.25vh, 13px) !important;
    padding:
      calc(12px + env(safe-area-inset-top))
      calc(var(--gvd-gutter) + var(--gvd-nav-lane))
      10px
      var(--gvd-gutter) !important;
    overflow: visible !important;
  }

  .brand-lockup {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: clamp(34px, 9vw, 42px) minmax(0, 1fr) !important;
    column-gap: clamp(8px, 2.2vw, 11px) !important;
  }

  .brand-mark {
    width: clamp(34px, 9vw, 42px) !important;
    height: clamp(21px, 5.5vw, 26px) !important;
  }

  .brand-name {
    width: max-content !important;
    max-width: 100% !important;
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: .82 !important;
    white-space: nowrap !important;
  }

  .brand-role {
    font-size: clamp(7.8px, 2vw, 9px) !important;
    line-height: 1 !important;
    letter-spacing: .15em !important;
    white-space: nowrap !important;
    opacity: .9 !important;
  }

  .header-actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0, auto) max-content !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .binary-link-header {
    width: max-content !important;
    max-width: 100% !important;
    padding: 0 0 5px !important;
    font-size: clamp(10px, 2.75vw, 12px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .site-location {
    justify-self: end !important;
    align-self: center !important;
    width: max-content !important;
    max-width: none !important;
    font-size: clamp(8px, 2.05vw, 9.4px) !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    color: #747780 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  .station-experience .experience-layout,
  .station-process .process-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    align-items: start !important;
    gap: clamp(14px, 1.9vh, 20px) !important;
  }

  .station-experience .scene-title {
    max-width: 10.5ch !important;
    font-size: clamp(30px, 8.3vw, 39px) !important;
    line-height: .9 !important;
  }

  .station-experience .experience-copy {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(14px, 4vw, 20px) !important;
  }

  .station-experience .experience-column p {
    margin-bottom: clamp(12px, 1.6vh, 16px) !important;
    max-width: none !important;
    font-size: clamp(10.2px, 2.72vw, 12px) !important;
    line-height: 1.42 !important;
  }

  .station-process .scene-title {
    max-width: 8.8ch !important;
    font-size: clamp(34px, 9vw, 43px) !important;
    line-height: .89 !important;
  }

  .station-process .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2.2vh, 22px) clamp(16px, 4.3vw, 24px) !important;
  }

  .station-process .process-flow h3 {
    margin-bottom: 7px !important;
    font-size: clamp(17px, 4.6vw, 21px) !important;
    line-height: .98 !important;
  }

  .station-process .process-flow p {
    max-width: none !important;
    font-size: clamp(9.2px, 2.45vw, 10.8px) !important;
    line-height: 1.38 !important;
  }
}

@media (max-width: 380px), (max-height: 690px) {
  :root {
    --gvd-header-h: calc(clamp(92px, 13.2vh, 104px) + env(safe-area-inset-top)) !important;
  }

  .site-header {
    gap: 7px !important;
    padding-top: calc(9px + env(safe-area-inset-top)) !important;
  }

  .brand-name { font-size: clamp(16.2px, 4.7vw, 18px) !important; }
  .brand-role { font-size: clamp(7px, 1.85vw, 7.8px) !important; }
  .binary-link-header { font-size: clamp(9px, 2.55vw, 10px) !important; }
  .site-location { font-size: clamp(7.2px, 1.95vw, 8px) !important; }

  .station-experience .experience-copy { gap: 11px !important; }
  .station-experience .experience-column p {
    font-size: clamp(9.2px, 2.55vw, 10.3px) !important;
    line-height: 1.34 !important;
  }
  .station-process .process-flow { gap: 12px 13px !important; }
  .station-process .process-flow h3 { font-size: clamp(15.5px, 4.3vw, 18px) !important; }
  .station-process .process-flow p {
    font-size: clamp(8.2px, 2.25vw, 9.3px) !important;
    line-height: 1.3 !important;
  }
}


/* ---- src/v47-final.css ---- */
/* =====================================================================
   GVD v47 - collaboration balance + true progressive title mosaic.
   ===================================================================== */

/* Retire every older mask / fragment implementation. The v47 canvas is the
   only visible transition layer, so no stray checker squares can flash. */
html.is-depth .signal-title,
html.is-depth .signal-title *,
html.is-depth .capability-thesis {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.pixel-raster-layer-v45 {
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: translateZ(0) !important;
}

/* FORMATS OF COLLABORATION ------------------------------------------- */
.station-collaboration {
  padding-top: calc(var(--header-h) + clamp(18px, 2.8vh, 34px)) !important;
  padding-bottom: clamp(82px, 10.5vh, 112px) !important;
}

.station-collaboration .station-shell {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: start !important;
  gap: clamp(28px, 4.2vh, 48px) !important;
  width: min(100%, 1380px) !important;
  min-width: 0 !important;
  max-height: calc(100dvh - var(--header-h) - clamp(112px, 15vh, 152px)) !important;
  margin: 0 auto !important;
}

.station-collaboration .scene-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.station-collaboration .scene-title {
  display: block !important;
  width: min(100%, 11.5ch) !important;
  max-width: 11.5ch !important;
  margin: 0 !important;
  font-size: clamp(62px, min(5.2vw, 9.6vh), 98px) !important;
  line-height: .86 !important;
  letter-spacing: -.052em !important;
  text-wrap: balance !important;
  overflow: visible !important;
}

.station-collaboration .collaboration-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: clamp(58px, 7vw, 112px) !important;
  width: min(100%, 1260px) !important;
  max-width: 1260px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
}

.station-collaboration .collaboration-option,
.station-collaboration .collaboration-option + .collaboration-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.station-collaboration .collaboration-option-dark::before {
  display: none !important;
  content: none !important;
}

.station-collaboration .collaboration-option h3 {
  max-width: 12ch !important;
  margin: 0 0 clamp(16px, 2vh, 24px) !important;
  font-size: clamp(31px, 2.45vw, 45px) !important;
  line-height: .92 !important;
  letter-spacing: -.045em !important;
}

.station-collaboration .collaboration-option p {
  max-width: 42ch !important;
  margin: 0 0 clamp(13px, 1.7vh, 20px) !important;
  font-size: clamp(15px, min(1.03vw, 1.95vh), 19px) !important;
  line-height: 1.48 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.station-collaboration .collaboration-option .budget {
  margin-top: 0 !important;
  font-size: clamp(10px, .7vw, 12px) !important;
  line-height: 1.35 !important;
}

.station-collaboration .collaboration-option .binary-link {
  margin-top: clamp(10px, 1.7vh, 18px) !important;
  font-size: clamp(11px, .78vw, 13px) !important;
}

/* Short desktop windows: reduce the composition as a whole instead of
   allowing the CTA row to collide with the global navigation cue. */
@media (min-width: 901px) and (max-height: 760px) {
  .station-collaboration {
    padding-top: calc(var(--header-h) + 8px) !important;
    padding-bottom: 76px !important;
  }
  .station-collaboration .station-shell {
    gap: 22px !important;
    max-height: calc(100dvh - var(--header-h) - 94px) !important;
  }
  .station-collaboration .scene-title {
    font-size: clamp(50px, 4.4vw, 72px) !important;
  }
  .station-collaboration .collaboration-option h3 {
    margin-bottom: 12px !important;
    font-size: clamp(27px, 2.05vw, 36px) !important;
  }
  .station-collaboration .collaboration-option p {
    margin-bottom: 10px !important;
    font-size: clamp(13px, .9vw, 16px) !important;
    line-height: 1.4 !important;
  }
  .station-collaboration .collaboration-option .binary-link {
    margin-top: 6px !important;
  }
}

/* Mobile keeps the same Z-axis scene but compacts the collaboration page
   without pushing its buttons into the lower cue. */
@media (max-width: 900px) {
  .station-collaboration {
    padding-top: var(--gvd-scene-top, var(--mobile-scene-top)) !important;
    padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important;
  }
  .station-collaboration .station-shell {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    gap: clamp(14px, 2.1vh, 20px) !important;
    width: 100% !important;
    max-height: calc(100dvh - var(--gvd-scene-top, 106px) - 70px) !important;
  }
  .station-collaboration .scene-title {
    width: min(100%, 9.8ch) !important;
    max-width: 9.8ch !important;
    font-size: clamp(37px, 10.7vw, 50px) !important;
    line-height: .86 !important;
  }
  .station-collaboration .collaboration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(16px, 4.4vw, 24px) !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .station-collaboration .collaboration-option h3 {
    margin-bottom: 9px !important;
    font-size: clamp(18px, 5.05vw, 23px) !important;
    line-height: .94 !important;
  }
  .station-collaboration .collaboration-option p {
    margin-bottom: 7px !important;
    font-size: clamp(8.5px, 2.32vw, 10.4px) !important;
    line-height: 1.32 !important;
  }
  .station-collaboration .collaboration-option .budget {
    font-size: clamp(7px, 1.9vw, 8px) !important;
  }
  .station-collaboration .collaboration-option .binary-link {
    margin-top: 4px !important;
    font-size: clamp(7.4px, 2vw, 8.6px) !important;
  }
}

@media (max-width: 390px), (max-height: 680px) {
  .station-collaboration .station-shell { gap: 10px !important; }
  .station-collaboration .scene-title { font-size: clamp(32px, 9.7vw, 42px) !important; }
  .station-collaboration .collaboration-grid { gap: 12px !important; }
  .station-collaboration .collaboration-option h3 { font-size: clamp(16px, 4.6vw, 20px) !important; }
  .station-collaboration .collaboration-option p { font-size: clamp(7.7px, 2.1vw, 9px) !important; }
}


/* ---- src/v48-final.css ---- */
/* =====================================================================
   GVD v48 - progressive title-image mosaic.
   Whole-title low-resolution raster -> progressively finer raster -> DOM.
   ===================================================================== */

/* Retire every older pixel implementation. */
.pixel-raster-layer-v45,
.pixel-raster-layer-v44,
.pixel-fragment-layer-v43,
.pixel-fragment-v43,
.pixel-fragment-layer-v42,
.pixel-fragment-v42,
.pixel-block-layer,
.pixel-text-canvas,
.pixel-text-canvas-v42 {
  display: none !important;
}

.pixel-mosaic-target-v48 {
  position: relative !important;
  isolation: isolate !important;
  contain: none !important;
  overflow: visible !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.pixel-mosaic-target-v48 > span {
  opacity: var(--pixel-live-opacity, 1) !important;
  transition: none !important;
}

.pixel-mosaic-layer-v48 {
  position: absolute !important;
  z-index: 18 !important;
  left: calc(var(--pixel-pad, 22px) * -1) !important;
  top: calc(var(--pixel-pad, 22px) * -1) !important;
  width: calc(100% + (var(--pixel-pad, 22px) * 2)) !important;
  height: calc(100% + (var(--pixel-pad, 22px) * 2)) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none !important;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  transform: translateZ(0) !important;
  transform-origin: center !important;
  backface-visibility: hidden !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  will-change: opacity !important;
}

.pixel-mosaic-layer-v48[hidden] {
  display: none !important;
}

/* A failed raster safety check must always leave the real title visible. */
.pixel-mosaic-target-v48[data-pixel-fallback="live-text"] > span {
  opacity: 1 !important;
}
.pixel-mosaic-target-v48[data-pixel-fallback="live-text"] > .pixel-mosaic-layer-v48 {
  display: none !important;
}

@media (max-width: 900px) {
  .pixel-mosaic-layer-v48 {
    --pixel-pad: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-mosaic-layer-v48 { display: none !important; }
  .pixel-mosaic-target-v48 > span { opacity: 1 !important; }
}


/* ---- src/v50-final.css ---- */
/* =====================================================================
   GVD v50 - regression-safe editorial grids + true title intro mosaic.
   Built on v48; only targeted layout and title-transition overrides.
   ===================================================================== */

/* TITLE MOSAIC -------------------------------------------------------- */
.pixel-mosaic-target-v50 {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.pixel-mosaic-target-v50 > span {
  opacity: var(--pixel-live-opacity, 1) !important;
  transition: none !important;
}

/* Hide first-paint glyphs without changing their geometry or computed colour.
   The raster is prepared while the preloader is on screen. */
.pixel-mosaic-target-v50.is-pixel-awaiting > span {
  visibility: hidden !important;
}

.pixel-mosaic-layer-v50 {
  position: absolute !important;
  z-index: 18 !important;
  left: calc(var(--pixel-pad, 22px) * -1) !important;
  top: calc(var(--pixel-pad, 22px) * -1) !important;
  width: calc(100% + (var(--pixel-pad, 22px) * 2)) !important;
  height: calc(100% + (var(--pixel-pad, 22px) * 2)) !important;
  display: block !important;
  pointer-events: none !important;
  opacity: 0;
  image-rendering: pixelated !important;
  image-rendering: crisp-edges !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
.pixel-mosaic-layer-v50[hidden] { display: none !important; }
.pixel-mosaic-target-v50[data-pixel-fallback="live-text"] > span {
  visibility: visible !important;
  opacity: 1 !important;
}
.pixel-mosaic-target-v50[data-pixel-fallback="live-text"] > .pixel-mosaic-layer-v50 {
  display: none !important;
}

/* COMMON EDITORIAL SAFE AREA ---------------------------------------- */
.station-experience .station-shell,
.station-collaboration .station-shell,
.station-process .station-shell {
  width: min(100%, 1500px) !important;
  margin-inline: auto !important;
  min-width: 0 !important;
}

.station-experience .scene-header,
.station-collaboration .scene-header,
.station-process .scene-header,
.station-experience .experience-copy,
.station-collaboration .collaboration-grid,
.station-process .process-flow,
.station-experience .experience-column,
.station-collaboration .collaboration-option,
.station-process .process-step {
  min-width: 0 !important;
}

/* EXPERIENCE - balanced editorial split, not title-over-copy. */
.station-experience .experience-layout {
  display: grid !important;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
  column-gap: clamp(64px, 6.6vw, 126px) !important;
  align-items: center !important;
}
.station-experience .scene-header {
  max-width: 650px !important;
  margin: 0 !important;
}
.station-experience .scene-title {
  max-width: 10.2ch !important;
  font-size: clamp(52px, min(4.35vw, 8.1vh), 84px) !important;
  line-height: .9 !important;
  letter-spacing: -.048em !important;
  text-wrap: balance !important;
}
.station-experience .experience-copy {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(32px, 3.2vw, 62px) !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  columns: auto !important;
}
.station-experience .experience-column p {
  max-width: 34ch !important;
  margin: 0 0 clamp(16px, 1.9vh, 24px) !important;
  font-size: clamp(15px, min(.98vw, 1.85vh), 18px) !important;
  line-height: 1.5 !important;
}

/* COLLABORATION - explicit internal gutter between two content groups. */
.station-collaboration .station-shell {
  display: grid !important;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr) !important;
  column-gap: clamp(72px, 7.5vw, 144px) !important;
  align-items: center !important;
}
.station-collaboration .scene-header { margin: 0 !important; }
.station-collaboration .scene-title {
  max-width: 8.7ch !important;
  font-size: clamp(54px, min(4.5vw, 8.4vh), 86px) !important;
  line-height: .88 !important;
  text-wrap: balance !important;
}
.station-collaboration .collaboration-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: clamp(50px, 5.4vw, 96px) !important;
  align-items: start !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.station-collaboration .collaboration-option,
.station-collaboration .collaboration-option + .collaboration-option {
  display: flex !important;
  flex-direction: column !important;
  min-height: clamp(260px, 31vh, 340px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.station-collaboration .collaboration-option-dark::before { display: none !important; }
.station-collaboration .collaboration-option h3 {
  max-width: 12ch !important;
  margin: 0 0 clamp(17px, 2vh, 24px) !important;
  font-size: clamp(30px, 2.25vw, 43px) !important;
  line-height: .94 !important;
}
.station-collaboration .collaboration-option p {
  max-width: 38ch !important;
  margin: 0 0 clamp(14px, 1.7vh, 20px) !important;
  font-size: clamp(14px, min(.95vw, 1.8vh), 17px) !important;
  line-height: 1.5 !important;
}
.station-collaboration .collaboration-option .binary-link { margin-top: auto !important; }

/* PROCESS - title and information are peers, with a real grid gap. */
.station-process .process-layout {
  display: grid !important;
  grid-template-columns: minmax(340px, .74fr) minmax(0, 1.26fr) !important;
  column-gap: clamp(72px, 7.6vw, 146px) !important;
  align-items: center !important;
}
.station-process .scene-header { margin: 0 !important; }
.station-process .scene-title {
  max-width: 8.2ch !important;
  font-size: clamp(56px, min(4.7vw, 8.8vh), 90px) !important;
  line-height: .87 !important;
  text-wrap: balance !important;
}
.station-process .process-flow {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(42px, 5vh, 64px) clamp(54px, 5.8vw, 104px) !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.station-process .process-step {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.station-process .process-step::before,
.station-process .process-step::after { display: none !important; content: none !important; }
.station-process .process-step h3 {
  margin: 0 0 12px !important;
  font-size: clamp(27px, 2vw, 38px) !important;
  line-height: .96 !important;
}
.station-process .process-step p {
  max-width: 29ch !important;
  margin: 0 !important;
  font-size: clamp(14px, min(.92vw, 1.75vh), 17px) !important;
  line-height: 1.48 !important;
}

/* Intermediate viewports: editorial stack, never overlay. */
@media (min-width: 901px) and (max-width: 1220px) {
  .station-experience .experience-layout,
  .station-collaboration .station-shell,
  .station-process .process-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(28px, 3.8vh, 44px) !important;
    align-content: center !important;
  }
  .station-experience .scene-title,
  .station-collaboration .scene-title,
  .station-process .scene-title { max-width: 15ch !important; }
  .station-experience .experience-copy,
  .station-collaboration .collaboration-grid,
  .station-process .process-flow { max-width: 100% !important; }
}

/* MOBILE HEADER - equal halves in one row. */
@media (max-width: 900px) {
  :root {
    --gvd-header-h: calc(70px + env(safe-area-inset-top)) !important;
    --gvd-scene-top: calc(var(--gvd-header-h) + clamp(8px, 1.2vh, 12px)) !important;
  }
  .site-header {
    height: var(--gvd-header-h) !important;
    min-height: var(--gvd-header-h) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: clamp(10px, 3vw, 16px) !important;
    padding: calc(10px + env(safe-area-inset-top)) calc(var(--gvd-gutter) + var(--gvd-nav-lane)) 8px var(--gvd-gutter) !important;
    overflow: visible !important;
  }
  .brand-lockup {
    grid-column: 1 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: clamp(27px, 7.5vw, 34px) minmax(0, 1fr) !important;
    column-gap: clamp(7px, 2vw, 10px) !important;
    align-items: center !important;
  }
  .brand-mark { width: clamp(27px, 7.5vw, 34px) !important; height: clamp(27px, 7.5vw, 34px) !important; }
  .brand-name {
    font-size: clamp(12px, 3.65vw, 16px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .brand-role {
    font-size: clamp(6px, 1.75vw, 7.4px) !important;
    letter-spacing: .13em !important;
    white-space: nowrap !important;
  }
  .header-actions {
    grid-column: 2 !important;
    width: 100% !important;
    justify-self: stretch !important;
    align-self: center !important;
    display: block !important;
  }
  .binary-link-header {
    width: 100% !important;
    justify-content: flex-end !important;
    font-size: clamp(10px, 2.85vw, 12.5px) !important;
    white-space: nowrap !important;
  }
  .site-location { display: none !important; }

  .station-experience .experience-layout,
  .station-collaboration .station-shell,
  .station-process .process-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(18px, 2.8vh, 26px) !important;
    align-content: center !important;
  }
  .station-experience .scene-title,
  .station-collaboration .scene-title,
  .station-process .scene-title {
    max-width: 100% !important;
    font-size: clamp(38px, 10.4vw, 52px) !important;
    line-height: .89 !important;
  }
  .station-experience .experience-copy {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(16px, 4.4vw, 24px) !important;
  }
  .station-experience .experience-column p {
    font-size: clamp(11.5px, 3.15vw, 14px) !important;
    line-height: 1.43 !important;
  }
  .station-collaboration .collaboration-grid,
  .station-process .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(18px, 3.2vh, 26px) clamp(16px, 4.4vw, 24px) !important;
  }
  .station-collaboration .collaboration-option { min-height: 0 !important; }
  .station-collaboration .collaboration-option h3,
  .station-process .process-step h3 {
    font-size: clamp(18px, 5vw, 24px) !important;
  }
  .station-collaboration .collaboration-option p,
  .station-process .process-step p {
    font-size: clamp(10.5px, 2.85vw, 13px) !important;
    line-height: 1.42 !important;
  }
  .pixel-mosaic-layer-v50 { --pixel-pad: 14px; }
}

@media (max-width: 430px) {
  .brand-role { display: block !important; }
  .station-experience .experience-copy { grid-template-columns: minmax(0, 1fr) !important; }
  .station-experience .experience-column { display: contents !important; }
  .station-experience .experience-column p { max-width: 100% !important; margin-bottom: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-mosaic-layer-v50 { display: none !important; }
  .pixel-mosaic-target-v50 > span { visibility: visible !important; opacity: 1 !important; }
}


/* ---- src/v51-final.css ---- */
/* GVD v51 - responsive ergonomics and collision-safe layout repair */

.station-experience *, .station-process *, .station-contact * { min-width: 0; }

.station-experience .station-shell,
.station-process .station-shell,
.station-contact .station-shell {
  width: min(100%, 1480px) !important;
  max-width: min(1480px, calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane))) !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

/* EXPERIENCE */
.station-experience .experience-layout {
  display: grid !important;
  grid-template-columns: minmax(390px, .82fr) minmax(620px, 1.18fr) !important;
  column-gap: clamp(72px, 6.2vw, 118px) !important;
  align-items: center !important;
}
.station-experience .scene-header { width: 100% !important; max-width: 610px !important; margin: 0 !important; }
.station-experience .scene-title {
  width: 100% !important;
  max-width: 10.5ch !important;
  font-size: clamp(48px, min(3.95vw, 7.35vh), 76px) !important;
  line-height: .91 !important;
  letter-spacing: -.047em !important;
  overflow: visible !important;
  text-wrap: balance !important;
}
.station-experience .experience-copy {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: clamp(44px, 3.7vw, 70px) !important;
  width: 100% !important;
  max-width: 830px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  columns: unset !important;
}
.station-experience .experience-column p {
  width: 100% !important;
  max-width: 34ch !important;
  margin: 0 0 clamp(16px, 2vh, 24px) !important;
  font-size: clamp(15px, min(.96vw, 1.75vh), 17.5px) !important;
  line-height: 1.5 !important;
  overflow-wrap: break-word !important;
}

/* PROCESS */
.station-process .process-layout {
  display: grid !important;
  grid-template-columns: minmax(360px, .72fr) minmax(650px, 1.28fr) !important;
  column-gap: clamp(76px, 6.8vw, 130px) !important;
  align-items: center !important;
}
.station-process .scene-header { width: 100% !important; max-width: 560px !important; margin: 0 !important; }
.station-process .scene-title {
  width: 100% !important;
  max-width: 8.5ch !important;
  font-size: clamp(50px, min(4.05vw, 7.6vh), 78px) !important;
  line-height: .89 !important;
  letter-spacing: -.048em !important;
  overflow: visible !important;
}
.station-process .process-flow {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(42px, 4.7vh, 62px) clamp(62px, 5.4vw, 96px) !important;
  width: 100% !important;
  max-width: 850px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.station-process .process-step {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.station-process .process-step::before, .station-process .process-step::after { display: none !important; content: none !important; }
.station-process .process-step h3 {
  margin: 0 0 12px !important;
  font-size: clamp(27px, 1.95vw, 37px) !important;
  line-height: .98 !important;
  overflow-wrap: break-word !important;
}
.station-process .process-step p {
  max-width: 30ch !important;
  margin: 0 !important;
  font-size: clamp(14px, min(.94vw, 1.72vh), 17px) !important;
  line-height: 1.48 !important;
  overflow-wrap: break-word !important;
}

/* CONTACT */
.station-contact .contact-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr) !important;
  column-gap: clamp(82px, 7.2vw, 138px) !important;
  align-items: center !important;
}
.station-contact .contact-main { width: 100% !important; max-width: 760px !important; }
.station-contact .contact-title {
  max-width: 9ch !important;
  font-size: clamp(54px, min(4.4vw, 8vh), 84px) !important;
  line-height: .89 !important;
}
.station-contact .contact-main > p:not(.scene-label) {
  max-width: 640px !important;
  font-size: clamp(15px, min(1.08vw, 1.9vh), 19px) !important;
  line-height: 1.52 !important;
}
.station-contact .site-footer {
  align-self: center !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(30px, 4.2vh, 48px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.station-contact .site-footer::before, .station-contact .site-footer::after { display: none !important; content: none !important; }
.station-contact .social-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px clamp(24px, 2.6vw, 44px) !important;
}
.station-contact .social-links a { min-height: 46px !important; padding: 8px 0 !important; border: 0 !important; }

.binary-button, .binary-link, .social-links a, .depth-nav button { touch-action: manipulation; }

@media (min-width: 901px) and (max-width: 1280px) {
  .station-experience .experience-layout,
  .station-process .process-layout,
  .station-contact .contact-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(26px, 3.6vh, 44px) !important;
    align-content: center !important;
  }
  .station-experience .scene-header,
  .station-process .scene-header,
  .station-contact .contact-main { max-width: 100% !important; }
  .station-experience .scene-title,
  .station-process .scene-title,
  .station-contact .contact-title {
    max-width: 15ch !important;
    font-size: clamp(44px, min(5.3vw, 7.1vh), 66px) !important;
  }
  .station-experience .experience-copy,
  .station-process .process-flow,
  .station-contact .site-footer { max-width: 100% !important; }
  .station-contact .site-footer {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr) !important;
    align-items: end !important;
  }
}

@media (max-width: 900px) {
  :root {
    --gvd-header-h: calc(72px + env(safe-area-inset-top)) !important;
    --gvd-scene-top: calc(var(--gvd-header-h) + clamp(8px, 1.2vh, 12px)) !important;
  }
  .site-header {
    height: var(--gvd-header-h) !important;
    min-height: var(--gvd-header-h) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    gap: clamp(8px, 2.5vw, 14px) !important;
    padding: calc(9px + env(safe-area-inset-top)) calc(var(--gvd-gutter) + var(--gvd-nav-lane)) 8px var(--gvd-gutter) !important;
    overflow: visible !important;
  }
  .brand-lockup {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: clamp(28px, 7.4vw, 34px) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(7px, 2vw, 10px) !important;
    overflow: visible !important;
  }
  .brand-mark { width: clamp(28px, 7.4vw, 34px) !important; height: clamp(28px, 7.4vw, 34px) !important; overflow: visible !important; }
  .brand-copy { min-width: 0 !important; overflow: visible !important; }
  .brand-name {
    display: block !important;
    max-width: 100% !important;
    font-size: clamp(12px, 3.45vw, 16px) !important;
    line-height: .96 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
    font-variation-settings: "wght" 690, "wdth" 82, "slnt" 0 !important;
  }
  .brand-role {
    display: block !important;
    margin-top: 4px !important;
    font-size: clamp(6.8px, 1.9vw, 8.2px) !important;
    line-height: 1 !important;
    letter-spacing: .13em !important;
    white-space: nowrap !important;
  }
  .header-actions {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    justify-self: stretch !important;
  }
  .binary-link-header {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(10,10,11,.9) !important;
    border-radius: 999px !important;
    background: var(--ink) !important;
    color: var(--bg) !important;
    font-size: clamp(10px, 2.75vw, 12.5px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
  .binary-link-header::before, .binary-link-header::after { display: none !important; }
  .binary-link-header i { width: 7px !important; height: 7px !important; flex: 0 0 auto !important; background: currentColor !important; }
  .site-location { display: none !important; }

  html.is-depth .station-shell, html.is-depth .station-shell-wide {
    width: 100% !important;
    max-width: calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane)) !important;
    overflow: visible !important;
  }
  .scene-title, .contact-title, .hero-name {
    max-width: 100% !important;
    overflow: visible !important;
    text-wrap: balance !important;
  }

  .station-experience .experience-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(20px, 2.7vh, 28px) !important;
    align-content: center !important;
  }
  .station-experience .scene-title {
    max-width: 100% !important;
    font-size: clamp(31px, 8.25vw, 42px) !important;
    line-height: .91 !important;
    letter-spacing: -.045em !important;
    font-variation-settings: "wght" 680, "wdth" 88, "slnt" 0 !important;
  }
  .station-experience .experience-copy {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
  }
  .station-experience .experience-column { display: contents !important; }
  .station-experience .experience-column p {
    max-width: 100% !important;
    margin: 0 0 clamp(12px, 1.8vh, 17px) !important;
    font-size: clamp(12.5px, 3.25vw, 15px) !important;
    line-height: 1.45 !important;
  }

  .station-process .process-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(20px, 2.8vh, 28px) !important;
    align-content: center !important;
  }
  .station-process .scene-title {
    max-width: 100% !important;
    font-size: clamp(34px, 9vw, 46px) !important;
    line-height: .9 !important;
    font-variation-settings: "wght" 680, "wdth" 88, "slnt" 0 !important;
  }
  .station-process .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(22px, 3.1vh, 30px) clamp(16px, 4.2vw, 24px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .station-process .process-step h3 { margin-bottom: 8px !important; font-size: clamp(18px, 4.9vw, 24px) !important; line-height: 1 !important; }
  .station-process .process-step p { max-width: 100% !important; font-size: clamp(10.8px, 2.85vw, 13px) !important; line-height: 1.4 !important; }

  .station-contact .contact-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(22px, 3vh, 30px) !important;
    align-content: center !important;
  }
  .station-contact .contact-title { max-width: 100% !important; font-size: clamp(35px, 9.2vw, 47px) !important; line-height: .9 !important; }
  .station-contact .contact-main > p:not(.scene-label) {
    max-width: 100% !important;
    margin-top: 12px !important;
    font-size: clamp(12.5px, 3.25vw, 15px) !important;
    line-height: 1.44 !important;
  }
  .station-contact .site-footer {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: clamp(14px, 3.8vw, 22px) !important;
    align-items: end !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .station-contact .social-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px 8px !important; }
  .station-contact .social-links a { min-height: 44px !important; padding: 8px 4px !important; border: 0 !important; font-size: clamp(9px, 2.45vw, 11px) !important; }

  .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .hero-actions .binary-button,
  .hero-actions .binary-link,
  .contact-main .binary-button,
  .collaboration-option .binary-link,
  .experience-column .binary-link {
    min-height: 44px !important;
    padding: 9px 10px !important;
    align-items: center !important;
  }
}

@media (max-width: 430px) {
  .brand-name { font-size: clamp(11.5px, 3.25vw, 14.5px) !important; font-variation-settings: "wght" 690, "wdth" 78, "slnt" 0 !important; }
  .binary-link-header { padding-inline: 7px !important; font-size: clamp(9.5px, 2.55vw, 11px) !important; }
  .station-process .process-flow { column-gap: 14px !important; }
  .station-contact .site-footer { grid-template-columns: minmax(0, 1fr) !important; row-gap: 12px !important; }
}


/* ---- src/v52-final.css ---- */
/* =====================================================================
   GVD v52 - regression repair: exclusive pixel title hand-off,
   one-line mobile header, collision-safe experience/process/contact.
   ===================================================================== */

/* PIXEL TITLE: raster first, DOM title only after the raster is gone. */
.pixel-mosaic-target-v50 {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  contain: none !important;
}
.pixel-mosaic-target-v50.is-pixel-awaiting > span,
.pixel-mosaic-target-v50.is-pixel-rendering > span {
  visibility: hidden !important;
  opacity: 0 !important;
}
.pixel-mosaic-target-v50:not(.is-pixel-awaiting):not(.is-pixel-rendering) > span {
  visibility: visible !important;
  opacity: 1 !important;
}
.pixel-mosaic-target-v50.is-pixel-rendering > .pixel-mosaic-layer-v50 {
  visibility: visible !important;
}
.pixel-mosaic-target-v50::before,
.pixel-mosaic-target-v50::after {
  display: none !important;
  content: none !important;
}

/* HEADER: location is already communicated inside the content/footer. */
.site-location { display: none !important; }

/* EXPERIENCE: title above readable copy, CTA stays away from the bottom cue. */
.station-experience {
  padding-bottom: clamp(82px, 10vh, 108px) !important;
}
.station-experience .experience-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: start !important;
  row-gap: clamp(30px, 4.4vh, 54px) !important;
  width: min(100%, 1480px) !important;
  max-width: min(1480px, calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane))) !important;
  margin-inline: auto !important;
}
.station-experience .scene-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.station-experience .scene-title {
  width: min(100%, 15.5ch) !important;
  max-width: 15.5ch !important;
  font-size: clamp(58px, min(5.15vw, 8.5vh), 92px) !important;
  line-height: .88 !important;
  letter-spacing: -.048em !important;
  text-wrap: balance !important;
}
.station-experience .experience-copy {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: clamp(72px, 8vw, 144px) !important;
  width: min(100%, 1160px) !important;
  max-width: 1160px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  columns: unset !important;
}
.station-experience .experience-column {
  min-width: 0 !important;
}
.station-experience .experience-column p {
  max-width: 39ch !important;
  margin: 0 0 clamp(16px, 2vh, 24px) !important;
  font-size: clamp(16px, min(1.02vw, 1.85vh), 19px) !important;
  line-height: 1.5 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.station-experience .experience-column:last-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.station-experience .experience-column:last-child .binary-link {
  align-self: flex-end !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: 2px 0 0 !important;
}

/* PROCESS: title and steps have separate rows; no border/table treatment. */
.station-process {
  padding-bottom: clamp(82px, 10vh, 108px) !important;
}
.station-process .process-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: start !important;
  row-gap: clamp(32px, 4.6vh, 56px) !important;
  width: min(100%, 1480px) !important;
  max-width: min(1480px, calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane))) !important;
  margin-inline: auto !important;
}
.station-process .scene-header {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.station-process .scene-title {
  width: min(100%, 12ch) !important;
  max-width: 12ch !important;
  font-size: clamp(58px, min(5vw, 8.4vh), 90px) !important;
  line-height: .87 !important;
  letter-spacing: -.049em !important;
  text-wrap: balance !important;
}
.station-process .process-flow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(34px, 3.7vw, 68px) !important;
  width: 100% !important;
  max-width: 1380px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.station-process .process-step,
.station-process .process-step::before,
.station-process .process-step::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.station-process .process-step::before,
.station-process .process-step::after {
  display: none !important;
  content: none !important;
}
.station-process .process-step h3 {
  margin: 0 0 12px !important;
  font-size: clamp(25px, 1.75vw, 34px) !important;
  line-height: .98 !important;
  font-variation-settings: "wght" 740, "wdth" 112, "slnt" 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}
.station-process .process-step p {
  max-width: 30ch !important;
  margin: 0 !important;
  font-size: clamp(14px, min(.9vw, 1.7vh), 17px) !important;
  line-height: 1.48 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* CONTACT: no table borders or divider rules. */
.station-contact .contact-layout,
.station-contact .contact-main,
.station-contact .site-footer,
.station-contact .site-footer > div,
.station-contact .social-links,
.station-contact .social-links a {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
.station-contact .contact-layout::before,
.station-contact .contact-layout::after,
.station-contact .site-footer::before,
.station-contact .site-footer::after,
.station-contact .social-links a::before,
.station-contact .social-links a::after {
  display: none !important;
  content: none !important;
}
.station-contact .site-footer {
  padding: 0 !important;
  margin: 0 !important;
}
.station-contact .social-links a {
  min-height: 44px !important;
  padding: 8px 0 !important;
  text-decoration: none !important;
}

/* Medium widths stack before collisions become possible. */
@media (min-width: 901px) and (max-width: 1280px) {
  .station-experience .scene-title,
  .station-process .scene-title {
    font-size: clamp(48px, min(5.2vw, 7.6vh), 68px) !important;
  }
  .station-experience .experience-copy {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .station-process .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(24px, 3.2vh, 38px) clamp(52px, 6vw, 88px) !important;
  }
}

/* MOBILE: one header row, no pill, two usable touch areas. */
@media (max-width: 900px) {
  :root {
    --gvd-header-h: calc(72px + env(safe-area-inset-top)) !important;
    --gvd-scene-top: calc(var(--gvd-header-h) + clamp(8px, 1.1vh, 12px)) !important;
  }
  .site-header {
    height: var(--gvd-header-h) !important;
    min-height: var(--gvd-header-h) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    align-content: center !important;
    column-gap: clamp(10px, 2.8vw, 15px) !important;
    padding: calc(9px + env(safe-area-inset-top)) calc(var(--gvd-gutter) + var(--gvd-nav-lane)) 8px var(--gvd-gutter) !important;
    overflow: visible !important;
  }
  .brand-lockup {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: clamp(29px, 7.6vw, 35px) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(7px, 2vw, 10px) !important;
    overflow: visible !important;
  }
  .brand-mark {
    width: clamp(29px, 7.6vw, 35px) !important;
    height: clamp(25px, 6.7vw, 31px) !important;
    overflow: visible !important;
  }
  .brand-copy { min-width: 0 !important; }
  .brand-name {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(12px, 3.45vw, 15.5px) !important;
    line-height: .98 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
    font-variation-settings: "wght" 700, "wdth" 80, "slnt" 0 !important;
  }
  .brand-role {
    display: block !important;
    margin-top: 4px !important;
    font-size: clamp(6.5px, 1.75vw, 7.8px) !important;
    line-height: 1 !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }
  .header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    align-self: center !important;
  }
  .binary-link-header {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: clamp(9.6px, 2.55vw, 11.5px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .binary-link-header::before,
  .binary-link-header::after {
    display: none !important;
    content: none !important;
  }
  .binary-link-header i {
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    background: currentColor !important;
  }

  .station-experience,
  .station-process {
    padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  }
  .station-experience .experience-layout,
  .station-process .process-layout {
    row-gap: clamp(18px, 2.6vh, 26px) !important;
    align-content: center !important;
  }
  .station-experience .scene-title,
  .station-process .scene-title {
    width: 100% !important;
    max-width: calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane)) !important;
    font-size: clamp(32px, 8.6vw, 43px) !important;
    line-height: .9 !important;
  }
  .station-experience .experience-copy {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .station-experience .experience-column { display: contents !important; }
  .station-experience .experience-column p {
    max-width: 100% !important;
    margin: 0 0 clamp(11px, 1.6vh, 15px) !important;
    font-size: clamp(12px, 3.15vw, 14px) !important;
    line-height: 1.43 !important;
  }
  .station-experience .experience-column:last-child .binary-link {
    align-self: flex-start !important;
    min-height: 44px !important;
    margin-top: 2px !important;
    padding-block: 8px !important;
  }
  .station-process .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(22px, 3vh, 30px) clamp(18px, 4.6vw, 26px) !important;
    width: 100% !important;
  }
  .station-process .process-step h3 {
    margin-bottom: 7px !important;
    font-size: clamp(15px, 4vw, 19px) !important;
    line-height: 1 !important;
    font-variation-settings: "wght" 740, "wdth" 92, "slnt" 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
  .station-process .process-step p {
    max-width: 100% !important;
    font-size: clamp(10.5px, 2.8vw, 12.5px) !important;
    line-height: 1.4 !important;
  }
  .station-contact .contact-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(20px, 2.8vh, 28px) !important;
  }
  .station-contact .site-footer {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: clamp(14px, 4vw, 22px) !important;
  }
  .station-contact .social-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
  }
  .station-contact .social-links a {
    min-height: 44px !important;
    padding: 8px 2px !important;
    font-size: clamp(9.5px, 2.5vw, 11.5px) !important;
  }
}

@media (max-width: 430px) {
  .site-header {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
    column-gap: 8px !important;
  }
  .brand-name { font-size: clamp(11.5px, 3.2vw, 14px) !important; }
  .brand-role { font-size: clamp(6px, 1.65vw, 7px) !important; }
  .binary-link-header { font-size: clamp(9px, 2.35vw, 10.5px) !important; gap: 6px !important; }
  .station-contact .site-footer { grid-template-columns: minmax(0, 1fr) !important; row-gap: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-mosaic-target-v50 > span {
    visibility: visible !important;
    opacity: 1 !important;
  }
}


/* ---- src/v53-final.css ---- */
/* =====================================================================
   GVD v53 - visual centering, single-pass pixel reveal, cleaner CTA,
   icon-only contact footer, and a more editorial mobile task layout.
   ===================================================================== */

/* 1. VISUAL CENTERING --------------------------------------------------
   The scene stage already reserves the fixed header and bottom cue. A small
   optical lift corrects the perceived low placement without changing Z logic. */
@media (min-width: 901px) {
  html.is-depth .station:not(.station-hero) > .station-shell,
  html.is-depth .station:not(.station-hero) > .station-shell-wide {
    transform: translateY(clamp(-32px, -3.2vh, -18px)) scale(var(--station-fit)) !important;
    transform-origin: center center !important;
  }
}

/* 2. HEADER CTA -------------------------------------------------------- */
.binary-link-header {
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 8px 0 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: clamp(15px, 1.05vw, 20px) !important;
  line-height: 1 !important;
  font-variation-settings: "wght" 690, "wdth" 104, "slnt" 0 !important;
  white-space: nowrap !important;
}
.binary-link-header i { display: none !important; }
.binary-link-header::before { display: none !important; content: none !important; }
.binary-link-header::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 3px !important;
  height: 1px !important;
  background: currentColor !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 220ms cubic-bezier(.22,.75,.22,1) !important;
}
@media (hover:hover) and (pointer:fine) {
  .binary-link-header:hover::after,
  .binary-link-header:focus-visible::after { transform: scaleX(1) !important; }
}

/* A star appears on interactive links without changing their geometry. */
.binary-link:not(.binary-link-header) .binary-label,
.binary-button .binary-label { position: relative !important; }
.binary-link:not(.binary-link-header) .binary-label::before,
.binary-button .binary-label::before {
  content: "✦" !important;
  position: absolute !important;
  left: -1.35em !important;
  top: 50% !important;
  opacity: 0 !important;
  transform: translateY(-50%) scale(.55) rotate(-18deg) !important;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(.22,.75,.22,1) !important;
  pointer-events: none !important;
}
@media (hover:hover) and (pointer:fine) {
  .binary-link:not(.binary-link-header):hover .binary-label::before,
  .binary-link:not(.binary-link-header):focus-visible .binary-label::before,
  .binary-button:hover .binary-label::before,
  .binary-button:focus-visible .binary-label::before {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) rotate(0) !important;
  }
}

/* 3. PROCESS ----------------------------------------------------------- */
.station-process .process-layout {
  width: min(100%, 1500px) !important;
  display: grid !important;
  grid-template-columns: minmax(380px, .78fr) minmax(0, 1.22fr) !important;
  column-gap: clamp(72px, 6.6vw, 128px) !important;
  align-items: center !important;
  align-content: center !important;
  margin-inline: auto !important;
}
.station-process .scene-header { min-width: 0 !important; max-width: 560px !important; }
.station-process .scene-title {
  max-width: 8.6ch !important;
  font-size: clamp(56px, min(4.45vw, 8vh), 86px) !important;
  line-height: .88 !important;
  text-wrap: balance !important;
}
.station-process .process-flow {
  width: 100% !important;
  max-width: 860px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(40px, 5vh, 64px) clamp(64px, 5.4vw, 96px) !important;
  align-content: center !important;
  margin: 0 !important;
}
.station-process .process-step { min-width: 0 !important; }
.station-process .process-step h3 {
  font-size: clamp(28px, 2vw, 37px) !important;
  line-height: .98 !important;
  margin-bottom: 12px !important;
}
.station-process .process-step p {
  max-width: 31ch !important;
  font-size: clamp(15px, min(.95vw, 1.75vh), 17px) !important;
  line-height: 1.48 !important;
}

/* 4. EXPERIENCE -------------------------------------------------------- */
.station-experience .experience-layout {
  width: min(100%, 1500px) !important;
  display: grid !important;
  grid-template-columns: minmax(430px, .88fr) minmax(0, 1.12fr) !important;
  column-gap: clamp(76px, 6.8vw, 132px) !important;
  align-items: center !important;
  align-content: center !important;
  margin-inline: auto !important;
}
.station-experience .scene-header { min-width: 0 !important; max-width: 650px !important; }
.station-experience .scene-title {
  max-width: 10.4ch !important;
  font-size: clamp(54px, min(4.15vw, 7.8vh), 80px) !important;
  line-height: .9 !important;
  text-wrap: balance !important;
}
.station-experience .experience-copy {
  width: 100% !important;
  max-width: 830px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 clamp(48px, 4vw, 76px) !important;
  align-items: start !important;
  margin: 0 !important;
}
.station-experience .experience-column p {
  max-width: 35ch !important;
  font-size: clamp(15.5px, min(.98vw, 1.78vh), 18px) !important;
  line-height: 1.5 !important;
}
.station-experience .experience-column:last-child .binary-link {
  align-self: flex-start !important;
  margin-top: 4px !important;
}

/* 5. TASKS ------------------------------------------------------------- */
.station-tasks .tasks-layout {
  width: min(100%, 1500px) !important;
  display: grid !important;
  grid-template-columns: minmax(390px, .78fr) minmax(0, 1.22fr) !important;
  column-gap: clamp(76px, 6.8vw, 132px) !important;
  align-items: center !important;
  align-content: center !important;
  margin-inline: auto !important;
}
.station-tasks .scene-header { min-width: 0 !important; max-width: 560px !important; }
.station-tasks .scene-title {
  max-width: 9.2ch !important;
  font-size: clamp(54px, min(4.2vw, 7.8vh), 80px) !important;
  line-height: .9 !important;
  text-wrap: balance !important;
}
.station-tasks .tasks-list {
  width: 100% !important;
  max-width: 880px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(28px, 3.8vh, 46px) clamp(58px, 5vw, 92px) !important;
  align-content: center !important;
  margin: 0 !important;
}
.station-tasks .task-item {
  position: relative !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  font-size: clamp(21px, 1.55vw, 29px) !important;
  line-height: .98 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.station-tasks .task-item::before {
  content: "✦" !important;
  display: block !important;
  position: absolute !important;
  left: -1.15em !important;
  top: .05em !important;
  opacity: .16 !important;
  transform: scale(.65) rotate(-16deg) !important;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(.22,.75,.22,1) !important;
}
@media (hover:hover) and (pointer:fine) {
  .station-tasks .task-item:hover::before,
  .station-tasks .task-item:focus-visible::before {
    opacity: 1 !important;
    transform: scale(1) rotate(0) !important;
  }
}

/* 6. CAPABILITY / SYSTEMS --------------------------------------------- */
.capability .capability-layout {
  width: min(100%, 1500px) !important;
  display: grid !important;
  grid-template-columns: minmax(430px, .86fr) minmax(0, 1.14fr) !important;
  column-gap: clamp(78px, 7vw, 136px) !important;
  align-items: center !important;
  align-content: center !important;
  margin-inline: auto !important;
}
.capability .capability-heading { min-width: 0 !important; max-width: 650px !important; }
.capability .capability-list {
  width: 100% !important;
  max-width: 800px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: grid !important;
  gap: clamp(20px, 2.8vh, 34px) !important;
  align-content: center !important;
}
.capability .capability-list li {
  position: relative !important;
  min-height: 0 !important;
  padding: 0 0 0 22px !important;
  border: 0 !important;
  background: transparent !important;
}
.capability .capability-list li::before {
  content: "✦" !important;
  position: absolute !important;
  left: 0 !important;
  top: .12em !important;
  opacity: .14 !important;
  transform: scale(.65) !important;
  transition: opacity 160ms ease, transform 200ms ease !important;
}
.capability .capability-list li:hover::before,
.capability .capability-list li:focus-within::before { opacity: 1 !important; transform: scale(1) !important; }
.capability .capability-list li span {
  font-size: clamp(18px, 1.28vw, 24px) !important;
  line-height: 1.08 !important;
}

/* 7. CONTACT ICONS ONLY ----------------------------------------------- */
.station-contact .social-links {
  display: grid !important;
  grid-template-columns: repeat(4, 52px) !important;
  gap: 12px !important;
  justify-content: start !important;
  align-items: center !important;
}
.station-contact .social-links a {
  width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
}
.station-contact .social-links a span { display: none !important; }
.station-contact .social-links a svg {
  width: 30px !important;
  height: 30px !important;
  stroke-width: 1.7 !important;
}

/* 8. TABLET ------------------------------------------------------------ */
@media (min-width: 901px) and (max-width: 1280px) {
  .station-process .process-layout,
  .station-experience .experience-layout,
  .station-tasks .tasks-layout,
  .capability .capability-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(24px, 3.6vh, 42px) !important;
    align-content: center !important;
  }
  .station-process .scene-header,
  .station-experience .scene-header,
  .station-tasks .scene-header,
  .capability .capability-heading { max-width: 100% !important; }
  .station-process .scene-title,
  .station-experience .scene-title,
  .station-tasks .scene-title,
  .capability .scene-title { max-width: 15ch !important; font-size: clamp(46px, 5.4vw, 68px) !important; }
  .station-process .process-flow,
  .station-experience .experience-copy,
  .station-tasks .tasks-list,
  .capability .capability-list { max-width: 100% !important; }
}

/* 9. MOBILE ------------------------------------------------------------ */
@media (max-width: 900px) {
  :root {
    --gvd-header-h: calc(68px + env(safe-area-inset-top)) !important;
    --gvd-scene-top: calc(var(--gvd-header-h) + 8px) !important;
  }
  .site-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: var(--gvd-header-h) !important;
    min-height: var(--gvd-header-h) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: center !important;
    column-gap: 10px !important;
    padding: calc(7px + env(safe-area-inset-top)) calc(var(--gvd-gutter) + var(--gvd-nav-lane)) 7px var(--gvd-gutter) !important;
    overflow: visible !important;
  }
  .brand-lockup,
  .header-actions {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    align-self: center !important;
  }
  .brand-lockup {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: center !important;
  }
  .brand-mark { width: 34px !important; height: 30px !important; }
  .brand-name {
    width: 100% !important;
    font-size: clamp(12px, 3.45vw, 15px) !important;
    line-height: .98 !important;
    white-space: nowrap !important;
    font-variation-settings: "wght" 700, "wdth" 80, "slnt" 0 !important;
  }
  .brand-role {
    margin-top: 4px !important;
    font-size: clamp(6.2px, 1.7vw, 7.4px) !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }
  .header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  .binary-link-header {
    width: auto !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 8px 0 !important;
    font-size: clamp(9.5px, 2.65vw, 11.5px) !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
  }
  .binary-link-header::after { bottom: 5px !important; }

  html.is-depth .station > .station-shell,
  html.is-depth .station > .station-shell-wide {
    transform: scale(var(--station-fit)) !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .hero-actions .binary-button,
  .hero-actions .binary-link,
  .station-contact .binary-button,
  .station-contact .binary-link {
    min-height: 48px !important;
    padding-block: 10px !important;
    font-size: clamp(11px, 3vw, 13px) !important;
  }

  .station-process .process-layout,
  .station-experience .experience-layout,
  .station-tasks .tasks-layout,
  .capability .capability-layout {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(18px, 2.8vh, 26px) !important;
    align-content: center !important;
  }
  .station-process .scene-title,
  .station-experience .scene-title,
  .station-tasks .scene-title,
  .capability .scene-title {
    width: 100% !important;
    max-width: calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane)) !important;
    font-size: clamp(31px, 8.4vw, 42px) !important;
    line-height: .9 !important;
  }
  .station-process .process-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 18px !important;
  }
  .station-process .process-step h3 { font-size: clamp(17px, 4.6vw, 21px) !important; }
  .station-process .process-step p { font-size: clamp(11px, 2.9vw, 12.5px) !important; }
  .station-experience .experience-copy {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 0 !important;
  }
  .station-experience .experience-column { display: contents !important; }
  .station-experience .experience-column p {
    max-width: 100% !important;
    margin-bottom: 12px !important;
    font-size: clamp(12px, 3.15vw, 14px) !important;
    line-height: 1.44 !important;
  }

  /* More character without cards or table borders: typographic star rhythm. */
  .station-tasks .tasks-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2.4vh, 22px) 16px !important;
    max-width: 100% !important;
  }
  .station-tasks .task-item {
    min-height: 50px !important;
    padding: 2px 0 2px 17px !important;
    display: flex !important;
    align-items: flex-start !important;
    font-size: clamp(14px, 3.8vw, 17px) !important;
    line-height: 1.02 !important;
    font-variation-settings: "wght" 660, "wdth" 92, "slnt" 0 !important;
  }
  .station-tasks .task-item::before {
    left: 0 !important;
    top: .08em !important;
    opacity: .32 !important;
    font-size: 9px !important;
  }
  .station-tasks .task-item:focus-visible::before,
  .station-tasks .task-item:active::before { opacity: 1 !important; transform: scale(1) !important; }

  .capability .capability-list { gap: 14px !important; }
  .capability .capability-list li { padding-left: 18px !important; }
  .capability .capability-list li span { font-size: clamp(13px, 3.45vw, 16px) !important; }

  .station-contact .social-links {
    grid-template-columns: repeat(4, 48px) !important;
    gap: 10px !important;
  }
  .station-contact .social-links a {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }
  .station-contact .social-links a svg { width: 28px !important; height: 28px !important; }
}

@media (max-width: 390px) {
  .site-header { column-gap: 7px !important; }
  .brand-lockup { grid-template-columns: 31px minmax(0, 1fr) !important; column-gap: 7px !important; }
  .brand-mark { width: 31px !important; height: 27px !important; }
  .brand-name { font-size: 11.5px !important; }
  .brand-role { font-size: 6px !important; }
  .binary-link-header { font-size: 9.25px !important; }
}


/* ---- src/v54-final.css ---- */
/* =====================================================================
   GVD v54 - restore the intended multi-column editorial composition.
   This patch removes the v53 one-column regression without redesigning
   the approved visual system, Z navigation, type or pixel transition.
   ===================================================================== */

/* The station itself already centers the shell between the fixed header
   and bottom cue. Do not fake centering by moving every scene upward. */
@media (min-width: 901px) {
  html.is-depth .station:not(.station-hero) > .station-shell,
  html.is-depth .station:not(.station-hero) > .station-shell-wide {
    transform: scale(var(--station-fit)) !important;
    transform-origin: center center !important;
  }

  /* Shared desktop geometry: one editorial title column + one content area. */
  .capability .capability-layout,
  .station-tasks .tasks-layout,
  .station-experience .experience-layout,
  .station-process .process-layout {
    width: min(100%, 1500px) !important;
    max-width: min(1500px, calc(100vw - (var(--gvd-gutter) * 2) - var(--gvd-nav-lane))) !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-rows: minmax(0, auto) !important;
    align-items: center !important;
    align-content: center !important;
    min-width: 0 !important;
  }

  /* Capability pages: approved split composition, not a vertical stack. */
  .capability .capability-layout {
    grid-template-columns: minmax(420px, .88fr) minmax(440px, 1.12fr) !important;
    column-gap: clamp(72px, 7vw, 132px) !important;
  }
  .capability .capability-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 650px !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: center !important;
  }
  .capability .capability-list {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 760px !important;
    min-width: 0 !important;
    margin: 0 !important;
    justify-self: end !important;
    align-self: center !important;
  }
  .capability .scene-title {
    max-width: 10.5ch !important;
    font-size: clamp(50px, min(4.1vw, 7.2vh), 78px) !important;
    line-height: .89 !important;
  }
  .capability .capability-thesis {
    max-width: 20ch !important;
  }

  /* Tasks: title left, stable 2 × 4 list right. */
  .station-tasks .tasks-layout {
    grid-template-columns: minmax(360px, .7fr) minmax(560px, 1.3fr) !important;
    column-gap: clamp(72px, 7vw, 132px) !important;
  }
  .station-tasks .scene-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 540px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  .station-tasks .tasks-list {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 860px !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(28px, 3.6vh, 44px) clamp(58px, 5vw, 92px) !important;
    justify-self: end !important;
    align-content: center !important;
  }
  .station-tasks .scene-title {
    max-width: 9.5ch !important;
    font-size: clamp(52px, min(4.15vw, 7.4vh), 80px) !important;
    line-height: .89 !important;
  }

  /* Experience: title remains a left-hand statement; copy stays readable right. */
  .station-experience {
    padding-bottom: var(--gvd-scene-bottom) !important;
  }
  .station-experience .experience-layout {
    grid-template-columns: minmax(500px, .92fr) minmax(620px, 1.08fr) !important;
    column-gap: clamp(76px, 7vw, 136px) !important;
  }
  .station-experience .scene-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 680px !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: center !important;
  }
  .station-experience .scene-title {
    width: 100% !important;
    max-width: 10.7ch !important;
    font-size: clamp(50px, min(4vw, 7.1vh), 76px) !important;
    line-height: .9 !important;
    text-wrap: balance !important;
  }
  .station-experience .experience-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 820px !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: clamp(42px, 3.5vw, 68px) !important;
    align-items: start !important;
    justify-self: end !important;
  }
  .station-experience .experience-column {
    min-width: 0 !important;
  }
  .station-experience .experience-column p {
    max-width: 35ch !important;
    font-size: clamp(15px, min(.98vw, 1.75vh), 18px) !important;
    line-height: 1.5 !important;
  }
  .station-experience .experience-column:last-child .binary-link {
    align-self: flex-start !important;
    margin-top: 6px !important;
  }

  /* Process: title left, 2 × 2 steps right. */
  .station-process {
    padding-bottom: var(--gvd-scene-bottom) !important;
  }
  .station-process .process-layout {
    grid-template-columns: minmax(390px, .72fr) minmax(620px, 1.28fr) !important;
    column-gap: clamp(76px, 7vw, 136px) !important;
  }
  .station-process .scene-header {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 570px !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: center !important;
  }
  .station-process .scene-title {
    width: 100% !important;
    max-width: 8.8ch !important;
    font-size: clamp(54px, min(4.25vw, 7.5vh), 82px) !important;
    line-height: .88 !important;
  }
  .station-process .process-flow {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 850px !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(38px, 4.8vh, 62px) clamp(62px, 5vw, 92px) !important;
    justify-self: end !important;
    align-content: center !important;
  }

  /* Contact keeps its split layout; icon row stays beside the identity block. */
  .station-contact .contact-layout {
    align-items: center !important;
    align-content: center !important;
  }
}

/* Keep the editorial split on ordinary laptops instead of collapsing it into
   one long column. Only dimensions and gaps tighten. */
@media (min-width: 901px) and (max-width: 1280px) {
  .capability .capability-layout {
    grid-template-columns: minmax(320px, .86fr) minmax(420px, 1.14fr) !important;
    column-gap: clamp(42px, 5vw, 68px) !important;
  }
  .station-tasks .tasks-layout {
    grid-template-columns: minmax(300px, .72fr) minmax(460px, 1.28fr) !important;
    column-gap: clamp(42px, 5vw, 68px) !important;
  }
  .station-experience .experience-layout {
    grid-template-columns: minmax(390px, .9fr) minmax(500px, 1.1fr) !important;
    column-gap: clamp(44px, 5vw, 72px) !important;
  }
  .station-process .process-layout {
    grid-template-columns: minmax(310px, .72fr) minmax(500px, 1.28fr) !important;
    column-gap: clamp(44px, 5vw, 72px) !important;
  }
  .station-experience .experience-copy,
  .station-process .process-flow,
  .station-tasks .tasks-list,
  .capability .capability-list {
    max-width: 100% !important;
  }
  .station-experience .scene-title,
  .station-process .scene-title,
  .station-tasks .scene-title,
  .capability .scene-title {
    font-size: clamp(43px, min(4.7vw, 7vh), 62px) !important;
  }
  .station-process .process-flow {
    gap: 30px 42px !important;
  }
}

/* Mobile remains intentionally linear because there is no physical width for
   a desktop split; this does not alter the approved mobile header or controls. */
@media (max-width: 900px) {
  .capability .capability-layout,
  .station-tasks .tasks-layout,
  .station-experience .experience-layout,
  .station-process .process-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
  }
}


/* ---- src/v55-final.css ---- */
/* =====================================================================
   GVD v55 - contact split restoration, larger signal icons,
   and single-star CTA behavior.
   ===================================================================== */

/* 1. CONTACT: restore a deliberate two-column desktop composition. */
@media (min-width: 901px) {
  .station-contact .station-shell.contact-layout {
    width: min(100%, 1540px) !important;
    height: 100% !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr) !important;
    column-gap: clamp(84px, 8vw, 156px) !important;
    align-items: center !important;
    align-content: center !important;
  }

  .station-contact .contact-main {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 790px !important;
    min-width: 0 !important;
    align-self: center !important;
    justify-self: start !important;
  }

  .station-contact .contact-title {
    width: 100% !important;
    max-width: 9.6ch !important;
    font-size: clamp(66px, min(5.35vw, 9.3vh), 104px) !important;
    line-height: .87 !important;
    text-wrap: balance !important;
  }

  .station-contact .contact-main > p:not(.scene-label) {
    max-width: 660px !important;
    font-size: clamp(16px, min(1.12vw, 1.92vh), 20px) !important;
    line-height: 1.5 !important;
  }

  .station-contact .contact-main .binary-button {
    margin-top: clamp(26px, 3.2vh, 40px) !important;
  }

  .station-contact .site-footer {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 560px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: clamp(42px, 5.5vh, 68px) !important;
    align-content: center !important;
    align-self: center !important;
    justify-self: end !important;
  }

  .station-contact .site-footer > div:first-child {
    display: grid !important;
    gap: 8px !important;
  }

  .station-contact .site-footer strong {
    font-size: clamp(34px, 2.65vw, 52px) !important;
    line-height: .9 !important;
    letter-spacing: -.045em !important;
    font-variation-settings: "wght" 720, "wdth" 110, "slnt" 0 !important;
  }

  .station-contact .site-footer > div:first-child > span:first-of-type {
    font-size: clamp(17px, 1.18vw, 22px) !important;
    line-height: 1.1 !important;
    letter-spacing: .02em !important;
  }

  .station-contact .site-footer .mono {
    font-size: clamp(11px, .78vw, 14px) !important;
    letter-spacing: .08em !important;
  }

  .station-contact .social-links {
    display: grid !important;
    grid-template-columns: repeat(2, 82px) !important;
    grid-auto-rows: 82px !important;
    gap: 18px !important;
    justify-content: start !important;
    align-items: center !important;
  }

  .station-contact .social-links a {
    position: relative !important;
    width: 82px !important;
    height: 82px !important;
    min-height: 82px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition: transform 220ms cubic-bezier(.22,.75,.22,1), color 180ms ease !important;
  }

  .station-contact .social-links a svg {
    width: 46px !important;
    height: 46px !important;
    stroke-width: 1.55 !important;
    transform-origin: center !important;
    will-change: transform, clip-path, filter !important;
  }
}

/* 2. MONOCHROME SIGNAL-LOSS HOVER FOR SOCIAL ICONS AND THE MAIN CTA. */
@keyframes gvdIconSignalLoss {
  0%, 100% { transform: translate3d(0,0,0) scale(1); clip-path: inset(0 0 0 0); filter: contrast(1); }
  18% { transform: translate3d(3px,-1px,0) scale(1.03); clip-path: inset(0 0 68% 0); filter: contrast(1.5); }
  36% { transform: translate3d(-3px,1px,0) scale(.99); clip-path: inset(30% 0 34% 0); filter: contrast(1.65); }
  54% { transform: translate3d(2px,0,0) scale(1.02); clip-path: inset(67% 0 0 0); filter: contrast(1.4); }
  72% { transform: translate3d(-1px,0,0) scale(1.01); clip-path: inset(12% 0 18% 0); filter: contrast(1.25); }
}

@keyframes gvdCtaSignalLoss {
  0%, 100% { transform: translate3d(0,0,0); filter: none; }
  28% { transform: translate3d(2px,0,0); filter: contrast(1.45); }
  48% { transform: translate3d(-2px,0,0); filter: blur(.25px) contrast(1.55); }
  68% { transform: translate3d(1px,0,0); filter: contrast(1.25); }
}

@media (hover:hover) and (pointer:fine) {
  .station-contact .social-links a:hover,
  .station-contact .social-links a:focus-visible {
    transform: translateY(-3px) !important;
  }
  .station-contact .social-links a:hover svg,
  .station-contact .social-links a:focus-visible svg {
    animation: gvdIconSignalLoss 430ms steps(2, end) 1 both !important;
  }
  .station-contact .binary-button:hover .binary-label,
  .station-contact .binary-button:focus-visible .binary-label {
    animation: gvdCtaSignalLoss 360ms steps(2, end) 1 both !important;
  }
}

/* 3. SINGLE STAR ONLY. The button already owns one decorative star via
      .binary-button::before; never generate a second one beside the label. */
.binary-button .binary-label::before,
.binary-link:not(.binary-link-header) .binary-label::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

/* Keep the existing star stable; hover rotates the same star instead of
   creating a duplicate. */
.binary-button::before {
  display: block !important;
}

/* 4. TABLET: preserve the two-column idea while tightening dimensions. */
@media (min-width: 901px) and (max-width: 1280px) {
  .station-contact .station-shell.contact-layout {
    grid-template-columns: minmax(0, 1.02fr) minmax(330px, .98fr) !important;
    column-gap: clamp(42px, 5.2vw, 72px) !important;
  }
  .station-contact .contact-title {
    max-width: 9ch !important;
    font-size: clamp(52px, min(5.2vw, 7.5vh), 72px) !important;
  }
  .station-contact .site-footer {
    max-width: 440px !important;
    gap: 34px !important;
  }
  .station-contact .social-links {
    grid-template-columns: repeat(2, 68px) !important;
    grid-auto-rows: 68px !important;
    gap: 14px !important;
  }
  .station-contact .social-links a {
    width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
  }
  .station-contact .social-links a svg {
    width: 38px !important;
    height: 38px !important;
  }
}

/* 5. MOBILE: clean vertical contact flow, large icon targets, no table lines. */
@media (max-width: 900px) {
  .station-contact .station-shell.contact-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
    gap: clamp(22px, 3.2vh, 34px) !important;
  }
  .station-contact .site-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .station-contact .social-links {
    display: grid !important;
    grid-template-columns: repeat(2, 50px) !important;
    grid-auto-rows: 50px !important;
    gap: 8px !important;
    justify-content: end !important;
  }
  .station-contact .social-links a {
    width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
  }
  .station-contact .social-links a svg {
    width: 28px !important;
    height: 28px !important;
  }
}


/* ---- src/v59-final.css ---- */
/* GVD v59 - stable v55 layout + compact v56 preloader + targeted Futura body copy.
   This file intentionally does not redefine scene grids or title dimensions. */

:root {
  --gvd-display-font: "grtsk-vf", sans-serif;
  --gvd-body-font: "futura-100-cyrillic-book", sans-serif;
  --gvd-meta-font: "futura-100-cyrillic", sans-serif;
}

/* Typography mapping: preserve the proven v55 geometry. */
.hero-description,
.hero-audience,
.impact-item p span,
.work-row-meta,
.capability-intro,
.capability-list li span,
.experience-copy p,
.collaboration-option p,
.process-step p,
.contact-main > p,
.form-intro > p,
.form-field input,
.form-field textarea,
.form-field select,
.choice-grid label,
.form-submit-area p,
.contact-success p {
  font-family: var(--gvd-body-font) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-stretch: normal !important;
  font-variation-settings: normal !important;
  line-height: 1.46 !important;
  letter-spacing: -.012em !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.mono,
.scene-label,
.hero-meta,
.site-location,
.systems-note,
.budget,
.preloader-terminal,
.preloader-copy-role,
.preloader-copy-location {
  font-family: var(--gvd-meta-font) !important;
  font-style: normal !important;
  font-stretch: normal !important;
  font-variation-settings: normal !important;
}

.gvd-title,
.gvd-work-title,
.gvd-section-title,
.brand-name,
.hero-role,
.hero-thesis,
.capability-thesis,
.task-item,
.process-step h3,
.binary-button,
.binary-link,
.binary-link-header,
.contact-title,
.brand-form-title,
.work-modal-panel h2,
.contact-success h2,
.site-footer strong {
  font-family: var(--gvd-display-font) !important;
}

/* Prevent the Futura metrics from widening grid tracks. */
.experience-column,
.collaboration-option,
.process-step,
.contact-main,
.form-field,
.form-submit-area,
.capability-heading,
.capability-list,
.work-row-meta,
.impact-item p {
  min-width: 0 !important;
}

/* Compact first-impression preloader restored from the approved direction. */
#preloader {
  --loader-progress: 0;
  background: var(--bg) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: opacity .64s cubic-bezier(.22,.61,.36,1), visibility .64s step-end !important;
}

#preloader::before,
#preloader::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(10,10,11,.085);
  pointer-events: none;
}
#preloader::before { top: 31%; }
#preloader::after { bottom: 16%; }

.preloader-console {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  justify-items: center !important;
  align-content: center !important;
  gap: clamp(20px, 3vh, 34px) !important;
  width: min(880px, calc(100vw - 96px)) !important;
  max-width: 880px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
}

.preloader-lockup {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
}

.preloader-mark {
  width: clamp(170px, 13vw, 245px) !important;
  height: auto !important;
  filter: none !important;
}

.preloader-logo-base,
.preloader-logo-slice {
  width: 100% !important;
  height: auto !important;
}

.preloader-terminal {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto minmax(170px, 1fr) auto !important;
  width: min(820px, 100%) !important;
  min-height: clamp(270px, 32vh, 350px) !important;
  border: 1px solid rgba(10,10,11,.20) !important;
  border-radius: 2px !important;
  background: rgba(246,245,241,.94) !important;
  box-shadow: 0 22px 64px rgba(10,10,11,.045) !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.preloader-terminal::after { display: none !important; }

.terminal-window-bar {
  min-height: 44px !important;
  padding: 0 clamp(15px, 1.6vw, 22px) !important;
  display: grid !important;
  grid-template-columns: auto auto auto minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 1px solid rgba(10,10,11,.12) !important;
  background: rgba(246,245,241,.97) !important;
}
.terminal-window-bar > span {
  width: 7px !important;
  height: 7px !important;
  border: 1px solid rgba(10,10,11,.42) !important;
  border-radius: 50% !important;
}
.terminal-window-bar b {
  margin-left: 6px !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .05em !important;
  color: rgba(10,10,11,.56) !important;
}
#preloader-phase {
  justify-self: end !important;
  font-style: normal !important;
  font-size: 8px !important;
  letter-spacing: .14em !important;
  color: rgba(10,10,11,.46) !important;
}

.terminal-history {
  display: grid !important;
  align-content: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: clamp(20px, 2.7vw, 34px) !important;
}
.terminal-entry {
  opacity: 0 !important;
  transform: translate3d(0, 7px, 0) !important;
  transition: opacity .32s ease, transform .42s cubic-bezier(.22,.61,.36,1) !important;
}
.terminal-entry:has(.terminal-command.is-active),
.terminal-entry.is-complete {
  opacity: 1 !important;
  transform: translate3d(0,0,0) !important;
}
.terminal-command,
.terminal-output {
  font-family: var(--gvd-meta-font) !important;
  font-size: clamp(10px, .72vw, 12.5px) !important;
  line-height: 1.42 !important;
  font-variation-settings: normal !important;
}
.terminal-output {
  padding-left: clamp(72px, 7vw, 104px) !important;
  color: rgba(10,10,11,.54) !important;
}

.preloader-progress-ui {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 44px !important;
  padding: 0 clamp(15px, 1.6vw, 22px) !important;
  border-top: 1px solid rgba(10,10,11,.12) !important;
}
.preloader-progress-track {
  position: relative !important;
  height: 3px !important;
  overflow: hidden !important;
  background: rgba(10,10,11,.095) !important;
}
#preloader-progress-fill {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background: var(--ink) !important;
  transform: scaleX(0);
  transform-origin: left center !important;
  transition: transform .42s cubic-bezier(.22,.61,.36,1) !important;
}
#preloader-progress-label {
  min-width: 38px !important;
  text-align: right !important;
  font-family: var(--gvd-display-font) !important;
  font-size: 11px !important;
  font-weight: 620 !important;
  font-variation-settings: "wght" 620, "wdth" 108, "slnt" 0 !important;
  letter-spacing: -.02em !important;
}

.preloader-copy {
  z-index: 3 !important;
  left: max(clamp(22px, 3.8vw, 64px), env(safe-area-inset-left)) !important;
  right: max(clamp(22px, 3.8vw, 64px), env(safe-area-inset-right)) !important;
  bottom: max(clamp(20px, 3.4vh, 42px), env(safe-area-inset-bottom)) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 20px !important;
  width: auto !important;
  color: var(--muted) !important;
}
.preloader-copy-role,
.preloader-copy-location {
  font-size: clamp(13px, .9vw, 16px) !important;
  opacity: .86 !important;
}

#preloader.is-signal-glitch .preloader-logo-base { animation: gvdV59LoaderLoss .40s steps(1,end) both !important; }
#preloader.is-signal-glitch .preloader-logo-slice-a { opacity: .54 !important; animation: gvdV59LoaderSliceA .40s steps(1,end) both !important; }
#preloader.is-signal-glitch .preloader-logo-slice-b { opacity: .40 !important; animation: gvdV59LoaderSliceB .40s steps(1,end) both !important; }
#preloader.is-signal-glitch .preloader-logo-slice-c { opacity: .30 !important; animation: gvdV59LoaderSliceC .40s steps(1,end) both !important; }

@keyframes gvdV59LoaderLoss {
  0%, 14%, 42%, 70%, 100% { clip-path: inset(0); transform: translate3d(0,0,0) scaleX(1); }
  15% { clip-path: inset(10% 0 67% 0); transform: translate3d(-7px,0,0) scaleX(1.025); }
  26% { clip-path: inset(45% 0 35% 0); transform: translate3d(5px,0,0) scaleX(.975); }
  43% { clip-path: inset(71% 0 8% 0); transform: translate3d(-4px,0,0) scaleX(1.018); }
  55% { clip-path: inset(27% 0 52% 0); transform: translate3d(4px,0,0) scaleX(.99); }
}
@keyframes gvdV59LoaderSliceA { 0%,100%{transform:translate3d(0,0,0)} 20%{transform:translate3d(-10px,0,0) scaleX(1.04)} 48%{transform:translate3d(7px,0,0) scaleX(.97)} }
@keyframes gvdV59LoaderSliceB { 0%,100%{transform:translate3d(0,0,0)} 28%{transform:translate3d(8px,0,0) scaleX(.96)} 62%{transform:translate3d(-6px,0,0) scaleX(1.03)} }
@keyframes gvdV59LoaderSliceC { 0%,100%{transform:translate3d(0,0,0)} 34%{transform:translate3d(-7px,0,0) scaleX(1.025)} 72%{transform:translate3d(5px,0,0) scaleX(.98)} }

#preloader.is-leaving {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
}
#preloader.is-leaving .preloader-console {
  transform: translate3d(0,-9px,0) scale(.992) !important;
  filter: blur(3px) !important;
  opacity: 0 !important;
  transition: transform .64s cubic-bezier(.22,.61,.36,1), filter .64s ease, opacity .48s ease !important;
}
#preloader.is-leaving .preloader-copy {
  opacity: 0 !important;
  transform: translate3d(0,6px,0) !important;
  transition: opacity .36s ease, transform .52s ease !important;
}
.preloader-pixel-gate { display: none !important; }

/* The pixel raster owns the first visible frame. */
.pixel-mosaic-target-v50.is-pixel-awaiting > span,
.pixel-mosaic-target-v50.is-pixel-rendering > span {
  visibility: hidden !important;
  opacity: 0 !important;
}
.pixel-mosaic-target-v50:not(.is-pixel-awaiting):not(.is-pixel-rendering) > span {
  visibility: visible !important;
  opacity: 1 !important;
}
.pixel-mosaic-target-v50.is-pixel-rendering > .pixel-mosaic-layer-v50 {
  visibility: visible !important;
  opacity: 1;
}

@media (max-width: 720px) {
  .preloader-console {
    width: min(100% - 34px, 520px) !important;
    gap: 18px !important;
  }
  .preloader-mark { width: min(164px, 44vw) !important; }
  .preloader-terminal {
    grid-template-rows: auto minmax(166px,1fr) auto !important;
    min-height: 276px !important;
  }
  .terminal-window-bar { min-height: 42px !important; }
  #preloader-phase { display: none !important; }
  .terminal-history { padding: 20px !important; }
  .terminal-output { padding-left: 44px !important; }
  .preloader-copy {
    left: max(18px, env(safe-area-inset-left)) !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
  .preloader-copy-role,
  .preloader-copy-location { font-size: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #preloader.is-signal-glitch .preloader-logo-base,
  #preloader.is-signal-glitch .preloader-logo-slice { animation: none !important; }
}


/* ---- src/v60-final.css ---- */
/* =====================================================================
   GVD v60 - bilingual interface, monochrome signal loss and loading polish.
   This layer does not redefine scene grids or title geometry from v59.
   ===================================================================== */

html { font-synthesis: none; }

/* Header language control: preserve the approved header geometry. */
.header-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(12px, 1.2vw, 20px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.language-toggle {
  appearance: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 58px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  background: transparent !important;
  color: rgba(10,10,11,.42) !important;
  font-family: "grtsk-vf", sans-serif !important;
  font-size: clamp(10px, .72vw, 12px) !important;
  font-weight: 560 !important;
  font-variation-settings: "wght" 560, "wdth" 92, "slnt" 0 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  transition: color 180ms ease, opacity 180ms ease !important;
}
.language-toggle i {
  font: inherit !important;
  opacity: .38 !important;
}
.language-toggle [data-language-option] {
  transition: color 180ms ease, opacity 180ms ease !important;
}
.language-toggle [data-language-option].is-current {
  color: var(--ink) !important;
}
.language-toggle:hover,
.language-toggle:focus-visible { color: var(--ink) !important; }
.language-toggle:focus-visible { outline: 1px solid currentColor !important; outline-offset: 5px !important; }

/* The social icons stay clean and contemporary - no glitch or clipping. */
.station-contact .social-links a,
.station-contact .social-links a::before,
.station-contact .social-links a::after,
.station-contact .social-links a svg {
  animation: none !important;
  filter: none !important;
  clip-path: none !important;
  text-shadow: none !important;
}
.station-contact .social-links a::before,
.station-contact .social-links a::after { content: none !important; display: none !important; }
.station-contact .social-links a svg {
  will-change: auto !important;
  transition: transform 240ms cubic-bezier(.22,.75,.22,1), opacity 180ms ease !important;
}
@media (hover:hover) and (pointer:fine) {
  .station-contact .social-links a:hover,
  .station-contact .social-links a:focus-visible {
    transform: translateY(-2px) !important;
  }
  .station-contact .social-links a:hover svg,
  .station-contact .social-links a:focus-visible svg {
    animation: none !important;
    transform: scale(1.055) !important;
    opacity: .72 !important;
  }
}

/* Fixed identity signal: same black artwork, horizontal tearing and noise only. */
.brand-lockup {
  isolation: isolate !important;
}
.brand-lockup::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: -3px -5px;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(10,10,11,.16) 0,
    rgba(10,10,11,.16) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: multiply;
}
.brand-symbol-echo,
.brand-name::before,
.brand-name::after,
.brand-role::before,
.brand-role::after {
  color: currentColor !important;
  text-shadow: none !important;
  mix-blend-mode: normal !important;
  filter: grayscale(1) contrast(1.35) !important;
}
.brand-lockup.is-signal-glitch {
  animation: gvdV60SignalBody 380ms steps(1,end) both !important;
}
.brand-lockup.is-signal-glitch::after {
  animation: gvdV60SignalNoise 380ms steps(6,end) both !important;
}
.brand-lockup.is-signal-glitch .brand-symbol {
  filter: grayscale(1) contrast(1.45) !important;
  animation: gvdV60SignalBase 380ms steps(1,end) both !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-a,
.brand-lockup.is-signal-glitch .brand-name::before,
.brand-lockup.is-signal-glitch .brand-role::before {
  opacity: .48 !important;
  color: var(--ink) !important;
  transform: translate3d(5px,0,0) skewX(-5deg) scaleX(1.025) !important;
  clip-path: inset(8% 0 61% 0) !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-b,
.brand-lockup.is-signal-glitch .brand-name::after,
.brand-lockup.is-signal-glitch .brand-role::after {
  opacity: .38 !important;
  color: var(--ink) !important;
  transform: translate3d(-4px,0,0) skewX(6deg) scaleX(.985) !important;
  clip-path: inset(53% 0 13% 0) !important;
}
.brand-lockup.is-signal-glitch .brand-symbol-echo-c {
  opacity: .28 !important;
  filter: grayscale(1) contrast(1.55) !important;
  transform: translate3d(3px,0,0) scaleX(1.05) !important;
  clip-path: inset(76% 0 3% 0) !important;
}

@keyframes gvdV60SignalBody {
  0%, 100% { transform: translate3d(0,0,0); filter: none; }
  16% { transform: translate3d(1px,0,0) skewX(-.45deg); filter: contrast(1.12); }
  31% { transform: translate3d(-2px,0,0) scaleX(1.006); filter: contrast(1.28); }
  48% { transform: translate3d(2px,0,0) skewX(.55deg); filter: contrast(1.18); }
  67% { transform: translate3d(-1px,0,0) scaleX(.996); filter: contrast(1.34); }
  82% { transform: translate3d(1px,0,0); filter: contrast(1.12); }
}
@keyframes gvdV60SignalBase {
  0%, 100% { clip-path: inset(0); transform: translate3d(0,0,0); }
  18% { clip-path: inset(9% 0 69% 0); transform: translate3d(-5px,0,0) scaleX(1.03); }
  37% { clip-path: inset(43% 0 36% 0); transform: translate3d(4px,0,0) scaleX(.98); }
  58% { clip-path: inset(72% 0 7% 0); transform: translate3d(-3px,0,0) scaleX(1.02); }
  76% { clip-path: inset(25% 0 55% 0); transform: translate3d(3px,0,0) scaleX(.99); }
}
@keyframes gvdV60SignalNoise {
  0%,100% { opacity: 0; transform: translateX(0); }
  15% { opacity: .28; transform: translateX(-2px); }
  32% { opacity: .12; transform: translateX(3px); }
  49% { opacity: .32; transform: translateX(-1px); }
  68% { opacity: .17; transform: translateX(2px); }
  84% { opacity: .24; transform: translateX(-3px); }
}

/* English copy is slightly longer; keep the established geometry stable. */
html[lang="en"] .binary-link-header {
  font-variation-settings: "wght" 620, "wdth" 86, "slnt" 0 !important;
}
html[lang="en"] .task-item,
html[lang="en"] .capability-list li span {
  letter-spacing: -.025em !important;
}

@media (max-width: 900px) {
  .header-actions {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    align-items: center !important;
  }
  .header-action-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .binary-link-header {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    justify-content: flex-end !important;
    padding-inline: 0 !important;
  }
  .language-toggle {
    min-width: 42px !important;
    width: 42px !important;
    min-height: 44px !important;
    justify-content: flex-end !important;
    gap: 3px !important;
    font-size: 8.5px !important;
  }
  html[lang="en"] .binary-link-header {
    font-size: clamp(8.7px, 2.35vw, 10.6px) !important;
  }
}

@media (max-width: 390px) {
  .header-action-row { grid-template-columns: minmax(0,1fr) 38px !important; gap: 5px !important; }
  .language-toggle { width: 38px !important; min-width: 38px !important; font-size: 8px !important; }
  html[lang="en"] .binary-link-header { font-size: 8.7px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-lockup.is-signal-glitch,
  .brand-lockup.is-signal-glitch::after,
  .brand-lockup.is-signal-glitch .brand-symbol,
  .brand-lockup.is-signal-glitch .brand-symbol-echo,
  .brand-lockup.is-signal-glitch .brand-name::before,
  .brand-lockup.is-signal-glitch .brand-name::after,
  .brand-lockup.is-signal-glitch .brand-role::before,
  .brand-lockup.is-signal-glitch .brand-role::after {
    animation: none !important;
    opacity: initial !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* Deployment hardening */
html, body { -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img, svg, video, canvas { -webkit-user-drag: none; user-drag: none; }
.form-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.form-status {
  flex-basis: 100%;
  min-height: 1.4em;
  margin: 8px 0 0 !important;
  color: #b32323 !important;
  font-size: 11px !important;
}
.binary-button-submit[disabled] { opacity: .55; cursor: wait; }
.security-warning[hidden] { display: none !important; }
.security-warning {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6,6,6,.97);
  color: #f6f5f1;
  backdrop-filter: blur(18px);
}
.security-warning-panel {
  position: relative;
  width: min(820px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: clamp(28px, 5vw, 68px);
  border: 1px solid rgba(255,255,255,.22);
  background: #0d0d0d;
  box-shadow: 0 36px 120px rgba(0,0,0,.65);
}
.security-warning-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #ff4e2f;
}
.security-warning-kicker {
  margin: 0 0 18px;
  color: #ff4e2f;
  font-size: 9px;
  letter-spacing: .16em;
}
.security-warning h2 {
  margin: 0 58px 34px 0;
  font-family: "grtsk-vf", Arial, sans-serif !important;
  font-size: clamp(42px, 7vw, 92px);
  line-height: .9;
  letter-spacing: -.055em;
}
.security-warning-data {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
.security-warning-data > div {
  display: grid;
  grid-template-columns: minmax(150px,.75fr) 1.25fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.security-warning-data dt {
  color: rgba(255,255,255,.58);
  font-family: "futura-100-cyrillic", monospace !important;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.security-warning-data dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: "futura-100-cyrillic", monospace !important;
  font-size: 12px;
}
.security-warning-final {
  margin: 34px 0 0;
  color: #ff4e2f;
  font-family: "grtsk-vf", Arial, sans-serif !important;
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.security-warning-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.3);
  background: transparent;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}
body.security-modal-open { overflow: hidden !important; }
@media (max-width: 620px) {
  .security-warning { padding: 10px; }
  .security-warning-panel { max-height: calc(100vh - 20px); padding: 30px 22px 32px 27px; }
  .security-warning h2 { margin-right: 42px; font-size: 43px; }
  .security-warning-data > div { grid-template-columns: 1fr; gap: 5px; padding: 11px 0; }
  .security-warning-close { top: 12px; right: 12px; width: 38px; height: 38px; }
}

/* ========================================================================
   FINAL DEPLOY v3 - light background, readable contact form, safe warning UI
   ======================================================================== */

/* Contact overlay: remove the oversized empty left column on desktop. */
.contact-overlay-body {
  width: min(100%, 1280px) !important;
  padding: clamp(42px, 5vw, 76px) clamp(24px, 4vw, 64px) 96px !important;
}
.form-intro {
  display: block !important;
  width: min(100%, 1120px) !important;
  margin: 0 auto 42px !important;
}
.form-intro .scene-label {
  display: block !important;
  margin: 0 0 14px !important;
  font-size: 11px !important;
  color: #555961 !important;
}
.form-intro h2,
.brand-form-title {
  width: 100% !important;
  margin: 0 0 18px !important;
  font-size: clamp(50px, 5.2vw, 88px) !important;
  line-height: .9 !important;
}
.form-intro > p:last-child {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 !important;
  color: #585c64 !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
}
#contact-form {
  display: block !important;
  width: min(100%, 1120px) !important;
  margin: 0 auto !important;
}
.form-section,
.form-section-wide {
  grid-column: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 26px 22px !important;
  width: 100% !important;
  padding: 42px 0 !important;
  border-top: 1px solid rgba(9, 9, 10, .20) !important;
}
.form-section h3 {
  margin-bottom: 2px !important;
  font-size: clamp(27px, 2.2vw, 36px) !important;
}
.form-field {
  min-width: 0 !important;
  gap: 10px !important;
}
.form-field > span,
.usage-fieldset legend {
  color: #4c5058 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: .015em !important;
  text-transform: none !important;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100% !important;
  min-height: 56px !important;
  padding: 14px 16px !important;
  border: 1px solid #b9bbb8 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #09090a !important;
  -webkit-text-fill-color: #09090a !important;
  caret-color: #09090a !important;
  box-shadow: 0 1px 0 rgba(9,9,10,.04) !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}
.form-field textarea {
  min-height: 150px !important;
  resize: vertical !important;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #858890 !important;
  -webkit-text-fill-color: #858890 !important;
  opacity: 1 !important;
}
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: #858881 !important;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: #09090a !important;
  outline: 3px solid rgba(9, 9, 10, .10) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
  border-color: #b32323 !important;
  outline-color: rgba(179,35,35,.10) !important;
}
.choice-grid {
  gap: 12px !important;
}
.choice-grid span {
  min-height: 56px !important;
  padding: 12px 15px !important;
  border-color: #b9bbb8 !important;
  background: #fff !important;
  color: #4f535b !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
.choice-grid label:hover span {
  border-color: #09090a !important;
}
.choice-grid input:checked + span {
  background: #09090a !important;
  color: #fff !important;
  border-color: #09090a !important;
}

/* Submit row: never overlap button, privacy copy or status. */
.form-submit-area {
  display: grid !important;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px 28px !important;
  padding-top: 34px !important;
}
.form-submit-area > p:not(.form-status) {
  min-width: 0 !important;
  max-width: 620px !important;
  color: #5d6169 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.form-status {
  grid-column: 1 / -1 !important;
  min-height: 1.5em !important;
  margin: 2px 0 0 !important;
  font-size: 13px !important;
}
.binary-button-submit {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
}

/* Compact, closable security warning. */
.security-warning {
  padding: 18px !important;
  cursor: auto !important;
}
.security-warning-panel {
  width: min(720px, calc(100vw - 36px)) !important;
  max-height: min(88dvh, 760px) !important;
  padding: 28px 34px 30px !important;
  overflow: auto !important;
  border-radius: 8px !important;
}
.security-warning-kicker { display: none !important; }
.security-warning h2 {
  margin: 0 150px 22px 0 !important;
  font-size: clamp(36px, 4.4vw, 58px) !important;
  line-height: .94 !important;
}
.security-warning-data > div {
  grid-template-columns: minmax(128px, .55fr) minmax(0, 1.45fr) !important;
  gap: 18px !important;
  padding: 10px 0 !important;
}
.security-warning-data dt {
  font-size: 9px !important;
}
.security-warning-data dd {
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.security-warning-final {
  margin: 22px 0 0 !important;
  font-size: clamp(18px, 2.4vw, 27px) !important;
}
.security-warning-close {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  float: right !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: auto !important;
  min-width: 104px !important;
  height: 40px !important;
  margin: 0 0 -40px auto !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-radius: 999px !important;
  background: #171717 !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.security-warning-close b {
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
.security-warning-close:hover,
.security-warning-close:focus-visible {
  background: #fff !important;
  color: #09090a !important;
  outline: 2px solid #fff !important;
  outline-offset: 3px !important;
}
html.has-custom-cursor body.security-modal-open,
html.has-custom-cursor body.security-modal-open .security-warning,
html.has-custom-cursor body.security-modal-open .security-warning * {
  cursor: auto !important;
}
html.has-custom-cursor body.security-modal-open .security-warning-close {
  cursor: pointer !important;
}
body.security-modal-open #site-cursor {
  display: none !important;
}

@media (max-width: 760px) {
  .contact-overlay-body {
    padding: 34px 17px 72px !important;
  }
  .form-intro {
    margin-bottom: 30px !important;
  }
  .form-intro h2,
  .brand-form-title {
    font-size: clamp(43px, 13vw, 62px) !important;
  }
  .form-intro > p:last-child {
    font-size: 15px !important;
  }
  .form-section,
  .form-section-wide {
    grid-template-columns: 1fr !important;
    gap: 21px !important;
    padding: 30px 0 !important;
  }
  .form-field,
  .form-field-wide {
    grid-column: 1 !important;
  }
  .choice-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .form-submit-area {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
  .form-submit-area > p:not(.form-status) {
    font-size: 13px !important;
  }
  .security-warning {
    padding: 10px !important;
  }
  .security-warning-panel {
    width: min(100%, calc(100vw - 20px)) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 20px 19px 24px 24px !important;
  }
  .security-warning h2 {
    margin: 14px 0 18px !important;
    padding-right: 8px !important;
    font-size: clamp(31px, 10.5vw, 43px) !important;
  }
  .security-warning-data > div {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 8px 0 !important;
  }
  .security-warning-close {
    float: none !important;
    min-width: 94px !important;
    height: 38px !important;
    margin: 0 0 18px auto !important;
  }
  .security-warning h2 {
    clear: both !important;
  }
}

@media (max-width: 430px) {
  .choice-grid {
    grid-template-columns: 1fr !important;
  }
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px !important;
  }
}


/* Final mobile contact-title containment fix. */
.contact-overlay {
  overflow-x: hidden !important;
}
.contact-overlay-body,
.form-intro,
.brand-form-title,
.form-intro > p:last-child,
#contact-form {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.brand-form-title {
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}
.brand-form-title > span {
  min-width: 0 !important;
}
.form-intro > p:last-child {
  overflow-wrap: anywhere !important;
}

@media (max-width: 760px) {
  .brand-form-title {
    font-size: clamp(34px, 9.5vw, 42px) !important;
    line-height: .88 !important;
    letter-spacing: -.065em !important;
  }
  .brand-form-title > span {
    display: block !important;
    width: 100% !important;
  }
  .brand-form-title > span + span {
    margin-top: .04em !important;
  }
  .form-intro > p:last-child {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.48 !important;
  }
}

@media (max-width: 390px) {
  .brand-form-title {
    font-size: clamp(32px, 9.2vw, 36px) !important;
  }
}