:root {
  --bg: #0d1727;
  --bg-2: #111c2e;
  --nav: #1a263a;
  --panel: #18243a;
  --panel-2: #1d2a42;
  --panel-3: #22314c;
  --text: #f7f8fc;
  --muted: #b9c2d2;
  --soft: #8d9ab0;
  --line: #31435f;
  --line-soft: rgba(98, 129, 174, .32);
  --cyan: #20c8ff;
  --blue: #4167ff;
  --violet: #7a45ff;
  --violet-2: #9d60ff;
  --green: #25d4bc;
  --pink: #ff4f9a;
  --accent: linear-gradient(90deg, #7c3cff 0%, #4d5dff 52%, #19c7ff 100%);
  --accent-soft: linear-gradient(135deg, rgba(124, 60, 255, .22), rgba(32, 200, 255, .10));
  --max: 1320px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 26px 80px rgba(0, 0, 0, .28);
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background: radial-gradient(circle at 15% 18%, rgba(66, 77, 255, .10), transparent 26%), radial-gradient(circle at 84% 44%, rgba(62, 107, 255, .08), transparent 25%), linear-gradient(180deg, #0f192a 0%, #0c1625 100%)
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  opacity: .12;
  background-image: radial-gradient(circle, rgba(79, 120, 255, .85) 1px, transparent 1.2px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, transparent, black 18%, black 82%, transparent)
}

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

a {
  color: inherit;
  text-decoration: none
}

button,
input,
textarea,
select {
  font: inherit
}

.wrap {
  width: min(calc(100% - 72px), var(--max));
  margin-inline: auto
}

.wide {
  width: min(calc(100% - 72px), 1480px);
  margin-inline: auto
}

.skip-link {
  position: absolute;
  left: 20px;
  top: -80px;
  background: #fff;
  color: #111;
  padding: 10px 16px;
  z-index: 1000
}

.skip-link:focus {
  top: 12px
}

.kicker,
.eyebrow,
.section-kicker,
.module-index {
  display: block;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase
}

.text,
.card p,
.panel p,
.lead {
  color: var(--muted)
}

.lead {
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.65
}

.status,
.mini,
.meta {
  font-size: 12px;
  color: #92a0b6
}

.gradient-text {
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.crumb {
  font-size: 13px;
  color: #8998ad;
  margin-bottom: 24px
}

.crumb a:hover {
  color: var(--cyan)
}

/* ambient spheres */
.ambient-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden
}

.ambient-orbs i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #278cff 0%, #0657c7 24%, #051a4c 58%, transparent 73%);
  filter: drop-shadow(0 0 22px rgba(31, 112, 255, .48));
  opacity: .72;
  animation: orb-drift 15s ease-in-out infinite alternate
}

.ambient-orbs i:nth-child(1) {
  width: 64px;
  height: 64px;
  left: 2%;
  top: 49%;
  animation-duration: 17s
}

.ambient-orbs i:nth-child(2) {
  width: 42px;
  height: 42px;
  left: 56%;
  top: 13%;
  animation-duration: 13s;
  animation-delay: -4s
}

.ambient-orbs i:nth-child(3) {
  width: 82px;
  height: 82px;
  right: 1.5%;
  top: 57%;
  animation-duration: 18s;
  animation-delay: -7s
}

.ambient-orbs i:nth-child(4) {
  width: 36px;
  height: 36px;
  left: 49%;
  top: 67%;
  animation-duration: 11s;
  animation-delay: -3s
}

.ambient-orbs i:nth-child(5) {
  width: 54px;
  height: 54px;
  right: 18%;
  bottom: 7%;
  animation-duration: 16s;
  animation-delay: -8s
}

@keyframes orb-drift {
  from {
    transform: translate3d(0, -7px, 0) scale(.92)
  }

  to {
    transform: translate3d(14px, 18px, 0) scale(1.05)
  }
}

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(26, 38, 58, .96);
  border-bottom: 1px solid rgba(123, 148, 191, .10);
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease
}

.site-header.is-scrolled {
  background: rgba(20, 31, 49, .80);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 15px 50px rgba(0, 0, 0, .22)
}

.nav-inner {
  min-height: 88px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 46px
}

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap
}

.brandmark img {
  width: 46px;
  height: 46px;
  object-fit: contain
}

.brandmark span {
  font-size: 21px;
  color: #eaf0ff
}

.brandmark b {
  color: var(--cyan);
  font-weight: 700
}

.navlinks {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 700
}

.navlinks a {
  color: #eef2fb;
  position: relative;
  padding: 31px 0 29px
}

.navlinks a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 20px;
  height: 2px;
  background: var(--accent);
  transition: left .25s ease, right .25s ease
}

.navlinks a:hover::after,
.navlinks a[aria-current=page]::after {
  left: 0;
  right: 0
}

.nav-utility {
  color: #aeb8c9 !important
}

.nav-cta {
  border: 1px solid #435370;
  border-radius: 999px;
  min-width: 166px;
  padding: 12px 20px;
  text-align: center;
  font-weight: 750;
  background: rgba(255, 255, 255, .015);
  transition: border-color .25s, background .25s, transform .25s
}

.nav-cta:hover {
  border-color: #586dff;
  background: rgba(86, 90, 255, .11);
  transform: translateY(-2px)
}

.menu-toggle {
  display: none;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 9px;
  align-items: center;
  gap: 4px
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff
}

.menu-toggle b {
  font-size: 0
}

/* buttons */
.actions,
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px
}

