/* ==========================================================================
   99Labs Signal Standard website
   Standalone stylesheet. No frameworks, no external requests.
   Tokens follow assets/tokens/tokens.css from the approved brand master.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts
   The typefaces are embedded in fonts.css, which is generated by build.py.
   They are embedded rather than linked so the site works when a page is
   opened straight from disk, where browsers refuse cross-origin font files.
   -------------------------------------------------------------- 2. Tokens */

:root {
  /* Core palette */
  --carbon: #0b0d0e;
  --chalk: #f4f5ee;
  --proof-blue: #2f5bff;
  --signal-lime: #c7ff45;
  --field-grey: #e8eadf;
  --muted-grey: #6f7472;      /* brand token, used for rules and non-text */
  --muted-text: #656a68;      /* AA-safe secondary text on Chalk and Field Grey */
  --proof-blue-text: #2a4fe0; /* AA-safe Proof Blue for body-size links */
  --care-mint: #78f0b4;

  /* Typefaces */
  --font-sans: 'Geist', 'Avenir Next', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  /* Motion */
  --ease-resolve: cubic-bezier(0.32, 0.72, 0, 1);
  --fast: 160ms;
  --normal: 480ms;
  --slow: 920ms;

  /* Layout */
  --shell: 1440px;
  --gutter: clamp(1rem, 4vw, 4.5rem);
  --section: clamp(4rem, 8vw, 8rem);
  --rule: 1px;

  /* Surface roles, reassigned per band */
  --bg: var(--chalk);
  --fg: var(--carbon);
  --dim: var(--muted-text);
  --line: rgba(11, 13, 14, 0.16);
  --line-strong: rgba(11, 13, 14, 0.42);
  --tray: var(--field-grey);
  --link: var(--proof-blue-text);
}

.band--carbon {
  --bg: var(--carbon);
  --fg: var(--chalk);
  --dim: #a9aeab;
  --line: rgba(244, 245, 238, 0.18);
  --line-strong: rgba(244, 245, 238, 0.45);
  --tray: #14181a;
  --link: #8fa6ff;
}

.band--lime {
  --bg: var(--signal-lime);
  --fg: var(--carbon);
  --dim: #4a5417;
  --line: rgba(11, 13, 14, 0.26);
  --line-strong: rgba(11, 13, 14, 0.55);
  --tray: #b9f22f;
  --link: #16309c;
}

.band--field {
  --bg: var(--field-grey);
  --tray: #dcdfd0;
}

/* --------------------------------------------------------------- 3. Reset */

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

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

body {
  margin: 0;
  overflow-wrap: break-word;
  background: var(--chalk);
  color: var(--carbon);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
h1, h2, h3, h4 { overflow-wrap: break-word; }
:lang(fr) .prose p, :lang(fr) .info-body p { hyphens: auto; }
ul, ol { padding: 0; list-style: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

a { color: inherit; }

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

/* ---------------------------------------------------- 4. Focus and skip nav */

:focus-visible {
  outline: 3px solid var(--proof-blue);
  outline-offset: 3px;
  border-radius: 1px;
}

.band--carbon :focus-visible,
.band--lime :focus-visible { outline-color: var(--proof-blue); }

.skip {
  position: absolute;
  left: 0.75rem;
  top: -6rem;
  z-index: 200;
  background: var(--carbon);
  color: var(--chalk);
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: top var(--fast) var(--ease-resolve);
}
.skip:focus { top: 0.75rem; }

.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;
}

/* --------------------------------------------------------------- 5. Layout */

.band {
  background: var(--bg);
  color: var(--fg);
}

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }

/* Two-register head: title left, proof metadata right */
.register {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 2rem;
  padding-bottom: 1rem;
  border-bottom: var(--rule) solid var(--line-strong);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
}

/* ----------------------------------------------------------- 6. Typography */

.display {
  font-size: clamp(2.75rem, 8vw, 7.25rem);
  line-height: 0.88;
  letter-spacing: -0.055em;
  font-weight: 700;
  text-wrap: balance;
}

.h1 {
  font-size: clamp(2.75rem, 6.4vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-weight: 700;
}

.h2 {
  font-size: clamp(2.125rem, 4.3vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.042em;
  font-weight: 700;
  text-wrap: balance;
}

.h3 {
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.h4 {
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.5;
  max-width: 34ch;
}

.prose { max-width: 62ch; }
.prose p + p { margin-top: 1rem; }
.prose a { color: var(--link); text-underline-offset: 0.2em; }

.muted { color: var(--dim); }

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Proof metadata. Restricted to project codes, states, dates and categories. */
.meta {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dim);
}

.meta--fg { color: var(--fg); }

/* ---------------------------------------------------------- 7. Controls */

.btn {
  --btn-bg: var(--carbon);
  --btn-fg: var(--chalk);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 1.375rem;
  min-height: 3rem;
  border: var(--rule) solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--normal) var(--ease-resolve),
              color var(--normal) var(--ease-resolve),
              transform var(--fast) var(--ease-resolve);
}

.btn .cell {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--signal-lime);
  color: var(--carbon);
  transition: transform var(--normal) var(--ease-resolve);
}

.btn:hover { background: var(--proof-blue); color: #fff; }
.btn:hover .cell { transform: translate(2px, -1px) scale(1.06); }
.btn:active { transform: scale(0.98); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--line-strong);
}
.btn--ghost .cell { background: transparent; border: var(--rule) solid var(--line-strong); color: inherit; }
.btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--ghost:hover .cell { border-color: currentColor; }

