@font-face {
  font-family: "Roobert Trial";
  src: url("assets/fonts/RoobertTRIAL-SemiBold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Roobert SemiMono Trial";
  src: url("assets/fonts/RoobertSemiMonoTRIAL-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "UT Breado Script";
  src: url("assets/fonts/UT-Breado-Script-Demo.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Fluid axes based on the 1440 × 1024 Figma frame. */
  --ux: 0.0694444444vw;
  --uy: 0.09765625vh;
  --uy: 0.09765625dvh;
  --u: min(var(--ux), var(--uy));
  --ink: #050505;
  --paper: #c8e0f0;
  --light: #fff9ed;
  --outer: #f2f2f2;
  --about-paper: #fbfaf4;
  --wash-radius: 0vmax;
  --frame-x: clamp(28px, 5vw, 64px);
  --frame-y: clamp(28px, 5.56vh, 40px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a,
button {
  color: inherit;
  font: inherit;
}

a {
  text-decoration: none;
}

button {
  border: 0;
}

.page {
  position: relative;
  isolation: isolate;
  width: 100vw;
  min-height: 200vh;
  min-height: 200dvh;
  padding-top: 100vh;
  padding-top: 100dvh;
  flex: none;
  overflow: clip;
  background: var(--paper);
}

.ambient-field {
  position: fixed;
  z-index: 0;
  inset: -18%;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 38% 48% at 53% 44%,
      rgb(255 249 237 / 92%) 0%,
      rgb(255 249 237 / 67%) 13%,
      rgb(255 249 237 / 0%) 52%
    ),
    linear-gradient(
      131deg,
      rgb(255 249 237 / 0%) 7%,
      rgb(255 249 237 / 83%) 14%,
      rgb(255 249 237 / 28%) 21%,
      rgb(255 249 237 / 0%) 29%,
      rgb(255 249 237 / 0%) 43%,
      rgb(255 249 237 / 76%) 51%,
      rgb(255 249 237 / 20%) 59%,
      rgb(255 249 237 / 0%) 68%
    ),
    #c8e0f0;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1.04);
  transform-origin: center;
  will-change: transform;
}

.section-wash {
  position: fixed;
  z-index: 0;
  inset: 0;
  background: var(--about-paper);
  clip-path: circle(var(--wash-radius) at 50% 105%);
  pointer-events: none;
  will-change: clip-path;
}

.light-band {
  position: absolute;
  display: block;
  width: 18%;
  height: 155%;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    rgb(255 249 237 / 0%),
    rgb(255 249 237 / 88%) 42%,
    rgb(255 249 237 / 94%) 52%,
    rgb(255 249 237 / 0%)
  );
  filter: blur(calc(24 * var(--u)));
  mix-blend-mode: screen;
  opacity: 0.72;
}

.light-band-a {
  top: -34%;
  left: 12%;
  transform: rotate(-41deg);
}

.light-band-b {
  top: -27%;
  left: 48%;
  width: 15%;
  transform: rotate(-39deg);
  opacity: 0.58;
}

.light-band-c {
  top: -22%;
  right: 4%;
  width: 13%;
  transform: rotate(-37deg);
  opacity: 0.46;
}

.pointer-light-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(7px) saturate(1.18);
  will-change: contents;
}

.safari-engine .light-band {
  filter: blur(calc(14 * var(--u)));
}

.safari-engine .pointer-light-canvas,
.safari-engine .section-wash {
  will-change: auto;
}

.site-header,
.site-footer {
  position: fixed;
  z-index: 10;
  right: var(--frame-x);
  left: var(--frame-x);
  display: grid;
  align-items: center;
  line-height: 1;
  text-transform: uppercase;
}

.site-header {
  top: var(--frame-y);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brand {
  width: max-content;
  font-family: "Roobert Trial", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -1px;
}

.main-nav {
  display: flex;
  grid-column: 3;
  width: auto;
  margin-left: 20px;
  justify-content: space-between;
  gap: 0;
  font-family: "Roobert SemiMono Trial", monospace;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -1px;
}

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

.scroll-progress-desktop {
  position: fixed;
  z-index: 30;
  top: 50%;
  right: 0;
  width: 56px;
  height: 200px;
  padding: 0 12px;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 500ms ease;
}

.scroll-progress-desktop.is-visible {
  opacity: 1;
}

.scroll-progress-desktop svg {
  display: block;
}

.main-nav a,
.brand,
.footer-link,
.sound-toggle {
  position: relative;
}

.main-nav a::after,
.brand::after,
.footer-link::after,
.sound-toggle::after {
  position: absolute;
  right: 0;
  bottom: calc(-5 * var(--u));
  left: 0;
  height: max(1px, calc(1 * var(--u)));
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.main-nav a:hover::after,
.brand:hover::after,
.footer-link:hover::after,
.sound-toggle:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.hero {
  position: absolute;
  z-index: 1;
  top: calc(174 * var(--uy));
  right: var(--frame-x);
  bottom: calc(80 * var(--uy));
  left: var(--frame-x);
}

.intro-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.intro-grid p {
  margin: 0;
}

.role {
  grid-column: 1;
  font-family: "Roobert Trial", Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.05;
  transform: translateY(calc(1 * var(--ux)));
}

.approach,
.bio {
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.14;
}

.approach {
  grid-column: 2;
  padding-left: 10px;
}

.bio {
  position: static;
  grid-column: 3;
  width: 100%;
  padding-left: 20px;
}

.bio-line {
  display: block;
  white-space: nowrap;
}

.form-stage {
  position: absolute;
  z-index: 1;
  top: calc(-30 * var(--uy));
  left: calc(50% - 381.5 * var(--u));
  width: calc(763 * var(--u));
  height: calc(764 * var(--u));
  pointer-events: none;
  will-change: transform;
}

.membrane-fallback,
.membrane-canvas,
.membrane-mask {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.membrane-fallback {
  object-fit: fill;
  filter:
    saturate(0.9) brightness(1.035)
    drop-shadow(0 calc(14 * var(--u)) calc(22 * var(--u)) rgb(95 130 205 / 10%));
  opacity: 0.96;
  transition: opacity 180ms ease;
}

.form-stage.is-rendering .membrane-fallback {
  opacity: 0;
}

.membrane-canvas {
  top: -12.31%;
  left: -12%;
  width: 124%;
  height: 124.62%;
  filter:
    saturate(0.9) brightness(1.035)
    drop-shadow(0 calc(14 * var(--u)) calc(22 * var(--u)) rgb(95 130 205 / 10%));
  opacity: 0.96;
}

.safari-engine .membrane-canvas {
  filter: saturate(0.9) brightness(1.035);
}

.membrane-mask {
  overflow: visible;
  opacity: 0;
}

.membrane-path {
  vector-effect: non-scaling-stroke;
}

.headline {
  position: absolute;
  z-index: 3;
  top: calc(442 * var(--uy));
  left: 0;
  width: max-content;
  margin: 0;
  color: var(--ink);
  font-family: "Roobert Trial", Arial, sans-serif;
  font-size: clamp(52px, calc(72 * var(--ux)), 72px);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 0.98;
  text-transform: uppercase;
}

.headline-line {
  display: block;
  white-space: nowrap;
}

.headline-light {
  z-index: 4;
  color: #ffffff;
  pointer-events: none;
  will-change: clip-path;
}

.motion-hint {
  display: none;
}

.about-section {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  min-height: 100vh;
  min-height: 100dvh;
  margin-top: 0;
  padding:
    clamp(136px, 20vh, 232px)
    var(--frame-x)
    clamp(96px, 12vh, 140px);
  scroll-margin-top: 0;
}

.portrait-block {
  position: relative;
  grid-column: 1;
  width: clamp(230px, calc(320 * var(--ux)), 430px);
  max-width: 84%;
  aspect-ratio: 1;
  align-self: start;
  opacity: var(--portrait-opacity, 0);
  transform:
    perspective(700px)
    translate3d(0, var(--portrait-enter-y, 130px), 0)
    rotateX(var(--portrait-enter-rotate, 68deg))
    rotateX(var(--about-exit-rotate, 0deg))
    scaleX(var(--portrait-enter-scale-x, 0.96))
    scaleX(var(--about-exit-scale, 1));
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.portrait,
.portrait-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.portrait {
  object-fit: cover;
  transition: opacity 160ms ease;
}

.portrait-canvas {
  opacity: 0;
  pointer-events: none;
}

.portrait-block.is-canvas-ready .portrait {
  opacity: 0;
}

.portrait-block.is-canvas-ready .portrait-canvas {
  opacity: 1;
}

.portrait-signature {
  position: absolute;
  z-index: 1;
  top: clamp(-54px, -4vw, -34px);
  left: clamp(-18px, -1.1vw, -7px);
  color: #adff00;
  font-family: "UT Breado Script", cursive;
  font-size: clamp(68px, 8.4vw, 132px);
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 0.8;
  clip-path: inset(-30% var(--signature-clip, 100%) -35% -25%);
  opacity: var(--signature-opacity, 0);
  pointer-events: none;
  transform: rotate(-7deg);
  transform-origin: left center;
  will-change: clip-path, opacity;
  white-space: nowrap;
}

.about-copy {
  grid-column: 2 / 4;
  padding-right: 12px;
  padding-left: 10px;
  font-family: "Roobert Trial", Arial, sans-serif;
  letter-spacing: -1px;
}

.about-copy h2,
.about-copy p {
  margin: 0;
  font: inherit;
  font-size: clamp(38px, 4.05vw, 56px);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 0.99;
}

.about-copy h2 {
  max-width: 16.5em;
}

.about-copy p {
  max-width: 16.5em;
  margin-top: clamp(30px, 4vh, 46px);
  color: #92918b;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.02;
}

.about-more-link {
  position: relative;
  display: inline-flex;
  min-height: 44px;
  margin-top: clamp(34px, 4.5vh, 52px);
  align-items: center;
  gap: 10px;
  font-family: "Roobert SemiMono Trial", monospace;
  font-size: 14px;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.about-more-link::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-more-link:hover::after,
.about-more-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.about-more-link img {
  width: 18px;
  height: 18px;
}

.work-section {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    clamp(168px, 23vh, 236px)
    clamp(28px, 3.8889vw, 56px)
    clamp(36px, 5vh, 56px);
  overflow: visible;
  background: transparent;
  scroll-margin-top: 0;
}

.work-section::before {
  position: absolute;
  z-index: 0;
  inset: 0 var(--frame-x);
  background-image:
    linear-gradient(90deg, rgb(128 126 119 / 18%) 1px, transparent 1px),
    linear-gradient(180deg, rgb(128 126 119 / 16%) 1px, transparent 1px);
  background-position:
    0 0,
    0 clamp(330px, 45vh, 430px);
  background-size:
    33.3333% 100%,
    100% clamp(330px, 45vh, 430px);
  content: "";
  filter: blur(var(--work-grid-blur, 14px));
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgb(0 0 0 / 22%) 12%,
    #000 34%,
    #000 100%
  );
  opacity: var(--work-grid-opacity, 0);
  pointer-events: none;
  transform: translateZ(0);
  transform-origin: 50% 0;
  will-change: filter, opacity;
}

.work-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  width: 100%;
}

.project-card {
  grid-column: 5 / 13;
  min-width: 0;
  padding: 8px;
  font-family: "Roobert SemiMono Trial", monospace;
  font-weight: 400;
  letter-spacing: -1px;
  transform:
    perspective(700px)
    translate3d(0, var(--work-card-y, 130px), 0)
    rotateX(var(--work-card-rotate, 68deg))
    scaleX(var(--work-card-scale-x, 0.96));
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

.project-card-link {
  display: block;
  color: inherit;
}

.project-card-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}

.project-card-link .project-media::before {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 16px;
  padding: 8px 10px;
  background: rgb(251 250 244 / 92%);
  color: var(--ink);
  content: "View case study ↗";
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 180ms ease-out,
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card-link:hover .project-media::before,
.project-card-link:focus-visible .project-media::before {
  opacity: 1;
  transform: translateY(0);
}

.project-card--featured {
  grid-row: 1;
}

.project-card--secondary {
  grid-row: 2;
  margin-top: clamp(136px, 18vh, 196px);
  transform: none;
  transform-style: flat;
  backface-visibility: visible;
  will-change: auto;
}

.project-card--savvii {
  grid-column: 7 / 12;
  order: 2;
}

.project-card--evolo {
  grid-column: 1 / 6;
  order: 1;
}

.project-card--tertiary {
  grid-row: 3;
  margin-top: clamp(136px, 18vh, 196px);
}

.project-card--utradea {
  grid-column: 6 / 9;
  order: 3;
}

.project-card--sirius {
  grid-column: 10 / 13;
  order: 4;
}

.project-card--quaternary {
  grid-row: 4;
  margin-top: clamp(136px, 18vh, 196px);
}

.project-card--neu-rich {
  grid-column: 1 / 4;
  order: 5;
}

.project-card--atmosic {
  grid-column: 5 / 8;
  order: 6;
}

.project-card--auradine {
  grid-column: 9 / 12;
  order: 7;
}

.project-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 830;
  overflow: hidden;
  border-radius: var(--work-card-radius, 12px);
  background: #d9d4cd;
  transform: translateZ(0);
  transition: border-radius 80ms linear;
}

.project-video-window {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 90%;
  height: 85%;
  overflow: hidden;
  border-radius: clamp(10px, 1vw, 18px) 0 0;
  background: #171717;
}

.project-video {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 133.4%;
  max-width: none;
  height: 117%;
  object-fit: fill;
  transform: translate(-50%, -50%);
}

.project-card--secondary .project-media {
  aspect-ratio: 16 / 9;
  border-radius: var(--secondary-card-radius, 0);
  background: #000;
  transform:
    perspective(700px)
    translate3d(0, var(--secondary-card-y, 130px), 0)
    rotateX(var(--secondary-card-rotate, 68deg))
    scaleX(var(--secondary-card-scale-x, 0.96));
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

.project-card--secondary .project-media--savvii {
  background: #1e1231;
}

.project-card--secondary .project-media::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 8%) 22%,
    rgb(255 255 255 / 22%) 50%,
    rgb(255 255 255 / 7%) 78%,
    rgb(255 255 255 / 0%) 100%
  );
  content: "";
  opacity: var(--secondary-card-shade, 0.7);
  pointer-events: none;
}

.project-video--savvii {
  top: auto;
  bottom: -25%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
}

.project-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card--tertiary .project-media {
  aspect-ratio: 23 / 15;
}

.project-card--tertiary .project-video--sirius {
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
}

.project-card--neu-rich .project-media {
  aspect-ratio: 5 / 7;
}

.project-card--atmosic .project-media,
.project-card--auradine .project-media {
  aspect-ratio: 1;
}

.project-card--quaternary .project-video {
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
}

.project-status {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  padding: 1px 5px 2px;
  background: #adff00;
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.project-bend-shade {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgb(255 255 255 / 0%) 0%,
      rgb(255 255 255 / 8%) 22%,
      rgb(255 255 255 / 24%) 50%,
      rgb(255 255 255 / 7%) 78%,
      rgb(255 255 255 / 0%) 100%
    );
  opacity: var(--work-card-shade, 0.38);
  pointer-events: none;
  will-change: opacity;
}

.project-meta {
  display: flex;
  min-width: 0;
  margin-top: 12px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
}

.project-meta h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-meta time {
  flex: none;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.project-live-link {
  display: flex;
  min-height: 44px;
  margin-top: 12px;
  padding: 11px 0 10px;
  border-top: 1px solid rgb(5 5 5 / 20%);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: "Roobert SemiMono Trial", monospace;
  font-size: 13px;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.project-live-link > span[aria-hidden="true"] {
  font-size: 17px;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

.project-live-link:hover > span[aria-hidden="true"],
.project-live-link:focus-visible > span[aria-hidden="true"] {
  transform: translate(3px, -3px);
}

.project-live-link:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 4px;
}

.project-live-link--static {
  color: rgb(5 5 5 / 58%);
  cursor: default;
}

.purpose-section {
  --purpose-black-radius: 0vmax;
  --purpose-black-opacity: 0;
  --purpose-return-opacity: 0;
  --purpose-bubble-scale: 1;
  --purpose-bubble-rotate: 0deg;
  --purpose-bubble-opacity: 1;
  --purpose-bubble-y: 50%;
  --purpose-rays-opacity: 0;
  --purpose-first-opacity: 0;
  --purpose-first-y: 38px;
  --purpose-final-opacity: 0;
  --purpose-final-y: 38px;
  --purpose-principles-opacity: 0;
  --purpose-principles-y: 28px;
  --purpose-orbits-opacity: 0;
  --purpose-orbits-scale: 0.76;
  --purpose-future-light-opacity: 0;
  --purpose-future-dark-opacity: 0;
  --purpose-future-top: 50%;
  --purpose-future-y: 34px;
  position: relative;
  z-index: 4;
  height: 360vh;
  height: 360dvh;
  background: var(--about-paper);
}

.purpose-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--about-paper);
  isolation: isolate;
}

.purpose-stage::before {
  position: absolute;
  z-index: 1;
  inset: 0 var(--frame-x);
  background-image:
    linear-gradient(90deg, rgb(128 126 119 / 18%) 1px, transparent 1px),
    linear-gradient(180deg, rgb(128 126 119 / 16%) 1px, transparent 1px);
  background-position: 0 0;
  background-size:
    33.3333% 100%,
    100% 33.3333%;
  content: "";
  pointer-events: none;
}

.purpose-stage::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: var(--about-paper);
  background-image:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 82%) 0 22%, transparent 64%),
    radial-gradient(circle at 18% 42%, rgb(160 224 255 / 18%), transparent 28%),
    radial-gradient(circle at 82% 38%, rgb(255 225 190 / 20%), transparent 26%);
  content: "";
  opacity: var(--purpose-return-opacity);
  pointer-events: none;
  will-change: opacity;
}

