body.about-page {
  --about-hero-image: url("about-hero-light.webp");
  --about-systems-image: url("about-systems-light.webp");
  --about-visual-opacity: 0.82;
  --about-visual-blend: multiply;
  --about-section-wash: rgba(200, 100, 60, 0.08);
  --about-section-line: rgba(200, 100, 60, 0.2);
}

:root[data-theme="dark"] body.about-page {
  --about-hero-image: url("about-hero-dark.webp");
  --about-systems-image: url("about-systems-dark.webp");
  --about-visual-opacity: 0.92;
  --about-visual-blend: screen;
  --about-section-wash: rgba(255, 181, 71, 0.1);
  --about-section-line: rgba(126, 227, 245, 0.18);
}

body.about-page main {
  position: relative;
  isolation: isolate;
}

body.about-page .hero.small {
  min-height: min(760px, 78vh);
  background:
    radial-gradient(circle at 78% 24%, var(--about-section-wash), transparent 32%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink) 78%, color-mix(in oklab, var(--ink) 84%, var(--ink-2)) 100%);
}

body.about-page .hero .grid-bg {
  opacity: 0.32;
  mask-image: radial-gradient(ellipse at 36% 44%, #000 0%, rgba(0, 0, 0, 0.72) 28%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 36% 44%, #000 0%, rgba(0, 0, 0, 0.72) 28%, transparent 70%);
}

.about-hero-art {
  position: absolute;
  z-index: 1;
  inset: 68px -8vw auto auto;
  width: min(1120px, 72vw);
  height: min(720px, 70vh);
  pointer-events: none;
  opacity: var(--about-visual-opacity);
}

.about-hero-art::before,
.about-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.about-hero-art::before {
  z-index: 2;
  background:
    linear-gradient(90deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 68%, transparent) 19%, transparent 52%),
    linear-gradient(180deg, var(--ink) 0%, transparent 20%, transparent 72%, var(--ink) 100%);
}

.about-hero-art::after {
  z-index: 3;
  background:
    radial-gradient(circle at 66% 46%, transparent 0%, transparent 42%, var(--ink) 88%),
    linear-gradient(135deg, transparent 0%, var(--about-section-line) 56%, transparent 58%);
  opacity: 0.62;
  mix-blend-mode: var(--about-visual-blend);
}

.about-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 70% 48%, #000 0%, #000 38%, rgba(0, 0, 0, 0.56) 58%, rgba(0, 0, 0, 0.18) 72%, transparent 88%);
  mask-image: radial-gradient(ellipse at 70% 48%, #000 0%, #000 38%, rgba(0, 0, 0, 0.56) 58%, rgba(0, 0, 0, 0.18) 72%, transparent 88%);
  animation: about-drift 22s ease-in-out infinite alternate;
}

.about-hero-img-light {
  display: block;
  filter: saturate(0.88) contrast(0.96) brightness(1.03);
  mix-blend-mode: multiply;
}

.about-hero-img-dark {
  display: none;
  filter: saturate(1.06) contrast(1.08) brightness(0.96);
  mix-blend-mode: screen;
}

:root[data-theme="dark"] .about-hero-img-light {
  display: none;
}

:root[data-theme="dark"] .about-hero-img-dark {
  display: block;
}

body.about-page .hero-inner {
  z-index: 4;
}

body.about-page .hero .display {
  max-width: 8.5ch;
  text-shadow: 0 18px 44px color-mix(in oklab, var(--ink) 74%, transparent);
}

body.about-page .hero-meta {
  max-width: min(760px, 100%);
}

body.about-page .hero-meta .mono {
  flex: 1 1 18rem;
  min-width: 0;
  max-width: min(100%, 52rem);
  overflow-wrap: anywhere;
}

.about-origin-section,
.about-principles-section,
.about-clients-section {
  overflow: hidden;
  isolation: isolate;
}

.about-origin-section::before,
.about-principles-section::before,
.about-clients-section::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background-image: var(--about-systems-image);
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  mix-blend-mode: var(--about-visual-blend);
}

