:root {
  --ink: #212121;
  --paper: #edece8;
  --surface: #f3f3f3;
  --surface-soft: #f7f6f3;
  --white: #fff;
  --red: #c32d30;
  --muted: #7f7a76;
  --radius: 18px;
  --media-radius: 10px;
  --page-inset: clamp(16px, 2.35vw, 30px);
  --header-content-inset: clamp(24px, 3.9vw, 50px);
  --section-space: clamp(104px, 11vw, 176px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  color: var(--ink);
  background: var(--paper);
  font-family: Everyday, "KP Spatial Trial", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  scroll-behavior: auto;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
}

body.is-menu-open { overflow: hidden; }

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

a,
button { color: inherit; font: inherit; }

.studio-nav-shell {
  position: fixed;
  top: var(--page-inset);
  right: var(--page-inset);
  left: var(--page-inset);
  z-index: 30;
  height: 90px;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: height 720ms var(--ease-out), background-color 320ms ease;
}

.studio-nav-shell:hover,
.studio-nav-shell.is-menu-open { background: var(--white); }

.studio-nav-shell.is-menu-open { height: min(50svh, 540px); }

.studio-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  height: 90px;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--header-content-inset);
}

.studio-header__logo,
.studio-header__logo img { display: block; }

.studio-header__logo img { width: auto; height: 24px; }

.studio-menu-button {
  position: relative;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  place-items: center;
}

.studio-menu-button span {
  position: absolute;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 320ms var(--ease-out), opacity 180ms ease;
}

.studio-menu-button span:first-child { transform: translateY(-5px); }
.studio-menu-button span:last-child { transform: translateY(5px); }
.studio-nav-shell.is-menu-open .studio-menu-button span:first-child { transform: rotate(45deg); }
.studio-nav-shell.is-menu-open .studio-menu-button span:nth-child(2) { opacity: 0; }
.studio-nav-shell.is-menu-open .studio-menu-button span:last-child { transform: rotate(-45deg); }

.studio-menu {
  position: absolute;
  inset: 90px var(--header-content-inset) 30px;
  display: grid;
  visibility: hidden;
  pointer-events: none;
  grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr);
  gap: clamp(64px, 8vw, 144px);
}

.studio-nav-shell.is-menu-open .studio-menu { visibility: visible; pointer-events: auto; }
.studio-menu nav { display: flex; align-items: flex-start; flex-direction: column; }

.studio-menu__item {
  opacity: 0;
  transform: translate3d(-12px, -10px, 0);
  transition: color 220ms ease, opacity 360ms ease, transform 620ms var(--ease-out);
}

.studio-nav-shell.is-menu-open .studio-menu__item {
  opacity: 1;
  transform: none;
  transition-delay: calc(180ms + var(--order) * 62ms);
}

.studio-menu nav a {
  font-size: clamp(1.75rem, 2.6vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  text-decoration: none;
}

.studio-menu nav a:hover,
.studio-menu nav a[aria-current="page"] { color: var(--red); }

.studio-menu__context {
  padding-left: clamp(24px, 2.5vw, 40px);
  border-left: 1px solid rgba(33, 33, 33, .14);
}

.studio-menu__context span {
  display: block;
  margin-bottom: 1.2rem;
  color: var(--muted);
  font-size: .6875rem;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.studio-menu__context strong { display: block; font-size: 1.1rem; font-weight: 400; }
.studio-menu__context p { max-width: 20rem; margin: .5rem 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.4; }

.studio-menu-button:focus-visible,
.studio-header__logo:focus-visible,
.studio-menu a:focus-visible,
.studio-video-card__media:focus-visible,
.studio-closing a:focus-visible {
  outline: 3px solid #1f73e0;
  outline-offset: 3px;
}

.studio-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  clip-path: inset(0 round 0);
  background: #151416;
  will-change: clip-path;
}

.studio-hero__video,
.studio-hero__wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.studio-hero__video { object-fit: cover; object-position: center; transform: scale(1.002); }

.studio-hero__wash {
  background:
    linear-gradient(180deg, rgba(5, 5, 7, .15), rgba(5, 5, 7, .22) 50%, rgba(5, 5, 7, .58)),
    linear-gradient(90deg, rgba(5, 5, 7, .22), transparent 62%);
  pointer-events: none;
}

.studio-hero__copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px 32px 48px;
  color: var(--white);
  flex-direction: column;
  text-align: center;
}

