@font-face {
  font-family: RFDisplay;
  src: local("Iowan Old Style"), local("Baskerville");
  font-display: swap;
}

/* Add the licensed Halimun webfont at fonts/Halimun.woff2. The local sources
   let designers who already have it installed preview the exact wordmark. */
@font-face {
  font-family: RFHalimun;
  src: url("fonts/Halimun.woff2") format("woff2"),
       local("Halimun"),
       local("Halimun Script Style");
  font-display: swap;
}

:root {
  --ink: #0a0908;
  --paper: #f1ede4;
  --acid: #dfff45;
  --coral: #ff5c3f;
  --blue: #6d8fff;
  --violet: #c59aff;
  --serif: RFDisplay, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --pad: clamp(20px, 3.25vw, 56px);
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  cursor: default;
}

body.menu-open {
  overflow: hidden;
}

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

button {
  color: inherit;
  font: inherit;
}

::selection {
  color: var(--ink);
  background: var(--acid);
}

.noise {
  position: fixed;
  z-index: 80;
  inset: -60%;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .22s steps(2) infinite;
}

@keyframes grain {
  0% { transform: translate3d(-2%, 1%, 0); }
  25% { transform: translate3d(3%, -2%, 0); }
  50% { transform: translate3d(-1%, 3%, 0); }
  75% { transform: translate3d(2%, -1%, 0); }
  100% { transform: translate3d(0, 2%, 0); }
}

.signal {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}

.is-ready .signal {
  opacity: 1;
}

/* ── Homepage flight object ────────────────────────────────────── */

.drone-stage {
  --drone-alpha: 0;
  position: fixed;
  z-index: 60;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  contain: strict;
}

.drone-stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--drone-alpha);
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .38));
}

.drone-speech {
  --drone-x: 50%;
  --drone-y: 50%;
  --speech-accent: var(--acid);
  position: fixed;
  z-index: 62;
  left: var(--drone-x);
  top: var(--drone-y);
  display: grid;
  gap: 5px;
  width: clamp(154px, 15vw, 218px);
  padding: 13px 15px 12px;
  border: 1px solid var(--ink);
  border-radius: 15px 15px 4px 15px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--speech-accent), 0 12px 36px rgba(0, 0, 0, .18);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  transform: translate3d(-112%, 38px, 0) scale(.88) rotate(-1.5deg);
  transform-origin: 100% 0;
  transition: opacity .24s ease, transform .42s var(--ease);
}

.drone-speech::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 9px;
  width: 20px;
  height: 16px;
  border-top: 1px solid var(--ink);
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: rotate(8deg);
}

.drone-speech[data-side="right"] {
  border-radius: 15px 15px 15px 4px;
  transform: translate3d(12%, -118%, 0) scale(.88) rotate(1.5deg);
  transform-origin: 0 100%;
}

.drone-speech[data-side="right"]::before {
  right: auto;
  left: -12px;
  top: auto;
  bottom: 9px;
  transform: rotate(188deg);
}

.drone-speech.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-112%, 38px, 0) scale(1) rotate(-1.5deg);
}

.drone-speech[data-side="right"].is-visible {
  transform: translate3d(12%, -118%, 0) scale(1) rotate(1.5deg);
}

.drone-speech strong {
  font: 600 10px/1.35 var(--mono);
  letter-spacing: .025em;
}

