/* Generated by _build/build.py from the Dick Abanto Lou design system. Edit the sources in _build/, not this file. */
@font-face{font-family:"Host Grotesk";src:url("../fonts/HostGrotesk-Variable.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("../fonts/HostGrotesk-Variable-Italic.woff2") format("woff2");font-weight:300 800;font-style:italic;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/GeistMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{--paper:#e8e6e0;--paper-raised:#ffffff;--cobalt:#1925aa;--cobalt-deep:#0d1150;--ink:#1925aa;--ink-muted:#4b5299;--on-cobalt:#e8e6e0;--rule:#1925aa;--rule-soft:#b7b9d3;--dither-ink:#1925aa;--dither-light:#b7b9d3;--signal:#ff6a2a;--on-signal:#0d1150;--signal-text:#b93d0c;--focus:var(--ink);--shadow-card:0 24px 40px -28px rgba(13,17,80,0.45);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--space-32:128px;--radius-none:0px;--radius-hair:2px;--radius-full:9999px;--stroke-hair:1px;--stroke-bold:2px;--tilt-left:-2deg;--tilt-right:7deg;--page-max:1920px;--measure-label:40ch;--header-h:64px;--font-sans:"Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;--font-mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;color-scheme:light}
/* Dick Abanto Lou — component styles. Loads after tokens.css. Every class is prefixed sp- (system prefix, kept short). */

.sp-root, .sp-page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.sp-mono, .sp-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
  line-height: 1.5;
}
.sp-label { max-width: var(--measure-label); }
.sp-label--muted { color: var(--ink-muted); }
.sp-mono-sm {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}
:where(.sp-btn, .sp-link, .sp-row summary, a):focus-visible {
  outline: var(--stroke-bold) solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-none);
}
.sp-on-cobalt :where(.sp-btn, .sp-link, a):focus-visible { outline-color: var(--on-cobalt); }

/* ---------- Button ---------- */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--header-h); min-width: 104px; padding: 0 var(--space-8);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border: 0; border-radius: var(--radius-none); cursor: pointer;
  background: var(--cobalt); color: var(--on-cobalt);
  transition: background-color 120ms linear;
}
.sp-btn:hover { background: var(--cobalt-deep); }
.sp-btn--ghost { background: var(--paper-raised); color: var(--ink); }
.sp-btn--ghost:hover { background: var(--paper); box-shadow: inset 0 0 0 var(--stroke-hair) var(--rule); }
.sp-btn--signal { background: var(--signal); color: var(--on-signal); }
.sp-btn--signal:hover { background: var(--signal); box-shadow: inset 0 0 0 var(--stroke-bold) var(--on-signal); }
.sp-btn--icon { min-width: 0; width: var(--header-h); padding: 0; }
.sp-btn--sm { height: 44px; padding: 0 var(--space-6); min-width: 0; }
.sp-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: var(--stroke-bold); }
.sp-btn-group { display: inline-flex; }

