/* ==========================================================================
   Compile Solutions — components
   Loaded after styles.css. Red only ever means: a person is doing this.
   ========================================================================== */

/* --- Bands ---------------------------------------------------------------- */

.band { position: relative; padding-block: clamp(3.75rem, 6.5vw, 6.5rem); }
.band--tight { padding-block: clamp(3rem, 4.5vw, 4.5rem); }

/* Every band is a station on the spine. The ring sits on the rail the line
   runs down, so the process the hero introduces continues the whole way. */
.band::before {
  content: '';
  position: absolute;
  top: clamp(3.75rem, 6.5vw, 6.5rem);
  /* Same offset the fixed spine uses, so the ring sits on the rail at any width. */
  left: calc(max((100vw - var(--shell-max)) / 2, 0px) + var(--rail) / 2 - 0.44rem);
  width: 0.88rem;
  height: 0.88rem;
  border-radius: 50%;
  background: var(--ground-950);
  box-shadow: inset 0 0 0 2px var(--flow-deep);
  z-index: 41;
}
.band--tight::before { top: clamp(3rem, 4.5vw, 4.5rem); }
.pagehead::before { top: clamp(7rem, 12vw, 10rem); }
@media (max-width: 860px) { .pagehead::before { top: 7rem; } }

/* The one band about work nobody should automate keeps its stop red. */
.band[data-station='manual']::before {
  background: var(--signal);
  box-shadow: inset 0 0 0 2px var(--signal), 0 0 0 5px rgba(255, 67, 38, 0.16);
}

/* Paper bands get the same fine grain the hero has, so the printed argument
   does not stop at the fold. */
.band[data-ground='bone']::after,
.insert[data-ground='bone']::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.band > * { position: relative; z-index: 1; }

.band[data-ground='bone'],
.insert[data-ground='bone'] {
  background: var(--bone);
  color: var(--ink);
  --on-ground: var(--ink);
  --on-ground-soft: var(--ink-soft);
  --on-ground-faint: #5F636B;   /* 5.6:1 on --bone */
  --rule-dark: var(--rule-light);
  --signal: var(--signal-ink);
  --signal-lift: var(--signal-ink);
  --flow: var(--ink);
  --flow-deep: #9A9892;
  --ground-950: var(--bone);
  --ground-900: var(--bone-dim);
  --ground-800: #E9E7E2;
  /* The upper ground steps were never re-declared, so any component reaching
     for a hover or edge step got a near-black one on paper. */
  --ground-700: #DEDCD6;
  --ground-600: #CFCCC5;
  --ground-500: #B4B1A9;
}

.band__head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s6);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.band__head > :first-child { max-width: 21ch; }
.band__head .lede { max-width: 44ch; }

@media (max-width: 900px) {
  .band__head { grid-template-columns: 1fr; align-items: start; gap: var(--s4); }
  .band__head > :first-child { max-width: none; }
}

/* Arrival: visible by default, lifted once on entry. */
@media (prefers-reduced-motion: no-preference) {
  [data-arrive] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  }
  [data-arrive].is-in { opacity: 1; transform: none; }
  [data-arrive][data-delay='1'] { transition-delay: 0.06s; }
  [data-arrive][data-delay='2'] { transition-delay: 0.12s; }
}

/* --- What we do: rows, not cards ------------------------------------------ */

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

.work__row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s5);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule-dark);
  align-items: start;
}

.work__name { margin: 0 0 var(--s2); }
.work__desc {
  color: var(--on-ground-soft);
  font-size: 0.99rem;
  margin: 0;
  max-width: 33ch;
}

.swap { display: grid; gap: var(--s3); }

/* Each row carries the same station markers as the process strip in the hero:
   a filled red stop is a person, a hollow ring is work that runs itself. */
.swap__side {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  padding-left: 1.75rem;
  position: relative;
}
.swap__side::before {
  content: '';
  position: absolute;
  left: 0.4rem;
  top: 1.35em;
  bottom: calc(var(--s3) * -1);
  width: 1px;
  background: var(--rule-dark);
}
.swap__side.is-after::before { display: none; }

