:root {
  color-scheme: light;
  --bg: #f6f4ef;
  --ink: #080808;
  --muted: #65625d;
  --paper: #fff;
  --soft: #ebe7dc;
  --line: rgba(8, 8, 8, .14);
  --gold: #ac842d;
  --shadow: 0 22px 64px rgba(8, 8, 8, .14);
  --max: 1380px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

main {
  overflow-x: clip;
}

body.is-loading { overflow: hidden; }
body.nav-open { overflow: hidden; }
body.is-wiping .page-wipe { transform: translateY(0); }
button, input, textarea, select { font: inherit; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

section,
article,
figure,
div,
nav,
form {
  min-width: 0;
}

.loader,
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-100%);
  transition: transform 260ms cubic-bezier(.8, 0, .2, 1);
  pointer-events: none;
}

.loader {
  transform: translateY(0);
  background: var(--bg);
  color: var(--ink);
  line-height: .84;
  font-weight: 900;
}

.loader-brand {
  display: grid;
  justify-items: center;
  transform-origin: 50% 0;
  transition: transform 680ms cubic-bezier(.22, 1, .36, 1), opacity 320ms ease;
}

.loader span,
.loader-brand span { font-size: clamp(2.6rem, 7vw, 6.2rem); }
.loader small,
.loader-brand small {
  display: block;
  margin-top: 10px;
  font-size: .68rem;
  letter-spacing: .48em;
  text-align: center;
}
body.loading-done .loader-brand {
  transform: translateY(calc(-50vh + 24px)) scale(.23);
  opacity: .92;
}
.loader.is-hidden { transform: translateY(100%); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 20px clamp(18px, 4vw, 54px);
  color: #fff;
  mix-blend-mode: difference;
}

.brand {
  display: grid;
  grid-column: 2;
  justify-self: center;
  line-height: .8;
  font-weight: 950;
  text-align: center;
}

.brand span { font-size: clamp(1.45rem, 1.9vw, 2.1rem); }
.brand small { font-size: .5rem; letter-spacing: .36em; }

.nav {
  display: flex;
  gap: clamp(12px, 1.8vw, 26px);
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.nav-right { justify-self: end; }

.menu-toggle {
  display: none;
  grid-column: 3;
  justify-self: end;
  width: 48px;
  height: 48px;
  place-items: center;
  gap: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: currentColor;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle em {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 92px clamp(22px, 8vw, 70px) 36px;
  background: rgba(246, 244, 239, .97);
  color: var(--ink);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 280ms cubic-bezier(.8, 0, .2, 1), opacity 180ms ease;
}

.mobile-menu:not([hidden]) { display: grid; }

body.nav-open .mobile-menu {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu a {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(2rem, 12vw, 4.5rem);
  line-height: .9;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: -.07em;
}

.hero {
  position: relative;
  min-height: 180vh;
  max-width: var(--max);
  margin: 0 auto;
  padding: 122px clamp(18px, 4vw, 54px) 76px;
  display: grid;
  align-content: start;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

.hero h1 {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0;
  font-size: clamp(2.35rem, 4.8vw, 5.2rem);
  line-height: .94;
  font-weight: 950;
  text-transform: uppercase;
}

.hero h1 > span { display: block; }

.inline-media {
  position: relative;
  display: inline-block;
  width: clamp(92px, 12vw, 170px);
  height: .56em;
  overflow: hidden;
  vertical-align: middle;
  background: var(--paper);
  box-shadow: var(--shadow);
  transform-origin: center;
}

.inline-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
}

body.has-scroll-video .inline-media video {
  position: fixed;
  left: var(--hero-video-left, 0);
  top: var(--hero-video-top, 0);
  z-index: 8;
  width: var(--hero-video-width, 0);
  height: var(--hero-video-height, 0);
  max-width: none;
  opacity: var(--hero-video-opacity, 1);
  pointer-events: none;
  transform: none;
  filter: contrast(1.05) saturate(.95);
  box-shadow: 0 28px 90px rgba(8, 8, 8, .2);
  will-change: left, top, width, height, opacity;
}

.hero-note {
  max-width: 480px;
  margin: 30px 0 0 auto;
  color: var(--muted);
  font-size: clamp(.98rem, 1.1vw, 1.08rem);
}

.round-link {
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  top: min(72vh, 680px);
  z-index: 3;
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.hero-video-caption {
  position: fixed;
  left: clamp(20px, 5vw, 76px);
  bottom: clamp(64px, 9vw, 126px);
  z-index: 9;
  color: #fff;
  text-transform: uppercase;
  pointer-events: none;
  opacity: var(--hero-caption-opacity, 0);
  transform: translateY(var(--hero-caption-y, 18px));
  will-change: transform, opacity;
}

.hero-video-caption span {
  display: block;
  margin-bottom: 8px;
  color: #d8b24a;
  font-size: .76rem;
  font-weight: 900;
}

.hero-video-caption strong {
  display: block;
  max-width: 760px;
  font-size: clamp(2.15rem, 5.4vw, 5.8rem);
  line-height: .9;
}

.ticker {
  overflow: hidden;
  padding: 48px 0;
  background: var(--paper);
  border-block: 1px solid var(--line);
}

.ticker-row {
  display: flex;
  width: max-content;
  color: transparent;
  -webkit-text-stroke: 1px rgba(8,8,8,.48);
  font-size: clamp(2.25rem, 4.4vw, 4.8rem);
  line-height: .92;
  font-weight: 950;
  text-transform: uppercase;
  animation: ticker 28s linear infinite;
}

.ticker-row.reverse {
  animation-direction: reverse;
  -webkit-text-stroke-color: rgba(8,8,8,.28);
}

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(76px, 9vw, 132px) clamp(18px, 4vw, 54px);
}

.compact { padding-block: clamp(62px, 7vw, 105px); }

.page-hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 132px clamp(18px, 4vw, 54px) 70px;
}

.page-hero h1,
.section-title h2,
.stack-heading h2,
.split-panel h2 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(1.95rem, 3.45vw, 3.85rem);
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
}

.page-hero h1 {
  max-width: 980px;
  font-size: clamp(2.25rem, 4.75vw, 5.05rem);
}

.page-hero p:not(.eyebrow) {
  max-width: 650px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 1.04rem;
}

.section-title {
  display: grid;
  grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr);
  gap: clamp(22px, 5vw, 78px);
  align-items: start;
}

.section-copy {
  max-width: 600px;
  margin: 32px 0 0 auto;
  color: var(--muted);
  font-size: 1.02rem;
}

.stack-section { height: 360vh; }

.stack-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
  border-block: 1px solid var(--line);
}

.stack-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, rgba(8,8,8,.1), transparent 28%);
  opacity: var(--stack-glow, 0);
  pointer-events: none;
}

.stack-pin::after {
  content: "";
  position: fixed;
  left: 50%;
  bottom: 16px;
  width: min(290px, 42vw);
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
  opacity: var(--stack-progress-opacity, 0);
  transform: translateX(-50%) scaleX(var(--stack-progress, .08));
  transform-origin: left center;
}