.band--lime .btn { --btn-fg: var(--signal-lime); }
.band--lime .btn .cell { background: var(--signal-lime); }
.band--carbon .btn { --btn-bg: var(--chalk); --btn-fg: var(--carbon); }
.band--carbon .btn:hover { background: var(--proof-blue); color: #fff; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--link);
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: var(--rule) solid currentColor;
  transition: gap var(--normal) var(--ease-resolve), opacity var(--fast) linear;
}
.text-link:hover { gap: 0.7rem; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* ------------------------------------------------------------- 8. Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--chalk) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: var(--rule) solid rgba(11, 13, 14, 0.14);
}

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

.brand-link { display: inline-flex; align-items: center; text-decoration: none; }
.brand-link svg { height: auto; }
.brand-wordmark { width: 132px; }
.brand-icon { width: 34px; display: none; }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.site-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--fast) var(--ease-resolve);
}
.site-nav a:hover { border-bottom-color: var(--proof-blue); }
.site-nav a[aria-current='page'] { border-bottom-color: var(--carbon); }

.lang {
  display: inline-flex;
  align-items: stretch;
  padding: 3px;
  gap: 2px;
  border: var(--rule) solid rgba(11, 13, 14, 0.22);
  border-radius: 999px;
  background: rgba(11, 13, 14, 0.04);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.lang a, .lang span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  min-height: 1.9rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--fast) var(--ease-resolve), color var(--fast) var(--ease-resolve);
}
.lang [aria-current='true'] { background: var(--carbon); color: var(--chalk); }
.lang [aria-current='true']::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 1px;
  background: var(--signal-lime);
}
.lang a:hover { background: rgba(11, 13, 14, 0.1); }

.nav-toggle { display: none; }

/* ---------------------------------------------------------------- 9. Hero */

.hero { padding-block: clamp(3.5rem, 7vw, 7rem) clamp(2.5rem, 4vw, 4rem); }

.hero-proof { margin-top: clamp(2.5rem, 5vw, 4rem); }
.hero-proof dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: var(--rule) solid var(--line-strong);
}
.hero-proof dt { margin-bottom: 0.4rem; }
.hero-proof dd { font-size: 0.9375rem; line-height: 1.45; margin: 0; }

/* ------------------------------------------------- 10. Signature lime band */

.signature { padding-block: clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; }

.signature-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem 3rem;
}

.scan-logo { width: min(100%, 560px); }
.signature .core-line {
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 1.25rem;
}

.signature-notes {
  text-align: right;
  align-self: end;
  display: grid;
  justify-items: end;
  gap: 0.6rem;
}
.signature-notes p { max-width: 30ch; font-size: 0.9375rem; margin-left: auto; }

.signature-line {
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  max-width: 20ch;
}

.signature-notes .btn { margin-top: 0.6rem; }

/* Logo resolve: one 1.2s sequence on load, then static. */
.scan-logo .phase { animation: phase-in 1200ms var(--ease-resolve) both; }
.scan-logo .main  { animation: main-in 720ms var(--ease-resolve) both; }
.scan-logo .cell  { animation: cell-in 1200ms var(--ease-resolve) both; }

@keyframes main-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes phase-in { 0% { opacity: 0; transform: translate(0, 0); } 40% { opacity: 1; } 100% { opacity: 1; transform: translate(6px, 6px); } }
@keyframes cell-in { 0%, 70% { opacity: 0; } 100% { opacity: 1; } }

/* ----------------------------------------------------------- 11. Work card */

.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: var(--rule) solid var(--line);
  background: var(--tray);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--normal) var(--ease-resolve);
}
.work-card:hover { border-color: var(--line-strong); }

.work-banner {
  width: 100%;
  height: clamp(160px, 18vw, 250px);
  object-fit: cover;
  object-position: center;
  border-bottom: var(--rule) solid var(--line);
}

.work-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.work-body .h2 { margin-bottom: 0.75rem; }
.work-col { display: grid; align-content: start; }
.work-go { margin-top: auto; padding-top: 2rem; }
.work-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }

.tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border: var(--rule) solid var(--line-strong);
  border-radius: 2px;
}

.work-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.work-figures img { border-radius: 2px; width: 100%; }

/* ------------------------------------------------------------ 12. Services */

.pay-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 2rem;
}
.pay-legend div { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9375rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: var(--rule) solid var(--line-strong);
}
.chip::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 1px;
  background: currentColor;
}
.chip--once::before { background: var(--proof-blue); }
.chip--monthly::before { background: var(--care-mint); border: 1px solid rgba(11,13,14,.35); }

.scopes { border-top: var(--rule) solid var(--line-strong); }

.scope { border-bottom: var(--rule) solid var(--line); }

.scope > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0;
  cursor: pointer;
  list-style: none;
  min-height: 3.5rem;
}
.scope > summary::-webkit-details-marker { display: none; }
.scope > summary:hover .h3 { color: var(--proof-blue); }
.scope > summary .h3 { transition: color var(--fast) var(--ease-resolve); }

.plus {
  position: relative;
  width: 1.25rem; height: 1.25rem;
  flex: none;
}
.plus::before, .plus::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: var(--rule);
  background: currentColor;
  transition: transform var(--normal) var(--ease-resolve);
}
.plus::after { transform: rotate(90deg); }
.scope[open] .plus::after { transform: rotate(0deg); }

