@layer reset, base, layout, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote,
  dl,
  dd,
  ol {
    margin: 0;
  }

  button,
  input,
  textarea,
  select {
    color: inherit;
    font: inherit;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

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

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

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* Public maintenance page and password entry point. */
body.maintenance-shell {
  min-height: 100svh;
  background: #080908;
}

.maintenance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: center;
  margin-top: 28px;
}

.maintenance-actions .maintenance-contact {
  margin-top: 0;
}

.maintenance-login {
  display: inline-flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  min-width: 150px;
  min-height: 46px;
  padding: 0 17px;
  border: 1px solid rgb(217 255 67 / 42%);
  border-radius: 999px;
  color: #d9ff43;
  background: rgb(217 255 67 / 5%);
  font: 650 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 240ms cubic-bezier(.16, 1, .3, 1);
}

.maintenance-login:hover,
.maintenance-login:focus-visible {
  border-color: #d9ff43;
  color: #0a0d08;
  background: #d9ff43;
  outline: 0;
  transform: translateY(-2px);
}

.maintenance-login span:last-child {
  font-size: 16px;
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1);
}

.maintenance-login:hover span:last-child,
.maintenance-login:focus-visible span:last-child {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .maintenance-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .maintenance-login {
    width: min(100%, 260px);
  }
}