.stack-heading {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: min(980px, 88vw);
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%) translateY(var(--heading-y, 0)) scale(var(--heading-scale, 1));
  opacity: var(--heading-opacity, 1);
  mix-blend-mode: normal;
}

.stack-heading .eyebrow {
  color: var(--gold);
  margin-top: 36px;
  opacity: var(--heading-kicker-opacity, .9);
  transform: translateY(var(--heading-kicker-y, 0));
}

.stack-heading h2 {
  color: var(--ink);
  font-size: clamp(4.4rem, 8.6vw, 9.4rem);
  line-height: .86;
  letter-spacing: -.075em;
  max-width: 920px;
  margin-inline: auto;
}

.stack-cards {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.stack-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w, clamp(210px, 18vw, 320px));
  height: var(--card-h, clamp(260px, 27vw, 430px));
  display: block;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 34px 92px rgba(0, 0, 0, .52);
  cursor: none;
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)) scale(var(--s, .82));
  opacity: var(--o, 1);
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

.stack-card img,
.project-tile img,
.profile-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stack-card img {
  filter: brightness(var(--image-brightness, 1));
  transform: scale(var(--image-scale, 1.02));
  transition: filter 120ms linear;
}

.stack-card.wide {
  --card-w: clamp(280px, 25vw, 430px);
  --card-h: clamp(190px, 18vw, 300px);
}

.stack-card.tall {
  --card-w: clamp(220px, 19vw, 330px);
  --card-h: clamp(330px, 34vw, 530px);
}

.stack-card span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 13px 14px;
  color: #fff;
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  opacity: var(--label-opacity, 0);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}

.stack-card::after {
  content: "↘";
  position: absolute;
  left: 18px;
  top: 50%;
  z-index: 3;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #080808;
  font-size: 1.5rem;
  opacity: var(--arrow-opacity, 0);
  transform: translateY(-50%);
}

.work-browser {
  min-height: 100vh;
  padding: 112px clamp(18px, 4vw, 54px) clamp(70px, 8vw, 118px);
  background: #f6f4ef;
  color: var(--ink);
}

.work-browser-top {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 24px;
  align-items: start;
  max-width: var(--max);
  margin: 0 auto 28px;
}

.work-browser-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 3vw, 42px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto clamp(26px, 4vw, 54px);
}

.work-browser-title h1 {
  margin: 0;
  font-size: clamp(5.2rem, 18vw, 18rem);
  line-height: .72;
  letter-spacing: -.1em;
  font-weight: 950;
}

.work-browser-title span {
  color: var(--muted);
  font-size: clamp(.85rem, 1.1vw, 1.05rem);
  font-weight: 900;
}

.work-browser-title span:last-child { text-align: right; }

.work-browser-layout {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(440px, 1.18fr);
  gap: clamp(26px, 4vw, 72px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
}

.work-index-wrap {
  position: sticky;
  top: 96px;
}

.work-index {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.work-index li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.work-index button,
.work-index a {
  min-height: 66px;
  color: var(--ink);
}

.work-index button {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 15px 16px 15px 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.work-index strong,
.work-preview h2 {
  font-weight: 950;
  text-transform: uppercase;
}

.work-index span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 900;
}

.work-index strong {
  display: block;
  line-height: .98;
}

.work-index small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .75rem;
  text-transform: uppercase;
}

.work-index a {
  display: grid;
  width: 48px;
  place-items: center;
  opacity: .35;
  font-size: 1.2rem;
}

.work-index li.is-active,
.work-index li:hover,
.work-index li:focus-within {
  background: #080808;
  color: #fff;
}

.work-index li.is-active button,
.work-index li.is-active a,
.work-index li:hover button,
.work-index li:hover a,
.work-index li:focus-within button,
.work-index li:focus-within a {
  color: #fff;
}

.work-index li.is-active span,
.work-index li.is-active small,
.work-index li:hover span,
.work-index li:hover small,
.work-index li:focus-within span,
.work-index li:focus-within small {
  color: rgba(255, 255, 255, .68);
}

.work-index li.is-active a,
.work-index li:hover a,
.work-index li:focus-within a { opacity: 1; }

.work-preview {
  min-height: 68vh;
}

.work-preview-card {
  display: grid;
  gap: 20px;
  animation: workPreviewIn 360ms cubic-bezier(.2,.8,.2,1);
}

.work-preview figure {
  position: relative;
  min-height: clamp(420px, 58vw, 760px);
  margin: 0;
  overflow: hidden;
  background: #0b0b0b;
}

.work-preview img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transform: scale(1.015);
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), filter 360ms ease;
}

.work-preview-card:hover img { transform: scale(1.045); filter: contrast(1.04) saturate(1.04); }

.preview-gallery {
  position: absolute;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.preview-gallery img {
  width: clamp(52px, 6vw, 88px);
  height: clamp(68px, 8vw, 112px);
  min-height: 0;
  object-fit: cover;
  border: 2px solid var(--paper);
  box-shadow: 0 18px 30px rgba(0,0,0,.18);
  transform: translateY(calc(var(--thumb-index, 0) * -8px)) rotate(calc((var(--thumb-index, 0) - 1) * 4deg));
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}

.work-preview-card:hover .preview-gallery img {
  transform: translateY(calc(var(--thumb-index, 0) * -14px - 8px)) rotate(calc((var(--thumb-index, 0) - 1) * -5deg));
}

.work-preview figure span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 11px;
  background: #fff;
  color: #080808;
  font-size: .8rem;
  font-weight: 950;
}

.work-preview-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.work-preview h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2rem, 5vw, 6.5rem);
  line-height: .84;
  letter-spacing: -.075em;
}

.work-preview p {
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--muted);
}

.work-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.work-preview-meta span {
  padding: 6px 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.work-preview-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}