.drone-speech span,
.drone-speech b {
  font: 7px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.drone-speech span { opacity: .58; }

.drone-speech b {
  margin-top: 3px;
  color: color-mix(in srgb, var(--speech-accent), var(--ink) 28%);
}

.drone-speech:hover {
  box-shadow: 8px 8px 0 var(--speech-accent), 0 16px 42px rgba(0, 0, 0, .24);
}

/* ════════════════════════════════════════════════════════════════
   ARRIVAL, AND EVERY NAVIGATION AFTER IT
   The studio is four documents doing the work of one surface. The
   splash is the front door of a visit: it plays on the first document
   and never again, because a door you walk through four times stops
   being an entrance and starts being a queue.

   Which one this is has already been decided by the inline script in
   the head, before <body> is parsed — that is the whole point of doing
   it there. On a return it stamps .is-ready on <html>, so every
   entrance transition below resolves at its finished value on the very
   first style pass and simply never runs. There is no second
   choreography to sit through and nothing to undo afterwards.
   ════════════════════════════════════════════════════════════════ */

:root[data-arrival="return"] .loader {
  display: none;
}

/* Reveals that are already on screen when a return arrival paints settle
   without moving; the ones further down the page still animate as they are
   scrolled to. studio.js drops this class after the observer's first pass. */
:root.is-settling .reveal {
  transition: none;
}

/* A route change is a real document load, so the browser is the only thing
   that can make it continuous. Both sides opt in; the header and the page
   are captured separately, which is what lets the chrome hold still while
   the content underneath it changes. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: rf-leave .18s var(--ease) both;
}

::view-transition-new(root) {
  animation: rf-arrive .42s var(--ease) both;
}

@keyframes rf-leave {
  to { opacity: 0; }
}

@keyframes rf-arrive {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* Identical on all four routes, so lifting it out of the crossfade makes it
   read as one persistent header rather than four that happen to match. */
.nav {
  view-transition-name: rf-nav;
}

::view-transition-group(rf-nav) {
  animation-duration: .3s;
}

/* The one part of the header that does change. Naming only the current tab's
   hairline gives the transition a pair to match, so it travels from the tab
   you left to the tab you asked for instead of blinking off and on. Below
   900px the links are display:none, nothing is captured, and this is inert. */
.nav__links a[aria-current="page"] i {
  view-transition-name: rf-nav-mark;
}

::view-transition-group(rf-nav-mark) {
  animation-duration: .46s;
  animation-timing-function: var(--ease);
}

.loader {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  transition: clip-path .62s var(--ease) .06s;
  clip-path: inset(0 0 0 0);
}

.is-ready .loader {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

.preview .loader {
  display: none;
}

/* ?preview — skip the loader and every entrance animation, so a page can be
   captured or reviewed in its settled state. */
.preview .nav,
.preview .hero__line i,
.preview .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.preview .word {
  opacity: 1 !important;
  transform: none !important;
}

.preview .signal {
  opacity: 1;
  transition: none;
}

/* The logotype is a drawing at a fixed 6:1 ratio, so it is sized by width and
   lets height follow — a height would make the ratio fight the box. */
.loader__word {
  display: block;
  width: min(62vw, 460px);
  height: auto;
}

.loader__line {
  position: absolute;
  right: 10vw;
  bottom: 9vh;
  left: 10vw;
  height: 1px;
  background: rgba(10, 9, 8, .15);
}

.loader__line i {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  animation: load .8s var(--ease) forwards;
}

.loader__count {
  position: absolute;
  right: 10vw;
  bottom: calc(9vh + 14px);
  font: 10px/1 var(--mono);
}

@keyframes load {
  to { transform: scaleX(1); }
}

.nav {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 74px;
  padding: 0 var(--pad);
  color: var(--paper);
  transform: translateY(-100%);
  /* Hairline only once the page has moved — at rest the header should read as
     part of the hero, not as a lid on top of it. */
  box-shadow: 0 1px 0 rgba(241, 237, 228, 0);
  transition:
    transform .7s var(--ease) .34s,
    box-shadow .4s ease;
}

/* Glass, so the header carries its own contrast instead of borrowing it from
   whatever happens to be scrolling underneath. Two layers, cross-faded, because
   the top of a page and the middle of one want different things:

     ::before  at rest over a hero — a soft scrim whose blur is masked away at
               the bottom edge, so nothing cuts a hard 74px seam across the
               full-bleed type or video behind it.
     ::after   once scrolling — an even bar of glass, edge to edge, which is the
               only version that stays legible when a paper-coloured section
               passes underneath and a fading edge would just read as smudge. */
.nav::before,
.nav::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}

.nav::before {
  opacity: .85;
  background: linear-gradient(
    180deg,
    rgba(10, 9, 8, .6),
    rgba(10, 9, 8, .32) 72%,
    rgba(10, 9, 8, 0)
  );
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}

.nav::after {
  opacity: 0;
  background: rgba(10, 9, 8, .68);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
}

/* Past the first screenful the header sits over body copy rather than a hero,
   so it firms up to roughly the weight of the project pages' own header. */
.nav.is-scrolled {
  box-shadow: 0 1px 0 rgba(241, 237, 228, .1);
}

.nav.is-scrolled::before {
  opacity: 0;
}

.nav.is-scrolled::after {
  opacity: 1;
}

.is-ready .nav {
  transform: translateY(0);
}

/* No blur available (older Firefox, blur disabled): the scrim alone has to do
   the legibility work, so it gets opaque enough to stand on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav::before {
    background: linear-gradient(
      180deg,
      rgba(10, 9, 8, .86),
      rgba(10, 9, 8, .58) 72%,
      rgba(10, 9, 8, 0)
    );
  }

  .nav::after {
    background: rgba(10, 9, 8, .88);
  }
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
}

.brand-wordmark {
  display: block;
  width: clamp(80px, 6.6vw, 100px);
  height: auto;
}

.nav__links {
  font: 500 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  gap: 30px;
}

.nav__links a {
  position: relative;
  padding: 8px 0;
}

/* The underline is an element rather than a ::after because a pseudo-element
   cannot carry a view-transition-name, and this hairline is the one piece of
   the header that has something to say when the route changes. */
.nav__links a i {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}

.nav__links a:hover i {
  transform: scaleX(1);
  transform-origin: left;
}

/* current page stays underlined */
.nav__links a[aria-current="page"] i {
  transform: scaleX(1);
}

.menu nav a[aria-current="page"] small {
  color: var(--acid);
}

.nav__menu {
  display: none;
  width: 42px;
  height: 42px;
  padding: 12px 8px;
  border: 0;
  background: transparent;
}

.nav__menu span {
  display: block;
  height: 1px;
  margin: 6px 0;
  background: currentColor;
}

.menu {
  position: fixed;
  z-index: 150;
  inset: 0;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
  opacity: 0;
  background: var(--acid);
  color: var(--ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .75s var(--ease), opacity .2s, visibility .75s;
}

.menu.is-open {
  visibility: visible;
  opacity: 1;
  clip-path: inset(0);
}

.menu__close {
  position: absolute;
  top: 24px;
  right: var(--pad);
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  cursor: pointer;
  font: 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.menu nav {
  display: flex;
  flex-direction: column;
}

.menu nav a {
  display: flex;
  align-items: baseline;
  gap: 24px;
  width: fit-content;
  font: 400 clamp(58px, 13vw, 120px)/.92 var(--serif);
  letter-spacing: -.065em;
}

.menu nav small {
  font: 9px/1 var(--mono);
  letter-spacing: .12em;
}

.menu > p {
  position: absolute;
  bottom: var(--pad);
  left: var(--pad);
  margin: 0;
  font: 10px/1.7 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.progress {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  pointer-events: none;
}

.progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: left;
}

.cursor {
  position: fixed;
  z-index: 140;
  top: 0;
  left: 0;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  color: var(--ink);
  transform: translate3d(-100px, -100px, 0);
}

.cursor i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent, var(--acid));
  transform: scale(.16);
  transition: transform .45s var(--ease), background-color .35s;
}

.cursor span {
  position: relative;
  opacity: 0;
  font: 9px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: opacity .25s;
}

.cursor.is-visible {
  opacity: 1;
}

.cursor.is-view i {
  transform: scale(1);
}

.cursor.is-view span {
  opacity: 1;
}

main,
section {
  position: relative;
  z-index: 1;
}

/* ── Route gating ───────────────────────────────────────────────────
   studio.html holds all four routes at once. The inline <head> script
   stamps html[data-route] from ?p= before the body is parsed, so the
   sections belonging to other routes never paint — no flash, no JS
   show/hide after the fact.

   Only the inactive groups are touched, so an active section keeps
   whatever display its own rule gives it (grid, flex, block).

   ~= is a whitespace-separated word match, so data-page="contact home" puts
   one section on both routes — the way to start block is authored once and
   closes the home page after the coral sign-off. studio-render.js's onRoute() tests the same
   list, so JS and CSS never disagree about what is on screen. */
:root[data-route="home"]    [data-page]:not([data-page~="home"]),
:root[data-route="works"]   [data-page]:not([data-page~="works"]),
:root[data-route="about"]   [data-page]:not([data-page~="about"]),
:root[data-route="contact"] [data-page]:not([data-page~="contact"]) {
  display: none;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 108px var(--pad) 32px;
  background: var(--ink);
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0.6;
  filter: saturate(1.05) contrast(1.08);
  transform: scale(1.02);
  transition: opacity 1.1s var(--ease), transform 8s ease-out;
}

.is-ready .hero__video {
  opacity: 0.65;
  transform: scale(1);
}

.hero__video-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 65% 45%, rgba(10, 9, 8, 0.1) 0%, rgba(10, 9, 8, 0.72) 75%),
    linear-gradient(180deg, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.15) 35%, rgba(10, 9, 8, 0.55) 75%, rgba(10, 9, 8, 0.96) 100%);
}

.hero__hud {
  position: absolute;
  inset: var(--pad);
  top: 74px;
  bottom: 32px;
  pointer-events: none;
  z-index: 1;
}

.hud__item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 10px/1 var(--mono);
  letter-spacing: 0.16em;
  color: rgba(241, 237, 228, 0.75);
}

.hud__item--tl {
  top: 18px;
  left: 20px;
}

.hud__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
  animation: hudPulse 2.4s infinite ease-in-out;
}

.hud__item--tr {
  top: 14px;
  right: 20px;
  pointer-events: auto;
}

.hud__pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(241, 237, 228, 0.25);
  background: rgba(10, 9, 8, 0.55);
  backdrop-filter: blur(8px);
  color: var(--paper);
  font: 9px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@keyframes hudPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.2); }
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.hero::before {
  top: 74px;
  right: var(--pad);
  bottom: 32px;
  left: var(--pad);
  border: 1px solid rgba(241, 237, 228, .13);
}

.hero::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(241, 237, 228, .08);
}

.hero__meta {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding: 0 18px;
  color: rgba(241, 237, 228, .62);
  font: 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero__title {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: var(--pad);
  left: var(--pad);
  margin: 0;
  transform: translateY(-54%);
  font: 400 clamp(66px, 10.75vw, 194px)/.76 var(--serif);
  letter-spacing: -.078em;
}

.hero__line {
  display: block;
  overflow: hidden;
  padding: .25em .04em .22em;
  margin: -.25em -.04em -.22em;
}

.hero__line i {
  display: block;
  font-style: normal;
  transform: translateY(115%) rotate(2deg);
  transform-origin: left bottom;
  transition: transform 1.05s var(--ease) .42s;
}

.hero__cycle {
  display: inline-grid;
  overflow: hidden;
  width: auto;
  vertical-align: -.05em;
  transition: width .6s var(--ease);
}

.hero__cycle-word {
  grid-area: 1 / 1;
  display: inline-block;
  width: max-content;
  justify-self: start;
  white-space: nowrap;
  transition: opacity .48s ease, transform .6s var(--ease);
}

.hero__cycle-word.is-leaving {
  opacity: 0;
  transform: translateY(-110%) rotate(-2deg);
}

.hero__cycle-word.is-entering {
  opacity: 0;
  transform: translateY(110%) rotate(2deg);
  transition: none;
}

.hero__line--two {
  padding-left: 9vw;
}

.hero__line--two i {
  transition-delay: .53s;
}

.is-ready .hero__line i {
  transform: translateY(0) rotate(0);
}

.hero__title em {
  color: var(--acid);
  font-weight: 400;
}

.hero__foot {
  position: absolute;
  z-index: 3;
  right: calc(var(--pad) + 18px);
  bottom: 48px;
  display: flex;
  align-items: end;
  gap: clamp(28px, 4vw, 70px);
}

.hero__foot p {
  width: min(31vw, 420px);
  margin: 0;
  color: rgba(241, 237, 228, .7);
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.55;
}

.round-link {
  display: grid;
  width: 102px;
  height: 102px;
  padding: 17px;
  border: 1px solid rgba(241, 237, 228, .55);
  border-radius: 50%;
  transition: color .4s, background-color .4s, transform .4s var(--ease);
}

.round-link span {
  font: 9px/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.round-link b {
  align-self: end;
  justify-self: end;
  font-size: 18px;
  font-weight: 400;
}

.round-link:hover {
  color: var(--ink);
  background: var(--paper);
  transform: scale(1.04);
}

.hero__index {
  position: absolute;
  z-index: 3;
  bottom: 47px;
  left: calc(var(--pad) + 18px);
  display: flex;
  align-items: center;
  gap: 9px;
  font: 9px/1 var(--mono);
}

.hero__index i {
  display: block;
  width: 44px;
  height: 1px;
  overflow: hidden;
  background: rgba(241, 237, 228, .25);
}

.hero__index i::before {
  content: "";
  display: block;
  width: 60%;
  height: 100%;
  background: var(--acid);
  animation: pulse-line 1.8s var(--ease) infinite;
}

@keyframes pulse-line {
  from { transform: translateX(-105%); }
  to { transform: translateX(175%); }
}

.hero__scroll {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: calc(var(--pad) - 5px);
  margin: 0;
  color: rgba(241, 237, 228, .4);
  font: 8px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: translate(50%, -50%) rotate(90deg);
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
}

.reveal.in-view,
.hero .reveal {
  opacity: 1;
  transform: translateY(0);
}

.hero .reveal {
  transition-delay: .62s;
}

.belief {
  min-height: 128svh;
  padding: 11vh var(--pad) 12vh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}

.belief__eyebrow {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(10, 9, 8, .24);
  font: 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.belief__statement {
  max-width: 12em;
  margin: 11vh 0 0;
  font: 400 clamp(54px, 7.7vw, 137px)/.91 var(--serif);
  letter-spacing: -.065em;
}

.belief__statement .word,
.method__head h2 .word {
  display: inline-block;
  opacity: .13;
  transform: translateY(.22em);
  transition: opacity .45s, transform .65s var(--ease);
}

.belief__statement .word.is-lit,
.method__head h2 .word.is-lit {
  opacity: 1;
  transform: translateY(0);
}

.belief__statement em {
  color: var(--coral);
  font-weight: 400;
}

.belief__notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5vw;
  width: min(48vw, 700px);
  margin: 14vh 0 0 auto;
}

.belief__notes p {
  margin: 0;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.55;
}

.belief__stamp {
  position: absolute;
  right: 7vw;
  top: 15vh;
  display: grid;
  width: clamp(100px, 10vw, 160px);
  aspect-ratio: 1;
  place-items: center;
}

.belief__stamp svg {
  position: absolute;
  inset: 0;
  animation: spin 18s linear infinite;
}

.belief__stamp text {
  font: 8px var(--mono);
  letter-spacing: 1.3px;
  fill: currentColor;
}

.belief__stamp span {
  font-size: 24px;
}

/* Filter definitions only — never painted, and never allowed to take space. */
.filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.belief__art {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 1;
  margin: clamp(40px, 5vh, 64px) calc(var(--pad) * -1) -12vh;
  overflow: hidden;
  background: var(--paper);
}

.belief__art img,
.belief__art video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Lift the footage within the wide crop while retaining an upper-frame bias. */
  object-position: center 40%;
  /* The footage sits on its own cream (#e4ddcc), which is not --paper. It used
     to be multiplied against the section, which pushed that cream to #d7cdb6 —
     a wash roughly 14 dE from the paper it was meant to disappear into, and
     visible as a warm band across the full bleed. #paper-balance is a flat
     per-channel gain (241/228, 237/221, 228/204) that lands the backdrop on
     --paper exactly, so the artwork reads as ink on the section itself. Only
     the blown highlights in the tablecloth clip: 0.03% of the visible crop. */
  filter: url(#paper-balance);
  /* Let the paper section show through at the join, then gradually bring the
     footage in. This removes the video's rectangular beige top edge. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, .12) 8%,
    rgba(0, 0, 0, .58) 20%,
    #000 36%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, .12) 8%,
    rgba(0, 0, 0, .58) 20%,
    #000 36%
  );
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Studio difference ─────────────────────────────────────────── */

.craft {
  padding: 12vh var(--pad) 14vh;
  overflow: hidden;
  border-bottom: 1px solid rgba(241, 237, 228, .16);
  background:
    radial-gradient(circle at 86% 18%, rgba(197, 154, 255, .16), transparent 27%),
    var(--ink);
  color: var(--paper);
}

.craft__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(241, 237, 228, .2);
  color: rgba(241, 237, 228, .62);
  font: 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.craft__statement {
  display: grid;
  grid-template-columns: 1fr 3fr;
  margin-top: 12vh;
}

.craft__statement p {
  grid-column: 2;
  max-width: 10.8em;
  margin: 0;
  font: 400 clamp(58px, 8.2vw, 146px)/.87 var(--serif);
  letter-spacing: -.07em;
}

.craft__statement .word {
  display: inline-block;
  opacity: .13;
  transform: translateY(.22em);
  transition: opacity .45s, transform .65s var(--ease);
}

.craft__statement .word.is-lit {
  opacity: 1;
  transform: translateY(0);
}

.craft__statement em {
  color: var(--violet);
  font-weight: 400;
}

.craft__intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 86px);
  width: min(66vw, 950px);
  margin: 12vh 0 0 auto;
}

.craft__intro p {
  margin: 0;
  color: rgba(241, 237, 228, .68);
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.65;
}

.craft__principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14vh;
  border-top: 1px solid rgba(241, 237, 228, .18);
  border-left: 1px solid rgba(241, 237, 228, .18);
}

.craft-card {
  min-height: 330px;
  padding: clamp(24px, 2.6vw, 42px);
  border-right: 1px solid rgba(241, 237, 228, .18);
  border-bottom: 1px solid rgba(241, 237, 228, .18);
}

