/* Identity system: chrome, hard grids, internet artifacts, and controlled 3D. */

.identity-hero {
  position: relative;
  min-height: calc(100svh - var(--header));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 54%, rgba(103, 128, 255, 0.11), transparent 31%),
    linear-gradient(180deg, #050506 0%, #010101 100%);
}

.identity-grid,
.work-monument-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: clamp(38px, 5vw, 74px) clamp(38px, 5vw, 74px);
  mask-image: linear-gradient(to bottom, black 0, transparent 72%);
}

.identity-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  width: min(calc(100% - (var(--pad) * 2)), 1560px);
  min-height: calc(100svh - var(--header));
  margin-inline: auto;
  padding: clamp(32px, 4vw, 64px) 0 24px;
}

.identity-shell > *,
.identity-mark,
.identity-intro,
.identity-actions,
.portal-cluster,
.portal-links,
.portal-links a {
  min-width: 0;
  max-width: 100%;
}

.portal-links strong,
.portal-links span {
  overflow-wrap: anywhere;
}

.identity-mark {
  position: relative;
  width: min(100%, 1270px);
  margin-inline: auto;
}

.wordmark {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--bone);
  font-family: "Bowlby One", "Inter Tight", sans-serif;
  font-size: clamp(4.4rem, 10.7vw, 11.9rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.74;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff, 0 11px 28px rgba(0, 0, 0, 0.82);
}

.wordmark span {
  display: block;
}

.wordmark span:last-child {
  margin-left: 0.24em;
}

.orbit {
  position: absolute;
  z-index: 3;
  inset: -18% -4% auto;
  width: 108%;
  height: 122%;
  overflow: visible;
  pointer-events: none;
}