.work-preview-actions a {
  padding: 12px 16px;
  border: 1px solid #080808;
  background: #080808;
  color: #fff;
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.work-preview-actions a.secondary {
  background: transparent;
  color: #080808;
}

.work-empty {
  max-width: var(--max);
  margin: 30px auto 0;
  color: var(--muted);
}

@keyframes workPreviewIn {
  from { opacity: .28; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.work-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 0;
}

.work-toolbar button {
  padding: 10px 15px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: .88rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.work-toolbar button.is-active {
  background: var(--ink);
  color: var(--paper);
}

.portfolio-grid,
.team-grid,
.stats-grid,
.service-list {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
}

.portfolio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.project-tile,
.profile-card,
.stat-card {
  display: grid;
  gap: 8px;
  padding: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.project-tile,
.stack-card { cursor: none; }
.project-tile {
  opacity: var(--tile-o, .18);
  transform: translateY(var(--tile-y, 42px)) scale(var(--tile-s, .96));
  transition: filter 260ms ease;
  will-change: transform, opacity;
}

.project-tile.wide { grid-column: span 2; }
.project-tile.tall { grid-column: span 2; grid-row: span 2; }

.project-tile img {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform 260ms ease, filter 260ms ease;
}

.project-tile.wide img { aspect-ratio: 16 / 10; }
.project-tile.tall img { aspect-ratio: 1 / 1.08; }
.project-tile:hover img { transform: translateY(-5px); filter: saturate(1.08) contrast(1.05); }

.project-tile span,
.profile-card strong,
.stat-card strong {
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: 900;
}

.project-tile small,
.profile-card span,
.stat-card span,
.split-panel p,
.profile-copy p,
.contact-form p,
.project-dialog p:not(.eyebrow) {
  color: var(--muted);
}

.service-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 48px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.service-list article {
  min-height: 220px;
  padding: clamp(22px, 3vw, 34px);
  background: rgba(255,255,255,.62);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.service-list span {
  color: var(--gold);
  font-size: .76rem;
  font-weight: 900;
}

.service-list h3 {
  margin: 40px 0 12px;
  font-size: clamp(1.16rem, 1.75vw, 1.7rem);
  line-height: 1.05;
}

.service-accordion {
  --active-service: 0;
  display: flex;
  min-height: clamp(420px, 48vw, 610px);
  margin-top: 48px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 18px;
  background:
    radial-gradient(circle at calc(13% + var(--active-service) * 24.5%) 14%, rgba(0, 0, 0, .1), transparent 78px),
    linear-gradient(135deg, #fff, #f2f2f2);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .1);
}

.service-accordion article {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid rgba(0, 0, 0, .1);
  transition: flex 420ms cubic-bezier(.2,.8,.2,1), background 260ms ease;
}

.service-accordion article:last-child { border-right: 0; }
.service-accordion article.is-active { flex-grow: 3.8; background: rgba(255,255,255,.82); }

.service-accordion button {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  padding: 50px 18px 44px;
  background: transparent;
  color: rgba(0, 0, 0, .72);
  cursor: pointer;
  text-align: center;
}

.service-accordion button span {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: #050505;
  color: #fff;
  border: 1px solid #050505;
  box-shadow: 11px 12px 24px rgba(0, 0, 0, .18);
  transition: transform 280ms ease, box-shadow 280ms ease, background 280ms ease, color 280ms ease;
}

.service-accordion button em {
  align-self: end;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-style: normal;
  font-size: .9rem;
  line-height: 1.05;
}

.service-accordion article.is-active button {
  opacity: 0;
  pointer-events: none;
}

.service-accordion article:hover button span,
.service-accordion article:focus-within button span {
  transform: translateY(-8px);
  background: #fff;
  color: #050505;
  box-shadow: 16px 18px 30px rgba(0, 0, 0, .2);
}

.service-accordion article > div {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-width: min(520px, 100%);
  max-width: 600px;
  padding: clamp(42px, 6vw, 86px);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 280ms ease 80ms, transform 320ms ease 80ms;
}

.service-accordion article.is-active > div {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.service-accordion h3 {
  margin: 0 0 28px;
  color: #050505;
  font-size: clamp(2.3rem, 4vw, 4.8rem);
  line-height: .92;
  letter-spacing: -.06em;
}

.service-accordion p {
  max-width: 440px;
  color: rgba(0, 0, 0, .68);
  font-size: clamp(1rem, 1.2vw, 1.18rem);
}

.service-accordion a {
  justify-self: start;
  margin-top: 22px;
  padding: 17px 42px;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 12px 14px 28px rgba(0, 0, 0, .18);
  transition: transform 220ms ease, background 220ms ease, color 220ms ease;
}

.service-accordion a:hover {
  background: #fff;
  color: #050505;
  transform: translateY(-2px);
}

.service-accordion-large { min-height: clamp(500px, 52vw, 680px); }

.service-proof {
  display: grid;
  grid-template-columns: 1.1fr .85fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  padding-top: 0;
}

.service-proof article {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 36vw, 540px);
  border: 1px solid var(--line);
  background: var(--paper);
}

.service-proof article:nth-child(2) {
  margin-top: clamp(28px, 6vw, 92px);
}

.service-proof article:nth-child(3) {
  margin-top: clamp(8px, 3vw, 44px);
}

.service-proof img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 650ms cubic-bezier(.2,.8,.2,1), filter 420ms ease;
}

.service-proof article:hover img {
  transform: scale(1.065);
  filter: contrast(1.04) saturate(1.08);
}

.service-proof span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 10px;
  background: rgba(246,244,239,.92);
  color: var(--ink);
  font-size: .74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.service-flow {
  padding-top: clamp(30px, 4vw, 70px);
}

.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(30px, 5vw, 72px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.flow-grid article {
  min-height: clamp(270px, 28vw, 430px);
  padding: clamp(22px, 3vw, 38px);
  display: grid;
  align-content: space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.35)),
    radial-gradient(circle at 50% 18%, rgba(172,132,45,.16), transparent 90px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1), background 320ms ease;
}

.flow-grid article:hover {
  transform: translateY(-10px);
  background:
    linear-gradient(180deg, #fff, rgba(255,255,255,.68)),
    radial-gradient(circle at 50% 18%, rgba(8,8,8,.1), transparent 110px);
}

.flow-grid span,
.service-cta span {
  color: var(--gold);
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.flow-grid h3 {
  max-width: 230px;
  margin: clamp(50px, 10vw, 150px) 0 14px;
  font-size: clamp(1.6rem, 2.5vw, 3.2rem);
  line-height: .92;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.flow-grid p {
  margin: 0;
  color: var(--muted);
}

.services-feature {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(300px, .78fr);
  gap: clamp(24px, 6vw, 86px);
  align-items: center;
}

.services-feature h2 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(3.2rem, 8vw, 10rem);
  line-height: .78;
  letter-spacing: -.085em;
  text-transform: uppercase;
}

.services-feature p {
  max-width: 620px;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.32rem);
}

.services-feature figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  transform: rotate(2deg);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}

.services-feature figure:hover {
  transform: rotate(-1deg) translateY(-8px);
}

.services-feature img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.services-feature figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 10px;
  background: rgba(246,244,239,.92);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.service-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  margin-bottom: clamp(24px, 5vw, 72px);
  background: var(--paper);
  border: 1px solid var(--line);
}

.service-cta h2 {
  max-width: 960px;
  margin: 16px 0 0;
  font-size: clamp(3rem, 7.5vw, 9rem);
  line-height: .82;
  letter-spacing: -.08em;
  text-transform: uppercase;
}

.service-cta nav {
  display: grid;
  gap: 10px;
  min-width: min(100%, 260px);
}

.service-cta a {
  padding: 15px 18px;
  border: 1px solid var(--ink);
  font-size: .78rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}

.service-cta a:first-child,
.service-cta a:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-3px);
}

.split-panel,
.profile-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: clamp(28px, 6vw, 88px);
  align-items: start;
}

.panel-links,
.profile-copy,
.contact-form,
.stat-card,
.profile-card {
  padding: clamp(22px, 3vw, 38px);
  background: var(--paper);
  border: 1px solid var(--line);
}

.panel-links { display: grid; }
.panel-links a {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 900;
  text-transform: uppercase;
}
.panel-links a:last-child { border-bottom: 0; }

