/* doppeltake.com v2
   Studio register: fixed nav, full-viewport hero, editorial numbered sections,
   oversized type, one accent. Hand-written, no framework, no build step,
   no cookies, no analytics. No em-dash characters anywhere. */

/* Technical layer: labels, indices, metadata. Self-hosted, SIL OFL, latin
   subset. The display face is still under test at /type/; the mono layer is
   permanent regardless of that choice. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bg: #0e0e0e;
  --bg-raise: #131312;
  --fg: #f2f0ec;
  --fg-dim: #8d8880;
  --rule: #242320;
  --accent: #ff6b00;

  --measure: 36rem;
  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --nav-h: 4.25rem;
}

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

html {
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, iframe, video { max-width: 100%; }
img { display: block; height: auto; }

a {
  color: var(--fg);
  text-decoration: none;
  transition: color 130ms ease;
}
a:hover { color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 1px;
}
p a, .caption a { border-bottom: 1px solid var(--accent); padding-bottom: 1px; }

.skip {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--accent); color: #0e0e0e;
  padding: 0.7rem 1rem; border: 0; font-weight: 700;
}
.skip:focus { left: var(--gutter); top: 0.75rem; }

.wrap {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- reveal on scroll ----------
   Content is visible by default; the js class arms the animation, so nothing
   is hidden if scripting is off or reduced motion is set. */
.js .reveal {
  opacity: 0.35;
  transform: translateY(14px);
  transition: opacity 450ms ease, transform 450ms ease;
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background-color 220ms ease, border-color 220ms ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(14, 14, 13, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}
.nav-inner {
  width: 100%; max-width: 82rem; margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--display);
  font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em;
  border: 0;
}
.brand svg { height: 1.05rem; width: auto; display: block; }

.nav-links {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg); white-space: nowrap; border: 0;
  padding-block: 0.4rem;
}
.nav-links a:hover { color: var(--accent); }
.nav-links .cta {
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.55rem 1rem; border-radius: 999px;
}
.nav-links .cta:hover { background: var(--accent); color: #0e0e0e; }
/* Mobile nav: every destination stays reachable. An older rule hid items 2 and
   3 here, written when the nav had five entries; with four it was deleting Work
   and Services, the two things a visitor most wants. Instead the wordmark drops
   to just the II mark (the full wordmark is enormous in the hero directly
   below) and the labels tighten, which fits all four inside 375px. */
@media (max-width: 40rem) {
  .brand { font-size: 0; gap: 0; }
  .brand svg { height: 1.15rem; }
  .nav-links { gap: 0.85rem; }
  .nav-links a { font-size: 0.66rem; letter-spacing: 0.09em; }
  .nav-links .cta { padding: 0.5rem 0.75rem; }
}

/* 320px phones: one more notch so Contact is not clipped. */
@media (max-width: 23.5rem) {
  .nav-inner { padding-inline: 1rem; }
  .nav-links { gap: 0.6rem; }
  .nav-links a { font-size: 0.61rem; letter-spacing: 0.06em; }
  .nav-links .cta { padding: 0.45rem 0.6rem; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero-still {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
}

/* scrim so type always survives the brightest frame */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(14,14,14,0.62) 0%, rgba(14,14,14,0.25) 45%, rgba(14,14,14,0) 70%),
    linear-gradient(180deg, rgba(14,14,14,0.5) 0%, rgba(14,14,14,0.12) 34%,
                    rgba(14,14,14,0.42) 66%, rgba(14,14,14,0.95) 100%);
}

/* filigrana: the II ghosted into the frame */
.hero-mark {
  position: absolute; z-index: -1;
  right: -4vw; bottom: -16vh;
  height: 110vh; width: auto;
  opacity: 0.14;
  pointer-events: none;
}

.hero-content {
  position: relative;
  padding-block: calc(var(--nav-h) + 1.5rem) clamp(3.5rem, 9vh, 6.5rem);
}
.hero-kicker {
  margin: 0 0 1.3rem;
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent);
}
.hero h1 {
  margin: 0 0 1.2rem;
  font-family: var(--display);
  font-size: clamp(3rem, 6.6vw, 5.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 15ch;
}
.hero .subline {
  margin: 0 0 2.4rem;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 400;
  color: var(--fg);
  opacity: 0.78;
  max-width: 30rem;
}
.hero-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 2rem;
}
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg); border: 1px solid rgba(242,240,236,0.4);
  padding: 0.85rem 1.5rem; border-radius: 999px;
  cursor: pointer; background: transparent;
  transition: border-color 130ms ease, color 130ms ease, background 130ms ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-solid { background: var(--accent); border-color: var(--accent); color: #0e0e0e; }
.btn-solid:hover { background: transparent; color: var(--accent); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  width: 1px; height: 2.6rem;
  background: linear-gradient(180deg, transparent, var(--fg));
  opacity: 0.5;
}

/* ---------- sections ---------- */

section { position: relative; padding-block: clamp(5rem, 13vh, 9.5rem); }
section + section, main > section:first-child { border-top: 1px solid var(--rule); }

.sec-head {
  display: grid; gap: 0.4rem 3rem;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
.sec-index {
  font-family: var(--mono);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--accent);
}
.sec-title {
  margin: 0;
  grid-column: 2;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.5vw, 1.85rem);
  font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 30ch;
}
.sec-kicker {
  grid-column: 2;
  margin: 0 0 0.35rem;
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-dim);
}
@media (max-width: 40rem) {
  .sec-head { grid-template-columns: 1fr; }
  .sec-title, .sec-kicker { grid-column: 1; }
}