.site-offline> :not(.maintenance-page):not(.skip-link){display:none!important}.maintenance-page{display:flex;min-height:100svh;padding:clamp(24px,4vw,58px);flex-direction:column;color:#f2f3ef;background:radial-gradient(circle at 78% 22%,rgb(217 255 67 / 10%),transparent 30%),#080908}.maintenance-brand img{display:block;width:min(220px,55vw);height:auto}.maintenance-page>section{width:min(100%,1100px);margin:auto;padding:80px 0}.maintenance-page>section>span{color:#d9ff43;font-size:10px;font-weight:650;letter-spacing:.17em;text-transform:uppercase}.maintenance-page h1{margin:22px 0 28px;font-size:clamp(72px,12vw,178px);font-weight:500;line-height:.77;letter-spacing:-.075em}.maintenance-page h1 em{color:#d9ff43;font-family:Georgia,serif;font-weight:400}.maintenance-page p{max-width:590px;color:#aeb2ab;font-size:clamp(17px,2vw,23px);line-height:1.5}.maintenance-contact{display:inline-block;margin-top:24px;padding-bottom:5px;border-bottom:1px solid #d9ff43;color:#d9ff43}.maintenance-page>footer{display:flex;justify-content:space-between;gap:24px;padding-top:22px;border-top:1px solid rgb(255 255 255 / 12%);color:#777c76;font-size:11px}.maintenance-page>footer nav{display:flex;gap:20px}.maintenance-page>footer a:hover{color:#d9ff43}@media(max-width:600px){.maintenance-page>footer{align-items:flex-start;flex-direction:column}.maintenance-page h1{font-size:70px}}

.consent-settings{padding:0;border:0;color:inherit;background:transparent;cursor:pointer;font:inherit}
.privacy-consent{position:fixed;z-index:1000;right:20px;bottom:20px;left:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;max-width:1080px;margin:auto;padding:24px;border:1px solid rgb(255 255 255 / 18%);color:#f2f3ef;background:rgb(10 12 10 / 97%);box-shadow:0 24px 80px rgb(0 0 0 / 55%);opacity:0;transform:translateY(18px);transition:opacity .22s ease,transform .22s ease}.privacy-consent[hidden]{display:none}.privacy-consent.is-visible{opacity:1;transform:none}.privacy-consent span{color:#d9ff43;font-size:9px;letter-spacing:.16em;text-transform:uppercase}.privacy-consent h2{margin:8px 0;font-size:clamp(22px,3vw,36px);font-weight:500;letter-spacing:-.035em}.privacy-consent p{max-width:720px;margin:0 0 8px;color:#aeb2ab;font-size:13px;line-height:1.5}.privacy-consent a{color:#d9ff43;font-size:12px;text-decoration:underline;text-underline-offset:.2em}.privacy-consent-actions{display:flex;gap:8px}.privacy-consent-actions button{min-height:44px;padding:0 15px;border:1px solid rgb(255 255 255 / 20%);color:#eee;background:#151815;cursor:pointer}.privacy-consent-actions button:last-child{color:#080908;border-color:#d9ff43;background:#d9ff43}@media(max-width:720px){.privacy-consent{grid-template-columns:1fr;padding:20px}.privacy-consent-actions{display:grid;grid-template-columns:1fr 1fr}.privacy-consent-actions button{padding:8px}}

@layer base {
  :root {
    --ink: #080908;
    --ink-soft: #101210;
    --panel: #141714;
    --paper: #efeee7;
    --paper-soft: #c9cac2;
    --muted: #8c918b;
    --line: rgb(255 255 255 / 12%);
    --accent: #d9ff43;
    --accent-rgb: 217 255 67;
    --project-accent: #7ee7ff;
    --header-h: 74px;
    --pad: clamp(22px, 4.2vw, 68px);
    --max: 1600px;
    --content-edge: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    color-scheme: dark;
  }

  ::selection {
    color: var(--ink);
    background: var(--accent);
  }

  body {
    min-width: 320px;
    overflow-x: clip;
    color: #f3f4ef;
    background: var(--ink);
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }

  body.menu-open,
  body.contact-modal-open {
    overflow: hidden;
  }

  h1,
  h2,
  h3,
  .brand {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    letter-spacing: -0.055em;
  }

  button {
    border: 0;
    cursor: pointer;
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 5px;
  }

  .skip-link {
    position: fixed;
    z-index: 1000;
    top: 14px;
    left: 14px;
    padding: 10px 14px;
    color: var(--ink);
    background: var(--accent);
    transform: translateY(-160%);
    transition: transform 180ms ease;
  }

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

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@layer layout {
  .section-shell {
    width: min(100%, var(--max));
    margin-inline: auto;
    padding: clamp(100px, 13vw, 210px) var(--pad);
  }

  .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: clamp(40px, 9vw, 150px);
    align-items: end;
    margin-bottom: clamp(64px, 9vw, 132px);
  }

  .section-heading h2,
  .process-intro h2 {
    max-width: 880px;
    font-size: clamp(52px, 7.2vw, 120px);
    line-height: 0.88;
  }

  .section-heading h2 em,
  .process-intro h2 em {
    color: var(--accent);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.92em;
    font-weight: 400;
    letter-spacing: -0.065em;
  }

  .section-heading > p {
    max-width: 460px;
    color: var(--muted);
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.55;
  }

  .section-index,
  .section-kicker,
  .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.17em;
    text-transform: uppercase;
  }

  .section-index {
    display: block;
    margin-bottom: 28px;
    color: var(--muted);
  }
}

@layer components {
  .page-noise {
    position: fixed;
    z-index: 80;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image:
      repeating-radial-gradient(circle at 0 0, transparent 0, rgb(255 255 255 / 14%) 1px, transparent 1.6px, transparent 4px),
      repeating-linear-gradient(90deg, rgb(255 255 255 / 2%) 0 1px, transparent 1px 3px);
    background-size: 5px 5px, 11px 11px;
    mix-blend-mode: soft-light;
  }

  .cursor-glow {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 480px;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgb(var(--accent-rgb) / 10%) 0, transparent 66%);
    translate: calc(var(--mouse-x, -1000px) - 50%) calc(var(--mouse-y, -1000px) - 50%);
    transition: opacity 500ms ease;
  }

  body.pointer-ready .cursor-glow {
    opacity: 1;
  }

  .site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    height: var(--header-h);
    padding-inline: var(--content-edge);
    border-bottom: 1px solid transparent;
    background: linear-gradient(to bottom, rgb(8 9 8 / 84%), rgb(8 9 8 / 20%));
    transition:
      height 350ms var(--ease-out),
      background 350ms ease,
      border-color 350ms ease,
      transform 350ms var(--ease-out);
  }

  .site-header.is-scrolled {
    height: 64px;
    border-color: var(--line);
    background: rgb(8 9 8 / 84%);
    backdrop-filter: blur(18px) saturate(1.3);
  }

  .site-header.is-hidden:not(.menu-open) {
    transform: translateY(-105%);
  }

  .brand {
    position: relative;
    z-index: 102;
    display: inline-flex;
    gap: 0.16em;
    align-items: center;
    justify-self: start;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.19em;
    min-height: 44px;
  }

  .brand-logo-lockup {
    position: relative;
    display: block;
    width: auto;
    max-width: min(220px, 42vw);
    height: 24px;
    aspect-ratio: 512 / 63;
    flex: none;
  }

  .brand-logo {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
  }

  .brand i {
    position: relative;
    width: 0.7em;
    height: 0.7em;
    margin-inline: -0.08em -0.14em;
    border: 1px solid currentColor;
    border-radius: 50%;
  }

  .brand i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    content: "";
    background: var(--accent);
    translate: -50% -50%;
  }

  .desktop-nav {
    display: flex;
    gap: clamp(26px, 3.8vw, 60px);
    align-items: center;
    justify-self: center;
    color: #b8bab4;
    font-size: 13px;
  }

  .desktop-nav a {
    position: relative;
    padding-block: 10px;
    transition: color 220ms ease;
  }

  .desktop-nav a::after {
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 1px;
    content: "";
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms var(--ease-out);
  }

  .desktop-nav a:hover,
  .desktop-nav a:focus-visible {
    color: #fff;
  }

  .desktop-nav a:hover::after,
  .desktop-nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .header-cta {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-self: end;
    padding: 9px 9px 9px 18px;
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 999px;
    font-size: 12px;
    transition:
      color 250ms ease,
      background 250ms ease,
      border-color 250ms ease;
  }

  .header-cta svg {
    width: 30px;
    height: 30px;
    padding: 8px;
    border-radius: 50%;
    color: var(--ink);
    background: var(--accent);
  }

  .header-cta path,
  .text-link path,
  .project-next path,
  .contact-action path {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  .header-cta:hover {
    color: var(--ink);
    border-color: var(--accent);
    background: var(--accent);
  }

  .header-cta:hover svg {
    color: var(--accent);
    background: var(--ink);
  }

  .menu-toggle,
  .mobile-menu {
    display: none;
  }

  .section-rail {
    position: fixed;
    z-index: 70;
    top: 50%;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 44px;
    padding-block: 16px;
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 24px;
    background: rgb(8 9 8 / 70%);
    backdrop-filter: blur(14px);
    translate: 0 -50%;
  }

  .section-rail::before {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 1px;
    content: "";
    background: rgb(255 255 255 / 12%);
    translate: -50% 0;
  }

  .rail-progress {
    position: absolute;
    z-index: 0;
    top: 20px;
    left: 50%;
    width: 1px;
    height: var(--rail-progress-height, 15px);
    background: var(--accent);
    translate: -50% 0;
    transition: height 360ms var(--ease-in-out);
  }

  .section-rail a {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 38px;
    color: #727772;
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .section-rail a::before {
    position: absolute;
    z-index: -1;
    width: 7px;
    height: 7px;
    border: 1px solid #747974;
    border-radius: 50%;
    content: "";
    background: var(--ink);
    transition: 250ms ease;
  }

  .section-rail a span,
  .section-rail a b {
    position: absolute;
    right: 48px;
    padding: 5px 8px;
    border-radius: 4px;
    color: #d8dad5;
    background: rgb(8 9 8 / 92%);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(7px);
    transition: 220ms ease;
  }

  .section-rail a b {
    display: none;
  }

  .section-rail a:hover span,
  .section-rail a:focus-visible span {
    opacity: 1;
    transform: none;
  }

  .section-rail a.is-active::before {
    width: 11px;
    height: 11px;
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 18px rgb(var(--accent-rgb) / 70%);
  }

  .hero {
    position: relative;
    display: grid;
    min-height: max(780px, 100svh);
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(circle at 76% 48%, rgb(var(--accent-rgb) / 7%), transparent 36%),
      var(--ink);
  }

  .hero-scene,
  .hero-accent-layer,
  .hero-scene-vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero-scene {
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .hero-scene canvas {
    width: 100% !important;
    height: 100% !important;
  }

  .hero-scene.is-unicorn-unavailable {
    background:
      radial-gradient(ellipse 48% 64% at 68% 44%, rgb(217 255 67 / 20%), transparent 72%),
      radial-gradient(ellipse 32% 44% at 42% 72%, rgb(126 231 255 / 10%), transparent 74%),
      #080908;
  }

  .hero-accent-layer {
    z-index: 1;
    pointer-events: none;
    color: var(--accent);
    opacity: 0.72;
    background:
      radial-gradient(
        ellipse 58% 68% at 72% 48%,
        color-mix(in srgb, currentcolor 30%, transparent) 0,
        color-mix(in srgb, currentcolor 12%, transparent) 38%,
        transparent 72%
      ),
      radial-gradient(
        ellipse 34% 44% at 38% 76%,
        color-mix(in srgb, currentcolor 14%, transparent) 0,
        transparent 76%
      );
    mix-blend-mode: overlay;
    transition: color 1100ms var(--ease-in-out);
  }

  .hero-scene-vignette {
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgb(8 9 8 / 84%) 0, rgb(8 9 8 / 20%) 50%, rgb(8 9 8 / 42%) 100%),
      linear-gradient(0deg, var(--ink) 0, transparent 24%, transparent 76%, rgb(8 9 8 / 48%) 100%);
  }

  .hero-topline {
    position: absolute;
    z-index: 3;
    top: calc(var(--header-h) + 26px);
    right: var(--content-edge);
    left: var(--content-edge);
    display: flex;
    gap: 12px;
    align-items: center;
    color: #a6aaa5;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .hero-topline span:last-child {
    margin-left: auto;
  }

  .status-dot,
  .contact-meta i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px rgb(var(--accent-rgb) / 78%);
  }

  .hero-copy {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-self: center;
    width: min(100%, var(--max));
    margin-inline: auto;
    padding: calc(var(--header-h) + 66px) var(--pad) 84px;
  }

  .hero-copy .eyebrow {
    margin-bottom: clamp(24px, 4vh, 48px);
    color: #999e98;
  }

  .hero-title {
    max-width: 1160px;
    font-size: clamp(66px, 10.3vw, 170px);
    line-height: 0.74;
    text-wrap: balance;
  }

  .hero-title .line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.13em;
  }

  .hero-title .line:last-child {
    padding-right: 0.1em;
    padding-bottom: 0.3em;
    margin-bottom: -0.08em;
  }

  .hero-title .line > span {
    display: block;
    transform: translateY(112%);
    animation: title-in 1100ms var(--ease-out) forwards;
  }

  .hero-title .line:first-child > span {
    letter-spacing: -0.025em;
  }

  .hero-title .line:nth-child(2) > span {
    animation-delay: 100ms;
  }

  .hero-title .line:nth-child(3) > span {
    animation-delay: 200ms;
  }

  .hero-title .line-shift {
    padding-left: clamp(68px, 12vw, 210px);
  }

  .hero-title em {
    display: inline-block;
    color: var(--accent);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: -0.07em;
    transform-origin: left center;
    transition: color 600ms ease;
    will-change: opacity, transform, filter;
  }

  .hero-title em.is-leaving {
    animation: hero-word-out 260ms var(--ease-in-out) both;
  }

  .hero-title em.is-entering {
    animation: hero-word-in 520ms var(--ease-out) both;
  }

  .hero-bottom {
    display: flex;
    gap: 36px;
    align-items: end;
    justify-content: space-between;
    max-width: 780px;
    margin-top: clamp(38px, 6vh, 70px);
  }

  .hero-bottom > p {
    max-width: 480px;
    color: #9da19b;
    font-size: clamp(15px, 1.2vw, 19px);
  }

  .text-link {
    display: inline-flex;
    flex: none;
    gap: 10px;
    align-items: center;
    padding-bottom: 7px;
    border-bottom: 1px solid rgb(255 255 255 / 28%);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-height: 44px;
  }

  .text-link svg {
    width: 18px;
  }

  .mode-console {
    position: fixed;
    z-index: 60;
    top: 50%;
    right: max(var(--pad), 7vw);
    width: min(310px, 24vw);
    height: var(--console-expanded-height, auto);
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 10px;
    background: rgb(10 12 10 / 54%);
    box-shadow: 0 24px 80px rgb(0 0 0 / 35%);
    backdrop-filter: blur(18px);
    transform: translateY(-50%);
    transition:
      top 500ms var(--ease-in-out),
      right 500ms var(--ease-in-out),
      bottom 500ms var(--ease-in-out),
      width 500ms var(--ease-in-out),
      height 500ms var(--ease-in-out),
      padding 500ms var(--ease-in-out),
      border-radius 500ms var(--ease-in-out),
      transform 500ms var(--ease-in-out),
      box-shadow 300ms ease;
    user-select: none;
  }

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

  .mode-console::after {
    position: absolute;
    z-index: 0;
    inset: -45%;
    border-radius: 50%;
    content: "";
    background:
      radial-gradient(circle at 35% 50%, rgb(var(--accent-rgb) / 34%), transparent 30%),
      radial-gradient(circle at 68% 48%, rgb(255 255 255 / 11%), transparent 22%);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-38%) scale(0.72);
  }

  .mode-console.is-liquid-collapsing {
    animation: console-liquid-collapse 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mode-console.is-liquid-expanding {
    animation: console-liquid-expand 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mode-console.is-liquid-collapsing::after,
  .mode-console.is-liquid-expanding::after {
    animation: console-liquid-wave 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mode-console.is-dragging {
    transition: none;
    box-shadow:
      0 30px 100px rgb(0 0 0 / 52%),
      0 0 0 1px rgb(var(--accent-rgb) / 26%);
  }

  .mode-console.is-docked {
    position: fixed;
    top: var(--console-dock-top, 20px);
    right: var(--console-dock-right, 8px);
    bottom: auto;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-end;
    width: 44px;
    height: 44px;
    padding: 4px;
    overflow: hidden;
    border-radius: 50%;
    transform: none;
  }

  .mode-console.is-docked .mode-console-head {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .mode-console.is-docked .mode-buttons {
    display: flex;
    flex-wrap: nowrap;
    order: 1;
    gap: 4px;
    align-items: center;
    width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition:
      width 420ms var(--ease-in-out),
      opacity 220ms ease,
      transform 420ms var(--ease-in-out);
  }

  .mode-console.is-docked .mode-buttons button {
    position: relative;
    display: flex;
    flex: 0 0 34px;
    gap: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-height: 0;
    margin-inline: auto;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    text-align: center;
  }

  .mode-console.is-docked .mode-buttons button .mode-number,
  .mode-console.is-docked .mode-buttons button .mode-label,
  .mode-console.is-docked .mode-buttons button.is-active::after {
    display: none;
  }

  .mode-console.is-docked .mode-buttons button::before {
    width: 8px;
    height: 8px;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 50%;
    content: "";
    background: var(--mode-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--mode-color) 46%, transparent);
  }

  .mode-console.is-docked .mode-buttons button.is-active::before {
    width: 12px;
    height: 12px;
    border-color: #fff;
  }

  .console-dock-toggle {
    display: none;
  }

  .mode-console.is-docked .console-dock-toggle {
    position: relative;
    display: grid;
    flex: none;
    order: 2;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 6%);
  }

  .mode-console.is-docked .console-dock-toggle span {
    width: 14px;
    height: 14px;
    border: 1px solid rgb(255 255 255 / 58%);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px rgb(var(--accent-rgb) / 68%);
    transition: 280ms ease;
  }

  .mode-console.is-docked:where(:not(.is-dock-open)):not(.is-scroll-collapsed):hover,
  .mode-console.is-docked:where(:not(.is-dock-open)):not(.is-scroll-collapsed):focus-within,
  .mode-console.is-docked.is-dock-open {
    width: 234px;
    border-radius: 24px;
    box-shadow:
      0 24px 70px rgb(0 0 0 / 44%),
      0 0 0 1px rgb(var(--accent-rgb) / 14%);
  }

  .mode-console.is-docked:where(:not(.is-dock-open)):not(.is-scroll-collapsed):hover .mode-buttons,
  .mode-console.is-docked:where(:not(.is-dock-open)):not(.is-scroll-collapsed):focus-within .mode-buttons,
  .mode-console.is-docked.is-dock-open .mode-buttons {
    flex: 0 0 186px;
    width: 186px;
    min-width: 186px;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  @media (max-width: 1180px), (hover: none), (pointer: coarse), (any-pointer: coarse) {
    .mode-console {
      top: auto;
      right: auto;
      bottom: max(22px, env(safe-area-inset-bottom));
      left: 50%;
      width: min(270px, calc(100vw - (var(--pad) * 2)));
      transform: translateX(-50%);
    }

    .mode-console.is-docked {
      top: auto;
      right: max(var(--pad), env(safe-area-inset-right));
      bottom: max(22px, env(safe-area-inset-bottom));
      left: auto;
      transform: none;
    }

    .mode-console.is-docked.is-dock-open {
      width: 286px;
      height: 52px;
      border-radius: 26px;
    }

    .mode-console.is-docked.is-dock-open .mode-buttons {
      flex-basis: 228px;
      gap: 2px;
      width: 228px;
      min-width: 228px;
    }

    .mode-console.is-docked.is-dock-open .mode-buttons button {
      flex-basis: 44px;
      width: 44px;
      height: 44px;
    }

    .mode-console.is-docked.is-dock-open .console-dock-toggle {
      width: 44px;
      height: 44px;
    }

    .mode-console.is-docked:not(.is-dock-open) .console-dock-toggle::before {
      position: absolute;
      inset: -5px;
      content: "";
    }

    .mode-console.is-docked:not(.is-dock-open):hover,
    .mode-console.is-docked:not(.is-dock-open):focus-within {
      width: 44px;
      border-radius: 50%;
      box-shadow: 0 24px 80px rgb(0 0 0 / 35%);
    }

    .mode-console.is-docked:not(.is-dock-open):hover .mode-buttons,
    .mode-console.is-docked:not(.is-dock-open):focus-within .mode-buttons {
      flex-basis: 0;
      width: 0;
      min-width: 0;
      opacity: 0;
      pointer-events: none;
      transform: translateX(8px);
    }

    .mode-console.is-docked .console-dock-toggle,
    .mode-console.is-docked .mode-buttons button {
      touch-action: manipulation;
    }

    .mode-console:not(.is-docked) .mode-buttons button {
      min-height: 44px;
    }
  }

  .mode-console-head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    margin-bottom: 10px;
    padding: 2px 2px 10px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    color: #777c77;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: opacity 220ms ease;
  }

  .mode-console-head > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mode-console-head > span:first-child::before {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 7px;
    border-radius: 50%;
    content: "";
    background: var(--accent);
  }

  .mode-console-state {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    white-space: nowrap;
  }

  .console-drag-handle {
    display: grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-block: -8px;
    border: 0;
    border-radius: 0;
    color: #a7aca7;
    background: transparent;
    cursor: grab;
    touch-action: none;
    transition:
      color 220ms ease,
      border-color 220ms ease,
      background 220ms ease;
  }

  .console-drag-handle:hover,
  .console-drag-handle:focus-visible {
    color: var(--accent);
    background: transparent;
  }

  .console-drag-handle:active {
    cursor: grabbing;
  }

  .console-drag-handle svg {
    width: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  .mode-buttons {
    display: grid;
    gap: 5px;
  }

  .mode-buttons button {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 42px;
    padding-inline: 12px;
    border-radius: 6px;
    color: #848984;
    background: transparent;
    font-size: 12px;
    text-align: left;
    transition: 250ms ease;
  }

  .mode-buttons button[data-mode="interface"] {
    --mode-color: #d9ff43;
  }

  .mode-buttons button[data-mode="motion"] {
    --mode-color: #63e8ff;
  }

  .mode-buttons button[data-mode="realtime"] {
    --mode-color: #c59cff;
  }

  .mode-buttons button[data-mode="red"] {
    --mode-color: #ff596d;
  }

  .mode-buttons button[data-mode="monochrome"] {
    --mode-color: #fff;
  }

  :root.is-monochrome .capability-lab {
    --accent: #d9ff43 !important;
    --accent-rgb: 217 255 67 !important;
  }

  :root.is-monochrome .hero-scene,
  :root.is-monochrome .person-image img {
    filter: grayscale(1);
  }

  .mode-buttons button .mode-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
  }

  .mode-buttons button:hover,
  .mode-buttons button.is-active {
    color: #f8f8f3;
    background: rgb(255 255 255 / 8%);
  }

  .mode-buttons button.is-active::after {
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: 50%;
    content: "";
    background: var(--accent);
    box-shadow: 0 0 12px rgb(var(--accent-rgb) / 80%);
  }

  .hero-scroll-actions {
    position: absolute;
    z-index: 3;
    bottom: 24px;
    left: 50%;
    display: grid;
    gap: 10px;
    justify-items: center;
    translate: -50% 0;
  }

  .hero-capability-link {
    white-space: nowrap;
  }

  .scroll-cue {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #747973;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .scroll-cue i {
    position: relative;
    width: 1px;
    height: 32px;
    overflow: hidden;
    background: rgb(255 255 255 / 15%);
  }

  .scroll-cue i::after {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--accent);
    animation: scroll-line 1.8s ease-in-out infinite;
  }

  .scroll-video {
    position: relative;
    z-index: 1;
    height: 450vh;
    height: 450svh;
    min-height: 450vh;
    isolation: isolate;
    background: #000;
  }

  .scroll-video__sticky {
    position: sticky;
    z-index: 1;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: #000;
  }

  .scroll-video__sticky video {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    visibility: visible;
  }

  .scroll-video__overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgb(8 9 8 / 32%) 0, transparent 18%, transparent 80%, rgb(8 9 8 / 52%) 100%),
      radial-gradient(ellipse at center, transparent 30%, rgb(0 0 0 / 40%) 100%);
  }

  .manifesto {
    position: relative;
    z-index: 2;
    min-height: 92vh;
    padding: clamp(100px, 12vw, 190px) max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
    color: var(--ink);
    background: var(--paper);
  }

  .manifesto::after {
    position: absolute;
    right: 8%;
    bottom: 10%;
    width: clamp(190px, 24vw, 440px);
    aspect-ratio: 1;
    border: 1px solid rgb(8 9 8 / 12%);
    border-radius: 50%;
    content: "";
    box-shadow:
      0 0 0 34px rgb(8 9 8 / 3%),
      0 0 0 70px rgb(8 9 8 / 2%);
  }

  .manifesto .section-kicker {
    display: flex;
    justify-content: space-between;
    margin-bottom: clamp(56px, 8vw, 120px);
    padding-bottom: 16px;
    border-bottom: 1px solid rgb(8 9 8 / 18%);
  }

  .manifesto-copy {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    font-size: clamp(42px, 6.4vw, 105px);
    font-weight: 500;
    letter-spacing: -0.058em;
    line-height: 0.99;
  }

  .manifesto-copy .word {
    color: rgb(8 9 8 / 17%);
    transition: color 450ms ease;
  }

  .manifesto-copy .word.is-lit {
    color: var(--ink);
  }

  .manifesto-note {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 22px;
    align-items: start;
    width: min(100%, 430px);
    margin: clamp(70px, 10vw, 150px) 0 0 auto;
  }

  .manifesto-note .note-mark {
    flex: none;
    color: #697000;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 700;
  }

  .manifesto-note p {
    font-size: 18px;
    line-height: 1.4;
  }

  .work {
    background:
      linear-gradient(180deg, #080908 0, #0b0d0b 70%, #080908 100%);
  }

  .project-editor {
    position: relative;
  }

  .project-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
  }

  .project-tabs button {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 16px;
    min-height: 122px;
    padding: 25px clamp(16px, 2vw, 30px);
    overflow: hidden;
    border-right: 1px solid var(--line);
    color: #737873;
    background: transparent;
    text-align: left;
    transition: color 300ms ease;
  }

  .project-tabs button:last-child {
    border-right: 0;
  }

  .project-tabs button::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    content: "";
    background: var(--project-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 500ms var(--ease-out);
  }

  .project-tabs button span {
    grid-row: span 2;
    padding-top: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
  }

  .project-tabs button strong {
    color: currentColor;
    font-size: 15px;
    font-weight: 600;
  }

  .project-tabs button small {
    font-size: 11px;
  }

  .project-tabs button:hover,
  .project-tabs button.is-active {
    color: #f4f5f0;
  }

  .project-tabs button.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .project-tabs-current {
    display: none;
  }

  .project-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.5fr);
    gap: clamp(32px, 6vw, 96px);
    padding-top: clamp(34px, 5vw, 72px);
  }

  .project-visual[hidden],
  .project-copy[hidden],
  .project-lab-scene[hidden],
  .uiux-scene[hidden] {
    display: none !important;
  }

  .project-lab-scene {
    grid-column: 1 / -1;
    width: 100%;
    color: #ecf0ee;
    background:
      radial-gradient(circle at 20% 58%, rgb(56 111 119 / 24%), transparent 34%),
      radial-gradient(circle at 77% 30%, rgb(96 80 158 / 18%), transparent 30%),
      #071015;
    animation: lab-scene-in 700ms var(--ease-out) both;
  }

  .project-visual {
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 11%);
    border-radius: 3px;
    background:
      radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--project-accent) 26%, transparent), transparent 38%),
      #0e110f;
    box-shadow: 0 48px 100px rgb(0 0 0 / 35%);
    transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition:
      transform 140ms ease,
      background 500ms ease;
  }

  .uiux-scene {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background: #0b1116;
    opacity: 1;
    transform: scale(1);
    transition:
      opacity 350ms ease,
      transform 900ms var(--ease-out);
  }

  .project-fullscreen {
    position: absolute;
    z-index: 12;
    top: 14px;
    right: 14px;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    color: rgb(242 246 245 / 72%);
    background: rgb(7 10 10 / 72%);
    box-shadow: 0 8px 24px rgb(0 0 0 / 28%);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition:
      color 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      transform 180ms ease;
  }

  .project-fullscreen:hover {
    color: #fff;
    border-color: rgb(255 255 255 / 38%);
    background: rgb(12 16 16 / 90%);
    transform: scale(1.04);
  }

  .project-fullscreen:focus-visible {
    outline: 2px solid var(--project-accent);
    outline-offset: 3px;
  }

  .project-fullscreen svg {
    position: absolute;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .project-fullscreen__exit {
    display: none;
  }

  .project-visual:fullscreen,
  .project-visual.is-fullscreen {
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    background: #070806;
    box-shadow: none;
    transform: none !important;
  }

  .project-visual.is-fullscreen {
    position: fixed;
    z-index: 1000;
    inset: 0;
  }

  body.capability-fullscreen-open {
    overflow: hidden;
  }

  .project-visual:fullscreen .project-fullscreen,
  .project-visual.is-fullscreen .project-fullscreen {
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
  }

  .project-visual:fullscreen .project-fullscreen__enter,
  .project-visual.is-fullscreen .project-fullscreen__enter {
    display: none;
  }

  .project-visual:fullscreen .project-fullscreen__exit,
  .project-visual.is-fullscreen .project-fullscreen__exit {
    display: block;
  }

  .project-visual:fullscreen .uiux-scene[data-view="hmi"][data-stage="2"] > [data-holistic-scene],
  .project-visual.is-fullscreen .uiux-scene[data-view="hmi"][data-stage="2"] > [data-holistic-scene],
  .project-visual.is-fullscreen.is-hmi-holistic [data-holistic-scene],
  .project-visual:fullscreen .uiux-scene[data-view="product"][data-stage="2"] > [data-product-holistic-scene],
  .project-visual.is-fullscreen .uiux-scene[data-view="product"][data-stage="2"] > [data-product-holistic-scene],
  .project-visual.is-fullscreen.is-product-holistic [data-product-holistic-scene] {
    display: block !important;
    visibility: visible;
    opacity: 1;
  }

  .project-visual:fullscreen .holistic-embed,
  .project-visual.is-fullscreen .holistic-embed {
    z-index: 5;
    inset: 56px 24px 148px;
    width: calc(100% - 48px);
    height: calc(100% - 204px);
  }

  .project-visual.is-switching .uiux-scene {
    opacity: 0;
    transform: scale(1.015);
  }

  .uiux-embed {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    border: 0;
    background: #0b1116;
  }

  .holistic-embed {
    position: absolute;
    z-index: 4;
    box-sizing: border-box;
    inset: 56px 24px 148px;
    display: block;
    width: calc(100% - 48px);
    height: calc(100% - 204px);
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgb(181 215 225 / 26%);
    border-radius: 13px;
    background: #030405;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 4%),
      0 0 0 6px rgb(3 7 9 / 82%),
      0 0 0 7px rgb(118 190 214 / 13%),
      0 18px 44px rgb(0 0 0 / 34%);
    animation: holistic-embed-in 720ms var(--ease-out) both;
  }

  .holistic-embed[hidden] {
    display: none;
  }

  @keyframes holistic-embed-in {
    from { opacity: 0; transform: scale(1.018); }
    to { opacity: 1; transform: scale(1); }
  }

  @media (max-width: 600px) {
    .holistic-embed {
      inset: 48px 10px 108px;
      width: calc(100% - 20px);
      height: calc(100% - 156px);
      border-radius: 9px;
      box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 4%),
        0 0 0 4px rgb(3 7 9 / 82%),
        0 0 0 5px rgb(118 190 214 / 13%);
    }
  }

  .project-visual.has-uiux::after,
  .project-visual.has-ai::after,
  .project-visual.has-uiux .visual-grid,
  .project-visual.has-ai .visual-grid,
  .project-visual.has-uiux .visual-tag,
  .project-visual.has-ai .visual-tag,
  .project-visual.has-blueprint .visual-tag,
  .project-visual.has-uiux .visual-code,
  .project-visual.has-ai .visual-code,
  .project-visual.has-uiux .project-scrubber,
  .project-visual.has-ai .project-scrubber,
  .project-visual.has-blueprint .project-scrubber {
    display: none;
  }

  .ai-workflow-scene[hidden],
  .blueprint-scene[hidden] {
    display: none !important;
  }

  .ai-workflow-scene {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    background: #111411;
    opacity: 1;
    transform: scale(1);
    transition:
      opacity 350ms ease,
      transform 900ms var(--ease-out);
  }

  .project-visual.is-switching .ai-workflow-scene {
    opacity: 0;
    transform: scale(1.015);
  }

  .aiw-mainbox {
    --aiw-text: #efefec;
    --aiw-purple: #bd83ff;
    --aiw-purple-soft: rgb(189 131 255 / 28%);
    --aiw-ease: cubic-bezier(.22, .8, .28, 1);
    position: absolute;
    isolation: isolate;
    inset: 0;
    overflow: hidden;
    color: var(--aiw-text);
    background: #111411;
    font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  }

  .aiw-mainbox button {
    color: inherit;
    font: inherit;
  }

  .aiw-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: saturate(0.64) contrast(0.9) brightness(0.68);
    transform: scale(1.002);
    transition:
      filter 1.15s var(--aiw-ease),
      opacity 1.15s var(--aiw-ease),
      transform 1.4s var(--aiw-ease);
  }

  .aiw-tile-grid {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    pointer-events: none;
  }

  .aiw-tile-grid i {
    background: rgb(5 7 6 / 32%);
    outline: 1px solid rgb(8 10 9 / 8%);
    transition:
      opacity 700ms var(--aiw-ease),
      background-color 700ms var(--aiw-ease),
      box-shadow 700ms var(--aiw-ease);
  }

  .aiw-vignette {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(to bottom, rgb(5 7 6 / 72%) 0%, rgb(5 7 6 / 22%) 34%, transparent 52%),
      linear-gradient(to top, rgb(4 6 5 / 68%) 0%, transparent 28%),
      linear-gradient(90deg, rgb(4 6 5 / 26%), transparent 15% 84%, rgb(4 6 5 / 20%));
    transition: opacity 1s var(--aiw-ease);
  }

  .aiw-technical,
  .aiw-stage-number,
  .aiw-stage-assist,
  .aiw-human,
  .aiw-readout-kicker,
  .aiw-focus span,
  .aiw-output-label {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .aiw-technical {
    position: absolute;
    z-index: 7;
    top: 29px;
    color: rgb(240 242 239 / 86%);
    font-size: clamp(9px, 1.1vw, 13px);
  }

  .aiw-technical--left { left: 30px; }
  .aiw-technical--right {
    right: 30px;
    letter-spacing: 0.06em;
  }
  .aiw-technical--right span { color: var(--aiw-purple); }
  .aiw-output-meta { display: none; }

  .aiw-workflow {
    position: absolute;
    z-index: 6;
    top: 78px;
    right: 30px;
    left: 30px;
    transition:
      opacity 900ms var(--aiw-ease),
      transform 900ms var(--aiw-ease);
  }

  .aiw-human {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgb(246 247 244 / 90%);
    font-size: clamp(8px, 1vw, 12px);
  }

  .aiw-human-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--aiw-text);
    box-shadow: 0 0 0 4px rgb(255 255 255 / 8%);
  }

  .aiw-human-note {
    margin-left: auto;
    color: rgb(235 237 233 / 48%);
    letter-spacing: 0.03em;
    text-transform: none;
  }

  .aiw-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 37px;
  }

  .aiw-line {
    position: absolute;
    z-index: -1;
    top: 3px;
    right: 8.6%;
    left: 8.6%;
    height: 1px;
    background: rgb(232 235 231 / 26%);
  }

  .aiw-line span {
    display: block;
    width: 0;
    height: 1px;
    background: var(--aiw-purple);
    box-shadow: 0 0 12px rgb(189 131 255 / 60%);
    transition: width 600ms var(--aiw-ease);
  }

  .aiw-stage {
    appearance: none;
    position: relative;
    display: grid;
    justify-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    color: rgb(230 233 229 / 42%);
    background: transparent;
    cursor: pointer;
    text-align: center;
    transition:
      color 450ms var(--aiw-ease),
      transform 220ms var(--aiw-ease);
  }

  .aiw-stage::before {
    width: 7px;
    height: 7px;
    margin-bottom: 17px;
    border: 1px solid rgb(235 237 234 / 48%);
    border-radius: 50%;
    background: #10130f;
    content: "";
    transition:
      background-color 450ms var(--aiw-ease),
      border-color 450ms var(--aiw-ease),
      box-shadow 450ms var(--aiw-ease),
      transform 450ms var(--aiw-ease);
  }

  .aiw-stage:disabled { cursor: default; }
  .aiw-stage:not(:disabled):hover {
    color: rgb(244 245 242 / 82%);
    transform: translateY(-2px);
  }
  .aiw-stage:not(:disabled):hover::before { border-color: var(--aiw-purple); }
  .aiw-stage:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--aiw-purple);
    outline-offset: 5px;
  }
  .aiw-stage.is-passed { color: rgb(238 240 237 / 68%); }
  .aiw-stage.is-passed::before,
  .aiw-stage.is-active::before {
    border-color: var(--aiw-purple);
    background: var(--aiw-purple);
  }
  .aiw-stage.is-active { color: var(--aiw-text); }
  .aiw-stage.is-active::before {
    box-shadow:
      0 0 0 6px var(--aiw-purple-soft),
      0 0 18px rgb(189 131 255 / 58%);
    transform: scale(1.08);
  }

  .aiw-stage-number {
    color: inherit;
    font-size: clamp(7px, 0.82vw, 10px);
  }

  .aiw-stage-name {
    margin-top: 7px;
    font-size: clamp(10px, 1.35vw, 16px);
    font-weight: 540;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .aiw-stage-assist {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 12px;
    margin-top: 10px;
    color: rgb(234 236 232 / 38%);
    font-size: clamp(6px, 0.75vw, 9px);
    white-space: nowrap;
  }

  .aiw-stage-assist i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgb(189 131 255 / 42%);
  }

  .aiw-stage.is-active .aiw-stage-assist { color: var(--aiw-purple); }
  .aiw-stage.is-active .aiw-stage-assist i {
    background: var(--aiw-purple);
    box-shadow: 0 0 9px var(--aiw-purple);
  }
  .aiw-stage.is-active .aiw-stage-assist--neutral { color: rgb(245 246 243 / 78%); }

  .aiw-readout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 16px;
    width: fit-content;
    max-width: 450px;
    margin-top: 48px;
    padding: 13px 16px;
    border-left: 1px solid var(--aiw-purple);
    background: rgb(8 11 9 / 54%);
    backdrop-filter: blur(8px);
  }

  .aiw-readout-kicker {
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--aiw-purple);
    font-size: 8px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .aiw-readout strong {
    color: rgb(244 245 242 / 90%);
    font-size: clamp(11px, 1.35vw, 16px);
    font-weight: 540;
  }

  .aiw-readout-detail {
    color: rgb(226 229 224 / 58%);
    font-size: clamp(9px, 1.1vw, 13px);
    line-height: 1.5;
  }

  .aiw-focus {
    display: flex;
    gap: 28px;
    width: fit-content;
    max-width: 90%;
    margin-top: 19px;
    padding: 12px 15px;
    border: 1px solid rgb(232 235 231 / 13%);
    background: rgb(7 9 8 / 66%);
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 500ms var(--aiw-ease),
      transform 500ms var(--aiw-ease);
    backdrop-filter: blur(7px);
  }

  .aiw-focus div { display: grid; gap: 6px; }
  .aiw-focus span {
    color: rgb(230 232 228 / 40%);
    font-size: clamp(6px, 0.7vw, 9px);
  }
  .aiw-focus strong {
    color: rgb(232 234 231 / 54%);
    font-size: clamp(7px, 0.8vw, 10px);
    font-weight: 520;
    letter-spacing: 0.04em;
  }
  .aiw-focus div:last-child span,
  .aiw-focus div:last-child strong { color: rgb(248 249 246 / 92%); }

  .aiw-output-label {
    position: absolute;
    z-index: 6;
    top: 73px;
    left: 30px;
    display: grid;
    gap: 8px;
    padding: 12px 15px;
    border-left: 1px solid var(--aiw-purple);
    background: rgb(7 9 8 / 44%);
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 900ms var(--aiw-ease),
      transform 900ms var(--aiw-ease);
    backdrop-filter: blur(8px);
  }

  .aiw-output-label span {
    color: rgb(247 248 245 / 94%);
    font-size: clamp(8px, 0.95vw, 11px);
  }
  .aiw-output-label strong {
    color: rgb(232 234 231 / 58%);
    font-size: clamp(6px, 0.75vw, 9px);
    font-weight: 500;
    letter-spacing: 0.1em;
  }

  .aiw-trigger {
    position: absolute;
    z-index: 8;
    bottom: 57px;
    right: 62px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-height: 62px;
    padding: 8px 10px 8px 25px;
    border: 1px solid rgb(229 232 228 / 36%);
    border-radius: 999px;
    color: #f0f1ee;
    background: rgb(12 14 13 / 93%);
    box-shadow: 0 8px 30px rgb(0 0 0 / 18%);
    cursor: pointer;
    transition:
      border-color 350ms var(--aiw-ease),
      transform 350ms var(--aiw-ease),
      background-color 350ms var(--aiw-ease);
    backdrop-filter: blur(12px);
  }

  .aiw-trigger:hover {
    border-color: rgb(189 131 255 / 76%);
    background: rgb(16 18 17 / 97%);
    transform: translateY(-2px);
  }
  .aiw-trigger:focus-visible {
    outline: 2px solid var(--aiw-purple);
    outline-offset: 3px;
  }
  .aiw-trigger:disabled { cursor: wait; }
  .aiw-trigger-label {
    font-size: clamp(10px, 1.15vw, 14px);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .aiw-trigger-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    color: #151019;
    background: var(--aiw-purple);
    font-size: 21px;
  }

  .aiw-mainbox[data-state="brief"] .aiw-line span { width: 3%; }
  .aiw-mainbox[data-state="research"] .aiw-line span { width: 25%; }
  .aiw-mainbox[data-state="explore"] .aiw-line span { width: 51%; }
  .aiw-mainbox[data-state="refine"] .aiw-line span { width: 75%; }
  .aiw-mainbox[data-state="output"] .aiw-line span { width: 100%; }

  .aiw-mainbox[data-state="explore"] .aiw-image,
  .aiw-mainbox[data-state="refine"] .aiw-image {
    opacity: 0.93;
    filter: saturate(0.82) contrast(0.96) brightness(0.84);
  }
  .aiw-mainbox[data-state="output"] .aiw-image {
    opacity: 1;
    filter: saturate(1) contrast(1) brightness(1);
    transform: scale(1);
  }
  .aiw-mainbox[data-state="output"] .aiw-tile-grid i { opacity: 0; }
  .aiw-mainbox[data-state="output"] .aiw-vignette { opacity: 0.24; }
  .aiw-mainbox[data-state="output"] .aiw-workflow {
    opacity: 0.1;
    transform: translateY(-5px);
  }
  .aiw-mainbox[data-state="output"] .aiw-output-label {
    opacity: 1;
    transform: translateY(0);
  }
  .aiw-mainbox[data-state="output"] .aiw-idle-meta { display: none; }
  .aiw-mainbox[data-state="output"] .aiw-output-meta { display: inline; }
  .aiw-mainbox[data-state="refine"] .aiw-focus {
    opacity: 1;
    transform: translateY(0);
  }
  .aiw-mainbox[data-state="refine"] .aiw-tile-grid i:not(:nth-child(2)):not(:nth-child(5)):not(:nth-child(8)) {
    background: rgb(5 7 6 / 36%);
  }
  .aiw-mainbox[data-state="refine"] .aiw-tile-grid i:nth-child(2),
  .aiw-mainbox[data-state="refine"] .aiw-tile-grid i:nth-child(5),
  .aiw-mainbox[data-state="refine"] .aiw-tile-grid i:nth-child(8) {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgb(189 131 255 / 50%);
  }
  .aiw-mainbox[data-state="output"] .aiw-tile-grid { pointer-events: auto; }
  .aiw-mainbox[data-state="output"] .aiw-tile-grid:hover i { opacity: 0.14; }
  .aiw-mainbox[data-state="output"] .aiw-tile-grid i:hover {
    opacity: 0;
    box-shadow: inset 0 0 0 1px rgb(189 131 255 / 42%);
  }

  .blueprint-scene {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 52% 44%, rgb(67 174 255 / 22%), transparent 34%),
      linear-gradient(rgb(88 165 223 / 13%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(88 165 223 / 13%) 1px, transparent 1px),
      #07111d;
    background-size: auto, 32px 32px, 32px 32px, auto;
    opacity: 1;
    transform: scale(1);
    transition:
      opacity 350ms ease,
      transform 900ms var(--ease-out);
  }

  .blueprint-scene::before {
    position: absolute;
    inset: 9%;
    border: 1px solid rgb(87 180 255 / 10%);
    border-radius: 50%;
    content: "";
    filter: blur(1px);
    box-shadow:
      0 0 120px rgb(38 140 236 / 13%),
      inset 0 0 90px rgb(38 140 236 / 8%);
  }

  .project-visual.is-switching .blueprint-scene {
    opacity: 0;
    transform: scale(1.035);
  }

  .blueprint-embed {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .project-visual.has-blueprint > [data-project-media],
  .project-visual.has-blueprint .media-fallback,
  .project-visual.has-ai > [data-project-media],
  .project-visual.has-ai .media-fallback,
  .project-visual.has-uiux > [data-project-media],
  .project-visual.has-uiux .media-fallback {
    display: none;
  }

  .blueprint-coordinates {
    position: absolute;
    z-index: 4;
    top: 24px;
    left: 26px;
    color: #7dc8ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
  }

  .blueprint-node {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 8px;
    width: clamp(150px, 23%, 220px);
    padding: 14px 15px 13px;
    border: 1px solid rgb(122 196 255 / 38%);
    border-radius: 5px;
    background:
      linear-gradient(180deg, rgb(52 126 181 / 35%) 0 27px, transparent 27px),
      rgb(8 21 35 / 92%);
    box-shadow:
      0 18px 45px rgb(0 0 0 / 35%),
      0 0 30px rgb(46 155 244 / 8%);
    backdrop-filter: blur(8px);
    animation: blueprint-node-float 5.8s ease-in-out infinite;
  }

  .blueprint-node > span {
    color: #9ed7ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .blueprint-node strong {
    color: #eef8ff;
    font-size: 11px;
    font-weight: 600;
  }

  .blueprint-node small {
    display: flex;
    gap: 7px;
    align-items: center;
    color: #6f92aa;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px;
  }

  .blueprint-node small i {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border: 1px solid #79ccff;
    border-radius: 50%;
    background: #174e74;
    box-shadow: 0 0 12px rgb(76 186 255 / 68%);
  }

  .blueprint-node small i.pin-in {
    margin-left: 0;
    order: -1;
  }

  .blueprint-event {
    top: 24%;
    left: 8%;
  }

  .blueprint-logic {
    top: 43%;
    left: 39%;
    animation-delay: -1.4s;
  }

  .blueprint-state {
    top: 19%;
    right: 7%;
    animation-delay: -2.8s;
  }

  .blueprint-feedback {
    right: 13%;
    bottom: 11%;
    animation-delay: -4.2s;
  }

  .blueprint-wire {
    position: absolute;
    z-index: 2;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #58bdff, #d28aff);
    filter: drop-shadow(0 0 5px rgb(88 189 255 / 72%));
    transform-origin: left center;
  }

  .blueprint-wire::after {
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    content: "";
    background: #dff6ff;
    box-shadow: 0 0 14px #65c5ff;
    translate: 0 -50%;
    animation: blueprint-signal 2.9s linear infinite;
  }

  .blueprint-wire.wire-a {
    top: 38%;
    left: 28%;
    width: 18%;
    rotate: 17deg;
  }

  .blueprint-wire.wire-b {
    top: 50%;
    left: 57%;
    width: 20%;
    rotate: -36deg;
  }

  .blueprint-wire.wire-b::after {
    animation-delay: -1.1s;
  }

  .blueprint-wire.wire-c {
    top: 56%;
    left: 57%;
    width: 18%;
    rotate: 31deg;
  }

  .blueprint-wire.wire-c::after {
    animation-delay: -2s;
  }

  .project-visual::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
      linear-gradient(180deg, transparent 55%, rgb(0 0 0 / 68%)),
      radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgb(255 255 255 / 14%), transparent 24%);
    pointer-events: none;
  }

  .project-visual > img,
  .project-visual > video {
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
    opacity: 0.94;
    filter: saturate(0.82) contrast(1.05);
    transition:
      opacity 350ms ease,
      transform 900ms var(--ease-out),
      filter 500ms ease;
  }

  .project-visual:hover > img,
  .project-visual:hover > video {
    filter: saturate(1) contrast(1.04);
    transform: scale(1.025);
  }

  .project-visual.has-interactive-video {
    --film-reveal: 0%;
    cursor: default;
  }

  .project-visual.has-interactive-video::after {
    transition: opacity 500ms ease;
  }

  .project-visual.has-interactive-video.has-scrubbed-film::after {
    opacity: 0;
  }

  .project-visual.has-interactive-video.is-dragging-film {
    cursor: ew-resize;
  }

  .project-visual.has-interactive-video .project-scrubber {
    display: none;
  }

  .film-time-orbit {
    --film-progress: 0deg;
    position: absolute;
    z-index: 3;
    right: 28px;
    bottom: 26px;
    display: grid;
    place-content: center;
    width: 112px;
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    background:
      radial-gradient(circle, rgb(8 9 8 / 88%) 0 47%, transparent 49%),
      conic-gradient(
        var(--project-accent) 0 var(--film-progress),
        rgb(255 255 255 / 10%) var(--film-progress) 360deg
      );
    box-shadow:
      0 0 0 8px rgb(8 9 8 / 36%),
      0 16px 38px rgb(0 0 0 / 34%);
    pointer-events: none;
  }

  .film-time-orbit[hidden] {
    display: none;
  }

  .film-time-orbit::before,
  .film-time-orbit::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    background: rgb(255 255 255 / 16%);
    translate: -50% -50%;
  }

  .film-time-orbit::before {
    width: 1px;
    height: 76%;
  }

  .film-time-orbit::after {
    width: 76%;
    height: 1px;
  }

  .film-time-orbit > i {
    position: absolute;
    z-index: 2;
    inset: 8px;
    border-radius: 50%;
    transform: rotate(var(--film-progress));
  }

  .film-time-orbit > i::after {
    position: absolute;
    top: -3px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    content: "";
    background: var(--project-accent);
    box-shadow: 0 0 15px var(--project-accent);
    translate: -50% 0;
  }

  .film-time-orbit > span,
  .film-time-orbit > b,
  .film-time-orbit > small {
    position: relative;
    z-index: 1;
    text-align: center;
  }

  .film-time-orbit > span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .film-time-orbit > b {
    margin-top: 2px;
    color: var(--project-accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
  }

  .film-time-orbit > small {
    margin-top: 3px;
    color: #7f857f;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 7px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .film-reveal-curtain {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    clip-path: inset(0 0 0 var(--film-reveal));
    pointer-events: none;
  }

  .film-reveal-curtain::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
      radial-gradient(circle at 28% 44%, rgb(var(--accent-rgb) / 10%), transparent 35%),
      rgb(7 9 8 / 97%);
    transition: opacity 500ms ease;
  }

  .project-visual.has-scrubbed-film .film-reveal-curtain::before {
    opacity: 0;
  }

  .film-reveal-curtain[hidden] {
    display: none;
  }

  .film-reveal-curtain > i {
    position: absolute;
    top: 0;
    bottom: 0;
    left: max(12px, var(--film-reveal));
    width: 2px;
    background: var(--project-accent);
    box-shadow:
      0 0 12px var(--project-accent),
      0 0 38px rgb(var(--accent-rgb) / 42%);
    translate: -1px 0;
    transition: opacity 320ms ease;
  }

  .project-visual.has-interactive-video:not(.has-scrubbed-film) .film-reveal-curtain > i {
    animation: film-drag-line 1.1s ease-in-out infinite;
  }

  .project-visual.has-cleared-drag-line .film-reveal-curtain > i {
    opacity: 0;
  }

  .film-input-cue {
    position: absolute;
    z-index: 3;
    top: 24px;
    left: 24px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 9px;
    align-items: center;
    padding: 10px 13px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    background: rgb(8 9 8 / 78%);
    box-shadow: 0 12px 32px rgb(0 0 0 / 26%);
    backdrop-filter: blur(10px);
    pointer-events: none;
    transition:
      opacity 400ms ease,
      transform 500ms var(--ease-out);
  }

  .film-input-cue[hidden] {
    display: none;
  }

  .film-input-cue > i {
    grid-row: 1 / span 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--project-accent);
    box-shadow: 0 0 14px var(--project-accent);
    animation: film-start-pulse 1.8s ease-in-out infinite;
  }

  .film-input-cue > span,
  .film-input-cue > b {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.11em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .film-input-cue > span {
    color: #858b85;
  }

  .film-input-cue > b {
    color: #f0f2ed;
  }

  .project-visual.has-scrubbed-film .film-input-cue {
    opacity: 0;
    transform: translateX(10px);
  }

  .project-visual.is-switching > img,
  .project-visual.is-switching > video {
    opacity: 0;
    transform: scale(1.04);
  }

  .project-visual.has-error > img,
  .project-visual.has-error > video {
    display: none;
  }

  .visual-grid {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0.18;
    background-image:
      linear-gradient(rgb(255 255 255 / 12%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 12%) 1px, transparent 1px);
    background-size: 8.333% 12.5%;
    mix-blend-mode: overlay;
    pointer-events: none;
  }

  .media-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
  }

  .has-error .media-fallback {
    opacity: 1;
  }

  .media-fallback i {
    position: absolute;
    width: 46%;
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--project-accent) 30%, transparent);
    border-radius: 50%;
    animation: fallback-orbit 12s linear infinite;
  }

  .media-fallback i:nth-child(2) {
    width: 28%;
    animation-duration: 8s;
    animation-direction: reverse;
  }

  .media-fallback i:nth-child(3) {
    width: 12%;
    background: var(--project-accent);
    filter: blur(14px);
    animation: fallback-pulse 3s ease-in-out infinite;
  }

  .media-fallback span {
    position: absolute;
    bottom: 74px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .visual-tag,
  .visual-code,
  .project-scrubber,
  .media-toggle {
    position: absolute;
    z-index: 2;
  }

  .media-toggle {
    top: 22px;
    left: 22px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 50%;
    color: #fff;
    background: rgb(5 6 5 / 55%);
    backdrop-filter: blur(10px);
    transition: 220ms ease;
  }

  .media-toggle[hidden] {
    display: none;
  }

  .media-toggle:hover {
    color: var(--ink);
    border-color: var(--project-accent);
    background: var(--project-accent);
  }

  .media-toggle span {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
  }

  .media-toggle span::before,
  .media-toggle span::after {
    width: 3px;
    height: 12px;
    content: "";
    background: currentColor;
  }

  .media-toggle.is-paused span::before {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid currentColor;
    background: transparent;
  }

  .media-toggle.is-paused span::after {
    display: none;
  }

  .visual-tag {
    bottom: 30px;
    left: 30px;
    padding: 9px 13px;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 999px;
    background: rgb(5 6 5 / 45%);
    backdrop-filter: blur(10px);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .visual-code {
    top: 25px;
    right: 25px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .visual-code b {
    color: var(--project-accent);
    font-weight: 600;
  }

  .project-scrubber {
    right: 30px;
    bottom: 32px;
    width: min(28%, 190px);
    height: 2px;
    background: rgb(255 255 255 / 24%);
  }

  .project-scrubber span {
    display: block;
    width: var(--scrub-progress, 20%);
    height: 100%;
    background: var(--project-accent);
    transition: width 600ms var(--ease-out);
  }

  .project-copy {
    align-self: center;
  }

  .project-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 34px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    color: #777c77;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .project-copy h3 {
    margin-bottom: 26px;
    font-size: clamp(38px, 4.4vw, 72px);
    line-height: 0.98;
  }

  .project-copy > p {
    max-width: 520px;
    color: #9aa09a;
    font-size: clamp(15px, 1.15vw, 18px);
  }

  .project-copy dl {
    display: grid;
    gap: 0;
    margin-top: 42px;
  }

  .project-copy dl > div {
    display: grid;
    grid-template-columns: 78px 1fr;
    padding-block: 13px;
    border-top: 1px solid var(--line);
    font-size: 12px;
  }

  .project-copy dt {
    color: #686d68;
  }

  .project-copy dd {
    color: #d8dbd6;
  }

  .project-next {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 46px;
    padding: 12px 12px 12px 19px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #f2f3ef;
    background: transparent;
    font-size: 12px;
    transition: 250ms ease;
  }

  .project-next svg {
    width: 28px;
    padding: 7px;
    border-radius: 50%;
    color: var(--ink);
    background: var(--project-accent);
  }

  .project-next:hover {
    color: var(--ink);
    border-color: var(--project-accent);
    background: var(--project-accent);
  }

  .capability-lab {
    --accent: #d9ff43;
    --accent-rgb: 217 255 67;
    --rx: 0deg;
    --ry: 0deg;
    display: grid;
    grid-template-columns: minmax(580px, 1.25fr) minmax(300px, 0.55fr);
    gap: clamp(30px, 5vw, 80px);
    align-items: stretch;
    min-height: 680px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition:
      transform 140ms ease,
      border-color 400ms ease,
      box-shadow 400ms ease;
  }

  .lab-stage {
    --pointer-x: 0px;
    --pointer-y: 0px;
    --gravity-x: 0px;
    --gravity-y: 0px;
    --orbit-x: 0px;
    --orbit-y: 0px;
    --cockpit-hue: 0deg;
    --cockpit-intensity: 0.72;
    --cockpit-flow-speed: 12s;
    position: relative;
    min-height: 680px;
    overflow: hidden;
    border-right: 1px solid rgb(255 255 255 / 10%);
  }

  .cockpit-experience {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    background: #030405;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.035);
    transition:
      opacity 560ms cubic-bezier(.22, .8, .28, 1),
      transform 850ms cubic-bezier(.22, .8, .28, 1);
  }

  .capability-lab.is-cockpit .cockpit-experience {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }

  .cockpit-model {
    position: absolute;
    inset: -7%;
    overflow: hidden;
    color: #eff6f7;
    background:
      radial-gradient(circle at 50% 24%, #182128 0%, #080d11 34%, #020405 76%);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    perspective: 900px;
    transform: scale(.88);
    transform-origin: 50% 48%;
  }

  .cockpit-windshield {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 39%;
    overflow: hidden;
    clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
    border-bottom: 1px solid rgb(190 215 225 / 16%);
    background:
      linear-gradient(180deg, #020507, #0a1218 75%, #121d23);
  }

  .cockpit-windshield::before,
  .cockpit-windshield::after {
    position: absolute;
    top: -8%;
    width: 9%;
    height: 120%;
    content: "";
    background: linear-gradient(90deg, #080b0e, #1a2024 46%, #080a0c);
  }

  .cockpit-windshield::before {
    left: -2%;
    rotate: -16deg;
  }

  .cockpit-windshield::after {
    right: -2%;
    rotate: 16deg;
  }

  .cockpit-horizon {
    position: absolute;
    right: 10%;
    bottom: 18%;
    left: 10%;
    height: 1px;
    opacity: .34;
    background: linear-gradient(90deg, transparent, #91a7af, transparent);
    box-shadow: 0 -12px 45px rgb(77 109 123 / 35%);
  }

  .cockpit-dashboard {
    position: absolute;
    top: 31%;
    left: -5%;
    width: 110%;
    height: 34%;
    border-top: 1px solid rgb(255 255 255 / 13%);
    border-bottom: 1px solid rgb(0 0 0 / 80%);
    border-radius: 48% 48% 8% 8% / 18% 18% 11% 11%;
    background:
      linear-gradient(180deg, #252b2d 0%, #111719 34%, #070b0d 100%);
    box-shadow:
      inset 0 18px 40px rgb(255 255 255 / 3%),
      0 30px 55px rgb(0 0 0 / 64%);
  }

  .cockpit-door {
    position: absolute;
    z-index: 2;
    top: 43%;
    width: 25%;
    height: 42%;
    border: 1px solid rgb(255 255 255 / 7%);
    background:
      linear-gradient(180deg, #202729 0%, #0b1012 48%, #050809 100%);
    box-shadow: inset 0 16px 28px rgb(255 255 255 / 2%);
  }

  .cockpit-door--left {
    left: -8%;
    border-radius: 15% 48% 18% 0;
    rotate: 5deg;
  }

  .cockpit-door--right {
    right: -8%;
    border-radius: 48% 15% 0 18%;
    rotate: -5deg;
  }

  .cockpit-material {
    position: absolute;
    display: block;
    opacity: .42;
    background-image:
      repeating-linear-gradient(92deg, transparent 0 3px, rgb(255 255 255 / 5%) 3px 4px);
  }

  .cockpit-material.material-a {
    top: 10%;
    right: 9%;
    width: 34%;
    height: 42%;
    transform: skewX(-10deg);
  }

  .cockpit-material.material-b {
    top: 16%;
    left: 5%;
    width: 24%;
    height: 35%;
    transform: skewX(13deg);
  }

  .cockpit-light {
    position: absolute;
    z-index: 3;
    height: 3px;
    overflow: hidden;
    opacity: var(--cockpit-intensity);
    border-radius: 999px;
    filter: hue-rotate(var(--cockpit-hue));
    background: rgb(255 47 34 / 34%);
    box-shadow:
      0 0 18px rgb(255 45 32 / 74%),
      0 5px 22px rgb(255 38 24 / 20%);
  }

  .cockpit-light i {
    position: absolute;
    top: 0;
    left: -70%;
    width: 70%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgb(255 70 54 / 45%) 24%, #fff 62%, transparent);
    animation: cockpit-zone-sweep var(--cockpit-flow-speed) linear infinite;
    animation-delay: var(--zone-delay, 0s);
  }

  .cockpit-light--door-left {
    top: 55%;
    left: 0;
    width: 16%;
    rotate: -8deg;
  }

  .cockpit-light--dash-left {
    top: 47%;
    left: 14%;
    width: 20%;
    rotate: -3deg;
  }

  .cockpit-light--dash-center {
    top: 43%;
    left: 34%;
    width: 34%;
  }

  .cockpit-light--dash-right {
    top: 47%;
    right: 14%;
    width: 20%;
    rotate: 3deg;
  }

  .cockpit-light--door-right {
    top: 55%;
    right: 0;
    width: 16%;
    rotate: 8deg;
  }

  .cockpit-light--floor-left,
  .cockpit-light--floor-right {
    top: auto;
    bottom: 14%;
    width: 24%;
    height: 5px;
    opacity: var(--cockpit-intensity);
    filter: hue-rotate(var(--cockpit-hue)) blur(1px);
    box-shadow:
      0 0 24px rgb(255 45 32 / 65%),
      0 13px 38px rgb(255 38 24 / 34%);
  }

  .cockpit-light--floor-left {
    left: 12%;
    rotate: 7deg;
  }

  .cockpit-light--floor-right {
    right: 12%;
    rotate: -7deg;
  }

  .cockpit-screen {
    position: absolute;
    z-index: 4;
    overflow: hidden;
    border: 1px solid rgb(174 211 223 / 28%);
    color: #eaf5f6;
    background:
      linear-gradient(145deg, rgb(15 29 35 / 98%), rgb(2 7 10 / 100%));
    box-shadow:
      inset 0 0 35px rgb(45 134 160 / 7%),
      0 14px 38px rgb(0 0 0 / 58%);
  }

  .cockpit-screen::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(104deg, transparent 20%, rgb(255 52 38 / 32%) 47%, transparent 70%);
    filter: hue-rotate(var(--cockpit-hue));
    translate: -110% 0;
    animation: cockpit-screen-scan var(--cockpit-flow-speed) linear infinite;
    animation-delay: var(--zone-delay, 0s);
  }

  .cockpit-cluster {
    top: 31.5%;
    left: 23%;
    width: 25%;
    height: 24%;
    padding: 12px 14px;
    border-radius: 18px 18px 8px 8px;
    transform: perspective(520px) rotateY(4deg);
  }

  .cluster-top,
  .center-top,
  .cluster-status,
  .center-nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cluster-top,
  .center-top {
    color: rgb(219 233 237 / 55%);
    font-size: 7px;
    letter-spacing: .12em;
  }

  .cluster-top b,
  .center-top b {
    color: #dce9ec;
    font-weight: 500;
  }

  .cluster-speed {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 5px;
    align-items: baseline;
    justify-content: center;
    margin-top: 8px;
  }

  .cluster-speed strong {
    font-size: clamp(24px, 3.1vw, 42px);
    font-weight: 300;
    letter-spacing: -.08em;
  }

  .cluster-speed small {
    color: rgb(222 238 242 / 50%);
    font-size: 7px;
  }

  .cluster-road {
    position: absolute;
    z-index: 1;
    right: 24%;
    bottom: 34px;
    left: 24%;
    height: 35px;
    overflow: hidden;
  }

  .cluster-road i {
    position: absolute;
    bottom: -3px;
    width: 1px;
    height: 46px;
    opacity: .55;
    background: linear-gradient(180deg, transparent, #dce9ec);
  }

  .cluster-road i:first-child {
    left: 13px;
    rotate: 15deg;
  }

  .cluster-road i:nth-child(2) {
    right: 13px;
    rotate: -15deg;
  }

  .cluster-road b {
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 4px;
    height: 14px;
    border-radius: 4px;
    background: #ff3c2c;
    filter: hue-rotate(var(--cockpit-hue));
    box-shadow: 0 0 12px #ff3c2c;
  }

  .cluster-status {
    position: absolute;
    right: 14px;
    bottom: 10px;
    left: 14px;
  }

  .cluster-status span {
    display: grid;
    gap: 2px;
  }

  .cluster-status small {
    color: rgb(218 235 240 / 38%);
    font-size: 6px;
    letter-spacing: .1em;
  }

  .cluster-status b {
    font-size: 8px;
    font-weight: 500;
  }

  .cockpit-steering {
    position: absolute;
    z-index: 6;
    top: 40%;
    left: 20%;
    width: 31%;
    aspect-ratio: 1.12;
    transform: perspective(600px) rotateX(10deg);
  }

  .steering-rim {
    position: absolute;
    inset: 0;
    border: clamp(12px, 1.8vw, 24px) solid #14191b;
    border-radius: 44%;
    box-shadow:
      inset 0 0 0 2px rgb(255 255 255 / 6%),
      0 12px 30px rgb(0 0 0 / 65%);
  }

  .steering-spoke {
    position: absolute;
    top: 48%;
    width: 35%;
    height: 14%;
    background: linear-gradient(180deg, #2b3234, #111617);
  }

  .spoke-left {
    left: 15%;
    transform: rotate(12deg);
  }

  .spoke-right {
    right: 15%;
    transform: rotate(-12deg);
  }

  .steering-hub {
    position: absolute;
    top: 36%;
    left: 34%;
    display: grid;
    width: 32%;
    aspect-ratio: 1.28;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 42%;
    color: rgb(240 246 247 / 62%);
    background: #0e1315;
    font-size: 10px;
  }

  .cockpit-center-screen {
    top: 35%;
    left: 51.5%;
    width: 18%;
    height: 38%;
    padding: 14px;
    border-radius: 10px 10px 18px 18px;
    transform: perspective(620px) rotateX(4deg) rotateY(-3deg);
  }

  .center-route {
    position: relative;
    z-index: 1;
    height: 42%;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 6%);
    border-radius: 5px;
    background:
      linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
    background-size: 16px 16px;
  }

  .route-line {
    position: absolute;
    top: 47%;
    left: 14%;
    width: 74%;
    height: 22%;
    border-top: 2px solid #ff4031;
    border-radius: 50%;
    filter: hue-rotate(var(--cockpit-hue));
    rotate: -11deg;
    box-shadow: 0 -3px 12px rgb(255 55 40 / 35%);
  }

  .center-route i {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #eef6f7;
  }

  .route-start {
    top: 59%;
    left: 15%;
  }

  .route-end {
    top: 35%;
    right: 10%;
    box-shadow: 0 0 10px #ff4031;
  }

  .center-card {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 3px;
    margin-top: 9px;
    padding: 7px 8px;
    border-left: 2px solid #ff4031;
    color: rgb(224 239 242 / 42%);
    background: rgb(255 255 255 / 3%);
    font-size: 6px;
    letter-spacing: .09em;
    filter: hue-rotate(var(--cockpit-hue));
  }

  .center-card b {
    color: #f1f7f8;
    font-size: 8px;
    font-weight: 500;
  }

  .center-card small {
    color: rgb(224 239 242 / 58%);
    font-size: 6px;
    letter-spacing: .08em;
  }

  .center-nav {
    position: absolute;
    right: 14px;
    bottom: 11px;
    left: 14px;
    color: rgb(225 239 242 / 34%);
    font-size: 6px;
  }

  .center-nav .is-current {
    color: #ff5547;
    filter: hue-rotate(var(--cockpit-hue));
  }

  .cockpit-console {
    position: absolute;
    z-index: 3;
    top: 69%;
    left: 50%;
    display: flex;
    gap: 8px;
    justify-content: center;
    width: 22%;
    height: 20%;
    padding-top: 16px;
    clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #171d1f, #06090a);
  }

  .cockpit-console span {
    width: 7px;
    height: 7px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    background: #0b1011;
  }

  .cockpit-seat {
    position: absolute;
    z-index: 2;
    bottom: -21%;
    width: 34%;
    height: 43%;
    border: 1px solid rgb(255 255 255 / 5%);
    border-radius: 48% 48% 0 0;
    background:
      repeating-linear-gradient(100deg, transparent 0 8px, rgb(255 255 255 / 2%) 8px 9px),
      #080c0e;
    box-shadow: inset 0 12px 35px rgb(255 255 255 / 2%);
  }

  .cockpit-seat--left {
    left: -4%;
    rotate: 4deg;
  }

  .cockpit-seat--right {
    right: -4%;
    rotate: -4deg;
  }

  .cockpit-controls {
    position: absolute;
    z-index: 5;
    top: 18px;
    right: 20px;
    bottom: auto;
    display: grid;
    width: min(310px, calc(100% - 40px));
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 12px;
    background: rgb(4 9 13 / 78%);
    box-shadow: 0 16px 50px rgb(0 0 0 / 42%);
    backdrop-filter: blur(15px);
  }

  .cockpit-control {
    display: grid;
    gap: 7px;
  }

  .cockpit-control > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #f2f5f5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .cockpit-control b {
    font-weight: 500;
  }

  .cockpit-control output {
    color: rgb(255 255 255 / 54%);
  }

  .cockpit-control input {
    width: 100%;
    height: 18px;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }

  .cockpit-control input::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(255 255 255 / 24%), rgb(255 255 255 / 72%));
  }

  .cockpit-control input::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -5px;
    appearance: none;
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 50%;
    background: #e9f1f4;
    box-shadow: 0 0 12px rgb(255 255 255 / 40%);
  }

  .cockpit-control input::-moz-range-track {
    height: 2px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(255 255 255 / 24%), rgb(255 255 255 / 72%));
  }

  .cockpit-control input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 1px solid rgb(255 255 255 / 82%);
    border-radius: 50%;
    background: #e9f1f4;
    box-shadow: 0 0 12px rgb(255 255 255 / 40%);
  }

  .cockpit-control input[data-cockpit-color]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #ff3a2e, #ffd52e, #4cff7a, #32e7ff, #4875ff, #bd55ff);
  }

  .cockpit-control input[data-cockpit-color]::-moz-range-track {
    background: linear-gradient(90deg, #ff3a2e, #ffd52e, #4cff7a, #32e7ff, #4875ff, #bd55ff);
  }

  .capability-lab.is-cockpit .lab-orbits,
  .capability-lab.is-cockpit .lab-core {
    opacity: 0;
    pointer-events: none;
  }

  .capability-lab.is-cockpit .capability-node {
    z-index: 6;
    background: rgb(5 12 15 / 86%);
  }

  .capability-lab.is-cockpit .capability-node.is-active {
    background: var(--accent);
  }

  @media (prefers-reduced-motion: reduce) {
    .cockpit-light i,
    .cockpit-screen::after {
      animation-play-state: paused;
    }
  }

  @media (max-width: 680px) {
    .cockpit-model {
      transform: scale(.92);
      transform-origin: 46% 44%;
    }

    .cockpit-controls {
      top: 70px;
      right: 16px;
      bottom: auto;
      left: 16px;
      width: auto;
      gap: 9px;
      padding: 12px 14px;
    }
  }

  @keyframes cockpit-zone-sweep {
    0% { translate: 0 0; opacity: 0; }
    2% { opacity: 1; }
    16% { translate: 250% 0; opacity: 1; }
    18%, 100% { translate: 250% 0; opacity: 0; }
  }

  @keyframes cockpit-screen-scan {
    0% { translate: -110% 0; opacity: 0; }
    2% { opacity: var(--cockpit-intensity); }
    16% { translate: 110% 0; opacity: var(--cockpit-intensity); }
    18%, 100% { translate: 110% 0; opacity: 0; }
  }

  .lab-stage::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.22;
    background-image:
      linear-gradient(rgb(255 255 255 / 9%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 9%) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle, black 20%, transparent 68%);
  }

  .lab-orbits,
  .lab-core {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }

  .lab-orbits {
    width: min(66%, 510px);
    aspect-ratio: 1;
    perspective: 900px;
    perspective-origin: 50% 50%;
    pointer-events: none;
    transform: translate3d(var(--orbit-x), var(--orbit-y), 0);
    transform-style: preserve-3d;
    transition: transform 600ms cubic-bezier(.22, .8, .28, 1);
    will-change: transform;
  }

  .lab-orbit {
    --particle-speed: 54s;
    --particle-boost-speed: 13s;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    will-change: transform;
    animation: lab-precess-outer 48s linear infinite;
  }

  .lab-orbit-track {
    position: absolute;
    inset: 0;
    display: block;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 50%;
    scale: 1;
    transform-style: preserve-3d;
    transition:
      border-color 420ms cubic-bezier(.22, .8, .28, 1),
      filter 420ms cubic-bezier(.22, .8, .28, 1),
      scale 700ms cubic-bezier(.22, .8, .28, 1);
    will-change: transform;
    animation: lab-orbit-travel var(--particle-speed) linear infinite;
  }

  .lab-orbit-track::before,
  .lab-orbit-track::after {
    position: absolute;
    border-radius: 50%;
    content: "";
    background: var(--accent);
    will-change: opacity, filter;
    animation: lab-particle-glow 5.4s ease-in-out infinite;
  }

  .lab-orbit-track::before {
    top: 22%;
    left: 8%;
    width: 4px;
    height: 4px;
    opacity: 0.72;
    box-shadow:
      0 0 8px rgb(var(--accent-rgb) / 76%),
      0 0 18px rgb(var(--accent-rgb) / 28%);
    transform: translate3d(-50%, -50%, 8px);
    animation-delay: -0.9s;
  }

  .lab-orbit-track::after {
    top: 0;
    left: 50%;
    width: 8px;
    height: 8px;
    box-shadow: 0 0 18px rgb(var(--accent-rgb) / 80%);
    transform: translate3d(-50%, -50%, 10px);
    animation-delay: -3.2s;
  }

  .lab-orbit:nth-child(2) {
    --particle-speed: 43s;
    --particle-boost-speed: 11s;
    inset: 16%;
    animation-name: lab-precess-middle;
    animation-duration: 42s;
  }

  .lab-orbit:nth-child(2) .lab-orbit-track {
    border-style: dashed;
    animation-direction: reverse;
  }

  .lab-orbit:nth-child(3) {
    --particle-speed: 35s;
    --particle-boost-speed: 9s;
    inset: 34%;
    animation-name: lab-precess-inner;
    animation-duration: 36s;
  }

  .lab-orbit:nth-child(2) .lab-orbit-track::after {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 14px rgb(var(--accent-rgb) / 72%);
    animation-delay: -1.7s;
  }

  .lab-orbit:nth-child(2) .lab-orbit-track::before {
    top: 12%;
    left: 82%;
    width: 3px;
    height: 3px;
    animation-delay: -4.1s;
    animation-duration: 6.2s;
  }

  .lab-orbit:nth-child(3) .lab-orbit-track::after {
    width: 10px;
    height: 10px;
    animation-delay: -4.6s;
  }

  .lab-orbit:nth-child(3) .lab-orbit-track::before {
    top: 25%;
    left: 93%;
    width: 5px;
    height: 5px;
    opacity: 0.62;
    animation-delay: -2.8s;
    animation-duration: 4.7s;
  }

  .lab-orbit.is-preview .lab-orbit-track,
  .lab-orbit.is-confirming .lab-orbit-track {
    border-color: rgb(var(--accent-rgb) / 34%);
    filter: drop-shadow(0 0 5px rgb(var(--accent-rgb) / 16%));
    animation-duration: var(--particle-boost-speed);
  }

  .capability-lab.is-pulsing .lab-orbit-track {
    border-color: rgb(var(--accent-rgb) / 30%);
    filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 18%));
    scale: 0.94;
    animation-duration: 5.5s;
  }

  .lab-orbit-glow {
    position: absolute;
    inset: 30%;
    z-index: 0;
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--accent-rgb) / 25%), transparent 70%);
    filter: blur(7px);
    animation: lab-breathe 4s ease-in-out infinite;
  }

  .lab-core {
    --core-scale: 1;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 118px;
    padding: 0;
    appearance: none;
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 50%;
    color: #ecf0ee;
    background: rgb(8 16 19 / 80%);
    box-shadow:
      0 0 70px rgb(var(--accent-rgb) / 18%),
      inset 0 0 32px rgb(255 255 255 / 6%);
    cursor: pointer;
    touch-action: manipulation;
    animation: lab-core-float 7s ease-in-out infinite;
    transition:
      border-color 420ms cubic-bezier(.22, .8, .28, 1),
      box-shadow 420ms cubic-bezier(.22, .8, .28, 1);
    will-change: transform;
  }

  .lab-core::after {
    position: absolute;
    inset: -1px;
    border: 1px solid var(--accent);
    border-radius: inherit;
    content: "";
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 24px rgb(var(--accent-rgb) / 20%);
  }

  .lab-core span {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 20px;
    letter-spacing: -0.06em;
    transition:
      opacity 150ms ease,
      transform 170ms cubic-bezier(.22, .8, .28, 1);
  }

  .lab-core.is-morphing-out span {
    opacity: 0;
    transform: translateY(-6px);
  }

  .lab-core.is-morphing-in span {
    opacity: 0;
    transform: translateY(6px);
  }

  .lab-core:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 5px;
  }

  .capability-lab.is-confirming .lab-core::after {
    animation: lab-core-confirm 900ms cubic-bezier(.22, .8, .28, 1);
  }

  .capability-lab.is-pulsing .lab-core::after {
    animation: lab-core-prototype-pulse 1800ms cubic-bezier(.22, .8, .28, 1);
  }

  .capability-node {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-height: 44px;
    padding: 10px 15px;
    border: 1px solid rgb(255 255 255 / 13%);
    border-radius: 999px;
    color: #929d9a;
    background: rgb(5 12 15 / 72%);
    font-size: 11px;
    backdrop-filter: blur(10px);
    touch-action: manipulation;
    transition:
      color 360ms cubic-bezier(.22, .8, .28, 1),
      border-color 360ms cubic-bezier(.22, .8, .28, 1),
      background 360ms cubic-bezier(.22, .8, .28, 1),
      box-shadow 360ms cubic-bezier(.22, .8, .28, 1),
      transform 360ms cubic-bezier(.22, .8, .28, 1);
  }

  .capability-node span {
    color: #5e6b68;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px;
  }

  .capability-node.is-active {
    color: var(--ink);
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 35px rgb(var(--accent-rgb) / 22%);
    transform: scale(1.04);
  }

  .capability-node.is-preview:not(.is-active) {
    color: #cbd3d0;
    border-color: rgb(255 255 255 / 30%);
    background: rgb(7 15 18 / 82%);
    transform: scale(1.015);
  }

  .capability-node:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
  }

  .node-a { top: 14%; left: 12%; }
  .node-b { top: 13%; right: 9%; }
  .node-c { top: 46%; right: 4%; }
  .node-d { right: 13%; bottom: 13%; }
  .node-e { bottom: 14%; left: 9%; }

  .lab-readout {
    display: grid;
    grid-template-rows: auto 1fr;
    padding: clamp(28px, 3.5vw, 56px);
  }

  .readout-number {
    justify-self: end;
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
  }

  .lab-readout > div {
    align-self: end;
  }

  .readout-number,
  .lab-readout > [data-lab-content] {
    transition:
      opacity 200ms ease,
      transform 240ms cubic-bezier(.22, .8, .28, 1);
  }

  .lab-readout.is-changing .readout-number,
  .lab-readout.is-changing > [data-lab-content] {
    opacity: 0;
    transform: translateY(8px);
  }

  .readout-label {
    display: block;
    margin-bottom: 20px;
    color: #697572;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .lab-readout h3 {
    margin-bottom: 24px;
    font-size: clamp(36px, 4vw, 66px);
    line-height: 0.96;
  }

  .lab-readout p {
    color: #909b98;
    font-size: 15px;
  }

  .readout-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 32px;
  }

  .readout-tags span {
    padding: 7px 10px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 999px;
    color: #a6afac;
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .process {
    width: 100%;
    max-width: none;
    color: var(--ink);
    background: var(--paper);
  }

  .process > * {
    width: min(100%, calc(var(--max) - (var(--pad) * 2)));
    margin-inline: auto;
  }

  .process-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    margin-bottom: clamp(70px, 10vw, 150px);
  }

  .process-intro .section-index {
    color: #666b65;
  }

  .process-intro h2 em {
    color: color-mix(in srgb, var(--accent) 56%, var(--ink));
    transition: color 650ms var(--ease-in-out);
  }

  .process-steps {
    counter-reset: process;
  }

  .process-steps li {
    display: grid;
    grid-template-columns: 0.15fr 1fr 0.34fr;
    gap: 32px;
    align-items: center;
    min-height: 176px;
    border-top: 1px solid rgb(8 9 8 / 17%);
  }

  .process-steps li:last-child {
    border-bottom: 1px solid rgb(8 9 8 / 17%);
  }

  .process-steps > li > span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
  }

  .process-steps h3 {
    font-size: clamp(30px, 3.3vw, 52px);
    line-height: 1;
  }

  .process-steps p {
    max-height: 0;
    max-width: 560px;
    overflow: hidden;
    color: #60655f;
    opacity: 0;
    transform: translateY(8px);
    transition:
      max-height 450ms var(--ease-out),
      opacity 300ms ease,
      transform 450ms var(--ease-out),
      margin 450ms var(--ease-out);
  }

  .process-steps li:hover p,
  .process-steps li:focus-within p {
    max-height: 90px;
    margin-top: 10px;
    opacity: 1;
    transform: none;
  }

  .process-steps small {
    justify-self: end;
    color: #747971;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-align: right;
    text-transform: uppercase;
  }

  .proof {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #0c0e0c;
  }

  .field-canvas,
  .proof-vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .field-canvas {
    z-index: 0;
  }

  .proof-vignette {
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgb(8 9 8 / 90%) 0, rgb(8 9 8 / 42%) 46%, rgb(8 9 8 / 30%) 70%, rgb(8 9 8 / 72%) 100%),
      linear-gradient(0deg, #0c0e0c 0, transparent 24%, transparent 74%, rgb(8 9 8 / 44%) 100%);
  }

  .proof-quote {
    position: relative;
    z-index: 2;
    width: min(100%, var(--max));
    margin-inline: auto;
    padding: clamp(110px, 14vw, 220px) max(var(--pad), 9vw);
  }

  .quote-mark {
    position: absolute;
    top: clamp(54px, 7vw, 100px);
    left: max(var(--pad), 9vw);
    color: var(--accent);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 90px;
    line-height: 1;
  }

  .proof blockquote {
    max-width: 1100px;
    font-size: clamp(38px, 5.7vw, 88px);
    letter-spacing: -0.055em;
    line-height: 1.02;
  }

  .proof-quote p {
    margin-top: 42px;
    color: #727772;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .clients {
    padding: clamp(80px, 9vw, 130px) var(--pad);
    border-block: 1px solid var(--line);
    background: #0c0e0c;
  }

  .clients__label {
    position: relative;
    margin-bottom: clamp(32px, 5vw, 56px);
    color: #999e98;
    text-align: center;
  }

  .info-tip {
    display: inline-flex;
    margin-left: 8px;
    vertical-align: middle;
  }

  .info-tip__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1px solid rgb(255 255 255 / 32%);
    border-radius: 50%;
    background: transparent;
    color: #999e98;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    cursor: help;
    transition:
      border-color 200ms ease,
      color 200ms ease;
  }

  .info-tip__trigger:hover,
  .info-tip__trigger:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
  }

  .info-tip__bubble {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 10px);
    left: 50%;
    width: min(280px, 80vw);
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: #141613;
    box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
    color: #c7cbc6;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.5;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition:
      opacity 200ms ease,
      transform 200ms ease;
  }

  .info-tip:hover .info-tip__bubble,
  .info-tip:focus-within .info-tip__bubble {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .clients__grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: clamp(48px, 7vw, 100px);
    row-gap: clamp(48px, 7vw, 100px);
    align-items: center;
    justify-content: center;
    width: min(100%, 1100px);
    margin-inline: auto;
  }

  .clients__logo {
    width: auto;
    max-width: 160px;
    height: 38px;
    object-fit: contain;
    opacity: 0.4;
    filter: brightness(0) invert(1);
    transition:
      opacity 300ms ease,
      transform 300ms var(--ease-out);
  }

  .clients__logo:hover {
    opacity: 1;
    transform: scale(1.05);
  }

  .studio {
    background:
      radial-gradient(circle at 76% 40%, rgb(var(--accent-rgb) / 5%), transparent 30%),
      var(--ink);
  }

  .people-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 44px);
  }

  .person-card {
    --rx: 0deg;
    --ry: 0deg;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #0d0f0d;
    box-shadow: 0 28px 70px rgb(0 0 0 / 24%);
    transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    transition:
      border-color 300ms ease,
      box-shadow 300ms ease,
      transform 130ms ease;
  }

  .person-card:hover {
    border-color: rgb(255 255 255 / 28%);
    box-shadow: 0 38px 90px rgb(0 0 0 / 36%);
  }

  .person-image {
    position: relative;
    aspect-ratio: 1.25 / 0.94;
    overflow: hidden;
    background: #141614;
    transform: translateZ(0);
    transition: transform 600ms var(--ease-out);
  }

  .person-card:hover .person-image {
    transform: translateZ(14px);
  }

  .person-image::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
      radial-gradient(
        circle at 16% 14%,
        rgb(var(--accent-rgb) / 34%) 0,
        rgb(var(--accent-rgb) / 12%) 28%,
        transparent 62%
      );
    mix-blend-mode: screen;
    opacity: 0.72;
    transition: opacity 600ms ease;
  }

  .person-image::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
      linear-gradient(to top, rgb(7 8 7 / 78%), transparent 45%),
      radial-gradient(
        circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        rgb(255 255 255 / 10%),
        transparent 24%
      );
  }

  .person-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.08);
    transition:
      filter 600ms ease,
      transform 900ms var(--ease-out);
  }

  .person-card:hover img {
    filter: grayscale(0.2) contrast(1.04);
    transform: scale(1.025);
  }

  .person-card:hover .person-image::before {
    opacity: 0.08;
  }

  .person-image > span {
    position: absolute;
    z-index: 2;
    top: 22px;
    right: 22px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .person-info {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(22px, 2.2vw, 34px);
    padding: clamp(22px, 3vw, 40px);
  }

  .person-info h3 {
    margin-bottom: 4px;
    font-size: clamp(22px, 1.7vw, 30px);
    line-height: 1.05;
  }

  .person-info p {
    color: #858a85;
    font-size: 13px;
  }

  .person-info > p {
    align-self: center;
    font-size: 14px;
  }

  .person-link {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-top: 16px;
    padding: 7px 11px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    color: #b9bdb8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition:
      color 250ms ease,
      border-color 250ms ease,
      background 250ms ease,
      transform 300ms var(--ease-out);
  }

  .person-link:hover {
    color: var(--ink);
    border-color: var(--accent);
    background: var(--accent);
    transform: translateY(-2px);
  }

  .person-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .references {
    position: relative;
    background:
      radial-gradient(circle at 18% 24%, rgb(var(--accent-rgb) / 7%), transparent 32%),
      var(--ink);
  }

  .references::before {
    position: absolute;
    top: 0;
    right: var(--pad);
    left: var(--pad);
    height: 1px;
    content: "";
    background: var(--line);
  }

  .references-frame {
    overflow: hidden;
    border: 1px solid var(--line);
    background:
      linear-gradient(135deg, rgb(var(--accent-rgb) / 4%), transparent 34%),
      rgb(255 255 255 / 1.8%);
  }

  .references-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 66px;
    padding: 10px clamp(20px, 3vw, 42px);
    border-bottom: 1px solid var(--line);
  }

  .references-count {
    color: #777c77;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .references-nav {
    display: flex;
    gap: 8px;
  }

  .references-nav button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    color: #d8dad5;
    background: transparent;
    transition:
      color 250ms ease,
      border-color 250ms ease,
      background 250ms ease,
      transform 300ms var(--ease-out);
  }

  .references-nav button:hover {
    color: var(--ink);
    border-color: var(--accent);
    background: var(--accent);
    transform: translateY(-2px);
  }

  .references-nav svg {
    width: 18px;
    height: 18px;
  }

  .references-nav path {
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  .references-track {
    position: relative;
    touch-action: pan-y;
  }

  .reference-card {
    position: absolute;
    inset: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
    column-gap: clamp(22px, 3.5vw, 52px);
    row-gap: clamp(16px, 2vw, 28px);
    align-content: start;
    padding: clamp(24px, 3.2vw, 48px);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(28px);
    transition:
      visibility 0s 550ms,
      opacity 380ms ease,
      transform 550ms var(--ease-out);
  }

  .reference-card.is-active {
    position: relative;
    inset: auto;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  .reference-about {
    padding-top: 0.65em;
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.5;
    text-transform: uppercase;
  }

  .reference-card blockquote {
    max-width: 1120px;
    color: #e9ebe6;
    font-size: clamp(18px, 1.65vw, 28px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.24;
    text-wrap: pretty;
  }

  .reference-card blockquote::before {
    color: var(--accent);
    content: "“";
    font-family: Georgia, "Times New Roman", serif;
  }

  .reference-card blockquote::after {
    color: var(--accent);
    content: "”";
    font-family: Georgia, "Times New Roman", serif;
  }

  .reference-author {
    grid-column: 2;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-top: 4px;
  }

  .reference-author i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 16px rgb(var(--accent-rgb) / 52%);
  }

  .reference-author strong,
  .reference-author span {
    display: block;
  }

  .reference-author strong {
    color: #e2e4de;
    font-size: 13px;
    font-weight: 600;
  }

  .reference-author span {
    max-width: 480px;
    margin-top: 3px;
    color: #737873;
    font-size: 11px;
    line-height: 1.45;
  }

  .references-pagination {
    display: flex;
    gap: 9px;
    align-items: center;
    min-height: 56px;
    padding: 8px clamp(20px, 3vw, 42px);
    border-top: 1px solid var(--line);
  }

  .references-pagination button {
    position: relative;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    transition: width 350ms var(--ease-out);
  }

  .references-pagination button::before {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 2px;
    content: "";
    background: rgb(255 255 255 / 22%);
    transform: translateY(-50%);
    transition:
      height 250ms ease,
      background 250ms ease;
  }

  .references-pagination button:hover::before {
    background: rgb(255 255 255 / 62%);
  }

  .references-pagination button.is-active {
    width: 58px;
  }

  .references-pagination button.is-active::before {
    height: 3px;
    background: var(--accent);
  }

  @media (max-width: 760px) {
    .reference-card {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 24px clamp(20px, 5vw, 28px) 28px;
    }

    .reference-about {
      padding-top: 0;
    }

    .reference-author {
      grid-column: 1;
    }

    .reference-card blockquote {
      font-size: clamp(17px, 4.4vw, 23px);
    }
  }

  .contact {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(350px, 0.9fr);
    gap: clamp(50px, 10vw, 180px);
    min-height: 92vh;
    padding: clamp(110px, 13vw, 200px) max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
    overflow: hidden;
    color: var(--ink);
    background: var(--accent);
    isolation: isolate;
  }

  .contact::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: 0.23;
    background-image:
      linear-gradient(rgb(8 9 8 / 14%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(8 9 8 / 14%) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, black, transparent 72%);
  }

  .contact-halo {
    position: absolute;
    z-index: -1;
    bottom: -30vw;
    left: -8vw;
    width: 76vw;
    aspect-ratio: 1;
    border: 1px solid rgb(8 9 8 / 30%);
    border-radius: 50%;
    box-shadow:
      0 0 0 7vw rgb(8 9 8 / 3%),
      0 0 0 14vw rgb(8 9 8 / 3%),
      0 0 0 21vw rgb(8 9 8 / 2%);
  }

  .contact .section-index {
    color: rgb(8 9 8 / 60%);
  }

  .contact h2 {
    font-size: clamp(70px, 9vw, 150px);
    line-height: 0.82;
  }

  .contact h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
  }

  .contact-copy > p {
    max-width: 430px;
    margin-top: 48px;
    color: rgb(8 9 8 / 66%);
    font-size: 18px;
  }

  .brief-builder {
    align-self: center;
  }

  .brief-builder > span {
    display: block;
    margin-bottom: 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .brief-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .brief-options button {
    min-height: 44px;
    padding: 11px 16px;
    border: 1px solid rgb(8 9 8 / 28%);
    border-radius: 999px;
    color: rgb(8 9 8 / 78%);
    background: transparent;
    font-size: 13px;
    transition: 250ms ease;
  }

  .brief-options button:hover,
  .brief-options button.is-active {
    color: var(--accent);
    border-color: var(--ink);
    background: var(--ink);
    transform: translateY(-2px);
  }

  .contact-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 48px;
    padding: 10px 10px 10px clamp(20px, 3vw, 38px);
    border-radius: 999px;
    color: var(--paper);
    background: var(--ink);
    font-size: clamp(18px, 2vw, 27px);
  }

  .contact-action svg {
    width: 58px;
    padding: 14px;
    border-radius: 50%;
    color: var(--ink);
    background: var(--paper);
    transition: transform 300ms var(--ease-out);
  }

  .contact-action:hover svg {
    transform: rotate(-35deg);
  }

  .contact-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    color: rgb(8 9 8 / 62%);
    font-size: 11px;
  }

  .contact-meta > span {
    display: inline-flex;
    gap: 8px;
    align-items: center;
  }

  .contact-meta i {
    width: 6px;
    height: 6px;
    background: #29722c;
    box-shadow: none;
  }

  .contact-meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid rgb(8 9 8 / 35%);
  }

  :root.is-red-mode .contact {
    color: #fff;
  }

  :root.is-red-mode .contact .section-index,
  :root.is-red-mode .contact-copy > p,
  :root.is-red-mode .contact-meta {
    color: rgb(255 255 255 / 74%);
  }

  :root.is-red-mode .brief-options button {
    color: rgb(255 255 255 / 88%);
    border-color: rgb(255 255 255 / 42%);
  }

  :root.is-red-mode .brief-options button:hover,
  :root.is-red-mode .brief-options button.is-active {
    color: var(--accent);
    border-color: #fff;
    background: #fff;
  }

  :root.is-red-mode .contact-action {
    color: #fff;
  }

  :root.is-red-mode .contact-meta a {
    border-bottom-color: rgb(255 255 255 / 45%);
  }

  .contact-modal {
    position: fixed;
    z-index: 220;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 42px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      visibility 0s 450ms,
      opacity 350ms ease;
  }

  .contact-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .contact-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(4 5 4 / 76%);
    backdrop-filter: blur(16px);
  }

  .contact-modal-panel {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: calc(100svh - clamp(28px, 6vw, 84px));
    overflow: auto;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: clamp(18px, 2vw, 28px);
    color: #e9ebe6;
    background:
      radial-gradient(circle at 92% 0%, rgb(var(--accent-rgb) / 10%), transparent 32%),
      #0d0f0d;
    box-shadow: 0 34px 100px rgb(0 0 0 / 48%);
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition:
      opacity 320ms ease,
      transform 500ms var(--ease-out);
  }

  .contact-modal.is-open .contact-modal-panel {
    opacity: 1;
    transform: none;
  }

  .contact-modal-head {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    justify-content: space-between;
    padding: clamp(26px, 4vw, 48px);
    border-bottom: 1px solid var(--line);
  }

  .contact-modal-head > div > span,
  .contact-field > span {
    display: block;
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .contact-modal-head h2 {
    margin-top: 18px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 0.94;
  }

  .contact-modal-close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;
    color: #d8dad5;
    background: transparent;
    transition:
      color 250ms ease,
      border-color 250ms ease,
      background 250ms ease,
      transform 300ms var(--ease-out);
  }

  .contact-modal-close:hover {
    color: var(--ink);
    border-color: var(--accent);
    background: var(--accent);
    transform: rotate(8deg);
  }

  .contact-modal-close svg {
    width: 18px;
    height: 18px;
  }

  .contact-modal-form {
    display: grid;
    gap: 28px;
    padding: clamp(26px, 4vw, 48px);
  }

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

  .contact-field {
    display: grid;
    gap: 12px;
  }

  .contact-field input,
  .contact-field textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgb(255 255 255 / 22%);
    border-radius: 0;
    outline: 0;
    color: #f3f4ef;
    background: rgb(255 255 255 / 3%);
    transition:
      border-color 250ms ease,
      background 250ms ease;
  }

  .contact-field input {
    min-height: 58px;
    padding: 14px 16px;
    font-size: 17px;
  }

  .contact-field textarea {
    min-height: 160px;
    padding: 16px;
    resize: vertical;
    font-size: 15px;
    line-height: 1.55;
  }

  .contact-field input::placeholder,
  .contact-field textarea::placeholder {
    color: #626762;
  }

  .contact-field input:focus,
  .contact-field textarea:focus {
    border-color: var(--accent);
    background: rgb(var(--accent-rgb) / 5%);
  }

  .contact-field input:focus-visible,
  .contact-field textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .contact-form-status {
    margin: -6px 0 0;
    padding: 14px 16px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 12px;
    color: #c8ccc6;
    background: rgb(255 255 255 / 4%);
    font-size: 13px;
    line-height: 1.5;
  }

  .contact-privacy-note {
    margin: 0;
    color: #858a84;
    font-size: 12px;
    line-height: 1.55;
  }

  .contact-privacy-note a {
    color: #d9ff43;
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .contact-form-status[data-state="sending"] {
    color: #d8dcd5;
    border-color: rgb(var(--accent-rgb) / 28%);
    background: rgb(var(--accent-rgb) / 6%);
  }

  .contact-form-status[data-state="success"] {
    color: #dfffbf;
    border-color: rgb(176 255 105 / 34%);
    background: rgb(176 255 105 / 7%);
  }

  .contact-form-status[data-state="error"] {
    color: #ffb3a2;
    border-color: rgb(255 119 91 / 38%);
    background: rgb(255 119 91 / 7%);
  }

  .contact-modal-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    margin-top: 4px;
    padding: 8px 8px 8px 24px;
    border-radius: 999px;
    color: var(--ink);
    background: var(--accent);
    font-size: 17px;
    font-weight: 600;
    transition:
      filter 250ms ease,
      transform 300ms var(--ease-out);
  }

  .contact-modal-submit:disabled {
    cursor: wait;
    filter: saturate(0.55) brightness(0.86);
    transform: none;
  }

  .contact-modal-submit svg {
    width: 48px;
    height: 48px;
    padding: 13px;
    border-radius: 50%;
    color: var(--paper);
    background: var(--ink);
    transition: transform 300ms var(--ease-out);
  }

  .contact-modal-submit:hover {
    filter: brightness(1.05);
    transform: translateY(-2px);
  }

  .contact-modal-submit:hover svg {
    transform: rotate(-35deg);
  }

  .contact-modal-close path,
  .contact-modal-submit path {
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  @media (max-width: 600px) {
    .contact-modal {
      padding: 12px;
    }

    .contact-modal-panel {
      max-height: calc(100svh - 24px);
    }

    .contact-modal-head,
    .contact-modal-form {
      padding: 24px 20px;
    }

    .contact-modal-head h2 {
      font-size: clamp(36px, 11vw, 50px);
    }

    .contact-field textarea {
      min-height: 140px;
    }

    .contact-modal-submit {
      min-height: 58px;
    }
  }

  footer {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    gap: 40px;
    align-items: center;
    min-height: 150px;
    padding: 38px var(--pad);
    color: #666b66;
    background: var(--ink);
    font-size: 11px;
  }

  footer .brand {
    color: #e9ebe6;
  }

  footer .brand-logo-lockup {
    height: 22px;
  }

  footer > div {
    display: flex;
    gap: 22px;
  }

  footer > div a:hover {
    color: var(--accent);
  }

  footer > div a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  footer > span {
    justify-self: end;
  }

  footer b {
    font-weight: inherit;
  }
}