.home-ai-lab {
  position: relative;
  min-height: clamp(720px, 92vh, 980px);
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.home-ai-lab::before {
  content: "";
  position: absolute;
  inset: clamp(22px, 4vw, 54px);
  pointer-events: none;
  opacity: .34;
  background:
    linear-gradient(90deg, rgba(8,8,8,.08) 1px, transparent 1px) 0 0 / 9.09% 100%,
    linear-gradient(rgba(8,8,8,.08) 1px, transparent 1px) 0 0 / 100% 14.2%;
  mask-image: radial-gradient(circle at 62% 42%, #000, transparent 66%);
}

.ai-copy {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: grid;
  align-content: center;
}

.ai-copy h2 {
  margin-bottom: 22px;
}

.ai-copy > p:not(.eyebrow) {
  max-width: 560px;
  color: var(--muted);
  font-size: clamp(1rem, 1.55vw, 1.35rem);
}

.ai-lab-card {
  position: relative;
  z-index: 2;
  min-height: clamp(520px, 48vw, 680px);
  display: grid;
  align-content: space-between;
  gap: 22px;
  padding: clamp(18px, 2.6vw, 34px);
  background:
    radial-gradient(circle at 72% 18%, rgba(172,132,45,.14), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(235,231,220,.72));
  border: 1px solid var(--line);
  box-shadow: 0 34px 90px rgba(8,8,8,.13);
  overflow: hidden;
}

.ai-lab-card::before {
  content: "GRIDLINE AI / HUMAN APPROVED";
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 3;
  color: rgba(8,8,8,.48);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .18em;
}

.ai-lab-card::after {
  content: "";
  position: absolute;
  right: -16%;
  top: -12%;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid rgba(8,8,8,.16);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 17px, rgba(8,8,8,.08) 18px 19px);
  animation: radialPulse 2.8s ease-in-out infinite alternate;
}

.ai-reel {
  position: relative;
  z-index: 2;
  min-height: 360px;
  margin-top: 46px;
}

.ai-reel img {
  position: absolute;
  width: min(58%, 360px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 10px solid #fff;
  box-shadow: 0 22px 58px rgba(8,8,8,.24);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), filter 320ms ease;
}

.ai-reel img:nth-child(1) {
  left: 0;
  top: 18px;
  transform: rotate(-8deg);
}

.ai-reel img:nth-child(2) {
  left: 28%;
  top: 74px;
  z-index: 2;
  transform: rotate(4deg);
}

.ai-reel img:nth-child(3) {
  right: 0;
  top: 0;
  transform: rotate(9deg);
}

.ai-lab-card:hover .ai-reel img:nth-child(1) { transform: translate(-10px, -12px) rotate(-13deg); }
.ai-lab-card:hover .ai-reel img:nth-child(2) { transform: translateY(-22px) rotate(0deg); }
.ai-lab-card:hover .ai-reel img:nth-child(3) { transform: translate(12px, -10px) rotate(14deg); }

.ai-lab-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.ai-lab-grid span {
  min-height: 86px;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 950;
  text-transform: uppercase;
  transform: translateY(calc(var(--scroll-shift, 0) * -16px));
}

.ai-lab-card p {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.ai-lab-card strong {
  padding: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: .76rem;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.home-start {
  position: relative;
  min-height: clamp(720px, 94vh, 980px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 560px);
  gap: clamp(28px, 6vw, 90px);
  align-items: center;
  overflow: hidden;
}

.home-start::before {
  content: "POST / PLAN / PRODUCE / POST / PLAN / PRODUCE";
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: 0;
  width: 120vw;
  color: transparent;
  -webkit-text-stroke: 1px rgba(8,8,8,.14);
  font-size: clamp(5rem, 12vw, 14rem);
  line-height: .8;
  font-weight: 950;
  white-space: nowrap;
  transform: translateX(-50%) translateY(calc(var(--scroll-shift, 0) * -56px));
  pointer-events: none;
}

.launch-copy,
.launch-board {
  position: relative;
  z-index: 1;
}

.launch-copy h2 {
  max-width: 990px;
}

.launch-copy p:not(.eyebrow) {
  color: var(--muted);
  font-size: clamp(1.1rem, 2vw, 1.9rem);
  font-weight: 900;
}

.launch-board {
  display: grid;
  gap: 12px;
  perspective: 900px;
}

.launch-board a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  min-height: 142px;
  align-content: center;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 58px rgba(8,8,8,.08);
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), background 220ms ease, color 220ms ease;
}

.launch-board a:nth-child(2) {
  margin-left: 42px;
}

.launch-board a:nth-child(3) {
  margin-left: 84px;
}

.launch-board a:hover {
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  transform: translateX(-18px) rotateY(-8deg);
}

.launch-board span {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: .8rem;
  font-weight: 950;
}

.launch-board a:hover span {
  background: var(--paper);
  color: var(--ink);
}

.launch-board strong {
  font-size: clamp(1.35rem, 2.4vw, 2.2rem);
  line-height: .92;
  text-transform: uppercase;
}

.launch-board em {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.launch-board a:hover em {
  color: rgba(255,255,255,.68);
}

.profile-card img {
  aspect-ratio: 4 / 5;
  margin-bottom: 12px;
  border: 1px solid var(--line);
}

.profile-card.placeholder {
  min-height: 420px;
  align-content: end;
  background: var(--soft);
}

.project-detail {
  display: grid;
  gap: 28px;
}

.project-detail > img {
  width: 100%;
  max-height: 72vh;
  object-fit: cover;
  border: 1px solid var(--line);
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.project-gallery figure {
  position: relative;
  grid-column: span 2;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
}

.project-gallery figure.is-lead {
  grid-column: 1 / -1;
}

.project-gallery img {
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 44vw, 720px);
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), filter 700ms ease;
}

.project-gallery figure:not(.is-lead) img {
  aspect-ratio: 4 / 5;
  min-height: 0;
}

.project-gallery figure:hover img {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.04);
}

.project-gallery figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 9px;
  background: rgba(246,244,239,.92);
  color: var(--ink);
  font-size: .7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.meta-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.meta-strip span {
  padding: 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-weight: 900;
}