p { margin: 0 0 1.15rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
.lede { font-size: 1.12em; line-height: 1.6; max-width: 40rem; }
.dim { color: var(--fg-dim); }

/* ---------- video, click to play ---------- */

.video {
  position: relative;
  background: var(--bg-raise);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.video-frame { aspect-ratio: 16 / 9; width: 100%; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

.video-btn {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.9rem;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg); font: inherit;
}
.video-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.play {
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  border: 1px solid rgba(242,240,236,0.75); background: rgba(14,14,14,0.5);
  display: grid; place-items: center;
  transition: transform 140ms ease, border-color 140ms ease;
}
.play::before {
  content: ""; width: 0; height: 0; margin-left: 0.26rem;
  border-left: 1.05rem solid var(--fg);
  border-top: 0.65rem solid transparent;
  border-bottom: 0.65rem solid transparent;
}
.video-btn:hover .play { transform: scale(1.06); border-color: var(--accent); }
.video-btn:hover .play::before { border-left-color: var(--accent); }
.video-label {
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-dim);
}
@media (prefers-reduced-motion: reduce) { .play, .slide { transition: none; } }
.video[data-vimeo-id=""] .play { opacity: 0.35; }
.video[data-vimeo-id=""] .video-btn { cursor: not-allowed; }

.caption {
  margin: 0.9rem 0 0;
  font-size: 0.88rem; color: var(--fg-dim); max-width: var(--measure);
}

/* ---------- work ---------- */

.work-lead {
  display: grid; gap: clamp(1.5rem, 3.5vw, 3rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 56rem) { .work-lead { grid-template-columns: 0.9fr 1.5fr; } }
.work-lead > figure { margin: 0; }
.work-lead img.poster { width: 100%; border: 1px solid var(--rule); }
.work-meta {
  margin-top: 1rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim);
}
.work-meta b { color: var(--fg); font-weight: 700; }

.bleed {
  margin: clamp(3rem, 7vw, 5rem) 0 0;
}
.bleed img { width: 100%; border: 1px solid var(--rule); }

/* ---------- marquee filmstrip ---------- */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: clamp(1rem, 2.5vw, 1.75rem);
  margin-block: clamp(4rem, 10vh, 7rem) 0;
}
.marquee-track {
  display: flex; gap: clamp(0.6rem, 1.5vw, 1rem);
  width: max-content;
  animation: marquee 70s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee img {
  height: clamp(180px, 30vh, 320px); width: auto;
  border: 1px solid var(--rule);
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------- approach (numbered pillars) ---------- */

.pillars { list-style: none; margin: 0; padding: 0; max-width: 56rem; }
.pillars li {
  display: grid; gap: 0.3rem 3rem;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  padding: clamp(1.6rem, 3.5vw, 2.4rem) 0;
  border-top: 1px solid var(--rule);
}
.pillars li:last-child { border-bottom: 1px solid var(--rule); }
.pillars .n {
  font-family: var(--mono);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--accent);
}
.pillars strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.pillars span { color: var(--fg-dim); display: block; max-width: 44rem; }
@media (max-width: 40rem) {
  .pillars li { grid-template-columns: 1fr; }
}

/* ---------- identity master ---------- */

.mirror {
  display: grid; gap: clamp(0.6rem, 2vw, 1.1rem);
  grid-template-columns: 1fr 1fr;
  max-width: 52rem;
}
.mirror figure { margin: 0; }
.mirror img {
  width: 100%; aspect-ratio: 640 / 800; object-fit: cover;
  border: 1px solid var(--rule);
}
.mirror figcaption {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim);
}
.mirror figcaption b { color: var(--accent); font-weight: 700; }

.strip-note {
  margin-top: 1rem;
  font-size: 0.85rem; color: var(--fg-dim); max-width: 42rem;
}

.strip {
  display: grid; gap: clamp(0.4rem, 1.2vw, 0.75rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
.strip img { width: 100%; display: block; border: 1px solid var(--rule); }
.strip-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 46rem) { .strip-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- doors ---------- */

.doors {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .doors { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .doors { grid-template-columns: 1fr 1fr 1fr; } }
.door {
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.door h3 {
  margin: 0 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 600; line-height: 1.7;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.door p { color: var(--fg-dim); max-width: none; }

.notoffer {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.5rem, 3.5vw, 2.5rem);
}
.notoffer p { margin: 0; max-width: none; color: var(--fg-dim); }
.notoffer strong { color: var(--fg); }

/* ---------- studio / infrastructure ---------- */

.studio-grid {
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .studio-grid { grid-template-columns: repeat(3, 1fr); } }
.tool {
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.tool .n {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em;
  color: var(--accent);
}
.tool h3 {
  margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
}
.tool p { color: var(--fg-dim); font-size: 0.92rem; margin: 0; max-width: none; }

/* ---------- founder / contact ---------- */

.founder {
  display: grid; gap: clamp(1.75rem, 4.5vw, 3.5rem);
  grid-template-columns: 1fr; align-items: start;
}
@media (min-width: 46rem) { .founder { grid-template-columns: clamp(16rem, 26vw, 24rem) 1fr; } }
.founder img { width: 100%; border: 1px solid var(--rule); filter: grayscale(1); }

.contact-line {
  margin-top: 2rem;
  font-size: clamp(1.35rem, 3.4vw, 2.2rem);
  font-weight: 700; letter-spacing: -0.02em;
}
.contact-line a { border-bottom: 2px solid var(--accent); }

/* ---------- footer ---------- */

footer {
  position: relative;
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 8vh, 5.5rem);
  overflow: hidden;
}
.foot-lockup {
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 2.25rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 700; letter-spacing: -0.01em;
  text-transform: uppercase;
}
.foot-lockup svg { height: 0.62em; width: auto; }
footer .legal {
  margin-bottom: 1.3rem;
  font-size: 0.85rem; color: var(--fg-dim); max-width: 48rem;
}
footer .legal span { display: block; }
footer .disclosure { font-size: 0.85rem; color: var(--fg-dim); max-width: 48rem; }
.foot-mark-bg {
  position: absolute; right: -3vw; bottom: -30%;
  height: 130%; width: auto; opacity: 0.05; pointer-events: none;
}

/* ---------- light-mode browsers ---------- */
@media (prefers-color-scheme: light) {
  html, body { background: var(--bg); color: var(--fg); }
}

/* ---------- facts band ---------- */

.facts {
  border-top: 1px solid var(--rule);
  background: var(--bg-raise);
}
.facts-inner {
  max-width: 82rem; margin-inline: auto;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) var(--gutter);
  display: grid; gap: 0.9rem 2rem;
  grid-template-columns: repeat(2, 1fr);
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim);
}
@media (min-width: 46rem) { .facts-inner { grid-template-columns: repeat(4, 1fr); } }
.facts b { color: var(--fg); font-weight: 600; display: block; margin-bottom: 0.15rem; }

/* ---------- pipeline ---------- */

.pipeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
}
@media (min-width: 46rem) { .pipeline { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .pipeline { grid-template-columns: 1fr 1fr 1fr; } }
.stage {
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: clamp(1.3rem, 2.6vw, 1.9rem);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.stage .ui-vid-wrap {
  margin: calc(clamp(1.3rem, 2.6vw, 1.9rem) * -1);
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
}
.stage video, .stage .ui-vid-wrap img {
  width: 100%; display: block;
  aspect-ratio: 16 / 8.2; object-fit: cover; object-position: left top;
}
.stage .n {
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em;
  color: var(--accent);
}
.stage h3 { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
.stage p { color: var(--fg-dim); font-size: 0.9rem; margin: 0; max-width: none; }
.stage .tag {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim);
}

/* metadata line under image series */
.meta-line {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim); max-width: none;
}
.meta-line b { color: var(--fg); font-weight: 600; }

/* ---------- text ticker ---------- */

.ticker {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: 0.85rem;
  background: var(--bg-raise);
}
.ticker-track {
  display: flex; gap: 3.5rem; width: max-content;
  animation: marquee 55s linear infinite;
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-dim); white-space: nowrap;
}
.ticker-track b { color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---------- range grid ---------- */

.range-grid {
  display: grid; gap: clamp(0.4rem, 1.2vw, 0.75rem);
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 46rem) { .range-grid { grid-template-columns: repeat(6, 1fr); } }
.range-grid figure { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--rule); }
.range-grid img { width: 100%; display: block; transition: transform 400ms ease; }
.range-grid figure:hover img { transform: scale(1.04); }
.range-grid figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.6rem 0.6rem 0.5rem;
  background: linear-gradient(180deg, transparent, rgba(14,14,14,0.85));
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg);
}
@media (prefers-reduced-motion: reduce) { .range-grid img { transition: none; } }

