/* ============================================================
   RDESIGN — style.css  (v2 — editorial / MARK direction)
   Cream paper, oversized split headlines, folio bars, drop caps,
   pull quotes. Mono metadata. Time-of-day theming retained.
   ============================================================ */

:root {
  /* Adobe Fonts kit ahv7jxh. Neue Haas Grotesk Display on titles, Helvetica
     Neue on copy. Both ship 400 and 700 only — no variable axes, and nothing
     above 700, so display weights must stay at 700 or the browser fakes it. */
  --font-display: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(16px, 2.5vw, 32px);
  --hdr-h: 56px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Time-of-day themes ---------- */
html[data-theme="day"] {
  --bg: #f1ede1;            /* cream paper */
  --panel: #e5e0cf;
  --ink: #161613;
  --ink-dim: #74705f;
  --line: rgba(22, 22, 19, 0.2);
  --accent: #0aa48f;        /* MARK teal */
  --accent-2: #e2491f;
  --img-filter: none;
  color-scheme: light;
}
html[data-theme="morning"] {
  --bg: #26005c;
  --panel: #371378;
  --ink: #efe6ff;
  --ink-dim: #a795c9;
  --line: rgba(239, 230, 255, 0.22);
  --accent: #2fd0b8;
  --accent-2: #ff6a3d;
  --img-filter: none;
  color-scheme: dark;
}
html[data-theme="evening"] {
  --bg: #ffb986;
  --panel: #f5c9a0;
  --ink: #190f04;
  --ink-dim: #6e5526;
  --line: rgba(25, 15, 4, 0.26);
  --accent: #0b6e61;
  --accent-2: #b33312;
  --img-filter: sepia(0.18) saturate(1.1) brightness(0.97);
  color-scheme: light;
}
html[data-theme="night"] {
  --bg: #151513;
  --panel: #232320;
  --ink: #ece8dc;
  --ink-dim: #8d897b;
  --line: rgba(236, 232, 220, 0.2);
  --accent: #2fd0b8;
  --accent-2: #ff6a3d;
  --img-filter: brightness(0.74) contrast(1.02);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.6s ease, color 0.6s ease;
}

img { display: block; max-width: 100%; filter: var(--img-filter); transition: filter 0.6s ease; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--bg); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.04em; line-height: 0.98; }
.spread__w, .statement, .ctaband__title, .proj__name, .hdr__logo { font-family: var(--font-display); }

/* ---------- Utilities ---------- */
/* Was IBM Plex Mono. A monospace set in tracked-out caps is the single most
   machine-looking thing on the page, so labels are the real face now — same
   small size and quiet tone, just not typed by a terminal. */
.mono {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
}
.mono--dim { color: var(--ink-dim); }
/* Captions read as sentences, not as labels — no caps, no tracking. */
figcaption.mono {
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  max-width: 62ch;
}

.container { padding-left: var(--pad); padding-right: var(--pad); }
.hairline-top { border-top: 1px solid var(--line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 14px 22px;
  transition: background 0.25s ease, color 0.25s ease;
  cursor: pointer;
  background: transparent;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--wide { width: 100%; justify-content: flex-start; padding: 16px 18px; }
.btn--chip { padding: 7px 12px; border-color: var(--line); }
.btn--chip:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* ============================================================
   HEADER
   ============================================================ */
.hdr {
  position: sticky; top: 0; z-index: 50;
  height: var(--hdr-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.6s ease;
}
.hdr__left { display: flex; align-items: center; gap: 18px; min-width: 0; }
.hdr__logo {
  font-weight: 700; font-size: 19px; letter-spacing: -0.045em;
  transform: scaleY(1.08);
}
.hdr__logo span { color: var(--accent); }

.timechip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink);
  padding: 5px 8px;
  border: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.timechip:hover { border-color: var(--line); }
.timechip__icon {
  width: 18px; height: 12px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  position: relative;
}
.timechip__icon::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink);
  transition: transform 0.4s var(--ease);
}
html[data-theme="night"] .timechip__icon::after { transform: translateX(6px); }

.hdr__nav { display: flex; gap: 22px; justify-content: center; }
.hdr__nav a {
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-dim);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.hdr__nav a:hover { color: var(--ink); }
.hdr__nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.hdr__right { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }

.hdr__burger { display: none; width: 40px; height: 40px; margin-right: -8px; }
.hdr__burger span {
  display: block; width: 20px; height: 1.5px;
  background: var(--ink); margin: 5px auto;
  transition: transform 0.3s var(--ease), opacity 0.3s ease;
}
.hdr__burger.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.hdr__burger.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Theme popover ---------- */
.themepanel {
  position: fixed;
  top: calc(var(--hdr-h) + 10px);
  left: var(--pad);
  z-index: 60;
  width: min(420px, calc(100vw - 2 * var(--pad)));
  background: #1b1b18;
  color: #ece8dc;
  padding: 20px;
  display: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.themepanel.is-open { display: block; }
.themepanel__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.themepanel__title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.themepanel__close { padding: 4px 8px; color: #8d897b; }
.themepanel__close:hover { color: #fff; }
.themepanel__meta { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.07em; color: #8d897b; margin-bottom: 12px; }
.themepanel__desc { font-size: 12.5px; color: #b9b5a6; max-width: 36ch; margin-bottom: 18px; }
.themepanel__modes { display: flex; flex-wrap: wrap; gap: 2px; border-top: 1px solid rgba(236,232,220,0.2); padding-top: 12px; }
.themepanel__modes .lbl { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.08em; color: #8d897b; margin-right: 8px; align-self: center; }
.themepanel__modes button {
  font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #b9b5a6;
  padding: 6px 8px;
}
.themepanel__modes button:hover { color: #fff; }
.themepanel__modes button.is-active { background: #ece8dc; color: #151513; }

/* ---------- Mobile menu ---------- */
.mmenu {
  position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 45;
  background: var(--bg);
  padding: 8vh var(--pad);
  display: none; flex-direction: column;
  transition: background-color 0.6s ease;
}
.mmenu.is-open { display: flex; }
.mmenu a {
  display: flex; align-items: baseline; gap: 14px;
  font-size: clamp(28px, 8vw, 44px); font-weight: 700; letter-spacing: -0.04em;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mmenu a .idx { font-family: var(--font-sans); font-size: 11px; color: var(--accent); font-weight: 400; }
.mmenu__foot { margin-top: auto; padding-bottom: 4vh; }

/* ============================================================
   SPREAD HERO (magazine split headline)
   ============================================================ */
.spread {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* Type sits on the render again. The old scrim clashed because it fell to 5%
   opacity at 45% down — exactly where the deck landed — so pale text met pale
   building. Fixed by moving the type rather than the gradient: the whole group
   is anchored low and the scrim is bottom-weighted, so the text always lands on
   darkness while the top two thirds of the render stay untouched. */
.spread--image {
  min-height: 540px;
  min-height: max(540px, calc(100svh - var(--hdr-h)));
  justify-content: flex-end;
  color: #f4f1e8;
  padding-bottom: clamp(26px, 5vh, 56px);
}
.spread__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.spread--image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(10, 10, 8, 0.24) 0%,
    rgba(10, 10, 8, 0) 26%,
    rgba(10, 10, 8, 0.34) 56%,
    rgba(10, 10, 8, 0.74) 100%);
  z-index: 1;
  pointer-events: none;
}
/* The group is bottom-anchored, so the headline drops its opening padding. */
.spread--image .spread__words { padding-top: 0; }
/* The title used to split across the spread — one word hard left, one hard
   right, a void between. It read as two unrelated words with a hole in the
   middle rather than as a name. The words sit together and centred now, and the
   size comes down so a two-word title holds one line at most widths. */
.spread__words {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.26em;
  text-align: center;
  padding: clamp(20px, 4vh, 48px) var(--pad) 0;
}
.spread__w {
  font-size: clamp(38px, 6.2vw, 104px);
  font-weight: 700; letter-spacing: -0.045em; line-height: 0.94;
  white-space: nowrap;
}
.spread__w--r { text-align: center; }
.spread__deck {
  position: relative; z-index: 2;
  text-align: center;
  max-width: 44ch;
  margin: clamp(18px, 3.5vh, 36px) auto 0;
  padding: 0 var(--pad);
  font-size: clamp(13.5px, 1.3vw, 16px);
  line-height: 1.6;
}
.spread__cta { position: relative; z-index: 2; text-align: center; margin-top: clamp(16px, 3vh, 28px); }
.spread--image .btn { border-color: var(--ink); color: var(--ink); }
.spread--image .btn:hover { background: var(--ink); color: var(--bg); }
/* Paper variant — black words on cream, like a MARK opening page */
.spread--paper { padding-top: clamp(28px, 6vh, 64px); }
.spread--paper .spread__words { padding-top: 0; }
.spread--paper .spread__deck { color: var(--ink-dim); }

/* ============================================================
   SHARED SECTION FURNITURE
   ============================================================ */
/* Section rhythm. Two sections meeting contribute padding twice, so the gap
   between content blocks is double this — 9vh/110px stacked to ~260px of void
   on a tall monitor. Capped so the largest gap lands around 150px. */
.sect { padding-top: clamp(44px, 5.5vh, 76px); padding-bottom: clamp(44px, 5.5vh, 76px); }
.sect__bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(28px, 5vh, 56px);
}
/* Client logo in a project row. Sits where the sector label used to; two logos
   for a joint client are separated by a hairline rule. */
.clogo { display: inline-flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
.clogo img {
  height: 15px; width: auto;
  max-width: 118px; object-fit: contain; object-position: right center;
  opacity: 0.66;
  transition: opacity 0.25s ease;
}
/* A joint client carries two marks, which together overran the card. Both come
   down a little and cap narrower so the project name keeps its room. */
.clogo:has(img + img) img { height: 13px; max-width: 90px; }
.clogo img + img { padding-left: 12px; border-left: 1px solid var(--line); }
a:hover .clogo img { opacity: 1; }
/* The logo files are black. An SVG loaded through <img> is its own document, so
   currentColor cannot inherit the page's ink - at night the ground goes dark and
   black marks disappear. Invert them there instead. */
[data-theme="night"] .clogo img { filter: invert(1); }
/* Fallback when the logo file is not there yet */
.clogo--text {
  font-family: var(--font-sans); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
}

/* Trailing link under a grid, where a section bar used to sit above it */
.sect__more {
  display: flex; justify-content: flex-end;
  margin-top: clamp(22px, 4vh, 40px);
}
.sect__more a {
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.sect__more a:hover { border-bottom-color: currentColor; }
.statement {
  font-size: clamp(28px, 4.6vw, 64px);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.04;
  max-width: 22ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--accent); }
/* A two-word section heading does not need statement scale. */
.statement--sm { font-size: clamp(24px, 2.6vw, 38px); letter-spacing: -0.03em; max-width: none; }

/* ---------- Drop cap ---------- */
.dropcap::first-letter {
  float: left;
  font-size: 4.6em;
  line-height: 0.76;
  font-weight: 700;
  padding: 8px 14px 0 0;
  color: var(--ink);
}

/* ---------- Pull quote ---------- */
.pullquote {
  font-size: clamp(24px, 3.6vw, 46px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.12;
  max-width: 24ch;
  text-wrap: balance;
}
.pullquote::before { content: "\2018"; color: var(--accent); }
.pullquote::after { content: "\2019"; color: var(--accent); }

/* ---------- Lifecycle strip ---------- */
.lifecycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2vw, 28px); }
.lifecycle__item { border-top: 1px solid var(--ink); padding-top: 14px; }
.lifecycle__item .num { color: var(--accent); display: block; margin-bottom: 22px; }
.lifecycle__item h3 { font-size: clamp(17px, 1.6vw, 22px); margin-bottom: 10px; font-weight: 700; }
.lifecycle__item p { font-size: 12.5px; color: var(--ink-dim); }

/* ---------- Project cards ---------- */
.projgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.projgrid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proj { display: block; }
.proj__media {
  background: var(--panel);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  transition: background-color 0.6s ease;
}
.proj__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease), filter 0.6s ease; }
.proj:hover .proj__media img { transform: scale(1.04); }
.proj__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 12px 2px 14px;
  border-bottom: 1px solid var(--line);
}
.proj__name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; min-width: 0; }

/* ---------- CTA band ---------- */
.ctaband { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.ctaband a {
  display: flex; flex-direction: column; gap: 34px;
  padding: clamp(22px, 3vw, 40px);
  transition: background 0.3s ease, color 0.3s ease;
}
.ctaband a + a { border-left: 1px solid var(--ink); }
.ctaband a:hover { background: var(--ink); color: var(--bg); }
.ctaband__title { font-size: clamp(22px, 3vw, 40px); font-weight: 700; letter-spacing: -0.035em; }
.ctaband__sub { display: flex; justify-content: space-between; align-items: baseline; }

/* ============================================================
   SELECTOR STRIP
   ============================================================ */
.selector { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.selector__bar { display: flex; justify-content: space-between; padding: 12px var(--pad); border-bottom: 1px solid var(--line); }
.selector__track {
  display: grid;
  grid-template-columns: repeat(9, minmax(108px, 1fr));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.selector__track a {
  padding: 14px 14px 18px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.25s ease;
  min-width: 0;
}
.selector__track a:first-child { border-left: 1px solid var(--line); }
.selector__track a:hover { background: var(--panel); }
.selector__track .code { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.selector__track .thumb { aspect-ratio: 1; background: var(--panel); overflow: hidden; transition: background-color 0.6s ease; }
.selector__track .thumb img { width: 100%; height: 100%; object-fit: cover; }
.selector__track .nm { font-family: var(--font-sans); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); line-height: 1.5; }

/* ============================================================
   SERVICE DETAIL (catalogue sheet)
   ============================================================ */
.sheet {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(24px, 3.5vw, 64px);
  align-items: start;
  padding-top: clamp(36px, 5.5vh, 64px);
  padding-bottom: clamp(36px, 5.5vh, 64px);
  border-top: 1px solid var(--line);
}
.sheet__visual { position: relative; }
.sheet__sticky { position: static; }
.sheet__panel {
  background: var(--panel);
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 3vw, 48px);
  position: relative;
  transition: background-color 0.6s ease;
  overflow: hidden;
}
.sheet__panel img { width: 100%; height: 100%; object-fit: cover; }
.sheet__panel--embed { aspect-ratio: 3 / 2; padding: 0; display: block; }
.sheet__panel--embed > div { width: 100%; }
.sheet__panel--embed > div, .sheet__panel--embed > div > div { height: 100%; }
.sheet__panel--embed iframe { width: 100% !important; height: 100% !important; display: block; border: 0; }
.sheet__tag { position: absolute; top: 14px; left: 14px; background: var(--bg); padding: 4px 8px; z-index: 2; }
.sheet__code { text-align: center; margin-top: 18px; font-size: clamp(17px, 2vw, 24px); font-weight: 700; letter-spacing: -0.015em; }

.sheet__crumb { margin-bottom: clamp(14px, 2vh, 22px); display: flex; gap: 10px; flex-wrap: wrap; }
.sheet__crumb .sep { color: var(--ink-dim); }
.sheet__title { font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; letter-spacing: -0.045em; margin-bottom: 14px; }
.sheet__status { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: flex-start; margin-bottom: clamp(18px, 2.6vh, 30px); }
.sheet__dots { display: flex; flex-direction: column; gap: 5px; }
.sheet__dots .dot-row { display: flex; align-items: center; gap: 8px; }
.sheet__dots .dot { width: 7px; height: 7px; border-radius: 50%; }
.dot--green { background: #2f9e57; }
.dot--amber { background: #d8881e; }
.sheet__price { display: flex; align-items: center; gap: 10px; }
.sheet__price .tag { border: 1px solid var(--line); padding: 3px 7px; }
.sheet__desc { max-width: 52ch; font-size: 13.5px; color: var(--ink); margin: 0 0 clamp(18px, 2.6vh, 30px); }

.spec { border-top: 1px solid var(--line); }
.spec__row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.spec__label { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.spec__value { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim); line-height: 1.9; }
.spec__value strong { color: var(--ink); font-weight: 400; }
.sheet__actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }

/* ============================================================
   ETHOS
   ============================================================ */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.pillar { border-top: 1px solid var(--ink); padding-top: 16px; }
.pillar .num { color: var(--accent); display: block; margin-bottom: 26px; }
.pillar h3 { font-size: clamp(18px, 1.8vw, 24px); margin-bottom: 12px; font-weight: 700; }
.pillar p { font-size: 13px; color: var(--ink-dim); max-width: 36ch; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.stat { border-top: 1px solid var(--line); padding-top: 14px; }
.stat__value { font-size: clamp(44px, 6vw, 88px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.stat__value sup { font-size: 0.45em; color: var(--accent); }
.stat__label { display: block; margin-top: 10px; }

.zones { border-top: 1px solid var(--line); }
.zones__row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.zones__row .city { font-size: clamp(17px, 2vw, 24px); font-weight: 700; letter-spacing: -0.02em; }

.band { position: relative; height: clamp(320px, 55vh, 560px); overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band__caption { position: absolute; left: var(--pad); bottom: 18px; color: rgba(244,241,232,0.85); }

.toolrows { border-top: 1px solid var(--line); }
.toolrows__row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.toolrows__row .nm { font-size: clamp(18px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.toolrows__row .ds { color: var(--ink-dim); text-align: right; }

/* ============================================================
   PROJECTS
   ============================================================ */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 4vh, 40px); }
.filters button {
  font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 7px 12px;
  color: var(--ink-dim);
  transition: all 0.2s ease;
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.proj.is-hidden { display: none; }
.proj__specs { padding-top: 10px; display: grid; grid-template-columns: repeat(2, auto); gap: 3px 24px; width: max-content; max-width: 100%; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 72px);
}
.field label { display: block; padding: 14px 0 6px; }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: 8px 0 12px;
  font-family: var(--font-sans); font-size: 16px;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.25s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field textarea { resize: vertical; min-height: 110px; }
.field--file { border: 1px dashed var(--line); padding: 22px 18px; margin-top: 22px; transition: border-color 0.25s ease; }
.field--file:hover { border-color: var(--ink); }
.field--file input { width: 100%; font-family: var(--font-sans); font-size: 11px; }
.form__note { margin-top: 14px; line-height: 1.8; }
.consult { border: 1px solid var(--ink); padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 26px; }
.consult__rows { border-top: 1px solid var(--line); }
.consult__rows div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); }
.details-rows { border-top: 1px solid var(--line); }
.details-rows a { border-bottom: 1px solid transparent; }
.details-rows a:hover { border-bottom-color: var(--accent); }
.details-rows > div {
  display: grid; grid-template-columns: minmax(110px, 1fr) 2fr; gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.details-rows .v { font-size: clamp(16px, 2vw, 22px); font-weight: 700; letter-spacing: -0.015em; }

/* ============================================================
   FOOTER
   ============================================================ */
.ftr { border-top: 1px solid var(--ink); margin-top: clamp(56px, 9vh, 110px); }
.ftr__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(28px, 4vh, 48px) var(--pad);
}
.ftr__col h4 { margin-bottom: 14px; }
.ftr__col ul { display: flex; flex-direction: column; gap: 7px; }
.ftr__col a { color: var(--ink-dim); font-size: 13px; transition: color 0.2s ease; }
.ftr__col a:hover { color: var(--ink); }
.ftr__pitch { font-size: 13px; color: var(--ink-dim); max-width: 30ch; }
.ftr__mark {
  font-size: clamp(72px, 16vw, 260px);
  font-weight: 700; letter-spacing: -0.055em; line-height: 0.82;
  padding: 0 var(--pad);
  color: var(--ink);
  user-select: none;
}
.ftr__base {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between;
  padding: 16px var(--pad) 20px;
  border-top: 1px solid var(--line);
  margin-top: clamp(20px, 3vh, 36px);
}
.ftr__base a:hover { color: var(--ink); }

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal] { will-change: transform, opacity; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hdr { grid-template-columns: auto 1fr auto; }
  .lifecycle { grid-template-columns: repeat(2, 1fr); }
  .lifecycle__item:last-child { grid-column: span 2; }
  .projgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .hdr__nav, .hdr__right .btn { display: none; }
  .hdr__burger { display: block; }
  .spread__words { flex-direction: column; gap: 0; }
  .spread__w { white-space: normal; font-size: clamp(40px, 12.5vw, 96px); padding: 0 2vw; }
  .spread__w--r { text-align: left; align-self: flex-start; }
  .spread__deck { text-align: left; padding: 0 var(--pad); margin-left: 0; }
  .sheet { grid-template-columns: 1fr; }
  .sheet__sticky { position: static; }
  .sheet__desc { margin-left: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .pillars, .stats { grid-template-columns: 1fr; }
  .projgrid, .projgrid--two { grid-template-columns: minmax(0, 1fr); }
  .ctaband { grid-template-columns: 1fr; }
  .ctaband a + a { border-left: 0; border-top: 1px solid var(--ink); }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .lifecycle { grid-template-columns: 1fr; }
  .lifecycle__item:last-child { grid-column: auto; }
  .selector__track { display: flex; }
  /* fixed tile width; without it the natural image size blows each tile
     out to ~800px and the row reads as one giant stacked panel */
  .selector__track a { width: 132px; flex: 0 0 132px; }
  .selector__track .thumb { width: 100%; }
  .toolrows__row { grid-template-columns: auto 1fr; }
  .toolrows__row .ds { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============ Case study gallery ============ */
/* Three up, not two. At two columns a frame filled most of the viewport and the
   --full items ran the whole width at 21:9, so a single image was the entire
   screen. Three across puts roughly three frames in the height one used to take,
   and the feature frame is capped so it leads the set without swallowing it. */
.casegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
}
.casegrid__item { margin: 0; }
.casegrid__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--panel);
  display: block;
  transition: background-color 0.6s ease;
}
.casegrid--two { grid-template-columns: repeat(2, 1fr); }
/* Sources top out at 1600px. Running a frame edge to edge on a wide monitor is
   where "low res blown up" comes from, so a full-width frame stops at native. */
.casegrid__item--full { grid-column: 1 / -1; max-width: 1600px; margin-inline: auto; width: 100%; }
.casegrid__item--full img {
  aspect-ratio: 16 / 9;
  max-height: 56vh;
}
.casegrid__item figcaption { margin-top: 10px; }
@media (max-width: 1040px) {
  .casegrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .casegrid { grid-template-columns: 1fr; }
  .casegrid__item--full img { aspect-ratio: 4 / 3; max-height: none; }
}

/* ============ Pending imagery tag ============ */
.img-pending {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-dim, #888);
  opacity: 0.55;
}
.proj__media, .sheet__panel, .selector__track .thumb, .band { position: relative; }
.casegrid__item { position: relative; background: var(--panel); }

/* ============ Before/after compare slider ============ */
.ba { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); --pos: 50%; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); z-index: 2; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; margin: 0; -webkit-appearance: none; }
.ba__bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; z-index: 3; transform: translateX(-1px); box-shadow: 0 0 8px rgba(0,0,0,0.35); }
/* Keyboard focus: the range input is invisible, so surface focus on the frame. */
.ba:has(.ba__range:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.ba__bar::after { content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; color: #111; font-size: 11px; letter-spacing: 1px; padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.ba__tag { position: absolute; bottom: 12px; z-index: 3; font-size: 10px; letter-spacing: 0.12em; background: rgba(17,17,16,0.72); color: #f2f1ed; padding: 5px 9px; }
.ba__tag--l { left: 12px; }
.ba__tag--r { right: 12px; }
.ba-switch { display: flex; gap: 8px; margin-top: 12px; }
.ba-switch button { font: inherit; font-size: 11px; letter-spacing: 0.08em; padding: 8px 14px; background: none; border: 1px solid var(--hairline, #d8d6cf); color: inherit; cursor: pointer; }
.ba-switch button.is-active { background: var(--ink, #111110); color: var(--paper, #f2f1ed); border-color: var(--ink, #111110); }

/* ============ Film embed ============ */
.filmembed { position: relative; aspect-ratio: 16 / 9; background: var(--panel); }
.filmembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============ Lifecycle film (homepage services film) ============ */
.lifefilm {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}
.lifefilm__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a0a0a;
  overflow: hidden;
}
.lifefilm__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lifefilm__tag {
  position: absolute; left: 12px; bottom: 12px;
  font-size: 10px; letter-spacing: 0.08em;
  padding: 5px 9px;
  background: rgba(17, 17, 16, 0.72); color: var(--paper, #f2f1ed);
  pointer-events: none;
}
@media (max-width: 880px) {
  .lifefilm { grid-template-columns: 1fr; }
  .lifefilm__media { margin-top: 8px; }
}

/* ============ Hero video background ============ */
.spread__video {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.spread__video iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, calc(100svh * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ============ Option toggle (DA studies) ============ */
.optset__stage { margin: 0; aspect-ratio: 4 / 3; background: var(--panel); overflow: hidden; }
.optset__stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.optset .ba-switch { flex-wrap: wrap; }

/* ============ Working images (process wall) ============ */
/* Overview splits: narrative left, working grid right. */
.overview__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.overview__aside { min-width: 0; }
.overview__aside .sect__bar { margin-bottom: clamp(12px, 1.6vw, 20px); }

/* Square-cell grid. Row count is fixed by the modifier so every cell stays
   square and items may span without the rows going ragged. */
.working {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(4px, 0.6vw, 9px);
}
.working--r1 { aspect-ratio: 4 / 1; }
.working--r2 { aspect-ratio: 4 / 2; }
.working--r3 { aspect-ratio: 4 / 3; }
.working--r4 { aspect-ratio: 1; }

.working__item {
  margin: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  position: relative;
}
.working__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.working__item--w2  { grid-column: span 2; }
.working__item--h2  { grid-row: span 2; }
.working__item--big { grid-column: span 2; grid-row: span 2; }
/* A deliberately empty cell — lets each project break the grid differently. */
.working__item--void { background: none; border: 1px dashed var(--line); }

.working__note {
  margin-top: clamp(10px, 1.4vw, 16px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

@media (max-width: 1024px) {
  .overview__split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .working, .working--r2, .working--r3, .working--r4 {
    aspect-ratio: auto;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .working__item { aspect-ratio: 1; }
  .working__item--w2, .working__item--big { grid-column: span 2; aspect-ratio: 2 / 1; }
  .working__item--h2 { grid-row: auto; aspect-ratio: 1; }
  .working__item--void { display: none; }
}

/* ============ Lifestyle film (overview aside) ============ */
.filmbox {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.filmbox iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============ Working ribbon — slow continuous marquee ============ */
/* The track holds the working images twice over; translating it -50% loops
   seamlessly because the second half is identical to the first. */
.ribbon {
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(16px, 2.2vw, 28px) 0;
}
.ribbon__track {
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  width: max-content;
  animation: ribbon-scroll 120s linear infinite;
}
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon__item {
  flex: 0 0 auto;
  height: clamp(180px, 24vw, 330px);
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 0;
}
.ribbon__item img { height: 100%; width: auto; display: block; }

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

/* Fade the ribbon out at both edges so it reads as continuous, not clipped. */
.ribbon::before, .ribbon::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 2;
  pointer-events: none;
}
.ribbon::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.ribbon::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }

@media (prefers-reduced-motion: reduce) {
  .ribbon__track { animation: none; }
  .ribbon { overflow-x: auto; }
}

/* ---- Working images: process drawings as a slow band, not a square grid ---- */
.ribbon--working {
  border-top: 0; border-bottom: 0;
  padding: 0;
}
.ribbon--working .ribbon__track { gap: clamp(10px, 1.2vw, 18px); animation-duration: 150s; }
.ribbon--working .ribbon__item {
  height: clamp(120px, 15vw, 190px);
  border-color: var(--line);
}

/* ---- Recently-completed variant: linked project cards with captions ---- */
.ribbon--recent { border-top: 0; border-bottom: 0; padding: 4px 0 0; }
.ribbon--recent .ribbon__track { gap: clamp(14px, 1.8vw, 24px); animation-duration: 95s; }
.ribbon--recent .ribbon__card { flex: 0 0 auto; width: clamp(300px, 33vw, 480px); display: block; }
.ribbon--recent .ribbon__item {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}
.ribbon--recent .ribbon__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.ribbon--recent .ribbon__card:hover .ribbon__item img { transform: scale(1.04); }
.ribbon--recent .proj__specs { width: 100%; display: flex; justify-content: space-between; gap: 14px; }

/* ---- Overview split: give the film the larger share ---- */
.overview__split { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }

/* ---- Film frame: clean inset, no chrome fighting the page ---- */
.filmbox {
  border: 1px solid var(--line);
  padding: clamp(6px, 0.7vw, 10px);
  background: var(--panel);
  aspect-ratio: auto;
}
.filmbox__inner {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.filmbox__inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

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

/* Video flush to the column edge — the frame is a hairline, not an inset.
   Keeps the film aligned with the label bar, caption, ribbon and nav link. */
.filmbox { padding: 0; background: none; }

/* ---- Ribbon band: one rule, one rhythm ----
   The section already carries a hairline and its own padding, so the ribbon
   must not add borders and a second set of gaps on top. Tighter than a full
   .sect because it is a band between two sections, not a section in itself. */
.sect--ribbon {
  padding-top: clamp(26px, 3.6vh, 44px);
  padding-bottom: clamp(26px, 3.6vh, 44px);
}
.sect--ribbon .sect__bar { margin-bottom: clamp(14px, 1.8vw, 22px); }
.ribbon {
  border-top: 0;
  border-bottom: 0;
  padding: 0;
}

/* ============================================================
   BACK BAR — persistent return to projects on case-study pages
   ============================================================ */
.backbar {
  position: sticky; top: var(--hdr-h); z-index: 40;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 11px var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.6s ease;
}
.backbar__link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.25s ease;
}
.backbar__link:hover { color: var(--ink); }
.backbar__arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}
.backbar__link:hover .backbar__arrow { transform: translateX(-4px); }
.backbar__ctx {
  font-family: var(--font-sans); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-dim);
}
@media (max-width: 640px) {
  .backbar__ctx { display: none; }
}

/* ============================================================
   SERVICE BANDS — project pages: "Services delivered", one band
   per service, each with its own arrow carousel. One rhythm:
   --svc-gap between cells and stacks, and every content window
   is the same 3:2 cell, three to a row.
   ============================================================ */
.svcband { --svc-gap: clamp(12px, 1.6vw, 22px); margin-top: clamp(36px, 5vh, 60px); }
.svcband__head { margin-bottom: clamp(14px, 2vh, 22px); }
.svcband__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700; font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: -0.03em; line-height: 1;
}
.svccar { position: relative; }
.svccar__track {
  display: flex;
  gap: var(--svc-gap);
  overflow-x: auto;
  scrollbar-width: none;
}
.svccar__track::-webkit-scrollbar { display: none; }
.svccar__item {
  flex: 0 0 calc((100% - 2 * var(--svc-gap)) / 3);
  aspect-ratio: 3 / 2;
  margin: 0;
  background: var(--panel);
  overflow: hidden;
}
.svccar__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svccar__item--video { background: #000; }
.svccar__item--video iframe { width: 100%; height: 100%; display: block; border: 0; }
.svccar__item--pending {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
}
.svccar__btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 26px; line-height: 1;
  background: transparent;
}
.svccar__btn:hover { color: var(--ink); }
.svccar__btn--prev { left: -12px; }
.svccar__btn--next { right: -12px; }
.svccar::before, .svccar::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  width: clamp(20px, 3vw, 48px);
  z-index: 2; pointer-events: none;
}
.svccar::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.svccar::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
/* drag sliders share the same 3-up rhythm as the cells */
.svcband__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--svc-gap);
}
@media (max-width: 880px) {
  .svcband__grid { grid-template-columns: 1fr; }
  /* One full-width cell per view on small screens, videos included, so the
     carousels carry the same rhythm as the sliders. */
  .svccar__item, .svccar__item--video { flex-basis: 100%; }
}


/* ---- Video chrome: hidden inline, controls only in fullscreen ---- */
.vid-expand {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 17, 16, 0.55); color: #f4f1e8;
  font-size: 15px;
  opacity: 0; transition: opacity 0.25s ease;
}
figure:hover .vid-expand, .vid-expand:focus-visible { opacity: 1; }
.vid-expand:hover { background: rgba(17, 17, 16, 0.85); }
figure:fullscreen { background: #000; }
figure:fullscreen iframe, figure:fullscreen video { width: 100%; height: 100%; object-fit: contain; }
figure:fullscreen .vid-expand { display: none; }

/* ---- Suite toggle beside a band title ---- */
.svcband__head--row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.svctoggle { display: inline-flex; border: 1px solid var(--line); }
.svctoggle button {
  font-family: var(--font-sans); font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 9px 16px;
  color: var(--ink-dim);
  transition: background 0.2s ease, color 0.2s ease;
}
.svctoggle button + button { border-left: 1px solid var(--line); }
.svctoggle button.is-active { background: var(--ink); color: var(--bg); }

/* ---- Client veil: real projects land dark with the client's marks,
   hover lifts it. Veil logos ride invert(1) — the SVGs are painted black
   and an <img> cannot inherit color. Devices without hover skip the veil
   entirely rather than hide the render behind an unliftable scrim. ---- */
.proj__veil {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.5vw, 34px);
  background: rgba(10, 10, 8, 0.74);
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.proj:hover .proj__veil, .proj:focus-visible .proj__veil { opacity: 0; }
.proj__veil .clogo { max-width: 92%; }
/* Every mark sits in an identical bounding box, contain-fit, so a round
   monogram and a wide wordmark carry the same visual footprint. */
.proj__veil .clogo img {
  width: clamp(154px, 18.2vw, 231px);
  height: clamp(42px, 4.8vw, 64px);
  max-width: none; max-height: none;
  object-fit: contain;
  flex: 0 1 auto; min-width: 0;
  filter: brightness(0) invert(1); opacity: 0.95;
  padding: 0; border: 0;
}
/* the logo-row pair rule must not reach into the veil; paired marks get a
   hairline separator so they read as two companies, not one logo */
.proj__veil .clogo:has(img + img) img { height: clamp(42px, 4.8vw, 64px); max-width: none; }
.proj__veil .clogo img + img {
  box-sizing: content-box;
  padding-left: clamp(18px, 2.5vw, 34px);
  border-left: 1px solid rgba(244, 241, 232, 0.5);
}
.proj__veil .clogo--text {
  color: #f4f1e8;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 40px);
  letter-spacing: -0.02em; text-transform: none;
}
@media (hover: none) { .proj__veil { display: none; } }


/* ---- Embedded-experience hero and full-width frame cell (717 Bourke) ---- */
.spread--embed { padding-bottom: clamp(24px, 4vh, 48px); }
.spread__frame { width: 100%; height: min(72svh, 760px); background: #000; }
.spread__frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.svcframe { width: 100%; aspect-ratio: 16 / 9; max-height: 78svh; border: 1px solid var(--line); background: var(--panel); }
.svcframe iframe { width: 100%; height: 100%; display: block; border: 0; }

/* Film cells are widescreen: two 16:9 frames to a row rather than three 3:2
   crops, and the video itself fills the frame edge to edge. */
.svccar__item--video { flex-basis: calc((100% - var(--svc-gap)) / 2); aspect-ratio: 2.39 / 1; }
.svccar__item--video video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 880px) {
  .svccar__item--video { flex-basis: calc((100% - var(--svc-gap)) / 1.15); }
}

/* credit line under a band title */
.svcband__name { display: block; margin-top: 7px; }

/* ninth selector cell: the custom-work prompt */
.selector__track .thumb--custom {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; text-align: center;
}
.selector__track .thumb--custom span {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(14px, 1.2vw, 18px); letter-spacing: -0.02em;
  line-height: 1.15; color: var(--ink);
}

/* Featured concepts drift like the recent ribbon, on larger cards */
.ribbon--featured .ribbon__card { width: clamp(340px, 42vw, 620px); }
.ribbon--featured .ribbon__track { animation-duration: 80s; }

/* Video cells letterbox on black, never the panel colour */
.svccar__item--video { background: #000; }
.svccar__item--video iframe, .svccar__item--video video { background: #000; }

/* Full-viewport embedded hero with the title floated over the top */
.spread--embed-full { position: relative; padding: 0; }
.spread--embed-full .spread__frame { height: calc(100svh - var(--hdr-h) - 41px); }
.spread__words--overlay {
  position: absolute; top: clamp(16px, 4vh, 44px); left: 0; right: 0;
  margin: 0; text-align: center; z-index: 2; pointer-events: none;
  color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}
/* Small screens: the overlay fights the tour's own labels, so the title
   sits above the frame as a normal heading instead. */
@media (max-width: 880px) {
  .spread__words--overlay {
    position: static; text-align: left;
    color: var(--ink); text-shadow: none;
    padding: 16px var(--pad) 14px;
  }
  .spread--embed-full { display: flex; flex-direction: column-reverse; }
  .spread--embed-full .spread__frame { height: 68svh; }
}

/* A paper hero carrying only its title. Every other paper hero is followed by a
   .sect, which contributes its own generous top padding; the services selector
   is a full-bleed bar with none, so the heading landed flat on it. This variant
   carries the breathing room itself, top and bottom, so the title reads as a
   masthead band rather than a squeezed line. */
.spread--titleonly {
  padding-top: clamp(46px, 8.5vh, 104px);
  padding-bottom: clamp(40px, 7.5vh, 92px);
}

/* ============================================================
   LIGHTBOX
   Carousel frames are cropped to a common cell, so a still can only be
   read properly at size. Clicking one opens the whole band as a gallery:
   contain-fit on a near-black ground, arrows and keys to walk the set.
   ============================================================ */
.svccar__item img { cursor: zoom-in; }

.lb {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  background: rgba(8, 8, 7, 0.975);
}
.lb.is-open { display: block; }
.lb__stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(52px, 8vh, 92px) clamp(52px, 7vw, 116px);
}
.lb__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
/* Furniture sits on the ground, not on the picture. */
.lb__bar {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 16px clamp(16px, 3vw, 30px);
  color: rgba(244, 241, 232, 0.72);
}
.lb__bar--top { top: 0; }
.lb__bar--bottom { bottom: 0; }
.lb__caption {
  max-width: 78ch; line-height: 1.5;
  color: rgba(244, 241, 232, 0.86);
}
.lb__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: clamp(40px, 4vw, 54px); height: clamp(58px, 6vw, 76px);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1;
  color: rgba(244, 241, 232, 0.7);
  background: transparent; border: 0; cursor: pointer;
  transition: color 0.2s ease;
}
.lb__btn:hover, .lb__btn:focus-visible { color: #fff; }
.lb__btn--prev { left: clamp(4px, 1vw, 14px); }
.lb__btn--next { right: clamp(4px, 1vw, 14px); }
.lb__close {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(244, 241, 232, 0.72); font-size: 20px; line-height: 1;
  padding: 0 2px;
}
.lb__close:hover, .lb__close:focus-visible { color: #fff; }
.lb[hidden] { display: none; }
@media (max-width: 640px) {
  .lb__stage { padding: 64px 14px 88px; }
  .lb__btn { height: 46px; top: auto; bottom: 40px; transform: none; }
}

/* A comparison slider is not an image cell: it keeps its own aspect and
   carries a caption underneath, so it opts out of the fixed 3:2 frame. The
   track still gives it a third of the row, and the carousel skips cloning
   and the drift for these - a clone would be a second live slider, and a
   moving track fights the hand that is dragging it. */
.svccar__item--ba {
  aspect-ratio: auto;
  background: none;
  overflow: visible;
}

/* Services delivered, said big, under the overview statement */
.svclist {
  list-style: none;
  margin-top: clamp(28px, 4.5vh, 52px);
  border-top: 1px solid var(--ink);
}
.svclist li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: -0.03em;
}
.svclist li span {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}