.scope-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.scope-body ul { display: grid; gap: 0.6rem; }
.scope-body li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.scope-body li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 8px;
  border: var(--rule) solid var(--fg);
  border-radius: 1px;
}
.scope-body li.is-ai::before { background: var(--proof-blue); border-color: var(--proof-blue); }

.boundary {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: var(--rule) solid var(--line);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--dim);
}

/* ------------------------------------------------------------- 13. Process */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: var(--rule) solid var(--line-strong);
}

.step {
  padding: 1.5rem clamp(1.25rem, 2vw, 2rem);
  border-right: var(--rule) solid var(--line);
}
.step:last-child { border-right: 0; padding-right: 0; }
.steps > .step:first-child { padding-left: 0; }
.step .meta { display: block; margin-bottom: 0.75rem; }
.step .h4 { margin-bottom: 0.5rem; }
.step p { font-size: 0.9375rem; line-height: 1.5; color: var(--dim); }

/* ----------------------------------------------------------- 14. Standards */

.standards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: var(--rule) solid var(--line-strong);
}
.standard:nth-child(3n) { border-right: 0; }

.standard {
  padding: 1.5rem clamp(1.25rem, 2vw, 2rem) 1.75rem;
  border-right: var(--rule) solid var(--line);
  border-bottom: var(--rule) solid var(--line);
}
.standards > .standard:nth-child(3n + 1) { padding-left: 0; }
.standards > .standard:nth-child(3n) { padding-right: 0; }
.standard .h4 { margin-bottom: 0.5rem; }
.standard p { font-size: 0.9375rem; line-height: 1.55; color: var(--dim); }

/* --------------------------------------------------------------- 15. Care */

.care-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.care-list { display: grid; gap: 0; border-top: var(--rule) solid var(--line); }
.care-list li {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: 0.35rem 1.5rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: var(--rule) solid var(--line);
  font-size: 0.9375rem;
}
.care-list li span:first-child { font-weight: 600; }
.care-list li span:last-child { color: var(--dim); font-size: 0.875rem; line-height: 1.5; }

/* ------------------------------------------------------------- 16. Studio */

.statement {
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Columns come from .grid12 now; the class remains as the reveal hook. */
.studio-grid { margin-top: clamp(2rem, 4vw, 3.5rem); }

.credentials { display: grid; gap: 0; margin-top: 2rem; border-top: var(--rule) solid var(--line-strong); }
.credentials div {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: var(--rule) solid var(--line);
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- 17. FAQ */

.faq { margin-top: -1px; }
.faq details { border-bottom: var(--rule) solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  min-height: 3rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--proof-blue); }
.faq details > p { padding-bottom: 1.25rem; max-width: 66ch; color: var(--dim); }

/* ------------------------------------------------------------ 18. Contact */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.brief { display: grid; gap: 1.25rem; }

.field { display: grid; gap: 0.4rem; }
.field > span { font-size: 0.875rem; font-weight: 500; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  min-height: 3rem;
  background: var(--chalk);
  color: var(--carbon);
  border: var(--rule) solid rgba(11, 13, 14, 0.35);
  border-radius: 2px;
  font-size: 1rem;
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 3px solid var(--proof-blue); outline-offset: 2px; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

.brief-note { font-size: 0.875rem; line-height: 1.55; }

.helpful { margin-top: 2rem; padding-top: 1.5rem; border-top: var(--rule) solid var(--line); }
.helpful ul { display: grid; gap: 0.55rem; margin-top: 0.9rem; }
.helpful li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.helpful li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 8px;
  border: var(--rule) solid var(--fg);
  border-radius: 1px;
}

.contact-direct { display: grid; gap: 1rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: var(--rule) solid var(--line-strong); }
.contact-direct a { font-weight: 600; }

.email-big {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  word-break: break-word;
}

/* ------------------------------------------------------------- 19. Footer */

.site-footer { padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 3rem;
  align-items: start;
  padding-bottom: 2.5rem;
  border-bottom: var(--rule) solid var(--line);
}

.footer-scan { width: min(100%, 420px); }

.footer-nav { display: grid; gap: 0.6rem; text-align: right; }
.footer-nav a { text-decoration: none; font-size: 0.9375rem; }
.footer-nav a:hover { color: var(--link); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-top: 1.25rem;
}

.site-footer .lang { border-color: rgba(244, 245, 238, 0.28); background: rgba(244, 245, 238, 0.06); }
.site-footer .lang [aria-current='true'] { background: var(--chalk); color: var(--carbon); }
.site-footer .lang a:hover { background: rgba(244, 245, 238, 0.14); }

/* --------------------------------------------------------- 20. Case study */

.case-head { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.case-title {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.case-deck { font-size: clamp(1.125rem, 1.8vw, 1.5rem); line-height: 1.35; max-width: 24ch; letter-spacing: -0.02em; }

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: var(--rule) solid var(--line-strong);
}
.case-facts dt { margin-bottom: 0.35rem; }
.case-facts dd { margin: 0; font-size: 0.9375rem; line-height: 1.45; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  text-decoration: none;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--dim);
}
.back-link:hover { color: var(--link); }

.moves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: var(--rule) solid var(--line-strong);
}
.move { padding: 1.5rem clamp(1.25rem, 2vw, 2rem) 0; border-right: var(--rule) solid var(--line); }
.move:last-child { border-right: 0; padding-right: 0; }
.moves > .move:first-child { padding-left: 0; }
.move .h4 { margin: 0.75rem 0 0.5rem; }
.move p { font-size: 0.9375rem; line-height: 1.55; color: var(--dim); }