.project-copy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.project-copy article {
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.next-link {
  margin-left: auto;
  font-weight: 900;
  text-transform: uppercase;
}

dl { margin: 28px 0 0; }
dt, dd { margin: 0; }
.profile-copy dl div {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
dt { color: var(--muted); }
dd { font-weight: 900; }

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
}

.contact-form label { display: grid; gap: 8px; }
.contact-form fieldset {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}
.contact-form legend,
.contact-form span { font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.contact-form label.check {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
}
.contact-form input[type="checkbox"],
.contact-form input[type="radio"] { width: auto; }
.wide { grid-column: 1 / -1; }

input,
textarea,
select {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
}

.contact-form button,
.project-dialog a,
.close-dialog,
.button-link {
  width: max-content;
  padding: 12px 17px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.project-dialog {
  width: min(940px, calc(100vw - 28px));
  max-height: 90vh;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.project-dialog::backdrop { background: rgba(8,8,8,.72); }
.project-dialog h2 {
  margin-bottom: 20px;
  font-size: clamp(2rem, 4.4vw, 4.6rem);
  line-height: .94;
  text-transform: uppercase;
}
.project-dialog img {
  width: 100%;
  max-height: 50vh;
  object-fit: cover;
  margin-bottom: 20px;
}
.close-dialog { float: right; margin: 0 0 18px 18px; background: var(--paper); color: var(--ink); }

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: rgba(246,244,239,.62);
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.86);
  transition: opacity 180ms ease, transform 180ms ease;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.cursor.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  padding: clamp(36px, 5vw, 64px) clamp(18px, 4vw, 54px);
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
}

.site-footer strong {
  display: block;
  max-width: 520px;
  font-size: clamp(1.6rem, 3vw, 3.1rem);
  line-height: 1;
  text-transform: uppercase;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
  font-size: .82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.site-footer p {
  margin: 20px 0 0;
  color: var(--muted);
}

.dark-page {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

.reveal-item {
  opacity: var(--reveal-o, 0);
  transform: translateY(var(--reveal-y, 46px));
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);
}

.reveal-item.is-visible {
  --reveal-o: 1;
  --reveal-y: 0;
}

.contact-hero {
  min-height: 64vh;
  padding: 124px clamp(18px, 4vw, 54px) 42px;
  display: grid;
  align-content: end;
  gap: clamp(42px, 7vw, 92px);
}

.contact-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 5vw, 110px);
}

.contact-columns article {
  display: grid;
  gap: 10px;
  max-width: 360px;
}

.contact-columns span,
.team-ledger,
.contact-radial nav,
.contact-radial address {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-columns h2 {
  margin: 0 0 16px;
  font-size: clamp(1.3rem, 1.9vw, 2.1rem);
}

.contact-columns p {
  color: var(--muted);
}

.contact-columns a,
.contact-form-dark p {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 7px;
}

.contact-hero h1 {
  max-width: 1120px;
  margin: 0;
  font-size: clamp(4.6rem, 13vw, 15.5rem);
  line-height: .78;
  letter-spacing: -.09em;
  font-weight: 950;
}

.contact-form-stage {
  padding: 0 clamp(18px, 4vw, 54px) clamp(52px, 8vw, 112px);
}

.contact-form-dark {
  position: relative;
  grid-template-columns: minmax(220px, .5fr) minmax(260px, 1fr) minmax(140px, 220px);
  max-width: none;
  width: 100%;
  gap: clamp(20px, 4vw, 70px);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink);
}

.contact-form-dark label:nth-child(5),
.contact-form-dark label:nth-child(6) { grid-column: 2; }

.contact-form-dark span { color: var(--ink); }

.contact-form-dark input,
.contact-form-dark textarea,
.contact-form-dark select {
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid rgba(8,8,8,.48);
  background: transparent;
  color: var(--ink);
}

.contact-form-dark select option { color: #080808; }

.contact-submit {
  grid-column: 3;
  grid-row: 1 / span 4;
  justify-self: end;
  align-self: center;
  width: clamp(142px, 13vw, 190px) !important;
  height: clamp(142px, 13vw, 190px);
  border-radius: 999px;
  border: 1px solid rgba(8,8,8,.32) !important;
  background: transparent !important;
  color: var(--ink) !important;
  line-height: 1;
  transition: transform 260ms ease, background 260ms ease, color 260ms ease;
}

.contact-submit:hover,
.contact-submit:focus-visible {
  transform: scale(1.06) rotate(-4deg);
  background: var(--ink) !important;
  color: var(--paper) !important;
}

.contact-form-dark p { grid-column: 1 / span 2; text-decoration: none; }

.outline-marquee {
  overflow: hidden;
  background: var(--bg);
  color: transparent;
  -webkit-text-stroke: 1px rgba(8,8,8,.32);
}

.outline-marquee div {
  width: max-content;
  padding: 34px 0;
  font-size: clamp(4.5rem, 14vw, 17rem);
  line-height: .76;
  font-weight: 950;
  letter-spacing: -.09em;
  text-transform: uppercase;
  animation: ticker 34s linear infinite;
}

.contact-radial {
  position: relative;
  display: grid;
  min-height: 78vh;
  overflow: hidden;
  padding: clamp(48px, 6vw, 84px) clamp(18px, 4vw, 54px);
  background: #fff;
  color: #000;
  align-content: space-between;
}

.radial-field {
  position: absolute;
  inset: 0 0 auto;
  height: 46%;
  background: repeating-conic-gradient(from 90deg at 50% 50%, rgba(0,0,0,.5) 0deg 1deg, transparent 1deg 8deg);
  mask-image: radial-gradient(ellipse at center, #000 0 18%, transparent 18% 100%);
  opacity: .72;
  animation: radialPulse 7s ease-in-out infinite alternate;
}

.contact-radial nav {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 25vh;
}

.contact-radial nav a::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: 8px;
  background: #000;
  transition: width 220ms ease;
}

.contact-radial nav a:hover::after { width: 48px; }

.contact-footer-mark {
  position: relative;
  z-index: 1;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
  gap: 28px;
  align-items: end;
}

.contact-footer-mark strong {
  font-size: clamp(7rem, 22vw, 24rem);
  line-height: .72;
  letter-spacing: -.12em;
}

.contact-footer-mark span {
  font-size: .84rem;
  font-weight: 950;
  text-transform: uppercase;
}

.contact-radial address {
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  bottom: clamp(36px, 5vw, 74px);
  max-width: 330px;
  font-style: normal;
}

.team-stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 156px clamp(18px, 4vw, 54px) 88px;
}

.ghost-headline {
  position: absolute;
  left: 0;
  top: 18vh;
  width: max-content;
  color: transparent;
  -webkit-text-stroke: 1px rgba(8,8,8,.26);
  font-size: clamp(5.5rem, 14vw, 17rem);
  line-height: .78;
  font-weight: 950;
  letter-spacing: -.09em;
  text-transform: uppercase;
  transform: translateX(calc(var(--scroll-shift, 0) * -120px));
  pointer-events: none;
}

.team-ledger {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(42px, 9vw, 140px);
  color: var(--muted);
}

.team-title {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 0 clamp(28px, 6vw, 86px);
  font-size: clamp(4.6rem, 12vw, 15rem);
  line-height: .78;
  letter-spacing: -.09em;
  font-weight: 950;
}

.team-showcase {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 70px);
  align-items: start;
}

.team-card {
  display: grid;
  gap: 10px;
  color: var(--ink);
  transform: translateY(calc(var(--scroll-shift, 0) * -42px));
}

.team-card:nth-child(2) { margin-top: clamp(28px, 7vw, 96px); }
.team-card:nth-child(3) { margin-top: clamp(56px, 11vw, 160px); }

.team-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  transition: filter 320ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
}

.team-card:hover img { filter: grayscale(.2) contrast(1.08); transform: translateY(-8px); }
.team-card strong { margin-top: 12px; font-weight: 950; text-transform: uppercase; }
.team-card span { color: var(--muted); }

