/* ═══════════════════════════════════════════════════════════════════════
   RADHE DESIGN STUDIO — drafting-sheet design system
   A technical-drawing aesthetic: construction lines, crop marks, dimension
   strings and title blocks, carrying real photography.
   Light is the default sheet; dark is the same sheet under studio lighting.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root,
[data-theme='light'] {
  /* Surfaces step from the page up to the card, so elevation reads as
     elevation instead of everything sitting in one flat mid-tone. */
  --sheet:        #f2f0ec;
  --sheet-2:      #e7e3db;
  --sheet-warm:   #ece4d7;
  --plate:        #ffffff;
  --plate-2:      #f8f6f2;
  --ink:          #14130f;
  /* A deeper terracotta and a deeper gold: the old pair sat so close in
     value that headings, rules and accents all read as one colour. */
  --clay:         #8a5f47;
  --clay-strong:  #6d4835;
  --amber:        #bd7a1c;
  --amber-lift:   #d99a35;
  --cool:         #5a7183;
  --muted:        rgba(20, 19, 15, .56);
  --hair:         rgba(138, 95, 71, .30);
  --hair-soft:    rgba(138, 95, 71, .14);
  --hair-faint:   rgba(138, 95, 71, .07);
  --nav-pill:     rgba(255, 255, 255, .90);
  --shadow:       0 26px 60px -34px rgba(20, 19, 15, .38);
  --shadow-card:  0 2px 4px -2px rgba(20,19,15,.08), 0 14px 34px -22px rgba(20,19,15,.24);
  --img-filter:   none;
}

[data-theme='dark'] {
  /* Pure black ground, with the surfaces above it lifting in clear steps. */
  --sheet:        #000000;
  --sheet-2:      #08080a;
  --sheet-warm:   #0c0b09;
  --plate:        #121215;
  --plate-2:      #1a1a1e;
  --ink:          #f5f2ec;
  --clay:         #d2a781;
  --clay-strong:  #e8c6a3;
  --amber:        #f0a93c;
  --amber-lift:   #ffc164;
  --cool:         #8098ac;
  --muted:        rgba(245, 242, 236, .58);
  --hair:         rgba(210, 167, 129, .26);
  --hair-soft:    rgba(210, 167, 129, .13);
  --hair-faint:   rgba(210, 167, 129, .07);
  --nav-pill:     rgba(10, 10, 12, .86);
  --shadow:       0 30px 70px -40px rgba(0, 0, 0, .9);
  --shadow-card:  0 1px 0 0 rgba(255,255,255,.03), 0 20px 50px -30px rgba(0,0,0,.9);
  --img-filter:   brightness(.94) saturate(1.02);
}

:root {
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --page-x: clamp(1.25rem, 4.4vw, 4rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --head-h: 84px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sheet);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  /* `hidden` on an axis makes the body a scroll container, and a scroll
     container breaks position:fixed pinning — ScrollTrigger's document
     coordinates stop matching where things actually render, which put the
     enquiry block 1849px away from where the page said it was and left it
     blank. `clip` suppresses the same overflow without becoming a
     scroller. The first line stays as a fallback for browsers that do not
     know `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  transition: background .6s var(--ease), color .6s var(--ease);
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; filter: var(--img-filter); transition: filter .6s var(--ease); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--amber); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; z-index: 3000; left: 1rem; top: 1rem;
  padding: .8rem 1.1rem; background: var(--amber); color: #fff;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(-180%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

/* ── Drafting furniture ─────────────────────────────────────────────
   The parts that make a page read as a drawing rather than a document. */

/* Section label boxed in amber corner ticks. */
.tag {
  position: relative;
  display: inline-block;
  justify-self: start;
  align-self: start;
  padding: .35rem .75rem;
  color: var(--clay);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: lowercase;
}
.tag::before, .tag::after,
.tag > i::before, .tag > i::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  border: 0 solid var(--amber);
}
.tag::before { left: 0; top: 0; border-top-width: 1px; border-left-width: 1px; }
.tag::after  { right: 0; top: 0; border-top-width: 1px; border-right-width: 1px; }
.tag > i::before { left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px; }
.tag > i::after  { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* Monospaced-feeling technical annotation. */
.annot {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.annot--amber { color: var(--amber); }

/* Horizontal dimension string with end ticks. */
.dim {
  position: relative;
  height: 1px;
  background: var(--hair);
}
.dim::before, .dim::after {
  content: '';
  position: absolute; top: -4px;
  width: 1px; height: 9px;
  background: var(--hair);
}
.dim::before { left: 0; }
.dim::after { right: 0; }
.dim__label {
  position: absolute; left: 50%; top: -1.5rem;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--sheet);
  padding: 0 .6rem;
}

/* Crop marks around any block. */
.marks { position: absolute; inset: 0; pointer-events: none; }
.marks i {
  position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--amber);
}
.marks i:nth-child(1) { left: -1px; top: -1px; border-top-width: 1px; border-left-width: 1px; }
.marks i:nth-child(2) { right: -1px; top: -1px; border-top-width: 1px; border-right-width: 1px; }
.marks i:nth-child(3) { right: -1px; bottom: -1px; border-bottom-width: 1px; border-right-width: 1px; }
.marks i:nth-child(4) { left: -1px; bottom: -1px; border-bottom-width: 1px; border-left-width: 1px; }

/* The faint construction grid the whole site is drawn over. */
.blueprint {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: .55;
}
.blueprint svg { width: 100%; height: 100%; }
.blueprint line, .blueprint path, .blueprint circle, .blueprint rect {
  fill: none;
  stroke: var(--hair-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.blueprint .bp-dash { stroke-dasharray: 6 8; stroke: var(--hair-faint); }
.blueprint .bp-amber { stroke: rgba(217, 142, 54, .16); }

/* ── Buttons and links ──────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1rem 1.4rem;
  color: var(--clay);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.btn__arrow {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--plate);
  border: 1px solid var(--hair);
  color: var(--amber);
  font-size: .72rem;
  transition: transform .5s var(--ease), background .4s, color .4s;
}
.btn:hover .btn__arrow { transform: translateX(5px); background: var(--amber); color: #fff; border-color: var(--amber); }
.btn .marks i { border-color: var(--hair); }
.btn:hover .marks i { border-color: var(--amber); }

.ulink {
  position: relative;
  display: inline-block;
  padding-bottom: .2rem;
  color: var(--clay);
  font-weight: 500;
}
.ulink::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--amber);
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease);
}
.ulink:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── Header ─────────────────────────────────────────────────────────── */
.head {
  position: fixed; z-index: 1000;
  inset: 0 0 auto;
  height: var(--head-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--page-x);
  pointer-events: none;
}
.head > * { pointer-events: auto; }

.brand { display: block; width: clamp(150px, 14vw, 210px); }
.brand svg { width: 100%; height: auto; display: block; }

/* The wordmark is real type set in SVG, so letters can be filled or
   left as outlines that a photograph reads straight through. */
.wm-type {
  font-family: var(--sans);
  font-size: 168px;
  font-weight: 400;
  letter-spacing: .11em;
}
.wm-stroke { fill: none; stroke: var(--clay); stroke-width: 3; }
.wm-solid, .wm-light, .wm-heavy { fill: var(--clay); }
.wm-light { font-weight: 300; }
.wm-heavy { font-weight: 700; }
.wm-amber { fill: var(--amber); }

.nav {
  display: flex; align-items: center; gap: 1.6rem;
  padding: .95rem 1.3rem;
  border-radius: 2px;
  background: transparent;
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.is-solid { background: var(--nav-pill); box-shadow: 0 10px 30px -22px rgba(0,0,0,.4); backdrop-filter: blur(10px); }

.nav a {
  position: relative;
  color: var(--clay);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-bottom: .25rem;
}
.nav a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--amber);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }

.nav__sep { color: var(--hair); font-size: .7rem; }

/* Theme toggle — a drafting switch. */
.theme-toggle {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  height: 24px; padding: 0 .35rem 0 .5rem;
  border: 1px solid var(--hair);
  color: var(--clay);
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
}
.theme-toggle__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--amber);
  transition: transform .5s var(--ease);
}
[data-theme='dark'] .theme-toggle__dot { transform: translateX(0); }
.theme-toggle:hover { border-color: var(--amber); }

.menu-btn { display: none; }

/* ── Mobile drawer ──────────────────────────────────────────────────── */
.drawer {
  position: fixed; z-index: 1100; inset: 0;
  display: grid; align-content: center; gap: 1.5rem;
  padding: 0 var(--page-x);
  background: var(--sheet);
  transform: translateY(-101%);
  transition: transform .7s var(--ease-io);
}
.drawer.is-open { transform: none; }
.drawer a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--hair-soft);
  color: var(--clay);
  font-size: 1.5rem; font-weight: 500;
}
.drawer a span { color: var(--amber); font-size: .62rem; letter-spacing: .2em; }

/* ── Page shell ─────────────────────────────────────────────────────── */
.page { position: relative; z-index: 1; }

/* ═══ HOME · Hero ═══════════════════════════════════════════════════
   A drawing-sheet cover: the photograph bleeds off one half, the
   practice is set as a title block on the other. The room arrives
   through a blind that opens slat by slat. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.hero__plate { position: relative; overflow: hidden; background: var(--plate); }

.hero__figure { position: absolute; inset: 0; }
.hero__figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero__figure img.is-active { opacity: 1; }

/* A shaft of daylight crossing the room. It travels by background
   position on a full-bleed box rather than by moving the box: a box that
   slides eventually shows its own edge across the room, which reads as a
   rectangle, not as sunlight. */
.hero__sun {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(42% 34% at 50% 50%, rgba(255, 214, 150, .38), rgba(255, 196, 120, .1) 46%, transparent 72%);
  background-repeat: no-repeat;
  background-size: 155% 155%;
  background-position: -28% 94%;
  mix-blend-mode: screen;
  animation: heroSun 30s var(--ease-io) infinite;
}
@keyframes heroSun {
  0%   { background-position: -28% 94%; opacity: 0; }
  14%  { opacity: 1; }
  50%  { background-position: 50% 22%;  opacity: 1; }
  86%  { opacity: 1; }
  100% { background-position: 128% 90%; opacity: 0; }
}

/* ── The blind ──────────────────────────────────────────────────────
   Eight slats standing on edge, turning flat one after another. Each
   carries its own band of one photograph, so a shut blind is a shutter
   and an open one registers back into a single room.

   The same blind does two jobs. On load it opens over the clay to bring
   the first room in. After that it is transparent between the slats and
   carries the INCOMING photograph, so every change of picture is the
   blind opening again over the room you were already looking at. The
   band each slat shows comes from --shot, which the script re-points at
   whichever room is arriving. */