.mode-switch {
  display: inline-flex;
  border: var(--rule) solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.mode-switch button {
  background: transparent;
  border: 0;
  padding: 0.55rem 1.1rem;
  min-height: 2.75rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background var(--fast) var(--ease-resolve);
}
.mode-switch button[aria-pressed='true'] { background: var(--fg); color: var(--bg); }
.mode-switch button:not([aria-pressed='true']):hover { background: var(--line); }

.screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
}
.screens figure { margin: 0; display: grid; gap: 0.75rem; }
.screens figcaption { font-size: 0.875rem; color: var(--dim); }

.zoom {
  display: block;
  padding: 0;
  border: var(--rule) solid var(--line);
  background: var(--tray);
  border-radius: 2px;
  cursor: zoom-in;
  overflow: hidden;
  transition: border-color var(--normal) var(--ease-resolve);
}
.zoom:hover { border-color: var(--line-strong); }
.zoom img { width: 100%; }

/* Two dragged comparisons side by side, each held to a phone-sized column so
   the tall portrait screens stay legible instead of dominating the page. */
.ba-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 340px));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.ba-set .ba { max-width: 340px; }

.source-note {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: var(--rule) solid var(--line);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--dim);
  max-width: 78ch;
}
.source-note a { color: var(--link); }

.stack-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }

dialog.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(96vw, 1100px);
  max-height: 94vh;
  color: var(--chalk);
}
dialog.lightbox::backdrop { background: rgba(11, 13, 14, 0.92); }
dialog.lightbox img { max-height: 82vh; width: auto; margin-inline: auto; border-radius: 2px; }
dialog.lightbox p { text-align: center; margin-top: 1rem; font-size: 0.875rem; }
.lightbox-close {
  position: absolute;
  top: 0; right: 0;
  background: var(--chalk);
  color: var(--carbon);
  border: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

/* -------------------------------------------------------- 21. Information */

.info-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: 2.5rem;
}

.info-index {
  position: sticky;
  top: 6rem;
  align-self: start;
  display: grid;
  gap: 0.65rem;
  padding-top: 1.25rem;
  border-top: var(--rule) solid var(--line-strong);
}
.info-index a { font-size: 0.9375rem; text-decoration: none; color: var(--link); }
.info-index a:hover { text-decoration: underline; }
.info-index .meta { margin-bottom: 0.35rem; }

.info-body { max-width: 68ch; }
.info-body > h2:first-child { margin-top: 0; }
.info-body h2 { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.info-body h3 { margin-top: 2rem; }
.info-body p { margin-top: 1rem; line-height: 1.65; }
.info-body ul { margin-top: 1rem; display: grid; gap: 0.6rem; }
.info-body li { position: relative; padding-left: 1.35rem; line-height: 1.6; }
.info-body li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 8px; height: 8px;
  border: var(--rule) solid var(--carbon);
  border-radius: 1px;
}
.info-body a { color: var(--link); }
.info-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem 0;
  border-block: var(--rule) solid var(--line);
  margin-top: 2rem;
}

/* ------------------------------------------------------- 22. 404 / notice */

.notice { padding-block: clamp(5rem, 12vw, 10rem); text-align: left; }

/* ------------------------------------------------------- 23. Responsive */

