/* ==========================================================================
   The Afterclick
   Plain CSS. Mobile first. No build step.

   Palette
     Envelope  #EDEDE7  page ground (cool manila)
     Bond      #FBFBF8  card surface, one step brighter than the ground,
                        so email screenshots read as artefacts on paper
     Ink       #15191A  primary text            15.07:1 on Envelope
     Postmark  #4E5854  secondary text, labels   6.27:1 on Envelope
     Delivered #14594A  the only accent          8.21:1 white on it
     Flag      #E3A62F  non-text marks only. Fails AA as text on Envelope
                        (1.83:1), so it never carries words on the ground.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* primitive */
  --envelope: #EDEDE7;
  --bond: #FBFBF8;
  --ink: #15191A;
  --postmark: #4E5854;
  --delivered: #14594A;
  --delivered-lift: #7FBFA9;
  --flag: #E3A62F;

  /* semantic */
  --bg: var(--envelope);
  --surface: var(--bond);
  --text: var(--ink);
  --text-soft: var(--postmark);
  --accent: var(--delivered);
  --rule: rgba(21, 25, 26, 0.12);
  --rule-soft: rgba(21, 25, 26, 0.07);
  --rule-strong: rgba(21, 25, 26, 0.28);

  /* type */
  --font-display: "Bricolage Grotesque", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* scale, ratio 1.26 */
  --fs-100: 0.75rem;   /* 12 */
  --fs-200: 0.875rem;  /* 14 */
  --fs-300: 1rem;      /* 16 */
  --fs-400: 1.125rem;  /* 18 */
  --fs-500: 1.3125rem; /* 21 */
  --fs-600: 1.625rem;  /* 26 */
  --fs-700: 2.0625rem; /* 33 */
  --fs-800: 2.625rem;  /* 42 */
  --fs-900: 3.375rem;  /* 54 */

  /* space, 4px rhythm */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 5.5rem;

  /* layout */
  --pad: 1rem;
  --max: 1180px;
  --radius: 3px;
  --head-h: 3.5rem;

  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (min-width: 45em) {   /* 720px */
  :root { --pad: 2rem; --fs-300: 1.0625rem; }
}
@media (min-width: 62.5em) { /* 1000px */
  :root { --pad: 3rem; --head-h: 4rem; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; }
a { color: inherit; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--envelope);
  padding: 0.75rem 1rem; font-size: var(--fs-200); text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.anchor-top { display: block; height: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--delivered);
  outline-offset: 3px;
  border-radius: 2px;
}
.band :where(a, button):focus-visible { outline-color: var(--delivered-lift); }

/* ---------- Type roles ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.0625rem, 7.5vw, var(--fs-900)); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.625rem, 4.6vw, var(--fs-800)); }
h3 { font-size: var(--fs-400); line-height: 1.2; letter-spacing: -0.01em; }

.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  font-weight: 400;
}

.num {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.prose { max-width: 62ch; }
.prose > p + p { margin-top: var(--s-4); }
.lede { font-size: var(--fs-400); max-width: 46ch; color: var(--text); }
.lede + .lede { margin-top: var(--s-4); }

mark {
  background: linear-gradient(to top, rgba(227, 166, 47, 0.55) 0.36em, transparent 0.36em);
  color: inherit;
  padding-inline: 0.04em;
}

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: 0.6875rem 1.25rem;
  font-family: var(--font-body); font-size: var(--fs-300); font-weight: 600;
  text-decoration: none; border-radius: var(--radius); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Only the header CTA needs to stay on one line, it is squeezed between the
   logo and the sections toggle. Every other button wraps on narrow screens
   rather than overflow its container. */
.head-actions .btn { white-space: nowrap; }
.btn-primary { background: var(--delivered); color: #fff; }
.btn-primary:hover { background: #0F4739; }
.btn-primary:active { transform: translateY(1px); }
.btn-invert { background: var(--envelope); color: var(--ink); }
.btn-invert:hover { background: #fff; }
.btn-sm { min-height: 2.75rem; padding: 0.5rem 0.9375rem; font-size: var(--fs-200); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  min-height: 2.75rem;
  font-size: var(--fs-200); font-weight: 600; color: var(--delivered);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--envelope);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-head.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 0 rgba(21, 25, 26, 0.02);
}
.head-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  min-height: var(--head-h);
  padding-block: var(--s-2);
}

.wordmark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-400);
  letter-spacing: -0.025em; text-decoration: none; color: var(--ink);
  margin-right: auto;
  /* padding grows the hit area to 44px without changing the visual rhythm */
  padding-block: 0.5rem;
  margin-block: -0.5rem;
}
/* the mark is a rail node: a dot with a short tail. Same motif as the page rail. */
.wordmark-mark {
  position: relative; flex: none;
  width: 0.5625rem; height: 0.5625rem; border-radius: 50%;
  background: var(--delivered);
}
.wordmark-mark::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 0.375rem; background: var(--rule-strong);
  transform: translateX(-50%);
}

