:root {
  --studio-ink: #111114;
  --studio-muted: #67676f;
  --studio-paper: #f7f6f3;
  --studio-line: rgba(17, 17, 20, .12);
  --studio-blue: #5267ff;
}

body:has(.studio) {
  overflow-x: hidden;
  color: var(--studio-ink);
  background: var(--studio-paper) !important;
}

body:has(.studio) > .studio-shell {
  max-width: none;
  padding: 0;
}

body:has(.studio) .navbar {
  border-bottom: 1px solid rgba(17, 17, 20, .07);
  background: rgba(247, 246, 243, .78) !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

body:has(.studio) footer { display: none; }

.studio {
  --page-gutter: max(24px, calc((100vw - 1240px) / 2));
  margin-top: -1px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

.studio a { color: inherit; }

.studio-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: calc(100vh - 4.9rem);
  align-items: center;
  padding: 9rem var(--page-gutter) 7rem;
}

.studio-hero::before {
  position: absolute;
  z-index: -3;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 75% 38%, rgba(255,255,255,.88), transparent 24%),
    linear-gradient(145deg, #f7f6f3 15%, #e9e9ff 55%, #ffe8dd 100%);
}

.studio-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: .16;
  background:
    repeating-radial-gradient(circle at 12% 22%, rgba(255,255,255,.5) 0 1px, transparent 1px 5px);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.studio-orb {
  position: absolute;
  z-index: -2;
  border-radius: 50%;
  opacity: .72;
  filter: blur(3px);
  animation: studio-drift 12s ease-in-out infinite alternate;
}

.studio-orb-one {
  top: 12%;
  right: 4vw;
  width: min(43vw, 660px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 28%, #fff 0 6%, #b8c1ff 30%, #815cff 62%, transparent 72%);
}

.studio-orb-two {
  right: 27vw;
  bottom: -12%;
  width: min(28vw, 420px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 40% 35%, #fff4e8, #ff9b71 44%, transparent 72%);
  animation-delay: -5s;
}

.studio-hero-copy { width: min(920px, 80vw); }

.studio-eyebrow,
.studio-kicker {
  margin: 0 0 1.25rem;
  color: var(--studio-muted);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.studio-hero h1 {
  margin: 0;
  font-size: clamp(3.6rem, 8.2vw, 8.6rem);
  font-weight: 650;
  letter-spacing: -.075em;
  line-height: .93;
}

.studio-hero h1 span {
  color: transparent;
  background: linear-gradient(90deg, #3c4cc8, #9056d9 50%, #dd623d);
  background-clip: text;
  -webkit-background-clip: text;
}

.studio-lede {
  width: min(680px, 100%);
  margin: 2.4rem 0 0;
  color: #404048;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  letter-spacing: -.02em;
  line-height: 1.5;
}

.studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2.2rem;
}

.studio-button {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.2rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  transition: transform .25s ease, background .25s ease;
}

.studio-button:hover {
  color: inherit;
  text-decoration: none;
  transform: translateY(-2px);
}

.studio-button-primary {
  color: #fff !important;
  background: #151519;
}

.studio-button-quiet {
  border: 1px solid rgba(17,17,20,.18);
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
}

.studio-scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: var(--page-gutter);
  display: flex;
  align-items: center;
  gap: .7rem;
  color: rgba(17,17,20,.55);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.studio-scroll-cue span {
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
}

.studio-section { padding: clamp(7rem, 13vw, 12rem) var(--page-gutter); }

.studio-statement {
  color: #f5f4f0;
  background: #111114;
}

.studio-statement .studio-kicker,
.studio-finale .studio-kicker { color: #9d9da6; }

.studio-manifesto {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(2.5rem, 5.5vw, 5.8rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1.03;
}

.studio-manifesto em {
  color: #b8a6ff;
  font-family: Georgia, serif;
  font-weight: 400;
}

.studio-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(5rem, 10vw, 9rem);
  background: rgba(255,255,255,.14);
}

.studio-pillar {
  padding: 2.2rem 2rem 1rem 0;
  background: #111114;
}

.studio-pillar + .studio-pillar { padding-left: 2rem; }
.studio-pillar span { color: #777780; font-size: .72rem; }

.studio-pillar h2 {
  margin: 2rem 0 .8rem;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -.04em;
}

.studio-pillar p {
  max-width: 330px;
  color: #aaaab2;
  line-height: 1.55;
}

.studio-work { background: var(--studio-paper); }

.studio-section-heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 2rem;
  margin-bottom: 4rem;
}

.studio-section-heading .studio-kicker {
  grid-column: 1 / -1;
  margin-bottom: -.5rem;
}

.studio-section-heading h2 {
  margin: 0;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: .95;
}

.studio-section-heading > p:last-child {
  max-width: 470px;
  margin: 0 0 .4rem auto;
  color: var(--studio-muted);
  font-size: 1.1rem;
  line-height: 1.55;
}

.studio-paper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5rem 1.4rem;
}

.studio-paper-visual {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  background: #10131a;
  box-shadow: 0 12px 40px rgba(30,25,48,.10);
  transition: transform .35s ease, box-shadow .35s ease;
}

.studio-paper:hover .studio-paper-visual {
  transform: translateY(-3px);
  box-shadow: 0 22px 58px rgba(30,25,48,.16);
}

.studio-paper-year,
.studio-paper-arrow {
  position: absolute;
  z-index: 2;
  top: 1.1rem;
  display: grid;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: #fff;
  background: rgba(15,15,18,.28);
  backdrop-filter: blur(12px);
}

.studio-paper-year { left: 1.1rem; padding: 0 .8rem; font-size: .75rem; }
.studio-paper-arrow { right: 1.1rem; width: 34px; }
.studio-paper-copy { padding: 1.35rem .2rem 0; }

.studio-paper-meta {
  min-height: 1.2em;
  margin: 0 0 .6rem;
  color: var(--studio-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.studio-paper-copy h3 {
  margin: 0;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.16;
}

.studio-paper-copy > p:not(.studio-paper-meta) {
  margin: .85rem 0 0;
  color: var(--studio-muted);
  line-height: 1.5;
}

.studio-paper-links,
.studio-profile-links {
  display: flex;
  gap: 1.1rem;
  margin-top: 1rem;
}

.studio-paper-links a,
.studio-profile-links a {
  border-bottom: 1px solid var(--studio-line);
  font-size: .84rem;
  font-weight: 650;
}

.studio-paper-links a:hover,
.studio-profile-links a:hover {
  color: var(--studio-blue);
  text-decoration: none;
}

.studio-all-work { margin-top: 5rem; text-align: center; }

.studio-all-work a {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--studio-line);
  border-radius: 999px;
  font-weight: 650;
}

.studio-all-work a:hover {
  color: #fff;
  background: var(--studio-ink);
  text-decoration: none;
}

.studio-about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 9rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(104, 87, 255, .17), transparent 28%),
    radial-gradient(circle at 90% 84%, rgba(255, 126, 77, .15), transparent 31%),
    #ebe9e4;
}

.studio-about-mark {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 360px);
  aspect-ratio: 1;
  align-content: center;
  border: 1px solid rgba(17, 17, 20, .13);
  border-radius: 28px;
  background: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px rgba(255,255,255,.7), 0 30px 80px rgba(29,25,50,.08);
  backdrop-filter: blur(18px);
}

.studio-about-mark::after {
  position: absolute;
  right: 9%;
  bottom: 10%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  opacity: .75;
  background: linear-gradient(135deg, #6f6bff, #ff815d);
  filter: blur(24px);
}

.studio-about-mark span {
  position: relative;
  z-index: 1;
  color: transparent;
  background: linear-gradient(145deg, #151519 25%, #6d63dc 65%, #d76d50);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: clamp(6rem, 11vw, 10rem);
  font-weight: 720;
  letter-spacing: -.13em;
  line-height: .75;
  text-align: center;
}

.studio-about-mark p {
  position: absolute;
  bottom: 1.1rem;
  left: 1.3rem;
  z-index: 1;
  margin: 0;
  color: #686870;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.studio-about-copy h2 {
  max-width: 850px;
  margin: 0 0 2.4rem;
  font-size: clamp(3rem, 5.5vw, 6rem);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: .96;
}

.studio-about-copy h2 em {
  color: #695fd0;
  font-family: Georgia, serif;
  font-weight: 400;
}

.studio-bio-source {
  max-width: 820px;
  color: #4e4e56;
  font-size: clamp(1.03rem, 1.5vw, 1.25rem);
  line-height: 1.7;
}

.studio-bio-source p { margin: 1.35rem 0 0; }
.studio-bio-source p:empty { display: none; }
.studio-bio-source strong { color: var(--studio-ink); }
.studio-bio-source a { border-bottom: 1px solid rgba(17,17,20,.2); }
.studio-bio-source a:hover { color: var(--studio-blue); text-decoration: none; }
.studio-profile-links { margin-top: 2rem; }

.studio-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2rem, 5vw, 5rem);
  border-top: 1px solid rgba(17,17,20,.14);
  border-bottom: 1px solid rgba(17,17,20,.14);
}

.studio-facts div {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.5rem 0;
}

.studio-facts div + div {
  padding-left: 2rem;
  border-left: 1px solid rgba(17,17,20,.14);
}

.studio-facts span {
  color: #77777f;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.studio-facts strong {
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  letter-spacing: -.03em;
}
.studio-finale {
  display: grid;
  min-height: 78vh;
  place-items: center;
  padding: 8rem var(--page-gutter);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 20% 90%, rgba(255,111,71,.7), transparent 35%),
    radial-gradient(circle at 85% 10%, rgba(111,89,255,.8), transparent 40%),
    #111114;
}

.studio-finale h2 {
  margin: 0;
  font-size: clamp(3.2rem, 7vw, 7.2rem);
  font-weight: 620;
  letter-spacing: -.07em;
  line-height: .96;
}

.studio-finale a {
  display: inline-flex;
  gap: .7rem;
  margin-top: 2.5rem;
  padding: 1rem 1.4rem;
  border-radius: 999px;
  color: #111114;
  background: #fff;
  font-weight: 650;
  transition: transform .25s ease;
}

.studio-finale a:hover {
  color: #111114;
  text-decoration: none;
  transform: translateY(-2px);
}

.studio-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}