.purpose-blackout {
  position: absolute;
  z-index: 2;
  inset: -2px;
  background: #020203;
  clip-path: circle(var(--purpose-black-radius) at 50% 50%);
  opacity: var(--purpose-black-opacity);
  pointer-events: none;
  will-change: clip-path, opacity;
}

.purpose-rays {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--purpose-rays-opacity);
  pointer-events: none;
  will-change: opacity;
}

.purpose-bubble {
  position: absolute;
  z-index: 4;
  top: var(--purpose-bubble-y);
  left: 50%;
  display: block;
  width: clamp(112px, 9.4vw, 152px);
  height: auto;
  opacity: var(--purpose-bubble-opacity);
  pointer-events: none;
  transform:
    translate3d(-50%, -50%, 0)
    rotate(var(--purpose-bubble-rotate))
    scale(var(--purpose-bubble-scale));
  transform-origin: center;
  will-change: transform, opacity;
}

.purpose-copy {
  position: absolute;
  z-index: 5;
  inset: 0;
  margin: 0;
  color: #fff;
  font-family: "Roobert Trial", Arial, sans-serif;
  font-size: clamp(58px, 8.4vw, 124px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.86;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.purpose-message {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(92vw, 1180px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate3d(-50%, calc(-50% + var(--purpose-message-y)), 0);
  will-change: opacity, transform;
}

.purpose-message span {
  display: block;
  word-spacing: 0.08em;
  white-space: nowrap;
}

.purpose-message--first {
  --purpose-message-y: var(--purpose-first-y);
  opacity: var(--purpose-first-opacity);
}

.purpose-message--final {
  --purpose-message-y: var(--purpose-final-y);
  opacity: var(--purpose-final-opacity);
}

.purpose-principles {
  position: absolute;
  z-index: 5;
  inset: 0;
  color: #fff;
  font-family: "Roobert Trial", Arial, sans-serif;
  font-size: clamp(24px, 1.82vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.16;
  opacity: var(--purpose-principles-opacity);
  pointer-events: none;
  transform: translate3d(0, var(--purpose-principles-y), 0);
  will-change: opacity, transform;
}

.purpose-principle {
  position: absolute;
  margin: 0;
}

.purpose-principle--top {
  top: 27%;
  left: 50.5%;
}

.purpose-principle--left {
  top: 52%;
  left: 12.4%;
}

.purpose-principle--right {
  top: 40%;
  right: auto;
  left: 65.8%;
}

.purpose-principle--bottom {
  bottom: 25.5%;
  left: 27.6%;
}

.purpose-orbits {
  position: absolute;
  top: 51.5%;
  left: 50%;
  width: min(25vw, 370px);
  height: auto;
  aspect-ratio: 1;
  opacity: var(--purpose-orbits-opacity);
  transform: translate3d(-50%, -50%, 0) scale(var(--purpose-orbits-scale));
  will-change: opacity, transform;
}

.purpose-orbits span {
  position: absolute;
  top: var(--orbit-top);
  left: 50%;
  width: var(--orbit-width);
  height: clamp(23px, 2.7vh, 36px);
  border: 2px solid #adff00;
  border-radius: 50%;
  clip-path: inset(0 var(--orbit-clip, 50%) 0 var(--orbit-clip, 50%));
  opacity: var(--orbit-opacity, 0);
  transform: translate3d(
    -50%,
    calc(-50% + var(--orbit-drift, 0px)),
    0
  );
  will-change: clip-path, opacity, transform;
}

.purpose-orbits span:nth-child(1) {
  --orbit-width: 54%;
  --orbit-top: 10%;
}

.purpose-orbits span:nth-child(2) {
  --orbit-width: 86%;
  --orbit-top: 30%;
}

.purpose-orbits span:nth-child(3) {
  --orbit-width: 100%;
  --orbit-top: 50%;
}

.purpose-orbits span:nth-child(4) {
  --orbit-width: 86%;
  --orbit-top: 70%;
}

.purpose-orbits span:nth-child(5) {
  --orbit-width: 54%;
  --orbit-top: 90%;
}

.purpose-future {
  position: absolute;
  z-index: 6;
  inset: 0;
  margin: 0;
  font-family: "Roobert Trial", Arial, sans-serif;
  font-size: clamp(58px, 8.4vw, 124px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.86;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}

.purpose-future-layer {
  position: absolute;
  top: var(--purpose-future-top);
  left: 50%;
  display: flex;
  width: min(94vw, 1240px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate3d(-50%, calc(-50% + var(--purpose-future-y)), 0);
  will-change: opacity, transform;
}

.purpose-future-layer span {
  display: block;
  white-space: nowrap;
}

.purpose-future-layer--light {
  color: #fff;
  opacity: var(--purpose-future-light-opacity);
}

.purpose-future-layer--dark {
  color: #050505;
  opacity: var(--purpose-future-dark-opacity);
}

.contact-section {
  --contact-blue-opacity: 0;
  --contact-streaks-opacity: 0;
  --contact-word-opacity: 0;
  --contact-word-scale: 0.76;
  --contact-word-y: 72vh;
  --contact-word-pointer-x: 0px;
  --contact-word-pointer-y: 0px;
  --contact-word-rotate-x: 0deg;
  --contact-word-rotate-y: 0deg;
  --contact-copy-opacity: 0;
  --contact-copy-y: 54px;
  --contact-details-opacity: 0;
  position: relative;
  z-index: 5;
  height: 165vh;
  height: 165dvh;
  margin-top: -100vh;
  margin-top: -100dvh;
  background: transparent;
}

.contact-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.contact-stage::before {
  position: absolute;
  z-index: 4;
  inset: 0 var(--frame-x);
  background-image:
    linear-gradient(90deg, rgb(128 126 119 / 17%) 1px, transparent 1px),
    linear-gradient(180deg, rgb(128 126 119 / 15%) 1px, transparent 1px);
  background-size:
    33.3333% 100%,
    100% 33.3333%;
  content: "";
  pointer-events: none;
}

.contact-stage::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgb(127 203 255 / 32%), transparent 42%),
    radial-gradient(circle at 78% 68%, rgb(255 156 205 / 22%), transparent 40%),
    radial-gradient(circle at 54% 48%, rgb(255 255 255 / 74%), transparent 56%),
    linear-gradient(135deg, #cceafe 0%, #eef6ff 48%, #fff5e8 100%);
  content: "";
  opacity: var(--contact-blue-opacity);
  pointer-events: none;
  will-change: opacity;
}

.contact-streaks {
  position: absolute;
  z-index: 1;
  inset: -16%;
  background:
    linear-gradient(132deg, transparent 18%, rgb(255 255 255 / 72%) 27%, transparent 36%),
    linear-gradient(132deg, transparent 38%, rgb(255 250 233 / 78%) 48%, transparent 57%),
    linear-gradient(132deg, transparent 60%, rgb(255 255 255 / 66%) 68%, transparent 77%);
  filter: blur(18px);
  opacity: var(--contact-streaks-opacity);
  pointer-events: none;
  transform: translate3d(-4%, -2%, 0) scale(1.08);
  will-change: opacity, transform;
}

.contact-bubble-type {
  position: absolute;
  z-index: 2;
  top: 51%;
  left: 50%;
  display: flex;
  width: min(86vw, 1180px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("assets/hero-sphere-hello-v1.png");
  background-position: 50% 52%;
  background-size: 118% 146%;
  background-repeat: no-repeat;
  color: rgb(154 205 255 / 74%);
  filter:
    drop-shadow(0 16px 20px rgb(77 139 255 / 18%))
    drop-shadow(0 -3px 8px rgb(255 255 255 / 66%));
  font-family: "Roobert Trial", Arial, sans-serif;
  font-size: clamp(154px, 19.5vw, 310px);
  font-weight: 600;
  letter-spacing: -0.075em;
  line-height: 0.68;
  opacity: var(--contact-word-opacity);
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
  transform:
    perspective(900px)
    translate3d(
      calc(-50% + var(--contact-word-pointer-x)),
      calc(-50% + var(--contact-word-y) + var(--contact-word-pointer-y)),
      0
    )
    rotateX(var(--contact-word-rotate-x))
    rotateY(var(--contact-word-rotate-y))
    scale(var(--contact-word-scale));
  transform-style: preserve-3d;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px rgb(255 255 255 / 18%);
  will-change: opacity, transform;
}

.contact-bubble-type span {
  display: block;
  white-space: nowrap;
}

.contact-callout {
  position: absolute;
  z-index: 6;
  top: 49%;
  left: 50%;
  display: flex;
  width: min(66vw, 960px);
  flex-direction: column;
  margin: 0;
  color: #050505;
  font-family: "Roobert Trial", Arial, sans-serif;
  font-size: clamp(54px, 5.9vw, 92px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.82;
  opacity: var(--contact-copy-opacity);
  text-transform: uppercase;
  pointer-events: none;
  transform: translate3d(-50%, calc(-50% + var(--contact-copy-y)), 0);
  will-change: opacity, transform;
}

.contact-callout-row {
  display: flex;
  white-space: nowrap;
}

.contact-callout-row--split {
  justify-content: space-between;
}

.contact-callout-row--middle {
  justify-content: flex-start;
}

.contact-callout-row--last {
  justify-content: center;
}

.contact-details {
  position: absolute;
  z-index: 6;
  right: var(--frame-x);
  bottom: calc(var(--frame-y) + clamp(62px, 8vh, 78px));
  left: var(--frame-x);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  color: #050505;
  font-family: "Roobert SemiMono Trial", monospace;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
  opacity: var(--contact-details-opacity);
  text-transform: uppercase;
  will-change: opacity;
}

.contact-details-left {
  display: flex;
  flex-direction: column;
  gap: clamp(34px, 5.3vh, 52px);
}

.contact-details a {
  width: max-content;
}

.contact-socials {
  display: flex;
  grid-column: 3;
  justify-self: end;
  gap: clamp(24px, 2.8vw, 44px);
}

.site-footer {
  transition: opacity 260ms ease;
}

.contact-active .site-footer {
  opacity: 1;
  pointer-events: auto;
}

.purpose-dark .site-header,
.purpose-dark .site-footer,
.purpose-dark .scroll-progress-desktop,
.purpose-dark .scroll-progress-mobile {
  color: #fff;
}

.purpose-dark .sound-icon img,
.purpose-dark .footer-link img {
  filter: invert(1);
}

.site-footer {
  bottom: var(--frame-y);
  grid-template-columns: 1fr 1fr;
  font-family: "Roobert SemiMono Trial", monospace;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -1px;
}

.footer-link,
.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.footer-link {
  justify-self: start;
}

.footer-link img,
.sound-toggle img {
  width: calc(20 * var(--ux));
  height: calc(20 * var(--ux));
}

.sound-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.sound-icon img {
  display: block;
}

.sound-icon::after {
  position: absolute;
  top: 50%;
  left: -1px;
  width: calc(100% + 2px);
  height: 1px;
  background: currentColor;
  content: "";
  transform: translateY(-50%) rotate(-42deg) scaleX(0);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.sound-toggle[aria-pressed="false"] .sound-icon::after {
  transform: translateY(-50%) rotate(-42deg) scaleX(1);
}

.sound-toggle {
  justify-self: end;
  padding: 0;
  background: transparent;
  text-transform: uppercase;
  cursor: pointer;
}

.sound-toggle[aria-pressed="false"] img {
  opacity: 0.72;
}

.footer-copyright {
  display: none;
  justify-self: end;
  white-space: nowrap;
}

.contact-active .footer-copyright {
  display: none;
}

@media (max-width: 1023px) {
  :root {
    --u: 1px;
    --mobile-frame-x: clamp(20px, 4vw, 40px);
    --mobile-frame-y: clamp(18px, 3vw, 28px);
  }

  body {
    display: block;
    overflow: auto;
  }

  .page {
    width: 100%;
    min-height: 200vh;
    min-height: 200svh;
    margin: 0;
    padding: 100vh 0 0;
    padding: 100svh 0 0;
    overflow: clip;
  }

  .ambient-field {
    position: fixed;
  }

  .pointer-light-canvas {
    position: fixed;
  }

  .site-header {
    z-index: 50;
    top: var(--mobile-frame-y);
    right: var(--mobile-frame-x);
    left: var(--mobile-frame-x);
    align-items: center;
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    display: none;
  }

  .menu-toggle {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    padding: 0;
    justify-self: end;
    background: transparent;
    cursor: pointer;
  }

  .menu-toggle-line {
    position: absolute;
    right: 0;
    width: 28px;
    height: 2px;
    background: currentColor;
    transform-origin: center;
    transition:
      top 660ms cubic-bezier(0.66, 0, 0.01, 1),
      bottom 660ms cubic-bezier(0.66, 0, 0.01, 1),
      transform 660ms cubic-bezier(0.66, 0, 0.01, 1);
  }

  .menu-toggle-line-top {
    top: 8px;
  }

  .menu-toggle-line-bottom {
    bottom: 8px;
  }

  .menu-open .menu-toggle-line-top {
    top: 15px;
    transform: rotate(45deg);
  }

  .menu-open .menu-toggle-line-bottom {
    bottom: 15px;
    transform: rotate(-45deg);
  }

  .mobile-menu {
    position: fixed;
    z-index: 40;
    inset: 0;
    display: flex;
    align-items: center;
    padding: var(--mobile-frame-y) var(--mobile-frame-x);
    background: transparent;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear 760ms;
  }

  .menu-open .mobile-menu,
  .menu-closing .mobile-menu {
    visibility: visible;
    transition-delay: 0s;
  }

  .menu-open .mobile-menu {
    pointer-events: auto;
  }

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

  .mobile-menu-pixels {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    grid-template-rows: repeat(24, minmax(0, 1fr));
    overflow: hidden;
    pointer-events: none;
  }

  .mobile-menu-pixel {
    min-width: 0;
    min-height: 0;
    background: var(--about-paper);
    opacity: 0;
    transform: scale(0.05);
    transform-origin: center;
  }

  .menu-open .mobile-menu-pixel {
    animation: menu-pixel-open 580ms steps(6, end) both;
    animation-delay: var(--pixel-delay, 0ms);
  }

  .menu-closing .mobile-menu-pixel {
    animation: menu-pixel-close 520ms steps(6, end) both;
    animation-delay: var(--pixel-close-delay, 0ms);
  }

  @keyframes menu-pixel-open {
    0% {
      background: var(--about-paper);
      opacity: 0;
      transform: scale(0.05);
    }
    42% {
      background: var(--about-paper);
      opacity: 1;
      transform: scale(0.82);
    }
    100% {
      background: var(--about-paper);
      opacity: 1;
      transform: scale(1.03);
    }
  }

  @keyframes menu-pixel-close {
    0% {
      background: var(--about-paper);
      opacity: 1;
      transform: scale(1.03);
    }
    52% {
      background: var(--about-paper);
      opacity: 1;
      transform: scale(0.78);
    }
    100% {
      background: var(--about-paper);
      opacity: 0;
      transform: scale(0.05);
    }
  }

  .mobile-menu-nav {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: "Roobert SemiMono Trial", monospace;
    font-size: clamp(38px, 10svw, 80px);
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 1.5;
    text-transform: uppercase;
  }

  .mobile-menu-nav a {
    position: relative;
    display: block;
    overflow: hidden;
  }

  .menu-char {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.28em, 0);
  }

  .menu-open .menu-char {
    animation: menu-char-decode 720ms steps(6, end) both;
    animation-delay: calc(180ms + var(--char-delay, 0ms));
  }

  .menu-closing .menu-char {
    animation: menu-char-encode 460ms steps(5, end) both;
    animation-delay: var(--char-close-delay, 0ms);
  }

  @keyframes menu-char-decode {
    0% {
      color: #adff00;
      filter: blur(4px);
      opacity: 0;
      transform: translate3d(0, 0.28em, 0) scaleX(0.45);
    }
    36% {
      color: #adff00;
      filter: blur(0);
      opacity: 1;
      transform: translate3d(0, 0, 0) scaleX(0.7);
    }
    62% {
      color: #5f8500;
      opacity: 1;
      transform: translate3d(0, 0, 0) scaleX(1.08);
    }
    100% {
      color: var(--ink);
      filter: blur(0);
      opacity: 1;
      transform: translate3d(0, 0, 0) scaleX(1);
    }
  }

  @keyframes menu-char-encode {
    0% {
      color: var(--ink);
      opacity: 1;
      transform: translate3d(0, 0, 0) scaleX(1);
    }
    52% {
      color: #adff00;
      filter: blur(0);
      opacity: 1;
      transform: translate3d(0, 0.18em, 0) scaleX(0.62);
    }
    100% {
      color: #adff00;
      filter: blur(4px);
      opacity: 0;
      transform: translate3d(0, 0.38em, 0) scaleX(0.25);
    }
  }

  .mobile-menu-footer {
    position: absolute;
    z-index: 2;
    right: var(--mobile-frame-x);
    bottom: 24px;
    left: var(--mobile-frame-x);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    font-family: "Roobert SemiMono Trial", monospace;
    font-size: clamp(11px, 2.1vw, 16px);
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(12px);
  }

  .menu-open .mobile-menu-footer {
    animation: menu-footer-in 480ms steps(5, end) 420ms both;
  }

  .menu-closing .mobile-menu-footer {
    animation: menu-footer-out 320ms steps(4, end) both;
  }

  @keyframes menu-footer-in {
    0% {
      color: #adff00;
      opacity: 0;
      transform: translateY(12px);
    }
    42% {
      color: #adff00;
      opacity: 1;
    }
    100% {
      color: var(--ink);
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes menu-footer-out {
    0% {
      color: var(--ink);
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      color: #adff00;
      opacity: 0;
      transform: translateY(10px);
    }
  }

  .mobile-menu-footer-link,
  .mobile-menu-sound {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }

  .mobile-menu-footer-link {
    justify-self: start;
  }

  .mobile-menu-sound {
    padding: 0;
    justify-self: end;
    background: transparent;
    text-transform: uppercase;
    cursor: pointer;
  }

  .mobile-menu-footer img {
    display: block;
    width: 16px;
    height: 16px;
  }

  .scroll-progress-desktop {
    display: none;
  }

  .scroll-progress-mobile {
    position: fixed;
    z-index: 60;
    right: 0;
    bottom: 0;
    display: flex;
    width: 72px;
    height: 72px;
    padding: 24px;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  .menu-open .scroll-progress-mobile,
  .menu-closing .scroll-progress-mobile {
    opacity: 0;
    pointer-events: none;
  }

  .scroll-progress-mobile svg {
    display: block;
    flex: none;
    transform: scale(0.5);
    transition: transform 660ms cubic-bezier(0.66, 0, 0.01, 1);
  }

  .scroll-progress-mobile.is-active svg {
    transform: scale(1);
  }

  .scroll-progress-ring-track {
    stroke: #c8c8c5;
  }

  .scroll-progress-ring-value {
    stroke: currentColor;
    stroke-dasharray: 75.3982236862;
    stroke-dashoffset: 75.3982236862;
  }

  .hero {
    position: absolute;
    top: 0;
    right: var(--mobile-frame-x);
    bottom: auto;
    left: var(--mobile-frame-x);
    height: 100vh;
    height: 100svh;
  }

  .intro-grid {
    position: static;
    display: block;
  }

  .role,
  .approach {
    display: none;
  }

  .bio {
    position: absolute;
    z-index: 5;
    bottom: clamp(118px, 18svh, 360px);
    left: 0;
    width: min(100%, 52rem);
    padding: 0;
    font-size: clamp(14px, 2.25vw, 18px);
    line-height: 1.38;
  }

  .bio-line {
    display: inline;
    white-space: normal;
  }

  .bio-line:not(:last-child)::after {
    content: " ";
  }

  .form-stage {
    top: clamp(230px, 30svh, 540px);
    left: 50%;
    width: min(56vw, 440px);
    height: auto;
    aspect-ratio: 1;
    transform: translateX(-50%);
  }

  .headline {
    top: clamp(96px, 10svh, 160px);
    width: 100%;
    font-size: clamp(36px, 7.8vw, 64px);
    line-height: 0.94;
  }

  .headline-line {
    white-space: normal;
  }

  .site-footer {
    z-index: 50;
    right: var(--mobile-frame-x);
    bottom: 24px;
    left: var(--mobile-frame-x);
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 14px;
    transition: opacity 220ms steps(3, end);
  }

  .menu-open .site-footer,
  .menu-closing .site-footer {
    opacity: 0;
    pointer-events: none;
  }

  .sound-toggle,
  .footer-copyright,
  .contact-active .footer-copyright {
    display: none;
  }

  .footer-link img {
    width: 20px;
    height: 20px;
  }

  .about-section {
    display: block;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    padding:
      clamp(108px, 12svh, 152px)
      var(--mobile-frame-x)
      clamp(112px, 14svh, 170px);
  }

  .portrait-block,
  .about-copy {
    width: 100%;
  }

  .portrait-block {
    max-width: none;
    margin-bottom: clamp(24px, 4vw, 44px);
  }

  .portrait-signature {
    top: clamp(-54px, -5vw, -30px);
    left: clamp(-18px, -1vw, -6px);
    font-size: clamp(72px, 18vw, 170px);
  }

  .about-copy {
    padding: 0;
  }

  .about-copy h2 {
    max-width: none;
    font-size: clamp(24px, 4.2vw, 42px);
    line-height: 1.08;
  }

  .about-copy p {
    max-width: none;
    margin-top: clamp(44px, 8vw, 84px);
    font-size: clamp(21px, 4vw, 38px);
    line-height: 1.08;
  }

  .work-section {
    min-height: 100vh;
    min-height: 100svh;
    padding:
      clamp(118px, 18svh, 190px)
      var(--mobile-frame-x)
      clamp(36px, 6svh, 64px);
  }

  .work-section::before {
    inset-inline: var(--mobile-frame-x);
  }

  .project-card {
    grid-column: 1 / -1;
  }

  .project-card--featured,
  .project-card--secondary {
    grid-row: auto;
  }

  .project-card--secondary {
    grid-column: 1 / -1;
    margin-top: clamp(72px, 10svh, 116px);
  }

  .project-meta {
    font-size: 14px;
  }

  .purpose-section {
    height: 340vh;
    height: 340svh;
  }

  .purpose-stage {
    height: 100vh;
    height: 100svh;
  }

  .purpose-stage::before {
    inset-inline: var(--mobile-frame-x);
  }

  .purpose-bubble {
    width: clamp(92px, 23vw, 126px);
  }

  .purpose-copy {
    font-size: clamp(42px, 12.8vw, 86px);
    line-height: 0.9;
  }

  .purpose-principles {
    font-size: clamp(17px, 2.8vw, 24px);
    line-height: 1.18;
  }

  .purpose-principle--top {
    top: 22%;
    left: 50%;
  }

  .purpose-principle--left {
    top: 45%;
    left: 6%;
  }

  .purpose-principle--right {
    top: 57%;
    right: 5%;
    left: auto;
  }

  .purpose-principle--bottom {
    bottom: 14%;
    left: 17%;
  }

  .purpose-orbits {
    top: 48%;
    width: min(56vw, 280px);
    height: auto;
  }

  .purpose-orbits span {
    height: clamp(18px, 3.1vh, 29px);
  }

  .purpose-future {
    font-size: clamp(42px, 12.8vw, 86px);
    line-height: 0.9;
  }

  .contact-section {
    height: 160vh;
    height: 160svh;
    margin-top: -100vh;
    margin-top: -100svh;
  }

  .contact-stage {
    height: 100vh;
    height: 100svh;
  }

  .contact-stage::before {
    inset-inline: var(--mobile-frame-x);
  }

  .contact-bubble-type {
    width: 100vw;
    font-size: 25vw;
    line-height: 0.72;
  }

  .contact-callout {
    top: 48%;
    width: 90vw;
    font-size: clamp(30px, 8vw, 54px);
    line-height: 0.9;
  }

  .contact-details {
    right: var(--mobile-frame-x);
    bottom: calc(var(--mobile-frame-y) + 42px);
    left: var(--mobile-frame-x);
    display: block;
    font-size: 12px;
  }

  .contact-details-left {
    gap: 34px;
  }

  .contact-socials {
    position: absolute;
    right: 0;
    bottom: 0;
    gap: 18px;
  }

  .mobile-menu-sound[aria-pressed="false"] .sound-icon::after {
    transform: translateY(-50%) rotate(-42deg) scaleX(1);
  }
}

@media (min-width: 521px) and (max-width: 1023px) {
  .about-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    min-height: 100vh;
    min-height: 100svh;
    padding:
      clamp(174px, 25svh, 270px)
      var(--mobile-frame-x)
      clamp(88px, 11svh, 130px);
  }

  .portrait-block {
    grid-column: 1;
    width: min(100%, 30vw);
    max-width: none;
    margin: 0;
  }

  .portrait-signature {
    top: clamp(-50px, -4vw, -30px);
    left: clamp(-16px, -1vw, -6px);
    font-size: clamp(64px, 8vw, 112px);
  }

  .about-copy {
    grid-column: 2 / 4;
    padding-right: 8px;
    padding-left: clamp(10px, 1.5vw, 20px);
  }

  .about-copy h2 {
    max-width: 16.5em;
    font-size: clamp(30px, 4.15vw, 43px);
    line-height: 1;
  }

  .about-copy p {
    max-width: 16.5em;
    margin-top: clamp(28px, 4svh, 42px);
    font-size: clamp(24px, 3.35vw, 35px);
    line-height: 1.02;
  }
}

@media (max-width: 520px) {
  .headline {
    top: clamp(64px, 7.8svh, 76px);
    font-size: clamp(30px, 8.2vw, 34px);
    line-height: 0.95;
  }

  .bio {
    bottom: clamp(72px, 9svh, 88px);
    font-size: 14px;
  }

  .form-stage {
    top: clamp(226px, 28svh, 250px);
    width: min(74vw, 310px);
  }

  .about-section {
    padding-top: clamp(96px, 12svh, 118px);
  }

  .mobile-menu-footer {
    font-size: clamp(9px, 2.7vw, 12px);
  }

  .mobile-menu-footer img {
    width: 14px;
    height: 14px;
  }

  .work-section {
    padding-top: clamp(104px, 15svh, 132px);
  }

  .project-card {
    padding: 4px;
  }

  .project-status {
    padding-right: 5px;
    padding-left: 5px;
    font-size: 10px;
  }

  .project-meta {
    margin-top: 9px;
    font-size: 12px;
  }

  .project-live-link {
    margin-top: 9px;
    font-size: 12px;
  }

  .purpose-message--final {
    width: calc(100vw - (var(--mobile-frame-x) * 2));
  }

  .purpose-message--final span:last-child {
    width: 100%;
    white-space: normal;
    text-wrap: balance;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .mobile-menu-pixel,
  .menu-char,
  .mobile-menu-footer {
    animation-delay: 0ms !important;
    animation-duration: 0.01ms !important;
  }
}