.nav-desktop { display: none; }
.head-actions { display: flex; align-items: center; gap: var(--s-2); }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2.75rem; padding: 0.5rem 0.5rem;
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--postmark);
  border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle .chev { transition: transform var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav-panel {
  border-top: 1px solid var(--rule);
  background: var(--envelope);
  padding: var(--s-2) var(--pad) var(--s-4);
}
.nav-panel[hidden] { display: none; }
.nav-panel ul { display: grid; gap: 1px; }
.nav-panel a {
  display: block; padding: 0.6875rem 0;
  font-size: var(--fs-300); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
}
.nav-panel a:hover { color: var(--delivered); }

@media (min-width: 62.5em) {
  .nav-toggle { display: none; }
  .nav-panel { display: none; }
  .nav-desktop { display: block; }
  .nav-desktop ul { display: flex; flex-wrap: wrap; gap: 0.125rem; }
  .nav-desktop a {
    display: block; padding: 0.5rem 0.6875rem;
    font-size: var(--fs-200); font-weight: 500; text-decoration: none;
    color: var(--postmark); border-radius: var(--radius);
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
  }
  .nav-desktop a:hover { color: var(--ink); }
  .nav-desktop a.is-current { color: var(--ink); font-weight: 600; }
  .nav-desktop a.is-current::after {
    content: ""; display: block; height: 1px; margin-top: 2px;
    background: var(--delivered);
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-block: var(--s-7) var(--s-6); }
@media (min-width: 62.5em) { .hero { padding-block: var(--s-9) var(--s-8); } }

.hero-grid { display: grid; gap: var(--s-7); }
@media (min-width: 62.5em) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-8); align-items: start; }
}

.hero-eyebrow { margin-bottom: var(--s-4); }
.hero-copy h1 { margin-bottom: var(--s-5); }
.hero-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  margin-top: var(--s-6);
}
.hero-for {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-200); color: var(--text-soft); max-width: 42ch;
}
.hero-trustline { margin-top: var(--s-3); }

/* ---------- Hero device: the inbox ---------- */
.inbox-switch {
  display: flex; gap: 1px; margin-bottom: var(--s-3);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 3px; background: rgba(21, 25, 26, 0.03);
}
.switch-btn {
  flex: 1; min-height: 2.75rem; padding: 0.4375rem 0.5rem;
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--postmark); border-radius: 2px; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.switch-btn.is-on { background: var(--ink); color: var(--envelope); }

.inbox {
  background: var(--bond);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.inbox-bar {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--rule-soft);
  background: rgba(21, 25, 26, 0.02);
}
.inbox-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); }
.inbox-bar-title {
  margin-left: 0.375rem;
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--postmark);
}

.msg {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.8125rem 0.875rem;
  border-bottom: 1px solid var(--rule-soft);
}
.msg:last-child { border-bottom: 0; }

.msg-when {
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: 0.04em; color: var(--postmark);
  padding-top: 0.125rem;
}
.msg-body { display: grid; gap: 0.125rem; min-width: 0; }
.msg-from { font-size: var(--fs-200); font-weight: 600; color: var(--ink); }
.msg-subject { font-size: var(--fs-200); font-weight: 500; color: var(--ink); }
.msg-preview {
  font-size: var(--fs-100); color: var(--text-soft); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-time {
  font-family: var(--font-mono); font-size: var(--fs-100);
  color: var(--text-soft); font-variant-numeric: tabular-nums;
  padding-top: 0.125rem;
}

/* the unread marker: a Delivered dot on rows that actually got sent */
.msg.is-sent .msg-from { position: relative; }
.msg.is-sent .msg-from::before {
  content: ""; position: absolute; left: -0.5rem; top: 0.5em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--delivered);
}