@layer utilities {
  @keyframes film-drag-line {
    50% {
      opacity: 0.25;
      box-shadow:
        0 0 5px var(--project-accent),
        0 0 16px rgb(var(--accent-rgb) / 24%);
    }
  }

  @keyframes film-start-pulse {
    50% {
      opacity: 0.45;
      transform: scale(1.5);
    }
  }

  @keyframes title-in {
    to { transform: none; }
  }

  @keyframes hero-word-out {
    to {
      opacity: 0;
      filter: blur(6px);
      transform: translateX(-0.3em);
    }
  }

  @keyframes hero-word-in {
    from {
      opacity: 0;
      filter: blur(7px);
      transform: translateX(0.3em);
    }

    to {
      opacity: 1;
      filter: blur(0);
      transform: none;
    }
  }

  @keyframes scroll-line {
    0% { transform: translateY(-110%); }
    45%, 55% { transform: translateY(0); }
    100% { transform: translateY(110%); }
  }

  @keyframes console-liquid-collapse {
    0% {
      border-radius: 10px;
    }
    54% {
      border-radius: 24% 46% 38% 52% / 34% 28% 56% 48%;
    }
    78% {
      border-radius: 58% 42% 54% 46% / 45% 60% 40% 55%;
    }
    100% {
      border-radius: 50%;
    }
  }

  @keyframes console-liquid-expand {
    0% {
      border-radius: 50%;
    }
    42% {
      border-radius: 58% 32% 46% 34% / 44% 58% 36% 52%;
    }
    76% {
      border-radius: 18% 30% 22% 28% / 24% 18% 32% 26%;
    }
    100% {
      border-radius: 10px;
    }
  }

  @keyframes console-liquid-wave {
    0% {
      opacity: 0;
      transform: translateX(-42%) scale(0.68);
    }
    42% {
      opacity: 0.72;
    }
    100% {
      opacity: 0;
      transform: translateX(42%) scale(1.12);
    }
  }

  @keyframes fallback-orbit {
    to { transform: rotate(360deg) scaleX(0.65); }
  }

  @keyframes fallback-pulse {
    50% { opacity: 0.55; transform: scale(1.4); }
  }

  @keyframes lab-orbit-travel {
    to { transform: rotateZ(360deg); }
  }

  @keyframes lab-particle-glow {
    0%,
    100% {
      opacity: 0.58;
      filter: brightness(0.88) drop-shadow(0 0 2px rgb(var(--accent-rgb) / 30%));
    }
    50% {
      opacity: 1;
      filter: brightness(1.18) drop-shadow(0 0 7px rgb(var(--accent-rgb) / 72%));
    }
  }

  @keyframes lab-scene-in {
    from {
      opacity: 0;
      translate: 0 18px;
    }
    to {
      opacity: 1;
      translate: 0;
    }
  }

  @keyframes blueprint-node-float {
    50% { translate: 0 -6px; }
  }

  @keyframes blueprint-signal {
    to { left: calc(100% - 7px); }
  }

  @keyframes lab-precess-outer {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
  }

  @keyframes lab-precess-middle {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(-360deg); }
  }

  @keyframes lab-precess-inner {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
  }

  @keyframes lab-breathe {
    50% { opacity: 0.55; transform: scale(1.35); }
  }

  @keyframes lab-core-float {
    0%,
    100% {
      transform:
        translate3d(
          calc(var(--pointer-x) + var(--gravity-x)),
          calc(var(--pointer-y) + var(--gravity-y) - 2px),
          0
        )
        scale(var(--core-scale));
    }
    50% {
      transform:
        translate3d(
          calc(var(--pointer-x) + var(--gravity-x)),
          calc(var(--pointer-y) + var(--gravity-y) + 2px),
          0
        )
        scale(var(--core-scale));
    }
  }

  @keyframes lab-core-confirm {
    0% { opacity: 0; transform: scale(0.96); }
    38% { opacity: 0.32; }
    100% { opacity: 0; transform: scale(1.14); }
  }

  @keyframes lab-core-prototype-pulse {
    0% { opacity: 0; transform: scale(0.98); }
    24% { opacity: 0.38; }
    58% { opacity: 0.12; transform: scale(1.18); }
    100% { opacity: 0; transform: scale(1.22); }
  }

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

  .js-ready .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity 800ms ease,
      transform 1000ms var(--ease-out);
  }

  .js-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .js-ready .person-card.reveal {
    translate: 0 32px;
    transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
    transition:
      opacity 800ms ease,
      translate 1000ms var(--ease-out),
      border-color 300ms ease,
      box-shadow 300ms ease,
      transform 130ms ease;
  }

  .js-ready .person-card.reveal.is-visible {
    translate: 0;
    transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  }

  @media (max-width: 1180px) {
    .section-rail {
      display: none;
    }

    .hero-copy {
      padding-inline: var(--pad);
    }

    .project-panel {
      grid-template-columns: 1.25fr 0.75fr;
      gap: 42px;
    }

    .project-visual,
    .project-visual > img,
    .project-visual > video {
      min-height: 520px;
    }

    .capability-lab {
      grid-template-columns: minmax(520px, 1fr) minmax(270px, 0.45fr);
    }

    .person-info {
      grid-template-columns: 1fr;
      gap: 18px;
    }
  }

  @media (max-width: 900px) {
    :root {
      --header-h: 66px;
    }

    .site-header {
      grid-template-columns: 1fr auto;
    }

    .site-header.menu-open {
      height: var(--header-h);
      border-color: transparent;
      background: transparent;
      backdrop-filter: none;
      transform: none;
    }

    .desktop-nav,
    .header-cta {
      display: none;
    }

    .menu-toggle {
      position: relative;
      z-index: 102;
      display: grid;
      place-content: center;
      gap: 6px;
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: rgb(8 9 8 / 55%);
    }

    .menu-toggle > span:not(.sr-only) {
      width: 17px;
      height: 1px;
      background: #fff;
      transition: 300ms var(--ease-out);
    }

    .menu-toggle[aria-expanded="true"] > span:nth-child(2) {
      transform: translateY(3.5px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] > span:nth-child(3) {
      transform: translateY(-3.5px) rotate(-45deg);
    }

    .mobile-menu {
      position: fixed;
      z-index: 101;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      min-height: 100vh;
      min-height: 100svh;
      padding: calc(var(--header-h) + 28px) var(--pad) 32px;
      padding:
        calc(var(--header-h) + clamp(22px, 5svh, 40px))
        max(var(--pad), env(safe-area-inset-right))
        max(28px, env(safe-area-inset-bottom))
        max(var(--pad), env(safe-area-inset-left));
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      background:
        radial-gradient(circle at 80% 22%, rgb(var(--accent-rgb) / 14%), transparent 32%),
        #080908;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-16px);
      transition:
        visibility 0s 500ms,
        opacity 400ms ease,
        transform 500ms var(--ease-out);
    }

    .mobile-menu.is-open {
      visibility: visible;
      opacity: 1;
      transform: none;
      transition-delay: 0s;
    }

    .mobile-menu nav {
      display: grid;
      flex: 0 0 auto;
      width: 100%;
      margin-block: auto;
    }

    .mobile-menu nav a {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 14px;
      align-items: baseline;
      padding-block: 12px;
      padding-block: clamp(10px, 1.8svh, 14px);
      border-bottom: 1px solid var(--line);
      font-size: clamp(30px, 8.5vw, 58px);
      font-size: clamp(28px, min(8.5vw, 7svh), 58px);
      letter-spacing: -0.055em;
      line-height: 1.04;
    }

    .mobile-menu nav span {
      color: var(--accent);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 10px;
      letter-spacing: 0;
    }

    .mobile-menu nav b {
      min-width: 0;
      font: inherit;
      font-weight: 500;
      overflow-wrap: normal;
    }

    .mobile-menu > p {
      flex: 0 0 auto;
      margin-top: 28px;
      margin-top: clamp(22px, 4svh, 42px);
      color: #717671;
      font-size: 11px;
      letter-spacing: 0.06em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    .hero {
      min-height: 820px;
    }

    .hero-copy {
      justify-content: center;
      padding-top: 132px;
      padding-bottom: 220px;
    }

    .hero-title {
      font-size: clamp(58px, 14vw, 112px);
      line-height: 0.82;
    }

    .hero-title .line-shift {
      padding-left: 7vw;
    }

    .hero-bottom {
      align-items: start;
    }

    .js-ready .hero-bottom.reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .mode-buttons {
      grid-template-columns: repeat(3, 1fr);
    }

    .mode-buttons button {
      justify-content: center;
    }

    .mode-buttons button .mode-number,
    .mode-buttons button.is-active::after {
      display: none;
    }

    .scroll-cue {
      display: none;
    }

    .manifesto {
      min-height: auto;
    }

    .section-heading {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .section-heading > p {
      margin-left: 18%;
    }

    .project-tabs {
      grid-template-columns: repeat(2, 1fr);
    }

    .project-tabs button {
      min-height: 88px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .project-tabs button:nth-child(2n) {
      border-right: 0;
    }

    .project-tabs button:last-child {
      grid-column: 1 / -1;
      border-right: 0;
    }

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

    .project-visual.has-uiux {
      min-height: 680px;
      min-height: clamp(620px, 82svh, 760px);
    }

    .project-copy {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 36px;
    }

    .project-meta,
    .project-copy h3,
    .project-copy > p {
      grid-column: span 2;
    }

    .project-copy dl,
    .project-next {
      align-self: end;
    }

    .capability-lab {
      grid-template-columns: 1fr;
      min-height: 0;
    }

    .lab-stage {
      min-height: 620px;
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }

    .lab-readout {
      grid-template-columns: auto 1fr;
      grid-template-rows: none;
      gap: 40px;
      min-height: 330px;
    }

    .readout-number {
      justify-self: auto;
    }

    .process-intro {
      grid-template-columns: 1fr;
    }

    .process-steps li {
      grid-template-columns: 50px 1fr;
    }

    .process-steps small {
      grid-column: 2;
      justify-self: start;
      padding-bottom: 20px;
      text-align: left;
    }

    .process-steps p {
      max-height: 90px;
      margin-top: 10px;
      opacity: 1;
      transform: none;
    }

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

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

    .brief-builder {
      max-width: 640px;
    }

    footer {
      grid-template-columns: 1fr 1fr;
    }

    footer > p {
      justify-self: end;
    }

    footer > span {
      justify-self: end;
    }
  }

  @media (max-width: 600px) {
    .brand {
      font-size: 16px;
    }

    .brand-logo-lockup,
    footer .brand-logo-lockup {
      height: 20px;
    }

    .clients {
      padding: 72px 20px 84px;
    }

    .clients__grid {
      column-gap: 42px;
      row-gap: 44px;
    }

    .clients__logo {
      max-width: 110px;
      height: 26px;
    }

    .project-tabs {
      position: relative;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      border-bottom: 1px solid var(--line);
    }

    .project-tabs::before {
      position: absolute;
      z-index: 0;
      top: 27px;
      right: 10%;
      left: 10%;
      height: 1px;
      content: "";
      background: rgb(255 255 255 / 14%);
    }

    .project-tabs button,
    .project-tabs button:last-child {
      position: relative;
      z-index: 1;
      display: grid;
      grid-column: auto;
      grid-template-columns: 1fr;
      gap: 0;
      min-width: 0;
      min-height: 54px;
      padding: 0;
      overflow: visible;
      place-items: center;
      border-right: 0;
      border-bottom: 0;
    }

    .project-tabs button::after {
      height: 2px;
    }

    .project-tabs button span {
      display: grid;
      grid-row: auto;
      width: 30px;
      height: 30px;
      padding: 0;
      place-items: center;
      border: 1px solid #3b403c;
      border-radius: 50%;
      color: #8a908a;
      background: #0a0c0a;
      transition:
        color 240ms ease,
        border-color 240ms ease,
        background 240ms ease,
        box-shadow 240ms ease,
        transform 240ms var(--ease-out);
    }

    .project-tabs button strong,
    .project-tabs button small {
      display: none;
    }

    .project-tabs button.is-active span {
      border-color: var(--project-accent);
      color: #071014;
      background: var(--project-accent);
      box-shadow: 0 0 18px color-mix(in srgb, var(--project-accent) 38%, transparent);
      transform: scale(1.08);
    }

    .project-tabs button.is-active {
      z-index: 2;
    }

    .project-tabs-current {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 3px 16px;
      align-items: end;
      min-height: 62px;
      padding: 11px 0 12px;
      border-bottom: 1px solid var(--line);
    }

    .project-tabs-current span {
      grid-column: 1 / -1;
      color: var(--project-accent);
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .project-tabs-current strong {
      min-width: 0;
      color: #f4f5f0;
      font-size: clamp(14px, 4vw, 17px);
      font-weight: 600;
      line-height: 1.2;
    }

    .project-panel {
      padding-top: 14px;
    }

    .hero {
      min-height: max(760px, 100svh);
    }

    .hero-topline {
      top: calc(var(--header-h) + 17px);
    }

    .hero-topline span:last-child {
      display: none;
    }

    .hero-copy {
      padding-top: 112px;
      padding-bottom: 250px;
    }

    .hero-copy .eyebrow {
      max-width: 240px;
      line-height: 1.5;
    }

    .hero-title {
      font-size: clamp(48px, 15vw, 76px);
      line-height: 0.84;
    }

    .hero-title .line:last-child > span {
      white-space: nowrap;
    }

    .hero-title .line-shift {
      padding-left: 0;
    }

    .hero-bottom {
      display: grid;
      gap: 24px;
      margin-top: 28px;
    }

    .hero-bottom > p {
      font-size: 14px;
    }

    .hero-scroll-actions {
      bottom: 210px;
    }

    .mode-console-head {
      margin-bottom: 6px;
      padding-bottom: 7px;
    }

    .console-drag-handle {
      width: 44px;
      height: 44px;
      margin-block: -12px;
    }

    .mode-buttons button {
      min-height: 44px;
      padding-inline: 6px;
      font-size: 10px;
    }

    .manifesto .section-kicker span:last-child {
      display: none;
    }

    .manifesto-copy {
      font-size: clamp(36px, 11.7vw, 58px);
    }

    .manifesto-note {
      margin-left: 0;
    }

    .section-heading > p {
      margin-left: 0;
    }

    .section-heading h2,
    .process-intro h2 {
      font-size: clamp(48px, 14vw, 72px);
    }

    .project-visual,
    .project-visual > img,
    .project-visual > video {
      min-height: 430px;
    }

    .blueprint-node {
      width: 132px;
      padding: 12px;
    }

    .blueprint-event {
      top: 22%;
      left: 5%;
    }

    .blueprint-logic {
      top: 45%;
      left: 50%;
      transform: translateX(-50%);
    }

    .blueprint-state {
      top: 18%;
      right: 5%;
    }

    .blueprint-feedback {
      right: 8%;
      bottom: 10%;
    }

    .project-copy {
      display: block;
    }

    .project-copy dl {
      margin-top: 34px;
    }

    .project-next {
      margin-top: 34px;
    }

    .visual-tag {
      bottom: 20px;
      left: 18px;
      max-width: 56%;
    }

    .visual-code {
      top: 18px;
      right: 18px;
    }

    .project-scrubber {
      right: 18px;
      bottom: 23px;
    }

    .capability-lab {
      margin-inline: 0;
    }

    .lab-stage {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      align-content: end;
      min-height: 560px;
      padding: 24px;
    }

    .lab-orbits {
      top: 38%;
      width: 76%;
    }

    .lab-core {
      top: 38%;
      width: 94px;
    }

    .capability-node {
      position: static;
      justify-content: center;
      width: 100%;
      padding-inline: 8px;
    }

    .capability-node:last-child {
      grid-column: span 2;
    }

    .lab-readout {
      grid-template-columns: 1fr;
      gap: 24px;
      min-height: 390px;
    }

    .readout-number {
      justify-self: end;
    }

    .process-steps li {
      gap: 14px;
    }

    .proof blockquote {
      font-size: clamp(34px, 10vw, 54px);
    }

    .person-image {
      aspect-ratio: 1 / 0.9;
    }

    .person-info {
      grid-template-columns: 1fr;
    }

    .contact h2 {
      font-size: clamp(64px, 20vw, 100px);
    }

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

    .brief-options button {
      width: 100%;
      text-align: left;
    }

    .contact-action {
      font-size: 16px;
    }

    .contact-action svg {
      width: 48px;
    }

    .contact-meta {
      display: grid;
      gap: 12px;
    }

    footer {
      grid-template-columns: 1fr;
      gap: 20px;
    }

    footer > p,
    footer > span {
      justify-self: start;
    }
  }

  @media (max-width: 680px) {
    .aiw-workflow {
      top: 56px;
      right: 14px;
      left: 14px;
    }

    .aiw-technical { top: 17px; }
    .aiw-technical--left { left: 15px; }
    .aiw-technical--right { right: 15px; }
    .aiw-human-note { display: none; }
    .aiw-track { margin-top: 24px; }
    .aiw-stage::before { margin-bottom: 11px; }
    .aiw-stage-assist { white-space: normal; }
    .aiw-readout {
      max-width: min(88%, 340px);
      margin-top: 24px;
      padding: 9px 10px;
    }
    .aiw-readout-detail { max-width: 230px; }
    .aiw-focus {
      gap: 12px;
      max-width: 100%;
      margin-top: 10px;
      padding: 8px 9px;
    }
    .aiw-output-label {
      top: 52px;
      left: 15px;
    }
    .aiw-trigger {
      bottom: 18px;
      right: 16px;
      min-height: 44px;
      gap: 10px;
      padding: 6px 7px 6px 16px;
    }
    .aiw-trigger-icon {
      width: 31px;
      height: 31px;
      font-size: 16px;
    }
  }

  @media (max-width: 480px) {
    .aiw-stage-name { font-size: 9px; }
    .aiw-stage-assist {
      min-height: 18px;
      font-size: 5.5px;
      line-height: 1.25;
    }
    .aiw-readout {
      margin-top: 16px;
    }
    .aiw-focus strong {
      font-size: 6px;
      line-height: 1.35;
    }
    .aiw-trigger-label { font-size: 8px; }
  }

  .capability-lab.is-fidelity-morph {
    display: block;
    min-height: 680px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 10%);
    color: #f1f3ee;
    background: #050705;
    box-shadow: 0 38px 90px rgb(0 0 0 / 34%);
  }

  .capability-lab.is-fidelity-morph > .lab-stage,
  .capability-lab.is-fidelity-morph > .lab-readout {
    display: none;
  }

  .fidelity-morph {
    --fidelity: 0;
    --sketch-opacity: 1;
    --structure-opacity: 0;
    --interface-opacity: 0;
    --experience-opacity: 0;
    --grid-opacity: .12;
    --experience-glow-opacity: 0;
    --morph-radius: 2px;
    --morph-rotate: -2deg;
    --morph-scale: .88;
    --aura-scale: .74;
    --sketch-offset: 0px;
    --structure-scale: .94;
    --interface-scale: .96;
    --experience-scale: .82;
    position: relative;
    min-height: 680px;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(circle at 70% 50%, rgb(217 255 67 / 7%), transparent 32%),
      linear-gradient(135deg, #090c09, #030504 72%);
  }

  .fidelity-morph::before,
  .fidelity-morph::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
  }

  .fidelity-morph::before {
    inset: 0;
    opacity: var(--grid-opacity);
    background-image:
      linear-gradient(rgb(255 255 255 / 4%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / 4%) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 65% 50%, #000, transparent 75%);
  }

  .fidelity-morph::after {
    top: 50%;
    left: 66%;
    width: min(66vw, 780px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: var(--experience-glow-opacity);
    background: conic-gradient(from 210deg, transparent, #d9ff43, #7ee7ff, #c59cff, transparent 72%);
    filter: blur(70px);
    transform: translate(-50%, -50%) scale(var(--aura-scale));
  }

  .fidelity-morph__header {
    position: absolute;
    z-index: 4;
    top: clamp(28px, 4vw, 58px);
    left: clamp(24px, 4vw, 64px);
    max-width: min(47%, 590px);
  }

  .fidelity-morph__header > span {
    color: #778078;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .fidelity-morph__header h3 {
    margin-top: clamp(20px, 2.7vw, 36px);
    font-size: clamp(42px, 5.2vw, 82px);
    font-weight: 500;
    letter-spacing: -.065em;
    line-height: .91;
  }

  .fidelity-morph__header h3 em {
    color: var(--accent);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
  }

  .fidelity-morph__header p {
    max-width: 330px;
    margin-top: 25px;
    color: #818981;
    font-size: 13px;
    line-height: 1.5;
  }

  .fidelity-morph__stage {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    cursor: ew-resize;
    touch-action: none;
  }

  .fidelity-morph__stage:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -8px;
  }

  .fidelity-object {
    position: absolute;
    top: 49%;
    left: 68%;
    width: clamp(260px, 29vw, 440px);
    aspect-ratio: 1 / .9;
    border-radius: var(--morph-radius);
    filter: drop-shadow(0 32px 70px rgb(0 0 0 / 48%));
    transform:
      translate(-50%, -50%)
      rotate(var(--morph-rotate))
      scale(var(--morph-scale));
    transform-style: preserve-3d;
    will-change: transform, border-radius;
  }

  .fidelity-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    will-change: opacity, transform;
  }

  .fidelity-layer--sketch {
    overflow: visible;
    opacity: var(--sketch-opacity);
    transform: translateX(var(--sketch-offset));
  }

  .fidelity-layer--sketch i {
    position: absolute;
    display: block;
    border: 1px solid rgb(235 240 233 / 48%);
  }

  .fidelity-layer--sketch i:first-child {
    inset: 4% 3% 5% 5%;
    rotate: -1.2deg;
    border-radius: 4px 1px 5px 2px;
    box-shadow: 3px 2px 0 rgb(235 240 233 / 12%);
  }

  .fidelity-layer--sketch i:nth-child(2) {
    top: 18%;
    right: 9%;
    left: 10%;
    height: 22%;
    rotate: .8deg;
  }

  .fidelity-layer--sketch i:nth-child(3) {
    right: 52%;
    bottom: 14%;
    left: 10%;
    height: 34%;
    rotate: -.5deg;
  }

  .fidelity-layer--sketch i:nth-child(4) {
    right: 9%;
    bottom: 14%;
    left: 55%;
    height: 34%;
    rotate: 1.1deg;
  }

  .fidelity-layer--sketch span,
  .fidelity-layer--structure span {
    position: absolute;
    top: 8%;
    left: 10%;
    color: rgb(235 240 233 / 52%);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: .2em;
  }

  .fidelity-layer--structure {
    border: 1px solid rgb(126 231 255 / 30%);
    opacity: var(--structure-opacity);
    background:
      linear-gradient(rgb(126 231 255 / 7%) 1px, transparent 1px),
      linear-gradient(90deg, rgb(126 231 255 / 7%) 1px, transparent 1px),
      rgb(6 12 12 / 88%);
    background-size: 24px 24px;
    transform: scale(var(--structure-scale));
  }

  .fidelity-layer--structure i {
    position: absolute;
    border: 1px solid rgb(126 231 255 / 32%);
    background: rgb(126 231 255 / 3%);
  }

  .fidelity-layer--structure i:first-child {
    top: 18%;
    right: 8%;
    left: 8%;
    height: 25%;
  }

  .fidelity-layer--structure i:nth-child(2) {
    top: 48%;
    bottom: 11%;
    left: 8%;
    width: 39%;
  }

  .fidelity-layer--structure i:nth-child(3) {
    top: 48%;
    right: 8%;
    bottom: 11%;
    width: 39%;
  }

  .fidelity-layer--structure i:nth-child(4) {
    top: 28%;
    left: 22%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7ee7ff;
    box-shadow: 0 0 12px rgb(126 231 255 / 70%);
  }

  .fidelity-layer--structure i:nth-child(5) {
    top: 33%;
    right: 17%;
    left: 31%;
    height: 1px;
    border: 0;
    background: repeating-linear-gradient(90deg, #7ee7ff 0 4px, transparent 4px 9px);
  }

  .fidelity-layer--structure span {
    color: rgb(126 231 255 / 66%);
  }

  .fidelity-layer--interface {
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2.2vw, 30px);
    border: 1px solid rgb(255 255 255 / 15%);
    opacity: var(--interface-opacity);
    background:
      radial-gradient(circle at 54% 45%, rgb(126 231 255 / 9%), transparent 38%),
      rgb(9 14 13 / 96%);
    box-shadow: inset 0 0 50px rgb(255 255 255 / 2%);
    transform: scale(var(--interface-scale));
  }

  .fidelity-layer--interface header,
  .fidelity-layer--interface footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 7px;
    letter-spacing: .16em;
  }

  .fidelity-layer--interface header {
    color: #68716a;
  }

  .fidelity-layer--interface header b {
    color: var(--accent);
    font-weight: 500;
  }

  .fidelity-layer--interface > div {
    display: grid;
    gap: 7px;
    margin-block: auto;
    text-align: center;
  }

  .fidelity-layer--interface > div i {
    width: clamp(54px, 6vw, 82px);
    margin: 0 auto 17px;
    aspect-ratio: 1;
    border: 1px solid rgb(126 231 255 / 32%);
    border-radius: 50%;
    background: radial-gradient(circle, #7ee7ff 0 7%, rgb(126 231 255 / 15%) 8% 28%, transparent 29%);
    box-shadow: 0 0 34px rgb(126 231 255 / 16%);
    animation: fidelity-interface-pulse 2.8s ease-in-out infinite;
  }

  .fidelity-layer--interface > div strong {
    font-size: clamp(18px, 2vw, 30px);
    font-weight: 500;
    letter-spacing: -.045em;
  }

  .fidelity-layer--interface > div small {
    color: #6f7971;
    font-size: 9px;
  }

  .fidelity-layer--interface footer {
    padding-top: 12px;
    border-top: 1px solid rgb(255 255 255 / 8%);
    color: #727b74;
  }

  .fidelity-layer--interface footer b {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 50%;
    color: #071006;
    background: var(--accent);
    font-size: 14px;
  }

  .fidelity-layer--experience {
    overflow: visible;
    opacity: var(--experience-opacity);
    mix-blend-mode: screen;
    transform: scale(var(--experience-scale));
  }

  .fidelity-layer--experience i {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    animation: fidelity-liquid-float 6s ease-in-out infinite;
  }

  .fidelity-layer--experience i:first-child {
    top: -8%;
    right: 6%;
    width: 72%;
    height: 62%;
    background: radial-gradient(circle at 45% 48%, #d9ff43, rgb(217 255 67 / 26%) 32%, transparent 67%);
  }

  .fidelity-layer--experience i:nth-child(2) {
    bottom: -16%;
    left: -5%;
    width: 78%;
    height: 66%;
    background: radial-gradient(circle at 55% 42%, #7ee7ff, rgb(126 231 255 / 20%) 35%, transparent 70%);
    animation-delay: -2.2s;
  }

  .fidelity-layer--experience i:nth-child(3) {
    right: -15%;
    bottom: 4%;
    width: 58%;
    height: 52%;
    background: radial-gradient(circle, #c59cff, rgb(197 156 255 / 18%) 38%, transparent 70%);
    animation-delay: -4.1s;
  }

  .fidelity-particles {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0 0 9px rgb(255 255 255 / 42%));
  }

  .fidelity-particles::before,
  .fidelity-particles::after {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
  }

  .fidelity-particles::before {
    width: 16px;
    height: 16px;
    background: #fff;
    box-shadow:
      0 0 18px #fff,
      0 0 48px rgb(217 255 67 / 75%),
      0 0 90px rgb(126 231 255 / 34%);
    animation: fidelity-particle-core 2.4s ease-in-out infinite;
  }

  .fidelity-particles::after {
    width: 62px;
    height: 62px;
    border: 1px solid rgb(255 255 255 / 18%);
    box-shadow:
      0 0 38px rgb(217 255 67 / 14%),
      inset 0 0 30px rgb(126 231 255 / 9%);
    animation: fidelity-particle-ring 3.2s ease-out infinite;
  }

  .fidelity-particles b {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--particle);
    box-shadow: 0 0 12px var(--particle);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
    animation: fidelity-particle-bloom 4.2s cubic-bezier(.22, .8, .28, 1) infinite;
    animation-delay: var(--delay);
  }

  .fidelity-aura {
    position: absolute;
    top: 49%;
    left: 68%;
    width: clamp(330px, 38vw, 570px);
    aspect-ratio: 1;
    opacity: var(--experience-opacity);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(var(--aura-scale));
  }

  .fidelity-aura i {
    position: absolute;
    inset: 8%;
    border: 1px solid rgb(var(--accent-rgb) / 16%);
    border-radius: 50%;
    animation: fidelity-aura-expand 4.8s ease-out infinite;
  }

  .fidelity-aura i:nth-child(2) {
    inset: 19%;
    animation-delay: -1.6s;
  }

  .fidelity-aura i:nth-child(3) {
    inset: 30%;
    animation-delay: -3.2s;
  }

  .fidelity-morph__hint {
    position: absolute;
    right: clamp(24px, 4vw, 64px);
    bottom: 118px;
    color: rgb(235 240 233 / 36%);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 7px;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .fidelity-morph__hint::before {
    display: inline-block;
    width: 28px;
    height: 1px;
    margin-right: 9px;
    content: "";
    vertical-align: middle;
    background: currentColor;
  }

  .fidelity-morph__footer {
    position: absolute;
    z-index: 5;
    right: clamp(24px, 4vw, 64px);
    bottom: clamp(22px, 3vw, 42px);
    left: clamp(24px, 4vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 38px;
    align-items: end;
  }

  .fidelity-progress {
    align-self: end;
    height: 1px;
    overflow: hidden;
    background: rgb(255 255 255 / 13%);
  }

  .fidelity-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #eef0eb, var(--accent));
    box-shadow: 0 0 12px rgb(var(--accent-rgb) / 55%);
    will-change: width;
  }

  .fidelity-steps {
    display: grid;
    grid-column: 1;
    grid-template-columns: repeat(4, 1fr);
    color: #5f685f;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 7px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .fidelity-steps span:nth-child(2),
  .fidelity-steps span:nth-child(3) {
    text-align: center;
  }

  .fidelity-steps span:last-child {
    text-align: right;
  }

  .fidelity-morph__footer > strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    min-width: 170px;
    color: #e9ece6;
    font-size: clamp(24px, 3vw, 45px);
    font-weight: 500;
    letter-spacing: -.06em;
    line-height: .9;
    text-align: right;
  }

  @keyframes fidelity-interface-pulse {
    50% { transform: scale(1.08); box-shadow: 0 0 44px rgb(126 231 255 / 26%); }
  }

  @keyframes fidelity-liquid-float {
    50% { translate: 7% -5%; scale: 1.08; }
  }

  @keyframes fidelity-aura-expand {
    0% { opacity: .65; transform: scale(.62); }
    100% { opacity: 0; transform: scale(1.14); }
  }

  @keyframes fidelity-particle-bloom {
    0%, 12% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.15);
    }
    46%, 72% {
      opacity: 1;
      transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(.45);
    }
  }

  @keyframes fidelity-particle-core {
    50% { opacity: .68; transform: translate(-50%, -50%) scale(1.45); }
  }

  @keyframes fidelity-particle-ring {
    0% { opacity: .7; transform: translate(-50%, -50%) scale(.45); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.65); }
  }

  @media (max-width: 900px) {
    .capability-lab.is-fidelity-morph,
    .fidelity-morph {
      min-height: 650px;
    }

    .fidelity-morph__header {
      max-width: 51%;
    }

    .fidelity-object,
    .fidelity-aura {
      left: 70%;
    }
  }

  @media (max-width: 600px) {
    .capability-lab.is-fidelity-morph,
    .fidelity-morph {
      min-height: 640px;
    }

    .fidelity-morph__header {
      top: 23px;
      right: 20px;
      left: 20px;
      max-width: none;
    }

    .fidelity-morph__header > span {
      font-size: 6px;
    }

    .fidelity-morph__header h3 {
      margin-top: 14px;
      font-size: clamp(38px, 12vw, 54px);
      line-height: .9;
    }

    .fidelity-morph__header p {
      max-width: 250px;
      margin-top: 15px;
      font-size: 10px;
    }

    .fidelity-object {
      top: 57%;
      left: 50%;
      width: min(67vw, 270px);
    }

    .fidelity-aura {
      top: 57%;
      left: 50%;
      width: min(90vw, 360px);
    }

    .fidelity-layer--interface {
      padding: 17px;
    }

    .fidelity-layer--interface > div i {
      margin-bottom: 10px;
    }

    .fidelity-morph__hint {
      right: auto;
      bottom: 105px;
      left: 50%;
      font-size: 6px;
      white-space: nowrap;
      transform: translateX(-50%);
    }

    .fidelity-morph__footer {
      right: 20px;
      bottom: 20px;
      left: 20px;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 7px 16px;
    }

    .fidelity-steps {
      font-size: 5px;
      letter-spacing: .03em;
    }

    .fidelity-morph__footer > strong {
      min-width: 94px;
      font-size: 23px;
    }
  }

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

    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }

    .cursor-glow,
    .page-noise {
      display: none;
    }

    .manifesto-copy .word {
      color: var(--ink);
    }

    .lab-orbit {
      animation: none !important;
    }

    .lab-orbit:first-child {
      transform: rotateZ(0deg);
    }

    .lab-orbit:nth-child(2) {
      transform: rotateZ(0deg);
    }

    .lab-orbit:nth-child(3) {
      transform: rotateZ(0deg);
    }

    .lab-orbit-track {
      animation: none !important;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .capability-node:hover:not(.is-active) {
      color: #cbd3d0;
      border-color: rgb(255 255 255 / 30%);
      background: rgb(7 15 18 / 82%);
      transform: scale(1.015);
    }

    .lab-core:hover {
      --core-scale: 1.025;
      border-color: rgb(217 255 67 / 48%);
      box-shadow:
        0 0 78px rgb(var(--accent-rgb) / 23%),
        inset 0 0 32px rgb(255 255 255 / 8%);
    }
  }
}