.swap__side::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 50%;
  background: var(--signal);
}
.swap__side.is-after::after {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--flow-deep);
}

.swap__when {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signal);
}
.swap__side.is-after .swap__when { color: var(--on-ground-faint); }

.swap__what {
  margin: 0;
  font-size: 1.01rem;
  line-height: 1.45;
  max-width: 46ch;
}
.swap__side.is-after .swap__what { color: var(--on-ground); }
.swap__side:not(.is-after) .swap__what { color: var(--on-ground-soft); }

@media (max-width: 900px) {
  .work__row { grid-template-columns: 1fr; gap: var(--s4); }
  .swap__side { grid-template-columns: 1fr; gap: 0.15rem; }
  .swap__side::before { top: 1.25em; }
}

/* --- Attributed facts ----------------------------------------------------- */

/* Evidence reads as argued sentences with the figure set at display scale,
   rather than as a row of matching stat tiles. */
.evidence { margin-top: var(--s6); border-top: 1px solid var(--rule-dark); }

/* The figure always leads its sentence, and the citation ranges right so the
   band uses the full measure the rest of the page establishes. */
.evidence__line {
  margin: 0;
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule-dark);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: var(--s5);
  align-items: baseline;
  max-width: none;
}

.evidence__claim {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.4;
  color: var(--on-ground);
  max-width: 44ch;
  display: block;
  text-indent: 0;
}

.evidence__n {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 600;
  font-stretch: 85%;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--signal);
  margin-right: 0.15em;
  display: inline-block;
  vertical-align: -0.06em;
}

/* A citation nobody can check is decoration. These open the publisher's own
   page; both primaries have since been taken down, so they point at the
   Internet Archive's capture of the original rather than at a summary. */
.evidence cite a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 0.12em;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.evidence cite a:hover,
.evidence cite a:focus-visible {
  color: var(--on-ground);
  border-bottom-color: currentColor;
}

.evidence cite {
  display: block;
  font-size: 0.76rem;
  font-style: normal;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-ground-faint);
}

@media (max-width: 820px) {
  .evidence__line { grid-template-columns: 1fr; gap: var(--s2); }
  .evidence__claim { max-width: none; }
}

/* --- Language demonstration ----------------------------------------------- */

.langs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr);
  gap: var(--s4);
  align-items: stretch;
}

.langs__source,
.langs__out {
  padding: var(--s5);
  min-height: 13rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.langs__source { background: var(--ground-800); border: 1px solid var(--rule-dark); }
.langs__out { background: var(--ground-950); border: 1px solid var(--flow-deep); }

.langs__text {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.35;
  margin: 0 0 var(--s3);
  letter-spacing: -0.015em;
  max-width: none;
}
.langs__text[dir='rtl'] { text-align: right; }

.langs__from {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ground-faint);
  margin: 0;
}

.langs__arrow { display: grid; place-items: center; color: var(--on-ground-faint); }

.langs__cap {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-ground-faint);
  margin: 0 0 var(--s3);
}

.field {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--s3);
  padding-block: 0.44rem;
  border-bottom: 1px solid var(--rule-dark);
  font-size: 0.94rem;
}
.field:last-child { border-bottom: 0; }
@media (max-width: 600px) { .field { grid-template-columns: 1fr; gap: 0.15rem; } }
.field dt { color: var(--on-ground-faint); margin: 0; }
.field dd { margin: 0; color: var(--on-ground); font-weight: 600; }
.field dd.is-manual { color: var(--signal); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s4); }