.btn,
.cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 1px solid #445674;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  line-height: 1;
  background: rgba(255, 255, 255, .015);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease
}

.btn:hover,
.cta-pill:hover {
  transform: translateY(-2px);
  border-color: #6578ff;
  box-shadow: 0 13px 32px rgba(43, 65, 200, .24)
}

.btn.primary {
  border-color: transparent;
  background: #d48448;
  box-shadow: 0 15px 34px rgba(75, 63, 255, .25)
}

.btn.primary:hover {
  box-shadow: 0 20px 44px rgba(75, 63, 255, .40)
}

.btn.inverse {
  background: #fff;
  color: #101727;
  border-color: #fff
}

.btn.small {
  min-height: 40px;
  padding: 9px 16px;
  font-size: 13px
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c9d4ff;
  font-size: 14px;
  font-weight: 800
}

.text-link span {
  color: var(--cyan);
  font-size: 18px;
  transition: transform .2s
}

.text-link:hover span {
  transform: translateX(5px)
}

.inverse-link {
  color: #fff
}

/* page hero */
.page-hero {
  padding: 92px 0 68px;
  position: relative
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5%;
  width: 580px;
  height: 250px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(88, 65, 255, .13), transparent 70%);
  pointer-events: none
}

.page-hero h1,
.universe-display {
  position: relative;
  z-index: 1;
  font-size: clamp(52px, 6.3vw, 92px);
  line-height: 1.03;
  letter-spacing: -.05em;
  margin: 6px 0 22px;
  font-weight: 800;
  max-width: 1050px
}

.page-hero h1::selection,
.universe-display::selection {
  background: #5e46ff;
  color: #fff
}

.page-hero .lead {
  max-width: 780px
}

.page-hero .eyebrow,
.page-hero .kicker {
  margin-bottom: 16px
}

/* home hero */
.home-hero {
  min-height: 760px;
  padding: 95px 0 92px;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
  gap: 58px;
  align-items: center;
  position: relative
}

.home-hero::before {
  content: "";
  position: absolute;
  left: -110px;
  top: 95px;
  width: 560px;
  height: 360px;
  background: radial-gradient(circle, rgba(81, 73, 221, .32), transparent 68%);
  filter: blur(12px);
  z-index: -1
}

.home-hero-copy {
  max-width: 690px;
  position: relative;
  z-index: 3
}

.home-hero-copy h1 {
  font-size: clamp(56px, 6.8vw, 98px);
  line-height: .99;
  letter-spacing: -.058em;
  margin: 8px 0 28px;
  font-weight: 820
}

.home-hero-copy h1 span {
  display: block
}

.home-hero-copy h1 .accent-line {
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.home-hero-copy .lead {
  font-size: clamp(18px, 1.75vw, 23px);
  max-width: 650px
}

.home-hero-index {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  color: #93a0b6
}

.signal-label {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  color: #72839b
}

.typed-signal {
  color: #fff;
  font-weight: 750;
  min-width: 130px;
  min-height: 1.8em;
}

.signal-caret {
  width: 1px;
  height: 17px;
  background: var(--cyan);
  animation: caret .85s steps(1) infinite
}

@keyframes caret {
  50% {
    opacity: 0
  }
}

/* hero visual composition */
.portfolio-board {
  position: relative;
  min-height: 610px;
  isolation: isolate;
  --board-x: 0;
  --board-y: 0
}

.portfolio-board::before {
  content: "";
  position: absolute;
  width: 530px;
  height: 530px;
  border-radius: 50%;
  left: 50%;
  top: 47%;
  transform: translate(calc(-50% + var(--board-x)*8px), calc(-50% + var(--board-y)*8px));
  background: radial-gradient(circle at 50% 45%, rgba(77, 81, 214, .40) 0%, rgba(66, 69, 184, .17) 45%, rgba(15, 24, 41, 0) 73%);
  transition: transform .18s ease-out
}

.portfolio-board::after {
  content: "";
  position: absolute;
  inset: 70px 32px 40px 110px;
  background-image: radial-gradient(circle, rgba(59, 115, 255, .30) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at center, black, transparent 73%);
  opacity: .6;
  z-index: -2
}

.portfolio-shot {
  position: absolute;
  margin: 0;
  border: 1px solid rgba(105, 130, 174, .38);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(21, 32, 52, .83);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  transition: transform .25s ease, border-color .25s ease
}

.portfolio-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.portfolio-shot figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(131, 155, 194, .25);
  border-left: 4px solid var(--cyan);
  border-radius: 10px;
  background: rgba(20, 30, 48, .76);
  backdrop-filter: blur(13px);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center
}

.portfolio-shot figcaption strong {
  font-size: 16px
}

.portfolio-shot figcaption span {
  color: #c3cad8;
  font-size: 11px
}

.portfolio-shot-wide {
  width: 72%;
  height: 400px;
  right: 5%;
  top: 90px;
  transform: translate(calc(var(--board-x)*-8px), calc(var(--board-y)*-7px))
}

.portfolio-shot:not(.portfolio-shot-wide):not(.portfolio-shot-note) {
  width: 38%;
  height: 270px;
  left: 2%;
  bottom: 25px;
  transform: translate(calc(var(--board-x)*12px), calc(var(--board-y)*8px))
}

.portfolio-shot-note {
  width: 255px;
  right: 0;
  bottom: 82px;
  padding: 18px 18px 14px;
  transform: translate(calc(var(--board-x)*14px), calc(var(--board-y)*-8px));
  border-left: 4px solid #7d45ff
}

