@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --black: #000;
  --white: #fff;
  --muted-dark: rgba(255, 255, 255, 0.64);
  --muted-light: rgba(0, 0, 0, 0.64);
  --stage-max-width: 90rem;
  --stage-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --stage-width: min(calc(100vw - (2 * var(--stage-gutter))), var(--stage-max-width));
  --stage-height: min(100vh, calc(var(--stage-width) * 0.707));
  --text-column-width: clamp(16rem, 20cqw, 18rem);
  --visual-column-width: calc(100cqw - var(--text-column-width));
  --section-heading-weight: 500;
  --hero-title-opacity: 1;
  --hero-title-y: 0px;
}

@supports (height: 100svh) {
  :root {
    --stage-height: min(100svh, calc(var(--stage-width) * 0.707));
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  min-width: 20rem;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.35;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
}

a {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.3rem;
}

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

.theme-dark {
  color: var(--white);
  background: var(--black);
}

.theme-light {
  color: var(--black);
  background: var(--white);
}

.scroll-section {
  position: relative;
  min-height: 280vh;
  min-height: 280svh;
}

@media (min-width: 48.001rem) {
  .scroll-section[data-motion-section="section01"] {
    min-height: calc(100vh + min(80vh, 45rem));
    min-height: calc(100svh + min(80svh, 45rem));
  }

  .scroll-section[data-motion-section="section02"] {
    min-height: calc(100vh + min(85vh, 48rem));
    min-height: calc(100svh + min(85svh, 48rem));
  }

  .scroll-section[data-motion-section="section03"] {
    min-height: 200vh;
    min-height: 200svh;
  }
}

.sticky-viewport {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: inherit;
}

.centered-stage {
  position: relative;
  width: var(--stage-width);
  height: var(--stage-height);
  margin-inline: auto;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: inherit;
  container-type: size;
}

.centered-stage--hero,
.centered-stage--structure,
.centered-stage--composition {
  height: 100vh;
  height: 100svh;
}

.centered-stage--composition {
  overflow: visible;
}

.hero-visual,
.section-02-visuals,
.section-03-visuals,
.section-02-clip,
.section-03-lane {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-visual,
.section-02-visuals,
.section-03-visuals {
  z-index: 0;
  overflow: hidden;
}

.hero-symbol,
.section-02-object,
.section-03-object {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  height: auto;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
}

.hero-symbol {
  width: min(122cqw, calc(142cqh * 1.414));
  transform-origin: 67.4% 40%;
}

.hero-identity {
  position: absolute;
  z-index: 3;
  right: 4cqw;
  bottom: 20cqh;
  width: clamp(8rem, 14cqw, 13.5rem);
  text-align: right;
}

.a01-wordmark {
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-kerning: normal;
  letter-spacing: 0.035em;
}

.hero-wordmark {
  margin: 0;
  font-size: clamp(3.6rem, 7.8cqw, 6.5rem);
  line-height: 0.82;
  opacity: var(--hero-title-opacity);
  transform: translate3d(0, var(--hero-title-y), 0);
  will-change: transform, opacity;
}

.is-enhanced {
  --hero-title-opacity: 0;
  --hero-title-y: 1.25rem;
}

.section-02-clip {
  overflow: hidden;
  contain: none;
}

.section-02-upper-clip {
  clip-path: inset(0 20% 28% 0);
}

.section-02-lower-clip {
  clip-path: inset(28% 20% 0 0);
}

.section-02-object {
  width: clamp(66rem, 116cqw, 104.4rem);
}

.section-03-lane {
  overflow: visible;
  contain: none;
}

.section-03-visuals {
  overflow: visible;
}

.section-03-upper-lane {
  clip-path: none;
}

.section-03-lower-lane {
  clip-path: none;
}

.section-03-object {
  width: min(92cqw, 82.8rem);
}

.section-copy {
  position: absolute;
  z-index: 3;
  width: var(--text-column-width);
  pointer-events: none;
}

.section-copy--structure {
  top: 55%;
  right: 3cqw;
  transform: translateY(-50%);
}

.section-copy--composition {
  top: 50%;
  left: 3cqw;
  width: clamp(16rem, 22cqw, 20rem);
  transform: translateY(-50%);
}

.section-eyebrow,
.section-body,
h2 {
  will-change: opacity, transform;
}

.section-copy [data-copy-part] {
  opacity: 1;
  transform: none;
}

.is-enhanced .section-copy [data-copy-part="eyebrow"] {
  opacity: var(--eyebrow-opacity, 0);
  transform: translate3d(0, var(--eyebrow-y, 0.85rem), 0);
}

.is-enhanced .section-copy [data-copy-part="heading"] {
  opacity: var(--heading-opacity, 0);
  transform: translate3d(0, var(--heading-y, 0.85rem), 0);
}

.is-enhanced .section-copy [data-copy-part="body"] {
  opacity: var(--body-opacity, 0);
  transform: translate3d(0, var(--body-y, 0.85rem), 0);
}

.section-eyebrow {
  margin: 0 0 0.8rem;
  font-size: clamp(0.65rem, 0.72cqw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.14em;
}

h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.5rem, 4.8cqw, 5rem);
  font-weight: var(--section-heading-weight);
  letter-spacing: -0.05em;
  line-height: 0.94;
}

.section-body {
  max-width: 32rem;
  margin: 1.05rem 0 0;
  font-size: clamp(0.9rem, 1.05cqw, 1.1rem);
  line-height: 1.5;
}

.theme-dark .section-eyebrow,
.theme-dark .section-body {
  color: var(--muted-dark);
}

.theme-light .section-eyebrow,
.theme-light .section-body {
  color: var(--muted-light);
}

.final-form {
  position: relative;
  padding: clamp(3.5rem, 7vh, 5.5rem) var(--stage-gutter);
  overflow: hidden;
}

.centered-stage--final-form {
  width: min(100%, var(--stage-max-width));
  height: auto;
  overflow: visible;
  container-type: inline-size;
}

.final-form__layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.35fr) minmax(0, 1fr);
  gap: clamp(2.75rem, 5cqw, 5rem);
  align-items: center;
}