@media (max-width: 1080px) {
  .standards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .standard:nth-child(3n) { border-right: var(--rule) solid var(--line); padding-right: clamp(1.25rem, 2vw, 2rem); }
  .standard:nth-child(3n + 1) { padding-left: clamp(1.25rem, 2vw, 2rem); }
  .standard:nth-child(2n) { border-right: 0; padding-right: 0; }
  .standard:nth-child(2n + 1) { padding-left: 0; }
  .work-body { grid-template-columns: minmax(0, 1fr); }
  .care-grid, .studio-grid, .contact-grid, .split { grid-template-columns: minmax(0, 1fr); }
  .signature-inner { grid-template-columns: minmax(0, 1fr); }
  .signature-notes { text-align: left; justify-items: start; }
  .signature-notes p { margin-left: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2n) { border-right: 0; padding-right: 0; }
  .step:nth-child(2n + 1) { padding-left: 0; }
  .step { border-bottom: var(--rule) solid var(--line); }
  .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-proof dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .brand-wordmark { display: none; }
  .brand-icon { display: block; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: var(--rule) solid rgba(11, 13, 14, 0.28);
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    min-height: 2.75rem;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--chalk);
    border-bottom: var(--rule) solid rgba(11, 13, 14, 0.2);
    padding: 0.5rem var(--gutter) 1.5rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    padding: 0.9rem 0;
    border-bottom: var(--rule) solid rgba(11, 13, 14, 0.12);
    font-size: 1.125rem;
  }
  .site-nav .lang { align-self: flex-start; margin-top: 1rem; }
  .site-header { position: relative; }

  .register { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .register .meta { order: -1; }
  .scope > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .scope > summary .chip { grid-column: 1 / -1; justify-self: start; }
  .scope-body { grid-template-columns: minmax(0, 1fr); }
  .moves, .standards { grid-template-columns: minmax(0, 1fr); }
  .standard:nth-child(3n), .standard:nth-child(2n) { border-right: 0; padding-inline: 0; }
  .display br { display: none; }
  .h2 br, .h1 br, .case-title br { display: none; }
  .care-list li { grid-template-columns: minmax(0, 1fr); }
  .move, .standard { border-right: 0; border-bottom: var(--rule) solid var(--line);
                     padding-left: 0; padding-right: 0; }
  .stack-2, .field-row { grid-template-columns: minmax(0, 1fr); }
  .info-layout { grid-template-columns: minmax(0, 1fr); }
  .info-index { position: static; order: -1; display: flex; flex-wrap: wrap;
                gap: 0.6rem 1.25rem; align-items: baseline; padding-bottom: 1rem;
                border-bottom: var(--rule) solid var(--line); }
  .info-index .meta { flex-basis: 100%; }
  .info-index .meta { margin-bottom: 0; }
  .work-go { padding-top: 1.25rem; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-nav { text-align: left; }
  .credentials div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .work-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .hero-proof dl { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .screens { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step:nth-child(2n) { border-right: 0; }
  .case-facts { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; justify-content: space-between; }
}

/* --------------------------------------------------- 24. Reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .scan-logo .phase { transform: translate(6px, 6px); opacity: 1; }
}

/* --------------------------------------------------------------- 25. Print */

@media print {
  .site-header, .nav-toggle, .lang, .mode-switch, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .band { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   26. Graphic language
   The identity's own devices, used structurally rather than as decoration:
   modular fields, registration corners, scan bands and a single signal cell.
   ========================================================================== */

/* --- Modular cell field. The logo's grid, used as surface material. */
.field-pattern { position: relative; isolation: isolate; }

.field-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--field-size, 88px) var(--field-size, 88px);
  background-position: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

/* The field is material, not noise: strong enough to read as structure, and a
   different module size per register so consecutive bands are not the same
   surface twice. */
:root         { --grid-line: rgba(11, 13, 14, 0.085); --field-size: 88px; }
.band--carbon { --grid-line: rgba(244, 245, 238, 0.075); --field-size: 112px; }
.band--lime   { --grid-line: rgba(11, 13, 14, 0.115); --field-size: 64px; }
.band--field  { --grid-line: rgba(11, 13, 14, 0.075); --field-size: 96px; }

/* --- Scan band. Marks the seam where one colour register meets the next. */
.scan-edge { position: relative; }

/* The seam where one colour register hands over to the next: a Proof Blue
   leading edge over a band of hairlines. Both layers live on ::after, because
   .field-pattern already owns ::before on these same elements. */
.scan-edge::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--proof-blue), transparent),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 4px);
  background-size:
    min(38%, 420px) 2px,
    100% 16px;
  background-position:
    left top,
    left 2px;
  background-repeat: no-repeat, repeat-x;
  opacity: 0.9;
}

/* --- Registration corners. Framing for real work and evidence. */
.framed { position: relative; }
.framed { overflow: visible; }

.framed::after {
  content: '';
  position: absolute;
  inset: -0.65rem;
  pointer-events: none;
  --reg: var(--line-strong);
  background:
    linear-gradient(var(--reg) 0 0) 0 0 / 15px 1px no-repeat,
    linear-gradient(var(--reg) 0 0) 0 0 / 1px 15px no-repeat,
    linear-gradient(var(--reg) 0 0) 100% 0 / 15px 1px no-repeat,
    linear-gradient(var(--reg) 0 0) 100% 0 / 1px 15px no-repeat,
    linear-gradient(var(--reg) 0 0) 0 100% / 15px 1px no-repeat,
    linear-gradient(var(--reg) 0 0) 0 100% / 1px 15px no-repeat,
    linear-gradient(var(--reg) 0 0) 100% 100% / 15px 1px no-repeat,
    linear-gradient(var(--reg) 0 0) 100% 100% / 1px 15px no-repeat;
  transition: inset var(--normal) var(--ease-resolve);
}

.framed:hover::after,
a:hover > .framed::after { inset: -1rem; --reg: var(--proof-blue); }

/* --- Signal cell. One confirmed square per composition. */
.signal-cell {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 1px;
  background: var(--signal-lime);
  border: 1px solid var(--fg);
}

.register { position: relative; }
.register .signal-cell { position: absolute; right: 0; bottom: -5px; }
.register > .meta { padding-right: 1.25rem; }

/* --- Sequence numbers carry the structure, so they carry the colour. */
.step .meta,
.move .meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--link);
  font-weight: 500;
}

.step .meta::before,
.move .meta::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 1px;
  border: 1px solid currentColor;
}

/* --- Proof Blue panel. Used sparingly, where a claim needs to stand out. */
.panel-blue {
  background: var(--proof-blue);
  color: #fff;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 2px;
  --grid-line: rgba(255, 255, 255, 0.14);
}

.panel-blue.field-pattern::before {
  -webkit-mask-image: none;
          mask-image: none;
  background-size: 72px 72px;
}