.chip {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  background: transparent;
  color: var(--on-ground-soft);
  border: 1px solid var(--rule-dark);
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.chip:hover { border-color: var(--ground-500); color: var(--on-ground); }
.chip[aria-pressed='true'] {
  background: var(--on-ground);
  border-color: var(--on-ground);
  color: var(--ground-950);
  font-weight: 600;
}

@media (max-width: 900px) {
  .langs { grid-template-columns: 1fr; gap: var(--s3); }
  .langs__arrow { transform: rotate(90deg); height: 2rem; }
  .langs__source, .langs__out { min-height: 0; }
}

/* --- The cost model ------------------------------------------------------- */

.calc__inputs { display: grid; gap: var(--s4); }

.f { display: grid; gap: 0.42rem; }

.f label {
  font-size: 0.93rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
}

.f__val { font-weight: 700; color: var(--signal); }
.f__hint { font-size: 0.85rem; color: var(--on-ground-soft); margin: 0; max-width: none; }

.f input[type='number'],
.f select {
  min-width: 0;
  font-family: inherit;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  padding: 0.6rem 0.72rem;
  border: 1px solid var(--bone-edge);
  background: #fff;
  color: var(--ink);
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.f input[type='number']:focus-visible,
.f select:focus-visible {
  outline: 3px solid var(--flow);
  outline-offset: 2px;
}
.f input[type='number']:focus, .f select:focus {
  border-color: var(--signal-ink);
  box-shadow: 0 0 0 3px rgba(196, 43, 18, 0.16);
  outline: none;
}

.f__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 480px) { .f__pair { grid-template-columns: 1fr; gap: var(--s2); } }

.f input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* 24px of real hit area; the visible 3px track is drawn inside it. */
  height: 1.5rem;
  background: linear-gradient(var(--bone-edge), var(--bone-edge)) center / 100% 3px no-repeat;
  cursor: pointer;
  margin-block: 0.15rem;
  touch-action: manipulation;
}
.f input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--signal-ink);
  border: 3px solid var(--bone);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.f input[type='range']::-moz-range-thumb {
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background: var(--signal-ink);
  border: 3px solid var(--bone);
}

/* The dark panel keeps its own ground inside a paper band, so it re-declares
   the dark token set rather than hard-coding a second palette. */
@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
  .calc__out { position: static; }
}

/* --- The engagement ladder ------------------------------------------------ */
/* The same station grammar as the hero strip, turned vertical: one hollow ring
   per step on a 2px rail. Every ring stays hollow because none of these steps
   is a client's person doing the work by hand. */

.rungs { counter-reset: rung; border-top: 1px solid var(--rule-dark); }

.rung {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--s5);
  padding: var(--s5) 0 var(--s5) 4.2rem;
  border-bottom: 1px solid var(--rule-dark);
  counter-increment: rung;
}

.rung::before {
  content: '';
  position: absolute;
  left: calc(1.2rem - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--flow-deep);
}
.rung:first-child::before { top: var(--s5); }
.rung:last-child::before { bottom: auto; height: var(--s5); }

.rung::after {
  content: counter(rung);
  position: absolute;
  left: 0;
  top: calc(var(--s5) - 0.3rem);
  width: 2.4rem; height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ground-900);
  box-shadow: inset 0 0 0 2px var(--flow-deep);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--on-ground);
}

.rung__name { margin: 0; max-width: 12ch; }

.rung__terms {
  margin: var(--s2) 0 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ground-faint);
  max-width: 26ch;
  text-wrap: balance;
}

.rung__what { margin: 0; color: var(--on-ground-soft); max-width: 62ch; }

.rung__end {
  margin: var(--s3) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule-dark);
  color: var(--on-ground);
  max-width: 62ch;
}

.rung__lbl {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-ground-faint);
  margin-right: 0.5rem;
  white-space: nowrap;
}

.rung__note {
  margin-top: var(--s5);
  color: var(--on-ground-soft);
  max-width: 62ch;
  font-size: 0.98rem;
}

@media (max-width: 820px) {
  .rung {
    grid-template-columns: 1fr;
    gap: var(--s3);
    padding-left: 3.4rem;
  }
  .rung__name { max-width: none; }
  .rung__terms { max-width: none; }
}

/* --- Where they stall ----------------------------------------------------- */
/* Geometry matches the restraint rows; the key stays uncoloured because a
   failure mode is not a person performing a step. */

.guard { margin-top: var(--s6); border-top: 1px solid var(--rule-dark); }
.evidence + .guard { margin-top: 0; border-top: 0; }
.evidence + .quad { border-top: 0; }

.guard__item {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--s5);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule-dark);
  align-items: baseline;
}

.guard__k {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-stretch: 88%;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
  color: var(--on-ground);
  max-width: none;
  text-wrap: balance;
}
.guard__v { margin: 0; color: var(--on-ground-soft); max-width: 58ch; }

