@font-face {
  font-family: "InterVariable";
  src: url("assets/inter-variable-subset.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "liga" 1, "calt" 1, "ss01" 1;
  --bg: #fbfbfb;
  --ink: #0b0b0a;
  --ink-rgb: 11, 11, 10;
  --signal: #ff1493;
  --signal-rgb: 255, 20, 147;
  --sound-idle: #00c7c7;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-synthesis: none;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

body::selection {
  background: var(--ink);
  color: #fff;
}

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

a:focus-visible,
summary:focus-visible,
.sound-switch:focus-visible {
  outline: 1px solid rgba(var(--ink-rgb), 0.34);
  outline-offset: 6px;
}

.page {
  height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 24px;
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(var(--ink-rgb), 0.18) 0.4px, transparent 0.45px);
  background-size: 7px 7px;
  opacity: 0.018;
}

@supports (height: 100dvh) {
  .page {
    height: 100dvh;
  }
}

h1 {
  position: absolute;
  left: clamp(24px, 16vw, 220px);
  top: 67vh;
  width: max-content;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 17.1875px;
  font-weight: 900;
  font-variation-settings: "wght" 900, "opsz" 14;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  animation: hero-focus-lock 1750ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.headline-tooltip {
  position: static;
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  margin-top: -5px;
}

.headline-tooltip-trigger {
  appearance: none;
  width: 12px;
  height: 12px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--ink-rgb), 0.34);
  border-radius: 999px;
  background: transparent;
  color: rgba(var(--ink-rgb), 0.58);
  cursor: help;
  font: inherit;
  font-size: 7.5px;
  font-weight: 760;
  font-variation-settings: "wght" 760, "opsz" 14;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  animation: headline-tooltip-arrive 620ms cubic-bezier(0.16, 1, 0.3, 1) 4480ms both;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.headline-tooltip-trigger:hover,
.headline-tooltip-trigger:focus-visible {
  border-color: var(--sound-idle);
  color: var(--sound-idle);
  transform: translateY(-1px);
}

.headline-tooltip-copy {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: min(360px, calc(100vw - 48px));
  max-width: min(360px, calc(100vw - 48px));
  display: block;
  color: rgba(var(--ink-rgb), 0.48);
  font-size: 10.5px;
  font-weight: 560;
  font-variation-settings: "wght" 560, "opsz" 14;
  letter-spacing: 0;
  line-height: 1.22;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -2px, 0);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  white-space: normal;
  z-index: 2;
}

.tooltip-blue {
  color: var(--sound-idle);
  font-weight: 760;
  font-variation-settings: "wght" 760, "opsz" 14;
}

.headline-tooltip:hover .headline-tooltip-copy,
.headline-tooltip.is-tooltip-open .headline-tooltip-copy,
.headline-tooltip:focus-within .headline-tooltip-copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.experience-switch,
.cases-switch,
.talk-switch,
.contact-switch {
  position: absolute;
  width: max-content;
}

.experience-switch {
  left: clamp(24px, 32vw, 420px);
  top: calc(24vh - 7px);
}

.cases-switch {
  right: clamp(24px, 28vw, 360px);
  top: 36vh;
}

.talk-switch {
  left: clamp(24px, calc(48vw + 73px), 713px);
  top: calc(47vh + 60px);
}

.contact-switch {
  right: clamp(24px, 15vw, 190px);
  top: 59vh;
}

.logo-switch {
  position: absolute;
  right: 50%;
  bottom: 28px;
  width: max-content;
  transform: translateX(50%);
  opacity: 0;
  filter: blur(1.4px);
  animation: intro-fade-arrive 680ms cubic-bezier(0.16, 1, 0.3, 1) 2655ms both;
}

.sound-switch {
  appearance: none;
  position: absolute;
  left: 24px;
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sound-idle);
  cursor: pointer;
  font: inherit;
  transform-origin: left center;
  transition: color 180ms ease;
  opacity: 0;
  filter: blur(1.4px);
  transform: translateY(3px);
  animation: intro-control-arrive 680ms cubic-bezier(0.16, 1, 0.3, 1) 2400ms both;
}