.panel-blue .h3 { color: #fff; margin-bottom: 1rem; }
.panel-blue p { color: rgba(255, 255, 255, 0.94); }
.panel-blue .prose { max-width: 60ch; }
.panel-blue a { color: #fff; }

/* --- Scroll position, read as a scan across the page. */
.scan-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.scan-progress span {
  display: block;
  height: 100%;
  background: var(--proof-blue);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ==========================================================================
   27. Entry motion
   Assemble, inspect, resolve. One pass per element, then it holds still.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--slow) var(--ease-resolve),
    transform var(--slow) var(--ease-resolve);
  transition-delay: var(--d, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* The inspection pass: one blue scan travels the section rule, then clears. */
.register.is-in::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--proof-blue);
  transform-origin: left center;
  animation: scan-pass 1100ms var(--ease-resolve) 140ms both;
}

@keyframes scan-pass {
  0% { transform: scaleX(0); opacity: 1; }
  55% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

.site-header { transition: border-color var(--normal) var(--ease-resolve); }
.site-header.is-scrolled { border-bottom-color: rgba(11, 13, 14, 0.3); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .register.is-in::before { display: none; }
  .scan-progress { display: none; }
}

/* --- Open disclosures carry a Proof Blue edge, so the active scope is obvious. */
.scope, .faq details { position: relative; }

.scope::before,
.faq details::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  border-radius: 1px;
  background: var(--proof-blue);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: top center;
  transition: opacity var(--normal) var(--ease-resolve),
              transform var(--normal) var(--ease-resolve);
}

.scope[open]::before,
.faq details[open]::before { opacity: 1; transform: scaleY(1); }

.faq details[open] > summary { color: var(--link); }

@media (max-width: 640px) {
  .scope::before, .faq details::before { display: none; }
}

/* ==========================================================================
   28. Composition
   The brand defines three recipes: campaign field, evidence frame and
   editorial proof. Sections take one each, so consecutive bands are not the
   same composition repeated. Asymmetry happens inside the twelve columns,
   never outside them.
   ========================================================================== */

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}

/* Column spans and offsets, desktop only. Below the tablet break every child
   returns to one column and the source order carries the reading order. */
/* The span sets grid-column-end only. Using the grid-column shorthand here
   would reset the end to auto, so a later .start rule would collapse the
   element to a single column. */
@media (min-width: 900px) {
  .c3  { grid-column-end: span 3; }
  .c4  { grid-column-end: span 4; }
  .c5  { grid-column-end: span 5; }
  .c6  { grid-column-end: span 6; }
  .c7  { grid-column-end: span 7; }
  .c8  { grid-column-end: span 8; }
  .c9  { grid-column-end: span 9; }
  .c10 { grid-column-end: span 10; }
  .start2 { grid-column-start: 2; }
  .start3 { grid-column-start: 3; }
  .start4 { grid-column-start: 4; }
  .start6 { grid-column-start: 6; }
  .start7 { grid-column-start: 7; }
}

@media (max-width: 899px) {
  .grid12 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Section index rail. Mono specimen numbers as a persistent structural
   layer, the way the printed manual numbers its own pages. */
.rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.25rem);
  align-items: start;
}

.rail-index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim);
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  padding-top: 0.4rem;
}

.rail-index b {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* The rail's own hairline, dropping from the number into the section. */
.rail-index::after {
  content: '';
  width: 1px;
  height: clamp(28px, 5vw, 64px);
  background: linear-gradient(to bottom, var(--line-strong), transparent);
}

@media (max-width: 899px) {
  .rail { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .rail-index { grid-auto-flow: column; align-items: center; padding-top: 0; }
  .rail-index::after {
    width: clamp(24px, 12vw, 80px); height: 1px;
    background: linear-gradient(to right, var(--line-strong), transparent);
  }
}

/* --- Phase offset. A single blue displacement behind a heading, signalling an
   unresolved stage. The ghost duplicates the real markup so both wrap
   identically at every width. */
.phase-title { position: relative; isolation: isolate; }

.phase-title .phase-ghost {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--proof-blue);
  opacity: 0.34;
  transform: translate(6px, 5px);
  pointer-events: none;
  user-select: none;
}

.band--carbon .phase-title .phase-ghost { opacity: 0.5; }
.band--lime .phase-title .phase-ghost { opacity: 0.3; }

@media (max-width: 640px) {
  .phase-title .phase-ghost { transform: translate(3px, 3px); opacity: 0.26; }
}

/* --- Proof rule. Connects sequenced steps and measurable statements. The
   traversed portion carries Proof Blue, so the rule reports progress. */
.proof-rule { position: relative; }

.proof-rule::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}

.proof-rule::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  height: 100%;
  background: var(--proof-blue);
  transform: scaleY(var(--progress, 0));
  transform-origin: top center;
  transition: transform var(--slow) var(--ease-resolve);
}


/* ==========================================================================
   29. Inspect sequence
   The process reads as an inspection pass: a sticky readout on the left
   reports which step is being read, and the proof rule reports how far the
   sequence has travelled. Driven by IntersectionObserver, never by a
   continuous scroll listener.
   ========================================================================== */

.process { align-items: start; }

.process-aside {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

@media (min-width: 900px) {
  .process-aside { position: sticky; top: 7.5rem; }
}

.process-readout {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.process-readout b {
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--link);
}

.process-readout span {
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  color: var(--dim);
}

.process-name {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* Four cells, one per step. The reached ones fill; the current one confirms. */
.process-ticks { display: flex; gap: 0.4rem; margin-top: 0.35rem; }

.process-ticks i {
  width: 26px;
  height: 6px;
  border-radius: 1px;
  border: 1px solid var(--line-strong);
  background: transparent;
  transition: background var(--normal) var(--ease-resolve),
              border-color var(--normal) var(--ease-resolve);
}

.process-ticks i.is-done { background: var(--proof-blue); border-color: var(--proof-blue); }
.process-ticks i.is-now  { background: var(--signal-lime); border-color: var(--fg); }

/* The steps stack vertically and hang off the proof rule. */
.steps--seq {
  grid-template-columns: minmax(0, 1fr);
  border-top: 0;
  padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
  gap: 0;
}

.steps--seq > .step {
  position: relative;
  border-right: 0;
  border-bottom: var(--rule) solid var(--line);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  opacity: 0.52;
  transition: opacity var(--normal) var(--ease-resolve);
}

.steps--seq > .step:first-child { padding-left: 0; padding-top: 0; }
.steps--seq > .step:last-child { border-bottom: 0; padding-bottom: 0; }
.steps--seq > .step.is-active { opacity: 1; }
.steps--seq > .step p { max-width: 56ch; font-size: 1rem; }

/* The step marker sits on the rule, so the sequence is visibly connected. */
.steps--seq > .step::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.25rem, 2.5vw, 2.25rem) * -1 - 4px);
  top: clamp(1.5rem, 3vw, 2.25rem);
  width: 9px;
  height: 9px;
  border-radius: 1px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  transition: background var(--normal) var(--ease-resolve),
              border-color var(--normal) var(--ease-resolve);
}

