/* ==========================================================================
   QuietFlow AI
   Strictly monochrome. White ground, black type, greys between.
   Emphasis comes from weight, size and rule work, never from hue.
   The only colour on the page belongs to the client screenshots.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Every value is chroma 0. There is no hue anywhere in the interface. */
  --void:      oklch(1.000 0 0);
  --void-deep: oklch(0.972 0 0);
  --panel:     oklch(0.975 0 0);
  --panel-hi:  oklch(0.945 0 0);
  --rule:      oklch(0.845 0 0);
  --rule-soft: oklch(0.905 0 0);

  --ink:   oklch(0.175 0 0);
  --ink-2: oklch(0.395 0 0);
  --ink-3: oklch(0.520 0 0);

  /* "Signal" is simply black. Kept as a token so emphasis stays one decision. */
  --signal:     oklch(0.175 0 0);
  --signal-dim: oklch(0.560 0 0);
  --signal-ink: oklch(1.000 0 0);
  --live:       oklch(0.420 0 0);

  --font-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Fluid spacing */
  --gutter:   clamp(1.25rem, 4vw, 3.5rem);
  --section:  clamp(4.5rem, 10vw, 9rem);
  --measure:  68ch;

  --radius:    4px;
  --radius-lg: 8px;

  /* Semantic z-scale */
  --z-base: 0;
  --z-sticky: 100;
  --z-overlay: 400;
  --z-modal: 500;

  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
  font-stretch: 112%;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--signal); color: var(--signal-ink); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  background: var(--signal);
  color: var(--signal-ink);
  padding: 0.7em 1.2em;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

/* --- Layout primitives -------------------------------------------------- */

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

.wrap-narrow { max-width: 880px; }

.section { padding-block: var(--section); }

.rule-top { border-top: 1px solid var(--rule-soft); }

/* Mono readout label. Used only where a real instrument caption belongs. */
.readout {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.section-head h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  max-width: 18ch;
}

.section-head .lede {
  max-width: 42ch;
  color: var(--ink-3);
  margin: 0;
  font-size: 1rem;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--rule);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.82em 1.4em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.28s var(--ease-out-quart),
    border-color 0.28s var(--ease-out-quart),
    color 0.28s var(--ease-out-quart),
    transform 0.28s var(--ease-out-quart);
}

.btn .arrow {
  display: inline-block;
  transition: transform 0.32s var(--ease-out-expo);
}

.btn:hover { transform: translateY(-1px); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  --btn-bg: var(--signal);
  --btn-fg: var(--signal-ink);
  --btn-bd: var(--signal);
}
.btn-primary:hover { --btn-bg: oklch(0.34 0 0); --btn-bd: oklch(0.34 0 0); }

.btn-ghost:hover { --btn-bd: var(--ink-3); --btn-bg: var(--panel); }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--void) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out-quart), background-color 0.3s var(--ease-out-quart);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header { backdrop-filter: blur(14px) saturate(140%); }
}

.site-header[data-scrolled="true"] {
  border-bottom-color: var(--rule-soft);
  background: color-mix(in oklch, var(--void) 93%, transparent);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* Logo art is black on transparent, which is already correct on white. */
.brand img {
  height: 30px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
}

.nav a:not(.btn) {
  position: relative;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding-block: 0.35em;
  transition: color 0.24s var(--ease-out-quart);
}

.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ease-out-expo);
}

.nav a:not(.btn):hover { color: var(--ink); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }

.nav-links { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .brand img { height: 26px; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(3.5rem, 8vw, 7rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

/* A whisper of grey settling out of the top of the page. Nothing more. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 -15% auto -15%;
  height: 110%;
  background: radial-gradient(
    58% 62% at 50% 0%,
    oklch(0.905 0 0 / 0.85) 0%,
    oklch(0.960 0 0 / 0.5) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

.hero > .wrap { position: relative; z-index: 1; }

/* The dot hangs into the margin so the label's text aligns with the
   headline and body copy below it, rather than sitting indented by it. */
/* Hero is centred. Block children are centred with auto margins, inline
   content by text-align, and each measure is capped so the centred axis
   stays readable rather than sprawling. */
.hero > .wrap { text-align: center; }

.hero h1 { margin-inline: auto; max-width: 20ch; }

.hero-sub { margin-inline: auto; }

.hero-actions { justify-content: center; }

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Centred now, so the dot sits back in the flow. Hanging it into the margin
   only made sense when the label had a left edge to line up with. */
.status-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px oklch(0.42 0 0 / 0.16);
  animation: pulse 2.6s var(--ease-out-quart) infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px oklch(0.42 0 0 / 0.16); }
  50%      { box-shadow: 0 0 0 6px oklch(0.42 0 0 / 0.04); }
}

.hero h1 {
  font-size: clamp(2.4rem, 1.1rem + 5.4vw, 5.4rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 17ch;
  margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem);
}

/* The headline's four lines are explicit spans. Centred, they act as balanced
   line breaks; the per-line optical offsets that left alignment needed are
   dropped, since a centred edge has no shared column to align to. */
.hero h1.optical > span { display: inline; }

@media (min-width: 900px) {
  .hero h1.optical > span { display: block; }
}

.hero h1 em {
  font-style: normal;
  color: var(--signal);
}

.hero-sub {
  max-width: 56ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

/* On its own row, so the two buttons sit on the true centre axis rather than
   being pushed left by the note sharing their line. */
.hero-actions .note {
  flex-basis: 100%;
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* Hero readout band: one instrument, four cells, hairline ruled. */
.readout-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border-top: 1px solid var(--rule);
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* Symmetric padding, since the cells read centred rather than left-aligned. */
.readout-cell {
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.1rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--rule-soft);
}

@media (min-width: 780px) {
  .readout-cell { border-bottom: 0; border-right: 1px solid var(--rule-soft); }
  .readout-cell:last-child { border-right: 0; }
}

.readout-value {
  display: block;
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.25rem);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--signal);
  margin-bottom: 0.6rem;
}

.readout-note {
  display: block;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-3);
  max-width: 26ch;
  margin-inline: auto;
}

/* --- Stack marquee ------------------------------------------------------ */

.stack {
  border-block: 1px solid var(--rule-soft);
  padding-block: 1.15rem;
  overflow: hidden;
  --marquee-gap: 3.25rem;
}

.stack-track {
  display: flex;
  width: max-content;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
  animation: marquee 42s linear infinite;
}

.stack:hover .stack-track { animation-play-state: paused; }

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

.stack-item {
  display: inline-flex;
  align-items: center;
  gap: var(--marquee-gap);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.stack-item::after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rule);
}

/* --- Track record statement --------------------------------------------- */

.statement {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .statement { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.statement h2 {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.4rem);
  letter-spacing: -0.034em;
  max-width: 14ch;
}

.statement-body p { color: var(--ink-2); max-width: 52ch; }

.statement-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft);
}

.statement-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.statement-list b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Claim points ("I don't just advise. I build.") --------------------- */

.points {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-soft);
}

@media (min-width: 760px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
}

.point {
  padding-block: clamp(1.5rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--rule-soft);
}

.point h3 {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.45rem;
}

.point p { color: var(--ink-3); max-width: 46ch; margin: 0; font-size: 0.9375rem; }

/* --- Case study brief --------------------------------------------------- */

.brief { border-top: 1px solid var(--rule-soft); }

.brief-item {
  display: grid;
  gap: 0.9rem clamp(2rem, 4vw, 4rem);
  padding-block: clamp(1.75rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
}

@media (min-width: 800px) {
  .brief-item { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}

.brief-figure { display: flex; flex-direction: column; gap: 0.3rem; }

.brief-number {
  font-size: clamp(2.1rem, 1.6rem + 1.8vw, 2.9rem);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
}

.brief-client { color: var(--ink-3); font-size: 0.875rem; line-height: 1.4; }

.brief-body h3 {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  max-width: 34ch;
}

.brief-body p { color: var(--ink-2); max-width: 62ch; margin-bottom: 0.9rem; }

.brief-body .chips { margin-bottom: 0; }

/* --- Case study records ------------------------------------------------- */

.record {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--rule-soft);
}

@media (min-width: 900px) {
  /* The screenshot always takes the wider track, whichever side it sits on. */
  .record { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }

  .record[data-flip="true"] {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  }
  .record[data-flip="true"] .record-shot { order: 1; }
  .record[data-flip="true"] .record-body { order: 2; }
}

.record-metric {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.record-number {
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: -0.04em;
  line-height: 0.94;
  color: var(--signal);
}

.record-metric .readout { padding-bottom: 0.35em; }

.record-client {
  font-size: 0.9375rem;
  color: var(--ink-3);
  margin-bottom: 0.7rem;
}

.record h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  margin-bottom: 0.85rem;
  max-width: 24ch;
}

.record-outcome {
  color: var(--ink-2);
  max-width: 46ch;
  margin-bottom: 1.35rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.6rem;
}

.chip {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 0.4em 0.85em;
  white-space: nowrap;
}

/* Screenshot frame, styled like a lit instrument face. */
.shot {
  position: relative;
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.4s var(--ease-out-quart), transform 0.5s var(--ease-out-expo);
}

.shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s var(--ease-out-expo), filter 0.5s var(--ease-out-quart);
  filter: saturate(0.94) contrast(1.02);
}