summary {
  position: relative;
  min-width: 30px;
  min-height: 30px;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

.experience-switch summary,
.cases-switch summary,
.talk-switch summary,
.contact-switch summary {
  --float-x-1: 4px;
  --float-y-1: -6px;
  --float-x-2: -5px;
  --float-y-2: 4px;
  --float-x-3: 3px;
  --float-y-3: 5px;
  --focus-blur-1: 0.34px;
  --focus-blur-2: 0.08px;
  --focus-blur-3: 0.48px;
  --parallax-x: 0px;
  --parallax-y: 0px;
  --sound-drift: 0px;
  --sound-scale: 0;
  animation: plus-atmosphere 14s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  will-change: transform, filter, opacity;
}

.experience-switch summary::after,
.cases-switch summary::after,
.talk-switch summary::after,
.contact-switch summary::after {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--signal);
  font-size: 21.125px;
  font-weight: 900;
  font-variation-settings: "wght" 900, "opsz" 14;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}

.experience-switch[open] summary::after,
.cases-switch[open] summary::after,
.talk-switch[open] summary::after,
.contact-switch[open] summary::after,
.experience-switch summary:active::after,
.cases-switch summary:active::after,
.talk-switch summary:active::after,
.contact-switch summary:active::after {
  animation: plus-pressure-mark 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.page.is-sound-on .experience-switch summary,
.page.is-sound-on .cases-switch summary,
.page.is-sound-on .talk-switch summary,
.page.is-sound-on .contact-switch summary {
  --sound-drift: -1px;
  --sound-scale: 0.018;
  animation-duration: 19s;
}

@media (hover: hover) {
  .experience-switch summary:hover,
  .cases-switch summary:hover,
  .talk-switch summary:hover,
  .contact-switch summary:hover {
    animation-play-state: paused;
    filter: blur(0) !important;
    opacity: 1 !important;
  }
}

.experience-switch summary:active,
.cases-switch summary:active,
.talk-switch summary:active,
.contact-switch summary:active {
  animation-play-state: paused;
  filter: blur(0) !important;
  opacity: 1 !important;
}

.cases-switch summary {
  --float-x-1: -5px;
  --float-y-1: -4px;
  --float-x-2: 4px;
  --float-y-2: 6px;
  --float-x-3: 6px;
  --float-y-3: -3px;
  --focus-blur-1: 0.14px;
  --focus-blur-2: 0.52px;
  --focus-blur-3: 0.22px;
  animation-delay: -4.2s;
  animation-duration: 16s;
}

.talk-switch summary {
  --float-x-1: 3px;
  --float-y-1: 5px;
  --float-x-2: -4px;
  --float-y-2: -5px;
  --float-x-3: 5px;
  --float-y-3: -2px;
  --focus-blur-1: 0.44px;
  --focus-blur-2: 0.18px;
  --focus-blur-3: 0.58px;
  animation-delay: -8.6s;
  animation-duration: 18s;
}

.contact-switch summary {
  --float-x-1: -4px;
  --float-y-1: 5px;
  --float-x-2: 5px;
  --float-y-2: -4px;
  --float-x-3: -2px;
  --float-y-3: -6px;
  --focus-blur-1: 0.24px;
  --focus-blur-2: 0.46px;
  --focus-blur-3: 0.12px;
  animation-delay: -11.3s;
  animation-duration: 15s;
}

.plus {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--signal);
  font-size: 21.125px;
  font-weight: 900;
  font-variation-settings: "wght" 900, "opsz" 14;
  line-height: 1;
  transform-origin: center;
  transition:
    color 140ms ease,
    transform 160ms ease;
  opacity: 1;
  filter: blur(0);
  text-shadow: 0 0 0 rgba(var(--signal-rgb), 0);
  animation: intro-plus-arrive 720ms cubic-bezier(0.16, 1, 0.3, 1) var(--intro-delay, 460ms) both;
}

.experience-switch .plus {
  --intro-delay: 3705ms;
}

.talk-switch .plus {
  --intro-delay: 3450ms;
}

.cases-switch .plus {
  --intro-delay: 3195ms;
}

.contact-switch .plus {
  --intro-delay: 2940ms;
}

.contact-switch[open] .plus,
.experience-switch[open] .plus,
.cases-switch[open] .plus,
.talk-switch[open] .plus {
  color: var(--ink);
  transform: rotate(45deg);
}

.hint {
  display: inline-block;
  color: var(--signal);
  font-size: 11px;
  font-weight: 360;
  font-variation-settings: "wght" 360, "opsz" 14;
  line-height: 1;
}

.sound-label {
  font-size: 11px;
  font-weight: 360;
  font-variation-settings: "wght" 360, "opsz" 14;
  line-height: 1;
}

.sound-wave {
  display: inline-grid;
  grid-template-columns: repeat(3, 1px);
  align-items: center;
  gap: 2px;
  width: 7px;
  height: 10px;
  color: currentColor;
}