/* the silence: a dashed empty row */
.msg.is-empty { background: rgba(21, 25, 26, 0.015); }
.msg.is-empty .msg-body {
  border: 1px dashed var(--rule-strong);
  border-radius: 2px;
  padding: 0.4375rem 0.625rem;
  min-height: 2.375rem;
  align-content: center;
}
.msg-nothing {
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft);
}

.inbox-caption {
  margin-top: var(--s-3);
  font-size: var(--fs-200); color: var(--text-soft); max-width: 44ch;
}

/* row entrance when the switch is flipped */
@media (prefers-reduced-motion: no-preference) {
  .inbox-list.is-swapping .msg { animation: rowIn 220ms var(--ease) both; }
  .inbox-list.is-swapping .msg:nth-child(2) { animation-delay: 40ms; }
  .inbox-list.is-swapping .msg:nth-child(3) { animation-delay: 80ms; }
  .inbox-list.is-swapping .msg:nth-child(4) { animation-delay: 120ms; }
  .inbox-list.is-swapping .msg:nth-child(5) { animation-delay: 160ms; }
  @keyframes rowIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   Proof strip. Facts, not badges: no chips, no icons, no shadows.
   ========================================================================== */
.proof {
  padding-block: var(--s-5);
  border-block: 1px solid var(--rule);
}
.proof-head { margin-bottom: var(--s-5); }
.proof-head > .mono-label { margin-bottom: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.proof-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-soft);
}
.proof-item {
  background: var(--bg);
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
}
.proof-item:nth-child(even) { padding-left: var(--s-4); }
/* 5 items in the 2 column mobile layout leave one empty cell; span the last */
.proof-item:last-child { grid-column: 1 / -1; }
.proof-item dt { font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.proof-item dd { margin-top: 0.125rem; }
.proof-item .num { font-size: var(--fs-600); }

@media (min-width: 45em) {
  .proof-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .proof-item, .proof-item:nth-child(even) { padding: var(--s-2) var(--s-4); }
  .proof-item:first-child { padding-left: 0; }
  .proof-item:last-child { grid-column: auto; }
  .proof-item .num { font-size: var(--fs-700); }
}

.proof-note {
  margin-top: var(--s-4);
  font-size: var(--fs-100); line-height: 1.55; color: var(--text-soft);
  max-width: 68ch;
}
.proof-note a { color: var(--delivered); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ==========================================================================
   Email capture (benchmarks form, footer form)
   ========================================================================== */
.capture-block {
  background: var(--bond);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.capture-block h2 { font-size: var(--fs-600); margin-bottom: var(--s-3); }
.capture-block > p { font-size: var(--fs-200); color: var(--text-soft); max-width: 56ch; margin-bottom: var(--s-5); }

.capture-fields { display: flex; flex-direction: column; gap: var(--s-3); max-width: 28rem; }
.capture-fields[hidden] { display: none; }
@media (min-width: 45em) { .capture-fields { flex-direction: row; } }
.capture-fields input {
  flex: 1; min-height: 2.875rem; padding: 0.6875rem 0.875rem;
  font-family: var(--font-body); font-size: var(--fs-300); color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
}
.capture-fields input:focus-visible { outline: 2px solid var(--delivered); outline-offset: 1px; }
.capture-fields .btn { flex: none; }

.capture-hint { margin-top: var(--s-2); font-size: var(--fs-100); color: var(--text-soft); }
.capture-error { margin-top: var(--s-3); font-size: var(--fs-200); color: #B3261E; }
.capture-success { margin-top: var(--s-3); font-size: var(--fs-300); font-weight: 600; color: var(--delivered); }
.capture-note { margin-top: var(--s-3); }
.capture-note code { font-family: var(--font-mono); }

/* ==========================================================================
   Sections. Each opens with a mono eyebrow label above the heading.
   ========================================================================== */
.node { padding: var(--s-7) 0 0; }
.node:last-child { padding-bottom: var(--s-8); }
@media (min-width: 62.5em) { .node { padding-top: var(--s-9); } }

.node-label {
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.node-body { margin-top: var(--s-5); }

.two-col { display: grid; gap: var(--s-6); }
@media (min-width: 56.25em) {
  .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--s-7); align-items: start; }
}

/* ---------- The leak list ---------- */
.leak-list > .mono-label { padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.ticks { margin-top: var(--s-3); }
.ticks li {
  position: relative;
  padding: 0.5625rem 0 0.5625rem 1.5rem;
  font-size: var(--fs-200); line-height: 1.5;
  border-bottom: 1px solid var(--rule-soft);
}
.ticks li:last-child { border-bottom: 0; }
/* Flag amber used as a mark, never as text */
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 1.0625rem;
  width: 10px; height: 3px; background: var(--flag);
}

/* ==========================================================================
   What I build
   ========================================================================== */
.build-grid { display: grid; gap: 1px; background: var(--rule); }
@media (min-width: 45em) { .build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .build-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Each card is a 3 row subgrid (eyebrow, heading, body) sharing the grid's
   row tracks, so a shorter heading in one card never lets its body copy
   start higher than the card next to it. */
.build-grid { grid-template-rows: auto; }
.build-item {
  display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0;
  background: var(--bg); padding: var(--s-5) var(--s-4) var(--s-5) 0;
}
@media (min-width: 45em) { .build-item { padding: var(--s-5) var(--s-5) var(--s-6) 0; } }
@media (min-width: 45em) {
  .build-item:nth-child(2n) { padding-left: var(--s-5); }
}
@media (min-width: 75em) {
  .build-item:nth-child(2n) { padding-left: 0; }
  .build-item:not(:nth-child(3n+1)) { padding-left: var(--s-5); }
}
/* 7 items never divide evenly into 2 or 3 columns. Spanning the last item
   across the row fills the grid, so no empty grey cell ever shows. */
.build-item:last-child { grid-column: 1 / -1; }
.build-item > .mono-label { align-self: start; margin-bottom: var(--s-3); }
.build-item h3 { align-self: start; margin-bottom: var(--s-2); max-width: 24ch; }
.build-item-body { align-self: start; }
.build-item p:not(.mono-label) { font-size: var(--fs-200); color: var(--text-soft); max-width: 44ch; }
.build-item h3 + .build-item-body { margin-top: var(--s-2); }
.build-item p:not(.mono-label) + p { margin-top: var(--s-3); }

/* ==========================================================================
   Portfolio grid. Hard constraint: the chrome must not compete with the work.
   Bond tiles, 1px border, no shadow, no colour on hover.
   ========================================================================== */
.filter-bar { margin-bottom: var(--s-5); }
.filter-legend { margin-bottom: var(--s-3); }

.filters {
  display: flex; gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-3);
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 62.5em) {
  .filters { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.chip {
  flex: none;
  min-height: 2.75rem; padding: 0.4375rem 0.875rem;
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-soft); cursor: pointer;
  border: 1px solid var(--rule); border-radius: 100px;
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--rule-strong); color: var(--ink); }
.chip.is-on { background: var(--delivered); border-color: var(--delivered); color: var(--bond); }


.grid-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}
@media (min-width: 45em)  { .grid-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62.5em){ .grid-work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }

/* Active vertical filter: the chip already states the category, so hiding
   the repeated label on every tile caption removes the redundancy. */
.grid-work.hide-tile-labels .tile figcaption .mono-label { display: none; }

/* Homepage preview: a curated 6-8 tiles, shown larger than the full grid */
.work-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
@media (min-width: 45em) { .work-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.work-preview-grid + .link-arrow { margin-top: var(--s-5); }

.tile[hidden] { display: none; }
.tile figure { background: var(--bond); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: border-color var(--dur) var(--ease); }
.tile:hover figure { border-color: var(--rule-strong); }
.tile:hover .tile-brand { font-weight: 700; }

/* aspect-ratio locked so tall screenshots never shift layout, present or not.
   8:13 matches the real exports exactly, so nothing gets cropped. */
.shot { aspect-ratio: 8 / 13; background: var(--bond); position: relative; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.tile figcaption {
  display: grid; gap: 0.125rem;
  padding: 0.625rem 0.6875rem 0.75rem;
  border-top: 1px solid var(--rule-soft);
}
.tile-brand { font-size: var(--fs-200); font-weight: 600; line-height: 1.25; transition: none; }
.tile figcaption .mono-label { font-size: 0.6875rem; letter-spacing: 0.06em; }

/* Fallback drawn by JS when an image file is not in place yet.
   A missing screenshot never renders as a broken image. */
.shot.is-missing img { display: none; }
.shot.is-missing::after {
  content: attr(data-missing);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0.75rem; text-align: center;
  font-family: var(--font-mono); font-size: 0.625rem; line-height: 1.6;
  letter-spacing: 0.04em; color: var(--text-soft);
  white-space: pre-line;
  background:
    repeating-linear-gradient(135deg, rgba(21,25,26,0.035) 0 6px, transparent 6px 12px),
    var(--bond);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
}

/* ==========================================================================
   Case studies
   ========================================================================== */
.case-grid { display: grid; gap: var(--s-4); }
@media (min-width: 45em)  { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em)  { .case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.case-card {
  display: flex; flex-direction: column;
  background: var(--bond);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-5) var(--s-4);
}
/* min-height reserves two lines for the eyebrow and the heading, so a
   longer vertical/stack label or brand name never pushes this card's
   body copy lower than its neighbours in the same row. */
.case-card > .mono-label { margin-bottom: var(--s-3); }
.case-card h3 { font-size: var(--fs-500); margin-bottom: var(--s-3); }
/* the two-line reserve only matters once cards sit side by side */
@media (min-width: 45em) {
  .case-card > .mono-label { min-height: 2.8em; }
  .case-card h3 { min-height: 2.4em; }
}
.case-card > p { font-size: var(--fs-200); color: var(--text-soft); }
.case-card > p + p { margin-top: var(--s-3); }

.case-stats { margin-top: auto; padding-top: var(--s-4); }
.case-stats li {
  display: flex; align-items: baseline; gap: 0.625rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule-soft);
}
.case-stats .num { flex: none; font-size: var(--fs-400); color: var(--ink); }
.num-usd {
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-100);
  letter-spacing: normal; color: var(--text-soft);
}
.case-stats .mono-label { font-size: 0.6875rem; letter-spacing: 0.06em; }
.case-card .link-arrow { margin-top: var(--s-4); align-self: start; }

/* ==========================================================================
   For agencies. One tonal break on the page, so audience 2 can find itself.
   ========================================================================== */
.band {
  background: var(--ink);
  color: var(--envelope);
  margin-top: var(--s-7);
  --bg: #15191A;
  --text: #EDEDE7;
  --text-soft: #A7B0AC;      /* 7.97:1 on Ink */
  --delivered: #7FBFA9;      /* 8.37:1 on Ink */
  --rule: rgba(237, 237, 231, 0.16);
  --rule-soft: rgba(237, 237, 231, 0.09);
  --rule-strong: rgba(237, 237, 231, 0.34);
}
.band .node { padding-bottom: var(--s-8); }

.agency-list { display: grid; gap: 1px; background: var(--rule-soft); }
.agency-list li {
  background: var(--ink);
  padding: var(--s-4) 0;
  font-size: var(--fs-200); line-height: 1.55; color: var(--text-soft);
}
.agency-list li:first-child { padding-top: 0; }
.agency-list strong {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--font-display); font-size: var(--fs-400); font-weight: 700;
  letter-spacing: -0.015em; color: var(--envelope);
}
.agency-list p { max-width: 46ch; }
.agency-list p + p { margin-top: var(--s-2); }

/* ==========================================================================
   Reviews
   ========================================================================== */
.review-slider { display: block; }
.review-track .review-card[hidden] { display: none; }

.review-controls {
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  margin-top: var(--s-4);
}
.review-prev, .review-next {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 2.25rem; height: 2.25rem;
  background: var(--bond); border: 1px solid var(--rule); border-radius: 100px;
  color: var(--ink); font-size: 1rem; cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.review-prev:hover, .review-next:hover { border-color: var(--rule-strong); background: var(--envelope); }
.review-dots { display: flex; align-items: center; gap: 0.5rem; }
.review-dot {
  flex: none; width: 0.5rem; height: 0.5rem; padding: 0;
  background: var(--rule-strong); border: 0; border-radius: 100px; cursor: pointer;
  transition: background var(--dur) var(--ease), width var(--dur) var(--ease);
}
.review-dot.is-on { background: var(--delivered); width: 1.25rem; }

.review-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--bond);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-5) var(--s-4);
}
.review-title { font-size: var(--fs-300); line-height: 1.35; }
/* stars are decorative marks (Flag amber allowed); the 5.0 text carries the rating */
.review-stars { display: flex; align-items: center; gap: 0.5rem; }
.review-stars .stars { display: inline-flex; gap: 2px; color: var(--flag); }
.review-card blockquote { font-size: var(--fs-200); line-height: 1.55; flex: 1; }
.review-card blockquote::before { content: "\201C"; }
.review-card blockquote::after { content: "\201D"; }
.review-attribution { font-size: var(--fs-200); font-weight: 600; color: var(--text-soft); }
.review-meta { padding-top: var(--s-3); border-top: 1px solid var(--rule-soft); }