.studio-hero__copy h1 {
  margin: 0;
  font-size: clamp(1.75rem, 2.3vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.studio-hero__copy p {
  margin: .85rem 0 0;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.studio-introduction {
  width: min(52rem, calc(100% - 48px));
  margin: 0 auto;
  padding: var(--section-space) 0;
  text-align: center;
}

.studio-introduction h2,
.studio-kicker {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.studio-introduction__lead {
  margin: 0;
  font-size: clamp(1.35rem, 2.15vw, 2rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.035em;
}

.studio-introduction__body {
  width: min(40rem, 100%);
  margin: 2.25rem auto 0;
  color: #5f5b57;
  font-size: .9375rem;
  line-height: 1.55;
}

.studio-section { position: relative; }

.studio-founders { padding: 0 var(--page-inset); }

.studio-founders__panel {
  display: grid;
  width: min(90rem, 100%);
  min-height: clamp(650px, 52vw, 780px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.studio-founders__media { position: relative; min-height: 100%; margin: 0; overflow: hidden; }

.studio-founders__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.studio-founders__copy {
  display: flex;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px);
  flex-direction: column;
}

.studio-founders__copy h2,
.studio-value__copy h2,
.studio-section-heading h2 {
  margin: 0;
  font-size: clamp(1.25rem, 1.55vw, 1.5rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.025em;
}

.studio-founders__copy > p:not(.studio-kicker),
.studio-value__copy p {
  margin: 1.25rem 0 0;
  color: #5f5b57;
  font-size: .875rem;
  line-height: 1.55;
}

.studio-values {
  display: grid;
  width: min(90rem, calc(100% - 2 * var(--page-inset)));
  margin: var(--section-space) auto 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.35vw, 30px);
}

.studio-value {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.studio-value__media { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; }

.studio-value__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-value:nth-child(2) .studio-value__media img { object-position: center 30%; }

.studio-value__copy { padding: clamp(36px, 4vw, 58px); }

.studio-team {
  width: min(90rem, calc(100% - 2 * var(--page-inset)));
  margin: var(--section-space) auto 0;
  padding: clamp(56px, 7vw, 96px);
  border-radius: var(--radius);
  background: var(--surface);
}

.studio-section-heading { width: min(38rem, 100%); margin: 0 auto clamp(48px, 6vw, 80px); text-align: center; }

.studio-section-heading p {
  margin: .9rem 0 0;
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.4;
}

.studio-team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 40px);
}

.studio-video-card { min-width: 0; }

.studio-video-card__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--media-radius);
  background: #171618;
  cursor: pointer;
}

.studio-video-card__media img,
.studio-video-card__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.studio-video-card__media img {
  opacity: .88;
  transform: scale(1.002);
  transition: opacity 420ms ease, transform 900ms var(--ease-out);
}

.studio-video-card__media:hover img,
.studio-video-card__media:focus-visible img { opacity: 1; transform: scale(1.035); }

.studio-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--white);
  background: var(--red);
  transform: translate(-50%, -50%);
  place-items: center;
}

.studio-video-card__play span {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.studio-video-card__copy { padding: 24px 2px 0; }

.studio-video-card__copy h3 {
  margin: 0;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
}

.studio-video-card__role {
  margin: .5rem 0 0 !important;
  color: var(--muted) !important;
  font-size: .625rem !important;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.studio-video-card__copy > p:last-child {
  margin: .9rem 0 0;
  color: #5f5b57;
  font-size: .75rem;
  line-height: 1.45;
}

.studio-awards {
  width: min(90rem, calc(100% - 2 * var(--page-inset)));
  margin: var(--section-space) auto 0;
}

.studio-awards__grid {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
}

.studio-awards__grid li {
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--media-radius);
  background: var(--surface-soft);
  place-items: center;
}

.studio-awards__grid img { width: 88%; height: 88%; object-fit: contain; }

.studio-closing {
  width: min(90rem, calc(100% - 2 * var(--page-inset)));
  margin: var(--section-space) auto;
}

.studio-closing a {
  position: relative;
  display: block;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--white);
  background: #19181a;
  text-decoration: none;
}

.studio-closing img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .8;
  object-fit: cover;
  transform: scale(1.002);
  transition: opacity 420ms ease, transform 1100ms var(--ease-out);
}