.final-form__copy h2 {
  max-width: 8ch;
}

.final-form__media {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #eceae6;
}

.final-form__media video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #eceae6;
}

.project-footer {
  padding: clamp(4rem, 8vw, 8rem) var(--stage-gutter) 1.5rem;
  color: var(--white);
  background: var(--black);
}

.footer-stage {
  width: min(100%, var(--stage-max-width));
  margin-inline: auto;
}

.project-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.75fr 1.2fr 0.85fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
}

.project-footer p,
.project-footer ul {
  margin: 0;
}

.project-footer ul {
  padding: 0;
  list-style: none;
}

.footer-brand {
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 500;
  line-height: 0.85;
}

.footer-subtitle {
  margin-top: 0.8rem !important;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-description {
  max-width: 25rem;
  margin-top: 2rem !important;
  color: var(--muted-dark);
}

.project-footer li + li {
  margin-top: 0.7rem;
}

.project-footer a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

.project-footer__nav a {
  text-decoration: none;
}

.project-footer__nav a:hover,
.project-footer__nav a:focus-visible,
.footer-download:hover,
.footer-download:focus-visible {
  text-decoration: underline;
}

.footer-download {
  display: inline-block;
}

.project-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(4rem, 8vw, 8rem);
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--muted-dark);
  font-size: 0.75rem;
}

@media (max-width: 64rem) {
  :root {
    --stage-gutter: clamp(1.5rem, 3vw, 2.5rem);
    --text-column-width: clamp(15rem, 24cqw, 18rem);
  }

  .section-02-object {
    width: min(106cqw, 80rem);
  }

  .section-03-object {
    width: min(84cqw, 63rem);
  }

  .final-form__layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .final-form__copy {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 2rem;
    align-items: end;
  }

  .final-form__copy .section-eyebrow {
    grid-column: 1 / -1;
  }

  .final-form__copy .section-body {
    margin: 0;
  }

  .project-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64.001rem) and (max-width: 90rem) {
  .section-02-object {
    width: min(92cqw, 72rem);
  }
}

@media (min-width: 121rem) {
  .section-03-object {
    width: min(100cqw, 90rem);
  }
}