.steps--seq > .step:first-child::before { top: 0.4rem; }
.steps--seq > .step.is-active::before { background: var(--proof-blue); border-color: var(--proof-blue); }

/* The marker on the rule now carries the cell, so the number drops its own. */
.steps--seq > .step .meta::before { display: none; }

/* Below the tablet break the sticky readout is redundant, because the steps
   carry their own numbers. The aside collapses to a plain label. */
@media (max-width: 899px) {
  .process-readout, .process-ticks, .process-name { display: none; }
  .steps--seq { padding-left: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .steps--seq > .step { opacity: 1; }
  .proof-rule::after { transition: none; }
}

/* ==========================================================================
   30. Confirm and resolve states
   The system already says assemble, inspect and resolve. These are the
   confirmations it was missing.
   ========================================================================== */

/* --- An opened scope confirms once with a Signal Lime cell, then holds. */
.scope > summary { position: relative; }

/* Sits in the gap before the open/close control, so the confirmation reads as
   part of the summary row rather than as a stray mark below it. The offset
   clears the circular toggle rather than crowding it. */
.scope-confirm {
  position: absolute;
  right: 3.15rem;
  top: 50%;
  margin-top: -4.5px;
  width: 9px;
  height: 9px;
  border-radius: 1px;
  background: var(--signal-lime);
  border: 1px solid var(--fg);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--fast) var(--ease-resolve),
              transform var(--fast) var(--ease-resolve);
}

.scope[open] .scope-confirm { opacity: 1; transform: scale(1); }

/* --- The enquiry form: one scan pass, then static progress text. */
.brief { position: relative; }

.brief-scan {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.brief.is-working .brief-scan { opacity: 1; }

.brief-scan::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: var(--proof-blue);
  transform: scaleX(0);
  transform-origin: left center;
}

.brief.is-working .brief-scan::after {
  animation: brief-pass 920ms var(--ease-resolve) both;
}

@keyframes brief-pass {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

.brief.is-working .btn { opacity: 0.6; pointer-events: none; }

/* Success is stated in text and marked with a cell, never colour alone. */
#brief-status.is-done {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--fg);
}

#brief-status.is-done::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.3rem;
  border-radius: 1px;
  background: var(--signal-lime);
  border: 1px solid var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  .brief-scan { display: none; }
  .scope-confirm { transition: none; }
}

/* ==========================================================================
   31. Header resolve
   On scroll the header reports which section is being read. The brand asks
   for the compact icon in tight contexts, not the full scan wordmark.
   ========================================================================== */

/* The header already carries its own translucent surface and blur, so the
   scrolled state only needs to reveal the readout. */

.header-where {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim);
  align-items: center;
  gap: 0.5rem;
}

.header-where b { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }

.header-where::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 1px;
  background: var(--proof-blue);
}

@media (min-width: 900px) {
  .site-header.is-scrolled .header-where { display: flex; }
}

/* ==========================================================================
   32. Before and after
   A dragged reveal, so the redesign can be inspected rather than described.
   The control is a real range input, so it works from the keyboard.
   ========================================================================== */

.ba {
  position: relative;
  border: var(--rule) solid var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
  background: var(--tray);
  --pos: 50%;
  touch-action: pan-y;
}

.ba img { display: block; width: 100%; height: auto; }

.ba-after { position: relative; z-index: 0; }

.ba-before {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-clip-path: inset(0 calc(100% - var(--pos)) 0 0);
          clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* The seam, marked in Proof Blue with a contained handle cell. */
.ba-seam {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: var(--proof-blue);
  pointer-events: none;
}

.ba-seam::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 1px;
  border: 2px solid var(--proof-blue);
  background: var(--chalk);
}

/* The range covers the image and carries the interaction. */
.ba-range {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  cursor: ew-resize;
}

.ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 34px;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
}

.ba-range::-moz-range-thumb {
  width: 34px;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: ew-resize;
}

.ba-range:focus-visible { outline: 3px solid var(--proof-blue); outline-offset: 3px; }

/* Corner labels, so which side is which never depends on memory. */
.ba-tag {
  position: absolute;
  z-index: 2;
  top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.3rem 0.5rem;
  border-radius: 1px;
  pointer-events: none;
}

.ba-tag--before { left: 0.6rem; background: var(--carbon); color: var(--chalk); }
.ba-tag--after { right: 0.6rem; background: var(--signal-lime); color: var(--carbon); }