.craft-card > span {
  color: var(--violet);
  font: 9px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.craft-card h3 {
  max-width: 8em;
  margin: clamp(76px, 9vh, 120px) 0 0;
  font: 400 clamp(34px, 3.5vw, 58px)/.92 var(--serif);
  letter-spacing: -.05em;
}

.craft-card p {
  max-width: 28em;
  margin: 22px 0 0;
  color: rgba(241, 237, 228, .56);
  font-size: 13px;
  line-height: 1.6;
}

.work {
  padding: 16vh var(--pad) 12vh;
  background: var(--ink);
  color: var(--paper);
}

.section-head {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: end;
  min-height: 62vh;
  padding-bottom: 8vh;
}

/* Paintings frame the text and leave the drone's flight space open.
   The work artwork ends before the project list; images load near the fold. */
.section-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.section-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-art::after {
  content: "";
  position: absolute;
  inset: 0;
}
.section-art--proof {
  inset: -16vh calc(-1 * var(--pad)) 0;
}
.section-art--proof img { object-position: center 57%; opacity: .62; }
.section-art--proof::after {
  background: linear-gradient(90deg, rgba(10,9,8,.1), rgba(10,9,8,.2) 24%, rgba(10,9,8,.74) 43%, rgba(10,9,8,.55)),
    linear-gradient(180deg, var(--ink), transparent 30%, transparent 66%, var(--ink));
}
.interlude:has(.section-art) { isolation: isolate; }
.section-art--senior img { object-position: center 58%; opacity: .66; }
.section-art--senior::after {
  background: linear-gradient(90deg, rgba(10,9,8,.8), rgba(10,9,8,.62) 40%, rgba(10,9,8,.12) 72%),
    linear-gradient(180deg, rgba(10,9,8,.68), transparent 45%, rgba(10,9,8,.2) 78%, rgba(10,9,8,.72));
}
@media (max-width: 700px) {
  .section-art--proof { top: -90px; }
  .section-art--proof img { object-position: 15% center; opacity: .42; }
  .section-art--proof::after {
    background: linear-gradient(180deg, var(--ink), rgba(10,9,8,.1) 28%, rgba(10,9,8,.45) 65%, var(--ink));
  }
  .section-art--senior img { object-position: 76% center; opacity: .43; }
  .section-art--senior::after {
    background: linear-gradient(90deg, rgba(10,9,8,.55), rgba(10,9,8,.2)),
      linear-gradient(180deg, rgba(10,9,8,.6), rgba(10,9,8,.15) 55%, rgba(10,9,8,.65));
  }
}

.section-head > span {
  align-self: start;
  font: 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.section-head h2 {
  margin: 0;
  font: 400 clamp(70px, 10vw, 175px)/.76 var(--serif);
  letter-spacing: -.075em;
}

.section-head h2 em {
  color: var(--coral);
  font-weight: 400;
}

.section-head p {
  max-width: 24em;
  margin: 0 0 10px;
  color: rgba(241, 237, 228, .58);
  font-size: 13px;
  line-height: 1.55;
}

.projects {
  display: grid;
  gap: clamp(56px, 9vh, 110px);
}

.project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(24px, 4vw, 76px);
  padding-top: clamp(26px, 3vw, 44px);
  border-top: 1px solid rgba(241, 237, 228, .16);
  isolation: isolate;
  color: var(--paper);
}

.project:nth-child(even) .project__media { order: 2; }
.project:nth-child(even) .project__body { order: 1; }

.project__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #161513;
}

.project__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 45%, rgba(0, 0, 0, .45));
}

.project__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  transform: translateY(calc(-6% + var(--parallax, 0px))) scale(1.02);
  filter: saturate(.72) contrast(1.04);
  transition: transform 1.4s var(--ease), filter .8s;
  will-change: transform;
}

.project__wash {
  position: absolute;
  inset: 0;
  opacity: .23;
  mix-blend-mode: color;
  transition: opacity .8s;
}