/* ==========================================================================
   About. Carries the trust load, so the portrait is at real size.
   ========================================================================== */
.about-grid { display: grid; gap: var(--s-6); }
@media (min-width: 56.25em) {
  .about-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
}
.portrait { max-width: 22rem; }
.portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--bond);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.portrait figcaption { margin-top: var(--s-3); }
.portrait.is-missing img { display: none; }
.portrait.is-missing::before {
  content: attr(data-missing);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 5; padding: var(--s-4); text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-100); line-height: 1.7;
  letter-spacing: 0.04em; color: var(--text-soft); white-space: pre-line;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(21,25,26,0.035) 0 6px, transparent 6px 12px),
    var(--bond);
}

.creds-label { margin-top: var(--s-6); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.creds { margin-top: var(--s-3); display: grid; gap: 0; }
.creds li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.375rem;
  font-size: var(--fs-200);
  border-bottom: 1px solid var(--rule-soft);
}
.creds li:last-child { border-bottom: 0; }
.creds li::before {
  content: ""; position: absolute; left: 0; top: 0.875rem;
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--delivered);
}

/* ==========================================================================
   How we start
   ========================================================================== */
.ladder { counter-reset: rung; display: grid; gap: 1px; background: var(--rule); }
@media (min-width: 56.25em) { .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 87.5em) { .ladder { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rung { background: var(--bg); padding: var(--s-5) var(--s-5) var(--s-6) 0; display: flex; flex-direction: column; }
@media (min-width: 56.25em) {
  .rung:nth-child(2n) { padding-left: var(--s-5); }
}
@media (min-width: 87.5em) {
  .rung:nth-child(2n) { padding-left: 0; }
  .rung:not(:nth-child(4n+1)) { padding-left: var(--s-5); }
}
.rung > .mono-label { margin-bottom: var(--s-3); }
/* min-height reserves two lines so a longer step title never pushes this
   card's description lower than its neighbour in the same row. */
.rung h3 { font-size: var(--fs-500); margin-bottom: var(--s-2); }
/* the two-line reserve only matters once rungs sit side by side */
@media (min-width: 56.25em) { .rung h3 { min-height: 2.4em; } }
.rung > p:not(.mono-label):not(.price) { font-size: var(--fs-200); color: var(--text-soft); max-width: 44ch; }
.rung h3 + p { margin-top: var(--s-2); }
.rung > p:not(.mono-label):not(.price) + p:not(.price) { margin-top: var(--s-3); }
.rung-foot { margin-top: auto; }
.price {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--font-display); font-size: var(--fs-500); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  color: var(--ink);
}
.price span { color: inherit; }
.rung-guarantee { margin-top: var(--s-2); font-size: var(--fs-100); color: var(--text-soft); }
.credit-tag {
  display: inline-block; margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--delivered);
  border: 1px solid var(--delivered); border-radius: 100px; padding: 0.1875rem 0.625rem;
  max-width: fit-content;
}