@media (max-width: 820px) {
  .guard__item { grid-template-columns: 1fr; gap: var(--s2); }
}

/* --- What we would leave alone -------------------------------------------- */

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

.wont__item {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--s5);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--rule-dark);
  align-items: baseline;
}

.wont__k {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-stretch: 88%;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
  color: var(--signal-lift);
  max-width: none;
}
.wont__v { margin: 0; color: var(--on-ground-soft); max-width: 58ch; }

@media (max-width: 820px) {
  .wont__item { grid-template-columns: 1fr; gap: var(--s2); }
}

/* --- The firm ------------------------------------------------------------- */

/* Opens the band the claim belongs to. A container yard reads as freight moving
   between places rather than as any one place, which is the point: a single
   identifiable skyline would argue against "wherever your operation runs". */
.firm__banner {
  position: relative;
  aspect-ratio: 21 / 7;
  overflow: hidden;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  background: var(--ground-800);
}
.firm__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  filter: grayscale(1) contrast(1.12) brightness(0.8);
}
.firm__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 15, 0.12) 0%, rgba(11, 12, 15, 0.68) 100%);
}

@media (max-width: 900px) {
  .firm__banner { aspect-ratio: 16 / 9; }
}

.firm {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.firm__list { margin: var(--s5) 0 0; padding: 0; list-style: none; }
.firm__list li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--s4);
  padding-block: var(--s3);
  border-top: 1px solid var(--rule-dark);
  font-size: 0.98rem;
}
.firm__list b {
  font-weight: 600;
  color: var(--on-ground-faint);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.24rem;
}
.firm__list span { color: var(--on-ground-soft); }

@media (max-width: 900px) {
  .firm { grid-template-columns: 1fr; }
  .firm__list li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* The delivery record: the same definition rows as the firm facts, given a
   wider key column because these keys are phrases rather than single words. */

.record {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-dark);
}
.record__title { margin: 0; max-width: 20ch; }
.record__list { margin-top: var(--s4); }
.record__list li { grid-template-columns: 11rem minmax(0, 1fr); }
.record__list span { max-width: 62ch; }

@media (max-width: 900px) {
  .record__list li { grid-template-columns: 1fr; }
}

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

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

.form { display: grid; gap: var(--s4); }
.form .f label { display: block; }

.form input[type='text'],
.form input[type='email'],
.form textarea,
.form select {
  font-family: inherit;
  font-size: 1.02rem;
  padding: 0.66rem 0.78rem;
  border: 1px solid var(--bone-edge);
  background: #fff;
  color: var(--ink);
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.form input:focus-visible,
.form textarea:focus-visible,
.form select:focus-visible {
  outline: 3px solid var(--flow);
  outline-offset: 2px;
}
.form input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--signal-ink);
  box-shadow: 0 0 0 3px rgba(196, 43, 18, 0.16);
  outline: none;
}
.form [aria-invalid='true'] { border-color: var(--signal-ink); }

.form__err {
  font-size: 0.85rem;
  color: var(--signal-ink);
  margin: 0.3rem 0 0;
  min-height: 1.15rem;
  font-weight: 500;
}

/* A dark island inside a paper band, so it takes the dark-ground signal back
   rather than inheriting the ink red the band re-declared. */
.form__ok-alt {
  display: block;
  margin-top: var(--s3);
  /* Derived from the panel own colour, not from --on-ground-soft: this is a
     dark island in a paper band, so that token holds the ink value here and
     would print dark grey on near-black. */
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 0.92rem;
}

.form__ok {
  --signal: var(--signal-bright);
  background: #0E0F12;
  color: #F0EFEC;
  padding: var(--s4);
  font-size: 0.97rem;
  line-height: 1.5;
  border-top: 3px solid var(--signal);
}
[hidden] { display: none !important; }