.studio-closing a::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .58));
}

.studio-closing a > span {
  position: absolute;
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(24px, 4vw, 48px);
  left: clamp(24px, 4vw, 56px);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 400;
}

.studio-closing i { font-style: normal; }
.studio-closing a:hover img,
.studio-closing a:focus-visible img { opacity: .92; transform: scale(1.025); }

.studio-motion-ready [data-scroll-reveal] {
  --scroll-reveal: 0;
  transition: none;
}

.studio-motion-ready [data-scroll-reveal="text"] {
  color: rgb(33 33 33 / calc(.14 + var(--scroll-reveal) * .86)) !important;
  transform: translate3d(0, calc((1 - var(--scroll-reveal)) * 14px), 0);
  will-change: color, transform;
}

.studio-motion-ready [data-scroll-reveal="element"] {
  opacity: calc(.22 + var(--scroll-reveal) * .78);
  transform: translate3d(0, calc((1 - var(--scroll-reveal)) * 24px), 0);
  will-change: opacity, transform;
}

@media (max-width: 900px) {
  .studio-nav-shell.is-menu-open { height: min(70svh, 560px); }
  .studio-menu { inset: 90px 24px 24px; grid-template-columns: 1fr; gap: 36px; }
  .studio-menu__context { display: none; }

  .studio-founders__panel { min-height: 0; grid-template-columns: 1fr; }
  .studio-founders__media { min-height: auto; aspect-ratio: 4 / 3; }
  .studio-founders__media img { position: absolute; object-position: center 28%; }
  .studio-founders__copy { padding: clamp(42px, 8vw, 72px); }
  .studio-values { grid-template-columns: 1fr; }
  .studio-team__grid { grid-template-columns: 1fr; gap: 52px; }
}

@media (max-width: 700px) {
  .studio-awards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-closing a { min-height: 0; aspect-ratio: 4 / 3; }
}

@media (max-width: 580px) {
  :root { --section-space: 96px; }

  .studio-nav-shell.is-menu-open {
    height: calc(100svh - 2 * var(--page-inset));
    overflow-y: auto;
  }

  .studio-hero__copy { padding-right: 24px; padding-left: 24px; }
  .studio-introduction { width: calc(100% - 40px); text-align: left; }
  .studio-introduction h2 { margin-bottom: 1.5rem; }
  .studio-introduction__body { margin-top: 1.75rem; }
  .studio-founders__media { aspect-ratio: 1 / 1; }
  .studio-founders__copy { padding: 36px 28px 42px; }
  .studio-values { gap: 16px; }
  .studio-value__copy { padding: 32px 26px 38px; }
  .studio-team { padding: 48px 18px; }
  .studio-section-heading { margin-bottom: 40px; }
  .studio-awards__grid { gap: 10px; }
  .studio-closing a { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .studio-nav-shell,
  .studio-menu__item,
  .studio-video-card__media img,
  .studio-closing img,
  [data-scroll-reveal] { transition: none !important; }
  .studio-motion-ready [data-scroll-reveal] {
    --scroll-reveal: 1 !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .studio-motion-ready [data-scroll-reveal="text"] { color: var(--ink) !important; }
  .studio-video-card__media:hover img,
  .studio-video-card__media:focus-visible img,
  .studio-closing a:hover img,
  .studio-closing a:focus-visible img { transform: scale(1.002); }
}