@media (max-width: 48rem) {
  :root {
    --stage-gutter: clamp(1rem, 4vw, 1.5rem);
    --stage-width: 100vw;
    --stage-height: 100vh;
    --text-column-width: min(22rem, calc(100cqw - 2rem));
  }

  @supports (height: 100svh) {
    :root {
      --stage-height: 100svh;
    }
  }

  .scroll-section {
    min-height: 210vh;
    min-height: 210svh;
  }

  .scroll-section[data-motion-section="section03"] {
    min-height: 200vh;
    min-height: 200svh;
  }

  .centered-stage--hero,
  .centered-stage--structure,
  .centered-stage--composition {
    width: 100vw;
    max-width: none;
    overflow: visible;
  }

  .hero-visual,
  .section-02-visuals,
  .section-02-clip {
    overflow: visible;
  }

  .hero-symbol {
    width: min(208cqw, calc(140cqh * 1.414));
  }

  .hero-identity {
    right: 1.25rem;
    bottom: 19cqh;
    width: 7.8rem;
  }

  .hero-wordmark {
    font-size: 3.7rem;
  }

  .section-02-visuals,
  .section-03-visuals {
    inset: clamp(0.5rem, 2cqh, 1.25rem) 0 auto;
    height: 72cqh;
  }

  .section-02-object {
    width: min(168cqw, 86cqh);
  }

  .section-02-upper-clip {
    clip-path: none;
  }

  .section-02-lower-clip {
    clip-path: none;
  }

  .section-03-object {
    width: min(118cqw, 72cqh);
  }

  .section-copy--structure {
    top: auto;
    right: auto;
    bottom: clamp(1.5rem, 5cqh, 3rem);
    left: 50%;
    width: min(22rem, calc(100cqw - 2rem));
    margin: 0;
    padding-top: 0;
    transform: translateX(-50%);
    background: none;
  }

  .section-copy--composition {
    top: auto;
    right: auto;
    bottom: clamp(2rem, 6.5cqh, 3.5rem);
    left: 50%;
    width: min(22rem, calc(100cqw - 2rem));
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    background: none;
  }

  h2 {
    font-size: clamp(2.35rem, 11cqw, 3.5rem);
  }

  .final-form {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .final-form__layout,
  .final-form__copy {
    display: block;
  }

  .final-form__media {
    margin-top: 2.5rem;
  }

  .final-form__copy .section-body {
    margin-top: 1rem;
  }

  .project-footer__grid {
    grid-template-columns: 1fr;
  }

  .project-footer__bottom {
    display: block;
  }

  .project-footer__bottom p + p {
    margin-top: 0.55rem;
  }
}

/* Portrait phones use an editorial composition independent of the desktop stage. */
@media (max-width: 48rem) and (orientation: portrait) {
  .hero-symbol {
    width: min(122cqw, calc(92cqh * 1.414));
  }

  .hero-identity {
    right: 1.625rem;
    bottom: 32cqh;
    width: 5rem;
  }

  .hero-wordmark {
    font-size: 2rem;
  }

  .section-02-visuals,
  .section-03-visuals {
    inset: 0;
    height: 100cqh;
  }

  .section-02-object {
    width: min(132cqw, 68cqh);
  }

  .section-copy--structure,
  .section-copy--composition {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 8cqw;
    width: min(22rem, calc(100cqw - 4rem));
    transform: translateY(-50%);
  }

  h2 {
    font-size: clamp(1.9rem, 8cqw, 2.5rem);
  }

  .section-body {
    font-size: clamp(0.72rem, 3cqw, 0.85rem);
  }
}

@media (max-width: 60rem) and (max-height: 36rem) and (orientation: landscape) {
  :root {
    --stage-width: min(calc(100vw - (2 * var(--stage-gutter))), 60rem);
  }

  .scroll-section {
    min-height: 190vh;
    min-height: 190svh;
  }

  .scroll-section[data-motion-section="section03"] {
    min-height: 200vh;
    min-height: 200svh;
  }

  .centered-stage--structure,
  .centered-stage--composition {
    max-width: 60rem;
  }

  .section-02-visuals,
  .section-03-visuals {
    inset: 0 39% 0 0;
    width: auto;
    height: auto;
  }

  .section-02-object {
    width: min(88cqw, 132cqh);
  }

  .section-02-upper-clip,
  .section-02-lower-clip {
    clip-path: none;
  }

  .section-03-object {
    width: min(58cqw, 104cqh);
  }

  .section-copy--structure,
  .section-copy--composition {
    top: 50%;
    right: 1.25rem;
    bottom: auto;
    left: auto;
    width: min(17rem, 34%);
    margin: 0;
    transform: translateY(-50%);
  }

  h2 {
    font-size: clamp(2.1rem, 5.5cqw, 3.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-section {
    min-height: 100vh;
    min-height: 100svh;
  }

  .scroll-section[data-motion-section="section03"] {
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero-symbol,
  .section-02-object,
  .section-03-object,
  .hero-wordmark,
  .section-copy [data-copy-part] {
    will-change: auto;
  }
}