/* Companion block under the ladder: quieter than the four numbered steps,
   since everyone starts at the audit but this path does not. */
.campaign-offer {
  margin-top: var(--s-5);
  background: var(--bond);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-5) var(--s-4);
}
.campaign-offer h3 { font-size: var(--fs-500); margin-bottom: var(--s-3); }
.campaign-offer p { font-size: var(--fs-200); color: var(--text-soft); max-width: 60ch; }
.campaign-offer p + p { margin-top: var(--s-3); }
.campaign-offer-price { color: var(--ink); font-weight: 600; }
.campaign-offer .btn { margin-top: var(--s-4); }

/* ==========================================================================
   FAQ accordion, native <details>, no JS required
   ========================================================================== */
.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-400);
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(225deg); }
.faq-item p { padding-bottom: var(--s-4); font-size: var(--fs-200); color: var(--text-soft); max-width: 60ch; }

/* ==========================================================================
   Booking
   ========================================================================== */
.cal-shell {
  margin-top: var(--s-5);
  background: var(--bond);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: var(--s-2);
  overflow: hidden;
}
.cal-inline { min-height: 34rem; }
@media (min-width: 45em) { .cal-inline { min-height: 40rem; } }
.cal-fallback {
  padding: var(--s-6) var(--s-4);
  font-size: var(--fs-200); color: var(--text-soft); text-align: center;
}
.cal-fallback a { color: var(--delivered); font-weight: 600; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: var(--s-6) var(--s-7);
  margin-top: var(--s-6);
}
.foot-inner {
  display: flex; flex-direction: column;
  justify-content: space-between; flex-wrap: wrap; gap: var(--s-5);
}
@media (min-width: 45em) { .foot-inner { flex-direction: row; align-items: flex-start; } }