.hero__blind {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-rows: repeat(8, 1fr);
  perspective: 900px;
  pointer-events: none;
  --shot: url('../images/earth-house.webp');
}
.hero__blind.is-enter { background: var(--clay); }
.hero__blind i {
  display: block;
  background-image: var(--shot);
  background-size: 100% 800%;
  transform-origin: 50% 0;
  transform: rotateX(-88deg);
  backface-visibility: hidden;
}
.hero__blind.is-open i { animation: heroBlind 1.35s var(--ease-io) forwards; }
.hero__blind i:nth-child(1) { background-position: center 0%;      animation-delay: 0s; }
.hero__blind i:nth-child(2) { background-position: center 14.28%;  animation-delay: .07s; }
.hero__blind i:nth-child(3) { background-position: center 28.57%;  animation-delay: .14s; }
.hero__blind i:nth-child(4) { background-position: center 42.85%;  animation-delay: .21s; }
.hero__blind i:nth-child(5) { background-position: center 57.14%;  animation-delay: .28s; }
.hero__blind i:nth-child(6) { background-position: center 71.42%;  animation-delay: .35s; }
.hero__blind i:nth-child(7) { background-position: center 85.71%;  animation-delay: .42s; }
.hero__blind i:nth-child(8) { background-position: center 100%;    animation-delay: .49s; }
/* The entrance is slower off the mark and slower between slats than a
   change of picture: the first is an arrival, the rest are transitions. */
.hero__blind.is-enter i:nth-child(1) { animation-delay: .25s; }
.hero__blind.is-enter i:nth-child(2) { animation-delay: .34s; }
.hero__blind.is-enter i:nth-child(3) { animation-delay: .43s; }
.hero__blind.is-enter i:nth-child(4) { animation-delay: .52s; }
.hero__blind.is-enter i:nth-child(5) { animation-delay: .61s; }
.hero__blind.is-enter i:nth-child(6) { animation-delay: .70s; }
.hero__blind.is-enter i:nth-child(7) { animation-delay: .79s; }
.hero__blind.is-enter i:nth-child(8) { animation-delay: .88s; }
.hero__blind.is-enter.is-open i { animation-duration: 1.5s; }
@keyframes heroBlind { to { transform: rotateX(0deg); } }
/* Idle between changes: the slats are back on edge and the whole blind is
   out of the way, so it is never compositing over a picture that is
   already on screen. */
.hero__blind.is-idle { display: none; }

.hero__caption {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem .9rem;
  background: var(--sheet);
  white-space: nowrap;
}
.hero__caption button { color: var(--clay); line-height: 1; }

/* ── The title block ───────────────────────────────────────────── */
.hero__block {
  display: grid; align-content: center; gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(4rem, 10vh, 8rem) clamp(1.6rem, 4vw, 4rem);
}
.hero__slug {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-size: .56rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--muted-2);
}
.hero__slug i { width: 22px; height: 1px; background: var(--amber); }
.hero__title {
  margin: 0;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  font-weight: 300; line-height: .92; letter-spacing: -.035em;
  color: var(--clay);
}
.hero__title b { font-weight: 600; }
/* Each word is set into place from below its own baseline, the way a
   line of type drops into a stick. The mask has to be the block that
   clips, so the rule under Studio lives inside it and rides up with the
   word rather than being cut off by it. */
.hero__set { display: block; overflow: hidden; }
.hero__set > span {
  display: block;
  transform: translateY(112%);
  animation: heroSet 1s var(--ease-io) forwards;
}
.hero__set:nth-child(1) > span { animation-delay: .5s; }
.hero__set:nth-child(2) > span { animation-delay: .64s; }
.hero__set:nth-child(3) > span { animation-delay: .78s; }
@keyframes heroSet { to { transform: translateY(0); } }
/* The masked line has to be a block for the translate to be clipped, so
   the rule sits on a nested inline-block instead — otherwise it stretches
   the full width of the column rather than the width of the word. */
.hero__ruled { display: inline-block; position: relative; padding-bottom: .16em; }
.hero__ruled::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 3px; background: var(--amber);
  transform: scaleX(0); transform-origin: left;
  animation: heroRule .9s var(--ease-io) 1.5s forwards;
}
@keyframes heroRule { to { transform: scaleX(1); } }
.hero__lead {
  max-width: 30ch;
  color: var(--muted);
  font-size: clamp(.95rem, 1.15vw, 1.05rem); line-height: 1.6;
}
.hero__meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; border-top: 1px solid var(--hair-soft);
}
.hero__meta div { position: relative; padding: .85rem .2rem; }
.hero__meta div::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--hair-soft);
  transform: scaleX(0); transform-origin: left;
  animation: heroRule .7s var(--ease-io) forwards;
}
.hero__meta div:nth-child(1)::after { animation-delay: 1.5s; }
.hero__meta div:nth-child(2)::after { animation-delay: 1.62s; }
.hero__meta div:nth-child(3)::after { animation-delay: 1.74s; }
.hero__meta div:nth-child(4)::after { animation-delay: 1.86s; }
.hero__meta dt {
  font-family: var(--sans); font-size: .52rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2);
}
.hero__meta dd { margin: .3rem 0 0; color: var(--clay); font-size: .86rem; }
.hero__go {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.3rem;
  border: 1px solid var(--hair);
  color: var(--clay);
  font-family: var(--sans); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.hero__go:hover { border-color: var(--amber); color: var(--amber); }

/* Slug, lead and the way through arrive in the same order a reader takes
   them, once the name has landed. */
.hero__slug, .hero__lead, .hero__go {
  opacity: 0;
  animation: heroRise .9s var(--ease-io) forwards;
}
.hero__slug { animation-delay: .35s; }
.hero__lead { animation-delay: 1.25s; }
.hero__go   { animation-delay: 1.95s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Depth: the room shifts a little against its own frame as the pointer
   moves across it, or as the plate scrolls away on a phone. The scale
   is what stops the shift from dragging an empty edge into view. */
.hero__figure img {
  transform: scale(1.05) translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}

.hero__scroll {
  position: absolute; right: var(--page-x); bottom: 2rem; z-index: 3;
  display: grid; gap: .6rem; justify-items: center;
}
.hero__scroll i { display: block; width: 1px; height: 46px; background: var(--hair); overflow: hidden; position: relative; }
.hero__scroll i::after {
  content: ''; position: absolute; inset: 0;
  background: var(--amber);
  transform: translateY(-100%);
  animation: scrollTick 2.4s var(--ease-io) infinite;
}
@keyframes scrollTick { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }
.hero__scroll span { writing-mode: vertical-rl; font-size: .55rem; letter-spacing: .3em; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .hero__blind, .hero__sun { display: none; }
  .hero__set > span { transform: none; animation: none; }
  .hero__ruled::after, .hero__meta div::after { transform: scaleX(1); animation: none; }
  .hero__slug, .hero__lead, .hero__go { opacity: 1; transform: none; animation: none; }
  .hero__figure img { transform: none; }
}

/* On the home page the plate runs under the header from the first pixel,
   so the dark wordmark would sit on a dark photograph until the reader
   scrolled. It carries its pill straight away instead. Below 760px the
   plate starts under the header and none of this is needed. */
@media (min-width: 761px) {
  .head--over .brand {
    padding: .6rem .95rem;
    margin: -.6rem -.95rem;
    border: 1px solid var(--hair-soft);
    border-radius: var(--r-pill);
    background: var(--nav-pill);
    backdrop-filter: blur(14px);
  }
}

/* ═══ HOME · Selected work ═════════════════════════════════════════
   A drawing index rather than a scatter of pictures: nine plates set on a
   twelve-column sheet, every one numbered, named and dimensioned. */
.folio { position: relative; padding: clamp(3.5rem, 8vw, 8rem) var(--page-x) clamp(4rem, 9vw, 9rem); }

.folio__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.folio__index { display: grid; justify-items: end; gap: 2.1rem; }
.folio__index .dim { width: 100%; }

.folio__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.2vw, 2.2rem) clamp(1rem, 2vw, 2rem);
}

.folio__item {
  position: relative;
  display: grid;
  grid-template-rows: var(--h) auto;
  align-content: start;
}
.folio__item[data-span='4'] { grid-column: span 4; }
.folio__item[data-span='5'] { grid-column: span 5; }
.folio__item[data-span='6'] { grid-column: span 6; }
.folio__item[data-span='7'] { grid-column: span 7; }

/* Row heights are declared, not inherited from the photographs, so every
   plate in a row lines up whatever shape its image happens to be. */
.folio__item[data-size='lg']  { --h: clamp(300px, 41vw, 560px); }
.folio__item[data-size='mg']  { --h: clamp(280px, 35vw, 470px); }
.folio__item[data-size='md']  { --h: clamp(250px, 29vw, 400px); }
.folio__item[data-size='pan'] { --h: clamp(180px, 21vw, 300px); }

.folio__frame {
  position: relative;
  display: block;
  height: var(--h);
  overflow: hidden;
  background: var(--plate);
}
/* The image is taller than its frame so it can drift inside it on scroll;
   hover uses the standalone `scale` property so the two never fight. */
.folio__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 118%;
  object-fit: cover;
  transform: translateY(-7.5%);
  transition: scale 1.5s var(--ease), filter .6s var(--ease);
}
.folio__item:hover .folio__frame img { scale: 1.045; }
.folio__frame .marks { inset: 12px; }
.folio__frame .marks i { border-color: transparent; transition: border-color .45s var(--ease); }
.folio__item:hover .folio__frame .marks i { border-color: var(--amber); }

.folio__badge {
  position: absolute; z-index: 2; left: .9rem; top: .9rem;
  padding: .35rem .55rem;
  background: var(--sheet);
  color: var(--amber);
}

