/* ==========================================================================
   Miru Studio v2 — design system
   Faithful local recreation of the darkroomagency.com system (see
   DESIGN-SYSTEM.md for the scan). Palette, radii, spacing unit, and type
   roles follow the scan. Fonts are local substitutes: their faces (GT
   Planar, STK Bureau Serif) are commercially licensed and are not copied.
   No remote assets anywhere.
   ========================================================================== */

/* ---------- Fonts (all local) ----------
   Sentinel stands in for STK Bureau Serif (display/heading role).
   The body grotesque role (GT Planar) is served by the system stack:
   local by definition, neutral at 14-15px exactly like the original. */
@font-face {
  font-family: 'Sentinel';
  src: url('fonts/Sentinel-Book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sentinel';
  src: url('fonts/Sentinel-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sentinel';
  src: url('fonts/Sentinel-Book-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}


/* ---------- Tokens (from the scan) ---------- */
:root {
  --bg: #FFFFFF;
  --text: #0D0D0D;
  --muted: #595959;
  --line: #E8E8E8;
  --primary: #0000EE;   /* Darkroom electric blue  */
  --accent: #F000D0;    /* Darkroom magenta        */

  --font-serif: 'Sentinel', Georgia, 'Times New Roman', serif;
  --font-sans: 'Helvetica Neue', Helvetica, -apple-system, 'Segoe UI', Arial, sans-serif;
  /* Type roles. The picker overrides these two per package. */
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);
  --display-weight: 400;

  --u: 4px;                       /* base unit, per scan   */
  --s-1: calc(var(--u) * 2);      /*  8 */
  --s-2: calc(var(--u) * 4);      /* 16 */
  --s-3: calc(var(--u) * 8);      /* 32 */
  --s-4: calc(var(--u) * 16);     /* 64 */
  --s-5: calc(var(--u) * 28);     /* 112 */

  --radius: 8px;                  /* everywhere, per scan  */

  --container: 1400px;
  --gutter: clamp(20px, 3.4vw, 48px);

  /* Their h1 is 32px, h2 28px, body 14px. The hero statement renders far
     larger than the nominal h1 — it is its own tier. */
  --t-statement: clamp(32px, 4.6vw, 66px);
  --t-h1: 32px;
  --t-h2: 28px;
  --t-lead: 18px;
  --t-body: 15px;
  --t-small: 14px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Nav ----------
   Lowercase sans links, black pill CTA, detached arrow tile. */
.nav { background: var(--bg); position: sticky; top: 0; z-index: 50; }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  height: 76px;
}
.brand {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.brand sup { font-size: 9px; font-weight: 400; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.brand-byline {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  white-space: nowrap;
}
@media (max-width: 600px) { .brand-byline { display: none; } }
.nav-links {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-small);
}
.nav-links a { transition: color 140ms ease; }

/* Case-study dropdown. Hover on pointer devices, click/keyboard everywhere,
   so the brand list is reachable without a separate index page. */
.nav-drop { position: relative; }
.nav-drop-toggle {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 140ms ease;
}
.nav-drop-toggle::after {
  content: ''; width: 5px; height: 5px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 180ms ease;
}
.nav-drop-toggle:hover { color: var(--accent); }
.nav-drop[data-open="true"] .nav-drop-toggle::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 168px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 28px rgba(0,0,0,0.09);
  opacity: 0; visibility: hidden;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 60;
}
.nav-drop[data-open="true"] .nav-drop-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-drop-menu a {
  padding: 9px 12px; border-radius: 5px;
  font-size: var(--t-small); white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
.nav-drop-menu a:hover { background: #F5F5F3; color: var(--accent); }
.nav-links a:hover { color: var(--accent); }
.nav-cta { display: flex; align-items: center; gap: var(--s-1); }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 20px;
  border-radius: var(--radius);
  background: var(--text); color: var(--bg);
  font-size: var(--t-small);
  transition: background 140ms ease;
}
.pill:hover { background: var(--primary); }
.pill.is-accent { background: var(--accent); color: var(--bg); }
.pill.is-accent:hover { background: var(--primary); }
.pill-icon {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
  background: var(--text); color: var(--bg);
  font-size: 16px;
  transition: background 140ms ease;
}
.pill-icon:hover { background: var(--accent); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------- Statement hero ----------
   Serif quote carrying the screen, bold attribution beneath. */
.statement { text-align: center; }
.statement.is-inline { padding: var(--s-4) 0; }
.statement-body {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--t-statement);
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin: 0 auto;
  text-wrap: balance;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  /* Hang the opening quote outside the measure. The property where
     supported, an indent approximation everywhere else. */
  text-indent: -0.42ch;
  hanging-punctuation: first;
}
@supports (hanging-punctuation: first) {
  .statement-body { text-indent: 0; }
}
.statement-attrib {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
}
.statement-attrib::before { content: '— '; font-weight: 400; }

/* ---------- Tag strip ----------
   Hairline pills, one row, overflowing the viewport edge. */
.tags {
  display: flex; gap: var(--s-1);
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--gutter) var(--s-3);
}
.tags::-webkit-scrollbar { display: none; }
.tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  white-space: nowrap;
  background: var(--bg);
}

/* ---------- Full-bleed tile row ----------
   Client work edge to edge, small gaps, rounded tiles. */
.strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-1);
  padding: 0 var(--s-1) var(--s-1);
}
.strip figure {
  position: relative; margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}