.foot-logo { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-500); letter-spacing: -0.025em; }
.foot-tagline { margin-top: var(--s-2); font-size: var(--fs-200); color: var(--text-soft); }
.foot-legal { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }

.foot-col-capture { max-width: 22rem; }
.foot-capture-label { margin-bottom: var(--s-3); }
.foot-col-capture .capture-fields { max-width: none; }

.foot-col-links { display: grid; gap: 0; }
.foot-col-links a {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0.375rem 0;
  font-size: var(--fs-200); font-weight: 500; text-decoration: none;
}
.foot-col-links a:hover { color: var(--delivered); }

/* ==========================================================================
   Case study detail pages
   ========================================================================== */
.doc { padding-block: var(--s-7) var(--s-9); }
.doc .prose > p + p { margin-top: var(--s-4); }
.doc h1 { margin-bottom: var(--s-4); }
.back-link {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  min-height: 2.75rem; margin-bottom: var(--s-5);
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-soft); text-decoration: none;
}
.back-link:hover { color: var(--ink); }
.doc-note {
  margin-top: var(--s-6);
  padding: var(--s-5) var(--s-4);
  background: var(--bond);
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.doc-note h2 { font-size: var(--fs-500); margin-bottom: var(--s-3); }
.doc-note p { font-size: var(--fs-200); color: var(--text-soft); max-width: 56ch; }
.doc-note .btn { margin-top: var(--s-5); }

/* ==========================================================================
   Case study pages, shared building blocks, one template, six brands
   ========================================================================== */

/* Jump to another case study. Native <details>, no JS required. */
.case-switch { margin-bottom: var(--s-6); }
.case-switch-dd {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bond);
}
.case-switch-dd summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 2.75rem; padding: 0.625rem var(--s-4);
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft);
}
.case-switch-dd summary::-webkit-details-marker { display: none; }
.case-switch-dd summary::after {
  content: ""; flex: none; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.case-switch-dd[open] summary::after { transform: rotate(225deg); }
.case-switch-dd ul { border-top: 1px solid var(--rule); }
.case-switch-dd li { border-bottom: 1px solid var(--rule-soft); }
.case-switch-dd li:last-child { border-bottom: 0; }
.case-switch-dd a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1875rem 0.625rem;
  padding: 0.75rem var(--s-4); font-size: var(--fs-200); font-weight: 500; text-decoration: none;
}
.case-switch-dd a:hover { color: var(--delivered); background: rgba(21, 25, 26, 0.02); }
.case-switch-dd a .mono-label { font-size: 0.6875rem; }