.project--amber .project__wash { background: #ff5b32; }
.project--blue .project__wash { background: #356dff; }
.project--green .project__wash { background: #bfff37; }
.project--violet .project__wash { background: #9a55ff; }

.project:hover .project__media img {
  transform: translateY(calc(-6% + var(--parallax, 0px))) scale(1.075);
  filter: saturate(1) contrast(1.02);
}

.project:hover .project__wash {
  opacity: .08;
}

.project__body {
  min-width: 0;
}

.project__top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(241, 237, 228, .18);
  color: rgba(241, 237, 228, .62);
  font: 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.project__body h3 {
  margin: clamp(22px, 2.4vw, 40px) 0 0;
  font: 400 clamp(52px, 6.6vw, 118px)/.82 var(--serif);
  letter-spacing: -.06em;
}

.project__body > p {
  max-width: 26em;
  margin: clamp(16px, 1.6vw, 26px) 0 0;
  color: rgba(241, 237, 228, .66);
  font-size: clamp(13px, 1vw, 17px);
  line-height: 1.5;
}

.project__cta {
  display: inline-block;
  margin-top: clamp(22px, 2.4vw, 38px);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(241, 237, 228, .35);
  font: 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color .45s, border-color .45s;
}

.project:hover .project__cta {
  color: var(--acid);
  border-color: var(--acid);
}

/* ── Client validation band ────────────────────────────────────── */

.clients {
  overflow: hidden;
  padding: 9vh 0 11vh;
  border-top: 1px solid rgba(241, 237, 228, .14);
  border-bottom: 1px solid rgba(241, 237, 228, .14);
  background: var(--ink);
  color: var(--paper);
}

.clients__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 24px;
  margin: 0 var(--pad) 7vh;
  font: 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.clients__head p {
  margin: 0;
  color: var(--paper);
  font: 400 clamp(30px, 3.8vw, 64px)/1 var(--serif);
  letter-spacing: -.045em;
  text-transform: none;
}

.clients__head span:last-child {
  justify-self: end;
  opacity: .46;
}

.clients__marquee {
  display: flex;
  width: max-content;
  animation: clients-marquee 34s linear infinite;
}

.clients__marquee:hover {
  animation-play-state: paused;
}

.clients__track {
  display: flex;
  flex: none;
}

.clients__track figure {
  display: grid;
  width: clamp(180px, 17vw, 300px);
  height: clamp(110px, 10vw, 160px);
  margin: 0;
  padding: clamp(26px, 3vw, 48px);
  place-items: center;
  border-top: 1px solid rgba(241, 237, 228, .12);
  border-right: 1px solid rgba(241, 237, 228, .12);
  border-bottom: 1px solid rgba(241, 237, 228, .12);
}

.clients__track img {
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .52;
  transition: opacity .35s, filter .35s;
}

.clients__track figure:hover img {
  filter: grayscale(0) brightness(1) invert(0);
  opacity: 1;
}

@keyframes clients-marquee {
  to { transform: translateX(-50%); }
}

.project__arrow {
  position: absolute;
  z-index: 3;
  right: clamp(14px, 1.6vw, 26px);
  bottom: clamp(14px, 1.6vw, 26px);
  display: grid;
  width: clamp(46px, 4.4vw, 72px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  color: #fff;
  font-size: clamp(18px, 1.7vw, 28px);
  transition: color .45s, background-color .45s, transform .45s var(--ease);
}

.project:hover .project__arrow {
  color: var(--ink);
  background: #fff;
  transform: rotate(45deg);
}

.method {
  min-height: 100svh;
  padding: 15vh var(--pad) 12vh;
  background: var(--acid);
  color: var(--ink);
}

.method__head {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 4vw;
  min-height: 65vh;
}

.method__head > span {
  font: 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.method__head h2 {
  max-width: 10em;
  margin: 0;
  font: 400 clamp(60px, 8.3vw, 148px)/.87 var(--serif);
  letter-spacing: -.068em;
}

.method__head h2 .word {
  opacity: .18;
}

.method__steps {
  border-top: 1px solid rgba(10, 9, 8, .28);
}

.method-card {
  display: grid;
  grid-template-columns: .5fr .8fr 1.65fr 1fr;
  gap: 2vw;
  align-items: start;
  min-height: 190px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(10, 9, 8, .28);
  transition: padding .45s var(--ease);
}

.method-card:hover {
  padding-right: 18px;
  padding-left: 18px;
}

.method-card > span,
.method-card > i {
  font: 9px/1 var(--mono);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.method-card h3 {
  max-width: 8em;
  margin: -.12em 0 0;
  font: 400 clamp(30px, 3.35vw, 56px)/.92 var(--serif);
  letter-spacing: -.045em;
}

.method-card p {
  max-width: 28em;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.interlude {
  display: grid;
  align-items: end;
  min-height: 72svh;
  padding: 28vh var(--pad) 12vh;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.interlude__track {
  position: absolute;
  top: 10vh;
  display: flex;
  width: max-content;
  white-space: nowrap;
  color: rgba(241, 237, 228, .17);
  font: 400 clamp(72px, 10vw, 170px)/1 var(--serif);
  letter-spacing: -.055em;
  animation: marquee 24s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

.interlude__copy {
  position: relative;
  z-index: 2;
}

.interlude__copy > span {
  font: 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.interlude__copy p {
  margin: 30px 0 0;
  font: 400 clamp(68px, 9vw, 160px)/.8 var(--serif);
  letter-spacing: -.07em;
}

.interlude__copy em {
  color: var(--acid);
  font-weight: 400;
}

.contact {
  min-height: 100svh;
  padding: 32px var(--pad);
  background: var(--coral);
  color: var(--ink);
}

.contact__top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(10, 9, 8, .35);
  font: 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.contact__link {
  display: block;
  margin-top: 12vh;
  font: 400 clamp(72px, 13.2vw, 238px)/.72 var(--serif);
  letter-spacing: -.08em;
}

.contact__link > span {
  display: block;
}

.contact__link > span:nth-child(2) {
  padding-left: 7vw;
}

.contact__link b {
  display: inline-grid;
  width: .55em;
  height: .55em;
  margin-left: .12em;
  place-items: center;
  border: .01em solid currentColor;
  border-radius: 50%;
  font: 400 .42em/1 var(--sans);
  vertical-align: .12em;
  transition: color .5s, background-color .5s, transform .5s var(--ease);
}

.contact__link:hover b {
  color: var(--coral);
  background: var(--ink);
  transform: rotate(45deg);
}

.contact__foot {
  position: absolute;
  right: var(--pad);
  bottom: 28px;
  left: var(--pad);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  gap: 4vw;
  align-items: end;
  padding-top: 22px;
  border-top: 1px solid rgba(10, 9, 8, .35);
  font-size: 11px;
  line-height: 1.6;
}

.contact__foot span {
  display: block;
  margin-bottom: 8px;
  opacity: .55;
  font: 8px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.contact__foot p {
  margin: 0;
}

.contact__foot > p {
  font: 8px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  /* The drone stays. The speech bubble does not: 7px uppercase mono is below
     reading size on a phone, and a fixed card tracking the drone lands on top
     of the very project card it is talking about. */
  .drone-speech {
    display: none !important;
  }

  /* A full-viewport blur is the single most expensive thing a phone GPU is
     asked to do here, and on a small airframe it smears the edges the model is
     made of. Keep a tight contact shadow for separation, lose the halo. */
  .drone-stage__canvas {
    filter: drop-shadow(0 8px 11px rgba(0, 0, 0, .34));
  }

  .nav {
    grid-template-columns: 1fr auto;
    height: 64px;
  }

  .nav__links {
    display: none;
  }

  .nav__menu {
    display: block;
  }

  .cursor {
    display: none;
  }

  .hero {
    min-height: 100svh;
    padding-top: 88px;
  }

  .hero::before {
    top: 64px;
  }

  .hero::after {
    left: 66%;
  }

  .hero__meta span:last-child,
  .hero__scroll {
    display: none;
  }

  /* The mobile hero already carries the studio descriptor in its meta row. */
  .hud__item--tl {
    display: none;
  }

  .hud__item--tr {
    display: none;
  }

  .hero__title {
    transform: translateY(-67%);
    font-size: clamp(55px, 15.5vw, 96px);
    line-height: .82;
  }

  .hero__line--two {
    padding-left: 0;
  }

  .hero__foot {
    right: calc(var(--pad) + 14px);
    bottom: 50px;
    left: calc(var(--pad) + 14px);
  }

  .hero__foot p {
    width: auto;
    max-width: 24em;
  }

  .round-link {
    flex: 0 0 auto;
    width: 82px;
    height: 82px;
    padding: 13px;
  }

  .hero__index {
    display: none;
  }

  .belief {
    min-height: auto;
    padding-top: 90px;
    padding-bottom: 100px;
  }

  .belief__statement {
    margin-top: 90px;
    font-size: clamp(48px, 13.5vw, 84px);
  }

  .belief__stamp {
    right: 10px;
    top: 105px;
    opacity: .5;
  }

  .belief__notes {
    grid-template-columns: 1fr;
    width: 78%;
    margin-top: 100px;
    gap: 28px;
  }

  .belief__art {
    margin-top: 80px;
  }

  .clients__head {
    grid-template-columns: 1fr auto;
  }

  .clients__head p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 18px;
  }

  .clients__head span:last-child {
    grid-column: 2;
    grid-row: 1;
  }

  .craft__statement {
    grid-template-columns: 1fr;
  }

  .craft__statement p {
    grid-column: 1;
  }

  .craft__intro {
    width: min(86vw, 760px);
  }

  .craft__principles {
    grid-template-columns: 1fr;
  }

  .craft-card {
    min-height: auto;
  }

  .craft-card h3 {
    margin-top: 64px;
  }

  .work {
    padding-top: 90px;
  }

  .section-head {
    grid-template-columns: 1fr;
    align-content: space-between;
    min-height: 70svh;
  }

  .section-head h2 {
    font-size: clamp(68px, 19vw, 112px);
  }

  .section-head p {
    justify-self: end;
    max-width: 20em;
  }

  .project {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .project:nth-child(even) .project__media { order: 0; }
  .project:nth-child(even) .project__body { order: 0; }

  .project__media {
    aspect-ratio: 3 / 2;
  }

  .project__body h3 {
    font-size: clamp(52px, 13vw, 92px);
  }

  .project__body > p {
    max-width: 26em;
  }

  .method {
    padding-top: 90px;
  }

  .method__head {
    grid-template-columns: 1fr;
    min-height: 70svh;
  }

  .method__head h2 {
    align-self: center;
    font-size: clamp(52px, 14vw, 86px);
  }

  .method-card {
    grid-template-columns: 48px 1fr;
    min-height: 0;
    padding: 28px 0 36px;
  }

  .method-card > i {
    grid-column: 2;
    grid-row: 1;
  }

  .method-card h3,
  .method-card p {
    grid-column: 2;
  }

  .method-card h3 {
    margin-top: 25px;
  }

  .method-card p {
    margin-top: 12px;
  }

  .interlude {
    min-height: 0;
    padding: 24vh var(--pad) 14vh;
  }

  .interlude__copy p {
    font-size: clamp(60px, 17vw, 100px);
  }

  .contact {
    min-height: 100svh;
  }

  .contact__top span:last-child {
    display: none;
  }

  .contact__link {
    margin-top: 18vh;
    font-size: clamp(65px, 18vw, 108px);
  }

  .contact__link > span:nth-child(2) {
    padding-left: 0;
  }

  .contact__foot {
    grid-template-columns: 1.5fr 1fr;
    gap: 28px;
  }

  .contact__foot > p {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero__title {
    font-size: clamp(43px, 11.5vw, 64px);
  }

  .craft {
    padding-top: 80px;
  }

  .craft__head span:last-child {
    display: none;
  }

  .craft__statement {
    margin-top: 72px;
  }

  .craft__statement p {
    font-size: clamp(50px, 15vw, 78px);
  }

  .craft__intro {
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 72px;
  }

  .craft__principles {
    margin-top: 80px;
  }

  .hero__foot {
    align-items: end;
    gap: 14px;
  }

  .hero__foot p {
    font-size: 12px;
  }

  .round-link {
    width: 72px;
    height: 72px;
  }

  .round-link span {
    font-size: 7px;
  }

  .project__media {
    aspect-ratio: 4 / 3;
  }

  .project__media img {
    object-position: center;
  }

  .project__top {
    font-size: 8px;
    letter-spacing: .1em;
  }

  .clients__head span:last-child {
    display: none;
  }

  .clients__track figure {
    width: 160px;
  }

  .contact__foot {
    font-size: 9px;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .loader {
    display: none;
  }

  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-group(*) {
    animation-duration: 1ms !important;
  }

  .nav::before,
  .nav::after {
    transition-duration: .01ms;
  }

  .nav,
  .hero__line i,
  .reveal,
  .belief__statement .word,
  .craft__statement .word,
  .method__head h2 .word {
    opacity: 1;
    transform: none;
  }

  .signal,
  .cursor,
  .drone-stage {
    display: none;
  }

  .clients__marquee {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   SHARED SUB-ROUTE SURFACES
   Used by the works · about · contact routes of studio.html,
   and the "see every project" link on the home route.
   ════════════════════════════════════════════════════════════════ */

/* ── "See every project" — closes a section, opens a page ──────── */

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(56px, 8vh, 104px);
  padding: 18px 0 16px;
  border-top: 1px solid rgba(241, 237, 228, .22);
  font: 500 10px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  width: 100%;
  justify-content: space-between;
  transition: border-color .5s var(--ease), color .5s var(--ease);
}

.section-more b {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 400;
  transition: transform .45s var(--ease), background-color .45s, color .45s;
}

.section-more:hover {
  color: var(--acid);
  border-color: var(--acid);
}

.section-more:hover b {
  color: var(--ink);
  background: var(--acid);
  transform: rotate(45deg);
}

/* ── Sub-page masthead ─────────────────────────────────────────── */

.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: space-between;
  min-height: 88svh;
  padding: 120px var(--pad) 9vh;
  background: var(--ink);
  color: var(--paper);
}

/* A different painting for each opening, under one quiet editorial treatment.
   Decorative CSS backgrounds keep unrelated route assets out of the loader. */
.page-head[data-page="works"] { --opening-art: url('images/hero/editorial/works-archive.jpg'); }
.page-head[data-page="about"] { --opening-art: url('images/hero/editorial/about-atelier.jpg'); }
.page-head[data-page="contact"] { --opening-art: url('images/hero/editorial/contact-untangling.jpg'); }
.page-head::before,
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.page-head::before {
  background: var(--opening-art) center 48% / cover no-repeat;
  opacity: .72;
}
.page-head::after {
  background: linear-gradient(90deg, rgba(10,9,8,.66), rgba(10,9,8,.3) 45%, rgba(10,9,8,.06) 78%),
    linear-gradient(180deg, rgba(10,9,8,.55), transparent 28%, transparent 62%, rgba(10,9,8,.88));
}
@media (max-width: 700px) {
  .page-head::before { background-position: 69% center; opacity: .54; }
  .page-head::after {
    background: linear-gradient(90deg, rgba(10,9,8,.5), rgba(10,9,8,.15)),
      linear-gradient(180deg, rgba(10,9,8,.5), rgba(10,9,8,.15) 28%, rgba(10,9,8,.28) 58%, rgba(10,9,8,.94));
  }
}

.page-head__eyebrow {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(241, 237, 228, .22);
  font: 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.page-head__title {
  margin: 8vh 0 0;
  font: 400 clamp(62px, 11.5vw, 196px)/.79 var(--serif);
  letter-spacing: -.075em;
}

.page-head__title em {
  color: var(--coral);
  font-weight: 400;
}

.page-head__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .7fr);
  gap: 5vw;
  align-items: end;
  margin-top: 8vh;
}

.page-head__foot p {
  max-width: 34em;
  margin: 0;
  color: rgba(241, 237, 228, .62);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.6;
}

.page-head__hint {
  justify-self: end;
  text-align: right;
  font: 9px/1.8 var(--mono) !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(241, 237, 228, .45) !important;
}

/* ── Work index ────────────────────────────────────────────────── */

.index-section {
  padding: 10vh var(--pad) 12vh;
  background: var(--paper);
  color: var(--ink);
}

.index__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 42px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid rgba(10, 9, 8, .2);
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  font: 500 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .3s, background-color .3s, color .3s;
}

.chip i {
  font-style: normal;
  opacity: .42;
  font-size: 9px;
}

.chip:hover {
  border-color: rgba(10, 9, 8, .55);
}

.chip.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.chip.is-active i {
  opacity: .55;
}

.index__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(70px, 9vw, 148px) clamp(22px, 3vw, 52px);
}

.index-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 0 18px;
  min-width: 0;
  padding: 0 0 30px;
  border-bottom: 1px solid rgba(10, 9, 8, .18);
  isolation: isolate;
  transition: border-color .45s, transform .65s var(--ease);
}

/* The alternating drop makes the index read like an exhibition wall instead
   of a spreadsheet, while every image remains visible without interaction. */
.index-row:nth-child(even) {
  transform: translateY(clamp(46px, 6vw, 96px));
}

.index-row.is-hidden {
  display: none;
}

/* A thin project-colour rule grows under each card on hover/focus. */
.index-row::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--row-accent, var(--coral));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .65s var(--ease);
  pointer-events: none;
  z-index: 0;
}

.index-row > * {
  position: relative;
  z-index: 1;
}

a.index-row:hover::before,
a.index-row:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}

a.index-row:focus-visible {
  outline: 2px solid var(--row-accent, var(--coral));
  outline-offset: 8px;
}

.index-row__num {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font: 9px/1 var(--mono);
  letter-spacing: .1em;
  opacity: 1;
}

.index-row__thumb {
  position: relative;
  display: grid;
  grid-area: 1 / 1 / 2 / 3;
  aspect-ratio: 16 / 10;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--row-accent, var(--coral)) 15%, #d8d3c8);
  clip-path: inset(0 round 2px);
}

.index-row__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 9, 8, .04), transparent 48%, rgba(10, 9, 8, .24)),
    var(--row-accent, var(--coral));
  opacity: .12;
  mix-blend-mode: color;
  transition: opacity .55s;
}

.index-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) contrast(1.02);
  transform: scale(1.025);
  transition: filter .7s var(--ease), transform 1s var(--ease);
}

.index-row__thumb .project__art {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: var(--row-accent, var(--ink));
}

.index-row__thumb .work-drawn {
  width: 44%;
  height: 70%;
}

a.index-row:hover .index-row__thumb img,
a.index-row:focus-visible .index-row__thumb img {
  filter: saturate(1) contrast(1.02);
  transform: scale(1.075);
}

a.index-row:hover .index-row__thumb::after,
a.index-row:focus-visible .index-row__thumb::after {
  opacity: .035;
}

.index-row__title {
  grid-area: 2 / 1 / 3 / 2;
  margin: clamp(18px, 2vw, 30px) 0 0;
  font: 400 clamp(38px, 4.7vw, 76px)/.88 var(--serif);
  letter-spacing: -.05em;
}

.index-row__disc {
  grid-area: 3 / 1;
  margin-top: 14px;
}

.index-row__meta {
  grid-area: 3 / 2;
  margin-top: 14px;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

.index-row__disc,
.index-row__meta {
  font: 9px/1.6 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .58;
}

.index-row__blurb {
  grid-area: 4 / 1 / 5 / 3;
  max-width: 36em;
  margin: 19px 0 0;
  opacity: .66;
  font-size: 14px;
  line-height: 1.6;
}

.index-row__mark {
  grid-area: 2 / 2;
  align-self: end;
  justify-self: end;
  display: grid;
  width: clamp(46px, 4.4vw, 68px);
  aspect-ratio: 1;
  margin-top: 20px;
  place-items: center;
  border: 1px solid rgba(10, 9, 8, .28);
  border-radius: 50%;
  font: 400 21px/1 var(--sans);
  transition: color .45s, background-color .45s, border-color .45s, transform .55s var(--ease);
}

a.index-row:hover .index-row__mark,
a.index-row:focus-visible .index-row__mark {
  border-color: var(--row-accent, var(--ink));
  background: var(--row-accent, var(--ink));
  transform: rotate(45deg);
}

/* Work still being written up — present, but not a promise of a link */
.index-row--soon {
  color: rgba(10, 9, 8, .42);
  cursor: default;
}

.index-row--soon .index-row__thumb {
  filter: grayscale(.65);
  opacity: .64;
}

.index-row--soon .index-row__mark {
  display: inline-flex;
  width: auto;
  aspect-ratio: auto;
  justify-self: end;
  font: 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 100px;
}

.index__empty {
  padding: 60px 0;
  font: 400 clamp(24px, 3vw, 40px)/1.1 var(--serif);
  letter-spacing: -.03em;
  opacity: .35;
}

/* ── Studio roster ─────────────────────────────────────────────── */

.roster-section {
  padding: 14vh var(--pad) 12vh;
  background: var(--ink);
  color: var(--paper);
}

.roster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 4vw, 64px) clamp(22px, 2.6vw, 44px);
}