.portfolio-shot-note .mini {
  color: #7edfff;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px
}

.portfolio-shot-note strong {
  display: block;
  font-size: 25px;
  margin: 4px 0
}

.portfolio-shot-note p {
  margin: 0 0 12px;
  color: #c1cad9;
  font-size: 12px;
  line-height: 1.55
}

.portfolio-shot-note a {
  color: #9edfff;
  font-size: 12px;
  font-weight: 800
}

/* sections */
.section {
  padding: 98px 0;
  position: relative
}

.section+.section {
  border-top: 1px solid rgba(67, 87, 118, .18)
}

.section-heading {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 70px;
  align-items: start;
  margin-bottom: 52px
}

.section-heading h2,
.section h2 {
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 5px 0 0;
  font-weight: 800
}

.section-heading p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 18px
}

.section-action {
  margin-top: 30px;
  text-align: right
}

/* benchmark-style about split */
.home-about {
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
  gap: 70px;
  align-items: center
}

.home-about-media {
  position: relative;
  min-height: 560px
}

.home-about-media::before,
.home-about-media::after {
  content: "";
  position: absolute;
  border-radius: 10px;
  background: #1b2940
}

.home-about-media::before {
  width: 45%;
  height: 76%;
  left: 0;
  top: 0
}

.home-about-media::after {
  width: 38%;
  height: 40%;
  right: 0;
  bottom: 0;
  background: #1e2d46
}

.home-about-media img {
  position: absolute;
  width: 78%;
  height: 78%;
  left: 8%;
  top: 11%;
  object-fit: cover;
  border-radius: 8px;
  z-index: 2;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .35)
}

.home-about-copy h2 {
  font-size: clamp(38px, 4.3vw, 66px);
  line-height: 1.13;
  margin: 0 0 22px
}

.home-about-copy .lead {
  max-width: 700px
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 34px;
  margin-top: 34px
}

.check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #f4f6fb;
  font-weight: 750
}

.check-item i {
  width: 26px;
  height: 26px;
  border: 1px solid #4d6fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #6c8cff;
  font-style: normal;
  font-size: 12px
}

/* why choose cards */
.capability-section {
  text-align: center
}

.capability-section .section-heading {
  display: block;
  text-align: center
}

.capability-section .section-heading p {
  margin: 16px auto 0
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px
}

.capability-card {
  min-height: 290px;
  padding: 42px;
  border: 1px solid #34506f;
  border-radius: 14px;
  text-align: left;
  background: rgba(14, 23, 39, .55);
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s, background .25s
}

.capability-card::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -45px;
  top: -45px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(54, 130, 255, .23), transparent 68%)
}

.capability-card:hover {
  transform: translateY(-5px);
  border-color: #526eff;
  background: rgba(19, 31, 52, .86)
}

.capability-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #5948ff, #3d5dff);
  font-size: 25px;
  box-shadow: 0 10px 30px rgba(80, 65, 255, .30)
}

.capability-card h3 {
  font-size: 26px;
  margin: 0 0 14px
}

.capability-card p {
  margin: 0;
  color: var(--muted);
  font-size: 17px
}

/* selected work / product cards */
.feature-work {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  min-height: 560px;
  border: 1px solid #314969;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #151f32, #182842);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
  transition: border-color .25s, transform .25s
}

.feature-work:hover {
  transform: translateY(-3px);
  border-color: #4e6cff
}

.feature-work-media {
  min-height: 560px;
  background: #0a1220;
  overflow: hidden
}

.feature-work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.feature-work-icon {
  object-fit: contain !important;
  padding: 80px
}

.feature-work-copy {
  padding: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.feature-work-copy h3 {
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1;
  margin: 12px 0 20px
}

.feature-work-copy p {
  font-size: 18px;
  color: var(--muted)
}

.work-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.work-meta span,
.tag {
  padding: 6px 10px;
  border: 1px solid #3c506c;
  border-radius: 999px;
  color: #aab8cb;
  font-size: 11px
}

.work-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 26px
}

.work-row {
  position: relative;
  min-height: 260px;
  border: 1px solid #314969;
  border-radius: 14px;
  padding: 28px;
  background: #121d2f;
  overflow: hidden;
  transition: transform .25s, border-color .25s
}

.work-row::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .25s
}

.work-row:hover {
  transform: translateY(-4px);
  border-color: #4c68e9
}

.work-row:hover::after {
  transform: scaleY(1)
}

.work-row-id {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px
}

.work-row-id img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 12px
}

.work-row-id strong {
  font-size: 20px
}

.work-row>span:not(.text-link) {
  display: block;
  color: #7c8ba1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em
}

.work-row p {
  color: var(--muted);
  font-size: 14px
}

.work-row .text-link {
  position: absolute;
  left: 28px;
  bottom: 25px
}

/* Quiyo feature */
.quiyo-feature {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  border-radius: 22px;
  padding: 52px 58px;
  background: linear-gradient(135deg, #463dff 0%, #6239f6 45%, #2e65d9 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(47, 49, 160, .26)
}

.quiyo-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 1px, transparent 1.4px);
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, black, transparent 67%);
  opacity: .45
}

.quiyo-feature::after {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  right: -120px;
  top: -190px;
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .03), 0 0 0 150px rgba(255, 255, 255, .025)
}

.quiyo-label,
.quiyo-copy {
  position: relative;
  z-index: 1
}

.quiyo-feature .kicker {
  color: #dff6ff
}

