@font-face {
  font-family: "Cella Archivo";
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Cella Mono";
  src: url("assets/fonts/fragment-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.home-page {
  --product-background: #0c1011;
  --product-foreground: #edf1ef;
  --product-muted: #a2aaa8;
  --product-accent: #87c9ac;
  --product-accent-hover: #a5dbbe;
  --product-border: #2b3534;
  --chapter-space: clamp(64px, 7vw, 96px);
}
.home-page .site-header {
  transition:
    background-color 200ms,
    border-color 200ms,
    color 200ms;
}
.home-page .site-header.is-cella {
  background: var(--product-background);
  border-color: var(--product-border);
  color: var(--product-foreground);
}
.home-page .site-header.is-cella .wordmark svg,
.home-page .site-header.is-cella .navigation .nav-promise,
.home-page .site-header.is-cella .navigation a:hover,
.home-page .site-header.is-cella .navigation a[aria-current] {
  color: var(--product-accent);
}
.home-page .site-header.is-cella .menu-toggle {
  color: var(--product-foreground);
}
.home-page .site-header.is-cella .menu-lines:before,
.home-page .site-header.is-cella .menu-lines:after {
  background: var(--product-accent);
}
.home-page .site-header.is-cella a:focus-visible,
.home-page .site-header.is-cella button:focus-visible {
  outline-color: var(--product-accent);
}

.lab-introduction {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  padding-top: var(--chapter-space);
  border-top: 1px solid var(--line);
}
.lab-eyebrow {
  grid-column: 1 / 5;
  align-self: start;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--red);
  font-size: 15px;
  padding-top: 10px;
}
.lab-copy {
  grid-column: 5 / -1;
  max-width: 680px;
}
.lab-copy h2 {
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 550;
  line-height: 1.22;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
}
.lab-copy > p {
  max-width: 570px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.65;
}
.lab-copy > p:first-of-type {
  color: var(--ink);
}
.lab-copy > p + p {
  margin-top: 16px;
}
.lab-copy .text-link {
  margin-top: 22px;
}
.project-presentation {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: 24px;
  padding-top: 28px;
  padding-bottom: 56px;
  margin-top: var(--chapter-space);
  border-top: 1px solid var(--line);
}
.project-presentation > span:first-child {
  grid-column: 1 / 5;
  font-size: 14px;
  color: var(--muted);
}
.project-presentation p {
  grid-column: 5 / 12;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.presentation-arrow {
  grid-column: 12;
  justify-self: end;
  font-size: 30px;
  color: var(--red);
}
.cella-chapter {
  --cella-bg: var(--product-background);
  --cella-ink: var(--product-foreground);
  --cella-muted: var(--product-muted);
  --cella-accent: var(--product-accent);
  background: var(--cella-bg);
  color: var(--cella-ink);
  font-family: "Cella Archivo", Arial, sans-serif;
}
.brand-handoff {
  position: relative;
  height: 224px;
  background: linear-gradient(
    180deg,
    #fff 0%,
    #f3f5f4 18%,
    #d3dcd7 39%,
    #899b92 59%,
    #35423c 80%,
    var(--product-background) 100%
  );
}
.handoff-path {
  position: absolute;
  inset: 23px auto 24px 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.handoff-progressa {
  width: 27px;
  height: 29px;
  color: var(--red);
}
.handoff-line {
  width: 1px;
  flex: 1;
  min-height: 64px;
  margin-block: 17px;
  background: linear-gradient(var(--red), #a9b5ae 48%, var(--product-accent));
}
.handoff-cella {
  width: 35px;
  height: 35px;
  stroke: var(--product-accent);
  stroke-width: 1.8;
}

.cella-chapter-content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
  padding-top: 48px;
  padding-bottom: var(--chapter-space);
}
.cella-identity {
  grid-column: 1 / 6;
  padding-top: 5px;
}
.cella-summary {
  grid-column: 6 / -1;
}
.cella-status {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--cella-muted);
  font:
    400 12px/1.6 "Cella Mono",
    monospace;
  margin-bottom: 25px;
}
.cella-status > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cella-accent);
  flex-shrink: 0;
}
.cella-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: "Cella Archivo", Arial, sans-serif;
  font-size: clamp(60px, 6vw, 82px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.cella-wordmark img {
  width: 58px;
  height: 58px;
}
.cella-lead {
  max-width: 530px;
  color: var(--cella-ink);
  font-size: clamp(25px, 2.5vw, 34px);
  font-weight: 450;
  letter-spacing: -0.025em;
  line-height: 1.28;
  text-wrap: balance;
}
.cella-description {
  max-width: 490px;
  margin-top: 18px;
  color: var(--cella-muted);
  font-size: 18px;
  line-height: 1.65;
}
.cella-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  min-height: 49px;
  background: var(--cella-accent);
  color: var(--cella-bg);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--cella-accent);
  border-radius: 2px;
  padding: 13px 19px;
  margin-top: 28px;
  transition:
    background 180ms,
    transform 180ms var(--ease);
}
.cella-button:hover {
  background: var(--product-accent-hover);
  transform: translateY(-2px);
}
.cella-button > span {
  font-size: 22px;
  line-height: 1;
}
.cella-chapter a:focus-visible {
  outline-color: var(--cella-accent);
}
.home-page .site-footer {
  background: var(--product-background);
  color: var(--product-foreground);
  border-top: 1px solid var(--product-border);
}
.home-page .site-footer .wordmark svg,
.home-page .site-footer .back-to-top > span,
.home-page .site-footer a:hover {
  color: var(--product-accent);
}
.home-page .site-footer .footer-top > p,
.home-page .site-footer .footer-bottom {
  color: var(--product-muted);
}
.home-page .site-footer .footer-bottom {
  border-color: var(--product-border);
}
.home-page .site-footer a:focus-visible {
  outline-color: var(--product-accent);
}