/* ---------- BracketLink ---------- */
.sp-link {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.sp-link::before { content: "["; padding-right: var(--space-2); }
.sp-link::after  { content: "]"; padding-left: var(--space-2); }
.sp-link .sp-arrow { display: inline-block; transition: transform 160ms ease-out; }
.sp-link:hover .sp-arrow { transform: translateX(6px); }
.sp-link:hover .sp-link__text { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sp-on-cobalt .sp-link { color: var(--on-cobalt); }

/* ---------- Masthead ---------- */
.sp-masthead {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: var(--space-4);
}
.sp-namebox {
  display: inline-flex; align-items: center; gap: var(--space-4);
  height: var(--header-h); padding: 0 var(--space-6);
  background: var(--cobalt); color: var(--on-cobalt); text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.sp-cursor { width: 10px; height: 10px; background: var(--signal); border-radius: var(--radius-hair); flex: none; }

/* ---------- SectionLabel ---------- */
.sp-section-label {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: var(--stroke-hair) solid var(--rule);
  padding-top: var(--space-3);
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink);
}
.sp-on-cobalt .sp-section-label { border-color: var(--on-cobalt); color: var(--on-cobalt); }

/* ---------- ServiceRow (accordion) ---------- */
.sp-rows { font-family: var(--font-sans);  border-bottom: var(--stroke-hair) solid var(--rule); }
.sp-row { border-top: var(--stroke-hair) solid var(--rule); }
.sp-row summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-8);
  padding: var(--space-6) 0;
  font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
}
.sp-row summary::-webkit-details-marker { display: none; }
.sp-plus { position: relative; width: 28px; height: 28px; flex: none; }
.sp-plus::before, .sp-plus::after {
  content: ""; position: absolute; background: var(--ink);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.sp-plus::before { width: 28px; height: var(--stroke-bold); }
.sp-plus::after  { width: var(--stroke-bold); height: 28px; transition: transform 160ms ease-out; }
.sp-row[open] .sp-plus::after { transform: translate(-50%, -50%) scaleY(0); }
.sp-row__body {
  display: grid; grid-template-columns: 1fr minmax(0, 420px);
  padding: var(--space-8) 0 var(--space-12);
}
.sp-row__body > div { grid-column: 2; display: grid; gap: var(--space-8); justify-items: start; }

/* ---------- StepCard ---------- */
.sp-step {
  font-family: var(--font-sans);
  background: var(--paper-raised); color: var(--ink);
  padding: var(--space-8); width: 100%; max-width: 600px; box-sizing: border-box;
  border-radius: var(--radius-none); box-shadow: var(--shadow-card);
  transform: rotate(calc(var(--tilt-left) + var(--ts, 0deg)));
  transition: transform 120ms linear;
}
.sp-step--right { transform: rotate(calc(var(--tilt-right) + var(--ts, 0deg))); }
.sp-step--flat { transform: none; box-shadow: none; }
.sp-step__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: var(--stroke-hair) solid var(--rule); padding-bottom: var(--space-3);
  font-size: 36px; line-height: 1.1; letter-spacing: -0.02em;
}
.sp-step__body { padding: var(--space-8) 0 var(--space-12); border-bottom: var(--stroke-hair) solid var(--rule); }

/* ---------- Statement ---------- */
.sp-statement {
  font-family: var(--font-sans);
  background: var(--cobalt); color: var(--on-cobalt);
  padding: var(--space-24) var(--space-4) var(--space-16);
}
.sp-statement__text {
  font-size: clamp(32px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.03em;
  margin: 0; max-width: 26ch;
}
.sp-statement__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 40ch)); gap: var(--space-16);
  justify-content: end; margin-top: var(--space-24);
}

/* ---------- Halftone ---------- */
.sp-halftone {
  position: relative; overflow: hidden; background: var(--cobalt);
  isolation: isolate;
}
.sp-halftone > img, .sp-halftone > svg {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.35); mix-blend-mode: screen; opacity: .9;
}
.sp-halftone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, var(--rule-soft) 0.7px, transparent 0.9px);
  background-size: 3px 3px; mix-blend-mode: normal; opacity: .9;
}
.sp-halftone--dense::after { background-image: radial-gradient(circle, var(--rule-soft) 0.45px, transparent 0.6px); background-size: 2px 2px; }