.collection-count {
  font-size: 80px;
  font-weight: 900;
  color: rgba(255, 255, 255, .13);
  display: block;
  line-height: 1;
  margin-top: 20px
}

.quiyo-copy h2 {
  max-width: 850px;
  font-size: clamp(40px, 5vw, 70px);
  margin: 0 0 16px
}

.quiyo-copy p {
  max-width: 850px;
  color: #e3e8ff;
  font-size: 18px
}

/* collection / tools benchmark */
.collection-ledger,
.collections {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px
}

.collection-ledger>a,
.collection-link {
  position: relative;
  padding: 36px 38px;
  min-height: 205px;
  border: 1px solid #334d6d;
  border-radius: 14px;
  background: rgba(17, 28, 46, .78);
  overflow: hidden;
  transition: transform .25s, border-color .25s
}

.collection-ledger>a::before,
.collection-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(58, 116, 255, .18), transparent 35%);
  opacity: 0;
  transition: opacity .25s
}

.collection-ledger>a:hover,
.collection-link:hover {
  transform: translateY(-4px);
  border-color: #4d67d7
}

.collection-ledger>a:hover::before,
.collection-link:hover::before {
  opacity: 1
}

.collection-ledger span {
  color: #5e73ff;
  font-weight: 900
}

.collection-ledger strong,
.collection-link h3 {
  display: block;
  font-size: 25px;
  margin: 18px 0 8px
}

.collection-ledger p,
.collection-link p {
  margin: 0;
  color: var(--muted)
}

.collection-ledger b {
  position: absolute;
  right: 28px;
  bottom: 24px;
  color: var(--cyan);
  font-size: 21px
}

.collection-link {
  display: flex;
  justify-content: space-between;
  gap: 24px
}

.collection-link>span {
  font-weight: 900;
  color: #5871ff
}

/* studio proof / principles */
.studio-proof,
.studio-split,
.project-body-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 70px;
  align-items: start
}

.studio-proof {
  grid-template-columns: .8fr 1.05fr;
  border-radius: 16px;
  padding: 70px 0
}

.studio-principles,
.principles {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  border-top: 1px solid #354b68
}

.studio-principles li,
.principles li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid #293c56;
  color: #e8edf7;
  font-weight: 700
}

.studio-principles li span {
  color: #617aff
}

.studio-split p {
  font-size: 18px;
  color: var(--muted)
}

/* founder / team card style */
.founder-brief,
.founder-card {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
  gap: 70px;
  align-items: center
}

.founder-brief-media,
.founder-card>img {
  position: relative;
  border-radius: 16px;
  overflow: hidden
}

.founder-brief-media {
  min-height: 610px;
  background: #142038
}

.founder-brief-media img,
.founder-card>img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  border-radius: 16px
}

.founder-brief-copy {
  position: relative;
  padding: 44px;
  border: 1px solid #425879;
  border-left: 5px solid transparent;
  border-image: linear-gradient(#28c8ff, #7d3eff) 1;
  background: rgba(29, 42, 66, .82);
  backdrop-filter: blur(16px);
  margin-left: -140px;
  z-index: 2;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .25)
}

.founder-brief-copy h2,
.founder-card h2 {
  font-size: clamp(38px, 4vw, 60px)
}

.founder-card {
  position: relative
}

.founder-card>div:last-child {
  padding: 44px;
  border: 1px solid #405672;
  border-radius: 14px;
  background: rgba(27, 39, 61, .75)
}

/* stats */
.stats-stage {
  position: relative;
  overflow: hidden
}

.stats-stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  height: 250px;
  background-image: radial-gradient(circle, #1f53ad 1.3px, transparent 1.4px);
  background-size: 11px 11px;
  mask-image: linear-gradient(135deg, black, transparent);
  opacity: .65
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px;
  position: relative
}

.stat-card {
  min-height: 210px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #273044;
  background: #dfe0ff
}

.stat-card:nth-child(2) {
  background: #abd4ff
}

.stat-card:nth-child(3) {
  background: #baf7e9
}

.stat-card:nth-child(4) {
  background: #ffd1c4
}

.stat-card strong {
  display: block;
  font-size: 48px;
  line-height: 1;
  color: #6768e7
}

.stat-card:nth-child(2) strong {
  color: #1487e7
}

.stat-card:nth-child(3) strong {
  color: #12af9a
}

.stat-card:nth-child(4) strong {
  color: #ef6e4a
}

.stat-card span {
  display: block;
  margin-top: 18px;
  font-weight: 800;
  font-size: 18px
}

/* news */
.news-list,
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px
}

.news-card {
  border: 1px solid #324967;
  border-radius: 14px;
  overflow: hidden;
  background: #142034;
  transition: transform .25s, border-color .25s
}

.news-card:hover {
  transform: translateY(-4px);
  border-color: #506aff
}

.news-card time {
  display: block;
  color: #8190a5;
  font-size: 12px
}

.news-card h3 {
  font-size: 22px;
  line-height: 1.3;
  margin: 12px 0
}

.news-card p {
  color: var(--muted)
}

.news-list .news-card {
  padding: 28px
}

.news-card-image {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #0a1322
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease
}

.news-card:hover .news-card-image img {
  transform: scale(1.035)
}

.news-card-body {
  padding: 24px
}

.news-card.featured {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.1fr .9fr
}

.news-card.featured .news-card-image {
  aspect-ratio: auto;
  min-height: 380px
}

/* product portfolio */
.portfolio-intro {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 60px;
  align-items: end
}