.dark-split {
  color: var(--ink);
}

.dark-split .profile-copy {
  background: var(--paper);
  border-color: var(--line);
}

.about-hero {
  position: relative;
  min-height: 138vh;
  overflow: hidden;
  padding: 144px clamp(18px, 4vw, 54px) 80px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: clamp(28px, 7vw, 112px);
  align-content: start;
}

.about-hero h1 {
  max-width: 920px;
  margin: 0;
  font-size: clamp(4.2rem, 10.5vw, 14rem);
  line-height: .8;
  letter-spacing: -.1em;
  font-weight: 950;
}

.about-intro {
  align-self: end;
  max-width: 720px;
  padding-top: 34vh;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.42rem);
}

.about-orb {
  position: absolute;
  left: 50%;
  bottom: 2vh;
  width: min(980px, 92vw);
  aspect-ratio: 1.9 / 1;
  transform: translateX(-50%) translateY(calc(var(--scroll-shift, 0) * -80px));
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(8,8,8,.18), transparent 11%),
    repeating-radial-gradient(ellipse at 50% 92%, rgba(8,8,8,.12) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(12deg, transparent 0 28px, rgba(8,8,8,.08) 28px 29px);
  opacity: .62;
  filter: blur(.1px);
}

.about-orb span {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .7rem;
  font-weight: 950;
}

.about-collage {
  position: relative;
  min-height: 112vh;
  display: grid;
  place-items: center;
  padding: clamp(70px, 9vw, 130px) clamp(18px, 4vw, 54px);
  overflow: hidden;
}

.about-collage h2 {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0;
  font-size: clamp(4.2rem, 11vw, 14rem);
  line-height: .78;
  letter-spacing: -.1em;
  text-align: center;
}

.polaroid {
  position: absolute;
  z-index: 2;
  width: clamp(190px, 24vw, 420px);
  padding: 14px 14px 52px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0,0,0,.54);
  transform: translateY(calc(var(--scroll-shift, 0) * -90px)) rotate(var(--r, -5deg));
}

.polaroid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}

.p1 { --r: -9deg; left: 18%; top: 9%; }
.p2 { --r: 7deg; right: 16%; top: 12%; }
.p3 { --r: -4deg; left: 26%; bottom: 12%; }
.p4 { --r: 11deg; right: 24%; bottom: 8%; }