.studio-reveal.is-visible { opacity: 1; transform: none; }

@keyframes studio-drift {
  from { transform: translate3d(-2%, -2%, 0) scale(.96); }
  to { transform: translate3d(3%, 4%, 0) scale(1.05); }
}

@media (max-width: 767px) {
  .studio { --page-gutter: 22px; }
  .studio-hero { min-height: calc(100svh - 4.9rem); padding-top: 7rem; }
  .studio-hero-copy { width: 100%; }
  .studio-hero h1 { font-size: clamp(3.35rem, 16vw, 5.3rem); }
  .studio-orb-one { top: 20%; right: -38vw; width: 90vw; }
  .studio-orb-two { right: 25vw; width: 55vw; }

  .studio-pillars,
  .studio-section-heading,
  .studio-paper-grid,
  .studio-about { grid-template-columns: 1fr; }

  .studio-pillars { gap: 0; background: none; }

  .studio-pillar,
  .studio-pillar + .studio-pillar {
    padding: 2rem 0;
    border-top: 1px solid rgba(255,255,255,.14);
  }

  .studio-section-heading > p:last-child { margin-left: 0; }
  .studio-paper-grid { gap: 4rem; }
  .studio-paper-visual { border-radius: 14px; }
  .studio-about { gap: 4rem; }
  .studio-about-mark { width: min(82vw, 340px); }
  .studio-facts { grid-template-columns: 1fr; }
  .studio-facts div + div { padding-left: 0; border-top: 1px solid rgba(17,17,20,.14); border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .studio *,
  .studio *::before,
  .studio *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}
/* Home and Studio intentionally use the same research-demo component. */
.studio-paper-visual {
  height: 226px;
  aspect-ratio: auto;
}

.studio-paper-visual .research-demo { height: 100%; }

@media (max-width: 460px) {
  .studio-paper-visual { height: 210px; }
}