.star-trajectory-shadow,
.star-trajectory {
  fill: none;
  stroke: url(#trajectory-fade);
  stroke-linecap: round;
}

.star-trajectory-shadow {
  stroke-width: 12;
  opacity: 0.24;
  filter: blur(8px);
}

.star-trajectory {
  stroke-width: 1.5;
}

.star-tail {
  fill: none;
  stroke: url(#trajectory-fade);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px white);
}

.star-core {
  fill: var(--bone);
  filter: drop-shadow(0 0 10px white) drop-shadow(0 0 26px rgba(133, 168, 255, 0.9));
}

.identity-role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px 14px;
  margin: clamp(25px, 3vw, 42px) 0 0;
  color: #9b9892;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(0.58rem, 0.7vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.identity-role i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 8px var(--acid);
}

.identity-intro {
  max-width: 880px;
  margin: clamp(26px, 3vw, 48px) auto 0;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(1.6rem, 3.6vw, 4.1rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-align: center;
}

.identity-actions {
  display: flex;
  justify-content: center;
}

.identity-actions .chrome-link {
  margin-top: clamp(20px, 2.2vw, 32px);
}

.portal-cluster {
  position: relative;
  width: min(100%, 1080px);
  min-height: clamp(260px, 28vw, 410px);
  margin: clamp(4px, 1vw, 14px) auto 0;
}

.identity-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.identity-scene__canvas {
  position: relative;
  z-index: 2;
}

.scene-static-fallback {
  position: absolute;
  inset: 9% 6% 18%;
  z-index: 1;
}

.scene-ready .scene-static-fallback {
  opacity: 0;
}

.fallback-object {
  position: absolute;
  top: 40%;
  width: clamp(90px, 13vw, 180px);
  aspect-ratio: 1;
  filter: drop-shadow(0 26px 28px #000);
}

.fallback-chrome {
  left: 14%;
  border: 1px solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 24%, #fff, #777e88 20%, #080a0d 48%, #dce1e7 64%, #090a0d 78%);
}

.fallback-emerald {
  left: 43%;
  top: 22%;
  transform: rotate(21deg);
  clip-path: polygon(50% 0, 92% 24%, 100% 73%, 56% 100%, 8% 74%, 0 24%);
  background: linear-gradient(145deg, #baffd7, #0acb74 34%, #034b31 76%);
}

.fallback-ruby {
  right: 12%;
  top: 46%;
  border-radius: 9% 56% 8% 50%;
  background: linear-gradient(145deg, #ffb4c9, #ff1549 30%, #65001d 78%);
  transform: rotate(-18deg);
}

.portal-links {
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(2, 2, 2, 0.56);
  backdrop-filter: blur(10px);
}

.portal-links a {
  display: grid;
  gap: 6px;
  min-height: 78px;
  padding: 15px 18px;
  border-right: 1px solid var(--line);
  transition: color 160ms ease, background 160ms ease;
}

.portal-links a:last-child {
  border-right: 0;
}

.portal-links span {
  color: #85817b;
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.portal-links strong {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1.35rem);
}

.portal-links a:hover {
  color: var(--black);
  background: var(--acid);
}

.portal-links a:hover span {
  color: #263300;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 18px auto 0;
  color: #77746e;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.scroll-cue i {
  position: relative;
  width: 38px;
  height: 1px;
  background: #77746e;
}

.scroll-cue i::after {
  position: absolute;
  top: -2px;
  right: 0;
  width: 5px;
  height: 5px;
  content: "";
  border-right: 1px solid #77746e;
  border-bottom: 1px solid #77746e;
  transform: rotate(-45deg);
}

.story-section {
  background: #070708;
}

.story-copy h2 {
  max-width: 1170px;
}

.career-signal {
  margin-top: clamp(70px, 9vw, 130px);
  border-top: 1px solid var(--line-strong);
}

.career-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.2fr) minmax(230px, 0.34fr) 1fr;
  gap: 30px;
  align-items: baseline;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}

.career-row span {
  color: var(--acid);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.career-row strong {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(1.25rem, 2vw, 2.2rem);
}

.career-row p {
  margin: 0;
  color: var(--bone-dim);
}

.client-signal {
  overflow: hidden;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: #0b0c0f;
}

.client-rail {
  overflow: hidden;
  color: var(--black);
  border-bottom: 1px solid #fff;
  background: linear-gradient(180deg, #fff 0, #858b93 47%, #f1f5f8 53%, #555a62 100%);
}

.client-rail-track {
  display: flex;
  width: max-content;
  animation: client-rail 34s linear infinite;
}

.client-rail span {
  padding: 9px 22px;
  border-right: 1px solid rgba(0, 0, 0, 0.34);
  font-family: "Inter Tight", sans-serif;
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

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

.logo-proof-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  min-height: 150px;
}

.logo-proof-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding-inline: clamp(10px, 1.5vw, 22px);
}

.logo-proof-item img {
  width: 100%;
  height: 32px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(0.82);
  opacity: 0.86;
}

.logo-proof-lockup img {
  flex: 0 0 31px;
  width: 31px;
  height: 31px;
}

.logo-proof-lockup span {
  min-width: 0;
  color: #c7c9cc;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(0.68rem, 0.85vw, 0.88rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
}

.youtube-feature {
  color: var(--bone);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.23) 1px, transparent 1px),
    linear-gradient(#e6002d 0%, #bc0025 100%);
  background-size: 74px 100%, auto;
}

.feature-heading,
.craft-heading,
.archive-intro {
  display: grid;
  grid-template-columns: minmax(140px, 0.28fr) 1fr;
  gap: clamp(38px, 7vw, 120px);
}

.youtube-feature .eyebrow,
.youtube-feature .section-index {
  color: #fff;
}

.youtube-feature .section-index span {
  background: linear-gradient(155deg, #fff, #a7abb2 45%, #fff 52%, #555a62);
}

.youtube-feature-grid {
  display: grid;
  grid-template-columns: 0.76fr 1.24fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  margin-top: clamp(55px, 7vw, 105px);
}

.youtube-feature-copy .large-copy {
  font-size: clamp(1.35rem, 2.3vw, 2.7rem);
}

.evidence-stamps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.evidence-stamps article {
  min-height: 130px;
  padding: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.evidence-stamps strong {
  display: block;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 5rem);
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.evidence-stamps span {
  display: block;
  margin-top: 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
}

.phone-deck {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  min-height: 600px;
  padding-inline: 3%;
  perspective: 1200px;
}

.phone-deck a {
  position: relative;
  display: block;
  margin-inline: -10%;
  border: 6px solid #111;
  border-radius: 24px;
  background: #111;
  box-shadow: 0 30px 45px rgba(50, 0, 12, 0.55), inset 0 0 0 1px #6c6c6c;
  transform: rotate(-8deg) translateY(18px);
  transition: transform 220ms ease, z-index 0s;
}

.phone-deck a:nth-child(2) { z-index: 2; transform: rotate(4deg) translateY(-28px); }
.phone-deck a:nth-child(3) { z-index: 3; transform: rotate(-3deg) translateY(22px); }
.phone-deck a:nth-child(4) { transform: rotate(8deg) translateY(-8px); }
.phone-deck a:hover { z-index: 5; transform: rotate(0) translateY(-18px) scale(1.05); }
.phone-deck img { width: 100%; aspect-ratio: 9 / 16; border-radius: 17px; object-fit: cover; }
.phone-deck a > span { position: absolute; right: 4px; bottom: -52px; left: 4px; color: white; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.07em; line-height: 1.35; text-transform: uppercase; }

.google-chapter {
  color: var(--black);
  background: var(--bone);
}

.google-chapter .section-index {
  color: #4f4d48;
}

.google-chapter .eyebrow {
  color: #3d35ff;
}

.google-chapter .chrome-link {
  color: var(--bone);
  border-color: #030303;
  background: linear-gradient(180deg, #484d55, #050506 48%, #747b85 51%, #08090a);
}

.google-chapter .source-note {
  color: #67645e;
}

.chapter-grid {
  align-items: start;
}

.chapter-copy > p:not(.eyebrow, .source-note) {
  max-width: 720px;
  font-size: clamp(1.08rem, 1.5vw, 1.38rem);
}

@media (min-width: 901px) {
  .google-chapter .chapter-grid {
    grid-template-columns: minmax(340px, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(32px, 4vw, 68px);
  }

  .google-chapter .chapter-copy h2 {
    font-size: clamp(3.75rem, 5.6vw, 6rem);
  }
}

.chapter-timeline {
  padding: 0;
  margin: 48px 0 0;
  border-top: 1px solid var(--line-dark);
  list-style: none;
}

.chapter-timeline li {
  display: grid;
  grid-template-columns: 95px 1fr;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}

.chapter-timeline span {
  color: #4b44ff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.google-art-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-items: start;
}

.google-art-grid figure {
  position: relative;
  margin: 0;
  padding: 8px;
  border: 1px solid #030303;
  background: linear-gradient(135deg, rgba(88, 109, 255, 0.28), rgba(255, 78, 179, 0.17) 32%, rgba(109, 255, 196, 0.24) 70%, transparent);
}

.google-art-grid figure:nth-child(even) {
  margin-top: 56px;
}

.google-art-grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.google-art-grid figcaption {
  padding: 9px 2px 2px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.archive-preview {
  background: #050506;
}

.archive-intro {
  margin-bottom: clamp(50px, 7vw, 100px);
}

.archive-more {
  display: flex;
  justify-content: center;
  padding-top: 65px;
}

.craft-section {
  background:
    linear-gradient(rgba(38, 255, 136, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 255, 136, 0.07) 1px, transparent 1px),
    #050806;
  background-size: 32px 32px;
}

.craft-heading {
  margin-bottom: clamp(50px, 7vw, 100px);
}

.craft-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(44, 255, 141, 0.5);
  border-left: 1px solid rgba(44, 255, 141, 0.5);
  box-shadow: 0 0 50px rgba(24, 200, 120, 0.06);
}

.craft-grid article {
  min-height: 370px;
  padding: 22px;
  border-right: 1px solid rgba(44, 255, 141, 0.5);
  border-bottom: 1px solid rgba(44, 255, 141, 0.5);
  background: rgba(0, 6, 2, 0.58);
}

.craft-grid article > span,
.craft-grid small {
  color: #42df8c;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.craft-grid h3 {
  min-height: 110px;
  margin: 70px 0 20px;
  font-size: clamp(1.8rem, 2.8vw, 3.4rem);
}

.craft-grid p {
  color: #b6bcb8;
}

.craft-grid small {
  display: block;
  margin-top: 30px;
}

.human-section {
  background: #0a0a0b;
}

.human-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(50px, 8vw, 130px);
  align-items: center;
}

.human-collage {
  position: relative;
  min-height: min(72vw, 840px);
}

.human-photo {
  position: absolute;
  overflow: hidden;
  padding: 7px 7px 40px;
  border: 1px solid var(--line-strong);
  background: #d7d2c9;
  box-shadow: 0 30px 70px #000;
}

.human-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.human-photo-a { z-index: 2; top: 4%; left: 3%; width: 47%; height: 68%; transform: rotate(-5deg); }
.human-photo-b { z-index: 1; top: 0; right: 2%; width: 44%; height: 61%; transform: rotate(6deg); }
.human-photo-c { z-index: 3; right: 15%; bottom: 1%; width: 39%; height: 49%; transform: rotate(-2deg); }

.human-copy > p:not(.eyebrow) {
  max-width: 650px;
  color: var(--bone-dim);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.fit-section {
  background: #030303;
}

.fit-heading {
  margin-bottom: clamp(50px, 8vw, 110px);
}

.fit-rows {
  border-top: 1px solid var(--line-strong);
}

.fit-row {
  display: grid;
  grid-template-columns: 70px minmax(270px, 0.85fr) 1fr;
  gap: 24px;
  align-items: center;
  min-height: 145px;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
}

.fit-row > span {
  color: var(--acid);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.fit-row h3 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 3.6rem);
}

.fit-row p {
  max-width: 510px;
  margin: 0;
  color: var(--bone-dim);
}

/* Work index */

.work-monument {
  position: relative;
  min-height: calc(100svh - var(--header));
  overflow: hidden;
  background: #020203;
}

.work-monument::after {
  position: absolute;
  top: 3%;
  right: -7vw;
  width: min(46vw, 700px);
  aspect-ratio: 1;
  content: "";
  border: 1px solid #dce3eb;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 25%, #fff 0 2%, transparent 5%),
    radial-gradient(circle at 36% 30%, #eef2f7 0, #777f8b 13%, #050608 31%, #d1d7df 43%, #171a1f 57%, #f7f9fb 64%, #060708 75%);
  box-shadow: inset -50px -45px 80px #000, inset 30px 22px 55px rgba(255, 255, 255, 0.55), 0 70px 120px #000;
  opacity: 0.74;
  transform: rotate(-17deg);
}

.work-monument-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--header) - 42px);
  padding-block: 70px;
}

.work-monument h1 {
  max-width: 1280px;
  margin: 0;
  font-size: clamp(4.4rem, 11.8vw, 12.5rem);
  line-height: 0.74;
  text-transform: uppercase;
}

.work-monument h1 span,
.work-monument h1 em {
  display: block;
}

.work-monument h1 em {
  position: relative;
  z-index: 2;
  color: var(--acid);
  font-family: "Cormorant Display", serif;
  font-size: 0.91em;
  font-style: italic;
  letter-spacing: -0.075em;
  text-transform: none;
  text-shadow: 0 8px 28px #000;
}

.work-monument-bottom {
  display: grid;
  grid-template-columns: minmax(0, 620px) auto;
  gap: 40px;
  align-items: end;
  justify-content: space-between;
  margin-top: 70px;
}

.work-monument-bottom p {
  margin: 0;
  color: var(--bone-dim);
  font-size: clamp(1rem, 1.45vw, 1.35rem);
}

.work-monument-bottom .chrome-link {
  margin: 0;
}

.chrome-marquee {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  color: var(--black);
  border-top: 1px solid #fff;
  background: linear-gradient(180deg, #fff 0, #7d838b 45%, #f5f7fa 54%, #51565e 100%);
}

.chrome-marquee > div {
  display: flex;
  width: max-content;
  animation: work-marquee 27s linear infinite;
}

.chrome-marquee span,
.chrome-marquee i {
  padding: 9px 20px;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.chrome-marquee i {
  padding-inline: 0;
}

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

.work-principle {
  background: #070708;
}

.work-principle h2 {
  font-size: clamp(2.7rem, 6vw, 6.7rem);
}

.work-chapter-head {
  display: grid;
  grid-template-columns: minmax(140px, 0.28fr) 1fr;
  gap: clamp(38px, 7vw, 120px);
  margin-bottom: clamp(60px, 8vw, 120px);
}

.work-chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(370px, 0.68fr);
  gap: clamp(45px, 8vw, 130px);
}

.work-chapter-copy > p:not(.large-copy, .source-note) {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
}

.work-chapter-youtube {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    #d8002b;
  background-size: 72px 100%;
}

.work-chapter-youtube .eyebrow,
.work-chapter-youtube .section-index,
.work-chapter-youtube .source-note {
  color: #fff;
}

.work-chapter-youtube .role-boundary span {
  color: rgba(255, 255, 255, 0.66);
}

.case-stat-stack {
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}

.case-stat-stack article {
  padding: 20px 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

.case-stat-stack span,
.case-stat-stack small {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.case-stat-stack strong {
  display: block;
  margin: 10px 0;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(2.7rem, 5.3vw, 6.2rem);
  letter-spacing: -0.06em;
  line-height: 0.85;
}

.case-stat-stack small {
  max-width: 400px;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: none;
}

.work-phone-river {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(9px, 1.7vw, 25px);
  align-items: start;
  margin-top: clamp(80px, 11vw, 150px);
}

.work-phone-river a {
  position: relative;
  display: block;
  padding: 6px 6px 16px;
  color: var(--black);
  border: 1px solid #fff;
  background: linear-gradient(150deg, #fff, #747b84 20%, #f5f7fa 30%, #61666e 42%, #fff 73%, #676d75);
  box-shadow: 0 30px 50px rgba(70, 0, 15, 0.45);
  transform: rotate(-2deg);
  transition: transform 190ms ease;
}

.work-phone-river a:nth-child(even) { margin-top: 70px; transform: rotate(2deg); }
.work-phone-river a:hover { z-index: 2; transform: translateY(-10px) rotate(0); }
.work-phone-river img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.work-phone-river span, .work-phone-river strong { display: block; padding-inline: 4px; }
.work-phone-river span { margin-top: 11px; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.work-phone-river strong { margin-top: 2px; font-family: "Inter Tight", sans-serif; font-size: clamp(0.86rem, 1.4vw, 1.2rem); }

.work-chapter-google {
  color: var(--black);
  background:
    radial-gradient(circle at 88% 28%, rgba(101, 85, 255, 0.22), transparent 28%),
    radial-gradient(circle at 75% 80%, rgba(255, 95, 177, 0.2), transparent 30%),
    var(--bone);
}

.work-chapter-google .eyebrow { color: #4434ff; }
.work-chapter-google .section-index { color: #4d4a44; }
.work-chapter-google .section-index span { color: var(--bone); background: linear-gradient(155deg, #42474e, #050506 45%, #717984 52%, #050506); border-color: #030303; }

.work-google-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(420px, 1.25fr);
  gap: clamp(45px, 8vw, 130px);
}

.work-google-copy .large-copy {
  font-size: clamp(1.35rem, 2.5vw, 2.85rem);
}

.work-chapter-google .role-boundary {
  border-color: rgba(0, 0, 0, 0.45);
}

.work-chapter-google .role-boundary > * {
  border-color: rgba(0, 0, 0, 0.18);
}

.work-chapter-google .source-note {
  color: #625f59;
}

.signal-timeline {
  margin-top: 45px;
  border-top: 1px solid rgba(0, 0, 0, 0.35);
}

.signal-timeline article {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.signal-timeline span {
  color: #4434ff;
  font-size: 0.67rem;
  font-weight: 900;
}

.signal-timeline p {
  margin: 0;
}

.google-work-mosaic {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  align-items: start;
}

.google-work-mosaic a {
  position: relative;
  display: block;
  padding: 7px;
  border: 1px solid #050505;
  background: linear-gradient(135deg, #818eff, #ff9bc9 27%, #f8f8f8 50%, #7effcd 75%, #828cff);
}

.google-work-mosaic a:nth-child(even) {
  margin-top: 50px;
}

.google-work-mosaic img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.google-work-mosaic span {
  display: block;
  padding: 8px 3px 2px;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.work-chapter-origin {
  background:
    linear-gradient(rgba(122, 171, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 171, 255, 0.07) 1px, transparent 1px),
    #05070b;
  background-size: 38px 38px;
}

.origin-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.6fr) minmax(0, 1fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: center;
}

.origin-art {
  position: relative;
  padding: 9px 9px 55px;
  border: 1px solid #aebed6;
  background: linear-gradient(145deg, #f7fbff, #69717c 32%, #dce2e9 53%, #454b54 75%, #fff);
  transform: rotate(-4deg);
}

.origin-art img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.origin-sticker {
  position: absolute;
  right: -14%;
  bottom: 8%;
  padding: 15px 18px;
  color: var(--black);
  border: 1px solid #030303;
  background: var(--acid);
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(1.1rem, 2vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
  transform: rotate(9deg);
}

.origin-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 45px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}

.origin-results article {
  min-height: 165px;
  padding: 18px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.origin-results strong {
  display: block;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.origin-results span {
  display: block;
  margin-top: 12px;
  color: #aeb7c5;
  font-size: 0.69rem;
  line-height: 1.45;
}

.archive-section {
  padding-bottom: 0;
  background: #030303;
}

.archive-heading {
  display: grid;
  grid-template-columns: minmax(140px, 0.28fr) 1fr;
  gap: clamp(38px, 7vw, 120px);
  margin-bottom: clamp(60px, 8vw, 120px);
}

@media (max-width: 1120px) {
  .youtube-feature-grid,
  .human-grid,
  .work-chapter-grid,
  .work-google-layout {
    grid-template-columns: 1fr;
  }

  .phone-deck {
    width: min(100%, 850px);
    margin-inline: auto;
  }

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

  .work-google-copy {
    max-width: 850px;
  }
}

@media (max-width: 900px) {
  .feature-heading,
  .craft-heading,
  .archive-intro,
  .work-chapter-head,
  .archive-heading {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .logo-proof-grid {
    grid-template-columns: repeat(4, 1fr);
    padding-block: 20px;
  }

  .logo-proof-item img {
    height: 26px;
    margin-block: 18px;
  }

  .logo-proof-lockup img {
    flex-basis: 26px;
    width: 26px;
  }

  .career-row,
  .fit-row {
    grid-template-columns: 90px 1fr;
  }

  .career-row p,
  .fit-row p {
    grid-column: 2;
  }

  .work-monument-bottom {
    grid-template-columns: 1fr;
  }

  .work-monument-bottom .chrome-link {
    margin-top: 8px;
  }

  .work-phone-river {
    grid-template-columns: repeat(3, 1fr);
  }

  .origin-grid {
    grid-template-columns: 0.65fr 1fr;
    gap: 50px;
  }
}

@media (max-width: 720px) {
  .identity-shell {
    padding-top: 38px;
  }

  .wordmark {
    font-size: clamp(3.25rem, 15.8vw, 6rem);
    line-height: 0.77;
  }

  .wordmark span:last-child {
    margin-left: 0;
  }

  .identity-role {
    max-width: 420px;
    margin-inline: auto;
  }

  .identity-intro {
    font-size: clamp(1.55rem, 7.8vw, 2.6rem);
  }

  .portal-cluster {
    min-height: 410px;
  }

  .identity-scene {
    bottom: 132px;
  }

  .portal-links {
    grid-template-columns: 1fr;
  }

  .portal-links a {
    grid-template-columns: 0.8fr 1.2fr;
    min-height: 58px;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .career-row,
  .fit-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .career-row p,
  .fit-row p {
    grid-column: auto;
  }

  .youtube-feature-grid {
    margin-top: 45px;
  }

  .evidence-stamps {
    grid-template-columns: 1fr;
  }

  .phone-deck {
    grid-template-columns: repeat(2, 1fr);
    gap: 45px 6px;
    min-height: auto;
    padding-bottom: 35px;
  }

  .phone-deck a,
  .phone-deck a:nth-child(n) {
    margin: 0;
    transform: rotate(-2deg);
  }

  .phone-deck a:nth-child(even) {
    transform: rotate(2deg) translateY(22px);
  }

  .google-art-grid {
    gap: 5px;
  }

  .google-art-grid figure:nth-child(even) {
    margin-top: 24px;
  }

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

  .craft-grid article {
    min-height: 300px;
  }

  .craft-grid h3 {
    min-height: auto;
    margin-top: 55px;
  }

  .human-collage {
    min-height: 138vw;
  }

  .human-photo-a { width: 56%; height: 60%; }
  .human-photo-b { width: 51%; height: 52%; }
  .human-photo-c { right: 7%; width: 49%; height: 46%; }

  .work-monument::after {
    top: 22%;
    right: -42%;
    width: 92vw;
    opacity: 0.52;
  }

  .work-monument h1 {
    font-size: clamp(4.15rem, 20vw, 7rem);
    line-height: 0.79;
  }

  .work-monument-bottom {
    margin-top: 55px;
  }

  .work-phone-river {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-phone-river a:nth-child(even) {
    margin-top: 38px;
  }

  .google-work-mosaic {
    gap: 5px;
  }

  .google-work-mosaic a:nth-child(even) {
    margin-top: 22px;
  }

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

  .origin-art {
    width: 80%;
    margin-inline: auto;
  }

  .origin-sticker {
    right: -12%;
  }

  .origin-results {
    grid-template-columns: 1fr;
  }
}

.not-found-signal {
  position: relative;
  display: grid;
  min-height: calc(100svh - var(--header));
  overflow: hidden;
  place-items: center;
  background: radial-gradient(circle at 76% 35%, rgba(255, 22, 72, 0.2), transparent 24%), #030303;
}

.not-found-grid {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background-image: linear-gradient(rgba(255, 255, 255, 0.17) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.17) 1px, transparent 1px);
  background-size: 52px 52px;
}

.not-found-inner {
  position: relative;
  z-index: 1;
  padding-block: 70px;
}

.not-found-inner h1 {
  margin: 0 0 30px;
  font-size: clamp(6rem, 20vw, 18rem);
  line-height: 0.67;
  text-transform: uppercase;
}

.not-found-inner h1 em {
  color: var(--ruby);
  font-family: "Cormorant Display", serif;
  font-style: italic;
  text-transform: none;
}

.not-found-inner > p:not(.eyebrow) {
  max-width: 560px;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(1.25rem, 2.3vw, 2.4rem);
  line-height: 1.1;
}

@media (max-width: 470px) {
  .identity-role i:nth-of-type(even) {
    display: none;
  }

  .work-phone-river span {
    font-size: 0.55rem;
  }

  .work-phone-river strong {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-rail-track,
  .chrome-marquee > div {
    animation: none;
  }
}

/* About: a personal evidence board, not a biography template. */

.about-identity-hero {
  position: relative;
  min-height: 1180px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 25%, rgba(128, 157, 255, 0.13), transparent 28%),
    radial-gradient(circle at 20% 72%, rgba(255, 22, 72, 0.1), transparent 31%),
    #030303;
}

.about-value-cloud {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.about-value {
  position: absolute;
  color: rgba(244, 241, 234, 0.1);
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(1.1rem, 2.1vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.about-value::before {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 8px 0 0;
  content: "";
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}

.about-value-culture { top: 7%; left: 2%; transform: rotate(-6deg); }
.about-value-technology { top: 11%; right: 2%; transform: rotate(7deg); }
.about-value-taste { top: 40%; left: -1%; transform: rotate(-90deg); }
.about-value-content { top: 48%; right: -1%; transform: rotate(90deg); }
.about-value-strategy { top: 69%; left: 4%; transform: rotate(5deg); }
.about-value-communities { top: 76%; right: 1%; transform: rotate(-5deg); }
.about-value-momentum { bottom: 7%; left: 23%; transform: rotate(-3deg); }
.about-value-native { bottom: 3%; right: 21%; transform: rotate(4deg); }
.about-value-curiosity { top: 28%; right: 28%; color: rgba(202, 255, 61, 0.13); transform: rotate(-8deg); }

.about-hero-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(300px, 0.74fr) minmax(580px, 1.26fr);
  gap: clamp(45px, 7vw, 115px);
  align-items: start;
  padding-block: clamp(80px, 9vw, 145px) 70px;
}

.about-hero-copy {
  position: sticky;
  top: calc(var(--header) + 45px);
  padding-bottom: 30px;
}

.about-hero-copy h1 {
  max-width: 650px;
  margin: 0 0 38px;
  font-size: clamp(4rem, 7.5vw, 8.2rem);
  line-height: 0.82;
}

.about-hero-copy .large-copy {
  max-width: 610px;
  color: var(--bone-dim);
  font-size: clamp(1.35rem, 2.15vw, 2.4rem);
}

.about-collage {
  position: relative;
  min-height: 1020px;
  perspective: 1200px;
}

.about-photo {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 7px 7px 35px;
  color: var(--black);
  border: 1px solid #fff;
  background: #d9d4ca;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.72);
}

.about-photo picture,
.about-photo img {
  width: 100%;
  height: 100%;
}

.about-photo img {
  object-fit: cover;
}

.about-photo figcaption {
  position: absolute;
  right: 7px;
  bottom: 8px;
  left: 7px;
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.about-photo-award { top: 1%; left: 4%; width: 43%; height: 58%; transform: rotate(-6deg); }
.about-photo-production { z-index: 3; top: 4%; right: 2%; width: 44%; height: 51%; transform: rotate(5deg); }
.about-photo-youtube { z-index: 5; right: 20%; bottom: 2%; width: 38%; height: 45%; transform: rotate(-3deg); }
.about-photo-workshop { z-index: 1; bottom: 10%; left: 0; width: 39%; height: 43%; transform: rotate(8deg); }

.about-paper-note {
  position: absolute;
  z-index: 8;
  display: grid;
  gap: 8px;
  max-width: 250px;
  padding: 20px;
  color: var(--black);
  border: 1px solid var(--black);
  background: var(--acid);
  box-shadow: 12px 15px 0 rgba(0, 0, 0, 0.56);
}

.about-paper-note span,
.about-paper-note strong {
  display: block;
}

.about-paper-note span {
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.about-paper-note strong {
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(1.15rem, 1.8vw, 1.7rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.about-paper-note-principle { top: 45%; right: -2%; transform: rotate(7deg); }
.about-paper-note-current { z-index: 7; right: 1%; bottom: 10%; max-width: 290px; color: var(--bone); background: var(--ruby); transform: rotate(-5deg); }

.about-foil {
  position: absolute;
  z-index: 9;
  display: grid;
  width: 132px;
  min-height: 64px;
  padding: 13px;
  border: 1px solid #fff;
  background: linear-gradient(135deg, #fff, #707781 20%, #d9e0e7 40%, #ff9fca 55%, #8affd2 70%, #777fff 86%, #fff);
  box-shadow: 0 18px 35px #000;
  place-items: center;
}

.about-foil img {
  width: 100%;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 white);
}

.about-foil-youtube { top: 0; right: 29%; transform: rotate(-9deg); }
.about-foil-google { top: 61%; left: 25%; transform: rotate(7deg); }
.about-foil-gemini { right: 4%; bottom: 37%; transform: rotate(-7deg); }

.about-doodle {
  position: absolute;
  z-index: 10;
  top: 41%;
  left: 35%;
  width: 150px;
  color: var(--acid);
  transform: rotate(-12deg);
}

.about-doodle path,
.about-doodle circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.about-logo-note {
  grid-column: 2;
  max-width: 600px;
  margin: 5px 0 0;
}

.about-journey-section {
  background: #08090b;
}

.about-section-heading {
  display: grid;
  grid-template-columns: minmax(140px, 0.28fr) 1fr;
  gap: clamp(38px, 7vw, 120px);
  margin-bottom: clamp(60px, 8vw, 120px);
}

.about-career-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}

.about-career-card {
  position: relative;
  min-height: 430px;
  padding: clamp(24px, 3vw, 45px);
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.015);
}

.about-career-card > span,
.about-career-card small {
  color: var(--acid);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-career-card h3 {
  max-width: 590px;
  margin: clamp(65px, 8vw, 115px) 0 22px;
  font-size: clamp(2.2rem, 4.2vw, 5rem);
}

.about-career-card p {
  max-width: 600px;
  color: var(--bone-dim);
}

.about-career-card small {
  position: absolute;
  right: clamp(24px, 3vw, 45px);
  bottom: clamp(24px, 3vw, 45px);
  left: clamp(24px, 3vw, 45px);
  color: #716e68;
}

.about-career-card-current {
  color: white;
  background: var(--ruby);
}

.about-career-card-current > span,
.about-career-card-current small,
.about-career-card-current p {
  color: white;
}

.about-career-card-systems {
  background:
    linear-gradient(rgba(53, 255, 149, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 255, 149, 0.09) 1px, transparent 1px),
    #021008;
  background-size: 28px 28px;
}

.about-recognition {
  display: grid;
  grid-template-columns: 0.25fr 0.7fr 1fr;
  gap: 30px;
  align-items: center;
  margin-top: 42px;
  padding: 26px;
  color: var(--black);
  border: 1px solid var(--black);
  background: var(--acid);
}

.about-recognition span {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-recognition h3 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 3.8rem);
}

.about-recognition p {
  margin: 0;
}

.about-manifesto-section {
  color: var(--black);
  background:
    radial-gradient(circle at 16% 17%, rgba(122, 114, 255, 0.24), transparent 23%),
    radial-gradient(circle at 81% 73%, rgba(255, 76, 169, 0.18), transparent 27%),
    var(--bone);
}

.about-manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.65fr);
  gap: clamp(50px, 8vw, 130px);
  align-items: start;
}

.about-manifesto-section .section-index {
  color: #4b4944;
}

.about-manifesto-section .section-index span {
  color: var(--bone);
  border-color: #050505;
  background: linear-gradient(155deg, #454a51, #030303 46%, #7b838d 53%, #030303);
}

.about-manifesto-section .eyebrow {
  color: #4a3cff;
}

.about-manifesto-copy .large-copy {
  max-width: 880px;
}

.about-instinct-list {
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.55);
  list-style: none;
}

.about-instinct-list li {
  padding: 22px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.about-instinct-list span,
.about-instinct-list strong {
  display: block;
}

.about-instinct-list span {
  color: #4a3cff;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-instinct-list strong {
  margin: 8px 0;
  font-family: "Inter Tight", sans-serif;
  font-size: clamp(1.55rem, 2.5vw, 2.8rem);
  letter-spacing: -0.04em;
}

.about-instinct-list p {
  margin: 0;
  color: #5c5953;
}

.about-lab-section {
  background:
    linear-gradient(rgba(69, 255, 156, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 255, 156, 0.075) 1px, transparent 1px),
    #020604;
  background-size: 36px 36px;
}

.about-lab-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(49, 255, 146, 0.5);
  border-left: 1px solid rgba(49, 255, 146, 0.5);
}

.about-lab-card {
  position: relative;
  min-height: 470px;
  padding: 25px;
  border-right: 1px solid rgba(49, 255, 146, 0.5);
  border-bottom: 1px solid rgba(49, 255, 146, 0.5);
  background: rgba(0, 9, 4, 0.74);
}

.about-lab-score {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: #42e890;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.61rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about-lab-score strong {
  color: var(--bone);
  font-size: 0.72rem;
}

.about-lab-card h3 {
  margin: 90px 0 22px;
  font-size: clamp(1.8rem, 3.2vw, 3.7rem);
}

.about-lab-card > p:not(.about-lab-score) {
  color: #b6bdb9;
}

.about-lab-card small {
  position: absolute;
  right: 25px;
  bottom: 25px;
  left: 25px;
  color: #42e890;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.59rem;
  text-transform: uppercase;
}

.about-fit-section .fit-heading > p:last-child {
  max-width: 700px;
  color: var(--bone-dim);
  font-size: 1.1rem;
}

@media (max-width: 1120px) {
  .about-hero-shell {
    grid-template-columns: 1fr;
  }

  .about-hero-copy {
    position: relative;
    top: auto;
    max-width: 900px;
  }

  .about-collage {
    min-height: 1050px;
  }

  .about-logo-note {
    grid-column: auto;
  }

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

  .about-instinct-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-left: 1px solid rgba(0, 0, 0, 0.55);
  }

  .about-instinct-list li {
    padding: 22px;
    border-right: 1px solid rgba(0, 0, 0, 0.35);
  }

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

@media (max-width: 900px) {
  .about-section-heading {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

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

@media (max-width: 720px) {
  .about-identity-hero {
    min-height: auto;
  }

  .about-hero-shell {
    padding-block: 75px 65px;
  }

  .about-hero-copy h1 {
    font-size: clamp(4rem, 19vw, 6.5rem);
  }

  .about-collage {
    min-height: 150vw;
  }

  .about-photo-award { left: 0; width: 54%; height: 54%; }
  .about-photo-production { right: 0; width: 50%; height: 47%; }
  .about-photo-youtube { right: 7%; width: 48%; height: 42%; }
  .about-photo-workshop { bottom: 8%; left: 1%; width: 46%; height: 39%; }
  .about-paper-note { max-width: 170px; padding: 13px; }
  .about-paper-note-principle { top: 43%; right: -2%; }
  .about-paper-note-current { right: 0; bottom: 6%; max-width: 190px; }
  .about-foil { width: 88px; min-height: 44px; padding: 8px; }
  .about-foil img { height: 24px; }
  .about-foil-google { left: 17%; }
  .about-doodle { left: 29%; width: 92px; }

  .about-career-card {
    min-height: 390px;
  }

  .about-instinct-list,
  .about-lab-grid {
    grid-template-columns: 1fr;
  }

  .about-lab-card {
    min-height: 400px;
  }
}