.folio__cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: .9rem;
  margin-top: .85rem;
  padding-top: .8rem;
  border-top: 1px solid var(--hair-soft);
  transition: border-color .5s var(--ease);
}
.folio__item:hover .folio__cap { border-color: var(--amber); }
.folio__no { grid-column: 1; color: var(--amber); }
.folio__name {
  grid-column: 2;
  color: var(--clay);
  font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.folio__meta { grid-column: 3; text-align: right; }
.folio__arrow {
  grid-column: 4;
  color: var(--amber); font-size: .78rem;
  opacity: 0; transform: translate(-5px, 5px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.folio__item:hover .folio__arrow { opacity: 1; transform: none; }

.folio__foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair-soft);
}

/* ═══ HOME · Plates (project rail) ═════════════════════════════════ */
.plate { position: relative; display: block; }
.plate__frame { position: relative; overflow: hidden; background: var(--plate); }
.plate__frame img { width: 100%; height: auto; transition: transform 1.6s var(--ease), filter .6s var(--ease); }
.plate:hover .plate__frame img { transform: scale(1.05); }
.plate__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: .7rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.plate:hover .plate__cap { opacity: 1; transform: none; }
.plate__name { color: var(--clay); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }

/* ═══ HOME · Scrubbed statement ════════════════════════════════════ */
.statement {
  position: relative;
  padding: clamp(5rem, 11vw, 12rem) var(--page-x);
  text-align: center;
}
.statement__head { display: grid; justify-items: center; gap: clamp(3rem, 6vw, 5rem); }

.statement__dim {
  position: relative;
  width: min(84vw, 1120px);
  margin: 0 auto;
}
.statement__coords { position: absolute; right: 0; top: -1.6rem; }

.statement__text {
  max-width: min(88vw, 1120px);
  margin: 0 auto;
  font-size: clamp(1.5rem, 3.9vw, 3.4rem);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.01em;
}

/* The studio figures replace the long manifesto and the separate facts deck. */
.statement--stats {
  display: grid;
  align-content: center;
  min-height: min(72vh, 46rem);
  text-align: left;
}
.statement-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 1120px);
  margin: 0 auto;
  border-top: 1px solid var(--hair-soft);
  border-left: 1px solid var(--hair-soft);
}
.statement-stat {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: clamp(11rem, 16vw, 14rem);
  padding: clamp(1rem, 2vw, 1.6rem);
  border-right: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
  background: var(--plate);
  overflow: hidden;
}
.statement-stat::after {
  content: '';
  position: absolute;
  width: 7rem;
  aspect-ratio: 1;
  right: -3.5rem;
  bottom: -4rem;
  border-radius: 50%;
  background: var(--violet);
  opacity: .08;
  filter: blur(8px);
}
.statement-stat__no { font-size: .58rem; letter-spacing: .18em; }
.statement-stat__figure {
  align-self: center;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .45rem;
  color: var(--violet);
}
.statement-stat__figure strong {
  display: inline-block;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.055em;
  animation: statement-stat-float 4s ease-in-out infinite;
}
.statement-stat:nth-child(2) strong { animation-delay: -.8s; }
.statement-stat:nth-child(3) strong { animation-delay: -1.6s; }
.statement-stat:nth-child(4) strong { animation-delay: -2.4s; }
.statement-stat__figure i {
  /* A long unit — "satisfied" against a four-character figure — cannot sit
     beside the number in half a phone screen, so it takes its own line
     rather than being clipped by the cell. */
  min-width: 0;
  color: var(--muted);
  font-size: .55rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.statement-stat h2 {
  position: relative;
  z-index: 1;
  max-width: 14ch;
  color: var(--clay-strong);
  font-size: clamp(.88rem, 1.25vw, 1.05rem);
  font-weight: 600;
  line-height: 1.25;
}
@keyframes statement-stat-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 760px) {
  .statement-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statement-stat { min-height: clamp(8rem, 35vw, 10rem); padding: .85rem; }
  .statement-stat__figure { gap: .3rem; }
  .statement-stat__figure strong { font-size: clamp(2rem, 10vw, 3rem); }
  .statement-stat__figure i { font-size: .47rem; letter-spacing: .1em; }
  .statement-stat h2 { font-size: .75rem; }
}

/* ═══ HOME · Our services ══════════════════════════════════════════
   A schedule of what the studio takes on, drawn as a ruled table with a
   line glyph per trade. */
.svc {
  position: relative;
  padding: clamp(4rem, 8vw, 8rem) var(--page-x);
  background: var(--sheet-warm);
  transition: background .6s var(--ease);
}
.svc__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .6fr);
  align-items: end;
  gap: clamp(1.5rem, 5vw, 5rem);
}
.svc__intro { display: grid; justify-items: start; gap: 1.2rem; }
.svc__ref { display: grid; justify-items: end; gap: 2.1rem; }
.svc__ref .dim { width: 100%; }
.svc__ref .dim__label { background: var(--sheet-warm); }
.svc__title {
  max-width: 20ch;
  color: var(--clay);
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.02em;
}
.svc__lead { max-width: 44rem; color: var(--muted); line-height: 1.75; }

.svc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--hair-soft);
  border-left: 1px solid var(--hair-soft);
}
.svc__card {
  position: relative;
  display: grid;
  align-content: start;
  gap: .6rem;
  padding: clamp(1.3rem, 2.1vw, 2rem);
  border-right: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
  overflow: hidden;
}
/* A quiet wash rises through the cell on hover, the way a highlighter
   passes over a schedule row. */
.svc__card::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--hair-faint);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .65s var(--ease);
}
.svc__card > * { position: relative; }
.svc__card:hover::before { transform: scaleY(1); }
.svc__card .marks i { border-color: transparent; transition: border-color .45s var(--ease); }
.svc__card:hover .marks i { border-color: var(--amber); }

.svc__no { color: var(--amber); }
.svc__glyph { display: block; width: clamp(40px, 3.4vw, 50px); margin: .5rem 0 .35rem; }
.svc__glyph svg { display: block; width: 100%; height: auto; overflow: visible; }
.svc__glyph :is(path, circle, rect, line) {
  fill: none;
  stroke: var(--clay);
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: stroke .5s var(--ease);
}
.svc__card:hover .svc__glyph :is(path, circle, rect, line) { stroke: var(--amber); }
.svc__name { color: var(--clay); font-size: clamp(1rem, 1.25vw, 1.14rem); font-weight: 600; line-height: 1.28; }
.svc__desc { color: var(--muted); font-size: .82rem; line-height: 1.7; }

/* ═══ HOME · Process ═══════════════════════════════════════════════
   Five stages, pinned and scrubbed: the drawing on the left builds itself
   while the note on the right changes. */
.proc { position: relative; }
.proc__pin {
  position: relative;
  height: 100svh; min-height: 600px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding: var(--head-h) var(--page-x) 0;
}

.proc__stage {
  position: relative;
  width: 100%;
  max-width: min(100%, 58vh);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  background: var(--plate);
}
.proc__grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hair-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair-faint) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
}
.proc__diagram { position: absolute; inset: 0; display: grid; place-items: center; }
.proc__diagram svg { width: 62%; height: auto; overflow: visible; }
/* No non-scaling-stroke here: it makes the browser measure dash patterns in
   screen pixels while getTotalLength() reports user units, so a draw-on
   animation would only ever cover part of each path. */
.proc__diagram :is(path, line, circle, rect, polyline) {
  fill: none; stroke: var(--amber); stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
}
.proc__fig { position: absolute; left: 1rem; top: .8rem; }
.proc__scale { position: absolute; right: 1rem; top: .8rem; }