a.shot:hover { border-color: var(--rule); transform: translateY(-3px); }
a.shot:hover img { transform: scale(1.022); filter: saturate(1) contrast(1.03); }

.shot-tag {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: color-mix(in oklch, var(--void-deep) 86%, transparent);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 0.42em 0.85em;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@supports (backdrop-filter: blur(1px)) {
  .shot-tag { backdrop-filter: blur(8px); }
}

.live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--live);
  flex-shrink: 0;
}

/* --- Reviews ------------------------------------------------------------ */

/* Four reviews, so a 2x2 block. auto-fit would strand the fourth alone. */
.reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 760px) {
  .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.review {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--void);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
}

.stars {
  color: var(--signal);
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

.review blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.58;
  letter-spacing: -0.008em;
}

.review-who {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 0.35rem;
}

.review-who img {
  width: 62px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule-soft);
  flex-shrink: 0;
}

.review-name { color: var(--ink); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.review-desc { color: var(--ink-3); font-size: 0.8125rem; line-height: 1.35; }

/* --- Process (the one earned numbered sequence) ------------------------- */

.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--rule-soft);
}

.step:last-child { border-bottom: 1px solid var(--rule-soft); }

.step-num {
  counter-increment: step;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--signal-dim);
  letter-spacing: 0.1em;
  padding-top: 0.45em;
  min-width: 2.5ch;
}

.step-num::before { content: counter(step, decimal-leading-zero); }

.step h3 {
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.step p { color: var(--ink-3); max-width: 58ch; margin: 0; }

@media (min-width: 860px) {
  .step { grid-template-columns: auto minmax(0, 26ch) minmax(0, 1fr); align-items: baseline; }
  .step p { padding-top: 0.15rem; }
}

/* --- About -------------------------------------------------------------- */

.about-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
  }
}

.about-portrait { margin: 0; }

.about-portrait img {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule-soft);
}

.about-portrait figcaption {
  margin-top: 0.9rem;
  max-width: 340px;
}

.portrait-name { display: block; color: var(--ink); font-weight: 600; }
.portrait-role { display: block; color: var(--ink-3); font-size: 0.875rem; }

.about-side { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }

.about-copy p { max-width: 58ch; color: var(--ink-2); }
.about-copy strong { color: var(--ink); font-weight: 600; }

.facts { border-top: 1px solid var(--rule-soft); }

.fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule-soft);
}

.fact-value { color: var(--ink); font-weight: 600; text-align: right; }

/* --- Contact ------------------------------------------------------------ */

.contact-grid {
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
}

.contact-copy h2 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
  margin-bottom: 1rem;
  max-width: 14ch;
}

.contact-copy p { color: var(--ink-2); max-width: 40ch; }

.contact-direct {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-soft);
}

.contact-direct a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.25s var(--ease-out-quart), color 0.25s var(--ease-out-quart);
}
.contact-direct a:hover { color: var(--signal); border-bottom-color: var(--signal); }

.form { display: grid; gap: 1.1rem; }

.field { display: grid; gap: 0.5rem; }

.field label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--void);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.8em 0.95em;
  transition: border-color 0.24s var(--ease-out-quart), background-color 0.24s var(--ease-out-quart);
}

.field textarea { resize: vertical; min-height: 8.5rem; line-height: 1.6; }

.field input::placeholder,
.field textarea::placeholder { color: oklch(0.545 0 0); }

.field input:hover,
.field textarea:hover { border-color: var(--rule); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--signal);
  background: var(--void);
}

.form-row { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.35rem;
}

.form-status {
  font-size: 0.875rem;
  color: var(--ink-3);
  min-height: 1.4em;
}
.form-status[data-state="ok"]  { color: var(--live); }
.form-status[data-state="err"] { color: var(--ink); }

.form button[type="submit"][disabled] { opacity: 0.6; cursor: progress; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule-soft);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--void-deep);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2.5rem;
}

.footer-inner img { height: 24px; width: auto; opacity: 0.9; }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.footer-meta a { color: var(--ink-3); text-decoration: none; transition: color 0.24s var(--ease-out-quart); }
.footer-meta a:hover { color: var(--ink); }

/* Multi-column footer */

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .footer-cols { grid-template-columns: 1.6fr repeat(3, 1fr); }
}