/* Header: brand, vertical, one-liner, 3 headline stats */
.case-hero { padding-block: var(--s-6) 0; }
.case-hero .mono-label { margin-bottom: var(--s-3); }
.case-hero h1 { margin-bottom: var(--s-3); }
.case-hero .lede { margin-bottom: var(--s-5); }

.case-hero-stats {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 45em) { .case-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case-hero-stats li { background: var(--bond); padding: var(--s-4); }
.case-hero-stats .num { display: block; font-size: var(--fs-600); margin-bottom: 0.25rem; }
.case-hero-stats .mono-label { margin: 0; }

/* Tables: before-state, flow architecture, results comparison */
.table-scroll {
  overflow-x: auto; margin-top: var(--s-4);
  border: 1px solid var(--rule); border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
table.case-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.85rem; background: var(--bond); }
table.case-table th, table.case-table td {
  padding: 10px 12px; text-align: left; overflow-wrap: break-word;
  border-bottom: 1px solid var(--rule-soft);
}
table.case-table thead th {
  font-family: var(--font-mono); font-size: var(--fs-100); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-soft); border-bottom: 1px solid var(--rule);
}
table.case-table tbody tr:last-child td { border-bottom: 0; }
table.case-table td.num, table.case-table th.num { font-variant-numeric: tabular-nums; text-align: right; }
table.case-table tbody tr:hover { background: rgba(21, 25, 26, 0.02); }