.portfolio-intro-note {
  border-left: 3px solid #574dff;
  padding: 18px 22px;
  background: #17233a;
  color: #aeb9ca;
  font-size: 14px
}

.collection-section {
  scroll-margin-top: 105px
}

.collection-header {
  display: grid;
  grid-template-columns: 90px minmax(0, .9fr) minmax(300px, .7fr);
  gap: 30px;
  align-items: end;
  margin-bottom: 42px
}

.collection-no {
  font-size: 52px;
  line-height: 1;
  color: #2e4f84;
  font-weight: 900
}

.collection-header h2 {
  margin: 0
}

.collection-header p {
  margin: 0;
  color: var(--muted)
}

.editorial-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px
}

.product-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  padding: 26px;
  border: 1px solid #324967;
  border-radius: 14px;
  background: #121e31;
  position: relative;
  min-height: 190px;
  transition: transform .25s, border-color .25s
}

.product-row:hover {
  transform: translateY(-4px);
  border-color: #4e67df
}

.product-row img,
.product-row .sigil {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 12px
}

.sigil {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4c4eff, #6d3fff);
  font-size: 12px;
  font-weight: 900
}

.product-row h3 {
  margin: 0 0 3px;
  font-size: 22px
}

.product-row p {
  grid-column: 2;
  color: var(--muted);
  margin: 0
}

.product-row .text-link {
  grid-column: 2
}

.category {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8090a5
}

/* project view */
.project-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
  border: 1px solid #354d6c;
  border-radius: 18px;
  overflow: hidden;
  background: #131f32
}

.project-showcase-media {
  min-height: 620px;
  background: #09111e;
  overflow: hidden
}

.project-showcase-media img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover
}

.project-showcase-copy {
  padding: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.project-showcase-copy .lead {
  font-size: 22px
}

.tagrow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 22px 0
}

.project-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid #324866;
  border-left: 1px solid #324866;
  margin-top: 24px
}

.project-facts>div {
  padding: 16px;
  border-right: 1px solid #324866;
  border-bottom: 1px solid #324866
}

.project-facts small {
  display: block;
  color: #7f8da2;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px
}

.project-facts strong {
  font-size: 14px
}

.article-body {
  font-size: 18px;
  color: #c6cfdd
}

.article-body h2,
.article-body h3 {
  color: #fff
}

.article-body a {
  color: #67d8ff;
  text-decoration: underline;
  text-underline-offset: 3px
}

.article-body img {
  border-radius: 12px;
  margin: 32px 0
}

.product-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px
}

.product-gallery-grid a {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #314969;
  background: #0b1524;
  
}

.product-gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease
}

.product-gallery-grid a:hover img {
  transform: scale(1.03)
}

/* medicine + tech */
.universe-hero {
  padding: 100px 0 72px
}

.universe-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .55fr);
  gap: 70px;
  align-items: end
}

.universe-display span {
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.manifesto {
  padding: 28px;
  border: 1px solid #344d6b;
  border-radius: 14px;
  background: #17243a;
  color: #c4cfde;
  font-size: 17px
}

.pulse {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #35d7ff;
  box-shadow: 0 0 0 7px rgba(53, 215, 255, .09);
  margin-right: 8px
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 42px
}

.section-head h2 {
  margin-top: 8px
}

.guide-step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  padding: 28px 0;
  border-top: 1px solid #314864
}

.guide-step strong {
  font-size: 12px;
  color: #637cff;
  text-transform: uppercase;
  letter-spacing: .1em
}

.guide-step h3 {
  font-size: 28px;
  margin: 0 0 8px
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px
}

.video-card {
  border: 1px solid #324a67;
  border-radius: 14px;
  overflow: hidden;
  background: #152136
}

.video-thumbnail {
  display: block;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: #08111d
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.04)
}

.video-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 12, 22, .76))
}

.video-play {
  position: absolute;
  left: 24px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5548ff, #7250ff);
  z-index: 2
}

.video-play::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 14px;
  border-left: 13px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent
}

.video-thumbnail b {
  position: absolute;
  left: 84px;
  bottom: 33px;
  z-index: 2;
  font-size: 12px
}

.video-body {
  padding: 24px
}

.video-body h3 {
  margin: 8px 0;
  font-size: 23px
}

.quote {
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.25;
  font-weight: 800;
  color: #fff;
  margin: 10px 0 28px
}

/* contact */
.contact-console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  border: 1px solid #38516f;
  border-radius: 14px;
  overflow: hidden;
  background: #162238
}

.contact-primary {
  padding: 42px
}

.contact-primary h2 {
  font-size: 42px
}

.contact-status {
  padding: 34px;
  background: #1c2a43;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.contact-status span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #778ba7
}

.contact-status strong {
  font-size: 17px
}

.contact-status i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35d5a6;
  margin-right: 8px;
  box-shadow: 0 0 12px rgba(53, 213, 166, .65)
}

.contact-status a {
  color: #9fdfff
}

.contact-form,
.auth-card form,
.comment-form,
.form-grid {
  display: grid;
  gap: 14px;
  margin-top: 28px
}

.contact-form label,
.auth-card label,
.comment-form label,
.form-grid label {
  font-size: 12px;
  color: #aab5c5;
  font-weight: 700
}

.contact-form input,
.contact-form textarea,
.auth-card input,
.auth-card textarea,
.comment-form input,
.comment-form textarea,
.form-grid input,
.form-grid textarea,
.form-grid select,
.search-panel input {
  width: 100%;
  background: #1a2840;
  border: 1px solid #46617f;
  border-radius: 8px;
  color: #fff;
  padding: 14px 16px;
  outline: 0;
  transition: border-color .2s, box-shadow .2s
}

.contact-form input:focus,
.contact-form textarea:focus,
.auth-card input:focus,
.comment-form textarea:focus,
.search-panel input:focus {
  border-color: #536cff;
  box-shadow: 0 0 0 3px rgba(83, 108, 255, .12)
}

.contact-form textarea,
.comment-form textarea {
  min-height: 170px;
  resize: vertical
}

.honeypot {
  position: absolute;
  left: -9999px
}

.contact-product {
  transition: transform .25s, border-color .25s
}

.contact-product:hover {
  transform: translateY(-4px);
  border-color: #536cff
}

.app-icon.small {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover
}

/* cards panels */
.grid {
  display: grid;
  gap: 26px
}

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

.grid.three {
  grid-template-columns: repeat(3, 1fr)
}

.card,
.panel {
  background: #17243a;
  border: 1px solid #344d6b;
  border-radius: 14px;
  padding: 28px
}

.card h3,
.panel h3 {
  margin-top: 0
}

.panel h2 {
  font-size: 32px
}

.alert,
.comment-flash {
  padding: 14px 16px;
  border: 1px solid #435b7a;
  border-left: 4px solid #536cff;
  background: #17263d;
  border-radius: 8px
}

.comment-flash.success {
  border-left-color: #26d6a4
}

.comment-flash.error {
  border-left-color: #ff6687
}

/* auth / account */
.auth-shell {
  padding: 88px 0
}

.auth-panel,
.account-console {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(420px, .75fr);
  gap: 60px;
  align-items: start
}

.auth-intro {
  padding: 52px 0
}

.auth-intro h1,
.account-console h1 {
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.02;
  margin: 12px 0 22px
}

.auth-intro p {
  font-size: 19px;
  color: var(--muted);
  max-width: 620px
}

.auth-signal {
  margin-top: 34px;
  padding: 18px;
  border-left: 3px solid #5867ff;
  background: #16243b
}

.auth-signal b,
.auth-signal span {
  display: block
}

.auth-signal span {
  font-size: 13px;
  color: #aeb9c9
}

.auth-card,
.account-details {
  padding: 38px;
  border: 1px solid #38516f;
  border-radius: 14px;
  background: #18253c;
  box-shadow: var(--shadow)
}

.auth-card h2 {
  font-size: 35px;
  margin: 8px 0 20px
}

.auth-switch {
  font-size: 13px;
  color: #95a3b7
}

.auth-switch a {
  color: #80dfff
}

.auth-check {
  display: flex !important;
  gap: 10px;
  align-items: flex-start
}

.auth-check input {
  width: auto !important;
  margin-top: 4px
}

.account-details dl {
  margin: 18px 0
}

.account-details dl>div {
  padding: 14px 0;
  border-bottom: 1px solid #30445f
}

.account-details dt {
  font-size: 10px;
  color: #8190a5;
  text-transform: uppercase
}

.account-details dd {
  margin: 3px 0 0
}

.account-preference {
  margin: 22px 0
}

/* search */
.search-panel {
  display: flex;
  gap: 12px;
  padding: 20px;
  border: 1px solid #38516f;
  border-radius: 14px;
  background: #17243a;
  margin-bottom: 42px
}

.search-panel input {
  flex: 1;
  font-size: 17px
}

.search-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 34px
}

.search-results>div {
  display: grid;
  gap: 16px;
  align-content: start
}

/* article / comments */
.article-hero {
  padding-bottom: 42px
}

.article-cover {
  margin-top: 28px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #334b68
}

.article-cover img {
  width: 100%;
  max-height: 680px;
  object-fit: cover
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 60px;
  align-items: start
}

.article-aside {
  position: sticky;
  top: 120px
}

.article-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 30px 0
}

.article-gallery img {
  border-radius: 10px
}

.comments-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 42px
}

.comment-list {
  display: grid;
  gap: 16px
}

.comment,
.comment-empty,
.comment-form {
  padding: 22px;
  border: 1px solid #344d6b;
  border-radius: 12px;
  background: #16233a
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #8190a5;
  font-size: 11px
}

.comment p {
  color: #c9d1dd
}

.comment-gateway {
  align-self: start
}

/* policy/legal */
.legal-layout {
  max-width: 940px
}

.legal-layout .panel {
  padding: 42px
}

.legal-layout .panel h2 {
  margin-top: 34px
}

.legal-layout .panel h2:first-child {
  margin-top: 0
}

.policy-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 50px
}

.policy-toc {
  position: sticky;
  top: 120px;
  align-self: start
}

.policy-document {
  display: grid;
  gap: 18px
}

.policy-section {
  padding: 26px;
  border: 1px solid #344d6b;
  border-radius: 12px;
  background: #16233a
}

.policy-section h2 {
  font-size: 29px
}

.policy-meta {
  color: #8898ad;
  font-size: 12px
}

.policy-contact {
  padding: 25px;
  background: #1a2942;
  border-left: 4px solid #5a55ff
}

/* footer */
.footer-cta {
  margin-top: 90px;
  background: linear-gradient(100deg, #4e71ec 0%, #3f62dc 35%, #2c57c8 100%);
  position: relative;
  overflow: hidden
}

.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(6, 21, 68, .35) 1.5px, transparent 1.7px), repeating-radial-gradient(circle at 80% 48%, transparent 0 42px, rgba(255, 255, 255, .10) 43px 45px);
  background-size: 12px 12px, auto;
  mask-image: linear-gradient(90deg, black 0 20%, transparent 35% 65%, black 85%)
}

.footer-cta-inner {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1
}

.footer-cta-inner>span {
  font-size: 16px
}

.footer-cta h2 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1.08;
  margin: 22px 0 34px
}

.footer-cta h2 em {
  font-style: normal;
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px
}

.cta-pill {
  background: #fff;
  color: #18213a;
  border-color: #fff
}

.cta-pill b {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #673cff, #4a68ff);
  color: #fff
}

.footer {
  background: #0b1423;
  padding: 78px 0 26px
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 60px
}

.footer-grid>div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px
}

.footer-grid p,
.footer-grid a {
  color: #aab4c4;
  font-size: 14px
}

.footer-grid a:hover {
  color: #fff
}

.footer-grid strong {
  margin-bottom: 8px;
  font-size: 18px
}

.footer-brand {
  margin-bottom: 14px
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 8px
}

.footer-social a {
  width: 36px;
  height: 36px;
  border: 1px solid #3a4f6b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #5fdbff
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #253650;
  margin-top: 58px;
  padding-top: 22px;
  color: #73839a;
  font-size: 12px
}

/* motion hooks */
.motion-enabled [data-motion] {
  opacity: 0
}

.motion-enabled [data-motion="mask"] {
  transform: translateY(28px);
  clip-path: inset(0 0 100% 0)
}

.motion-enabled [data-motion="editorial"] {
  transform: translateY(34px)
}

.motion-enabled [data-motion="media"] {
  transform: scale(.97) translateY(25px)
}

.motion-enabled [data-motion="rail"] {
  transform: translateX(-22px)
}

.motion-enabled [data-motion].motion-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  transition: opacity .72s ease var(--motion-delay, 0ms), transform .78s cubic-bezier(.18, .76, .24, 1) var(--motion-delay, 0ms), clip-path .84s cubic-bezier(.18, .76, .24, 1) var(--motion-delay, 0ms)
}

@media(max-width:1100px) {

  .wrap,
  .wide {
    width: min(calc(100% - 48px), var(--max))
  }

  .nav-inner {
    grid-template-columns: auto 1fr
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-self: end
  }

  .navlinks {
    display: none;
    position: absolute;
    top: 88px;
    left: 24px;
    right: 24px;
    background: rgba(20, 31, 49, .97);
    border: 1px solid #344b68;
    border-radius: 14px;
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow)
  }

  .navlinks.is-open {
    display: flex
  }

  .navlinks a {
    padding: 12px 4px
  }

  .navlinks a::after {
    bottom: 7px
  }

  .nav-cta {
    justify-self: end
  }

  .home-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 75px
  }

  .home-hero-copy {
    max-width: 830px
  }

  .portfolio-board {
    min-height: 590px;
    max-width: 780px;
    width: 100%;
    margin-inline: auto
  }

  .home-about,
  .feature-work,
  .project-showcase,
  .founder-brief,
  .founder-card,
  .studio-proof,
  .studio-split,
  .project-body-grid,
  .auth-panel,
  .account-console {
    grid-template-columns: 1fr
  }

  .founder-brief-copy {
    margin-left: 0;
    margin-top: -120px;
    margin-inline: 60px
  }

  .work-rows {
    grid-template-columns: 1fr 1fr
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .collection-header {
    grid-template-columns: 70px 1fr
  }

  .collection-header p {
    grid-column: 2
  }

  .project-showcase-media {
    min-height: 470px
  }

  .project-showcase-media img {
    min-height: 470px
  }

  .comments-layout {
    grid-template-columns: 1fr
  }

  .article-layout {
    grid-template-columns: 1fr
  }

  .article-aside {
    position: static
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr
  }

  .footer-grid>div:last-child {
    grid-column: 2
  }
}

@media(max-width:760px) {

  .wrap,
  .wide {
    width: min(calc(100% - 30px), var(--max))
  }

  .site-header {
    background: #17243a
  }

  .nav-inner {
    min-height: 74px;
    gap: 12px;
    grid-template-columns: auto 1fr
  }

  .brandmark img {
    width: 38px;
    height: 38px
  }

  .brandmark span {
    font-size: 17px
  }

  .nav-cta {
    display: none
  }

  .navlinks {
    top: 74px;
    left: 15px;
    right: 15px
  }

  .home-hero {
    padding: 58px 0 60px;
    gap: 30px
  }

  .home-hero-copy h1 {
    font-size: clamp(48px, 14vw, 69px)
  }

  .portfolio-board {
    min-height: 500px
  }

  .portfolio-shot-wide {
    width: 88%;
    height: 310px;
    right: 0;
    top: 58px
  }

  .portfolio-shot:not(.portfolio-shot-wide):not(.portfolio-shot-note) {
    width: 48%;
    height: 210px;
    left: 0;
    bottom: 12px
  }

  .portfolio-shot-note {
    width: 220px;
    right: 0;
    bottom: 28px
  }

  .section {
    padding: 72px 0
  }

  .page-hero {
    padding: 68px 0 46px
  }

  .page-hero h1,
  .universe-display {
    font-size: clamp(46px, 12vw, 68px)
  }

  .home-about {
    grid-template-columns: 1fr;
    gap: 38px
  }

  .home-about-media {
    min-height: 430px
  }

  .home-about-media img {
    width: 88%;
    height: 82%;
    left: 6%;
    top: 8%
  }

  .check-grid,
  .capability-grid,
  .collection-ledger,
  .collections,
  .stats-grid,
  .grid.two,
  .grid.three,
  .news-list,
  .news-grid,
  .editorial-list,
  .video-grid,
  .search-results{
    grid-template-columns: 1fr
  }
  .product-gallery-grid {
    grid-template-columns: repeat(2,1fr);
    gap: 12px;
  }

  .capability-card {
    min-height: 230px
  }

  .feature-work {
    grid-template-columns: 1fr
  }

  .feature-work-media {
    min-height: 330px
  }

  .feature-work-copy {
    padding: 34px
  }

  .work-rows {
    grid-template-columns: 1fr
  }

  .quiyo-feature {
    grid-template-columns: 1fr;
    padding: 36px 28px
  }

  .collection-count {
    font-size: 54px
  }

  .founder-brief,
  .founder-card {
    grid-template-columns: 1fr
  }

  .founder-brief-media {
    min-height: 470px
  }

  .founder-brief-copy {
    margin: -80px 22px 0;
    padding: 28px
  }

  .portfolio-intro {
    grid-template-columns: 1fr
  }

  .collection-header {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .collection-header p {
    grid-column: 1
  }

  .collection-no {
    font-size: 36px
  }

  .universe-hero-grid {
    grid-template-columns: 1fr
  }

  .guide-step {
    grid-template-columns: 1fr;
    gap: 7px
  }

  .contact-console {
    grid-template-columns: 1fr
  }

  .news-card.featured {
    grid-column: auto;
    display: block
  }

  .auth-shell {
    padding: 52px 0
  }

  .auth-intro {
    padding: 0
  }

  .auth-card,
  .account-details {
    padding: 26px
  }

  .search-panel {
    flex-direction: column
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px
  }

  .footer-grid>div:last-child {
    grid-column: auto
  }

  .footer-intro {
    grid-column: 1/-1
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px
  }

  .footer-cta-inner {
    min-height: 360px
  }

  .footer-cta h2 {
    font-size: 46px
  }

  .article-gallery {
    grid-template-columns: 1fr
  }

  .policy-layout {
    grid-template-columns: 1fr
  }

  .policy-toc {
    position: static
  }

  .project-facts {
    grid-template-columns: 1fr 1fr
  }

  .project-showcase-copy {
    padding: 30px
  }
}

@media(max-width:480px) {
  .brandmark span {
    font-size: 15px
  }

  .brandmark img {
    width: 34px;
    height: 34px
  }

  .portfolio-board {
    min-height: 430px
  }

  .portfolio-shot-wide {
    height: 250px
  }

  .portfolio-shot:not(.portfolio-shot-wide):not(.portfolio-shot-note) {
    height: 170px
  }

  .portfolio-shot-note {
    width: 185px;
    padding: 13px
  }

  .portfolio-shot-note strong {
    font-size: 20px
  }

  .portfolio-shot figcaption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 9px 10px
  }

  .portfolio-shot figcaption span {
    display: none
  }

  .check-grid {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

  .project-facts {
    grid-template-columns: 1fr
  }

  .home-hero-copy h1 {
    font-size: 47px
  }
}

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

  .ambient-orbs {
    display: none
  }

  .motion-enabled [data-motion] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important
  }

  .signal-caret {
    animation: none
  }
}

/* policy detail surfaces */
.policy-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 60px;
  align-items: end
}

.policy-meta {
  list-style: none;
  margin: 0;
  padding: 22px;
  border: 1px solid #36506f;
  border-radius: 12px;
  background: #17243a
}

.policy-meta li {
  display: grid;
  grid-template-columns: 95px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #2e445f
}

.policy-meta li:last-child {
  border-bottom: 0
}

.policy-meta b {
  color: #8192a9;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.policy-meta span,
.policy-meta a {
  font-size: 13px;
  color: #dbe2ec
}

.policy-toc {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid #334c69;
  border-radius: 12px;
  background: #152238;
  padding: 14px
}

.policy-toc a {
  padding: 9px 10px;
  border-radius: 7px;
  color: #aab7c8;
  font-size: 13px
}

.policy-toc a:hover {
  background: #1e2e48;
  color: #fff
}

.policy-document p,
.policy-document li {
  color: #c1cad8
}

.policy-document h3 {
  margin-top: 24px
}

.policy-rule-list {
  display: grid;
  gap: 12px;
  margin: 22px 0
}

.policy-rule {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  padding: 18px;
  border: 1px solid #314966;
  border-radius: 10px;
  background: #142137
}

.policy-rule>span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4b57ff, #6d45ff);
  font-size: 10px;
  font-weight: 900
}

.policy-rule strong {
  display: block;
  margin-bottom: 4px
}

.policy-rule p {
  margin: 0
}

.policy-callout {
  padding: 20px 22px;
  border-left: 4px solid #5c55ff;
  background: #1a2942;
  color: #dce4ee;
  margin: 22px 0
}

.policy-contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #304660;
  border: 1px solid #304660
}

.policy-contact>div {
  padding: 16px;
  background: #17243a
}

.policy-contact small {
  display: block;
  color: #7d8da3;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px
}

.policy-contact a {
  color: #8fe1ff
}

@media(max-width:760px) {
  .policy-hero {
    grid-template-columns: 1fr
  }

  .policy-meta {
    margin-top: 10px
  }

  .policy-contact {
    grid-template-columns: 1fr
  }
}