.proc__col { display: grid; align-content: center; gap: clamp(1.2rem, 2.4vw, 1.9rem); }
.proc__stack { position: relative; min-height: clamp(19rem, 32vh, 25rem); }
.proc__panel { display: grid; justify-items: start; gap: .5rem; align-content: center; }
.proc__num {
  font-size: clamp(3.2rem, 6.6vw, 6rem);
  font-weight: 400; line-height: .82;
  letter-spacing: -.03em;
  color: var(--hair-soft);
}
.proc__kicker {
  margin-top: .5rem;
  color: var(--amber);
  font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
}
.proc__title {
  color: var(--clay);
  font-size: clamp(1.6rem, 3.1vw, 2.7rem);
  font-weight: 500; line-height: 1.08; letter-spacing: -.02em;
}
.proc__body {
  max-width: 34rem; margin-top: .3rem;
  color: var(--muted);
  font-size: clamp(.92rem, 1.05vw, 1.04rem); line-height: 1.75;
}
.proc__chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .7rem; }
.proc__chips li {
  position: relative;
  padding: .45rem .85rem;
  border: 1px solid var(--hair-soft);
  color: var(--clay);
  font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.proc__chips li::before,
.proc__chips li::after {
  content: ''; position: absolute;
  width: 6px; height: 6px;
  border: 0 solid var(--amber);
}
.proc__chips li::before { left: -1px; top: -1px; border-top-width: 1px; border-left-width: 1px; }
.proc__chips li::after { right: -1px; bottom: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* Running index of the five stages. */
.proc__ticker {
  display: flex; flex-wrap: wrap; gap: .5rem clamp(1rem, 2.4vw, 2.2rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair-soft);
}
.proc__ticker li {
  display: flex; align-items: baseline; gap: .45rem;
  color: var(--muted);
  font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transition: color .45s var(--ease), opacity .45s var(--ease);
  opacity: .55;
}
.proc__ticker li span { color: var(--hair); font-size: .58rem; font-weight: 500; }
.proc__ticker li.is-on { color: var(--clay); opacity: 1; }
.proc__ticker li.is-on span { color: var(--amber); }

.proc__rail {
  /* Inset by the width the active tick grows to on its left, so the rail
     never pushes the page wider than the viewport. */
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 46%;
  background: var(--hair-soft);
}
.proc__rail-fill {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 0;
  background: var(--amber);
  transition: height .25s linear;
}
.proc__rail i {
  position: absolute; left: -3px;
  width: 7px; height: 1px;
  background: var(--hair);
  transition: background .4s, width .4s, left .4s;
}
.proc__rail i.is-on { background: var(--amber); width: 15px; left: -7px; }

/* Read as a plain list when the pin cannot run. */
.proc__pin.is-static { height: auto; min-height: 0; display: block; padding-bottom: clamp(3rem, 6vw, 6rem); }
.proc__pin.is-static .proc__stack { min-height: 0; display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.proc__pin.is-static .proc__stage { margin-bottom: 2.5rem; }
.proc__pin.is-static .proc__rail,
.proc__pin.is-static .proc__ticker { display: none; }

/* ═══ Contact call to action ═══════════════════════════════════════ */
.cta {
  position: relative;
  padding: clamp(5rem, 10vw, 10rem) var(--page-x) clamp(3rem, 6vw, 6rem);
  display: grid; gap: 1.4rem; justify-items: start;
}
.cta h2 {
  color: var(--clay);
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 400;
  letter-spacing: -.01em;
}
.cta p { max-width: 40rem; color: var(--muted); line-height: 1.75; }
.cta p b { color: var(--amber); font-weight: 700; }
.cta .btn { margin-top: .8rem; }

/* ═══ Footer ═══════════════════════════════════════════════════════ */
.foot { padding: 0 var(--page-x) 1.4rem; }
.foot__rule { height: 1px; background: var(--amber); opacity: .75; }
.foot__mark { padding: clamp(1rem, 2.4vw, 2rem) 0; }
.foot__mark svg { width: 100%; height: auto; display: block; overflow: visible; }
.foot__row {
  display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 5vw, 5rem);
  padding: 1.4rem 0 1.8rem;
}
.foot__row a, .foot__row span { color: var(--clay); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.foot__row a { position: relative; }
.foot__row a::after {
  content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: var(--amber); transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.foot__row a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Drawing title block. */
.titleblock {
  display: flex; justify-content: flex-end; flex-wrap: wrap;
  border-top: 1px solid var(--hair-soft);
  padding-top: .9rem;
}
.titleblock div {
  padding: 0 clamp(.9rem, 2vw, 2rem);
  border-left: 1px solid var(--hair-soft);
}
.titleblock div:first-child { border-left: 0; }
.titleblock dt { font-size: .54rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.titleblock dd { margin-top: .25rem; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); }

/* Floating corner action. */
.corner-note {
  position: fixed; z-index: 900;
  right: var(--page-x); bottom: 1.6rem;
  display: flex; align-items: center; gap: .55rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.corner-note.is-on { opacity: 1; transform: none; }
.corner-note i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.corner-note span { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--clay); }
.corner-note b { display: block; font-size: .82rem; font-weight: 600; color: var(--clay); letter-spacing: 0; text-transform: none; }

/* ═══ Inner pages ══════════════════════════════════════════════════ */
.inner { padding: calc(var(--head-h) + clamp(2rem, 5vw, 4rem)) var(--page-x) clamp(4rem, 8vw, 7rem); }

.about { background: var(--sheet-warm); }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.about__portrait { position: relative; }
.about__portrait img { width: 100%; height: auto; }

.credentials { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hair-soft); border-bottom: 0; margin-top: 1.6rem; }
.credentials div { padding: 1rem 1.1rem; border-bottom: 1px solid var(--hair-soft); }
.credentials div:nth-child(odd) { border-right: 1px solid var(--hair-soft); }
.credentials dt { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.credentials dd { margin-top: .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--clay); }
.credentials div:first-child dd { color: var(--amber); }

.prose { display: grid; gap: 1.5rem; }
.prose p { color: var(--clay); font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.62; }
.prose p b { color: var(--amber); font-weight: 700; }
.prose h3 { color: var(--clay); font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; margin-top: 1.5rem; }
.prose h4 { color: var(--amber); font-size: 1.05rem; font-weight: 700; }

/* Projects — horizontal scroll gallery. */
.rail { position: relative; overflow: hidden; }
.rail__track {
  display: flex; gap: clamp(1.25rem, 2.6vw, 2.6rem);
  padding: 0 var(--page-x);
  will-change: transform;
}
.rail__item { flex: 0 0 clamp(260px, 28vw, 420px); }
.rail__item .plate__frame { aspect-ratio: 3 / 4; }
.rail__item .plate__frame img { width: 100%; height: 100%; object-fit: cover; }
.rail__label { display: block; padding-bottom: .8rem; color: var(--clay); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.rail__scroll {
  position: absolute; left: calc(var(--page-x) - 2.2rem); top: 50%;
  transform: translateY(-50%);
  display: grid; justify-items: center; gap: .5rem;
}
.rail__scroll span { writing-mode: vertical-rl; font-size: .55rem; letter-spacing: .35em; color: var(--muted); }
.rail__scroll i { width: 1px; height: 34px; background: var(--amber); }

.rail__progress {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.6rem var(--page-x) 0;
}
.rail__progress .annot b { color: var(--amber); font-size: .78rem; }
.rail__bar { position: relative; flex: 1; height: 1px; background: transparent; border-top: 1px dashed var(--hair); }
.rail__bar i { position: absolute; left: 0; top: -1px; height: 1px; background: var(--clay); width: 25%; transition: width .3s linear; }

/* Project detail. */
.project__title { color: var(--clay); font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 700; letter-spacing: -.02em; }
.project__sub { margin-top: .8rem; color: var(--amber); font-size: clamp(1.15rem, 2.3vw, 1.75rem); font-weight: 700; line-height: 1.24; max-width: 22ch; }
.project__body { margin-top: 1.6rem; max-width: 46rem; color: var(--muted); line-height: 1.72; }
.project__figures { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(2.5rem, 6vw, 5rem); justify-items: center; }
.project__figures figure { width: min(100%, 760px); }
.project__figures figcaption { padding-top: .6rem; }
.project__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-top: 2.5rem; border-top: 1px solid var(--hair-soft); }
.project__meta div { padding: 1.1rem 1rem 0 0; }
.project__meta dt { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.project__meta dd { margin-top: .3rem; color: var(--clay); font-size: .82rem; font-weight: 600; }

/* Contact. */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.contact__lead { color: var(--clay); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; }
.contact__note { margin-top: 2rem; max-width: 32rem; color: var(--muted); line-height: 1.7; }

.form { display: grid; gap: 1.8rem; margin-top: 2.2rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.field label { display: block; color: var(--clay); font-size: .82rem; margin-bottom: .5rem; }
.field input, .field textarea {
  width: 100%; padding: .5rem 0 .7rem;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--hair);
  font: inherit; font-size: .95rem;
  transition: border-color .4s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--amber); }
.field textarea { resize: vertical; min-height: 8rem; }
.form__send {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  width: 100%; padding: 1.4rem;
  background: var(--sheet-2);
  color: var(--clay);
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  transition: background .45s var(--ease);
}
.form__send:hover { background: var(--hair-soft); }
.form__send i {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font-style: normal; font-size: .7rem;
}
.form__note { font-size: .78rem; color: var(--muted); }

/* ═══ Responsive ═══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .folio__item[data-span] { grid-column: span 6; }
  .folio__item[data-size='lg'],
  .folio__item[data-size='mg'] { --h: clamp(260px, 38vw, 400px); }
  .folio__item[data-size='md'] { --h: clamp(230px, 32vw, 340px); }
  .folio__item[data-size='pan'] { --h: clamp(180px, 26vw, 260px); }
  .svc__head { grid-template-columns: 1fr; align-items: start; }
  .svc__ref { justify-items: start; }
  .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proc__pin { grid-template-columns: 1fr; align-content: center; gap: clamp(1.5rem, 4vw, 2.5rem); }
  .proc__stage { max-width: min(100%, 34vh); }
  .proc__rail { display: none; }
  .about__grid, .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --head-h: 68px; }
  .nav { display: none; }
  .menu-btn {
    display: grid; gap: 5px; padding: .6rem;
  }
  .menu-btn span { display: block; width: 22px; height: 1px; background: var(--clay); transition: transform .4s var(--ease); }
  .drawer .menu-btn { position: absolute; right: var(--page-x); top: 1.2rem; }
  /* On a phone the sheet stacks: the plate becomes a band across the top
     and the title block runs underneath it. */
  .hero { grid-template-columns: 1fr; grid-template-rows: 44svh auto; }
  .hero__block { padding: 1.8rem var(--page-x) 2.6rem; gap: 1rem; }
  .hero__meta { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
  .folio__item[data-span] { grid-column: span 12; }
  .folio__item[data-size] { --h: clamp(230px, 58vw, 400px); }
  .folio__head { grid-template-columns: 1fr; align-items: start; gap: 1.8rem; }
  .folio__index { justify-items: start; }
  .folio__cap { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: .3rem; }
  .folio__meta { grid-column: 2 / -1; grid-row: 2; text-align: left; }
  .folio__arrow { grid-column: 3; grid-row: 1; opacity: 1; transform: none; }
  .svc__grid { grid-template-columns: 1fr; }
  .proc__stage { max-width: min(100%, 30vh); }
  /* The coordinate string and the scale label share a baseline on wide
     sheets; on a phone there is no room, so the coordinates drop below. */
  .statement__coords { position: static; display: block; margin-top: 1.1rem; }
  .form__row { grid-template-columns: 1fr; }
  .credentials { grid-template-columns: 1fr; }
  .credentials div:nth-child(odd) { border-right: 0; }
  .titleblock { justify-content: flex-start; }
  .titleblock div:first-child { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .blueprint { display: none; }
}

/* ── Inner page headings ────────────────────────────────────────────── */
.page-title {
  max-width: 20ch;
  margin-top: 1.4rem;
  color: var(--clay);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.page-lead { max-width: 46rem; margin-top: 1.4rem; color: var(--muted); line-height: 1.75; }

/* ── Services list (services page) ──────────────────────────────────── */
.svc-list { display: grid; margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--hair-soft); }
.svc-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 3.2rem) 0;
  border-bottom: 1px solid var(--hair-soft);
}
.svc-row h3 { color: var(--clay); font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.01em; }
.svc-row p { max-width: 46rem; margin-top: .8rem; color: var(--muted); line-height: 1.75; }
.svc-row__points {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .5rem 2rem; margin-top: 1.4rem;
}
.svc-row__points li {
  position: relative; padding-left: 1.1rem;
  color: var(--clay); font-size: .82rem;
}
.svc-row__points li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; background: var(--amber);
}

@media (max-width: 640px) {
  .svc-row { grid-template-columns: 1fr; gap: .8rem; }
}

.about__frame { position: relative; display: block; }

/* ── 360 Studio ─────────────────────────────────────────────────────── */
.scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.scene {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 0;
  text-align: left;
  background: none;
}
.scene__frame { position: relative; display: block; overflow: hidden; background: var(--plate); aspect-ratio: 2 / 1; }
.scene__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.scene:hover .scene__frame img { transform: scale(1.05); }
.scene__body { display: grid; gap: .55rem; }
.scene__name { color: var(--clay); font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 500; }
.scene__desc { color: var(--muted); font-size: .88rem; line-height: 1.65; }
.scene__cta {
  margin-top: .3rem; color: var(--amber);
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.scene__cta b { display: inline-block; transition: transform .45s var(--ease); }
.scene:hover .scene__cta b { transform: translateX(5px); }
.scene__badge {
  position: absolute; right: .9rem; top: .9rem;
  padding: .35rem .6rem;
  background: var(--sheet);
  color: var(--clay);
}
.scene .marks i { border-color: var(--hair); }
.scene:hover .marks i { border-color: var(--amber); }

/* Viewer takes the whole sheet. */
body.is-touring { overflow: hidden; }
.viewer { position: fixed; z-index: 1200; inset: 0; background: var(--sheet); }
.viewer[hidden] { display: none; }
.viewer__frame { position: absolute; inset: var(--head-h) 0 0; width: 100%; height: calc(100% - var(--head-h)); border: 0; }

.viewer__back,
.viewer__name,
.viewer__hint {
  position: fixed; z-index: 1300;
  padding: .8rem 1.1rem;
  background: var(--nav-pill);
  backdrop-filter: blur(10px);
  color: var(--clay);
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.viewer__back { left: var(--page-x); bottom: 1.5rem; display: inline-flex; align-items: center; gap: .6rem; }
.viewer__back span { transition: transform .4s var(--ease); }
.viewer__back:hover span { transform: translateX(-4px); }
.viewer__name { right: var(--page-x); bottom: 1.5rem; }
.viewer__hint { left: 50%; bottom: 1.5rem; transform: translateX(-50%); white-space: nowrap; }
.viewer__hint[hidden] { display: none; }

.viewer__loading {
  position: absolute; z-index: 1250; inset: 0;
  display: grid; place-items: center;
  background: var(--sheet);
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s;
}
.viewer__loading.is-active { opacity: 1; visibility: visible; }
.viewer__loading-name { color: var(--clay); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; margin-bottom: 1.1rem; }
.viewer__track { display: block; width: min(26rem, 70vw); height: 1px; background: var(--hair-soft); overflow: hidden; }
.viewer__track i { display: block; width: 4%; height: 100%; background: var(--amber); transition: width .35s var(--ease); }

@media (max-width: 760px) {
  .viewer__hint { display: none; }
}

/* ── Journal ────────────────────────────────────────────────────────── */
.note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.note { display: grid; gap: .8rem; }
.note__frame { position: relative; display: block; overflow: hidden; background: var(--plate); aspect-ratio: 4 / 3; }
.note__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.note:hover .note__frame img { transform: scale(1.05); }
.note h3 { color: var(--clay); font-size: 1.15rem; font-weight: 500; line-height: 1.3; }
.note__blurb { color: var(--muted); font-size: .88rem; line-height: 1.68; }

/* Footer secondary links. */
.foot__row .foot__minor { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════
   MOTION LAYER
   Scroll-driven type and entrances. Everything here is scrubbed by
   scroll position rather than played on a timer, so the page only moves
   while the reader moves it.
   ═══════════════════════════════════════════════════════════════════ */

/* Swept type — a diagonal gradient is clipped to the glyphs and its
   position is dragged across the block as it rises, so a sentence
   resolves from dim into full ink, mid-word rather than word by word.
   Guarded: without background-clip the text must stay visible, so the
   transparent fill is only applied where it works. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sweep {
    /* Resolves into the brightest ink, out of a dimmed version of the
       same colour. The tail used to be amber, which now fights the
       accent rather than reading as unresolved text. */
    --sweep-ink: var(--ink-strong);
    --sweep-mid: var(--muted-2);
    --sweep-far: var(--muted-3);
    background-image: linear-gradient(101deg,
      var(--sweep-ink) 0%,
      var(--sweep-ink) 28%,
      var(--sweep-mid) 43%,
      var(--sweep-far) 60%,
      var(--sweep-far) 100%);
    background-size: 320% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .sweep--body { --sweep-ink: var(--ink); --sweep-mid: var(--muted); }
  /* Emphasis holds the accent instead of resolving. */
  .sweep b, .sweep strong { -webkit-text-fill-color: var(--violet); color: var(--violet); }
}

/* Blurred rise — a block arrives out of focus and settles as it crosses
   the lower third, the way the reference lands its cards. */
.rise { will-change: transform, filter, opacity; }

@media (prefers-reduced-motion: reduce) {
  .rise { will-change: auto; filter: none !important; opacity: 1 !important; transform: none !important; }
}

/* ═══ Filter chips ═════════════════════════════════════════════════
   A horizontally scrolling rail on a phone, a plain row on a sheet. */
.chips {
  display: flex;
  gap: .5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.2rem);
  padding-bottom: .35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .6rem .95rem;
  border: 1px solid var(--hair-soft);
  color: var(--clay);
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.chip span { color: var(--muted); font-size: .56rem; letter-spacing: .1em; transition: color .4s var(--ease); }
.chip:hover { border-color: var(--hair); }
.chip.is-on { border-color: var(--amber); background: var(--hair-faint); }
.chip.is-on span { color: var(--amber); }
/* Corner ticks, as on every other framed element here. */
.chip.is-on::before, .chip.is-on::after {
  content: ''; position: absolute;
  width: 6px; height: 6px; border: 0 solid var(--amber);
}
.chip.is-on::before { left: -1px; top: -1px; border-top-width: 1px; border-left-width: 1px; }
.chip.is-on::after { right: -1px; bottom: -1px; border-bottom-width: 1px; border-right-width: 1px; }

.chips__empty { display: block; padding: 2.5rem 0; text-align: center; }
.chips__empty[hidden] { display: none; }

.folio__item.is-out { display: none; }

/* ═══ Studio at a glance — bento ═══════════════════════════════════ */
.facts { position: relative; padding: clamp(3rem, 7vw, 7rem) var(--page-x); }
.facts__head { display: grid; gap: 1.2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.facts__lead { max-width: 40rem; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.6; }

.facts__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.4rem);
}
.facts__cell {
  position: relative;
  display: grid;
  /* figure at the top, name and note pushed to the foot, so a short note
     does not leave the bottom half of a wide cell empty */
  grid-template-rows: auto 1fr;
  gap: .45rem;
  grid-column: span 12;
  min-height: clamp(10.5rem, 14vw, 13rem);
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
  border: 1px solid var(--hair-soft);
  overflow: hidden;
  transition: border-color .45s var(--ease), background .45s var(--ease);
}
.facts__cell:hover { border-color: var(--hair); background: rgba(157, 116, 96, .04); }
.facts__cell__foot { align-self: end; display: grid; gap: .3rem; }
.facts__cell[data-span='4'] { grid-column: span 4; }
.facts__cell[data-span='5'] { grid-column: span 5; }
.facts__cell[data-span='6'] { grid-column: span 6; }
.facts__cell[data-span='7'] { grid-column: span 7; }
.facts__cell[data-span='8'] { grid-column: span 8; }

/* The reference washes its stat cards in colour; here the wash is the
   amber of the sheet, kept faint enough to stay a drawing. */
.facts__cell[data-tone='warm']::before {
  content: '';
  position: absolute; z-index: 0; right: -30%; top: -60%;
  width: 90%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 142, 54, .16), transparent 68%);
}
.facts__cell > * { position: relative; z-index: 1; }