/* ---------- interface loops ---------- */

.ui-row {
  display: grid; gap: clamp(0.75rem, 1.8vw, 1.25rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 76rem) { .ui-row { grid-template-columns: repeat(3, minmax(380px, 1fr)); } }
@media (min-width: 52rem) and (max-width: 75.99rem) { .ui-row { grid-template-columns: 1fr 1fr; } }
.ui-card { border: 1px solid var(--rule); background: var(--bg-raise); }
.ui-card video, .ui-card img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
.ui-card figcaption {
  padding: 0.9rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-dim);
}
.ui-card figcaption b { color: var(--fg); font-weight: 600; }

/* ---------- narrative ---------- */

.narrative {
  display: grid; gap: clamp(0.6rem, 1.5vw, 1rem);
  grid-template-columns: 1fr;
  margin-top: clamp(3rem, 7vw, 5rem);
}
@media (min-width: 46rem) { .narrative { grid-template-columns: 1fr 1fr; } }
.narrative img { width: 100%; border: 1px solid var(--rule); }

/* ---------- services ---------- */

.engage {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.2rem;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-dim);
}
.engage b { color: var(--fg); font-weight: 600; }

.door ul {
  list-style: none; margin: 0.6rem 0 0; padding: 0;
  display: grid; gap: 0.65rem;
}
.door li {
  color: var(--fg-dim); font-size: 0.92rem; line-height: 1.5;
  padding-left: 1.1rem; position: relative;
}
.door li::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 0.45rem; height: 2px; background: var(--accent);
}
.door li b { color: var(--fg); font-weight: 700; }

.svc-close {
  margin-top: clamp(2rem, 5vw, 3rem);
  font-size: 1.05rem;
}

/* ---------- case-study card (quarantined register) ---------- */

.case-card {
  margin-top: clamp(3rem, 7vw, 5rem);
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  max-width: 56rem;
}
.case-label {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.case-frames {
  display: grid; gap: clamp(0.5rem, 1.2vw, 0.8rem);
  grid-template-columns: 1fr 1fr;
}
.case-frames-3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .case-frames-3 { grid-template-columns: 1fr 1fr 1fr; } }
.case-frames-6 { grid-template-columns: 1fr 1fr; }
@media (min-width: 40rem) { .case-frames-6 { grid-template-columns: repeat(3, 1fr); } }
.case-frames img { width: 100%; border: 1px solid var(--rule); }
.case-text {
  margin: 1.1rem 0 0;
  font-size: 0.92rem; color: var(--fg-dim); max-width: none;
}

/* ---------- stage strip (pipeline, one line per stage) ---------- */

.stage-strip {
  list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0;
  max-width: 56rem;
}
.stage-strip li {
  display: grid; gap: 0.3rem 2rem;
  grid-template-columns: 11rem 1fr;
  align-items: baseline;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.stage-strip li:last-child { border-bottom: 1px solid var(--rule); }
.stage-strip b {
  font-family: var(--mono);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.stage-strip span { color: var(--fg-dim); font-size: 0.92rem; }
@media (max-width: 40rem) {
  .stage-strip li { grid-template-columns: 1fr; }
}

/* exhibit annotations on the evidence grid */
.exhibit figure { margin: 0; }
.exhibit figcaption {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-dim);
}

/* ---------- services: economic frame, proof lines, support ---------- */

.econ {
  margin-top: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--accent);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  max-width: 56rem;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.4rem);
}
.econ h3 {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 700; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.econ p { color: var(--fg-dim); max-width: none; margin-bottom: 0.9rem; }
.econ .econ-close {
  margin: 0; color: var(--fg); font-weight: 600;
}

.proof {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--mono);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-dim); max-width: none;
}
.proof::before { content: "Proof / "; color: var(--accent); font-weight: 600; }
.door { display: flex; flex-direction: column; }

.support {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
  margin-top: clamp(1.5rem, 3.5vw, 2.4rem);
  max-width: 56rem;
}
@media (min-width: 46rem) { .support { grid-template-columns: 1fr 1fr; } }
.support h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.support p { color: var(--fg-dim); font-size: 0.9rem; margin: 0; max-width: none; }

/* ---------- hero video (the 22s opening) ---------- */

.hero-video {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  display: none; background: var(--bg);
}
.hero.playing .hero-video { display: block; z-index: 1; }
iframe.hero-video { display: block; z-index: 1; }
.hero.playing .hero-still,
.hero.playing .hero-mark,
.hero.playing .hero-content,
.hero.playing .scroll-cue { display: none; }
.hero.playing::before { display: none; }

/* ---------- campaign section ---------- */

.campaign-grid {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 52rem) { .campaign-grid { grid-template-columns: minmax(14rem, 19rem) 1fr; } }
.campaign-grid figure { margin: 0; }
.vertical-loop video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border: 1px solid var(--rule); display: block; background: var(--bg-raise);
}
.campaign-grid img { width: 100%; border: 1px solid var(--rule); }
#campaign .strip-note { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }

/* ---------- finishing (services) ---------- */

.finishing {
  margin-top: clamp(1.5rem, 3.5vw, 2.4rem);
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.5rem, 3.5vw, 2.4rem);
  max-width: 56rem;
}
.finishing h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.finishing p { color: var(--fg-dim); font-size: 0.92rem; margin: 0; max-width: none; }

/* ---------- founder title ---------- */
.founder-title {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700; letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ---------- contact form ---------- */
.contact-form { max-width: 44rem; display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }
.contact-form label {
  display: grid; gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-dim);
}
.contact-form input, .contact-form select, .contact-form textarea {
  font: inherit; font-family: "Instrument Sans", Helvetica, Arial, sans-serif;
  font-size: 0.95rem; color: var(--fg);
  background: var(--bg-raise); border: 1px solid var(--rule);
  padding: 0.75rem 0.9rem; border-radius: 0;
  width: 100%;
}
.contact-form textarea { resize: vertical; min-height: 7rem; }
.contact-form input:focus-visible, .contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.contact-form .hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.form-foot { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.form-status { margin: 0; font-size: 0.88rem; color: var(--fg-dim); max-width: none; }

/* ---------- statement mode (SECTION01_DESIGN_FIX, exact numbers) ---------- */

.statement .s1-kicker {
  grid-column: auto; margin: 0 0 1.2rem;
}
.s1-headline {
  margin: 0 0 clamp(2rem, 5vh, 3.5rem);
  font-family: var(--display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 700; line-height: 1.02;
  letter-spacing: -0.02em; text-transform: uppercase;
  max-width: none;
}
.s1-body {
  font-size: clamp(1.25rem, 1.8vw, 1.4rem);
  line-height: 1.5; max-width: 34ch; margin: 0 0 1.6rem;
}
.s1-thesis {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--fg); max-width: none; margin: 0 0 1.2rem;
}
.s1-thesis b { color: var(--accent); font-weight: inherit; }
.s1-quiet {
  font-size: 1rem; color: var(--fg-dim); max-width: 44ch;
  margin: 0 0 clamp(2.25rem, 5vh, 3.5rem);
}

.chips {
  list-style: none; margin: 0 0 clamp(3rem, 7vh, 5rem); padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.7rem;
}
.chips li {
  border: 1px solid rgba(242, 240, 236, 0.35);
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}

.pullquote {
  margin: clamp(3rem, 7vh, 5rem) 0 0;
  padding: 0.4rem 0 0.4rem clamp(1.5rem, 3vw, 2.25rem);
  border-left: 3px solid var(--accent);
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.45; font-weight: 400;
  max-width: 60ch;
}

/* Services NO TOKENS box: statement, not whisper (same treatment as thesis) */
.econ { max-width: none; }
.econ h3 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.015em;
}
.econ p { font-size: 1.05rem; max-width: 62ch; }

/* ---------- opening clarity (research 2026-08-20) ---------- */

.hero-for {
  margin: -1.4rem 0 2.4rem;
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-dim);
}

.decoder { padding-block: clamp(3.5rem, 9vh, 6rem) 0; }
.decoder p {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.5; font-weight: 400;
  max-width: 34ch;
}

/* ---------- full-bleed exhibits (Leonardo 2026-08-20: bigger) ---------- */

.full-bleed {
  width: min(100vw, 102rem);
  margin-left: calc(50% - min(50vw, 51rem));
  padding-inline: var(--gutter);
}

/* ---------- work as a project page ---------- */

.work-title {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700; line-height: 1.02;
  letter-spacing: -0.02em; text-transform: uppercase;
  max-width: none;
}
.work-sub {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700; letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 1.4rem;
  max-width: none;
}

.camp-title {
  margin: clamp(4rem, 9vh, 6rem) 0 0.8rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.01em; text-transform: uppercase;
}

/* ---------- pricing question (statement) ---------- */

.price-ask {
  margin-top: clamp(3rem, 7vh, 5rem);
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
  border: 1px solid var(--rule);
  background: var(--bg-raise);
}
.price-ask h3 {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 700; letter-spacing: -0.01em;
  text-transform: uppercase;
}
.price-ask p {
  margin: 0 auto 1.75rem;
  color: var(--fg-dim); max-width: 44ch;
}

/* ---------- contact: centred and solid ---------- */

#contact .sec-head {
  grid-template-columns: 1fr;
  text-align: center;
}
#contact .sec-head .sec-title { grid-column: 1; margin-inline: auto; }
.form-card {
  margin-inline: auto;
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
#contact > .caption { text-align: center; max-width: none; }
.form-foot { justify-content: space-between; }

main > div.wrap > .pullquote { margin-block: clamp(3.5rem, 8vh, 5.5rem); }

.pullquote p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; }
.pullquote p + p { margin-top: 1.1rem; color: var(--fg-dim); }

.s1-headline b { color: var(--accent); font-weight: inherit; }

/* ---------- the 3D counterpart card ---------- */

.card-3d {
  border: 1px solid var(--rule);
  background: var(--bg-raise);
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
@media (min-width: 52rem) { .card-3d { grid-template-columns: 1.6fr 1fr; } }
.card-3d figure { margin: 0; }
.card-3d video {
  width: 100%; display: block;
  aspect-ratio: 16 / 10; object-fit: cover;
  border: 1px solid var(--rule); background: var(--bg);
}
.card-3d h4 {
  margin: 0 0 0.6rem;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.card-3d p { color: var(--fg-dim); font-size: 0.95rem; line-height: 1.7; margin: 0 0 1.2rem; max-width: 52ch; }
.card-3d .meta-line { margin: 0; font-size: 0.62rem; line-height: 1.8; max-width: 48ch; }