.member {
  position: relative;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(241, 237, 228, .16);
}

/* Contact-sheet stagger: the middle column drops, so the grid reads as
   a hand-laid sheet rather than a table of headshots. */
.roster .member:nth-child(3n + 2) {
  margin-top: clamp(28px, 4vw, 68px);
}

/* A seven-person roster resolves with a centered final card rather than an
   accidental-looking empty pair of columns. */
.roster[data-count="7"] .member:last-child {
  grid-column: 2;
}

.member__frame {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 5;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--member-accent, #f1ede4) 12%, transparent);
  border: 1px solid rgba(241, 237, 228, .14);
}

.member__mono {
  font: 400 clamp(64px, 8vw, 128px)/1 var(--serif);
  letter-spacing: -.06em;
  color: var(--member-accent, #f1ede4);
  opacity: .34;
}

.member__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
  transform: scale(1.02);
  transition: filter .6s var(--ease), transform .8s var(--ease);
}

.member:hover .member__frame img {
  filter: saturate(1) contrast(1);
  transform: scale(1.06);
}

.member__index {
  position: absolute;
  top: 12px;
  left: 12px;
  font: 9px/1 var(--mono);
  letter-spacing: .1em;
  opacity: .6;
}

.member__name {
  margin: 22px 0 0;
  font: 400 clamp(32px, 3.3vw, 54px)/.95 var(--serif);
  letter-spacing: -.055em;
}

.member__role {
  margin: 10px 0 0;
  font: 500 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--member-accent, var(--paper));
}

.member__spec {
  margin: 12px 0 0;
  max-width: 22em;
  color: rgba(241, 237, 228, .62);
  font-size: 13px;
  line-height: 1.55;
}

.member__note {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  max-width: 22em;
  color: rgba(241, 237, 228, .45);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  transition: max-height .55s var(--ease), opacity .45s, margin-top .55s var(--ease);
}

.member:hover .member__note {
  max-height: 6em;
  margin-top: 10px;
  opacity: 1;
}

/* ── Studio life carousel ──────────────────────────────────────── */

.bts {
  padding: 14vh 0 10vh;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.bts__head {
  display: grid;
  grid-template-columns: .7fr 2.1fr .7fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
  padding: 0 var(--pad);
  margin-bottom: clamp(54px, 8vh, 100px);
}

.bts__head > span,
.bts__hint,
.bts__count,
.bts__slide figcaption {
  font: 500 9px/1.35 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.bts__head h2 {
  margin: 0;
  font: 400 clamp(64px, 9vw, 150px)/.8 var(--serif);
  letter-spacing: -.07em;
}

.bts__head h2 em {
  color: var(--acid);
  font-weight: inherit;
}

.bts__head p {
  max-width: 40em;
  margin: 32px 0 0;
  color: rgba(241, 237, 228, .62);
  font-size: 14px;
  line-height: 1.65;
}

.bts__controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}

.bts__count {
  margin-right: 8px;
  color: rgba(241, 237, 228, .62);
  white-space: nowrap;
}

.bts__controls button {
  display: grid;
  width: 46px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(241, 237, 228, .38);
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  font: 400 19px/1 var(--sans);
  transition: color .35s, background-color .35s, border-color .35s, transform .35s var(--ease);
}

.bts__controls button:hover,
.bts__controls button:focus-visible {
  border-color: var(--acid);
  background: var(--acid);
  color: var(--ink);
  transform: scale(1.06);
}

.bts__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--pad) 24px;
  scroll-padding-inline: var(--pad);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}

.bts__viewport::-webkit-scrollbar {
  display: none;
}

.bts__viewport:focus-visible {
  outline: 1px solid var(--acid);
  outline-offset: -1px;
}

.bts__viewport.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.bts__track {
  display: flex;
  width: max-content;
  gap: clamp(14px, 1.5vw, 24px);
  align-items: flex-start;
}

.bts__slide {
  flex: none;
  width: clamp(410px, 48vw, 780px);
  margin: 0;
  scroll-snap-align: start;
}

.bts__slide:last-child {
  scroll-snap-align: end;
}

.bts__slide--portrait {
  width: clamp(260px, 28vw, 450px);
}

.bts__slide--panorama {
  width: clamp(560px, 68vw, 1080px);
}

.bts__slide:nth-child(3n + 2) {
  margin-top: clamp(30px, 5vh, 64px);
}

.bts__slide img {
  display: block;
  width: 100%;
  height: clamp(330px, 54vh, 660px);
  object-fit: cover;
  filter: saturate(.82) contrast(1.02);
  transition: filter .55s, transform .8s var(--ease);
}

.bts__slide--portrait img {
  height: clamp(440px, 68vh, 760px);
}

.bts__slide:hover img {
  filter: saturate(1) contrast(1);
  transform: scale(.992);
}

.bts__slide figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  color: rgba(241, 237, 228, .62);
}

.bts__slide figcaption span {
  color: var(--acid);
}

.bts__hint {
  margin: 26px var(--pad) 0;
  color: rgba(241, 237, 228, .42);
  text-align: right;
}

.member__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font: 500 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.member__link b {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 400;
  transition: transform .35s var(--ease), background-color .35s, color .35s;
}

.member__link:hover b {
  color: var(--ink);
  background: var(--member-accent, var(--paper));
  border-color: var(--member-accent, var(--paper));
  transform: rotate(45deg);
}

/* No verified profile URL yet — say so rather than link nowhere */
.member__link--none {
  opacity: .3;
  cursor: default;
}

/* ── Contact page: how to start ────────────────────────────────── */

.engage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .75fr);
  gap: clamp(40px, 6vw, 110px);
  padding: 12vh var(--pad);
  background: var(--paper);
  color: var(--ink);
}

/* Home-only lead-in (see studio.html) — spans both columns so the two-column
   grid below it is unaffected on the contact route, where it is hidden. */
.engage__head {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(10, 9, 8, .24);
  font: 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.engage__head span:last-child {
  opacity: .5;
}

/* Home only needs the invitation; the contact route keeps the full process,
   fit and location detail. */
:root[data-route="home"] .engage {
  grid-template-columns: 1fr;
}

:root[data-route="home"] .engage__lines {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 84px);
}

:root[data-route="home"] .engage__line:nth-child(3),
:root[data-route="home"] .engage__side {
  display: none;
}

.engage__lines {
  display: grid;
  gap: clamp(46px, 6vh, 86px);
  align-content: start;
}

.engage__line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  padding-top: 26px;
  border-top: 1px solid rgba(10, 9, 8, .2);
}

.engage__line > span {
  font: 9px/1.4 var(--mono);
  letter-spacing: .1em;
  opacity: .45;
}

.engage__line h2 {
  grid-column: 2;
  margin: 0;
  font: 400 clamp(38px, 4.6vw, 76px)/.92 var(--serif);
  letter-spacing: -.055em;
}

.engage__line p {
  grid-column: 2;
  max-width: 30em;
  margin: 16px 0 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.62;
  opacity: .72;
}

.engage__btn {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding: 15px 24px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color .35s, color .35s;
}

.engage__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.engage__btn:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink);
}

.engage__mail {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  font: 400 clamp(20px, 2.2vw, 34px)/1 var(--serif);
  letter-spacing: -.03em;
}

.engage__mail b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 400 15px/1 var(--sans);
  transition: transform .4s var(--ease), background-color .4s, color .4s;
}

.engage__mail:hover b {
  color: var(--paper);
  background: var(--ink);
  transform: rotate(45deg);
}

.engage__phone {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  color: rgba(10, 9, 8, .66);
  font: 500 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.engage__phone b {
  color: var(--coral);
  font-weight: 500;
}

.engage__phone:hover {
  color: var(--ink);
}

.engage__list {
  grid-column: 2;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.engage__list li {
  position: relative;
  padding: 9px 0 9px 22px;
  border-top: 1px solid rgba(10, 9, 8, .12);
  font: 10px/1.5 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .68;
}

.engage__list li::before {
  content: "→";
  position: absolute;
  left: 0;
  opacity: .5;
}

.engage__side {
  display: grid;
  gap: 18px;
  align-content: start;
  position: sticky;
  top: 100px;
}

.engage__card {
  padding: 24px 24px 26px;
  border: 1px solid rgba(10, 9, 8, .2);
}

.engage__card > span {
  display: block;
  margin-bottom: 16px;
  font: 500 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--coral);
}

.engage__card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.engage__card li {
  padding: 8px 0;
  border-top: 1px solid rgba(10, 9, 8, .1);
  font-size: 13px;
  line-height: 1.5;
}

.engage__card li:first-child {
  border-top: 0;
  padding-top: 0;
}

.engage__card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: .72;
}

.engage__card a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font: 500 9px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.engage__card a b {
  font-weight: 400;
}

.engage__card a:hover {
  color: var(--coral);
}

/* ── Booking overlay ───────────────────────────────────────────── */

.booking {
  position: fixed;
  z-index: 210;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(10, 9, 8, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

/* display:grid above beats the UA rule for [hidden], so restore it —
   otherwise a transparent overlay sits over the whole page swallowing clicks. */
.booking[hidden] {
  display: none;
}

.booking.is-open {
  opacity: 1;
}

.booking__panel {
  position: relative;
  width: min(960px, 100%);
  max-height: 100%;
  overflow: auto;
  background: var(--paper);
  transform: translateY(18px);
  transition: transform .45s var(--ease);
}

.booking.is-open .booking__panel {
  transform: translateY(0);
}

.booking__close {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid rgba(10, 9, 8, .16);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  text-align: right;
  font: 500 10px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.booking__frame iframe {
  display: block;
  width: 100%;
  min-height: min(700px, 78svh);
  border: 0;
}

/* ── Cards whose artwork is drawn, not photographed ────────────── */

.project__art {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: #0a0e14;
}

.project__art svg {
  width: 42%;
  max-width: 130px;
}

/* ── Sub-page responsive ───────────────────────────────────────── */

@media (max-width: 1100px) {
  .roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster .member:nth-child(3n + 2) {
    margin-top: 0;
  }

  .roster .member:nth-child(even) {
    margin-top: clamp(24px, 5vw, 60px);
  }

  .roster[data-count="7"] .member:last-child {
    grid-column: 1 / -1;
    width: 50%;
    margin-top: 0;
    justify-self: center;
  }

  .engage {
    grid-template-columns: 1fr;
  }

  .engage__side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .page-head {
    min-height: auto;
    padding: 104px var(--pad) 70px;
  }

  .page-head__title {
    margin-top: 60px;
    font-size: clamp(56px, 16vw, 104px);
  }

  .page-head__foot {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 60px;
  }

  .page-head__hint {
    justify-self: start;
    text-align: left;
  }

  .index-section {
    padding-top: 70px;
  }

  .index__rows {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .index-row {
    transform: none;
    padding-bottom: 26px;
  }

  .index-row:nth-child(even) {
    transform: none;
  }

  .index-row__num {
    top: 12px;
    left: 12px;
    width: 34px;
    height: 34px;
  }

  .index-row__thumb {
    aspect-ratio: 16 / 10;
  }

  .index-row__title {
    font-size: clamp(38px, 10vw, 66px);
  }

  .index-row__blurb {
    margin-top: 16px;
    opacity: .68;
    font-size: 13px;
  }

  .index-row__mark {
    width: 48px;
  }

  .index-row--soon .index-row__mark {
    display: inline-flex;
    justify-self: end;
  }

  .roster-section {
    padding-top: 80px;
  }

  .bts {
    padding-top: 90px;
  }

  .bts__head {
    grid-template-columns: 1fr auto;
  }

  .bts__head > span {
    grid-column: 1 / -1;
  }

  .bts__head h2 {
    font-size: clamp(58px, 13vw, 104px);
  }

  .bts__head p {
    max-width: 34em;
    margin-top: 24px;
  }

  .bts__slide {
    width: min(78vw, 680px);
  }

  .bts__slide--portrait {
    width: min(58vw, 420px);
  }

  .bts__slide--panorama {
    width: min(88vw, 900px);
  }

  .member__note {
    max-height: 6em;
    margin-top: 10px;
    opacity: .8;
  }

  .engage {
    padding-top: 70px;
  }

  :root[data-route="home"] .engage__lines {
    grid-template-columns: 1fr;
  }

  .engage__side {
    grid-template-columns: 1fr;
  }

  .section-more {
    margin-top: 56px;
  }
}

@media (max-width: 560px) {
  .roster {
    grid-template-columns: 1fr;
  }

  .roster .member:nth-child(even) {
    margin-top: 0;
  }

  .roster[data-count="7"] .member:last-child {
    grid-column: auto;
    width: 100%;
  }

  .bts__head {
    grid-template-columns: 1fr;
    margin-bottom: 46px;
  }

  .bts__controls {
    grid-template-columns: 1fr auto auto;
  }

  .bts__slide,
  .bts__slide--panorama {
    width: 84vw;
  }

  .bts__slide--portrait {
    width: 68vw;
  }

  .bts__slide:nth-child(3n + 2) {
    margin-top: 22px;
  }

  .bts__slide img {
    height: 48vh;
    min-height: 330px;
  }

  .bts__slide--portrait img {
    height: 58vh;
    min-height: 410px;
  }

  .index-row__meta {
    display: none;
  }

  .engage__line {
    grid-template-columns: 1fr;
  }

  .engage__line h2,
  .engage__line p,
  .engage__btn,
  .engage__mail,
  .engage__phone,
  .engage__list {
    grid-column: 1;
  }

  .engage__line > span {
    margin-bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .index-row:nth-child(even) {
    transform: none;
  }

  .member__note {
    max-height: none;
    opacity: .7;
    margin-top: 10px;
  }
}

/* ── FAQ ─────────────────────────────────────────────────────────────
   Contact route only. Answers stay visible rather than collapsed: this
   copy is mirrored verbatim into FAQPage structured data, and Google
   treats schema that a visitor cannot read as a violation, not a bonus.
   Two columns on desktop — the head holds the left rail so the questions
   read as one continuous list rather than a boxed accordion. */

.faq {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  gap: clamp(40px, 6vw, 110px);
  padding: 12vh var(--pad);
  background: var(--ink);
  color: var(--paper);
}

.faq__head {
  align-self: start;
  position: sticky;
  top: clamp(90px, 12vh, 140px);
}

.faq__head > span {
  display: block;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(241, 237, 228, .22);
  font: 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
}

.faq__title {
  margin: 26px 0 0;
  font: 400 clamp(38px, 4.2vw, 68px)/.94 var(--serif);
  letter-spacing: -.055em;
}

.faq__title em {
  font-style: normal;
  color: var(--acid);
}

.faq__list {
  display: grid;
  align-content: start;
}

.faq__item {
  padding: clamp(24px, 3vh, 34px) 0;
  border-top: 1px solid rgba(241, 237, 228, .16);
}

.faq__item:last-child {
  border-bottom: 1px solid rgba(241, 237, 228, .16);
}

.faq__item h3 {
  max-width: 24em;
  margin: 0;
  font: 400 clamp(19px, 1.7vw, 26px)/1.28 var(--serif);
  letter-spacing: -.025em;
}

.faq__item p {
  max-width: 44em;
  margin: 14px 0 0;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.66;
  opacity: .7;
}

@media (max-width: 900px) {
  .faq {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vh, 44px);
  }

  .faq__head {
    position: static;
  }
}