.contact__direct {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 2px solid currentColor;
}
.contact__direct a {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: -0.025em;
  text-decoration: none;
  border-bottom: 2px solid var(--flow-deep);
  padding-bottom: 2px;
  overflow-wrap: anywhere;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.contact__direct a:hover { border-bottom-color: var(--on-ground); }

@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

/* --- Placeholder marker: replace before this goes live -------------------- */

.tbc {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--signal);
  color: #fff;
  padding: 0.08rem 0.38rem;
  vertical-align: 0.1em;
  white-space: nowrap;
}
.band[data-ground='bone'] .tbc,
.insert[data-ground='bone'] .tbc { background: var(--signal-ink); }

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

.footer { background: var(--ground-950); padding-block: var(--s7) var(--s5); font-size: 0.9rem; }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: var(--s5);
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--rule-dark);
}

.footer__say {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 600;
  font-stretch: 86%;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
  max-width: 20ch;
}

.footer__col h3 {
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ground-faint);
  margin: 0 0 var(--s3);
  font-weight: 600;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.footer__col a { color: var(--on-ground-soft); text-decoration: none; }
.footer__col a:hover { color: var(--on-ground); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: space-between;
  padding-top: var(--s4);
  color: var(--on-ground-faint);
  font-size: 0.81rem;
}
.footer__base p { margin: 0; max-width: 64ch; }

@media (max-width: 820px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__say { grid-column: 1 / -1; }
}

/* --- Quad: the compact scanning row --------------------------------------- */
/* One component doing four jobs on the home page (what we automate, why ours
   ship, the delivery record, the engagement steps). It is the .work row
   rotated: a 1px top rule, no fill, no border box, nothing card-shaped. Four
   columns is the scanning unit; anything longer belongs on how-we-work.html. */

.quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--s5);
  border-top: 1px solid var(--rule-dark);
}

.quad__cell {
  padding-top: var(--s4);
  padding-bottom: var(--s2);
}

.quad__k {
  margin: 0 0 var(--s2);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-stretch: 88%;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--on-ground);
  text-wrap: balance;
}

.quad__v {
  margin: 0;
  font-size: 0.95rem;
  color: var(--on-ground-soft);
  max-width: 34ch;
}

/* Numbered variant: the engagement steps keep the station grammar, so the
   ladder on how-we-work.html and the row here read as the same four things. */
.quad--steps { counter-reset: qstep; }
.quad--steps .quad__cell { counter-increment: qstep; position: relative; padding-top: var(--s6); }
.quad--steps .quad__cell::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: 0; right: calc(var(--s5) * -1);
  height: 2px;
  background: var(--flow-deep);
}
.quad--steps .quad__cell:last-child::before { display: none; }
.quad--steps .quad__cell::after {
  content: counter(qstep);
  position: absolute;
  top: 0.3rem;
  left: 0;
  width: 2.4rem; height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ground-900);
  box-shadow: inset 0 0 0 2px var(--flow-deep);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--on-ground);
}
.quad__terms {
  margin: 0 0 var(--s2);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ground-faint);
}

@media (max-width: 900px) {
  .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s4); }
  .quad__cell { border-top: 0; }
  .quad--steps .quad__cell:nth-child(2)::before { display: none; }
}
@media (max-width: 600px) {
  .quad { grid-template-columns: 1fr; }
  .quad__cell { padding-top: var(--s3); border-top: 1px solid var(--rule-dark); }
  .quad__cell:first-child { border-top: 0; }
  .quad--steps .quad__cell { padding-top: var(--s3); padding-left: 3.4rem; }
  .quad--steps .quad__cell::before { display: none; }
  .quad--steps .quad__cell::after { top: var(--s3); width: 2.1rem; height: 2.1rem; }
}

/* --- Hero calculator ------------------------------------------------------ */
/* The lead magnet, moved into the first viewport. Three inputs rather than
   four: the recovery share is fixed at the same deliberately unexciting 60%
   and stated in the note, because it is a diagnostic output, not an input the
   visitor can honestly guess. */

.hero__calc {
  background: var(--ground-950);
  border: 1px solid var(--flow-deep);
  padding: var(--s5);
}

.hero__calc .f label { font-size: 0.86rem; }
.hero__calc .f__hint { font-size: 0.8rem; }
.hero__calc .calc__inputs { gap: var(--s3); }

.hcalc__cap {
  margin: 0 0 var(--s4);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-ground-faint);
}