@media (max-width: 1000px) {
  .lab-introduction {
    padding-top: 72px;
  }
  .project-presentation {
    margin-top: 64px;
  }
}
@media (max-width: 800px) {
  .lab-introduction {
    grid-template-columns: 1fr;
    gap: 27px;
  }
  .lab-eyebrow {
    grid-column: 1;
    padding-top: 0;
  }
  .lab-copy {
    grid-column: 1;
    max-width: 590px;
  }
  .lab-copy h2 {
    font-size: 39px;
  }
  .project-presentation {
    grid-template-columns: 1fr auto;
    gap: 8px 25px;
    padding-bottom: 48px;
    margin-top: 32px;
  }
  .project-presentation > span:first-child {
    grid-column: 1;
  }
  .project-presentation p {
    grid-column: 1;
    grid-row: 2;
  }
  .presentation-arrow {
    grid-column: 2;
    grid-row: 2;
  }
  .brand-handoff {
    height: 208px;
  }
  .cella-chapter-content {
    padding-top: 32px;
    padding-bottom: 72px;
  }
  .cella-wordmark {
    font-size: 60px;
    gap: 15px;
  }
  .cella-wordmark img {
    width: 46px;
    height: 46px;
  }
  .cella-status {
    font-size: 12px;
    max-width: 230px;
    flex-wrap: wrap;
  }
  .cella-lead {
    font-size: 26px;
  }
  .cella-description {
    font-size: 17px;
  }
}
@media (max-width: 620px) {
  .lab-introduction {
    padding-top: 57px;
    gap: 25px;
  }
  .lab-eyebrow {
    font-size: 14px;
  }
  .lab-copy h2 {
    font-size: clamp(29px, 7.6vw, 40px);
    margin-bottom: 23px;
  }
  .lab-copy > p {
    font-size: 18px;
  }
  .lab-copy .text-link {
    margin-top: 18px;
  }
  .project-presentation {
    margin-top: 26px;
    padding-top: 26px;
    padding-bottom: 44px;
  }
  .project-presentation p {
    font-size: 19px;
  }
  .project-presentation > span:first-child {
    font-size: 13px;
  }
  .brand-handoff {
    height: 215px;
  }
  .handoff-path {
    top: 18px;
    bottom: 20px;
  }
  .handoff-progressa {
    width: 24px;
    height: 26px;
  }
  .handoff-cella {
    width: 30px;
    height: 30px;
  }
  .handoff-line {
    min-height: 90px;
    margin-block: 14px;
  }
  .cella-chapter-content {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 25px;
    padding-bottom: 60px;
  }
  .cella-identity,
  .cella-summary {
    grid-column: 1;
  }
  .cella-status {
    margin-bottom: 21px;
    max-width: none;
    font-size: 12px;
  }
  .cella-wordmark {
    font-size: 65px;
  }
  .cella-wordmark img {
    width: 49px;
    height: 49px;
  }
  .cella-lead {
    max-width: 420px;
    font-size: 29px;
  }
  .cella-description {
    max-width: 430px;
    font-size: 18px;
    margin-top: 16px;
  }
  .cella-button {
    margin-top: 25px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cella-button:hover {
    transform: none;
  }
  .home-page .site-header {
    transition: none;
  }
}


/* A short typographic opening: problems → process → progress → progressa labs. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.kinetic-hero {
  min-height: calc(100svh - 100px);
  display: flex;
  flex-direction: column;
  padding-top: 28px;
  padding-bottom: 20px;
}
.kinetic-kicker {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 15px;
}
.kinetic-kicker p {
  display: flex;
  align-items: center;
  gap: 11px;
}
.intro-skip {
  flex-shrink: 0;
  min-height: 44px;
  padding: 8px 0 8px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
}
.intro-skip span {
  display: inline-block;
  margin-left: 12px;
  vertical-align: middle;
  color: var(--red);
  transition: transform 180ms var(--ease);
}
.intro-skip .direction-icon {
  width: 16px;
  height: 16px;
}
.intro-skip:hover {
  color: var(--red);
}
.intro-skip:hover span {
  transform: translate(2px, 2px);
}
.kinetic-stage {
  position: relative;
  margin-block: auto;
  padding-block: 42px 52px;
}
.kinetic-title {
  font-size: clamp(96px, 12.5vw, 176px);
  line-height: 1.04;
  letter-spacing: -0.065em;
  font-weight: 650;
  text-wrap: nowrap;
}
.wordplay {
  display: block;
}
.wordplay-line {
  display: flex;
  color: var(--red);
}
.wordplay-root {
  flex-shrink: 0;
  transition: color 480ms var(--ease);
}
.wordplay-endings {
  display: grid;
  overflow: hidden;
  padding: 0.16em 0.05em 0.16em 0;
  margin-block: -0.16em;
}
.wordplay-ending {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.3em);
  transition:
    transform 520ms var(--ease),
    opacity 300ms ease-out;
}
.wordplay-ending.is-active {
  opacity: 1;
  transform: translateY(0);
}
.wordplay-ending.has-passed {
  transform: translateY(-0.3em);
  transition-duration: 320ms, 220ms;
}
.kinetic-resolution {
  display: flex;
  align-items: center;
  gap: 30px;
}
.kinetic-labs {
  display: block;
  font-weight: 450;
  transition:
    transform 600ms var(--ease),
    opacity 400ms ease-out;
}
.kinetic-mark {
  width: 42px;
  height: 44px;
  margin-top: 0.17em;
  color: var(--red);
  transition:
    transform 560ms var(--ease) 100ms,
    opacity 400ms ease-out 100ms;
}
.kinetic-description {
  position: absolute;
  right: 0;
  bottom: 65px;
  max-width: 288px;
}
.kinetic-label {
  max-width: 220px;
  color: var(--red);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.kinetic-description > p:last-child {
  color: var(--muted);
  font-size: 19px;
  line-height: 1.55;
}
.kinetic-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.kinetic-footer > a {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 44px;
}
.kinetic-about {
  color: var(--muted);
}
.kinetic-about:hover {
  color: var(--red);
}
.kinetic-scroll-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--red);
  transition: transform 220ms var(--ease);
}
.kinetic-scroll:hover .kinetic-scroll-icon {
  transform: translateY(3px);
}
.kinetic-hero.is-playing .wordplay-root {
  color: var(--ink);
}
.kinetic-hero.is-playing .kinetic-labs {
  opacity: 0;
  transform: translateY(0.15em);
}
.kinetic-hero.is-playing .kinetic-mark {
  opacity: 0;
  transform: translateX(-8px) rotate(-8deg);
}
.kinetic-hero.is-setting-up * {
  transition: none;
}
@media (max-width: 1100px) {
  .kinetic-description {
    max-width: 245px;
  }
}
@media (max-width: 800px) {
  .kinetic-hero {
    min-height: calc(100svh - 82px);
    padding-top: 20px;
  }
  .kinetic-title {
    font-size: clamp(78px, 13vw, 110px);
  }
  .kinetic-description {
    max-width: 230px;
    bottom: 58px;
  }
  .kinetic-description > p:last-child {
    font-size: 18px;
  }
  .kinetic-mark {
    width: 32px;
    height: 34px;
  }
  .kinetic-resolution {
    gap: 22px;
  }
}
@media (max-width: 620px) {
  .kinetic-hero {
    padding-top: 15px;
    padding-bottom: 14px;
  }
  .kinetic-kicker {
    gap: 10px;
    font-size: 12px;
  }
  .kinetic-kicker p {
    max-width: 195px;
    gap: 9px;
  }
  .intro-skip {
    font-size: 12px;
    padding-left: 4px;
  }
  .intro-skip span {
    margin-left: 5px;
  }
  .kinetic-stage {
    padding-block: 44px 38px;
  }
  .kinetic-title {
    font-size: clamp(62px, 15.4vw, 95px);
    line-height: 1.08;
  }
  .kinetic-resolution {
    gap: 20px;
  }
  .kinetic-mark {
    width: 26px;
    height: 28px;
  }
  .kinetic-description {
    position: static;
    margin-top: 32px;
    max-width: 285px;
  }
  .kinetic-label {
    max-width: none;
    font-size: 13px;
    margin-bottom: 11px;
  }
  .kinetic-description > p:last-child {
    font-size: 18px;
  }
  .kinetic-footer {
    gap: 16px;
    padding-top: 10px;
    font-size: 13px;
  }
  .kinetic-footer > a {
    gap: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kinetic-hero *,
  .kinetic-hero *::before,
  .kinetic-hero *::after {
    transition: none;
    animation: none;
  }
  .kinetic-scroll:hover .kinetic-scroll-icon,
  .intro-skip:hover span {
    transform: none;
  }
}