.footer-brand img {
  height: 26px;
  width: auto;
  opacity: 0.92;
  margin-bottom: 1rem;
}

.footer-brand p {
  color: var(--ink-3);
  font-size: 0.9375rem;
  max-width: 30ch;
  margin: 0;
}

.footer-col { display: flex; flex-direction: column; gap: 0.7rem; }

.footer-col h2 {
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.2rem;
}

.footer-col a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
  width: fit-content;
  transition: color 0.24s var(--ease-out-quart);
}
.footer-col a:hover { color: var(--ink); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--rule-soft);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* --- Case study page ---------------------------------------------------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  padding-block: 1.5rem;
  transition: color 0.24s var(--ease-out-quart);
}
.back-link:hover { color: var(--ink); }
.back-link .arrow { transition: transform 0.32s var(--ease-out-expo); }
.back-link:hover .arrow { transform: translateX(-3px); }

.case-hero { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.case-hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.5rem);
  letter-spacing: -0.033em;
  line-height: 1.05;
  max-width: 20ch;
  margin-block: 0.9rem 1.25rem;
}

.case-client { color: var(--ink-3); font-size: 1rem; }

.case-lede {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  color: var(--ink-2);
  max-width: 58ch;
  line-height: 1.62;
}

.case-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--rule);
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.case-band .readout-cell { padding-block: clamp(1.2rem, 2.2vw, 1.6rem); }
.case-band .readout-value { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.5rem); }

.case-body {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
}

@media (min-width: 900px) {
  .case-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.case-block h2 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-stretch: 100%;
  margin-bottom: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule-soft);
}

.case-block p { color: var(--ink-2); font-size: 0.9875rem; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(0.85rem, 1.6vw, 1.25rem);
}

.gallery-wide { grid-template-columns: 1fr; }

.frame {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
}

.frame > img {
  width: 100%;
  cursor: zoom-in;
  background: var(--panel);
  transition: opacity 0.3s var(--ease-out-quart);
}
.frame > img:hover { opacity: 0.9; }

.frame-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.7rem 0.95rem;
  border-top: 1px solid var(--rule-soft);
  background: var(--void);
}

.cap-label { font-size: 0.8125rem; color: var(--ink-2); }

.cap-badge {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 0.32em 0.7em;
  white-space: nowrap;
}

/* Browser-chrome frame for live embeds */
.browser {
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
  background: var(--void-deep);
}

.browser-dots { display: flex; gap: 0.35rem; }
.browser-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rule);
}

.browser-url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser iframe {
  width: 100%;
  height: clamp(420px, 62vh, 720px);
  border: 0;
  background: #fff;
}

.case-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule-soft);
}

.case-next h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  max-width: 22ch;
}

/* --- Lightbox ----------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: oklch(0.09 0 0 / 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out-quart), visibility 0.3s;
}

@supports (backdrop-filter: blur(1px)) {
  .lightbox { backdrop-filter: blur(6px); }
}

.lightbox[data-open="true"] { opacity: 1; visibility: visible; }

.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  transform: scale(0.97);
  transition: transform 0.4s var(--ease-out-expo);
}

.lightbox[data-open="true"] img { transform: scale(1); }

.lightbox-close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink);
  font-size: 1.1rem;
  background: var(--void);
  transition: background-color 0.24s var(--ease-out-quart);
}
.lightbox-close:hover { background: var(--panel-hi); }

/* --- Reveal ------------------------------------------------------------- */
/* Content is visible by default. The hiding rule is only switched on by JS
   once it has confirmed an observer is running, and a failsafe timer clears
   it regardless. Nothing here can leave a section permanently blank. */

.reveal { opacity: 1; transform: none; }

html.reveal-armed .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(18px);
}

html.reveal-armed .reveal {
  transition:
    opacity 0.75s var(--ease-out-quart),
    transform 0.85s var(--ease-out-expo);
}

/* Hero load choreography */
html.reveal-armed body:not(.ready) .hero-anim { opacity: 0; transform: translateY(22px); }

.hero-anim {
  transition:
    opacity 0.9s var(--ease-out-quart) var(--d, 0s),
    transform 1s var(--ease-out-expo) var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html.reveal-armed .reveal:not(.is-in),
  html.reveal-armed body:not(.ready) .hero-anim {
    opacity: 1;
    transform: none;
  }

  .stack-track { animation: none; transform: none; flex-wrap: wrap; width: auto; }
  .btn:hover, a.shot:hover { transform: none; }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .site-header, .stack, .lightbox, .hero::before { display: none; }
  body { background: #fff; color: #000; }
}