.hcalc__out {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--flow-deep);
}

.hcalc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  padding-bottom: var(--s2);
}
.hcalc__row dt { margin: 0; font-size: 0.9rem; color: var(--on-ground-soft); }
.hcalc__row dd { margin: 0; font-weight: 600; color: var(--on-ground); white-space: nowrap; }

.hcalc__total {
  display: grid;
  gap: 0.1rem;
  padding-top: var(--s2);
}
.hcalc__total dt { margin: 0; font-size: 0.9rem; color: var(--on-ground-soft); }
.hcalc__total dd {
  margin: 0;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-stretch: 85%;
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--signal);
  white-space: nowrap;
}

.hcalc__note {
  margin: var(--s3) 0 0;
  font-size: 0.82rem;
  color: var(--on-ground-faint);
  max-width: 40ch;
}

.hero__calc .btn { --btn-bg: var(--signal); --btn-fg: #0B0C0F; width: 100%; justify-content: center; }
.hero__calc .btn:hover { --btn-bg: #FF5C43; }
.hcalc__cta { margin-top: var(--s4); }

/* --- Deep-page chrome ----------------------------------------------------- */

.pagehead { padding-block: clamp(7rem, 12vw, 10rem) clamp(2.5rem, 4vw, 3.5rem); }
/* Clears the masthead-plus-nav-rail block, the same way .hero does. */
@media (max-width: 860px) { .pagehead { padding-top: 7rem; } }
.pagehead .lede { max-width: 52ch; margin-top: var(--s4); }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-ground-faint);
  text-decoration: none;
  margin-bottom: var(--s4);
}
.backlink:hover { color: var(--on-ground); }
.backlink svg { transform: rotate(180deg); }

/* --- Closing call to action ----------------------------------------------- */

.endcta { border-top: 1px solid var(--rule-dark); padding-top: var(--s6); }
.endcta h2 { max-width: 18ch; }
.endcta p { margin-top: var(--s4); max-width: 52ch; color: var(--on-ground-soft); }
.endcta .hero__actions { margin-top: var(--s5); }

/* --- The free-work ask ---------------------------------------------------- */
/* The band stays deliberately quiet: no red anywhere except the inbox link,
   which carries the same signal underline it does in the contact band because
   it is the one place a person is being asked to write to a person. A pro bono
   offer that shouts is worse than one that does not. */

/* A paper insert dropped into the dark run. The band around it stays dark, so
   this reads as a printed sheet laid on the page rather than as another
   section, which is the point: the offer inside it is a different kind of offer
   from everything above it. */
.insert {
  position: relative;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  overflow: hidden;
}
.insert > * { position: relative; z-index: 1; }

/* The heading measure is set for a full band; inside the insert it has less
   room, so it holds its two-line break instead of running to one. */
.insert .band__head > :first-child { max-width: 15ch; }

@media (max-width: 900px) {
  .insert { padding: var(--s5) var(--s4); }
}

.np__ask {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-dark);
}
.np__ask p { max-width: 58ch; }
/* .np__ask already draws the rule across both columns, so the inbox block
   must not add a second one 28px under it. */
.np__ask .contact__direct { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 900px) {
  .np__ask { grid-template-columns: 1fr; gap: var(--s5); }
}

/* --- Reference ------------------------------------------------------------ */
/* One client's words about work we did, attributed to the role rather than the
   person. The sentence carries itself, so there is no pull-quote ornament, no
   portrait and no card, and it sits on a rule like every other row here. */

.quote {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-dark);
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  margin: 0;
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.45;
  color: var(--on-ground);
  max-width: 54ch;
  text-wrap: pretty;
}
/* In the column the photograph used to hold, the quote has to carry the
   weight the image did, so it is set at display scale rather than body. */
.quote--feature {
  margin: 0;
  padding-top: var(--s5);
  /* Bone, not red. Red on this site means a person is doing the step by hand,
     and a quotation is not a step. */
  border-top: 2px solid var(--flow);
}
.quote--feature blockquote p {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.28;
  letter-spacing: -0.015em;
  max-width: 24ch;
}

.quote figcaption {
  margin-top: var(--s4);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ground-faint);
}