@keyframes radialPulse {
  from { transform: scale(1); opacity: .44; }
  to { transform: scale(1.08); opacity: .78; }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 920px) {
  .site-header {
    position: fixed;
    grid-template-columns: 1fr auto 1fr;
    justify-items: center;
    gap: 14px;
    background: rgba(246, 244, 239, .92);
    color: var(--ink);
    mix-blend-mode: normal;
    backdrop-filter: blur(16px);
  }

  .site-header .nav { display: none; }
  .menu-toggle { display: grid; }
  .brand { grid-column: 2; }
  .hero { min-height: 132vh; padding-top: 112px; }
  .hero h1 { font-size: clamp(2.35rem, 9.5vw, 4.4rem); }
  body.has-scroll-video .inline-media video { z-index: 6; }
  .round-link { position: relative; right: auto; top: auto; margin-top: 32px; }
  .work-browser {
    padding-top: 104px;
  }
  .work-browser-top,
  .work-browser-layout,
  .work-preview-copy {
    grid-template-columns: 1fr;
  }
  .work-browser-title {
    grid-template-columns: 1fr auto;
  }
  .work-browser-title h1 {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: clamp(5rem, 24vw, 9rem);
  }
  .work-browser-title span {
    grid-row: 2;
  }
  .work-index-wrap {
    position: relative;
    top: auto;
  }
  .work-preview {
    order: -1;
    min-height: 0;
  }
  .work-preview figure {
    min-height: clamp(340px, 86vw, 560px);
  }
  .work-preview-actions {
    flex-wrap: wrap;
    white-space: normal;
  }
  .section-title,
  .split-panel,
  .home-start,
  .services-feature,
  .service-cta,
  .profile-detail,
  .contact-form { grid-template-columns: 1fr; }
  .portfolio-grid,
  .service-list,
  .team-grid,
  .stats-grid,
  .flow-grid,
  .project-gallery,
  .project-copy,
  .meta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-gallery figure,
  .project-gallery figure.is-lead {
    grid-column: span 1;
  }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; }
  .service-accordion {
    display: grid;
    min-height: auto;
  }

  .service-accordion article,
  .service-accordion article.is-active {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(8, 8, 8, .09);
  }

  .service-accordion article:last-child { border-bottom: 0; }

  .service-accordion button {
    position: relative;
    min-height: 112px;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: start;
    gap: 16px;
    padding: 22px;
    text-align: left;
  }

  .service-accordion button em {
    writing-mode: horizontal-tb;
    transform: none;
    align-self: center;
    font-size: 1rem;
  }

  .service-accordion article.is-active button {
    opacity: 1;
    pointer-events: auto;
  }

  .service-accordion article > div {
    min-width: 0;
    max-height: 0;
    padding: 0 22px;
    overflow: hidden;
  }

  .service-accordion article.is-active > div {
    max-height: 420px;
    padding: 0 22px 28px;
  }

  .service-accordion h3 { font-size: clamp(2.1rem, 10vw, 3.8rem); }
  body.loading-done .loader-brand {
    transform: translateY(calc(-50vh + 24px)) scale(.26);
  }
  .contact-hero,
  .team-stage,
  .about-hero {
    padding-top: 118px;
  }
  .service-proof {
    grid-template-columns: 1fr;
  }
  .service-proof article:nth-child(2),
  .service-proof article:nth-child(3) {
    margin-top: 0;
  }
  .service-proof article {
    min-height: clamp(300px, 76vw, 520px);
  }
  .services-feature figure {
    transform: none;
  }
  .service-cta nav {
    width: 100%;
  }
  .home-ai-lab,
  .home-start {
    min-height: auto;
  }
  .ai-lab-card {
    min-height: 520px;
  }
  .launch-board a,
  .launch-board a:nth-child(2),
  .launch-board a:nth-child(3) {
    margin-left: 0;
  }
  .launch-board a:hover {
    transform: translateY(-6px);
  }
  .contact-columns,
  .team-showcase,
  .about-hero,
  .contact-radial nav,
  .contact-footer-mark {
    grid-template-columns: 1fr;
  }
  .contact-columns {
    gap: 22px;
  }
  .contact-columns article {
    max-width: none;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .contact-hero h1 {
    font-size: clamp(4.2rem, 21vw, 9rem);
  }
  .contact-form-dark {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .contact-form-dark label:nth-child(5),
  .contact-form-dark label:nth-child(6),
  .contact-form-dark p,
  .contact-submit {
    grid-column: 1;
  }
  .contact-submit {
    grid-row: auto;
    justify-self: start;
  }
  .contact-radial {
    min-height: 70vh;
  }
  .contact-radial nav {
    margin-top: 18vh;
  }
  .contact-radial address {
    position: static;
    margin-top: 28px;
  }
  .team-ledger {
    display: grid;
    margin-bottom: 46px;
  }
  .ghost-headline {
    top: 20vh;
    font-size: clamp(5rem, 24vw, 10rem);
  }
  .team-card:nth-child(2),
  .team-card:nth-child(3) {
    margin-top: 0;
  }
  .about-hero {
    min-height: 112vh;
  }
  .about-intro {
    padding-top: 10vh;
  }
  .about-collage {
    min-height: auto;
    display: grid;
    gap: 18px;
  }
  .about-collage h2 {
    text-align: left;
  }
  .polaroid {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(100%, 420px);
    justify-self: center;
  }
}

@media (max-width: 720px) {
  body { font-size: 14px; }
  .hero h1 { font-size: 2.28rem; }
  .page-hero h1,
  .section-title h2,
  .split-panel h2,
  .services-feature h2,
  .service-cta h2 { font-size: clamp(2.25rem, 12vw, 4.85rem); }
  .stack-section {
    height: auto;
    padding: 0;
    background: var(--bg);
  }
  .stack-pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: auto;
    display: block;
    overflow: visible;
    padding: 76px 16px 54px;
  }
  .stack-pin::before,
  .stack-pin::after {
    display: none;
  }
  .stack-heading {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: 0 0 28px;
    text-align: left;
    transform: none;
    opacity: 1;
  }
  .stack-heading .eyebrow {
    margin-top: 0;
    transform: none;
    opacity: 1;
  }
  .stack-heading h2 {
    width: min(100%, 11ch);
    margin: 0;
    font-size: clamp(3rem, 16vw, 4.9rem);
    line-height: .84;
  }
  .stack-cards {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    z-index: 1;
  }
  .stack-card,
  .stack-card.wide,
  .stack-card.tall {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
    transform: none;
    opacity: 1;
    border: 1px solid rgba(8, 8, 8, .14);
    box-shadow: 0 18px 42px rgba(8, 8, 8, .18);
    cursor: pointer;
  }
  .stack-card:nth-child(3n + 1) {
    aspect-ratio: 16 / 11;
  }
  .stack-card img {
    filter: brightness(.84) saturate(1.03);
    transform: none;
  }
  .stack-card span {
    opacity: 1;
    padding: 16px;
    font-size: .82rem;
  }
  .stack-card::after {
    right: 14px;
    left: auto;
    top: 14px;
    width: 44px;
    height: 44px;
    opacity: .95;
    transform: none;
    font-size: 1rem;
  }
  .ticker-row { font-size: 2.45rem; }
  .portfolio-grid,
  .service-list,
  .team-grid,
  .stats-grid,
  .flow-grid,
  .project-gallery,
  .project-copy,
  .meta-strip { grid-template-columns: 1fr; }
  .flow-grid article {
    min-height: 230px;
  }
  .service-cta {
    padding-inline: 18px;
  }
  .preview-gallery {
    display: none;
  }
  .project-gallery img {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .project-tile.wide,
  .project-tile.tall { grid-column: span 1; grid-row: span 1; }
  .work-index button {
    grid-template-columns: 58px minmax(0, 1fr);
  }
  .work-index button,
  .work-index a {
    min-height: 76px;
  }
  .work-preview h2 {
    font-size: clamp(2.35rem, 14vw, 4.8rem);
  }
  .profile-copy dl div { grid-template-columns: 1fr; gap: 4px; }
  .cursor { display: none; }
  .site-header {
    padding-inline: 14px;
  }
  .mobile-menu {
    z-index: 49;
    padding-top: 104px;
  }
  .mobile-menu a {
    font-size: clamp(2.35rem, 14vw, 5rem);
  }
  .contact-hero,
  .team-stage,
  .about-hero,
  .contact-form-stage {
    padding-inline: 16px;
  }
  .contact-hero h1,
  .about-hero h1 {
    letter-spacing: -.075em;
  }
  .contact-hero h1,
  .team-title,
  .about-hero h1,
  .work-browser-title h1 {
    overflow-wrap: anywhere;
  }
  .outline-marquee div {
    font-size: clamp(4rem, 24vw, 8rem);
  }
  .contact-footer-mark strong {
    font-size: clamp(6rem, 34vw, 10rem);
  }
  .home-ai-lab,
  .home-start {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .home-ai-lab::before,
  .home-start::before {
    display: none;
  }
  .ai-copy h2,
  .launch-copy h2 {
    font-size: clamp(3.05rem, 15vw, 5.3rem);
  }
  .ai-lab-card {
    min-height: auto;
    padding: 18px;
  }
  .ai-lab-card::before {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    margin-bottom: 12px;
  }
  .ai-lab-card::after {
    width: 92%;
    right: -34%;
  }
  .ai-reel {
    min-height: 330px;
    margin-top: 8px;
  }
  .ai-reel img {
    width: 64%;
    border-width: 7px;
  }
  .ai-reel img:nth-child(1) {
    left: -5%;
    top: 46px;
  }
  .ai-reel img:nth-child(2) {
    left: 18%;
    top: 12px;
  }
  .ai-reel img:nth-child(3) {
    right: -5%;
    top: 84px;
  }
  .ai-lab-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ai-lab-grid span {
    min-height: 64px;
  }
  .ai-lab-card p {
    grid-template-columns: 1fr;
  }
  .launch-board a {
    min-height: 118px;
    padding: 18px;
  }
  .launch-board span {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-video-caption { display: none; }
  body.has-scroll-video .inline-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  .project-tile {
    opacity: 1;
    transform: none;
  }
  .loader,
  .loader-brand,
  .reveal-item,
  .ghost-headline,
  .team-card,
  .about-orb,
  .polaroid {
    transform: none !important;
  }
  .reveal-item {
    opacity: 1;
  }
  .stack-section { height: auto; background: var(--bg); }
  .stack-pin, .stack-cards, .stack-card {
    position: static;
    height: auto;
    transform: none !important;
  }
  .stack-pin {
    min-height: auto;
    display: block;
    padding: clamp(72px, 12vw, 132px) 18px;
  }

  .stack-heading {
    position: static;
    transform: none;
    width: min(980px, 100%);
    margin: 0 auto 32px;
  }

  .stack-heading h2 { font-size: clamp(2.9rem, 8vw, 6rem); }

  .stack-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0 auto;
    padding: 0;
    max-width: 900px;
  }

  .stack-card {
    width: auto;
    min-height: 280px;
    opacity: 1;
  }

  .stack-card span {
    opacity: 1;
  }
}

/* Client update: stable film, six service categories and balanced type. */
.hero { min-height: 0; max-width: 1600px; padding: 132px clamp(18px,4vw,64px) 64px; gap: 38px; }
.hero-copy h1 { max-width: 1120px; font-size: clamp(2.3rem,5.5vw,5.5rem); line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; }
.hero-intro { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-top: 28px; }
.hero-intro p { max-width: 460px; margin: 0; color: var(--muted); }
.hero-film { position: relative; margin: 0; }
.hero-film video { position: static; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; background: #080808; border-radius: 3px; }
.hero-film figcaption { margin-top: 10px; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.page-hero h1, .section-title h2, .split-panel h2, .service-flow h2, .services-feature h2, .service-cta h2 { font-size: clamp(2rem,4.4vw,4.3rem); line-height: 1.05; letter-spacing: -.05em; text-wrap: balance; }
.about-hero h1, .contact-hero h1 { font-size: clamp(2.6rem,6.5vw,6.5rem); line-height: 1.03; text-wrap: balance; letter-spacing: -.055em; }
.about-collage h2 { font-size: clamp(2.5rem,6vw,5.8rem); }
.work-browser-title h1 { font-size: clamp(4.5rem,13vw,12rem); }
.work-preview-copy h2 { font-size: clamp(1.6rem,2.7vw,2.6rem); line-height: 1.08; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 36px; }
.service-card { display: flex; flex-direction: column; padding: clamp(22px,3vw,38px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.service-card h3 { font-size: clamp(1.4rem,2.25vw,2.25rem); line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.service-card p { color: var(--muted); }
.service-card .button-link { margin-top: auto; align-self: start; font-size: .78rem; }
.footer-services { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 12px 24px; border-top: 1px solid var(--line); padding-top: 24px; font-size: .75rem; }
.site-footer .footer-services a { padding: 0; }
.contact-form input, .contact-form select, .contact-form textarea { max-width: 100%; min-width: 0; }
.contact-form fieldset { min-width: 0; }
.contact-form .check { display: flex; align-items: start; gap: 10px; }
.contact-form .check input { flex: 0 0 auto; width: auto; margin-top: 5px; }
.mobile-menu { overflow-y: auto; }
@media(max-width: 920px) {
 .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .hero { padding-top: 112px; }
 .hero-intro { flex-wrap: wrap; }
}
@media(max-width: 600px) {
 .hero { gap: 26px; padding-top: 110px; padding-bottom: 36px; }
 .hero-copy h1 { font-size: clamp(2rem,8.5vw,3.1rem); }
 .hero-intro { margin-top: 22px; gap: 16px; }
 .hero-intro p { font-size: .95rem; }
 .hero-film video { aspect-ratio: 16/9; }
 .service-grid { grid-template-columns: minmax(0,1fr); margin-top: 24px; }
 .service-card { padding: 24px; }
 .service-card h3 { font-size: 1.65rem; }
 .page-hero h1, .section-title h2, .split-panel h2, .service-flow h2, .services-feature h2, .service-cta h2 { font-size: clamp(2rem,8vw,2.75rem); }
 .about-hero h1, .contact-hero h1 { font-size: clamp(2.4rem,10vw,3.5rem); }
 .about-collage h2 { font-size: 2.6rem; }
 .work-browser-title h1 { font-size: clamp(4rem,20vw,7rem); }
 .mobile-menu { gap: 0; align-content: start; padding-top: 100px; }
 .mobile-menu a { font-size: 1.8rem; padding: 14px 0; line-height: 1.1; }
 .contact-form .check { font-size: .9rem; line-height: 1.4; }
 .footer-services { flex-direction: column; }
}
.mobile-menu[hidden] { display: none; }


/* Fullscreen opening film with a gentle scroll exit. */
.hero-fullscreen { position: relative; isolation: isolate; width: 100%; max-width: none; height: 100vh; height: 100svh; min-height: 600px; padding: 130px clamp(22px,4vw,64px) 110px; margin: 0; display: flex; align-items: flex-end; overflow: hidden; background: #151515; color: #fff; }
.hero-fullscreen .hero-film { position: absolute; inset: 0; z-index: -2; margin: 0; transform: none; will-change: auto; }
.hero-fullscreen .hero-film video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.hero-fullscreen::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.05) 25%,rgba(0,0,0,.68)); }
.hero-fullscreen .hero-copy { width: 100%; transform: translate3d(0,var(--hero-copy-y,0px),0); opacity: var(--hero-copy-opacity,1); will-change: transform,opacity; }
.hero-fullscreen .eyebrow { color: #eee4c5; }
.hero-fullscreen h1 { max-width: 1060px; font-size: clamp(2.5rem,5.4vw,5.4rem); line-height: 1.01; text-shadow: 0 2px 24px rgba(0,0,0,.15); }
.hero-fullscreen .hero-intro { align-items: end; margin-top: 24px; }
.hero-fullscreen .hero-intro p { color: rgba(255,255,255,.85); }
.hero-fullscreen .button-link { background: #f6f4ef; color: #080808; border-color: #f6f4ef; }
.hero-scroll,.hero-playback { position: absolute; bottom: 30px; z-index: 3; display: flex; align-items: center; gap: 18px; color: #fff; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-scroll { left: clamp(22px,4vw,64px); }
.hero-scroll span { font-size: 1.3rem; }
.hero-playback { right: clamp(22px,4vw,64px); background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.5); border-radius: 30px; padding: 10px 15px; cursor: pointer; }
.hero-playback:focus-visible,.hero-scroll:focus-visible { outline: 2px solid white; outline-offset: 5px; }
#what-we-do { scroll-margin-top: 70px; }
@media(max-width:600px) {
 .hero-fullscreen { min-height: 560px; padding: 105px 22px 105px; }
 .hero-fullscreen h1 { font-size: clamp(2.2rem,9vw,3.2rem); }
 .hero-fullscreen .hero-intro { display: grid; gap: 20px; }
 .hero-fullscreen .hero-intro p { max-width: 330px; font-size: .9rem; }
 .hero-fullscreen .button-link { justify-self: start; }
 .hero-scroll,.hero-playback { bottom: 24px; font-size: .62rem; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-fullscreen .hero-film,.hero-fullscreen .hero-copy { transform: none; opacity: 1; will-change: auto; }
}

body.hero-header .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; mix-blend-mode: normal; color: #fff; }
body.hero-header.nav-open .site-header { color: var(--ink); }
.studio-feature-image{max-width:var(--max);margin:0 auto 60px;padding:0 clamp(18px,4vw,54px)}
.studio-feature-image img{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover}
.studio-feature-image figcaption{display:flex;justify-content:space-between;gap:20px;font-size:.68rem;margin-top:12px;color:var(--muted)}
.studio-feature-image a{border-bottom:1px solid currentColor}
.about-hero{min-height:0}.work-preview-meta span:empty{display:none}
@media(max-width:760px){.studio-feature-image img{aspect-ratio:4/3}.studio-feature-image figcaption{flex-wrap:wrap;gap:8px}}
.about-hero{align-items:center;gap:clamp(26px,5vw,70px);padding-bottom:54px}
.about-intro{padding-top:0;align-self:center;font-size:1rem}
.website-project-preview>img{object-fit:contain!important;background:#e4e0d5}
.website-project-preview .preview-gallery{display:none}
.site-header{mix-blend-mode:normal;color:var(--ink);background:rgba(246,244,239,.96);backdrop-filter:blur(12px)}
.loader.is-hidden{visibility:hidden}