.facts__fig {
  display: flex; align-items: baseline; gap: .5rem;
  color: var(--amber);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
}
.facts__fig i { color: var(--muted); font-size: .6rem; font-style: normal; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.facts__fig--code { font-size: clamp(1.1rem, 2.2vw, 1.6rem); font-weight: 500; letter-spacing: .04em; }
.facts__name { margin-top: .35rem; color: var(--clay); font-size: clamp(.95rem, 1.2vw, 1.1rem); font-weight: 600; }
.facts__note { max-width: 44ch; color: var(--muted); font-size: .82rem; line-height: 1.65; }

/* ═══ Services carousel (phones) ═══════════════════════════════════ */
.svc__nav { display: none; }
.svc__arrow {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--hair);
  color: var(--clay);
  font-size: .9rem;
  transition: border-color .4s, color .4s, opacity .4s;
}
.svc__arrow:disabled { opacity: .3; }
.svc__arrow:not(:disabled):hover { border-color: var(--amber); color: var(--amber); }
.svc__bar { position: relative; flex: 1; height: 1px; background: var(--hair-soft); }
.svc__bar i {
  position: absolute; left: 0; top: 0; height: 1px; width: 12.5%;
  background: var(--amber);
  transition: left .45s var(--ease), width .45s var(--ease);
}

/* ═══ Accordion ════════════════════════════════════════════════════ */
.acc { border-top: 1px solid var(--hair-soft); margin-top: clamp(2.5rem, 5vw, 4rem); }
.acc__item { border-bottom: 1px solid var(--hair-soft); }
.acc__head {
  width: 100%;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.3rem, 2.6vw, 1.9rem) 0;
  text-align: left;
}
.acc__no { color: var(--amber); }
.acc__title {
  color: var(--clay);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.01em;
  transition: color .4s var(--ease);
}
.acc__head:hover .acc__title { color: var(--amber); }
.acc__chev {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--hair-soft);
  border-radius: 50%;
  color: var(--amber);
  font-size: .7rem;
  transition: transform .5s var(--ease), border-color .4s, background .4s;
}
.acc__head[aria-expanded='true'] .acc__chev { transform: rotate(180deg); border-color: var(--amber); }
/* 0fr → 1fr animates cleanly and needs no measured pixel heights. */
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.acc__head[aria-expanded='true'] + .acc__panel { grid-template-rows: 1fr; }
.acc__inner { min-height: 0; overflow: hidden; }
.acc__body { padding: 0 0 clamp(1.4rem, 3vw, 2.2rem); }
.acc__body p { max-width: 46rem; color: var(--muted); line-height: 1.75; }
.acc__panel .svc-row__points { margin-top: 1.2rem; }

@media (max-width: 640px) {
  .acc__head { grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .7rem; }
}

@media (max-width: 1100px) {
  .facts__cell[data-span] { grid-column: span 6; }
  .facts__cell[data-span='7'], .facts__cell[data-span='8'] { grid-column: span 12; }
  .facts__cell { min-height: 9rem; }
}

@media (max-width: 760px) {
  .facts__cell[data-span] { grid-column: span 12; }

  /* The schedule becomes a snap rail with the next cell peeking, which is
     how the reference carries cards on a phone. */
}

/* ── Hero reveal: rides in as the plate opens to full bleed ──────── */
.hero__reveal {
  position: absolute;
  left: var(--page-x); right: var(--page-x);
  bottom: clamp(3rem, 9vh, 6rem);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
}
.hero__reveal-line {
  max-width: 24ch;
  color: #fff;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.02em;
}

/* The brand carries the same pill as the nav once the page is scrolled,
   so section content never appears to run through the wordmark. */
.head.is-solid .brand {
  background: var(--nav-pill);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .4);
  backdrop-filter: blur(10px);
  padding: .6rem .95rem;
  margin: -.6rem -.95rem;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   ELEVATION
   Cards sit on a surface a step above the page and carry a shadow, so
   the eye reads depth rather than a field of identically toned boxes.
   ═══════════════════════════════════════════════════════════════════ */
.facts__cell,
.svc__row,
.note,
.scene,
.svc-row {
  background: var(--plate);
  box-shadow: var(--shadow-card);
}

.facts__cell { border-color: var(--hair-soft); }
.facts__cell:hover { border-color: var(--hair); background: var(--plate-2); }

/* Annotations pick up the cool accent so the sheet is not uniformly warm. */
.annot { color: var(--cool); }
.annot--amber { color: var(--amber); }
.dim__label { background: var(--sheet); }

/* The figure and its unit no longer share a tone. */
.facts__fig { color: var(--amber); }
.facts__fig i { color: var(--cool); }
.facts__name { color: var(--clay-strong); }

/* ═══════════════════════════════════════════════════════════════════
   SCROLL STACK
   Each card sticks at a slightly lower offset than the one before, so
   they gather into a visible deck; the cards underneath scale down as
   the ones above settle onto them. Sticky does the stacking, the scrub
   only does the scale.
   ═══════════════════════════════════════════════════════════════════ */
.stack { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }

.stack__slot {
  position: sticky;
  /* clears the fixed header, then steps down per card to expose the edge
     of every card already on the pile */
  top: calc(var(--head-h) + 2.5rem + var(--i) * 1.5rem);
}

.stack__card {
  transform-origin: top center;
  margin: 0 auto clamp(1rem, 1.6vw, 1.5rem);
  max-width: 62rem;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border: 1px solid var(--hair-soft);
  border-radius: 18px;
  background: var(--plate);
  box-shadow: var(--shadow-card);
  will-change: transform;
}

.stack__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 2.4vw, 2rem); align-items: start; }

.stack__badge {
  display: grid; place-items: center; gap: .1rem;
  min-width: clamp(5rem, 8vw, 6.5rem);
  padding: clamp(.9rem, 1.6vw, 1.2rem) clamp(.7rem, 1.2vw, 1rem);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--amber-lift), var(--amber));
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(189, 122, 28, .7);
}
[data-theme='dark'] .stack__badge { color: #14110c; }
.stack__badge b { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.stack__badge i {
  font-style: normal; font-size: .52rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; opacity: .85;
}

.stack__no { color: var(--amber); font-size: .62rem; font-weight: 700; letter-spacing: .2em; }
.stack__title { margin-top: .3rem; color: var(--clay-strong); font-size: clamp(1.15rem, 2.1vw, 1.65rem); font-weight: 600; letter-spacing: -.01em; }
.stack__text { margin-top: .55rem; max-width: 48ch; color: var(--muted); font-size: clamp(.86rem, 1vw, .95rem); line-height: 1.7; }

@media (max-width: 760px) {
  /* Use the same stepped sticky deck as desktop on phones. */
  .stack__slot { top: calc(var(--head-h) + 2.5rem + var(--i) * 1.5rem); }
  .stack__row { grid-template-columns: 1fr; gap: .9rem; }
  .stack__badge { justify-self: start; min-width: 0; padding: .7rem 1rem; }
  .stack__badge b { font-size: 1.5rem; }
}


/* ── Process photographs ─────────────────────────────────────────────
   One photograph per stage, cross-faded as the pin advances. object-fit
   covers the stage so the frame stays square whatever the source is. */
.proc__diagram {
  position: absolute; z-index: 0; inset: 0;
  margin: 0;
  overflow: hidden;
  background: var(--plate);
  will-change: transform, filter, opacity;
}
.proc__diagram picture { display: block; width: 100%; height: 100%; }
.proc__diagram img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--img-filter);
}

/* A scrim under the top labels: the clip is bright and the annotations
   are small, so they need something to sit on. */
.proc__stage::after {
  content: '';
  position: absolute; z-index: 1; inset: 0 0 auto; height: 5rem;
  background: linear-gradient(rgba(0,0,0,.55), transparent);
  pointer-events: none;
}
[data-theme='light'] .proc__stage::after {
  background: linear-gradient(rgba(255,255,255,.6), transparent);
}

/* The sheet furniture stays above the film, or the clip swallows the
   crop marks and the fig/scale labels. */
.proc__stage .marks,
.proc__fig,
.proc__scale { z-index: 2; }
.proc__grid-lines { z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   PALETTE + TYPE, after spellar.ai

   Extracted from the live site rather than eyeballed. The structural
   difference from what was here before:

   · surfaces are translucent white (4–6%), not solid warm greys. Layers
     read as layers because they let the black through
   · borders are neutral hairlines (7–12% white), not warm-tinted. Warm
     borders over warm greys under warm text is what collapsed everything
     into a single colour
   · one ink colour at four opacity steps (1 / .7 / .5 / .35) instead of
     two separate greys
   · violet leads, and their palette already carries an orange, so the
     studio's amber stays as a second accent rather than being invented

   Type is their pairing: Geologica for display, Inter for everything else.
   ═══════════════════════════════════════════════════════════════════════ */

:root,
[data-theme='light'] {
  --sheet:        #ffffff;
  --sheet-2:      #f6f6f7;
  --sheet-warm:   #f4f3f1;
  --plate:        rgba(10, 10, 12, .03);
  --plate-2:      rgba(10, 10, 12, .05);
  --plate-solid:  #ffffff;

  --ink:          #16161a;
  --ink-strong:   #000000;
  --muted:        rgba(22, 22, 26, .68);
  --muted-2:      rgba(22, 22, 26, .48);
  --muted-3:      rgba(22, 22, 26, .34);

  --violet:       #7c5cf0;
  --violet-lift:  #6544d8;
  --violet-tint:  rgba(124, 92, 240, .10);
  --amber:        #c2740a;
  --amber-lift:   #a35f05;
  --amber-tint:   rgba(194, 116, 10, .14);

  --clay:         #16161a;
  --clay-strong:  #000000;
  --cool:         rgba(22, 22, 26, .48);

  --hair:         rgba(10, 10, 12, .14);
  --hair-soft:    rgba(10, 10, 12, .08);
  --hair-faint:   rgba(10, 10, 12, .05);
  --nav-pill:     rgba(255, 255, 255, .82);
  --shadow-card:  0 1px 2px -1px rgba(10,10,12,.06), 0 18px 44px -28px rgba(10,10,12,.22);
  --img-filter:   none;
}

[data-theme='dark'] {
  --sheet:        #000000;
  --sheet-2:      #0a0a0c;
  --sheet-warm:   #08080a;
  --plate:        rgba(255, 255, 255, .04);
  --plate-2:      rgba(255, 255, 255, .06);
  --plate-solid:  #111113;

  /* Pure white, not an off-white. On a true-black ground a warm grey
     reads as dulled rather than soft, so the steps run down from #fff. */
  --ink:          #ffffff;
  --ink-strong:   #ffffff;
  --muted:        rgba(255, 255, 255, .78);
  --muted-2:      rgba(255, 255, 255, .60);
  --muted-3:      rgba(255, 255, 255, .42);

  --violet:       #a78bfa;
  --violet-lift:  #c4b5fd;
  --violet-tint:  rgba(167, 139, 250, .10);
  --amber:        #ff9f0a;
  --amber-lift:   #ffd60a;
  --amber-tint:   rgba(255, 159, 10, .18);

  --clay:         #ffffff;
  --clay-strong:  #ffffff;
  --cool:         rgba(255, 255, 255, .62);

  --hair:         rgba(255, 255, 255, .12);
  --hair-soft:    rgba(255, 255, 255, .07);
  --hair-faint:   rgba(255, 255, 255, .04);
  --nav-pill:     rgba(255, 255, 255, .05);
  --shadow-card:  0 1px 0 0 rgba(255,255,255,.03), 0 24px 60px -34px rgba(0,0,0,.95);
  --img-filter:   brightness(.95) saturate(1.02);
}


:root {
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Geologica', 'Inter', -apple-system, sans-serif;
  --r-pill: 999px;
  --r-card: 14px;
  --r-sm: 6px;
}

body { font-family: var(--sans); color: var(--ink); }

/* Display face on everything that reads as a heading. */
.page-title, .contact__lead, .project__title, .seq__title, .prog__title,
.stack__title, .facts__name, .svc__title, .proc__title, .cta h2,
.folio__name, .statement__text, .hero__studio, .veil__name,
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; }

.annot, .tag, .slug, .stack__no, .proc__kicker { font-family: var(--sans); }

/* ── Ink steps ─────────────────────────────────────────────────────── */
.facts__note, .stack__text, .prose p, .page-lead, .svc__lead, .proc__body,
.note__blurb, .scene__desc, .lux-lead, .cta p { color: var(--muted); }
.annot, .slug, .titleblock dt, .credentials dt { color: var(--muted-2); }
.foot__row span, .proc__ticker li { color: var(--muted-3); }

/* ── Frames ────────────────────────────────────────────────────────── */
.facts__cell, .stack__card, .note, .scene, .svc-row, .journal-card,
.about__frame, .proc__stage, .services__stage, .plate__frame,
.folio__item .plate__frame, .rail__item .plate__frame {
  border-radius: var(--r-card);
  border-color: var(--hair-soft);
}
.facts__cell, .note, .scene { background: var(--plate); }
.facts__cell:hover, .note:hover { background: var(--plate-2); border-color: var(--hair); }

/* The stack is the one place a translucent surface is wrong: the cards
   overlap by design, so anything less than opaque lets all four read
   through each other at once. */
.stack__card { background: var(--plate-solid); }
.stack__card:hover { border-color: var(--hair); }

.proc__stage, .services__stage, .seq__pin, .prog__pin { overflow: hidden; }
.proc__diagram, .seq__canvas { border-radius: var(--r-card); }

/* ── Buttons: a filled violet pill and an outlined pill ────────────── */
.btn, .lux-link, .form__send, .prog__pill, .chips button, .theme-toggle {
  border-radius: var(--r-pill);
}

.btn {
  gap: .7rem;
  padding: .85rem 1.5rem;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: background .35s var(--ease), border-color .35s, color .35s;
}
.btn:hover { background: var(--plate-2); border-color: var(--hair); color: var(--ink-strong); }
.btn .marks { display: none; }

