:root {
  --bg: #021024;
  --panel: rgba(255, 255, 255, 0.055);
  --panel-strong: rgba(255, 255, 255, 0.09);
  --line: rgba(65, 62, 105, 0.25);
  --text: #ffffff;
  --muted: #adabc7;
  --soft: rgba(255, 255, 255, 0.68);
  --violet: #915bff;
  --cyan: #63c8ff;
  --green: #61f2a0;
  --pink: #ff69df;
  --max: 982px;
  --rail-left: calc(50% - 535px);
  --rail-right: calc(50% + 535px);
}

.contact-success-overlay {
  align-items: center;
  background: rgba(1, 8, 20, 0.72);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 28px;
  position: fixed;
  z-index: 1000;
}

.contact-success-overlay[hidden] {
  display: none;
}

.contact-success-dialog {
  align-items: center;
  background: #f0f4ff;
  border-radius: 28px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
  color: #06142a;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 512px;
  min-height: 494px;
  padding: 68px 56px 56px;
  position: relative;
  text-align: center;
  width: min(100%, 512px);
}

.contact-success-close {
  align-items: center;
  background: rgba(6, 20, 42, 0.06);
  border: 0;
  border-radius: 999px;
  color: rgba(6, 20, 42, 0.62);
  cursor: pointer;
  display: inline-flex;
  font-size: 28px;
  font-weight: 300;
  height: 38px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 10px;
  top: 10px;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
  width: 38px;
}

.contact-success-close:hover {
  background: rgba(6, 20, 42, 0.1);
  color: #06142a;
  transform: translateY(-1px);
}

.contact-success-close:focus-visible {
  outline: 3px solid rgba(54, 51, 252, 0.32);
  outline-offset: 3px;
}

.contact-success-icon {
  display: block;
  height: 156px;
  margin-bottom: 2px;
  object-fit: contain;
  width: 156px;
}