/* Stated once above the set, not repeated under every comparison. */
.ba-hint { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

.ba-figure { margin: 0; display: grid; gap: 0.85rem; }
.ba-figure figcaption { display: grid; gap: 0.25rem; }
.ba-figure figcaption strong { font-size: 1.0625rem; letter-spacing: -0.02em; font-weight: 600; }
.ba-figure figcaption span { font-size: 0.9375rem; color: var(--dim); }

/* ==========================================================================
   33. Glue for the new compositions
   ========================================================================== */

/* The header readout sits with the brand, not floating mid-bar. */
.header-where { margin-right: auto; }

/* The statement keeps its editorial breathing room inside the grid. */
.statement.c9 { max-width: 30ch; }

@media (max-width: 899px) {
  .statement.c9 { max-width: none; }
}

/* ==========================================================================
   33. Centred hero
   One statement on the axis, the action directly under it, the case study a
   quieter step below that. The proof row stays full width, so the centred
   block reads as a campaign field rather than as a narrow column.
   ========================================================================== */

.hero--center {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 8rem) clamp(2.5rem, 4vw, 4rem);
}

.hero-inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hero-kicker { margin: 0; }

.hero-title {
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}

.hero-lede {
  max-width: 58ch;
  margin-inline: auto;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
}

/* The action stack: primary button, then the case study beneath it. */
.hero-actions {
  display: grid;
  justify-items: center;
  gap: 1rem;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

/* A quieter, smaller step down from the primary action. */
.text-link--sm {
  font-size: 0.875rem;
  gap: 0.4rem;
}

/* --- Scan rings. The one circular device at hero scale: a target coming into
   focus. Sized off the viewport so it never crops awkwardly, and pushed behind
   the type. Present on every variant, including the plain one. */
.hero-rings {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: -1;
  width: min(150vw, 1180px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--ring, rgba(47, 91, 255, 0.18));
}

.hero-rings span:nth-child(2) { inset: 16%; border-color: var(--ring-accent, rgba(11, 13, 14, 0.16)); }
.hero-rings span:nth-child(3) { inset: 33%; }

/* --- The Signal Lime accent word.
   Lime on Chalk is about 1.1:1, so on light surfaces the word is marked with a
   lime field behind Carbon type, which is the pairing the brand recommends.
   On the carbon hero the same class becomes lime type, where contrast is high. */
.hi {
  background: var(--signal-lime);
  color: var(--carbon);
  padding-inline: 0.14em;
  margin-inline: -0.06em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* ==========================================================================
   35. Circles
   One rule, applied everywhere: circles carry actions and wayfinding, squares
   carry structure and state. So the arrow cell, the disclosure toggles, the
   section markers and the standards glyphs are round, while the signal cell,
   the modular field, the registration corners and the proof-rule markers stay
   square. Nothing decorative is round for its own sake.
   ========================================================================== */

/* --- A circular cell holding a small glyph. */
.icon-cell {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--link);
  transition: border-color var(--normal) var(--ease-resolve),
              background var(--normal) var(--ease-resolve);
}

.icon-cell svg { width: 1.125rem; height: 1.125rem; }

.standard .icon-cell { margin-bottom: 1rem; }
.standard:hover .icon-cell { border-color: var(--link); background: rgba(47, 91, 255, 0.09); }

/* --- Disclosure toggles become circular, because they are actions. */
.plus {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: border-color var(--normal) var(--ease-resolve),
              background var(--normal) var(--ease-resolve);
}

.plus::before,
.plus::after { inset: 50% 0.55rem auto 0.55rem; }

.scope > summary:hover .plus,
.faq summary:hover .plus { border-color: var(--link); background: rgba(47, 91, 255, 0.09); }

.scope[open] .plus,
.faq details[open] .plus { border-color: var(--link); color: var(--link); }

/* --- The rail number gets a wayfinding dot at the head of its hairline. */
.rail-index b { position: relative; }

.rail-index b::before {
  content: '';
  position: absolute;
  left: -0.85rem;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--link);
}

@media (max-width: 899px) {
  .rail-index b::before { display: none; }
}

/* --- The hero proof items get a small ring, so the row reads as a set of
   entry points rather than four paragraphs. */
.hero-proof dt { display: flex; align-items: center; gap: 0.5rem; justify-content: center; }

.hero-proof dt::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--link);
}

.hero--center .hero-proof dd { text-align: center; }

@media (max-width: 899px) {
  .hero-proof dt,
  .hero--center .hero-proof dd { justify-content: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .icon-cell, .plus { transition: none; }
}

/* ==========================================================================
   36. Hero refinements
   ========================================================================== */

/* The accent is a marker band, not a full line box. Display type runs at a
   0.88 line height, so a background covering the whole box would collide with
   the descenders of the line above. */
.hi {
  color: var(--carbon);
  background: none;
  background-image: linear-gradient(var(--signal-lime), var(--signal-lime));
  background-repeat: no-repeat;
  /* Anchored to the bottom of the inline box rather than the top, so the band
     sits on the baseline and clears the descenders of the line above. */
  background-size: 100% 0.82em;
  background-position: left 0 bottom 0.1em;
}

/* Rings need to be visible enough to read as a device on the plain hero too,
   where there is no image behind them doing the work. */
.hero--center { --ring: rgba(47, 91, 255, 0.26); --ring-accent: rgba(11, 13, 14, 0.20); }

.site-header .brand-wordmark g,
.site-header .brand-icon g,
.site-nav a,
.nav-toggle { transition: stroke var(--normal) var(--ease-resolve),
                          color var(--normal) var(--ease-resolve); }

@media (prefers-reduced-motion: reduce) {
  .site-header .brand-wordmark g,
  .site-header .brand-icon g,
  .site-nav a,
  .nav-toggle { transition: none; }
}