.about-origin-section::before {
  inset: 64px -12vw auto auto;
  width: min(760px, 48vw);
  height: min(520px, 42vw);
  -webkit-mask-image: radial-gradient(ellipse at 56% 50%, #000 0%, rgba(0, 0, 0, 0.6) 46%, transparent 78%);
  mask-image: radial-gradient(ellipse at 56% 50%, #000 0%, rgba(0, 0, 0, 0.6) 46%, transparent 78%);
  transform: rotate(-3deg);
  animation: about-float 18s ease-in-out infinite alternate;
}

.about-principles-section::before {
  inset: 0 -6vw auto -6vw;
  height: 360px;
  opacity: 0.14;
  background-position: center 42%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, rgba(0, 0, 0, 0.44) 66%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, rgba(0, 0, 0, 0.44) 66%, transparent 100%);
}

.about-clients-section::before {
  inset: auto -12vw 14px auto;
  width: min(720px, 50vw);
  height: min(420px, 34vw);
  opacity: 0.16;
  background-position: right center;
  -webkit-mask-image: radial-gradient(ellipse at 66% 58%, #000 0%, rgba(0, 0, 0, 0.42) 46%, transparent 76%);
  mask-image: radial-gradient(ellipse at 66% 58%, #000 0%, rgba(0, 0, 0, 0.42) 46%, transparent 76%);
}

body.about-page .about-grid,
body.about-page .principles,
body.about-page .logos-grid,
body.about-page .about-clients-section .wrap {
  position: relative;
  z-index: 1;
}

body.about-page .about-grid > .reveal:first-child::before {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  margin-bottom: 28px;
  background: linear-gradient(90deg, var(--amber), transparent);
  box-shadow: 0 0 24px var(--amber-glow);
}

body.about-page .stat-block,
body.about-page .principles,
body.about-page .logos-grid {
  border-color: color-mix(in oklab, var(--line) 72%, var(--about-section-line));
  box-shadow: 0 30px 90px -72px color-mix(in oklab, var(--paper) 38%, transparent);
}

body.about-page .stat {
  position: relative;
  overflow: hidden;
}

body.about-page .stat::after,
body.about-page .prin::after,
body.about-page .logo-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 0%, var(--about-section-line) 48%, transparent 50%);
  opacity: 0;
  transform: translateX(-16%);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

body.about-page .stat:hover::after,
body.about-page .prin:hover::after,
body.about-page .logo-cell:hover::after {
  opacity: 0.28;
  transform: translateX(0);
}

body.about-page .prin,
body.about-page .logo-cell {
  position: relative;
  overflow: hidden;
}

@keyframes about-drift {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.07) translate3d(-2%, 1%, 0);
  }
}

@keyframes about-float {
  from {
    transform: rotate(-3deg) translate3d(0, 0, 0);
  }
  to {
    transform: rotate(-2deg) translate3d(-10px, 12px, 0);
  }
}

@media (max-width: 900px) {
  body.about-page .hero.small {
    min-height: 660px;
  }

  .about-hero-art {
    inset: 92px -48vw auto auto;
    width: 138vw;
    height: 520px;
    opacity: 0.56;
  }

  body.about-page .hero .display {
    max-width: 8ch;
  }

  .about-origin-section::before {
    inset: auto -30vw 28px auto;
    width: 118vw;
    height: 360px;
    opacity: 0.14;
    transform: none;
  }

  .about-principles-section::before {
    height: 520px;
  }

  .about-clients-section::before {
    width: 86vw;
    height: 340px;
    opacity: 0.12;
  }
}

@media (max-width: 560px) {
  body.about-page .hero.small {
    min-height: 610px;
  }

  .about-hero-art {
    inset: 116px -86vw auto auto;
    width: 186vw;
    height: 440px;
    opacity: 0.46;
  }

  :root[data-theme="dark"] .about-hero-art {
    opacity: 0.56;
  }

  body.about-page .hero-meta {
    display: block;
    align-items: flex-start;
  }

  body.about-page .hero-meta .mono {
    display: block;
    max-width: 28ch;
    margin-top: 14px;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: break-word;
  }

  body.about-page .hero .display {
    max-width: 7.4ch;
  }

  body.about-page .stat-block {
    grid-template-columns: 1fr;
  }

  body.about-page .stat,
  body.about-page .prin,
  body.about-page .logo-cell {
    padding-left: 24px;
    padding-right: 24px;
  }

  .about-origin-section::before,
  .about-clients-section::before {
    opacity: 0.08;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero-img,
  .about-origin-section::before {
    animation: none;
  }

  body.about-page .stat::after,
  body.about-page .prin::after,
  body.about-page .logo-cell::after {
    transition: none;
  }
}