.sound-wave span {
  display: block;
  width: 1px;
  height: 8px;
  background: currentColor;
  opacity: 0.65;
  transform: scaleY(0.45);
  transform-origin: center bottom;
  animation: sound-wave 940ms ease-in-out infinite;
}

.sound-wave span:nth-child(2) {
  animation-delay: 150ms;
}

.sound-wave span:nth-child(3) {
  animation-delay: 300ms;
}

.hint-open,
.logo-switch[open] .hint-closed,
.sound-switch.is-on .sound-label-off {
  display: none;
}

.sound-label-on {
  display: none;
}

.logo-switch[open] .hint-open {
  display: inline-block;
  color: rgba(var(--ink-rgb), 0.45);
  animation: logo-hint-settle 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.sound-switch.is-on .sound-label-on {
  display: inline;
}

.sound-switch.is-on {
  color: var(--signal);
}

.sound-switch.is-loading {
  color: var(--signal);
}

.logo {
  position: absolute;
  right: 50%;
  bottom: 24px;
  display: block;
  width: 54px;
  height: auto;
  transform: translateX(50%);
  transform-origin: center center;
  will-change: opacity, filter, transform;
}

.logo-switch[open] .logo {
  animation: logo-fade-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cases-switch[open] .cases {
  --reveal-blur: 1.65px;
  --reveal-scale: 0.965;
  --reveal-y: 1px;
  --settle-y: -0.45px;
  transform-origin: center center;
  animation: text-reveal-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.experience-switch[open] .experience h2,
.experience-switch[open] .proof-label,
.experience-switch[open] .experience li {
  --reveal-blur: 2.15px;
  --reveal-scale: 0.952;
  --reveal-y: 3px;
  --settle-y: 0.8px;
  transform-origin: left center;
  animation: text-reveal-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--enter-delay, 0ms);
}

.proof-title {
  --exit-delay: 840ms;
}

.proof-label-bhf {
  --enter-delay: 60ms;
  --exit-delay: 800ms;
}

.proof-list-bhf li:nth-child(1) {
  --enter-delay: 102ms;
  --exit-delay: 760ms;
}

.proof-list-bhf li:nth-child(2) {
  --enter-delay: 151ms;
  --exit-delay: 720ms;
}

.proof-list-bhf li:nth-child(3) {
  --enter-delay: 184ms;
  --exit-delay: 680ms;
}

.proof-list-bhf li:nth-child(4) {
  --enter-delay: 236ms;
  --exit-delay: 640ms;
}

.proof-list-bhf li:nth-child(5) {
  --enter-delay: 265ms;
  --exit-delay: 600ms;
}

.proof-list-bhf li:nth-child(6) {
  --enter-delay: 318ms;
  --exit-delay: 560ms;
}

.proof-list-bhf li:nth-child(7) {
  --enter-delay: 347ms;
  --exit-delay: 520ms;
}

.proof-list-bhf li:nth-child(8) {
  --enter-delay: 397ms;
  --exit-delay: 480ms;
}

.proof-list-bhf li:nth-child(9) {
  --enter-delay: 428ms;
  --exit-delay: 440ms;
}

.proof-list-bhf li:nth-child(10) {
  --enter-delay: 475ms;
  --exit-delay: 400ms;
}

.proof-list-bhf li:nth-child(11) {
  --enter-delay: 507ms;
  --exit-delay: 360ms;
}

.proof-list-bhf li:nth-child(12) {
  --enter-delay: 552ms;
  --exit-delay: 320ms;
}

.proof-list-bhf li:nth-child(13) {
  --enter-delay: 587ms;
  --exit-delay: 280ms;
}

.proof-label-prior {
  --enter-delay: 647ms;
  --exit-delay: 240ms;
}

.proof-list-prior li:nth-child(1) {
  --enter-delay: 688ms;
  --exit-delay: 200ms;
}

.proof-list-prior li:nth-child(2) {
  --enter-delay: 734ms;
  --exit-delay: 160ms;
}

.proof-list-prior li:nth-child(3) {
  --enter-delay: 771ms;
  --exit-delay: 120ms;
}

.proof-list-prior li:nth-child(4) {
  --enter-delay: 827ms;
  --exit-delay: 80ms;
}

.proof-list-prior li:nth-child(5) {
  --enter-delay: 858ms;
  --exit-delay: 40ms;
}

.proof-list-prior li:nth-child(6) {
  --enter-delay: 904ms;
  --exit-delay: 0ms;
}

.proof-list-prior li:nth-child(7) {
  --enter-delay: 937ms;
  --exit-delay: 0ms;
}

.contact-switch[open] .contact-row {
  --reveal-blur: 1.25px;
  --reveal-scale: 0.975;
  --reveal-y: 1px;
  --settle-y: -0.35px;
  transform-origin: left center;
  animation: text-reveal-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.contact-switch[open] .contact-row:nth-child(2) {
  animation-delay: 95ms;
}

.talk-switch[open] .talk {
  --reveal-blur: 1.8px;
  --reveal-scale: 0.962;
  --reveal-y: -1px;
  --settle-y: 0.55px;
  transform-origin: center center;
  animation: text-reveal-in 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.logo-switch.is-closing .logo {
  animation: logo-fade-out 520ms cubic-bezier(0.7, 0, 0.84, 0) both;
}

.cases-switch.is-closing .cases {
  transform-origin: center center;
  animation: text-reveal-out 380ms cubic-bezier(0.7, 0, 0.84, 0) both;
}

.experience-switch.is-closing .experience h2,
.experience-switch.is-closing .proof-label,
.experience-switch.is-closing .experience li {
  transform-origin: left center;
  animation: text-reveal-out 340ms cubic-bezier(0.7, 0, 0.84, 0) both;
  animation-delay: var(--exit-delay, 0ms);
}

.contact-switch.is-closing .contact-row {
  --reveal-blur: 1.25px;
  --reveal-scale: 0.975;
  --reveal-y: 1px;
  transform-origin: left center;
  animation: text-reveal-out 360ms cubic-bezier(0.7, 0, 0.84, 0) both;
}

.contact-switch.is-closing .contact-row:nth-child(1) {
  animation-delay: 85ms;
}

.contact-switch.is-closing .contact-row:nth-child(2) {
  animation-delay: 0ms;
}

.talk-switch.is-closing .talk {
  --reveal-blur: 1.8px;
  --reveal-scale: 0.962;
  --reveal-y: -1px;
  transform-origin: center center;
  animation: text-reveal-out 380ms cubic-bezier(0.7, 0, 0.84, 0) both;
}

@keyframes logo-fade-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateX(50%) scale(0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(50%) scale(1);
  }
}

@keyframes logo-fade-out {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translateX(50%) scale(1);
  }

  to {
    opacity: 0;
    filter: blur(3px);
    transform: translateX(50%) scale(0);
  }
}

@keyframes logo-hint-settle {
  from {
    filter: blur(0.6px);
    opacity: 0.68;
    transform: translateY(-2px);
  }

  55% {
    filter: blur(0.12px);
    opacity: 1;
    transform: translateY(1px);
  }

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

@keyframes hero-focus-lock {
  from {
    color: var(--signal);
    opacity: 0.74;
    filter: blur(2.6px);
    transform: translateY(5px) scale(0.982);
  }

  38% {
    opacity: 0.9;
    filter: blur(1px);
    transform: translateY(1px) scale(0.996);
  }

  58% {
    opacity: 0.96;
    filter: blur(0.46px);
    transform: translateY(-1px) scale(1.006);
  }

  99.7% {
    color: var(--sound-idle);
    opacity: 0.96;
    filter: blur(0.46px);
    transform: translateY(-1px) scale(1.006);
  }

  to {
    color: var(--ink);
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes intro-plus-arrive {
  0% {
    opacity: 1;
    filter: blur(2.2px) brightness(1.15);
    text-shadow: 0 0 0 rgba(var(--signal-rgb), 0);
  }

  44% {
    opacity: 1;
    filter: blur(0.28px) brightness(1.2);
    text-shadow: 0 0 11px rgba(var(--signal-rgb), 0.48);
  }

  72% {
    opacity: 1;
    filter: blur(0);
    text-shadow: 0 0 5px rgba(var(--signal-rgb), 0.2);
  }

  to {
    opacity: 1;
    filter: blur(0);
    text-shadow: 0 0 0 rgba(var(--signal-rgb), 0);
  }
}

@keyframes headline-tooltip-arrive {
  from {
    opacity: 0;
    visibility: hidden;
    filter: blur(1.4px);
    transform: translateY(3px) scale(0.92);
  }

  1% {
    visibility: visible;
  }

  62% {
    opacity: 1;
    filter: blur(0.12px);
    transform: translateY(-1px) scale(1.04);
  }

  to {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes intro-control-arrive {
  from {
    opacity: 0;
    filter: blur(1.4px);
    transform: translateY(3px);
  }

  70% {
    opacity: 1;
    filter: blur(0.12px);
    transform: translateY(-1px);
  }

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

@keyframes intro-fade-arrive {
  from {
    opacity: 0;
    filter: blur(1.4px);
  }

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

@keyframes plus-pressure-mark {
  from {
    opacity: 0.34;
    transform: scale(0.88) rotate(0deg);
  }

  to {
    opacity: 0;
    transform: scale(1.72) rotate(18deg);
  }
}

@keyframes text-reveal-in {
  from {
    opacity: 0;
    filter: blur(var(--reveal-blur, 2px));
    transform: translate3d(var(--reveal-x, 0px), var(--reveal-y, 0px), 0) scale(var(--reveal-scale, 0.94));
  }

  82% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, var(--settle-y, 0.7px), 0) scale(1.004);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes text-reveal-out {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    filter: blur(var(--reveal-blur, 2px));
    transform: translate3d(var(--reveal-x, 0px), var(--reveal-y, 0px), 0) scale(var(--reveal-scale, 0.94));
  }
}

@keyframes centered-text-reveal-in {
  from {
    opacity: 0;
    filter: blur(var(--reveal-blur, 2px));
    transform: translateX(-50%) translateY(var(--reveal-y, 0px)) scale(var(--reveal-scale, 0.94));
  }

  82% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(var(--settle-y, 0.7px)) scale(1.004);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes centered-text-reveal-out {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
  }

  to {
    opacity: 0;
    filter: blur(var(--reveal-blur, 2px));
    transform: translateX(-50%) translateY(var(--reveal-y, 0px)) scale(var(--reveal-scale, 0.94));
  }
}

@keyframes sound-wave {
  0%,
  100% {
    opacity: 0.45;
    transform: scaleY(0.34);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes plus-atmosphere {
  0%,
  100% {
    filter: blur(0);
    opacity: 1;
    transform: translate3d(var(--parallax-x), var(--parallax-y), 0) scale(1);
  }

  22% {
    filter: blur(var(--focus-blur-1));
    opacity: 0.86;
    transform: translate3d(calc(var(--parallax-x) + var(--float-x-1)), calc(var(--parallax-y) + var(--float-y-1) + var(--sound-drift)), 0) scale(calc(1.035 + var(--sound-scale)));
  }

  48% {
    filter: blur(var(--focus-blur-2));
    opacity: 0.96;
    transform: translate3d(calc(var(--parallax-x) + var(--float-x-2)), calc(var(--parallax-y) + var(--float-y-2)), 0) scale(0.985);
  }

  74% {
    filter: blur(var(--focus-blur-3));
    opacity: 0.82;
    transform: translate3d(calc(var(--parallax-x) + var(--float-x-3)), calc(var(--parallax-y) + var(--float-y-3) - var(--sound-drift)), 0) scale(calc(1.045 + var(--sound-scale)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-switch summary,
  .experience-switch summary::after,
  .cases-switch summary,
  .cases-switch summary::after,
  .talk-switch summary,
  .talk-switch summary::after,
  .contact-switch summary,
  .contact-switch summary::after,
  h1,
  .plus,
  .headline-tooltip-trigger,
  .sound-switch,
  .logo-switch,
  .sound-wave span,
  .logo-switch[open] .hint-open,
  .logo-switch[open] .logo,
  .logo-switch.is-closing .logo,
  .cases-switch[open] .cases,
  .cases-switch.is-closing .cases,
  .experience-switch[open] .experience h2,
  .experience-switch[open] .proof-label,
  .experience-switch[open] .experience li,
  .experience-switch.is-closing .experience h2,
  .experience-switch.is-closing .proof-label,
  .experience-switch.is-closing .experience li,
  .contact-switch[open] .contact-row,
  .contact-switch.is-closing .contact-row,
  .talk-switch[open] .talk,
  .talk-switch.is-closing .talk {
    animation: none;
  }

  .plus,
  .headline-tooltip-trigger,
  .sound-switch,
  .logo-switch {
    opacity: 1;
    visibility: visible;
    filter: none;
    text-shadow: none;
    transform: none;
  }

  .logo-switch {
    transform: translateX(50%);
  }
}

.contact,
.experience,
.cases,
.talk {
  position: absolute;
  display: grid;
  width: max-content;
  margin: 0;
  font-size: 11px;
  font-style: normal;
  font-weight: 560;
  font-variation-settings: "wght" 560, "opsz" 14;
  letter-spacing: 0;
  line-height: 1.08;
  text-align: left;
}

.contact {
  right: 0;
  top: 34px;
  gap: 13px;
}

.experience {
  left: 42px;
  top: 2px;
  gap: 10px;
}

.cases {
  right: 42px;
  top: 2px;
  gap: 8px;
  max-width: 260px;
}

.talk {
  left: 42px;
  top: 2px;
  gap: 8px;
  max-width: none;
}

.talk p {
  white-space: nowrap;
}

.contact-row {
  display: grid;
  gap: 2px;
}

.label,
.experience h2,
.proof-label,
.cases h2,
.talk h2 {
  color: rgba(var(--ink-rgb), 0.62);
  transition: color 220ms ease;
}

.experience-switch[open] .experience h2,
.cases-switch[open] .cases h2,
.talk-switch[open] .talk h2,
.contact-switch[open] .label {
  color: var(--signal);
  transition-delay: 110ms;
}

.experience-switch[open] .proof-label {
  color: var(--sound-idle);
  transition-delay: 145ms;
}

.experience h2,
.proof-label,
.cases h2,
.cases p,
.talk h2,
.talk p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  font-variation-settings: inherit;
}

.cases a,
.talk a {
  font-weight: 760;
  font-variation-settings: "wght" 760, "opsz" 14;
}

.cases a,
.talk a {
  color: var(--sound-idle);
}

.proof-groups,
.proof-group,
.experience ul {
  display: grid;
  margin: 0;
  padding: 0;
}

.proof-groups {
  gap: 8px;
}

.proof-group {
  gap: 3px;
}

.proof-label {
  margin: 0;
}

.experience ul {
  gap: 2px;
  font-weight: inherit;
  font-variation-settings: inherit;
  list-style: none;
}

@media (min-width: 641px) and (max-width: 1100px) {
  h1 {
    left: clamp(56px, 13vw, 150px);
    top: 72vh;
  }

  .experience-switch {
    left: clamp(56px, 18vw, 190px);
    top: calc(25vh - 7px);
  }

  .cases-switch {
    right: clamp(56px, 12vw, 130px);
    top: 32vh;
  }

  .talk-switch {
    left: clamp(280px, 55vw, 580px);
    top: 53vh;
  }

  .contact-switch {
    right: clamp(56px, 10vw, 120px);
    top: 66vh;
  }
}

/* Mobile layout approved and tagged as mobile-layout-locked. */
@media (max-width: 640px) {
  h1 {
    left: 24px;
    top: calc(52vh + 45px);
    font-size: 13.75px;
  }

  summary {
    min-width: 24px;
    min-height: 24px;
  }

  .plus {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .experience-switch summary::after,
  .cases-switch summary::after,
  .talk-switch summary::after,
  .contact-switch summary::after {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }

  .experience-switch {
    left: 24px;
    top: calc(22vh - 90px);
  }

  .cases-switch {
    right: 48px;
    top: calc(30vh - 30px);
  }

  .talk-switch {
    left: 50%;
    right: auto;
    top: clamp(26px, calc(9.5vh - 50px), 38px);
    transform: translateX(-50%);
  }

  .contact-switch {
    right: 48px;
    top: auto;
    bottom: 222px;
    left: auto;
  }

  .contact {
    right: 0;
    top: 34px;
    left: auto;
  }

  .experience {
    left: 0;
    top: 34px;
  }

  .page.is-proof-compact .experience-switch {
    transform: translateY(-56px);
  }

  .page.is-proof-compact .experience {
    gap: 6px;
    line-height: 1;
  }

  .page.is-proof-compact .proof-groups {
    gap: 5px;
  }

  .page.is-proof-compact .proof-group {
    gap: 1px;
  }

  .page.is-proof-compact .experience ul {
    gap: 0;
  }

  .cases {
    right: 0;
    top: 34px;
    max-width: 280px;
  }

  .talk {
    left: 50%;
    right: auto;
    top: 34px;
    bottom: auto;
    max-width: calc(100vw - 48px);
    text-align: center;
    transform: translateX(-50%);
  }

  .talk-switch[open] .talk {
    animation-name: centered-text-reveal-in;
  }

  .talk-switch.is-closing .talk {
    animation-name: centered-text-reveal-out;
  }

  .logo-switch {
    bottom: 22px;
  }

  .sound-switch {
    bottom: calc(170px + env(safe-area-inset-bottom, 0px));
  }
}