/* ---------- CaseCard ---------- */
.sp-case { font-family: var(--font-sans); display: grid; gap: var(--space-4); color: var(--ink); text-decoration: none; }
.sp-case__media { aspect-ratio: 4 / 3; }
.sp-case__meta {
  display: flex; justify-content: space-between; gap: var(--space-4);
  border-top: var(--stroke-hair) solid var(--rule); padding-top: var(--space-3);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.sp-case__title { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.sp-case:hover .sp-case__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.sp-tag {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--signal); color: var(--on-signal);
}

/* ---------- Masthead: nav + language toggle ---------- */
.sp-nav { display: flex; align-items: center; gap: var(--space-6); }
.sp-nav__links { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.sp-nav__links a {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.sp-nav__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.sp-nav__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sp-lang {
  display: inline-flex; align-items: center; height: 44px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  box-shadow: inset 0 0 0 var(--stroke-hair) var(--rule);
}
.sp-lang a, .sp-lang span { padding: 0 var(--space-3); line-height: 44px; color: var(--ink); text-decoration: none; }
.sp-lang [aria-current="true"] { background: var(--cobalt); color: var(--on-cobalt); }
.sp-on-cobalt .sp-nav__links a, .sp-on-cobalt .sp-lang a, .sp-on-cobalt .sp-lang span { color: var(--on-cobalt); }
.sp-on-cobalt .sp-lang { box-shadow: inset 0 0 0 var(--stroke-hair) var(--on-cobalt); }
.sp-on-cobalt .sp-lang [aria-current="true"] { background: var(--on-cobalt); color: var(--cobalt); }

/* ---------- Hero ---------- */
.sp-hero {
  position: relative; overflow: hidden; font-family: var(--font-sans);
  background: var(--cobalt); color: var(--on-cobalt);
  min-height: 560px; display: grid; grid-template-rows: auto 1fr auto;
}
.sp-hero__art { position: absolute; inset: 0; z-index: 0; opacity: .38; }
.sp-hero__art > img, .sp-hero__art > svg { object-position: 30% 50%; }
.sp-hero > :not(.sp-hero__art) { position: relative; z-index: 1; }
.sp-hero__body {
  display: grid; grid-template-columns: 1fr minmax(0, 420px); align-items: end;
  gap: var(--space-8); padding: var(--space-12) var(--space-6) var(--space-6);
}
.sp-hero__pitch { grid-column: 2; display: grid; gap: var(--space-6); justify-items: start; }
.sp-hero__headline { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
.sp-hero__name {
  margin: 0; padding: 0 var(--space-6) var(--space-6);
  font-weight: 400; font-size: clamp(64px, 11vw, 160px); line-height: 0.9; letter-spacing: -0.045em;
}
.sp-hero__micro { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; }
.sp-trust {
  display: grid; gap: var(--space-2); padding: var(--space-6);
  border-top: var(--stroke-hair) solid var(--rule);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink);
}
.sp-trust small { font: inherit; color: var(--ink-muted); }
.sp-on-cobalt .sp-btn--ghost { background: var(--on-cobalt); color: var(--cobalt); }

/* ---------- IdeaSelector ---------- */
.sp-picker { font-family: var(--font-sans); color: var(--ink); }
.sp-picker__q { margin: 0 0 var(--space-6); font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; }
.sp-picker__opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--stroke-hair) solid var(--rule); border-left: var(--stroke-hair) solid var(--rule); }
.sp-picker input { position: absolute; opacity: 0; pointer-events: none; }
.sp-picker label {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6);
  min-height: 140px; padding: var(--space-4); cursor: pointer;
  border-right: var(--stroke-hair) solid var(--rule); border-bottom: var(--stroke-hair) solid var(--rule);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--paper);
  transition: background-color 120ms linear;
}
.sp-picker label b { font-weight: 500; font-size: 12px; }
.sp-picker label:hover { background: var(--paper-raised); }
.sp-picker input:checked + label { background: var(--cobalt); color: var(--on-cobalt); }
.sp-picker input:focus-visible + label { outline: var(--stroke-bold) solid var(--focus); outline-offset: -4px; }
.sp-picker__answers > * { display: none; }
.sp-picker:has(#idea-1:checked) [data-for="idea-1"],
.sp-picker:has(#idea-2:checked) [data-for="idea-2"],
.sp-picker:has(#idea-3:checked) [data-for="idea-3"],
.sp-picker:has(#idea-4:checked) [data-for="idea-4"] { display: block; }

/* ---------- ProducerCall ("La decisión del productor") ---------- */
.sp-call {
  font-family: var(--font-sans); background: var(--paper-raised); color: var(--ink);
  padding: var(--space-8); display: grid; gap: var(--space-6); justify-items: start;
}
.sp-call__kicker { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.sp-call__service { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.sp-call__text { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; max-width: 34ch; }

/* ---------- NumbersStrip ---------- */
.sp-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--stroke-hair) solid var(--rule); border-bottom: var(--stroke-hair) solid var(--rule);
  font-family: var(--font-sans); color: var(--ink);
}
.sp-stat { padding: var(--space-6) var(--space-4); display: grid; gap: var(--space-3); align-content: start; }
.sp-stat + .sp-stat { border-left: var(--stroke-hair) solid var(--rule); }
.sp-stat__value { white-space: nowrap; font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -0.03em; }
.sp-stat__label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- ResourceCard ---------- */
.sp-resource {
  font-family: var(--font-sans); background: var(--paper-raised); color: var(--ink);
  padding: var(--space-6); display: grid; gap: var(--space-4); align-content: start; justify-items: start;
}
.sp-resource__meta { width: 100%; display: flex; justify-content: space-between; gap: var(--space-4); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.sp-resource__title { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 400; }
.sp-resource--soon { background: transparent; box-shadow: inset 0 0 0 var(--stroke-hair) var(--rule); }
.sp-tag--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 var(--stroke-hair) var(--rule); }

/* ---------- Timeline ---------- */
.sp-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); font-family: var(--font-sans); color: var(--ink); }
.sp-timeline li { border-top: var(--stroke-hair) solid var(--rule); padding: var(--space-4) var(--space-4) 0 0; display: grid; gap: var(--space-2); position: relative; }
.sp-timeline li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--cobalt); }
.sp-timeline li:last-child::before { background: var(--signal); }
.sp-timeline__year { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.sp-timeline__what { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }

/* ---------- FAQ (ServiceRow, smaller) ---------- */
.sp-row--faq summary { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; padding: var(--space-4) 0; }
.sp-row--faq .sp-plus { width: 20px; height: 20px; }
.sp-row--faq .sp-plus::before { width: 20px; }
.sp-row--faq .sp-plus::after { height: 20px; }
.sp-row--faq .sp-row__body { padding: var(--space-2) 0 var(--space-8); }

/* ---------- Footer ---------- */
.sp-footer {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--cobalt-deep); color: var(--on-cobalt);
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); padding: var(--space-12) var(--space-6) var(--space-6);
}
.sp-footer a { color: var(--on-cobalt); }
.sp-footer__big { font-family: var(--font-sans); text-transform: none; letter-spacing: -0.03em; font-size: 56px; line-height: 1; font-weight: 400; margin: 0 0 var(--space-6); }
.sp-footer__base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-4); border-top: var(--stroke-hair) solid var(--on-cobalt); padding-top: var(--space-4); }
.sp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