/* The one filled action per view. */
.btn--go, .form__send, .cta .btn {
  border: 0;
  background: linear-gradient(135deg, var(--violet), #e879f9);
  color: #fff;
  box-shadow: 0 14px 34px -16px rgba(167, 139, 250, .6);
}
.btn--go:hover, .form__send:hover, .cta .btn:hover {
  background: linear-gradient(135deg, var(--violet-lift), #f0abfc);
  color: #fff;
}
.btn__arrow {
  width: 20px; height: 20px;
  border: 0; background: none; color: currentColor;
  font-size: .8rem;
}

.theme-toggle { border-color: var(--hair-soft); color: var(--muted); font-family: var(--sans); }
.theme-toggle:hover { border-color: var(--hair); color: var(--ink); }
.theme-toggle__dot { background: var(--violet); }

.nav { border-radius: var(--r-pill); }
.nav.is-solid, .head.is-solid .brand {
  background: var(--nav-pill);
  border: 1px solid var(--hair-soft);
  backdrop-filter: blur(14px);
}
.head.is-solid .brand { border-radius: var(--r-pill); }
.nav a { font-family: var(--sans); font-size: .78rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--ink-strong); }
.nav a::after { background: var(--violet); }
.nav__sep { display: none; }

/* Chips and pills read as tinted violet, the way their category chips do. */
.chips button, .proc__chips span, .svc__points li, .prog__pill {
  border-radius: var(--r-pill);
  border: 1px solid var(--hair-soft);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.chips button.is-on, .prog__pill.is-on {
  background: var(--violet-tint);
  border-color: rgba(167, 139, 250, .35);
  color: var(--violet-lift);
}

/* ── Accents ───────────────────────────────────────────────────────── */
.tag { color: var(--violet); }
.tag::before, .tag::after, .tag > i::before, .tag > i::after { border-color: var(--violet); }
.marks i { border-color: var(--hair); }
.stack__no, .proc__kicker, .svc__no { color: var(--violet); }
.stack__badge {
  border-radius: var(--r-card);
  background: linear-gradient(160deg, var(--violet-lift), var(--violet));
  color: #fff;
  box-shadow: 0 14px 30px -16px rgba(167, 139, 250, .65);
}
[data-theme='dark'] .stack__badge { color: #14101f; }
.facts__fig, .foot__mark .wm-amber, .wm-amber { fill: var(--violet); color: var(--violet); }
.facts__fig i { color: var(--muted-2); }
.hero__studio { color: var(--violet); }
.seq__title em, .prog__title em, .display em, .lux-display em { color: var(--violet); }

/* The drafting furniture keeps the amber, which their palette also carries. */
.proc__fig, .proc__scale, .services__fig, .dim__label,
.proc__rail-fill, .seq__progress i { color: var(--amber); }
.proc__rail-fill, .seq__progress i { background: var(--amber); }
.foot__rule { background: linear-gradient(90deg, var(--violet), var(--amber)); opacity: .8; }

/* ── Fields ────────────────────────────────────────────────────────── */
.field input, .field textarea, .field select {
  border-radius: var(--r-sm);
  border: 1px solid var(--hair-soft);
  background: var(--plate);
  color: var(--ink);
  font-family: var(--sans);
  padding: .8rem .9rem;
}
.field input:focus, .field textarea:focus { border-color: var(--violet); background: var(--plate-2); }
.field label { color: var(--muted-2); font-family: var(--sans); }

.wm-solid, .wm-light, .wm-heavy { fill: var(--ink); }
.wm-stroke { stroke: var(--ink); }

/* ═══ SELECTED WORK · five-field editorial collage ═════════════════
   A controlled asymmetric composition: varied scale without loose edges,
   balanced overlaps and one shared set of alignment lines. */
.folio-category-stage {
  --portfolio-bg: transparent;
  --portfolio-ink: #0b0b0b;
  --portfolio-label: #f8f8f5;
  position: relative;
  height: min(69svh, 720px);
  min-height: 520px;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  background: var(--portfolio-bg);
  border-top: 1px solid var(--hair-soft);
  border-bottom: 1px solid var(--hair-soft);
  color: var(--portfolio-ink);
  isolation: isolate;
}

[data-theme='dark'] .folio-category-stage {
  --portfolio-bg: transparent;
  --portfolio-ink: #f7f7f3;
  --portfolio-label: #101010;
}

.portfolio-categories__head {
  position: absolute;
  z-index: 40;
  top: calc(var(--head-h) + .55rem);
  right: var(--page-x);
  left: var(--page-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.portfolio-categories__head .tag { color: var(--portfolio-ink); }
.portfolio-categories__head .tag::before,
.portfolio-categories__head .tag::after,
.portfolio-categories__head .tag > i::before,
.portfolio-categories__head .tag > i::after { border-color: currentColor; }
.portfolio-categories__head p {
  color: var(--portfolio-ink);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.portfolio-collage {
  position: absolute;
  inset: clamp(.55rem, 1.2vw, 1.1rem);
}

.portfolio-category {
  /* Each half travels 0.45 cm, so the complete opened seam is 0.90 cm. */
  --split: .45cm;
  --turn: 0deg;
  position: absolute;
  z-index: 1;
  display: block;
  overflow: hidden;
  background: var(--portfolio-label);
  border: 1px solid color-mix(in srgb, var(--portfolio-ink) 12%, transparent);
  box-shadow: 0 18px 38px -30px rgba(0, 0, 0, .62);
  clip-path: polygon(.5% 1%, 99.5% 0, 100% 99%, 0 100%);
  transform: rotate(var(--turn));
  transform-origin: 50% 50%;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
  will-change: transform;
}
.portfolio-category--residence {
  z-index: 3;
  top: 8%; left: 1%; width: 39%; height: 70%;
  --turn: -.35deg;
  clip-path: polygon(0 1.2%, 99.4% 0, 100% 99%, .6% 100%);
}
.portfolio-category--hospitality {
  z-index: 5;
  top: 2%; left: 34%; width: 31%; height: 47%;
  --turn: .25deg;
  clip-path: polygon(.8% 0, 100% .9%, 99.2% 100%, 0 99%);
}
.portfolio-category--workplace {
  z-index: 2;
  top: 8%; right: 1%; width: 31%; height: 66%;
  --turn: .2deg;
  clip-path: polygon(.5% 0, 100% .7%, 99.3% 100%, 0 99.4%);
}
.portfolio-category--detail {
  z-index: 4;
  bottom: 2%; left: 26%; width: 34%; height: 44%;
  --turn: -.25deg;
  clip-path: polygon(0 .8%, 99.4% 0, 100% 99%, .7% 100%);
}
.portfolio-category--tour {
  z-index: 6;
  right: 10%; bottom: 2%; width: 30%; height: 36%;
  --turn: .35deg;
  clip-path: polygon(.7% 0, 100% 1.1%, 99.2% 100%, 0 99%);
}

.portfolio-category__half {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  transition: transform .8s var(--ease-io);
  will-change: transform;
}
.portfolio-category__half img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter .7s var(--ease), transform 1.1s var(--ease);
}
.portfolio-category--residence img { object-position: 54% center; }
.portfolio-category--hospitality img { object-position: center 46%; }
.portfolio-category--workplace img { object-position: 58% center; }
.portfolio-category--detail img { object-position: center 58%; }
.portfolio-category--tour img { object-position: center 52%; }

.split-vertical .portfolio-category__half--first { clip-path: inset(0 50% 0 0); }
.split-vertical .portfolio-category__half--second { clip-path: inset(0 0 0 50%); }
.split-horizontal .portfolio-category__half--first { clip-path: inset(0 0 50% 0); }
.split-horizontal .portfolio-category__half--second { clip-path: inset(50% 0 0 0); }

.portfolio-category__label {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 0;
  background: var(--portfolio-label);
  color: var(--portfolio-ink);
  text-align: center;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .35s ease .12s, transform .65s var(--ease) .08s;
}
.portfolio-category__label small {
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .2em;
}
.portfolio-category__label strong {
  font-family: 'Geologica', var(--sans);
  font-size: clamp(.54rem, .7vw, .7rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.split-vertical .portfolio-category__label strong { transform: rotate(-90deg); }
.portfolio-category__label i {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-style: normal;
  font-size: .8rem;
}

.portfolio-category:hover,
.portfolio-category:focus-visible {
  z-index: 30;
  box-shadow: 0 26px 52px -30px rgba(0, 0, 0, .76);
  transform: rotate(0deg) scale(1.012);
}
.portfolio-category:hover .portfolio-category__label,
.portfolio-category:focus-visible .portfolio-category__label {
  opacity: 1;
  transform: scale(1);
}
.portfolio-category:hover .portfolio-category__half img,
.portfolio-category:focus-visible .portfolio-category__half img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.025);
}
.split-vertical:hover .portfolio-category__half--first,
.split-vertical:focus-visible .portfolio-category__half--first { transform: translateX(calc(var(--split) * -1)); }
.split-vertical:hover .portfolio-category__half--second,
.split-vertical:focus-visible .portfolio-category__half--second { transform: translateX(var(--split)); }
.split-horizontal:hover .portfolio-category__half--first,
.split-horizontal:focus-visible .portfolio-category__half--first { transform: translateY(calc(var(--split) * -1)); }
.split-horizontal:hover .portfolio-category__half--second,
.split-horizontal:focus-visible .portfolio-category__half--second { transform: translateY(var(--split)); }

@media (max-width: 900px) {
  .folio-category-stage { height: min(68svh, 640px); min-height: 410px; }
  .portfolio-categories__head { top: calc(var(--head-h) + .35rem); }
  .folio-category-stage .portfolio-collage { inset: .45rem; }
  .portfolio-category--residence { top: 7%; left: 0; width: 47%; height: 60%; }
  .portfolio-category--hospitality { top: 2%; left: 40%; width: 40%; height: 37%; }
  .portfolio-category--workplace { top: 9%; right: 0; width: 31%; height: 58%; }
  .portfolio-category--detail { bottom: 2%; left: 12%; width: 43%; height: 38%; }
  .portfolio-category--tour { right: 6%; bottom: 1%; width: 39%; height: 32%; }
  .portfolio-category__label strong { font-size: clamp(.64rem, 1.7vw, .88rem); }
  .portfolio-category__label small { font-size: .42rem; }
  .portfolio-category__label i { width: 1.35rem; height: 1.35rem; font-size: .65rem; }
}

@media (max-width: 560px) {
  .folio-category-stage { height: min(65svh, 540px); min-height: 360px; }
  .portfolio-categories__head p { font-size: .48rem; letter-spacing: .1em; }
  .folio-category-stage .portfolio-collage { inset: .3rem; }
  .portfolio-category--residence { top: 8%; left: 0; width: 55%; height: 45%; }
  .portfolio-category--hospitality { top: 0; left: auto; right: 1%; width: 45%; height: 29%; }
  .portfolio-category--workplace { top: 29%; right: 0; width: 39%; height: 43%; }
  .portfolio-category--detail { bottom: 8%; left: 4%; width: 48%; height: 31%; }
  .portfolio-category--tour { right: 3%; bottom: 0; width: 44%; height: 27%; }
  .portfolio-category__label { gap: .25rem; padding: .35rem; }
  .portfolio-category__label strong { font-size: .58rem; letter-spacing: -.01em; }
  .portfolio-category__label small { display: none; }
  .portfolio-category__label i { width: 1.1rem; height: 1.1rem; font-size: .55rem; }
}

@media (hover: none) {
  .portfolio-categories__head p { font-size: 0; }
  .portfolio-categories__head p::after {
    content: 'Tap a field to view all';
    font-size: .48rem;
  }
  .portfolio-category__label {
    z-index: 3;
    inset: auto auto .55rem 50%;
    width: max-content;
    max-width: calc(100% - 1rem);
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .58rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .78);
    color: #fff;
    opacity: 1;
    transform: translateX(-50%);
  }
  .portfolio-category__label small,
  .portfolio-category__label i { display: none; }
  .portfolio-category__label strong { white-space: nowrap; }
  .portfolio-category__label strong br { display: none; }
  .portfolio-category__half img { filter: grayscale(1) contrast(1.06); }
}

.folio-category-stage ~ .chips,
.folio-category-stage ~ .chips__empty,
.folio-category-stage ~ .folio__grid { display: none; }

.rail__item.is-out { display: none; }

/* Traditional one-box layout requested for the five portfolio fields. */
.folio-category-stage {
  height: min(66svh, 680px);
  min-height: 480px;
  padding: clamp(.45rem, .8vw, .75rem);
  border: 1px solid var(--hair-soft);
  background: var(--plate);
}
.folio-category-stage .portfolio-collage {
  position: absolute;
  inset: clamp(.45rem, .8vw, .75rem);
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(.35rem, .6vw, .6rem);
}
.folio-category-stage .portfolio-category {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  z-index: 1;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  clip-path: none;
  transform: none;
}
.folio-category-stage .portfolio-category--residence { grid-column: 1; grid-row: 1 / 3; }
.folio-category-stage .portfolio-category--hospitality { grid-column: 2; grid-row: 1; }
.folio-category-stage .portfolio-category--workplace { grid-column: 3; grid-row: 1; }
.folio-category-stage .portfolio-category--detail { grid-column: 2; grid-row: 2; }
.folio-category-stage .portfolio-category--tour { grid-column: 3; grid-row: 2; }
.folio-category-stage .portfolio-category:hover,
.folio-category-stage .portfolio-category:focus-visible {
  z-index: 2;
  box-shadow: none;
  transform: none;
}

@media (max-width: 760px) {
  .folio-category-stage { height: min(76svh, 660px); min-height: 440px; }
  .folio-category-stage .portfolio-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1.15fr 1fr 1fr;
  }
  .folio-category-stage .portfolio-category--residence { grid-column: 1 / 3; grid-row: 1; }
  .folio-category-stage .portfolio-category--hospitality { grid-column: 1; grid-row: 2; }
  .folio-category-stage .portfolio-category--workplace { grid-column: 2; grid-row: 2; }
  .folio-category-stage .portfolio-category--detail { grid-column: 1; grid-row: 3; }
  .folio-category-stage .portfolio-category--tour { grid-column: 2; grid-row: 3; }

  /* Phones have no hover: keep category names visible and horizontal. */
  .folio-category-stage .portfolio-category::after {
    content: attr(data-mobile-label) '  ↗';
    position: absolute;
    z-index: 6;
    left: .55rem;
    bottom: .55rem;
    max-width: calc(100% - 1.1rem);
    padding: .42rem .55rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 2px;
    background: rgba(6, 6, 6, .82);
    color: #fff;
    font-family: var(--sans);
    font-size: clamp(.5rem, 2vw, .62rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
  }
  .folio-category-stage .portfolio-category__label { display: none; }
  .folio-category-stage .portfolio-category:hover,
  .folio-category-stage .portfolio-category:focus-visible { transform: none; }
  .folio-category-stage .split-vertical:hover .portfolio-category__half--first,
  .folio-category-stage .split-vertical:hover .portfolio-category__half--second,
  .folio-category-stage .split-horizontal:hover .portfolio-category__half--first,
  .folio-category-stage .split-horizontal:hover .portfolio-category__half--second,
  .folio-category-stage .split-vertical:focus-visible .portfolio-category__half--first,
  .folio-category-stage .split-vertical:focus-visible .portfolio-category__half--second,
  .folio-category-stage .split-horizontal:focus-visible .portfolio-category__half--first,
  .folio-category-stage .split-horizontal:focus-visible .portfolio-category__half--second { transform: none; }
  .folio-category-stage .portfolio-category:hover .portfolio-category__half img {
    filter: grayscale(1) contrast(1.06);
    transform: none;
  }
  .folio-category-stage .portfolio-category:active .portfolio-category__half img,
  .folio-category-stage .portfolio-category:focus-visible .portfolio-category__half img {
    filter: grayscale(0) contrast(1);
    transform: scale(1.015);
  }
  .portfolio-category--residence img { object-position: 50% 50%; }
  .portfolio-category--hospitality img { object-position: 56% 50%; }
  .portfolio-category--workplace img { object-position: 52% 50%; }
  .portfolio-category--detail img { object-position: 45% 55%; }
  .portfolio-category--tour img { object-position: 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-category,
  .portfolio-category__half,
  .portfolio-category__half img,
  .portfolio-category__label { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — type colour only
   Two changes, and only in dark mode: the white is a true #ffffff carrying
   no shadow, and every accent that is *type* is a real gold rather than an
   orange or a violet.

   Gold is #e3c05b: hue 45°, where the previous accents sat at 36° (orange)
   and 258° (violet). It holds 10.6:1 on the card surface and 12:1 on the
   black ground, so it clears AA at any size it is used.

   Scope is deliberate. Only rules whose sole job is to colour text are
   listed. Accents that paint a border, a pill, a focus ring, a badge or an
   SVG fill keep the palette they had — nothing outside type moves, and
   light mode is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme='dark'] {
  --gold: #e3c05b;
}

/* The white the display type is set in: no shadow, no warm cast, no
   softening — the brightest white there is. */
[data-theme='dark'] :is(h1, h2, h3, h4, .proc__title, .svc__name, .folio__name,
  .facts__name, .statement__text, .cta h2, .page-title, .project__title,
  .acc__title, .scene__name, .note h3) {
  color: #ffffff;
  text-shadow: none;
}

/* Accent type — gold, not orange, not violet. */
[data-theme='dark'] :is(.tag, .annot--amber, .drawer a span, .hero__studio,
  .folio__no, .folio__arrow, .svc__no, .proc__kicker, .proc__ticker li.is-on span,
  .cta p b, .credentials div:first-child dd, .prose p b, .prose h4,
  .rail__progress .annot b, .project__sub, .scene__cta, .chip.is-on span,
  .facts__fig, .acc__no, .stack__no, .statement-stat__figure,
  .proc__fig, .proc__scale, .services__fig, .dim__label,
  .seq__title em, .prog__title em, .display em, .lux-display em) {
  color: var(--gold);
}
[data-theme='dark'] .acc__head:hover .acc__title { color: var(--gold); }

/* The scroll-swept type resolves out of gold into that same pure white. */
[data-theme='dark'] .sweep {
  --sweep-ink: #ffffff;
  --sweep-far: var(--gold);
}
[data-theme='dark'] :is(.sweep b, .sweep strong) {
  -webkit-text-fill-color: var(--gold);
  color: var(--gold);
}


/* ═══ Process — a card per stage ═══════════════════════════════════
   Same shape as the services schedule: the copy reads first, and the
   photograph sits under it inside the same card. */
/* The section carried no padding of its own while the pinned box handled
   its own insets; as a plain card section it needs the page gutter back. */
.proc { position: relative; padding: clamp(4rem, 8vw, 8rem) var(--page-x); }
.proc__head { display: grid; gap: 1.1rem; }
.proc__heading {
  max-width: 20ch;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.02em;
}
.proc__nav { display: none; }

.proc__track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.proc__card {
  display: grid;
  align-content: start;
  gap: .55rem;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: var(--r-card);
  background: var(--plate);
}
.proc__no { color: var(--muted-2); }
.proc__card .proc__kicker { margin-top: .35rem; }
.proc__card .proc__title {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.01em;
}
.proc__card .proc__chips { margin: .5rem 0 .2rem; }
.proc__card .proc__chips li { padding: .35rem .6rem; font-size: .55rem; }

/* The photograph closes the card, under the copy. */
.proc__shot {
  margin: .7rem 0 0;
  border-radius: calc(var(--r-card) - 4px);
  overflow: hidden;
  background: var(--plate-2);
}
.proc__shot picture { display: block; }
.proc__shot img {
  width: 100%;
  /* The intrinsic width and height attributes on these images reserve
     their space before they load, but the height attribute is also a
     presentational hint — without this the photograph is laid out at its
     source height of 1254px and comes out as a tall sliver. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: var(--img-filter);
  transition: scale 1.4s var(--ease);
}
.proc__card:hover .proc__shot img { scale: 1.04; }

/* On the wide grid the five cards sit side by side, but their copy runs to
   different depths — a title that wraps, a third chip that drops to its own
   line — so the photographs used to start at five different heights. Letting
   the chip row take up the slack lands every photograph on one line. */
@media (min-width: 761px) {
  .proc__card { grid-template-rows: auto auto auto 1fr auto; }
  .proc__card .proc__chips { align-content: flex-start; }
}

@media (max-width: 900px) {
  .proc__card .proc__title { font-size: clamp(1.15rem, 4.6vw, 1.45rem); }
  .proc__shot img { aspect-ratio: 3 / 2; }
}

/* The stages ride the same rail as the schedule. This has to follow the
   grid above it: both are single-class rules, so the later one wins. */
@media (max-width: 760px) {
  .proc__nav { display: flex; align-items: center; gap: 1rem; margin: 1.8rem 0 1.2rem; }
  .proc__track {
    display: flex;
    margin-top: 1.2rem;
    gap: .9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .proc__track::-webkit-scrollbar { display: none; }
  .proc__card { flex: 0 0 84%; scroll-snap-align: center; }
}





/* ═══ Services — a ruled schedule ══════════════════════════════════
   One column, six rows: number, name, arrow, each on its own rule.
   This is the approved demo layout, kept to its measurements. */
.svc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  border: 0;
  border-top: 1px solid var(--hair-soft);
}
.svc__card {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: clamp(1.05rem, 2.4vw, 1.5rem) 0;
  border: 0;
  border-bottom: 1px solid var(--hair-soft);
  border-radius: 0;
  background: none;
  overflow: visible;
  text-align: left;
  transition: padding-left .5s var(--ease);
}
.svc__card:hover, .svc__card:focus-within { padding-left: .5rem; }

.svc__no {
  color: var(--amber);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .14em;
}
.svc__name {
  margin: 0;
  max-width: none;
  font-size: clamp(.95rem, 3.4vw, 1.15rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  transition: color .45s var(--ease);
}
.svc__go {
  color: var(--clay);
  font-style: normal;
  font-size: .8rem;
  transition: color .45s var(--ease), transform .45s var(--ease);
}
.svc__card:hover .svc__name, .svc__card:focus-within .svc__name { color: var(--violet-lift); }
.svc__card:hover .svc__go, .svc__card:focus-within .svc__go { color: var(--amber); transform: translate(3px, -3px); }

/* ═══ Location ═════════════════════════════════════════════════════ */
.map { position: relative; padding: clamp(3rem, 7vw, 7rem) var(--page-x); }
.map__head { display: grid; gap: 1.1rem; justify-items: start; }
.map__title {
  max-width: 18ch;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.02em;
}
.map__address {
  color: var(--muted);
  font-style: normal;
  font-size: clamp(.9rem, 1.1vw, 1rem);
  line-height: 1.75;
}
.map__head .btn { margin-top: .4rem; }

.map__frame {
  position: relative;
  margin-top: clamp(1.6rem, 3.5vw, 2.6rem);
  aspect-ratio: 16 / 10;
  border: 1px solid var(--hair-soft);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--plate);
}
.map__frame iframe {
  display: block;
  width: 100%; height: 100%;
  border: 0;
}