.contact-success-copy {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-success-copy h2 {
  color: #06142a;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0;
  max-width: 390px;
}

.contact-success-copy p {
  color: #06142a;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  margin: 0;
  max-width: 420px;
}

.contact-success-action {
  align-items: center;
  background: #fff;
  border-radius: 999px;
  color: #06142a;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  height: 41px;
  justify-content: center;
  margin-top: 14px;
  min-width: 165px;
  padding: 0 28px;
  text-decoration: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.contact-success-action:hover {
  background: #f8fbff;
  box-shadow: 0 12px 28px rgba(54, 51, 252, 0.16);
  transform: translateY(-1px);
}

.contact-success-action:focus-visible {
  outline: 3px solid rgba(54, 51, 252, 0.35);
  outline-offset: 4px;
}

@media (max-width: 640px) {
  .contact-success-overlay {
    padding: 18px;
  }

  .contact-success-dialog {
    border-radius: 24px;
    gap: 20px;
    min-height: 430px;
    padding: 50px 26px 42px;
  }

  .contact-success-icon {
    height: 128px;
    width: 128px;
  }

  .contact-success-copy h2 {
    font-size: 22px;
  }

  .contact-success-copy p {
    font-size: 13px;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, Barlow, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
  min-width: 320px;
  overflow-x: hidden;
}

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

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

.site-shell {
  position: relative;
}

.site-shell::before,
.site-shell::after {
  background: repeating-linear-gradient(
    to bottom,
    var(--line) 0 9px,
    transparent 9px 18px
  );
  content: "";
  inset-block: 0;
  pointer-events: none;
  position: absolute;
  width: 2px;
  z-index: 3;
}

.site-shell::before {
  left: var(--rail-left);
  transform: translateX(-50%);
}

.site-shell::after {
  left: var(--rail-right);
  transform: translateX(-50%);
}

.about-page .rail-marker {
  display: none;
}

.top-nav {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-radius: 500px;
  display: flex;
  gap: 24px;
  height: 50px;
  justify-content: center;
  left: 50%;
  padding: 0;
  position: absolute;
  top: 27px;
  transform: translateX(-50%);
  width: min(578px, calc(100% - 28px));
  z-index: 20;
}

.nav-link,
.nav-pill {
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 12px 14px 13px;
  text-align: center;
  transition: background 240ms ease, color 220ms ease;
  width: 89px;
}

.nav-link:hover {
  background: transparent;
  color: #fff;
  font-weight: 500;
}

.nav-link.is-active {
  background: transparent;
  color: #fff;
  font-weight: 600;
}

.nav-pill {
  background: #fff;
  color: #413e69;
  font-size: 13px;
  font-weight: 600;
  height: 37px;
  padding: 12px 14px;
  width: 107px;
}

.nav-pill:hover {
  background: linear-gradient(
    -17.4675597587deg,
    #011125 8%,
    #2e2dd4 53%,
    #3832d8 67%,
    #5441e3 75%,
    #8259f5 92%,
    #8d5ffa 100%
  );
  border-radius: 116.23px;
  box-shadow: none;
  color: #fff;
}

.section {
  margin-inline: auto;
  position: relative;
  width: min(var(--max), calc(100% - 40px));
}

.hero {
  isolation: isolate;
  min-height: 650px;
  width: 100%;
}

.hero-media {
  --hero-reveal-opacity: 0;
  --hero-reveal-x: 50%;
  --hero-reveal-y: 50%;
  height: 800px;
  inset: 0 0 auto 0;
  isolation: isolate;
  opacity: 1;
  overflow: hidden;
  position: absolute;
  z-index: 0;
}

.hero-media img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  width: 100%;
}

.hero-media picture {
  display: block;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.hero-media-base {
  z-index: 0;
}

.hero-media-reveal {
  -webkit-mask-image: radial-gradient(
    circle at var(--hero-reveal-x) var(--hero-reveal-y),
    #000 0,
    #000 58px,
    rgba(0, 0, 0, 0.62) 106px,
    rgba(0, 0, 0, 0.18) 152px,
    transparent 190px
  );
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(
    circle at var(--hero-reveal-x) var(--hero-reveal-y),
    #000 0,
    #000 58px,
    rgba(0, 0, 0, 0.62) 106px,
    rgba(0, 0, 0, 0.18) 152px,
    transparent 190px
  );
  mask-repeat: no-repeat;
  opacity: var(--hero-reveal-opacity);
  pointer-events: none;
  transition: opacity 260ms ease;
  z-index: 1;
}

@media (hover: none), (pointer: coarse) {
  .hero-media-reveal {
    display: none;
  }
}

.hero-shade {
  display: none;
}

.ambient {
  display: none;
}

.ambient-one {
  background: rgba(145, 91, 255, 0.45);
  height: 380px;
  left: 12%;
  top: 90px;
  width: 380px;
}

.ambient-two {
  background: rgba(255, 105, 223, 0.25);
  height: 280px;
  right: 16%;
  top: 150px;
  width: 280px;
}

.hero-content {
  filter: drop-shadow(9px 9px 28px rgba(2, 16, 36, 0.38))
    drop-shadow(36px 37px 52px rgba(2, 16, 36, 0.26))
    drop-shadow(80px 84px 70px rgba(2, 16, 36, 0.18))
    drop-shadow(143px 149px 83px rgba(2, 16, 36, 0.1))
    drop-shadow(223px 233px 90px rgba(2, 16, 36, 0.06));
  left: max(32px, calc(50% - 506px));
  position: absolute;
  top: 184px;
  width: min(615px, calc(100% - 64px));
  z-index: 2;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.48);
  font-size: 18px;
  letter-spacing: 0;
  margin: 0;
}

.hero-title-art {
  filter: none;
  margin: 0 0 22px;
  width: min(615px, 100%);
}

.hero-title-text {
  aspect-ratio: 615 / 315;
  font-size: clamp(48px, calc((100vw - 48px) * 95 / 615), 95px);
  line-height: calc(90 / 95);
  overflow: visible;
  position: relative;
}

.hero-text-mask {
  display: block;
  height: calc(var(--mask-h) / 315 * 100%);
  left: calc(var(--x) / 615 * 100%);
  overflow: hidden;
  position: absolute;
  top: calc(var(--y) / 315 * 100%);
  width: calc(var(--w) / 615 * 100%);
}

.hero-text-word {
  --base-gradient-x: calc(var(--x) / (615 - var(--w)) * -100%);
  --base-gradient-y: calc(var(--y) / (315 - var(--mask-h)) * -100%);
  animation:
    heroPremiumReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both,
    heroTextSweep 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--sweep-delay, 1.62s) both;
  background-clip: text;
  background-image:
    linear-gradient(105deg, transparent 0 42%, rgba(255, 255, 255, 0.42) 49%, transparent 57%),
    linear-gradient(to bottom right, #ffffff 0%, rgba(255, 255, 255, 0.92) 42%, rgba(255, 255, 255, 0.1) 135%);
  background-position: -135% 0, var(--base-gradient-x) var(--base-gradient-y);
  background-size: 220% 100%, calc(615 / var(--w) * 100%) calc(315 / var(--mask-h) * 100%);
  display: block;
  filter: blur(10px);
  opacity: 0;
  text-fill-color: transparent;
  transform: translate3d(0, 110%, 0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  will-change: transform, opacity, filter, background-position;
}

.hero-text-sans {
  background-image:
    linear-gradient(105deg, transparent 0 42%, rgba(255, 255, 255, 0.42) 49%, transparent 57%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.74) 49.03%, rgba(255, 255, 255, 0.5) 99.49%);
  background-position: -135% 0, 0 0;
  background-size: 220% 100%, 100% 100%;
  font-family: "Barlow Semi Condensed", Barlow, Inter, sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.95;
  paint-order: stroke fill;
  text-transform: uppercase;
  -webkit-text-stroke: 0.8px rgba(255, 255, 255, 0.72);
}

.hero-text-serif .hero-text-word {
  animation:
    heroSerifPremiumReveal 1.18s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both,
    heroTextSweep 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--sweep-delay, 1.72s) both;
  background-image:
    linear-gradient(105deg, transparent 0 42%, rgba(255, 255, 255, 0.34) 49%, transparent 57%),
    linear-gradient(0deg, #ffffff, #ffffff);
  font-family: "PP Editorial New", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  text-transform: capitalize;
  transform: translate3d(0, 76%, 0);
}

.hero-text-designing {
  --delay: 0s;
  --mask-h: 96;
  --sweep-delay: 1.58s;
  --w: 436;
  --x: 0;
  --y: 0;
}

.hero-text-clarity {
  --delay: 0.16s;
  --mask-h: 104;
  --sweep-delay: 1.68s;
  --w: 286;
  --x: 0;
  --y: 70;
  overflow: visible;
  z-index: 10;
}

.hero-text-clarity .hero-text-word {
  background: url("https://designs.bg/assets/images/hero-word-clarity.svg") center / 100% 100% no-repeat;
  background-clip: border-box;
  color: transparent;
  filter: blur(10px) drop-shadow(0 2px 0 rgba(28, 34, 87, 0.72));
  font-size: 0;
  height: 100%;
  line-height: 0;
  text-fill-color: transparent;
  width: 100%;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .hero-text-clarity {
    --mask-h: 107;
    --w: 295;
    --x: -5;
  }

  .hero-text-clarity .hero-text-word {
    background: url("https://designs.bg/assets/images/hero-word-clarity-stroked.svg") center / 100% 100% no-repeat;
  }
}

@media (min-width: 981px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  .hero-text-clarity {
    --mask-h: 107;
    --w: 295;
    --x: -5;
  }

  .hero-text-clarity .hero-text-word {
    background: url("https://designs.bg/assets/images/hero-word-clarity-tablet.svg") center / 100% 100% no-repeat;
  }
}

.hero-text-complex {
  --delay: 0.24s;
  --mask-h: 96;
  --sweep-delay: 1.64s;
  --w: 578;
  --x: 0;
  --y: 145;
}

.hero-text-digital {
  --delay: 0.36s;
  --mask-h: 92;
  --sweep-delay: 1.72s;
  --w: 322;
  --x: 0;
  --y: 230;
}

.hero-text-world {
  --delay: 0.5s;
  --mask-h: 75.53925;
  --sweep-delay: 1.82s;
  --w: 222.5565;
  --x: 311.4;
  --y: 236.46075;
}

.hero-text-world .hero-text-word {
  background: url("https://designs.bg/assets/images/hero-word-5.svg") center / 100% 100% no-repeat;
  background-clip: border-box;
  color: transparent;
  font-size: 0;
  height: 100%;
  line-height: 0;
  text-fill-color: transparent;
  width: 100%;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: transparent;
}

.hero-title-svg {
  aspect-ratio: 599 / 301;
  position: relative;
  width: min(599px, 100%);
}

.hero-svg-mask {
  display: block;
  height: calc(var(--clip-h, var(--h)) / 301 * 100%);
  left: calc(var(--x) / 599 * 100%);
  overflow: hidden;
  position: absolute;
  top: calc(var(--y) / 301 * 100%);
  width: calc(var(--w) / 599 * 100%);
}

.hero-svg-mask::after {
  content: "";
  display: none;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.hero-svg-window {
  animation: heroLineReveal 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both;
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
  will-change: transform, opacity;
}

.hero-svg-word {
  height: auto;
  left: calc(var(--x) / var(--w) * -100%);
  max-width: none;
  position: absolute;
  top: 0;
  transform: translateY(calc(var(--y) / 301 * -100%));
  width: calc(599 / var(--w) * 100%);
}

.hero-svg-serif .hero-svg-window {
  animation-duration: 1.05s;
  animation-name: heroSerifReveal;
}

.hero-svg-designing {
  --delay: 0s;
  --h: 69;
  --mask: url("https://designs.bg/assets/images/hero-word-1.svg");
  --sweep-delay: 1.5s;
  --w: 405;
  --x: 0;
  --y: 0;
}

.hero-svg-clarity {
  --delay: 0.2s;
  --h: 101;
  --mask: url("https://designs.bg/assets/images/hero-word-2.svg");
  --sweep-delay: 1.64s;
  --w: 278;
  --x: 0;
  --y: 56;
}

.hero-svg-complex {
  --clip-h: 74;
  --delay: 0.24s;
  --h: 69;
  --mask: url("https://designs.bg/assets/images/hero-word-3.svg");
  --sweep-delay: 1.58s;
  --w: 529;
  --x: 0;
  --y: 143;
}

.hero-svg-digital {
  --delay: 0.36s;
  --h: 69;
  --mask: url("https://designs.bg/assets/images/hero-word-4.svg");
  --sweep-delay: 1.66s;
  --w: 292;
  --x: 0;
  --y: 230;
}

.hero-svg-world {
  --delay: 0.52s;
  --h: 81;
  --mask: url("https://designs.bg/assets/images/hero-word-5.svg");
  --sweep-delay: 1.76s;
  --w: 238;
  --x: 303;
  --y: 219;
}

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

.rail-marker {
  background: repeating-linear-gradient(
    to right,
    var(--line) 0 9px,
    transparent 9px 18px
  ) 0 50% / 100% 2px no-repeat;
  height: 14px;
  margin: 0 auto 60px;
  position: relative;
  width: 100%;
  z-index: 4;
}

.rail-marker::before,
.rail-marker::after {
  background: linear-gradient(#201e38, #201e38) padding-box,
    linear-gradient(180deg, #464278 0%, #100f23 100%) border-box;
  border: 1px solid transparent;
  border-radius: 2px;
  content: "";
  height: 14px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 14px;
  z-index: 2;
}

.rail-marker::before {
  left: var(--rail-left);
}

.rail-marker::after {
  left: var(--rail-right);
}

.project-split {
  background: none;
  margin: 24px 0 32px;
  transform: none;
  width: 100%;
}

.project-split-line {
  background: repeating-linear-gradient(
    to right,
    var(--line) 0 9px,
    transparent 9px 18px
  ) 0 50% / 100% 2px no-repeat;
  height: 2px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  z-index: 1;
}

.narrow {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.intro {
  margin-bottom: 60px;
}

.profile-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 24px;
  display: flex;
  gap: 24px;
  height: 116px;
  overflow: hidden;
  padding: 24px 30px;
  position: relative;
  width: min(724px, 100%);
}

.avatar-wrap {
  align-items: center;
  border-radius: 50%;
  flex: 0 0 69px;
  display: inline-flex;
  height: 69px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 69px;
}

.avatar-wrap img {
  height: 69px;
  width: 69px;
}

.profile-map {
  height: 138px;
  left: 535px;
  object-fit: contain;
  opacity: 0.2;
  pointer-events: none;
  position: absolute;
  top: -6px;
  width: 198px;
}

.profile-spark {
  animation: mapPinCore 2.8s ease-in-out infinite;
  background: rgba(97, 80, 255, 0.34);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(87, 70, 255, 0.72);
  height: 5px;
  left: 687px;
  position: absolute;
  top: 46px;
  width: 5px;
  z-index: 2;
}

.profile-spark::before,
.profile-spark::after {
  border-radius: 50%;
  content: "";
  position: absolute;
}

.profile-spark::before {
  background: #7a6bff;
  box-shadow: 0 0 12px rgba(122, 107, 255, 0.95);
  height: 3.33px;
  left: 0.83px;
  top: 0.83px;
  width: 3.33px;
}

.profile-spark::after {
  animation: mapPinGlow 2.8s ease-out infinite;
  background: rgba(83, 65, 255, 0.24);
  box-shadow: 0 0 24px rgba(83, 65, 255, 0.78);
  height: 11.67px;
  left: -3.33px;
  top: -3.33px;
  width: 11.67px;
  z-index: -1;
}

@keyframes mapPinCore {
  0%,
  100% {
    transform: scale(1);
  }

  48% {
    transform: scale(1.12);
  }
}

@keyframes mapPinGlow {
  0% {
    opacity: 0.62;
    transform: scale(0.86);
  }

  55% {
    opacity: 1;
    transform: scale(1.18);
  }

  100% {
    opacity: 0.5;
    transform: scale(1.42);
  }
}

.profile-copy {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.profile-name {
  align-items: center;
  display: flex;
  gap: 16px;
}

.profile-name strong {
  font-family: "Barlow Semi Condensed", Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.4px;
  line-height: 0.9;
}

.flag {
  height: 22px;
  width: 22px;
}

.profile-meta {
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 21px;
  font-family: Barlow, Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.28px;
  line-height: 0.9;
}

.profile-meta-item {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}

.profile-meta-item img {
  flex: 0 0 18px;
  height: 18px;
  width: 18px;
}

.profile-meta-item:last-child img {
  flex-basis: 17px;
  height: 17px;
  width: 17px;
}

.profile-meta a {
  color: rgba(255, 255, 255, 0.62);
  transition: color 160ms ease;
}

.profile-link:hover,
.profile-link:focus-visible {
  color: #d052ff;
}

.profile-link-icon {
  color: #fff;
  flex: 0 0 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.28571;
  transition: color 160ms ease;
  width: 17px;
}

.profile-link:hover .profile-link-icon,
.profile-link:focus-visible .profile-link-icon {
  color: #d052ff;
}

.intro-copy {
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 300;
  gap: 22px;
  letter-spacing: 0.4px;
  line-height: normal;
  margin-top: 43px;
  text-align: center;
  width: min(704px, calc(100% - 28px));
}

.intro-copy p {
  color: rgba(255, 255, 255, 0.69);
  margin: 0;
}

.intro-copy span {
  color: rgba(255, 255, 255, 0.69);
}

.intro-copy em {
  color: #fff;
  display: inline-block;
  font-family: "PP Editorial New", "Times New Roman", serif;
  font-style: italic;
  min-width: 3.25em;
  text-align: center;
}

.section-heading {
  margin: 0 auto 32px;
  text-align: center;
}

.section-heading h2 {
  font-size: clamp(28px, 4vw, 32px);
  font-weight: 600;
  line-height: 1;
  margin: 0 0 12px;
}

.section-heading p {
  color: #adabc7;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
}

.projects {
  margin-bottom: 64px;
}

.project-stack {
  display: grid;
  gap: 40px;
}

.project-card {
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 902px;
  overflow: hidden;
  padding: 24px 32px 32px;
  position: relative;
  width: 100%;
}

.project-kicker {
  align-items: center;
  display: flex;
  gap: 24px;
  margin-bottom: 0;
  position: relative;
  width: 100%;
}

.project-logo {
  align-items: center;
  background: #6947ff;
  border-radius: 50%;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  height: 60px;
  justify-content: center;
  width: 60px;
}

.project-logo-img {
  background: transparent;
}

.project-logo-img img {
  height: 60px;
  width: 60px;
}

.project-logo.blue {
  background: #286ddf;
}

.project-logo.violet {
  background: #8d4eff;
}

.visual-card {
  gap: 32px;
  height: 523px;
}

.project-kicker h3 {
  color: #fff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 20px;
  margin: 0 0 8px;
}

.project-kicker p {
  color: rgba(255, 255, 255, 0.69);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 15px;
  margin: 0;
}

.project-kicker > div {
  min-width: 0;
  width: min(769px, calc(100% - 84px));
}

.project-arrow {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #413e69;
  display: inline-flex;
  height: 56px;
  justify-content: center;
  margin-left: auto;
  overflow: hidden;
  position: relative;
  transition: color 220ms ease;
  width: 56px;
}

.project-arrow::before,
.project-arrow::after {
  background: linear-gradient(#201e38, #201e38) padding-box,
    linear-gradient(180deg, #464278 0%, #100f23 100%) border-box;
  border: 1px solid transparent;
  border-radius: 50%;
  content: "";
  height: 46.67px;
  inset: 50% auto auto 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 46.67px;
}

.project-arrow::before {
  z-index: 0;
}

.project-arrow::after {
  background: linear-gradient(#201e38, #201e38) padding-box,
    linear-gradient(180deg, #847bff 0%, #312e56 40%, #100f23 100%) border-box;
  box-shadow: 0 10px 24px rgba(20, 15, 50, 0.26);
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 1;
}

.project-arrow svg {
  fill: none;
  height: 27px;
  position: relative;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transform: rotate(0deg);
  transition: color 220ms ease;
  width: 27px;
  z-index: 2;
}

.project-card:hover .project-arrow,
.project-arrow:hover,
.project-arrow:focus-visible {
  color: #847bff;
}

.project-card:hover .project-arrow::after,
.project-arrow:hover::after,
.project-arrow:focus-visible::after {
  opacity: 1;
}

.project-shot {
  border-radius: 24px;
  display: grid;
  flex: 1 1 auto;
  height: 754px;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  place-items: center;
  position: relative;
}

.project-shot::before {
  content: "";
  inset: 0;
  opacity: 0.9;
  position: absolute;
  transition: opacity 280ms ease;
}

.project-shot.purple {
  background: linear-gradient(165.5191989627371deg, rgba(122, 85, 242, 0) 28.514%, #7a55f2 143.23%);
}

.project-shot.purple::before {
  display: none;
}

.project-shot.green::before {
  display: none;
}

.project-shot.green {
  background: linear-gradient(163.42724283518913deg, rgba(142, 216, 140, 0) 34.687%, #8ed88c 129.25%);
}

.visual-shot {
  background: linear-gradient(170.76627321683156deg, rgba(122, 85, 242, 0) 41.922%, #7a55f2 155.44%);
  height: 375px;
  overflow: visible;
}

.visual-shot::before {
  display: none;
}

.project-shot img {
  border-radius: 16px;
  box-shadow:
    0 380.491px 106.68px rgba(0, 0, 0, 0.01),
    0 243.585px 97.79px rgba(0, 0, 0, 0.05),
    0 136.906px 81.788px rgba(0, 0, 0, 0.17),
    0 60.452px 60.452px rgba(0, 0, 0, 0.28),
    0 16.002px 33.782px rgba(0, 0, 0, 0.32);
  height: 680.939px;
  max-height: none;
  object-fit: cover;
  position: relative;
  transform: none;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  width: 732.439px;
}

.project-shot:hover img {
  transform: scale(1.018);
}

.bonus-motion-shot {
  isolation: isolate;
}

.bonus-motion-screen {
  border-radius: 16px;
  box-shadow:
    0 380.491px 106.68px rgba(0, 0, 0, 0.01),
    0 243.585px 97.79px rgba(0, 0, 0, 0.05),
    0 136.906px 81.788px rgba(0, 0, 0, 0.17),
    0 60.452px 60.452px rgba(0, 0, 0, 0.28),
    0 16.002px 33.782px rgba(0, 0, 0, 0.32);
  height: 680.939px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  width: 732.439px;
  z-index: 1;
}

.project-shot:hover .bonus-motion-screen {
  transform: scale(1.018);
}

.project-shot:hover .bonus-base-screen {
  transform: none;
}

.bonus-motion-screen .bonus-base-screen {
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  inset: 0;
  max-height: none;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  transform: none;
  transition: none;
  width: 100%;
  z-index: 1;
}

.bonus-motion-screen .bonus-parallax-object {
  animation: bonusObjectFloat 6.4s ease-in-out infinite;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  height: auto;
  max-height: none;
  max-width: none;
  position: absolute;
  right: 82px;
  top: 44px;
  transform: translate3d(0, 0, 0) rotate(-1deg);
  transition: none;
  width: 194px;
  z-index: 3;
}

.casino-motion-shot {
  isolation: isolate;
}

.hot-cold-motion {
  border-radius: 16px;
  box-shadow:
    0 380.491px 106.68px rgba(0, 0, 0, 0.01),
    0 243.585px 97.79px rgba(0, 0, 0, 0.05),
    0 136.906px 81.788px rgba(0, 0, 0, 0.17),
    0 60.452px 60.452px rgba(0, 0, 0, 0.28),
    0 16.002px 33.782px rgba(0, 0, 0, 0.32);
  height: 680.939px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  width: 732.439px;
  z-index: 1;
}

.project-shot:hover .hot-cold-motion {
  transform: scale(1.018);
}

.project-shot:hover .hot-cold-motion img {
  transform: none;
}

.hot-cold-motion img {
  border-radius: 0;
  box-shadow: none;
  height: 100%;
  inset: 0;
  max-height: none;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  transform: none;
  transition: none;
  width: 100%;
}

.hot-cold-motion .hot-screen {
  animation: hotScreenCalm 9s cubic-bezier(.45, 0, .2, 1) infinite;
  z-index: 1;
}

.hot-cold-motion .cold-screen {
  animation: coldScreenFade 9s cubic-bezier(.45, 0, .2, 1) infinite;
  opacity: 0;
  z-index: 2;
}

.motion-card-focus {
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.motion-card-focus {
  animation: motionCardFocusCalm 9s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 14px 44px rgba(0, 0, 0, 0.22);
  height: 32.6%;
  left: 39.2%;
  opacity: 0;
  top: 26.2%;
  width: 21.6%;
}

.visual-shot > img {
  border-radius: 0;
  box-shadow: none;
  height: 472px;
  left: 88.5px;
  max-width: none;
  object-fit: cover;
  position: absolute;
  top: -65px;
  transform-origin: center;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  width: 741px;
}

.visual-shot:hover > img {
  transform: scale(1.018);
}

.project-footer {
  color: rgba(255, 255, 255, 0.56);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.project-footer span {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 13px;
  padding: 8px 12px;
}

.journey {
  margin-top: 8px;
}

.journey .section-heading {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 119px;
  justify-content: center;
  margin: 0 0 40px;
  overflow: hidden;
  padding: 10px;
  white-space: nowrap;
  width: 100%;
}

.journey .section-heading h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.journey .section-heading p {
  color: #adabc7;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.timeline-row {
  align-items: center;
  display: grid;
  grid-template-columns: 270px 1fr;
  min-height: 60px;
  position: relative;
  width: 100%;
}

.timeline-row:not(:last-child)::after {
  background: repeating-linear-gradient(
    to right,
    var(--line) 0 9px,
    transparent 9px 18px
  ) 0 50% / 100% 2px no-repeat;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  top: calc(100% + 40px);
  width: 100%;
}

.timeline-row strong {
  color: #fff;
  font-family: "Barlow Semi Condensed", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 270px;
  white-space: nowrap;
}

.timeline-detail {
  align-items: center;
  display: flex;
  gap: 40px;
  justify-self: end;
}

.company-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  display: inline-flex;
  gap: 8px;
  height: 60px;
  justify-content: center;
  overflow: hidden;
  width: 200px;
}

.iaffiliate-mark {
  height: 27.11px;
  width: 25.82px;
}

.iaffiliate-word {
  height: 18.92px;
  width: 96.55px;
}

.itlab-logo {
  height: 30px;
  width: auto;
}

.company-different {
  flex-direction: column;
}

.different-logo-wrap {
  align-items: flex-end;
  display: flex;
  gap: 6.54px;
  justify-content: center;
  width: 100%;
}

.different-mark {
  height: 20.7px;
  width: 22.05px;
}

.different-word {
  height: 15.12px;
  width: 121.41px;
}

.timeline-meta {
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 22px;
  font-weight: 300;
  gap: 2px;
  justify-content: center;
  line-height: 32px;
  width: 170px;
}

.timeline-meta span {
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  line-height: 32px;
  width: 170px;
}

.timeline-meta time {
  color: rgba(255, 255, 255, 0.62);
  font-family: Barlow, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  width: 111px;
}

.journey-close {
  left: 50%;
  margin: 68px 0 0;
  transform: translateX(-50%);
  width: 100vw;
}

.tools {
  display: flex;
  flex-direction: column;
  gap: 40px;
  height: 319px;
  margin-bottom: 60px;
  margin-top: 60px;
}

.tools .section-heading {
  margin: 0;
  width: 100%;
}

.tools .section-heading h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

.tools .section-heading p {
  color: #adabc7;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
}

.tools-stage {
  align-items: flex-start;
  display: flex;
  height: 211px;
  justify-content: center;
  margin: 0 auto;
  max-width: 668px;
  position: relative;
  width: 668px;
}

.tools-laptop {
  filter: none;
  height: auto;
  margin-top: 0;
  width: 668px;
}

.tool-dock {
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 16px;
  display: flex;
  gap: 21.33px;
  height: 64px;
  justify-content: center;
  left: 50%;
  padding: 16px 54px;
  position: absolute;
  top: 18px;
  transform: translateX(-50%);
  width: 460px;
  z-index: 2;
}

.tool-dock span {
  display: block;
  height: 32px;
  transition: transform 220ms ease, filter 220ms ease;
  width: 32px;
}

.tool-dock img {
  height: 32px;
  width: 32px;
}

.tool-dock span:hover {
  filter: drop-shadow(0 8px 16px rgba(132, 123, 255, 0.28));
  transform: translateY(-4px);
}

.contact {
  display: grid;
  margin-top: 88px;
  place-items: center;
  padding-bottom: 80px;
}

.contact .section-heading {
  margin-bottom: 80px;
}

.contact-close {
  margin-bottom: 48px;
}

.glow-button {
  align-items: center;
  background: transparent;
  border-radius: 500px;
  box-shadow: none;
  color: #fff;
  display: inline-flex;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 600;
  height: 68px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 22px;
  min-width: 0;
  isolation: isolate;
  overflow: visible;
  padding: 0;
  position: relative;
  transition: filter 280ms ease, transform 280ms ease;
  width: 176px;
  white-space: nowrap;
}

.glow-button::before {
  background:
    radial-gradient(40.34% 305.08% at 90.34% 67.19%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(66.48% 68.75% at 50% 31.25%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(33% 82.75% at 31.25% 76.56%, rgba(255, 255, 255, 0.219) 0%, rgba(255, 255, 255, 0.036) 100%),
    radial-gradient(66.95% 96.09% at 35.23% 0%, #c243fe 0%, rgba(182, 47, 246, 0.12) 100%),
    radial-gradient(84.9% 146.88% at 43.75% -31.25%, rgba(170, 34, 156, 0.92) 24.16%, rgba(117, 71, 176, 0.89) 84.89%),
    #5b099b;
  border-radius: inherit;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.8) inset;
  content: "";
  bottom: 0;
  height: auto;
  left: 0;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 4px;
  transform: none;
  width: 176px;
  z-index: 0;
}

.glow-button::after {
  background:
    radial-gradient(40.34% 305.08% at 90.34% 67.19%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(66.48% 68.75% at 50% 31.25%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(33% 82.75% at 31.25% 76.56%, rgba(255, 255, 255, 0.219) 0%, rgba(255, 255, 255, 0.036) 100%),
    radial-gradient(66.95% 96.09% at 35.23% 0%, #c243fe 0%, rgba(182, 47, 246, 0.12) 100%),
    radial-gradient(84.9% 146.88% at 43.75% -31.25%, rgba(170, 34, 156, 0.92) 24.16%, rgba(162, 95, 248, 0.89) 84.89%),
    #5b099b;
  border-radius: inherit;
  box-shadow:
    -20px -20px 50px rgba(102, 67, 242, 0.5),
    10px 20px 80px rgba(218, 37, 156, 0.3),
    0 10px 60px rgba(125, 20, 208, 0.8),
    0 0 10px rgba(255, 255, 255, 0.4) inset;
  content: "";
  bottom: 4px;
  left: 0;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.glow-button span {
  position: relative;
  z-index: 3;
  white-space: nowrap;
}

.glow-button:hover {
  filter: none;
  transform: none;
}

.glow-button:hover::before {
  background:
    radial-gradient(42.85% 184.29% at 15.34% 39.06%, rgba(131, 113, 243, 0.5) 0%, rgba(69, 156, 236, 0) 100%),
    radial-gradient(130.16% 129.69% at 63.64% -12.5%, #8528fb 0%, rgba(86, 84, 74, 0.12) 100%),
    radial-gradient(80.68% 51.24% at 19.32% 40.62%, #1864b7 0%, rgba(23, 61, 102, 0.56) 100%),
    radial-gradient(28.98% 110.94% at 43.75% -31.25%, rgba(24, 17, 24, 0.53) 21.25%, #000 100%),
    #030303;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.8) inset;
  bottom: 0;
  top: 4px;
  transform: none;
}

.glow-button:hover::after {
  background:
    radial-gradient(42.85% 184.29% at 15.34% 39.06%, rgba(131, 113, 243, 0.5) 0%, rgba(69, 156, 236, 0) 100%),
    radial-gradient(130.16% 129.69% at 63.64% -12.5%, #8528fb 0%, rgba(86, 84, 74, 0.12) 100%),
    radial-gradient(80.68% 51.24% at 19.32% 40.62%, #1864b7 0%, rgba(23, 61, 102, 0.88) 100%),
    radial-gradient(28.98% 110.94% at 43.75% -31.25%, rgba(24, 17, 24, 0.53) 21.25%, #000 100%),
    #030303;
  box-shadow:
    0 20px 30px rgba(64, 100, 228, 0.3),
    -20px -20px 50px rgba(42, 94, 142, 0.5),
    10px 20px 80px rgba(122, 33, 237, 0.3),
    0 0 30px rgba(255, 255, 255, 0.3) inset;
  bottom: 4px;
  top: 0;
}

.footer {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 20px 72px;
}

.footer-monogram {
  height: 100px;
  margin-bottom: 34.78px;
  width: 100px;
}

.made-with {
  align-items: center;
  backdrop-filter: blur(20px);
  background:
    linear-gradient(160.33deg, rgba(130, 89, 245, 0.1) 13.17%, rgba(84, 65, 227, 0.1) 97.91%) padding-box,
    linear-gradient(160.33deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.42) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 9px;
  box-sizing: border-box;
  box-shadow:
    0 4px 20px rgba(47, 24, 108, 0.1),
    0 4px 20px -1px rgba(0, 0, 0, 0.25);
  color: rgba(245, 245, 245, 0.8);
  display: flex;
  font-size: 12px;
  font-weight: 500;
  gap: 4px;
  height: 38px;
  justify-content: center;
  line-height: 1.27;
  overflow: hidden;
  padding: 0 12px;
  white-space: nowrap;
  width: 267px;
}

.made-with span,
.made-with img {
  flex: 0 0 auto;
}

.made-with img {
  height: 16px;
  object-fit: contain;
  width: 16px;
}

.made-with .made-codex {
  border-radius: 4px;
  height: 18px;
  margin-left: 1px;
  width: auto;
}

.made-separator {
  color: rgba(255, 255, 255, 0.28);
  margin: 0 2px;
}

.footer p {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.27;
  margin: 18px 0 0;
}

.about-main {
  padding-top: 0;
  position: relative;
}

.about-main::before {
  background: url("https://designs.bg/assets/images/background-about.jpg") center top / 100% auto no-repeat;
  content: "";
  height: 760px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 0;
}

.about-main > * {
  position: relative;
  z-index: 4;
}

.about-hero {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  min-height: 0;
  padding: 151px 0 60px;
  position: relative;
}

.about-rail-section {
  position: relative;
}

.about-rail-section::before,
.about-rail-section::after {
  background:
    linear-gradient(#201e38, #201e38) calc(var(--rail-left) + 1px) 50% / 12px 12px no-repeat,
    linear-gradient(#201e38, #201e38) calc(var(--rail-right) + 1px) 50% / 12px 12px no-repeat,
    linear-gradient(180deg, #464278 0%, #100f23 100%) var(--rail-left) 50% / 14px 14px no-repeat,
    linear-gradient(180deg, #464278 0%, #100f23 100%) var(--rail-right) 50% / 14px 14px no-repeat,
    repeating-linear-gradient(
      to right,
      var(--line) 0 9px,
      transparent 9px 18px
    ) 0 50% / 100% 2px no-repeat;
  content: "";
  height: 14px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 6;
}

.about-rail-section::before {
  display: none;
}

.about-rail-section::after {
  bottom: -7px;
}

.about-hero-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 34px;
  justify-content: center;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 2;
}

.about-hero-monogram {
  height: 100px;
  position: relative;
  width: 100px;
}

.about-hero-monogram::before {
  background: url("https://designs.bg/assets/images/profile-footer.svg") center / 100% 100% no-repeat;
  border-radius: 50%;
  content: "";
  filter: blur(50px) saturate(1.25) brightness(1.08);
  height: 130px;
  left: 50%;
  opacity: 0.9;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  z-index: 0;
}

.about-hero-monogram img {
  height: 100px;
  position: relative;
  width: 100px;
  z-index: 1;
}

.about-hero-copy {
  max-width: 820px;
}

.about-hero h1 {
  color: #fff;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.18;
  margin: 0;
}

.about-hero-copy p {
  color: #adabc7;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.32;
  margin: 8px 0 0;
}

.contact-main {
  padding-top: 0;
  position: relative;
}

.contact-main::before {
  background: url("https://designs.bg/assets/images/background-about.jpg") center top / 100% auto no-repeat;
  content: "";
  height: 760px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  z-index: 0;
}

.contact-main > * {
  position: relative;
  z-index: 4;
}

.contact-hero {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  padding: 151px 0 60px;
}

.contact-hero-inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.contact-hero-copy {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-hero h1 {
  color: #fff;
  font-size: 42px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.contact-hero-copy p {
  color: #adabc7;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  margin: 0;
}

.contact-card-section {
  padding: 60px 0 80px;
}

.contact-card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 32px;
  height: 218px;
  padding: 24px 40px 32px 32px;
  position: relative;
}

.contact-card-copy {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 247px;
}

.contact-card p {
  color: rgba(132, 123, 255, 0.69);
  font-family: Barlow, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 10px;
  margin: 0;
  text-transform: uppercase;
}

.contact-card h2 {
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 39px;
  margin: 0;
}

.contact-card a,
.contact-card span:not(.contact-card-icon) {
  color: #847bff;
  font-size: 20px;
  font-weight: 300;
  line-height: 15px;
}

.contact-inline-link {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.contact-inline-link svg {
  fill: none;
  height: 12px;
  stroke: rgba(255, 255, 255, 0.69);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.28571;
  width: 12px;
}

.contact-card-icon {
  display: block;
  height: 56px;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 56px;
}

.contact-card-icon img {
  height: 56px;
  width: 56px;
}

.contact-form-section {
  padding: 60px 0;
}

.contact-page .footer {
  padding-top: 60px;
}

.contact-form-panel {
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 632px;
  padding: 48px 32px 52px;
}

.contact-form-heading {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.contact-form-heading h2 {
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.contact-form-heading p {
  color: rgba(173, 171, 199, 0.69);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.contact-form > input[type="hidden"],
.contact-honey {
  display: none;
}

.contact-form-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-form label {
  align-items: flex-start;
  background:
    linear-gradient(#011125, #011125) padding-box,
    linear-gradient(180deg, #464278 0%, #100f23 100%) border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  height: 66px;
  justify-content: center;
  padding: 24px;
}

.contact-form input,
.contact-form textarea {
  background: transparent;
  border: 0;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 18px;
  min-width: 0;
  outline: 0;
  padding: 0;
  width: 100%;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}

.contact-message {
  height: 162px;
  justify-content: flex-start;
  max-height: 162px;
  min-height: 162px;
}

.contact-form textarea {
  display: block;
  flex: 1;
  min-height: 0;
  resize: none;
}

.contact-form-status {
  align-self: center;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  line-height: 1.4;
  margin: 2px 0 -10px;
  min-height: 20px;
  text-align: center;
}

.contact-form-status.is-success {
  color: #6df2cb;
}

.contact-form-status.is-error {
  color: #ff9aa8;
}

.contact-submit {
  align-items: center;
  align-self: center;
  background: linear-gradient(315.62deg, #3736fc 23.71%, #3231e7 37.19%, #2e2dd4 52.69%, #3832d8 58.75%, #5441e3 68.86%, #8259f5 83.01%, #8d5ffa 85.71%);
  border: 0;
  border-radius: 89.1589px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  font-weight: 600;
  height: 64px;
  justify-content: center;
  line-height: 1;
  width: 220px;
}

.contact-submit:disabled {
  cursor: progress;
  filter: saturate(0.7) brightness(0.85);
}

.about-profile-card {
  align-items: center;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  display: grid;
  gap: 22px;
  grid-template-columns: 92px 1fr;
  min-height: 180px;
  overflow: hidden;
  padding: 28px;
  position: relative;
}

.about-avatar {
  align-items: center;
  background: linear-gradient(145deg, #8259f5, #2e2dd4);
  border-radius: 50%;
  display: flex;
  height: 92px;
  justify-content: center;
  position: relative;
  width: 92px;
  z-index: 2;
}

.about-avatar img {
  height: 72px;
  width: 72px;
}

.about-profile-card strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.about-profile-card span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.35;
  position: relative;
  z-index: 2;
}

.about-card-map {
  bottom: -10px;
  opacity: 0.52;
  position: absolute;
  right: -80px;
  width: 300px;
}

.about-card-dot {
  animation: mapPinCore 2.8s ease-in-out infinite;
  background: #847bff;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(132, 123, 255, 0.95);
  height: 7px;
  position: absolute;
  right: 68px;
  top: 80px;
  width: 7px;
  z-index: 2;
}

.about-card-dot::after {
  animation: mapPinGlow 2.8s ease-out infinite;
  background: rgba(83, 65, 255, 0.24);
  border-radius: inherit;
  box-shadow: 0 0 28px rgba(83, 65, 255, 0.78);
  content: "";
  height: 22px;
  left: -7.5px;
  position: absolute;
  top: -7.5px;
  width: 22px;
  z-index: -1;
}

.about-story {
  padding: 60px 0;
}

.about-values,
.about-cta {
  padding: 88px 0;
}

.about-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 23px;
  justify-content: center;
  max-width: 982px;
  width: 100%;
}

.about-info-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 32px;
  box-sizing: border-box;
  flex: 0 0 312px;
  height: 213px;
  min-width: 0;
  overflow: hidden;
  padding: 24px 32px 32px;
  position: relative;
  transition: background 220ms ease;
}

.about-info-card::before {
  background: linear-gradient(180deg, #464278 0%, #100f23 100%) border-box;
  border: 1px solid transparent;
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 220ms ease;
  z-index: 2;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.about-info-card:hover::before {
  opacity: 1;
}

.about-info-card-wide {
  flex-basis: 479.5px;
  height: 156px;
}

.about-info-card p {
  color: rgba(132, 123, 255, 0.69);
  font-family: Barlow, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 10px;
  margin: 0 0 16px;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.about-info-card h2 {
  color: #fff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  margin: 0;
  max-width: 248px;
}

.about-info-title-first {
  line-height: 32.75px;
}

.about-info-card-wide h2 {
  max-width: 415px;
}

.office-title-mobile {
  display: none;
}

.about-card-icon {
  height: 56px;
  position: absolute;
  right: 17px;
  top: 16px;
  width: 56px;
}

.about-card-icon img {
  inset: 0;
  opacity: 1;
  position: absolute;
  transition: opacity 220ms ease;
  width: 56px;
}

.about-card-icon .about-card-icon-hover {
  opacity: 0;
}

.about-info-card:hover .about-card-icon img:first-child {
  opacity: 0;
}

.about-info-card:hover .about-card-icon .about-card-icon-hover {
  opacity: 1;
}

.about-beyond {
  padding: 60px 0;
}

.about-beyond-inner {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
}

.about-beyond-heading {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  width: 100%;
}

.about-beyond-heading h2 {
  color: #fff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
}

.about-beyond-heading p {
  color: #adabc7;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  margin: 0;
}

.about-bento {
  align-items: flex-end;
  display: flex;
  gap: 7.42px;
  height: 479.89px;
  justify-content: center;
  width: 100%;
}

.about-bento-feature,
.about-bento-stack {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 32px;
  overflow: hidden;
  position: relative;
}

.about-bento-feature {
  flex: 0 0 479.88px;
  height: 479.88px;
  overflow: visible;
}

.about-bento-polaroid {
  align-items: center;
  background: #102033;
  border-radius: 32px;
  box-shadow: 3.70888px 5.56332px 13.9083px rgba(0, 0, 0, 0.25);
  display: flex;
  height: 455.87px;
  justify-content: center;
  left: -3.19%;
  overflow: hidden;
  position: absolute;
  right: 8.2%;
  top: -15.33px;
  transform: rotate(-3deg);
}

.about-bento-polaroid img {
  border-radius: 22.2533px;
  height: 455.87px;
  object-fit: cover;
  transform: rotate(-3deg) scale(1.09);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  width: 455.88px;
}

.about-bento-polaroid:hover img {
  transform: rotate(-3deg) scale(1.11);
}

.about-bento-stack {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 494.72px;
  flex-direction: column;
  gap: 7.42px;
  height: 479.89px;
  padding: 7.41776px;
}

.about-bento-stack img {
  border-radius: 22.2533px;
  flex: 0 0 228.82px;
  height: 228.82px;
  object-fit: cover;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  width: 479.88px;
}

.about-bento-stack img:hover {
  transform: scale(1.018);
}

.about-bento-stack .about-bento-valentine {
  object-position: center 46%;
}

.about-beyond-copy {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: -20px auto 0;
  max-width: 807px;
  text-align: center;
}

.about-beyond-copy p {
  color: #adabc7;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.45;
  margin: 0;
}

.about-instagram-link {
  display: inline-flex;
  height: 24px;
  width: 204px;
}

.about-instagram-link img {
  height: 24px;
  width: 204px;
}

.about-panel,
.about-stats,
.about-value {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
}

.about-panel {
  padding: 40px;
}

.about-panel h2 {
  font-size: 32px;
  line-height: 1;
  margin: 0 0 24px;
}

.about-panel p {
  color: #adabc7;
  font-size: 24px;
  line-height: 1.4;
  margin: 0;
}

.about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.about-tags span {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  padding: 10px 14px;
}

.about-stats {
  display: grid;
  gap: 1px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}

.about-stats div {
  background: rgba(2, 16, 36, 0.28);
  padding: 28px;
}

.about-stats strong {
  display: block;
  font-size: 28px;
  line-height: 1;
  margin-bottom: 10px;
}

.about-stats span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 15px;
  line-height: 1.35;
}

.about-value-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-value {
  min-height: 220px;
  padding: 28px;
  transition: background 240ms ease, transform 240ms ease;
}

.about-value:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-4px);
}

.about-value span {
  color: #847bff;
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 42px;
}

.about-value h3 {
  font-size: 24px;
  line-height: 1;
  margin: 0 0 16px;
}

.about-value p {
  color: #adabc7;
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
}

.about-cta {
  display: grid;
  margin-bottom: 48px;
  margin-top: 88px;
  padding: 0 0 80px;
  place-items: center;
}

.about-cta .section-heading {
  margin-bottom: 80px;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes heroDrift {
  from {
    transform: scale(1.04) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.09) translate3d(-18px, -10px, 0);
  }
}

@keyframes heroLineReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 46%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroSerifReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 30%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroPremiumReveal {
  0% {
    filter: blur(10px);
    opacity: 0;
    transform: translate3d(0, 110%, 0);
  }
  68% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    filter: blur(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroSerifPremiumReveal {
  0% {
    filter: blur(8px);
    opacity: 0;
    transform: translate3d(0, 76%, 0);
  }
  72% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    filter: blur(0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroTextSweep {
  0% {
    background-position: -135% 0, var(--base-gradient-x) var(--base-gradient-y);
  }
  42% {
    background-position: -135% 0, var(--base-gradient-x) var(--base-gradient-y);
  }
  100% {
    background-position: 135% 0, var(--base-gradient-x) var(--base-gradient-y);
  }
}

@keyframes coldScreenFade {
  0%,
  28% {
    opacity: 0;
  }

  40%,
  68% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes hotScreenCalm {
  0%,
  28%,
  100% {
    filter: saturate(1) brightness(1);
  }

  44%,
  68% {
    filter: saturate(0.94) brightness(0.96);
  }
}

@keyframes motionCardFocusCalm {
  0%,
  30%,
  100% {
    opacity: 0;
    transform: scale(0.99);
  }

  45%,
  68% {
    opacity: 0.34;
    transform: scale(1);
  }

  56% {
    opacity: 0.2;
  }
}

@keyframes bonusObjectFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  50% {
    transform: translate3d(-6px, -12px, 0) rotate(0.8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-text-word,
  .hero-svg-window,
  .hot-cold-motion .hot-screen,
  .hot-cold-motion .cold-screen,
  .motion-card-focus,
  .bonus-parallax-object {
    animation: none;
  }

  .hot-cold-motion .cold-screen,
  .motion-card-focus {
    display: none;
  }

  .hero-media-reveal {
    transition: none;
  }

  .hero-text-word,
  .hero-svg-window {
    filter: none;
    opacity: 1;
    transform: none;
  }

  .hero-svg-mask::after {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 980px) {
  body {
    background: var(--bg);
  }

  .top-nav {
    bottom: 16px;
    overflow-x: auto;
    position: fixed;
    scrollbar-width: none;
    top: auto;
    width: calc(100% - 24px);
  }

  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link,
  .nav-pill {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 12px 13px;
    width: auto;
  }

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

  .hero-media {
    height: min(800px, 100svh);
  }

  .hero-media img {
    object-position: 58% top;
  }

  .hero-content {
    left: 24px;
    top: 146px;
    width: calc(100% - 48px);
  }

  .rail-marker::after {
    display: none;
  }

  .profile-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-meta {
    flex-direction: column;
  }

  .project-card {
    border-radius: 24px;
    padding: 20px;
  }

  .project-shot {
    min-height: 300px;
    padding: 20px;
  }

  .timeline-row {
    gap: 12px;
    grid-template-columns: 1fr;
  }

  .tool-dock {
    flex-wrap: wrap;
    justify-content: center;
    position: static;
    transform: none;
    width: calc(100% - 28px);
  }

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

  .about-value-grid {
    grid-template-columns: 1fr;
  }

  .about-bento {
    align-items: stretch;
    flex-direction: column;
    height: auto;
  }

  .about-bento-feature,
  .about-bento-stack {
    flex: 0 0 auto;
    width: 100%;
  }

  .about-bento-feature {
    aspect-ratio: 1;
    height: auto;
  }

  .about-bento-polaroid {
    bottom: 24px;
    height: auto;
    left: 24px;
    right: 24px;
    top: 24px;
  }

  .about-bento-polaroid img {
    height: 100%;
    width: 100%;
  }

  .about-bento-stack {
    height: auto;
  }

  .about-bento-stack img {
    flex-basis: auto;
    height: auto;
    width: 100%;
  }

  .about-info-card,
  .about-info-card-wide {
    flex: 0 0 auto;
    width: 100%;
  }

  .about-hero {
    min-height: 0;
    padding: 96px 0 76px;
  }

  .about-hero-copy p {
    font-size: 20px;
  }

  .about-card-icon {
    left: auto;
    right: 17px;
  }

  .about-stats {
    grid-template-columns: 1fr;
  }

  .about-profile-card {
    min-height: 160px;
  }

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

  .contact-card {
    height: auto;
    min-height: 218px;
  }

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

  .contact-form-panel {
    min-height: 0;
  }

  .about-story,
  .about-beyond,
  .about-values,
  .about-cta,
  .contact-card-section,
  .contact-form-section {
    padding: 64px 0;
  }
}

@media (max-width: 620px) {
  .section {
    width: min(var(--max), calc(100% - 28px));
  }

  .about-main::before,
  .contact-main::before {
    background-size: auto 360px;
  }

  .about-hero,
  .contact-hero {
    padding: 96px 0 56px;
  }

  .about-page .about-info-card-wide {
    height: auto;
    padding-bottom: 32px;
  }

  .about-page .about-info-card-wide h2 {
    max-width: 248px;
  }

  .about-page .office-title-desktop {
    display: none;
  }

  .about-page .office-title-mobile {
    display: inline;
  }

  .hero-title-art,
  .hero-title {
    width: min(100%, 460px);
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .intro-copy {
    font-size: 18px;
  }

  .project-shot {
    min-height: 220px;
  }

  .section-heading p {
    font-size: 17px;
  }

  .top-nav {
    justify-content: flex-start;
    padding-inline: 8px;
  }

  .nav-link,
  .nav-pill {
    font-size: 12px;
    padding: 11px 12px;
  }

  .made-with {
    justify-content: center;
  }

  .about-hero h1 {
    font-size: 34px;
  }

  .about-hero-copy p,
  .about-beyond-heading p,
  .about-beyond-copy p,
  .about-panel p,
  .contact-hero-copy p,
  .contact-form-heading p {
    font-size: 18px;
    line-height: 1.25;
  }

  .contact-hero h1 {
    font-size: 34px;
  }

  .contact-card h2 {
    font-size: 28px;
  }

  .contact-card a,
  .contact-card span:not(.contact-card-icon) {
    font-size: 18px;
  }

  .about-beyond-copy a {
    font-size: 14px;
  }

  .about-beyond-heading h2 {
    font-size: 28px;
  }

  .about-page .about-cta {
    margin-top: 32px;
    padding-bottom: 72px;
    padding-top: 32px;
  }

  .about-page .about-bento-feature {
    aspect-ratio: auto;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 32px;
    overflow: hidden;
    padding: 7.41776px;
  }

  .about-page .about-bento-polaroid {
    background: transparent;
    border-radius: 22.2533px;
    box-shadow: none;
    display: block;
    height: auto;
    inset: auto;
    overflow: hidden;
    position: relative;
    transform: none;
  }

  .about-page .about-bento-polaroid img {
    border-radius: 22.2533px;
    height: auto;
    object-fit: cover;
    transform: none;
    width: 100%;
  }

  .about-page .about-bento-polaroid:hover img {
    transform: none;
  }

  .about-page .about-bento {
    align-items: center;
    gap: 18px;
    overflow: visible;
  }

  .about-page .about-beyond-inner {
    gap: 36px;
  }

  .about-page .about-bento-feature,
  .about-page .about-bento-stack {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    padding: 0;
  }

  .about-page .about-bento-feature {
    margin-left: -4px;
    transform: rotate(-0.7deg);
    width: calc(100% + 8px);
  }

  .about-page .about-bento-polaroid {
    background:
      radial-gradient(circle at 18% 8%, rgba(128, 98, 255, 0.14), transparent 38%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
    border-radius: 26px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
    padding: 9px;
  }

  .about-page .about-bento-polaroid img {
    border-radius: 24px;
    display: block;
  }

  .about-page .about-bento-stack {
    align-items: stretch;
    display: flex;
    gap: 18px;
    width: 100%;
  }

  .about-page .about-bento-stack img {
    background:
      radial-gradient(circle at 20% 10%, rgba(128, 98, 255, 0.13), transparent 38%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
    border-radius: 24px;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
    display: block;
    height: auto;
    padding: 8px;
    width: 100%;
  }

  .about-page .about-bento-stack .about-bento-valentine {
    align-self: flex-end;
    transform: rotate(0.55deg);
    width: 92%;
  }

  .about-page .about-bento-stack img:not(.about-bento-valentine) {
    align-self: flex-start;
    transform: rotate(-0.45deg);
    width: 98%;
  }

  .about-profile-card {
    grid-template-columns: 72px 1fr;
    padding: 22px;
  }

  .about-avatar {
    height: 72px;
    width: 72px;
  }

  .about-avatar img {
    height: 56px;
    width: 56px;
  }

  .about-card-map {
    opacity: 0.36;
    right: -120px;
  }

  .about-panel {
    padding: 28px;
  }

  .about-value {
    min-height: 180px;
  }
}

/* Mobile responsive pass */
@media (max-width: 980px) {
  body {
    padding-bottom: calc(46px + env(safe-area-inset-bottom));
  }

  .site-shell {
    overflow-x: hidden;
  }

  .top-nav {
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    backdrop-filter: blur(18px) saturate(1.12);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
      rgba(9, 22, 46, 0.74);
    bottom: max(12px, env(safe-area-inset-bottom));
    gap: 4px;
    height: 56px;
    justify-content: center;
    padding: 6px;
    width: min(560px, calc(100% - 24px));
  }

  .nav-link,
  .nav-pill {
    align-items: center;
    display: inline-flex;
    flex: 1 1 0;
    height: 44px;
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
    white-space: nowrap;
    width: auto;
  }

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

  .hero-media {
    height: min(720px, 100svh);
  }

  .hero-media img {
    object-position: 63% top;
  }

  .hero-content {
    left: max(24px, calc(50% - 186px));
    top: clamp(128px, 19svh, 164px);
    width: min(372px, calc(100% - 48px));
  }

  .hero-title-art {
    margin-bottom: 18px;
    width: 100%;
  }

  .hero-title-text {
    font-size: clamp(46px, 13.3vw, 58px);
  }

  .hero-text-complex {
    --w: 615;
  }

  .hero-subtitle {
    font-size: clamp(16px, 4.2vw, 20px);
    line-height: 1.28;
    max-width: 360px;
  }

  .contact-main,
  .about-main {
    padding-bottom: 110px;
  }

  .contact-page .footer,
  .footer {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  .about-page .about-main {
    padding-bottom: 56px;
  }
}

@media (max-width: 620px) {
  .section {
    width: min(var(--max), calc(100% - 32px));
  }

  .top-nav {
    border-radius: 999px;
    gap: 2px;
    width: calc(100% - 22px);
  }

  .nav-link,
  .nav-pill {
    font-size: 12px;
    padding: 0 5px;
  }

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

  .hero-media {
    height: min(690px, 100svh);
  }

  .hero-media img {
    object-position: 66% top;
  }

  .hero-content {
    left: 24px;
    top: clamp(128px, 19svh, 154px);
    width: min(348px, calc(100% - 48px));
  }

  .hero-title-art,
  .hero-title {
    width: 100%;
  }

  .hero-title-text {
    font-size: clamp(44px, 13vw, 52px);
  }

  .hero-text-clarity .hero-text-word {
    -webkit-text-stroke-width: 5.8px;
    text-shadow: 0 1.5px 0 var(--bg);
  }

  .intro,
  .projects,
  .journey,
  .tools,
  .contact,
  .about-story,
  .about-beyond,
  .about-values,
  .about-cta,
  .contact-card-section,
  .contact-form-section {
    padding: 56px 0;
  }

  .contact-hero-inner {
    gap: 34px;
  }

  .contact-card-grid {
    gap: 16px;
  }

  .contact-card {
    border-radius: 24px;
    min-height: 188px;
    padding: 24px 76px 28px 24px;
  }

  .contact-card-copy {
    gap: 22px;
    max-width: none;
  }

  .contact-card-icon {
    right: 14px;
    top: 14px;
  }

  .contact-form-panel {
    border-radius: 24px;
    gap: 28px;
    padding: 36px 20px 40px;
  }

  .contact-form-heading {
    gap: 12px;
  }

  .contact-form-heading h2 {
    font-size: 30px;
  }

  .contact-form label {
    border-radius: 14px;
    padding: 20px;
  }

  .contact-submit {
    width: 100%;
  }
}

/* Figma mobile home alignment */
@media (max-width: 620px) {
  body {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }

  .site-shell::before,
  .site-shell::after {
    display: none;
  }

  .site-shell {
    --rail-left: max(24px, calc(50% - 157.5px));
    --rail-right: min(calc(100% - 24px), calc(50% + 157.5px));
  }

  .about-page .about-rail-section::before,
  .about-page .about-rail-section::after,
  .contact-page .about-rail-section::before,
  .contact-page .about-rail-section::after {
    background:
      linear-gradient(#201e38, #201e38) calc(var(--rail-left) + 1px) 50% / 10px 10px no-repeat,
      linear-gradient(#201e38, #201e38) calc(var(--rail-right) + 1px) 50% / 10px 10px no-repeat,
      linear-gradient(180deg, #464278 0%, #100f23 100%) var(--rail-left) 50% / 12px 12px no-repeat,
      linear-gradient(180deg, #464278 0%, #100f23 100%) var(--rail-right) 50% / 12px 12px no-repeat,
      repeating-linear-gradient(
      to right,
      var(--line) 0 9px,
      transparent 9px 18px
      ) calc(var(--rail-left) + 12px) 50% / calc(var(--rail-right) - var(--rail-left) - 12px) 2px no-repeat;
  }

  .section {
    width: min(315px, calc(100% - 48px));
  }

  .top-nav {
    align-items: center;
    -webkit-backdrop-filter: blur(24px) saturate(1.18);
    backdrop-filter: blur(24px) saturate(1.18);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
      rgba(16, 28, 52, 0.74);
    border-radius: 40px 40px 0 0;
    bottom: 0;
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.52);
    box-sizing: border-box;
    gap: 2px;
    height: calc(79px + env(safe-area-inset-bottom));
    justify-content: center;
    left: 50%;
    padding: 12px 10px calc(16px + env(safe-area-inset-bottom));
    position: fixed;
    top: auto;
    width: 100vw;
  }

  .nav-link,
  .nav-pill {
    color: rgba(255, 255, 255, 0.8);
    flex: 0 0 60.5px;
    font-size: 11px;
    height: 30px;
    justify-content: center;
    padding: 0 8px;
    width: auto;
  }

  .nav-pill {
    color: #413e69;
    flex-basis: 80px;
    font-size: 11px;
    height: 30px;
  }

  .hero {
    min-height: calc(clamp(370px, calc(78vw + 72px), 392px) + 174px + 32px);
    width: 100%;
  }

  .hero-media {
    height: min(126vw, 56svh);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(408px, 100vw);
  }

  .hero-media::after {
    background: linear-gradient(180deg, rgba(2, 16, 36, 0) 0%, rgba(2, 16, 36, 0.12) 58%, rgba(2, 16, 36, 0.9) 100%);
    bottom: 0;
    content: "";
    height: 172px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 3;
  }

  .hero-media img {
    inset: 0;
    object-position: 64% 0;
    right: 0;
    transform: scale(1.08);
    transform-origin: 50% 0;
    width: 100%;
  }

  .hero-media-base {
    filter: brightness(1.12) saturate(1.04);
    opacity: 1;
  }

  .hero-content {
    left: 50%;
    top: clamp(370px, calc(78vw + 72px), 392px);
    transform: translateX(-50%);
    width: min(315px, calc(100% - 48px));
  }

  .hero-title-art {
    margin: 0;
    max-width: 100%;
    transform: none;
    width: 315px;
  }

  .hero-title-text {
    aspect-ratio: 315 / 174;
    font-size: 40px;
  }

  .hero-text-mask .hero-text-word {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    filter: none;
    font-size: 0;
    height: 100%;
    line-height: 0;
    text-fill-color: transparent;
    width: 100%;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
  }

  .hero-text-designing {
    --mask-h: 72.41;
    --w: 454.74;
    --x: 0;
    --y: 0;
  }

  .hero-text-designing .hero-text-word {
    background-image: url("/assets/images/mobile-hero-word-designing.svg");
  }

  .hero-text-clarity {
    --mask-h: 106.81;
    --w: 312.38;
    --x: 0;
    --y: 61.75;
  }

  .hero-text-clarity .hero-text-word {
    background-image: url("/assets/images/mobile-hero-word-clarity.svg");
    filter: none;
  }

  .hero-text-complex {
    --mask-h: 72.41;
    --w: 595.24;
    --x: 0;
    --y: 152.36;
  }

  .hero-text-complex .hero-text-word {
    background-image: url("/assets/images/mobile-hero-word-complex.svg");
  }

  .hero-text-digital {
    --mask-h: 72.41;
    --w: 327.97;
    --x: 0;
    --y: 241.08;
  }

  .hero-text-digital .hero-text-word {
    background-image: url("/assets/images/mobile-hero-word-digital.svg");
  }

  .hero-text-world {
    --mask-h: 85.09;
    --w: 259.36;
    --x: 339.28;
    --y: 229.09;
  }

  .hero-text-world .hero-text-word {
    background-image: url("/assets/images/mobile-hero-word-world.svg");
  }

  .hero-subtitle {
    display: none;
  }

  .hero + .rail-marker {
    display: none;
  }

  .intro {
    gap: 32px;
    margin-bottom: 0;
    padding: 0 0 48px;
  }

  .profile-card {
    align-items: flex-start;
    border-radius: 16.3px;
    flex-direction: row;
    gap: 12px;
    height: 104px;
    padding: 15px;
    width: 100%;
  }

  .avatar-wrap,
  .avatar-wrap img {
    flex-basis: 40px;
    height: 40px;
    width: 40px;
  }

  .profile-copy {
    gap: 8px;
    padding-top: 1px;
  }

  .profile-name {
    gap: 8px;
  }

  .profile-name strong {
    font-size: 13.6px;
    letter-spacing: 0.27px;
  }

  .flag {
    height: 16px;
    width: 16px;
  }

  .profile-meta {
    flex-direction: column;
    font-size: 12px;
    gap: 5px;
    letter-spacing: 0.24px;
    line-height: 0.9;
  }

  .profile-meta-item {
    gap: 6px;
  }

  .profile-meta-item img,
  .profile-meta-item:last-child img,
  .profile-link-icon {
    flex-basis: 12px;
    height: 12px;
    width: 12px;
  }

  .profile-map {
    height: 90px;
    left: auto;
    opacity: 0.16;
    right: -8px;
    top: 2px;
    width: 130px;
  }

  .profile-spark {
    display: block;
    height: 5px;
    left: auto;
    right: 24px;
    top: 36px;
    width: 5px;
  }

  .intro-copy {
    font-size: 15px;
    gap: 16px;
    letter-spacing: 0;
    line-height: 1.34;
    margin-top: 0;
    width: 100%;
  }

  .rail-marker {
    background: repeating-linear-gradient(
      to right,
      rgba(65, 62, 105, 0.25) 0 4px,
      transparent 4px 8px
    ) 10px 50% / calc(100% - 20px) 2px no-repeat;
    height: 4px;
    margin: 0 auto 56px;
    width: min(315px, calc(100% - 48px));
  }

  .rail-marker::before,
  .rail-marker::after {
    background: #201e38;
    border: 0;
    border-radius: 0.6px;
    display: block;
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
  }

  .rail-marker::before {
    left: 0;
  }

  .rail-marker::after {
    left: auto;
    right: 0;
  }

  .rail-marker.project-split::before,
  .rail-marker.project-split::after {
    display: none;
  }

  .project-split {
    height: 6px;
    margin: 8px auto;
    width: min(315px, 100%);
  }

  .project-split-line {
    background: repeating-linear-gradient(
      to right,
      rgba(65, 62, 105, 0.25) 0 4px,
      transparent 4px 8px
    ) 0 50% / 100% 2px no-repeat;
    width: 100%;
  }

  .home-page .rail-marker:not(.project-split),
  .about-page .about-cta-open,
  .about-page .about-cta-close {
    background: repeating-linear-gradient(
      to right,
      var(--line) 0 9px,
      transparent 9px 18px
    ) 12px 50% / calc(100% - 24px) 2px no-repeat;
    display: block;
    height: 12px;
  }

  .home-page .hero + .rail-marker {
    display: none;
  }

  .home-page .rail-marker:not(.project-split)::before,
  .home-page .rail-marker:not(.project-split)::after,
  .about-page .about-cta-open::before,
  .about-page .about-cta-open::after,
  .about-page .about-cta-close::before,
  .about-page .about-cta-close::after {
    background: linear-gradient(#201e38, #201e38) padding-box,
      linear-gradient(180deg, #464278 0%, #100f23 100%) border-box;
    border: 1px solid transparent;
    border-radius: 2px;
    height: 12px;
    top: 0;
    transform: none;
    width: 12px;
  }

  .about-page .about-cta {
    margin-top: 0;
    padding: 0 0 56px;
  }

  .about-page .about-beyond::after,
  .about-page .about-cta::after {
    display: none;
  }

  .about-page .about-main {
    padding-bottom: 0;
  }

  .projects,
  .journey,
  .tools,
  .contact {
    padding: 0 0 56px;
  }

  .contact {
    margin-top: 0;
  }

  .section-heading {
    margin-bottom: 32px;
  }

  .section-heading h2,
  .journey .section-heading h2,
  .tools .section-heading h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
  }

  .section-heading p,
  .journey .section-heading p,
  .tools .section-heading p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.18;
  }

  .projects {
    margin-bottom: 0;
  }

  .projects .section-heading {
    margin-bottom: 32px;
  }

  .project-stack {
    gap: 24px;
  }

  .project-card,
  .visual-card {
    border-radius: 10.2px;
    gap: 0;
    height: 357px;
    justify-content: space-between;
    padding: 12px 10.2px 10.2px;
  }

  .visual-card {
    height: 327px;
  }

  .project-kicker {
    align-items: flex-start;
    gap: 7.6px;
    min-height: 47px;
    padding-left: 8px;
  }

  .project-logo,
  .project-logo-img img {
    flex: 0 0 40px;
    height: 40px;
    width: 40px;
  }

  .project-kicker > div {
    width: min(244px, calc(100% - 94px));
  }

  .project-kicker h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-kicker p {
    display: -webkit-box;
    font-size: 12px;
    font-weight: 300;
    line-height: 14px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .project-arrow {
    flex: 0 0 46px;
    height: 46px;
    width: 46px;
  }

  .project-arrow::before,
  .project-arrow::after {
    height: 38.33px;
    width: 38.33px;
  }

  .project-arrow svg {
    height: 22px;
    width: 22px;
  }

  .project-shot,
  .visual-shot {
    border-radius: 7.6px;
    flex: 0 0 280px;
    height: 280px;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
  }

  .visual-shot {
    flex-basis: 246px;
    height: 246px;
    overflow: visible;
  }

  .project-shot:not(.visual-shot) img,
  .visual-shot > img {
    border-radius: 6px;
    height: 255px;
    left: 50%;
    max-width: none;
    object-fit: cover;
    position: absolute;
    top: 13px;
    transform: translateX(-50%);
    width: calc(100% - 20px);
  }

  .bonus-motion-shot .bonus-motion-screen {
    border-radius: 6px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
    height: 255px;
    left: 50%;
    position: absolute;
    top: 13px;
    transform: translateX(-50%);
    width: calc(100% - 20px);
  }

  .project-shot.bonus-motion-shot .bonus-base-screen {
    animation: none;
    height: 100%;
    inset: 0;
    left: 0;
    max-height: none;
    max-width: none;
    object-fit: cover;
    object-position: center top;
    position: absolute;
    top: 0;
    transform: scale(1.035);
    transform-origin: center top;
    width: 100%;
  }

  .bonus-motion-shot .bonus-motion-screen::after {
    display: none;
  }

  .project-shot.bonus-motion-shot .bonus-parallax-object {
    animation: bonusObjectFloat 6.4s ease-in-out infinite;
    display: block;
    height: auto;
    left: auto;
    max-height: none;
    max-width: none;
    object-fit: contain;
    object-position: center;
    right: 22px;
    top: 22px;
    transform: none;
    width: 70px;
  }

  .casino-motion-shot .hot-cold-motion {
    border-radius: 6px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
    height: 255px;
    left: 50%;
    position: absolute;
    top: 13px;
    transform: translateX(-50%);
    width: calc(100% - 20px);
  }

  .casino-motion-shot .hot-cold-motion img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: none;
    width: 100%;
  }

  .casino-motion-shot .cold-screen {
    display: block;
  }

  .casino-motion-shot .hot-screen {
    animation: hotScreenCalm 9s cubic-bezier(.45, 0, .2, 1) infinite;
  }

  .casino-motion-shot .hot-screen,
  .casino-motion-shot .cold-screen,
  .project-shot.bonus-motion-shot .bonus-parallax-object {
    animation-play-state: paused;
  }

  .project-card.is-motion-active .casino-motion-shot .hot-screen,
  .project-card.is-motion-active .casino-motion-shot .cold-screen,
  .project-card.is-motion-active .project-shot.bonus-motion-shot .bonus-parallax-object {
    animation-play-state: running;
  }

  .casino-motion-shot .motion-card-focus {
    display: none;
  }

  .visual-shot > img {
    border-radius: 0;
    box-shadow: none;
    height: auto;
    left: calc(50% - 16px);
    object-fit: contain;
    top: 14px;
    width: 344px;
  }

  .project-shot:not(.visual-shot):hover img,
  .visual-shot:hover > img {
    transform: translateX(-50%) scale(1.018);
  }

  .journey {
    margin-top: 0;
    overflow: visible;
    padding-bottom: 0;
    width: min(315px, calc(100% - 48px));
  }

  .journey .section-heading {
    align-items: center;
    gap: 8px;
    height: auto;
    justify-content: flex-start;
    margin: 0 0 24px;
    overflow: visible;
    padding: 0;
    white-space: normal;
    width: 100%;
  }

  .journey .section-heading h2 {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    text-align: center;
    width: 100%;
  }

  .journey .section-heading p {
    color: #adabc7;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
    text-align: center;
    width: 100%;
  }

  .timeline {
    gap: 51px;
    width: 100%;
  }

  .timeline-row {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 24px;
    grid-template-columns: none;
    min-height: 86.1px;
    width: 100%;
  }

  .timeline-row:not(:last-child)::after {
    background: repeating-linear-gradient(
      to right,
      rgba(65, 62, 105, 0.25) 0 4px,
      transparent 4px 8px
    ) 0 50% / 100% 2px no-repeat;
    height: 3.06px;
    top: calc(100% + 24px);
    width: 100%;
  }

  .timeline-row strong {
    color: #fff;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    overflow: visible;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
    width: 100%;
  }

  .timeline-detail {
    align-items: center;
    display: flex;
    gap: 24px;
    height: 46.1px;
    justify-content: flex-start;
    justify-self: auto;
    width: 100%;
  }

  .company-card {
    border-radius: 8px;
    flex: 0 0 153.66px;
    gap: 6.15px;
    height: 46.1px;
    width: 153.66px;
  }

  .iaffiliate-mark {
    height: 20.83px;
    width: 19.84px;
  }

  .iaffiliate-word {
    height: 14.54px;
    width: 74.18px;
  }

  .itlab-logo {
    height: 30px;
    width: auto;
  }

  .different-logo-wrap {
    gap: 5.02px;
    width: 118px;
  }

  .different-mark {
    height: 15.9px;
    width: 16.94px;
  }

  .different-word {
    height: 11.62px;
    width: 93.28px;
  }

  .timeline-meta {
    flex: 0 0 130px;
    gap: 2px;
    height: 41.54px;
    line-height: normal;
    width: 130px;
  }

  .timeline-meta span {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16.9px;
    font-weight: 400;
    line-height: 25px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    width: 130px;
  }

  .timeline-meta time {
    color: rgba(255, 255, 255, 0.62);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12.3px;
    font-weight: 400;
    line-height: 15px;
    white-space: nowrap;
    width: 130px;
  }

  .journey-close {
    left: auto;
    margin: 56px auto 30px;
    transform: none;
    width: 100%;
  }

  .tools {
    gap: 30px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    width: min(315px, calc(100% - 48px));
  }

  .tools .section-heading {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    height: 68px;
    margin: 0;
    order: 0;
    padding: 0;
    white-space: normal;
    width: 315px;
  }

  .tools .section-heading h2 {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    text-align: center;
    width: 100%;
  }

  .tools .section-heading p {
    color: #adabc7;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
    text-align: center;
    width: 100%;
  }

  .tools-stage {
    height: 178px;
    margin: 0;
    max-width: none;
    overflow: hidden;
    width: 315px;
  }

  .tools + .rail-marker {
    margin-top: 18px;
  }

  .tools-laptop {
    height: auto;
    margin: 0;
    max-width: none;
    width: 486.12px;
  }

  .tool-dock {
    border-radius: 11.66px;
    gap: 15.55px;
    height: 46.64px;
    left: calc(50% - 2.92px);
    padding: 11.66px 39.35px;
    position: absolute;
    top: 12.05px;
    transform: translateX(-50%);
    width: 335.25px;
  }

  .tool-dock span,
  .tool-dock img {
    height: 23.32px;
    width: 23.32px;
  }

  .footer {
    gap: 0;
    height: auto;
    margin: 0 auto;
    padding: 0 0 calc(34px + env(safe-area-inset-bottom));
    width: min(315px, calc(100% - 48px));
  }

  .contact-page .contact-main {
    padding-bottom: 0;
  }

  .footer-monogram {
    height: 62px;
    margin-bottom: 24px;
    width: 62px;
  }

  .made-with {
    border-radius: 8px;
    box-shadow:
      0 3.6px 18px rgba(47, 24, 108, 0.1),
      0 3.6px 18px -0.9px rgba(0, 0, 0, 0.25);
    font-size: 10.8px;
    gap: 3.6px;
    height: 34px;
    line-height: 1.2702;
    padding: 0;
    width: 240px;
  }

  .made-with img {
    height: 14.25px;
    width: 14.25px;
  }

  .made-with img[src*="figma-small"] {
    height: 14.25px;
    width: 9.5px;
  }

  .made-with .made-codex {
    border-radius: 3.6px;
    height: 16.2px;
    margin-left: 0;
    width: 16.5px;
  }

  .made-separator {
    margin: 0;
  }

  .footer p {
    font-size: 10.8px;
    line-height: 1.2702;
    margin: 12px 0 0;
  }

}

@media(min-width:769px){.timeline-meta time{white-space:nowrap}};

/* Desktop timeline date lock: keep live range on one line */
@media (min-width: 769px) {
  #journey .timeline-detail {
    overflow: visible !important;
  }

  #journey .timeline-meta {
    flex: 0 0 auto !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: none !important;
  }

  #journey .timeline-meta time {
    display: block !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
}

/* v2 mobile performance layer */
@media (max-width: 620px) {
  .top-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background:
      linear-gradient(180deg, rgba(35, 49, 76, 0.98), rgba(16, 28, 52, 0.98)),
      #101c34 !important;
  }

  .about-main::before,
  .contact-main::before {
    background-image: url("assets/images/optimized/background-about-mobile.webp");
  }

  .hero-media,
  .project-shot,
  .bonus-motion-screen,
  .hot-cold-motion,
  .profile-card,
  .about-bento article,
  .about-bento img {
    contain: layout paint;
  }

  .projects .project-card,
  .journey,
  .tools,
  .contact,
  .about-values .about-value,
  .about-story,
  .about-beyond,
  .about-cta,
  .contact-card-section,
  .contact-form-section,
  .footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
  }

  .project-card:not(.is-motion-active) .hot-screen,
  .project-card:not(.is-motion-active) .cold-screen,
  .project-card:not(.is-motion-active) .bonus-parallax-object {
    animation-play-state: paused !important;
  }
}

@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
  .hot-screen,
  .cold-screen,
  .bonus-parallax-object,
  .map-pin-core,
  .map-pin-glow {
    animation: none !important;
  }
}

/* Mobile visual campaigns: let the collage sit above the visual frame. */
@media (max-width: 620px) {
  .projects .project-card.visual-card {
    contain-intrinsic-size: auto;
    content-visibility: visible;
  }

  .visual-card {
    overflow: visible;
  }

  .visual-card .visual-shot {
    contain: layout;
    overflow: visible;
    z-index: 1;
  }

  .visual-card .visual-shot > img {
    left: 50%;
    top: -16px;
    z-index: 2;
  }
}

/* Keep the mobile Contact footer compact after it enters the viewport. */
@media (max-width: 620px) {
  .contact-page .footer {
    contain-intrinsic-size: auto;
    content-visibility: visible;
    height: auto;
    min-height: 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}

/* Keep the mobile Visual Campaigns collage airy without an oversized purple field. */
@media (max-width: 620px) {
  .projects .project-card.visual-card {
    height: 302px;
  }

  .projects .project-card.visual-card .visual-shot {
    flex-basis: 220px;
    height: 220px;
  }

  .projects .project-card.visual-card .visual-shot > img {
    top: -8px;
  }
}


/* Casino availability note */
.project-availability-note {
  width: 100%;
  margin: 16px 0 20px;
  color: #847BFF;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 620px) {
  .project-availability-note {
    margin: 12px 0 18px;
    font-size: 12px;
    line-height: 1.4;
  }
}

/* Casino availability note refinement */
.project-availability-note {
  font-family: Inter, sans-serif;
  font-size: 12px;
}

/* Casino availability note spacing */
.project-availability-note {
  margin: 8px 0 10px;
}

@media (max-width: 620px) {
  .project-availability-note {
    margin: 8px 0 10px;
  }
}

/* Keep the Casino preview aligned after the availability note. */
.project-availability-note {
  margin: -16px 0;
}

@media (max-width: 620px) {
  .project-availability-note {
    margin: -12px 0;
  }
}

/* Visually center the Casino availability note between the summary and preview. */
@media (min-width: 621px) {
  .project-availability-note {
    transform: translateY(18px);
  }
}

/* Bonus.org availability note accent. */
.project-availability-note--bonus {
  color: #91D990;
}


/* Project availability notes override card description styling. */
.project-kicker .project-availability-note {
  width: 100%;
  margin: -16px 0;
  color: #847BFF;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

.project-kicker .project-availability-note--bonus {
  color: #91D990;
}

@media (max-width: 620px) {
  .project-kicker .project-availability-note {
    margin: -12px 0;
  }
}


/* Use the genuine Inter Thin face for project availability notes. */
.project-card > .project-availability-note {
  font-weight: 300;
}


/* Keep availability notices separate from project summaries on mobile. */
@media (max-width: 620px) {
  .project-card > .project-availability-note {
    margin: 12px 0 14px;
    transform: none;
  }
}


/* Let mobile project cards grow for the availability note, without clipping previews. */
@media (max-width: 620px) {
  .project-card:not(.visual-card) {
    height: auto;
    min-height: 400px;
  }

  .project-card > .project-availability-note {
    margin: 10px 0;
    font-size: 11px;
    line-height: 1.4;
  }
}


/* Final mobile optical adjustment for availability notes. */
@media (max-width: 620px) {
  .project-card > .project-availability-note {
    transform: translateY(2px);
  }
}


/* Keep Career Journey as the primary heading on mobile. */
@media (max-width: 620px) {
  .journey .timeline-row > strong {
    font-size: 26px;
    line-height: 1.15;
  }
}



/* Slightly soften role titles on mobile while keeping all h2 sizes shared. */
@media (max-width: 620px) {
  .journey .timeline-row > strong {
    font-size: 20px;
    line-height: 1;
  }
}


/* Final mobile Career role size. */
@media (max-width: 620px) {
  .journey .timeline-row > strong {
    font-size: 18px;
  }
}