/* Strategy and Setup: three columns */
.strategy-grid { display: grid; gap: 1px; background: var(--rule); margin-top: var(--s-5); }
@media (min-width: 45em) { .strategy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.strategy-col { background: var(--bg); padding: var(--s-4) var(--s-5) var(--s-5) 0; }
@media (min-width: 45em) {
  .strategy-col:not(:nth-child(3n+1)) { padding-left: var(--s-5); }
}
.strategy-col > .mono-label { margin-bottom: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.strategy-col ul { display: grid; }
.strategy-col li { padding: 0.4375rem 0; font-size: var(--fs-200); color: var(--text-soft); border-bottom: 1px solid var(--rule-soft); }
.strategy-col li:last-child { border-bottom: 0; }

/* What Made This Work: three takeaway blocks */
.takeaway-grid { display: grid; gap: 1px; background: var(--rule); margin-top: var(--s-5); }
@media (min-width: 45em) { .takeaway-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.takeaway { background: var(--bg); padding: var(--s-4) var(--s-5) var(--s-5) 0; }
@media (min-width: 45em) {
  .takeaway:not(:nth-child(3n+1)) { padding-left: var(--s-5); }
}
.takeaway-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; margin-bottom: var(--s-3);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-300);
  color: var(--bond); background: var(--delivered); border-radius: 50%;
}
.takeaway p { font-size: var(--fs-200); color: var(--text-soft); }

/* Closing stat callout */
.closing-stat {
  margin-top: var(--s-7); padding: var(--s-6) var(--s-5);
  background: var(--ink); color: var(--envelope);
  border-radius: var(--radius); text-align: center;
}
.closing-stat p {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.375rem, 3.4vw, var(--fs-700)); letter-spacing: -0.02em; line-height: 1.25;
  max-width: 42ch; margin-inline: auto;
}

/* Section rhythm inside the article body */
.case-section { padding-top: var(--s-7); }
.case-section:first-of-type { padding-top: var(--s-6); }
.case-section > h2 { margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
/* Case study sections are single-column and full width (no narrow text
   column like the homepage's two-col layouts), so the sitewide 62ch prose
   cap is lifted here to match the tables and screenshots underneath. */
.case-section .prose { max-width: none; }
.case-section .prose + .table-scroll { margin-top: var(--s-5); }
.case-section .prose + .flow-list { margin-top: var(--s-4); }
.flow-list li {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: 0.5625rem 0; font-size: var(--fs-200);
  border-bottom: 1px solid var(--rule-soft);
}
.flow-list li:last-child { border-bottom: 0; }
.flow-list .num { flex: none; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.case-section .prose > p + p { margin-top: var(--s-4); }
.case-close { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule); }

/* Previous / next case study, cyclic order matching the homepage list */
.case-pager {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule);
  font-size: var(--fs-200);
}
.case-pager a { font-weight: 500; text-decoration: none; }
.case-pager a:hover { color: var(--delivered); }
.case-pager .case-pager-next { text-align: right; }

/* Real Klaviyo dashboard screenshots, shown beside (not instead of) the
   recreated tables. Natural aspect ratio, since crops vary a lot per export. */
.case-shot {
  margin-top: var(--s-4);
  background: var(--bond);
  border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden;
}
.case-shot img { display: block; width: 100%; height: auto; }
.case-shot figcaption {
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono); font-size: var(--fs-100);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft);
  border-top: 1px solid var(--rule-soft);
}

/* ==========================================================================
   Portfolio lightbox
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; background: rgba(21, 25, 26, .92);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5); z-index: 100;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: var(--s-4); right: var(--s-4);
  background: none; border: 0; color: var(--envelope, #fff);
  font-size: 2rem; line-height: 1; cursor: pointer;
}

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