@media (max-width: 720px) {
  .sp-hero__body, .sp-row__body { grid-template-columns: 1fr; }
  .sp-hero__pitch, .sp-row__body > div { grid-column: 1; }
  .sp-picker__opts, .sp-stats { grid-template-columns: 1fr 1fr; }
  .sp-timeline, .sp-footer { grid-template-columns: 1fr; }
  .sp-statement__cols { grid-template-columns: 1fr; }
}

/* ---------- Motion: dither, reveal, wipe, stairs (driven by bundle.js / site.js) ---------- */
:where(.is-dithered) { position: relative; } .is-dithered { overflow: hidden; }
.dither-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
  transition: opacity 240ms steps(4, end);
}
.is-dithered > svg, .is-dithered > img { visibility: hidden; }
.is-dithered[data-reveal] > img { visibility: visible; filter: none; mix-blend-mode: normal; opacity: 1; }
.is-dithered[data-reveal]:hover .dither-canvas, .is-dithered[data-reveal]:focus-within .dither-canvas { opacity: 0; }
.is-dithered::after { display: none; }
.pixel-wipe {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1000; pointer-events: none;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
[data-stair] { position: relative; overflow: hidden; }
.stair { position: absolute; right: 0; bottom: 0; height: 96px; display: flex; align-items: flex-end; pointer-events: none; z-index: 2; }
.stair > span { flex: 1; height: 100%; background: var(--paper); transform: scaleY(0); transform-origin: bottom; }
@media (prefers-reduced-motion: reduce) {
  .dither-canvas { transition: none; }
  .stair { display: none; }
}

.sp-hero > .stair { position: absolute; }


/* ===== Site layout — gamitz.com. Built on the Dick Abanto Lou design system (tokens.css + components). ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
::selection { background: var(--cobalt); color: var(--on-cobalt); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip:focus { left: 16px; top: 16px; }

/* Gutters: one outer rule for every section */
.g { padding-inline: clamp(16px, 2.5vw, 32px); }
.sec { padding-block: clamp(64px, 9vw, 128px); }
.sec--tight { padding-block: clamp(40px, 6vw, 72px); }
.stack { display: grid; gap: var(--space-12); }
.stack-sm { display: grid; gap: var(--space-6); }
.on-cobalt-bg { background: var(--cobalt); color: var(--on-cobalt); }
.on-deep-bg { background: var(--cobalt-deep); color: var(--on-cobalt); }
.raised-bg { background: var(--paper-raised); }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--paper); border-bottom: var(--stroke-hair) solid var(--rule);
}
.site-head .sp-masthead { padding: 12px clamp(16px, 2.5vw, 32px); align-items: center; gap: var(--space-6); }
.site-head .sp-namebox { height: 48px; padding: 0 var(--space-4); }
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; height: 44px; padding: 0 var(--space-4);
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: inset 0 0 0 var(--stroke-hair) var(--rule); color: var(--ink);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 12px); width: min(320px, calc(100vw - 32px));
  background: var(--cobalt); color: var(--on-cobalt); padding: var(--space-6);
  display: grid; gap: var(--space-4);
}
.menu__panel a { color: var(--on-cobalt); font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.menu__panel .sp-btn { background: var(--on-cobalt); color: var(--cobalt); }
@media (max-width: 960px) {
  .site-head .sp-nav__links, .site-head .nav-cta { display: none; }
  .menu { display: block; }
}
@media (max-width: 420px) {
  .site-head .sp-namebox { font-size: 11px; padding: 0 var(--space-3); gap: var(--space-2); }
  .site-head .sp-nav { gap: var(--space-2); }
}

/* ---------- Page heads: split titles across a column rule ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
}
.split > :last-child { border-left: var(--stroke-hair) solid var(--rule); padding-left: clamp(16px, 2.5vw, 32px); }
.display-l { font-size: clamp(52px, 8vw, 112px); line-height: .92; letter-spacing: -0.04em; }
.statement { font-size: clamp(30px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.03em; }
.title { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
.lead { font-size: clamp(20px, 2vw, 24px); line-height: 1.3; letter-spacing: -0.01em; }
.prose { max-width: 65ch; display: grid; gap: 1em; }
.prose h2 { font-size: 24px; line-height: 1.25; margin-top: .5em; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: .4em; }
.muted { color: var(--ink-muted); }
.page-head { padding-block: clamp(48px, 7vw, 96px) clamp(32px, 5vw, 64px); display: grid; gap: var(--space-8); }
.page-head__sub { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: var(--space-8); }
.page-head__sub > * { grid-column: 2; }

/* two-column body: empty left, content right */
.right-col { display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: var(--space-8); }
.right-col > * { grid-column: 2; min-width: 0; }

/* ---------- Hero ---------- */
.sp-hero { min-height: 0; }
.sp-hero__body { padding: clamp(48px, 8vw, 120px) clamp(16px, 2.5vw, 32px) var(--space-8); }
.sp-hero__name { padding: 0 clamp(16px, 2.5vw, 32px) clamp(16px, 2.5vw, 32px); text-wrap: balance; }
.sp-hero__art svg { width: 100%; height: 100%; }
.avail { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--signal); color: var(--on-signal); padding: var(--space-1) var(--space-2); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.sp-trust { padding-inline: clamp(16px, 2.5vw, 32px); border-top: 0; border-bottom: var(--stroke-hair) solid var(--rule); }

.sp-stat { min-width: 0; }
.sp-stat__value { white-space: normal; overflow-wrap: anywhere; }
.split--top { align-items: start; }
@media (max-width: 860px) { .sp-hero__art { opacity: .22; } }

/* ---------- Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.problems .sp-step { max-width: none; }
.problems .sp-step__body { border-bottom: 0; padding-bottom: 0; font-size: 15px; }
.closing-line { max-width: 34ch; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-16); padding-block: var(--space-8); }
.steps .sp-step:nth-child(2) { margin-top: var(--space-16); }
.steps .sp-step:nth-child(4) { margin-top: var(--space-16); }
.steps .sp-step:nth-child(3) { transform: rotate(calc(1.5deg + var(--ts, 0deg))); }
.steps .sp-step:nth-child(4) { transform: rotate(calc(-4deg + var(--ts, 0deg))); }

/* ---------- Featured case ---------- */
.case { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.case__text { display: grid; gap: var(--space-8); min-width: 0; }
.case__block { display: grid; gap: var(--space-3); }
.case__block h3 { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.case__block ul { margin: 0; padding-left: 1.1em; display: grid; gap: .35em; }
.loop { background: var(--cobalt); color: var(--on-cobalt); padding: var(--space-8); display: grid; gap: var(--space-4); }
.loop svg { width: 100%; height: auto; display: block; }
.loop .ring { fill: none; stroke: var(--on-cobalt); stroke-width: 1; opacity: .55; }
.loop .node { fill: var(--cobalt); stroke: var(--on-cobalt); stroke-width: 2; }
.loop .node--on { fill: var(--signal); stroke: var(--signal); }
.loop .lbl { fill: var(--on-cobalt); font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.loop .arrow { fill: var(--on-cobalt); }
.loop .center { fill: var(--on-cobalt); font-family: var(--font-sans); font-size: 22px; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: no-preference) {
  .loop .pulse { animation: pulse 6s steps(1) infinite; }
  .loop .pulse:nth-of-type(2) { animation-delay: 1.5s; }
  .loop .pulse:nth-of-type(3) { animation-delay: 3s; }
  .loop .pulse:nth-of-type(4) { animation-delay: 4.5s; }
  @keyframes pulse { 0%, 24% { fill: var(--signal); stroke: var(--signal); } 25%, 100% { fill: var(--cobalt); stroke: var(--on-cobalt); } }
}
.quote { border-top: var(--stroke-hair) solid var(--rule); padding-top: var(--space-4); display: grid; gap: var(--space-3); }
.quote p:first-child { font-size: 22px; line-height: 1.3; }
.placeholder { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--signal-text); }

/* ---------- Statement / about ---------- */
.about-short { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.photo { aspect-ratio: 4 / 5; position: relative; }
.photo__tag { position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 2; background: var(--paper-raised); color: var(--ink); padding: var(--space-1) var(--space-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.sp-statement { padding: 0; background: transparent; }
.sp-statement__text { max-width: 30ch; }
.sp-statement__cols { margin-top: var(--space-12); }

/* ---------- Resource band ---------- */
.band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; }
.band .sp-btn--signal { white-space: nowrap; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact__actions { display: grid; gap: var(--space-6); justify-items: start; }
.contact__details { display: grid; gap: var(--space-2); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; }
.contact__details .email { text-transform: none; user-select: all; }
.tally-slot {
  border: var(--stroke-hair) dashed var(--on-cobalt); padding: var(--space-8); min-height: 260px;
  display: grid; place-content: center; text-align: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.sp-on-cobalt .sp-btn:not(.sp-btn--ghost):not(.sp-btn--signal) { background: var(--on-cobalt); color: var(--cobalt); }
.sp-on-cobalt .sp-btn--ghost { background: transparent; color: var(--on-cobalt); box-shadow: inset 0 0 0 var(--stroke-hair) var(--on-cobalt); }
.sp-on-cobalt .sp-btn--ghost:hover { background: var(--cobalt-deep); }
.sp-hero .sp-btn--ghost, .sp-footer .sp-btn--ghost { background: var(--on-cobalt); color: var(--cobalt); box-shadow: none; }

/* ---------- Services page ---------- */
.svc-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-12); }
.svc-detail h4 { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.svc-detail p, .svc-detail li { font-size: 16px; }
.svc-detail ul { margin: 0; padding-left: 1.1em; display: grid; gap: .35em; }
.svc-detail .note { grid-column: 1 / -1; border-left: var(--stroke-bold) solid var(--signal); padding-left: var(--space-4); }
.svc-detail .act { grid-column: 1 / -1; }
.sp-row__body--full { display: block; padding: var(--space-6) 0 var(--space-12); }
.svc-q { display: grid; gap: var(--space-2); }
.svc-q .sp-mono-sm { color: var(--ink-muted); font-family: var(--font-mono); }
.dev-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.dev-card { background: var(--paper-raised); padding: var(--space-8); display: grid; gap: var(--space-4); align-content: start; justify-items: start; }
.dev-card--low { background: transparent; box-shadow: inset 0 0 0 var(--stroke-hair) var(--rule); }

/* ---------- Portfolio ---------- */
.cv-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
.entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); padding-block: var(--space-16); border-top: var(--stroke-hair) solid var(--rule); scroll-margin-top: 96px; }
.entry__head { display: grid; gap: var(--space-4); align-content: start; }
.entry__meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.entry dl { margin: 0; display: grid; gap: var(--space-6); }
.entry dt { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-2); }
.entry dd { margin: 0; }
.entry dd ul { margin: 0; padding-left: 1.1em; display: grid; gap: .35em; }
.entry .sp-halftone { aspect-ratio: 4 / 3; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { padding: var(--space-1) var(--space-3); box-shadow: inset 0 0 0 var(--stroke-hair) var(--rule); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Resources ---------- */
.waitlist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: var(--space-8); align-items: end; }
.waitlist form { display: flex; gap: 0; }
.waitlist label { position: absolute; left: -9999px; }
.waitlist input {
  flex: 1; min-width: 0; height: 44px; border: 0; padding: 0 var(--space-4);
  background: var(--on-cobalt); color: var(--cobalt-deep);
  font-family: var(--font-mono); font-size: 14px; border-radius: var(--radius-none);
}
.waitlist input:focus-visible { outline: var(--stroke-bold) solid var(--signal); outline-offset: 2px; }
.waitlist .sp-btn { background: var(--signal); color: var(--on-signal); }
.form-msg { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; min-height: 1.4em; }

/* ---------- About ---------- */
.about-full { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.creds { display: grid; gap: var(--space-3); }
.creds li { font-size: 16px; }

/* ---------- 404 ---------- */
.lost { min-height: 60vh; display: grid; align-content: center; gap: var(--space-8); justify-items: start; }

/* ---------- Footer ---------- */
.sp-footer { padding-inline: clamp(16px, 2.5vw, 32px); }
.sp-footer__big { font-size: clamp(36px, 5vw, 56px); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .split, .case, .contact, .about-full, .about-short, .entry, .waitlist, .band, .page-head__sub, .right-col { grid-template-columns: 1fr; }
  .split > :last-child { border-left: 0; padding-left: 0; border-top: var(--stroke-hair) solid var(--rule); padding-top: var(--space-4); }
  .page-head__sub > *, .right-col > * { grid-column: 1; }
  .grid-3, .cases, .dev-cards, .svc-detail { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--space-8); }
  .steps .sp-step { transform: none !important; margin-top: 0 !important; box-shadow: none; }
  .about-short .photo { max-width: 220px; }
  .sp-row summary { font-size: 24px; }
}
@media (max-width: 560px) {
  .sp-picker__opts { grid-template-columns: 1fr; }
  .sp-picker label { min-height: 0; flex-direction: row; justify-content: flex-start; align-items: baseline; }
  .sp-stats { grid-template-columns: 1fr 1fr; }
  .sp-stat:nth-child(3) { border-left: 0; }
  .sp-stat:nth-child(n+3) { border-top: var(--stroke-hair) solid var(--rule); }
  .sp-footer__base { flex-direction: column; }
  .sp-btn { height: auto; min-height: 56px; padding-block: var(--space-3); text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- Motion layer ---------- */
.sp-hero__art.is-dithered { opacity: 1; }
.sp-hero__name span { display: inline; }
.foot-field { height: clamp(120px, 16vw, 200px); background: var(--cobalt-deep); }
.sp-case .is-dithered .dither-canvas { transition: none; }
.sp-case:hover .sp-case__media, .sp-case:focus-visible .sp-case__media { outline: var(--stroke-hair) solid var(--rule); outline-offset: 4px; }
@media (max-width: 860px) {
  .sp-hero__art.is-dithered, .sp-hero__art { bottom: auto; height: 300px; }
  .sp-hero > div:nth-child(2) { height: 260px; }
  .sp-hero__body { padding-top: var(--space-8); }
}
/* Mobile hero (option A): the name floats over the dithered band, first thing on screen; the pitch follows on solid cobalt. */
@media (max-width: 860px) {
  .sp-hero { display: flex; flex-direction: column; }
  .sp-hero > div:nth-child(2) { display: none; }
  .sp-hero__art.is-dithered, .sp-hero__art { top: 0; bottom: auto; height: 380px; }
  .sp-hero__name {
    order: -1; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: var(--space-6); padding-bottom: var(--space-6);
    font-size: clamp(64px, 23vw, 120px); line-height: .86;
  }
  .sp-hero__name .w { display: block; }
  .sp-hero__body { padding-top: var(--space-8); padding-bottom: var(--space-12); }
}
.photo--plain img { display: block; width: 100%; height: 100%; object-fit: cover; }