.strip video { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.strip figcaption {
  position: absolute; left: 12px; bottom: 10px;
  font-size: 12px; font-weight: 600;
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
@media (max-width: 900px) { .strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sections ---------- */
.section { padding: var(--s-5) 0 var(--s-4); }
.section + .section { border-top: 1px solid var(--line); }
.kicker {
  font-size: var(--t-small);
  color: var(--muted);
  margin-bottom: var(--s-2);
}
.section h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  max-width: 26ch;
  margin-bottom: var(--s-3);
  text-wrap: balance;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
.lead { font-size: var(--t-lead); line-height: 1.55; max-width: 58ch; }
.muted { color: var(--muted); }
a.text-link { color: var(--primary); }
a.text-link:hover { color: var(--accent); }

/* ---------- Run (numbered rows) ---------- */
.run { border-top: 1px solid var(--line); }
.run li {
  display: grid;
  grid-template-columns: 2.5rem 11rem 1fr;
  gap: var(--s-2);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.run .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.run .name { font-weight: 600; font-size: var(--t-body); }
.run .what { color: var(--muted); max-width: 60ch; }
@media (max-width: 800px) {
  .run li { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Offer cards ---------- */
.offer { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
.offer-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.offer-card.is-primary { border-color: var(--text); }
.offer-kicker { font-size: var(--t-small); color: var(--muted); }
.offer-price {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3vw, 48px);
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.offer-price span { font-family: var(--font-body); font-size: var(--t-body); color: var(--muted); }
.offer-list { display: grid; gap: 7px; color: var(--muted); font-size: var(--t-small); }
.offer-list li { padding-left: 16px; position: relative; }
.offer-list li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 1px; background: var(--muted);
}
.offer-card .pill { align-self: flex-start; margin-top: auto; }
@media (max-width: 760px) { .offer { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding: var(--s-3) 0 var(--s-4);
  display: flex; justify-content: space-between; gap: var(--s-2);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.foot a:hover { color: var(--accent); }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .statement-body { max-width: 100%; }
  .tags { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Flywheel ---------- */
.flywheel-grid {
  display: grid;
  grid-template-columns: minmax(320px, 500px) 1fr;
  gap: var(--s-4);
  align-items: center;
}
.flywheel { max-width: 500px; }
.fw { width: 100%; height: auto; display: block; overflow: visible; }
.fw-ring {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}
.fw-circle {
  stroke: var(--text);
  stroke-width: 1.25;
}
.fw-dot { fill: var(--bg); stroke: var(--text); stroke-width: 1.25; }
.fw-num {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--text);
}
.fw-label {
  font-family: var(--font-body);
  font-size: 13px;
  fill: var(--muted);
}
.fw-center {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  fill: var(--text);
}
.fw-center-sub {
  font-family: var(--font-body);
  font-size: 12px;
  fill: var(--muted);
}
.fw-node, .fw-node circle, .fw-node text, .fw-pulse { transform-box: fill-box; transform-origin: center; }
.fw-pulse { stroke: var(--text); stroke-width: 1.25; opacity: 0; }
@media (max-width: 900px) {
  .flywheel-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .flywheel { margin: 0 auto; }
}

/* ---------- Micro-interactions (Apple-quiet) ---------- */
.nav { border-bottom: 1px solid transparent; transition: border-color 240ms ease, background 240ms ease; }
.nav.is-scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
}
.brand-mark { display: block; height: 20px; width: auto; color: var(--text); }
.pill, .pill-icon { transition: background 140ms ease, transform 160ms ease; }
.pill:active, .pill-icon:active { transform: scale(0.97); }
.strip video { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.strip figure:hover video { transform: scale(1.035); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- The spot (hero stage) ----------
   The Remotion argument, native. Scenes are absolutely stacked layers;
   motion.js populates the visuals and runs the loop. Without JS, or with
   reduced motion, only the close scene shows: a static, honest hero. */
.spot { padding: var(--s-3) 0 var(--s-2); }
.spot-stage {
  position: relative;
  height: min(64vh, 620px);
  min-height: 420px;
}
.spot-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-2);
  text-align: center;
  visibility: hidden; opacity: 0;
  padding: 0 var(--gutter);
}
.spot-scene.is-close { visibility: visible; opacity: 1; }
.spot-scene .kicker {
  margin-bottom: 0;
  font-size: 17px;
  color: var(--text);
  opacity: 0.7;
}
.spot-line {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 30ch;
  text-wrap: balance;
}
.spot-line.is-lead { font-size: clamp(30px, 3.4vw, 56px); }
.spot-line.is-sub { font-family: var(--font-body); font-size: clamp(17px, 1.5vw, 22px); color: var(--muted); max-width: 40ch; }
.spot-num {
  font-family: var(--font-display);
  font-size: clamp(90px, 13vw, 190px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
.spot-line.is-small { font-size: clamp(17px, 1.5vw, 22px); }

/* The payoff: real client work, revealed out of a wireframe skin. */
.spot-work { display: flex; gap: 14px; }
.spot-work figure {
  position: relative; margin: 0;
  width: clamp(120px, 15vw, 210px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}
.spot-work video { width: 100%; height: 100%; object-fit: cover; }
.spot-work .skin {
  position: absolute; inset: 0;
  background: var(--bg);
  border: 1.5px solid var(--text);
  border-radius: var(--radius);
  padding: 10%;
  display: flex; flex-direction: column; gap: 8%;
}
.spot-work .skin i { display: block; background: var(--line); border-radius: 3px; }
.spot-work .skin i:first-child { flex: 1; }
.spot-work .skin i:nth-child(2) { height: 7%; width: 84%; background: var(--text); opacity: 0.85; }
.spot-work .skin i:nth-child(3) { height: 7%; width: 56%; }
/* The card pile and tile row must never outgrow the viewport. */
.spot-vis { max-width: 100%; }
@media (max-width: 700px) {
  .spot-work { gap: 10px; }
  .spot-work figure { width: clamp(88px, 26vw, 120px); }
}
.spot-vis {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 28px;
}

/* Wireframe ad card, the DOM twin of Wireframe.tsx */
.wf {
  width: var(--wf-w, 150px);
  aspect-ratio: 2 / 3;
  background: var(--bg);
  border: 1.5px solid var(--text);
  border-radius: var(--radius);
  padding: calc(var(--wf-w, 150px) * 0.06);
  display: flex; flex-direction: column;
  gap: calc(var(--wf-w, 150px) * 0.05);
  position: relative;
}
.wf-img {
  flex: 1; border-radius: 6px; background: var(--line);
  position: relative; overflow: hidden;
}
.wf-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #E8E1D4 0%, #B8A989 100%);
  opacity: var(--wf-fill, 0);
}
.wf-line { height: 6%; border-radius: 3px; background: var(--text); width: 86%; opacity: 0.85; }
.wf-line.is-sub { background: var(--line); width: 58%; opacity: 1; }
.wf-cta { height: 13%; width: 46%; border-radius: 999px; background: var(--line); }
.wf.is-filled .wf-cta { background: var(--accent); }
.wf.is-dead { border-color: var(--line); }
.wf-score {
  position: absolute; top: -14px; right: -14px;
  width: 25%; aspect-ratio: 1; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
}
.wf-score.is-low { border-color: var(--line); color: var(--muted); }
.wf-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--primary); opacity: 0;
}
.wf-read { margin-top: 12px; font-size: 14px; color: var(--primary); }

/* The 1-of-100 grid */
.spot-grid {
  display: grid;
  grid-template-columns: repeat(15, 26px);
  gap: 6px;
}
.spot-grid i {
  width: 26px; height: 34px; border-radius: 3px;
  background: var(--bg); border: 1.5px solid var(--line);
}
.spot-grid i.is-you { border-color: var(--accent); }

/* Mini wheel */
.sw { width: min(440px, 70vw); overflow: visible; }
.sw-circle { stroke: var(--text); stroke-width: 1.5; }
.sw-dot { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.sw-num { font-family: var(--font-body); font-size: 11px; fill: var(--text); }
.sw-center {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; fill: var(--text);
}
@media (max-width: 700px) {
  .spot-stage { height: 60vh; }
  .spot-vis .wf:nth-child(3) { display: none; }
  .spot-grid { grid-template-columns: repeat(10, 22px); }
  .spot-grid i { width: 22px; height: 28px; }
  .spot-grid i:nth-child(n+61) { display: none; }
}

/* ---------- Case studies (same system, applied to a work page) ---------- */
.case-head { padding: clamp(48px, 7vw, 90px) 0 var(--s-3); }
.case-head .kicker { margin-bottom: var(--s-2); }
.case-head h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(30px, 3.8vw, 60px);
  line-height: 1.1; letter-spacing: -0.015em;
  max-width: 24ch; text-wrap: balance;
  font-kerning: normal; text-rendering: optimizeLegibility;
}
.case-stats { display: flex; gap: clamp(24px, 5vw, 72px); flex-wrap: wrap; margin-top: var(--s-3); }
.case-stats b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1;
  font-variant-numeric: lining-nums;
}
.case-stats span { font-size: var(--t-small); color: var(--muted); }
.case-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); padding: 0 var(--s-1); }
.case-media figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--line); }
.case-media video, .case-media img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.case-media.is-wide figure { aspect-ratio: auto; }
@media (max-width: 760px) { .case-media { grid-template-columns: repeat(2, 1fr); } .case-media figure:nth-child(n+5) { display: none; } }
.case-quote {
  font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.25; letter-spacing: -0.01em; max-width: 30ch; text-wrap: balance;
}
.case-attrib { margin-top: var(--s-2); font-family: var(--font-display); font-style: italic; font-size: 18px; }
.case-note { font-size: var(--t-small); color: var(--muted); max-width: 62ch; }

/* ---------- Contact form (homepage) ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.form { display: grid; gap: var(--s-2); }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--muted); }
.field input, .field textarea, .field select {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 14px; font-size: var(--t-body);
  transition: border-color 200ms ease;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--text); }
.field textarea { resize: vertical; min-height: 96px; }
.form .pill { justify-self: start; border: 0; cursor: pointer; }
.form-note { font-size: 13px; color: var(--muted); }
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } }