/* ============================================================
   CFL — shared inner-page layer.
   Loaded AFTER a direction's style.css. It reuses that
   direction's tokens and component classes and adds only the
   blocks the inner pages need. These pages are content-first
   by design: the exploration is decided on the home page.
   ============================================================ */

/* ---------- page hero ---------- */

.page-hero { border-bottom: 1px solid var(--rule); }
.page-hero__in { padding-block: clamp(44px, 5vw, 84px); display: grid; gap: 20px; }
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { max-width: 60ch; }
/* a second paragraph under the lede: the lede reads as its first line */
.page-hero__more { max-width: 60ch; margin-top: -6px; color: var(--ink-2); text-wrap: pretty; }
.page-hero__in:has(.page-hero__more) .lede { color: var(--ink); }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }

/* ---------- prose ---------- */

.prose { display: grid; gap: 18px; max-width: 68ch; }
.prose p { color: var(--ink-2); }
.prose p.big { font-size: var(--fs-lede); color: var(--ink); }

.block { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.block + .block { margin-top: clamp(44px, 5vw, 80px); }
.block__head { display: grid; gap: 14px; }
.block__head h2 { max-width: 22ch; }
.block__head .lede { max-width: 60ch; }

/* Once the page runs to 1600, a heading with a single paragraph under it
   is a narrow column with half a screen of nothing beside it. Above 1200
   those blocks split: the h2 takes a left rail, the prose the rest. Only
   heading-then-prose blocks do this — a block carrying a kv grid, steps,
   a checklist or a table already spends the full measure, and a block
   whose first child is not the head (the case page's results + prose) is
   left alone so its grid keeps its own width. The paragraph keeps its
   68ch measure inside the wider column; nothing gets harder to read. */
@media (min-width: 1200px) {
  .block:has(> .block__head + .prose) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    column-gap: clamp(40px, 5vw, 88px);
  }
}

/* ---------- key / value grid ---------- */

.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 700px) { .kv { grid-template-columns: minmax(0, 1fr); } }
.kv__row { background: var(--ground); padding: 18px 20px; display: grid; gap: 7px; align-content: start; }
.kv__k { font-family: var(--display); font-weight: 700; font-size: .9375rem; color: var(--ink); }
.kv__v { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }
.kv--mono .kv__k { font-family: var(--mono); font-weight: 400; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.kv--mono .kv__v { font-family: var(--mono); font-size: .8125rem; color: var(--ink); overflow-wrap: anywhere; }

/* ---------- numbered steps ---------- */

.steps { display: grid; border-top: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 64px minmax(0, 20ch) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 34px); padding: clamp(18px, 2.2vw, 28px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
@media (max-width: 780px) { .step { grid-template-columns: 44px minmax(0, 1fr); } .step p { grid-column: 2; } }
.step__n { font-family: var(--mono); font-size: .8125rem; letter-spacing: .1em; color: var(--link); padding-top: 3px; }
.step h3 { font-size: 1.06rem; }
.step p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.62; }

/* ---------- checklist ---------- */

.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
@media (max-width: 700px) { .checklist { grid-template-columns: minmax(0, 1fr); } }
.checklist li { font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid var(--rule); line-height: 1.5; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 12px; height: 12px; border: 1.5px solid var(--link); }

/* ---------- FAQ ---------- */

.faq { display: grid; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-family: var(--display); font-weight: 700; font-size: 1.03rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--mono); color: var(--link); font-size: 1.25rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 22px; color: var(--ink-2); font-size: var(--fs-sm); max-width: 66ch; }

/* ---------- glossary ---------- */

.glossary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 780px) { .glossary { grid-template-columns: minmax(0, 1fr); } }
.glossary > div { background: var(--ground); padding: 20px; display: grid; gap: 8px; align-content: start; }
.glossary dt { font-family: var(--display); font-weight: 700; font-size: .9375rem; color: var(--ink); }
.glossary dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; }

/* ---------- fact strip ---------- */

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 820px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.facts > div { background: var(--ground); padding: 18px 20px; display: grid; gap: 7px; }
.facts dt { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.03rem; color: var(--ink); letter-spacing: -0.015em; }

/* ---------- result numbers ---------- */

.results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 700px) { .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.results > div { display: grid; gap: 10px; }
.results dt { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); line-height: 1; color: var(--link); font-variant-numeric: tabular-nums; }
.results dd { margin: 0; font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.45; }

/* ---------- aside callout ---------- */

.callout { border-left: 3px solid var(--link); padding: 4px 0 4px 22px; color: var(--ink); font-size: var(--fs-lede); line-height: 1.55; max-width: 60ch; }

/* ---------- gallery plates ---------- */

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
@media (max-width: 620px) { .gallery { grid-template-columns: minmax(0, 1fr); } }
.plate-img { display: grid; gap: 10px; }
.plate-img__frame {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, var(--accent-wash) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, var(--surface), var(--ground));
  border: 1px solid var(--rule);
}
.plate-img__frame::after {
  content: attr(data-tag); position: absolute; left: 14px; bottom: 12px;
  font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
.plate-img figcaption { font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- contact form ---------- */

.form { display: grid; gap: 18px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .form__grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea {
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  padding: 12px 14px; font-family: var(--body); font-size: var(--fs-sm); width: 100%;
  border-radius: var(--radius, 0);
}
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--link); }
.field textarea { min-height: 120px; }
.form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.form__consent input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--link); }
.form__note { font-family: var(--mono); font-size: .6875rem; color: var(--ink-3); line-height: 1.6; }

.two-col { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 880px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* ---------- related / next ---------- */

.related { border-top: 1px solid var(--rule); padding-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; justify-content: space-between; }
.related__k { font-family: var(--mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.related h3 { font-size: 1.2rem; }
/* an article closes on the other two, one under the other */
.related--more { flex-direction: column; align-items: flex-start; gap: 10px; }

/* ---------- solution cards on the hub ---------- */

.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 820px) { .hub { grid-template-columns: minmax(0, 1fr); } }
.hub__card { border: 1px solid var(--rule); padding: clamp(24px, 3vw, 36px); display: grid; gap: 14px; align-content: start; scroll-margin-top: 92px; }
/* semantically each solution is a section of this page, so it is an h2;
   visually it stays at h3 scale */
.hub__card h2 { font-size: var(--fs-h3); line-height: 1.2; max-width: 20ch; }
.hub__card p { color: var(--ink-2); font-size: var(--fs-sm); }
.hub__code { font-family: var(--mono); font-size: .8125rem; letter-spacing: .18em; color: var(--link); }
.hub__pts { display: grid; gap: 8px; }
.hub__pts li { font-family: var(--mono); font-size: .75rem; color: var(--ink-2); padding-left: 20px; position: relative; line-height: 1.5; }
.hub__pts li::before { content: ""; position: absolute; left: 0; top: .58em; width: 10px; height: 1.5px; background: var(--link); }

/* ---------- closing CTA on inner pages ---------- */

.inner-cta { border-top: 1px solid var(--rule); }
.inner-cta__in { padding-block: clamp(44px, 5vw, 76px); display: grid; gap: 20px; max-width: 640px; }

/* ---------- three services on the hub, and the client's benefit
     headline above each description ---------- */

.hub--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1040px) { .hub--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .hub--three { grid-template-columns: minmax(0, 1fr); } }
.hub__head {
  font-family: var(--display); font-weight: 700;
  font-size: 1.02rem; line-height: 1.25; letter-spacing: -0.015em;
  color: var(--ink); max-width: 24ch;
}
.hub__card p.hub__head { color: var(--ink); font-size: 1.02rem; }

/* ---------- industry pages ----------
   The client writes these in full, so everything here exists to set his
   copy down as he wrote it: lists of questions and conditions inside the
   prose, a line set apart, the route he draws with arrows, a link under
   the sections he marked with one, and the source he names at the end of
   an answer. The headline is a sentence rather than a name, so the hero
   gives it a longer measure than the 18ch the other pages use. */
.page-hero--long h1 { max-width: 30ch; }

.prose .list { display: grid; gap: 10px; }
.prose .list li { color: var(--ink-2); padding-left: 24px; position: relative; line-height: 1.6; }
.prose .list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--link); }
.prose .callout { margin-block: 4px; }

.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-family: var(--mono); font-size: .8125rem; color: var(--ink); }
.chain span { border: 1px solid var(--rule); background: var(--surface); padding: 6px 11px; border-radius: var(--radius, 0); }
.chain i { font-style: normal; color: var(--link); }

.prose-rel { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--rule); }

.src { font-style: normal; font-family: var(--mono); font-size: .625rem; letter-spacing: .12em; color: var(--ink-3); border: 1px solid var(--rule); padding: 1px 5px; vertical-align: 1px; white-space: nowrap; }

/* ---------- the client's long documents (2026-09-30) ----------
   Core Services, Why CFL Worldwide, Industries We Support and How We
   Work: four to five thousand words each, every one of them his. The
   page is a contents list and a column of text. On a wide screen the
   list stands sticky on the left and the text keeps its reading
   measure on the right; under 1100px the list folds into one line above
   the text. His repeated sub-heads — What We Do, Why It Matters, Common
   Industry Failures — are labels, not headings to read, so they are set
   small and mono and the paragraphs under them carry the weight. */
.page-hero--doc h1 { max-width: 20ch; }
.page-hero__head {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2.1rem); line-height: 1.2;
  color: var(--ink-2); max-width: 34ch;
}

.doc__in { display: grid; gap: clamp(28px, 4vw, 72px); }
@media (min-width: 1100px) {
  .doc__in { grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); align-items: start; }
  .doc__toc { position: sticky; top: calc(var(--head-top, 12px) + var(--head-h, 64px) + 24px); max-height: calc(100vh - var(--head-top, 12px) - var(--head-h, 64px) - 48px); overflow: auto; }
  .doc__tocd > summary { pointer-events: none; }
  .doc__tocd > summary::after { display: none; }
}
.doc__tocd > summary {
  list-style: none; cursor: pointer; font-family: var(--mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); padding: 12px 0; border-bottom: 1px solid var(--rule); position: relative;
}
.doc__tocd > summary::-webkit-details-marker { display: none; }
.doc__tocd > summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--link); font-size: .9rem; }
.doc__tocd[open] > summary::after { content: "\2212"; }
.doc__toc ol { display: grid; padding: 8px 0 0; }
.doc__toc a {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 7px 0;
  font-size: .8125rem; line-height: 1.4; color: var(--ink-2); text-decoration: none;
}
.doc__toc a b { font-family: var(--mono); font-weight: 400; font-size: .6875rem; color: var(--link); padding-top: 2px; }
.doc__toc a:not(:has(b))::before { content: ""; }
.doc__toc a:hover, .doc__toc a[aria-current="true"] { color: var(--ink); }
.doc__toc a[aria-current="true"] b { color: var(--accent); }

.doc__body { display: grid; min-width: 0; }
.doc__intro { max-width: 68ch; }
.doc__intro > p:first-child { font-size: var(--fs-lede); color: var(--ink); }

.doc__sec { padding-top: clamp(48px, 5vw, 88px); margin-top: clamp(48px, 5vw, 88px); border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--head-top, 12px) + var(--head-h, 64px) + 20px); display: grid; gap: clamp(20px, 2.2vw, 30px); }
.doc__sec--group { padding-bottom: 0; }
.doc__sec--group + .doc__sec { border-top: 0; margin-top: 0; }
.doc__head { display: grid; gap: 12px; max-width: 68ch; }
.doc__head h2 { font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem); max-width: 26ch; }
.doc__n { font-family: var(--mono); font-size: .8125rem; letter-spacing: .12em; color: var(--link); }
.doc__sub { font-family: var(--display); font-weight: 600; font-size: var(--fs-lede); color: var(--ink-2); line-height: 1.35; letter-spacing: -0.012em; }

:is(.doc, .doc-part, .svc3) .prose { gap: 16px; }
/* his Industries We Support section for the industry, around the three
   cards: kept to the reading measure. Above 1200 its opening stands beside
   the heading, the way a heading and its prose do in every other block,
   and the line after the cards sits under it; the cards and the two notes
   under them take the full width. */
.svc3__doc { max-width: 68ch; }
@media (min-width: 1200px) {
  .svc3 > :not(.block__head, .svc3__doc) { grid-column: 1 / -1; }
  .svc3 > .svc3__doc--after { grid-column: 2; }
}
.doc__lbl {
  font-family: var(--mono); font-weight: 400; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--link); padding-top: 22px; margin-top: 6px; border-top: 1px dashed var(--rule);
}
.doc__h3 { font-size: var(--fs-h3); padding-top: 18px; scroll-margin-top: calc(var(--head-top, 12px) + var(--head-h, 64px) + 20px); }
.doc__h4 { font-family: var(--display); font-size: 1.06rem; color: var(--ink); padding-top: 8px; }
.prose strong { color: var(--ink); font-weight: 650; }

/* several short bold lines he stacked: set as a column of tags */
.lines { display: flex; flex-wrap: wrap; gap: 8px; }
.lines li { font-family: var(--display); font-weight: 600; font-size: .98rem; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--link); padding: 8px 14px; }
.chain--sum i { font-weight: 700; }

/* "Label: text" rows */
.pairs { display: grid; border-top: 1px solid var(--rule); }
.pairs > div { display: grid; grid-template-columns: minmax(0, 12ch) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.pairs dt { font-family: var(--display); font-weight: 700; color: var(--ink); }
.pairs dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .pairs > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* numbered steps with a question each */
.dsteps { display: grid; border-top: 1px solid var(--rule); counter-reset: none; }
.dsteps li { display: grid; grid-template-columns: 36px minmax(0, 16ch) minmax(0, 1fr); gap: 6px 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.dsteps__n { font-family: var(--mono); font-size: .8125rem; color: var(--link); }
.dsteps__t { font-family: var(--display); font-weight: 700; color: var(--ink); }
.dsteps__q { color: var(--ink-2); }
@media (max-width: 640px) { .dsteps li { grid-template-columns: 30px minmax(0, 1fr); } .dsteps__q { grid-column: 2; } }

/* the reactive-vs-planned table */
.compare-wrap { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.compare th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 0 16px 12px 0; border-bottom: 1px solid var(--ink); }
.compare th:last-child { color: var(--link); }
.compare td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--rule); color: var(--ink-3); vertical-align: top; width: 50%; }
.compare td:last-child { color: var(--ink); font-weight: 500; }

.faq__a { display: grid; gap: 12px; padding: 0 0 22px; max-width: 66ch; }
.faq__a p { padding: 0 !important; }
.faq__a .list li, .faq__a p { font-size: var(--fs-sm); }

/* ---------- the case study ---------- */
.case-top { display: grid; gap: clamp(20px, 3vw, 40px); align-items: start; margin-bottom: clamp(44px, 5vw, 80px); }
@media (min-width: 900px) { .case-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.facts--case { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts--case dd { font-size: .98rem; line-height: 1.35; }
@media (max-width: 560px) { .facts--case { grid-template-columns: minmax(0, 1fr); } }
.case-photo { display: grid; gap: 10px; }
.case-photo img { width: 100%; height: auto; display: block; border: 1px solid var(--rule); border-radius: var(--radius, 0); }
.case-photo figcaption { font-family: var(--mono); font-size: .6875rem; color: var(--ink-3); line-height: 1.5; }
/* a page that is all text starts its text soon after the hero, not a
   whole section's air below it */
.section.doc, .section.case-sec { padding-top: clamp(40px, 4.4vw, 76px); }
.page-hero--case h1 { font-size: clamp(2rem, 1.1rem + 2.9vw, 3.75rem); max-width: 24ch; }
/* his parts as an article: a ruled break between them, the heading over
   the text (from 1200, beside it, and held there while the text scrolls),
   and every paragraph and step at one size and one colour */
.block.case-part + .block.case-part { margin-top: clamp(40px, 4.4vw, 72px); padding-top: clamp(40px, 4.4vw, 72px); border-top: 1px solid var(--rule); }
.case-body { gap: 20px; }
.case-body p { font-size: 1.0625rem; line-height: 1.7; color: var(--ink); }
.case-body .steps { margin-top: 6px; }
.case-body .step { grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; row-gap: 10px; }
.case-body .step p { grid-column: 2; }
.case-body .step h3 { font-size: 1.125rem; }
@media (min-width: 1200px) { .case-part > .block__head { position: sticky; top: 120px; } }

/* ---------- industry pages ----------
   The three services seen from one industry, then the service pages'
   own blocks told for it. */
.page-hero--ind .page-hero__meta .chip { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-wash); transition: background .16s ease; }
.page-hero--ind .page-hero__meta .chip:hover { background: var(--surface); }

.svc3 { scroll-margin-top: calc(var(--head-top, 12px) + var(--head-h, 64px) + 20px); }
.svc3 .block__head h2 { max-width: 30ch; }
.svc3__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 900px) { .svc3__grid { grid-template-columns: minmax(0, 1fr); } }
.svc3__c { background: var(--surface); padding: clamp(20px, 2.2vw, 30px); display: grid; gap: 14px; align-content: start; grid-template-rows: auto auto auto 1fr auto; }
.svc3__n { display: flex; gap: 10px; font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.svc3__n b { font-weight: 500; color: var(--link); }
.svc3__h { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); letter-spacing: -.02em; line-height: 1.15; }
.svc3__role { font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.svc3__list li { position: relative; padding: 6px 0 6px 20px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.svc3__list li::before { content: "\2013"; position: absolute; left: 0; top: 6px; color: var(--link); }
.svc3__go { margin-top: 4px; }
.svc3__fail { display: grid; gap: 14px; }
.svc3__fail .doc__lbl { margin-top: 0; }
@media (min-width: 1200px) {
  .svc3__fail { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
}

/* his six steps: the question under each name is his, so it is set as
   part of the heading rather than as our text beside it */
.ind-how .step { grid-template-columns: 64px minmax(0, 30ch) minmax(0, 1fr); }
@media (max-width: 780px) { .ind-how .step { grid-template-columns: 44px minmax(0, 1fr); } }
.step__q { display: block; margin-top: 6px; font-family: var(--body, inherit); font-weight: 400; font-size: .875rem; line-height: 1.45; letter-spacing: 0; color: var(--ink-3); }

.ind-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.ind-pager__a { display: grid; gap: 6px; align-content: start; padding: 20px 4px; background: var(--ground); transition: background .16s ease; }
.ind-pager__a:hover { background: var(--accent-wash); }
.ind-pager__a--next { text-align: right; }
.ind-pager__t { font-family: var(--display); font-weight: 600; font-size: 1.06rem; color: var(--ink); line-height: 1.3; }
.ind-pager__a:hover .ind-pager__t { color: var(--accent); }
/* an odd count leaves the last cell of a two-column grid empty — the last
   row takes the whole width instead of a grey hole beside it */
@media (min-width: 701px) { .kv > .kv__row:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- phone (2026-10-06) ----------
   The inner pages at phone width, after a read-through at 390:

     the form          16px in the fields: under that, Safari zooms the
                       page in on the field it focuses and leaves it there
     the labels        the mono labels at 10px come up to 11 — at this
                       width, in --ink-3 and spaced, 10 was a texture
     the chain         a step and its arrow broke apart at the wrap,
                       leaving "destination →" on one line and where it
                       went on the next; the steps stand one under the
                       other instead, the arrows turned down
     the contents      on a long document it stays under the header
                       as one line, with the section being read beside
                       its label, and opens over the text from there —
                       Why and How We Work run to thirty screens, and the
                       list was only ever at the top of them */
@media (max-width: 700px), (pointer: coarse) {
  .field input, .field textarea { font-size: max(16px, var(--fs-sm)); }
}
@media (max-width: 560px) {
  .field label, .kv--mono .kv__k, .facts dt, .related__k, .doc__tocd > summary { font-size: .6875rem; }
  .chain { flex-direction: column; align-items: flex-start; gap: 4px; }
  .chain i { rotate: 90deg; margin-left: 14px; line-height: 1; }
}
.doc__now { display: none; }
@media (max-width: 1099px) {
  .doc__toc {
    position: sticky; z-index: 20; top: calc(var(--head-top, 12px) + var(--head-h, 64px) + 6px);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    background: var(--ground);
  }
  /* the section's name is cut to the line rather than widening the
     column the whole document is in */
  .doc__in { grid-template-columns: minmax(0, 1fr); }
  .doc__tocd > summary { display: flex; align-items: baseline; gap: 12px; padding-right: 22px; white-space: nowrap; }
  .doc__now {
    display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--body); font-size: .8125rem; letter-spacing: 0; text-transform: none; color: var(--ink);
  }
  .doc__tocd[open] .doc__now { visibility: hidden; }
  /* open, the list hangs over the text from the line rather than
     pushing the document down under the reader */
  .doc__tocd > ol {
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: 62svh; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gutter) 12px; background: var(--ground);
    border-bottom: 1px solid var(--rule); box-shadow: 0 18px 30px -18px rgba(14, 21, 19, .22);
  }
  /* a section the list lands on clears the line it stands under too */
  .doc__sec { scroll-margin-top: calc(var(--head-top, 12px) + var(--head-h, 64px) + 60px); }
}