/* =============================================================
   HOMEPAGE COMPOSITION
   
   The problem this solves: a 720px reading column inside a 1680px
   shell leaves half the screen empty, which reads as an unfinished
   page rather than a restrained one. The fix is not to widen the
   prose — a 1600px line is unreadable — but to alternate. Prose
   sits in a measure. Everything that is not prose uses the width:
   evidence bands, grids, tables, media.
   ============================================================= */

/* The measure, centred in the shell. Used for anything read
   sentence by sentence. */
.measure-col {
  max-inline-size: 62rem;
  margin-inline: auto;
}
.measure-col .lede,
.measure-col > p { max-inline-size: 42rem; margin-inline: auto; }

/* Section headers that introduce a full-width band below them. */
.band-head {
  text-align: center;
  max-inline-size: 46rem;
  margin-inline: auto;
  margin-block-end: var(--pv-space-7);
}
.band-head .rule-accent { margin-inline: auto; }
.band-head p {
  color: var(--color-text-muted);
  font-size: var(--pv-text-lg);
  margin-block-end: 0;
}
.on-dark .band-head p { color: var(--pv-grey-300); }

/* ---------- the evidence band -------------------------------
   Four measured figures across the full width. This is the single
   most persuasive element available to this company, and it was
   previously buried in body copy on a guide page. */
.proof {
  background: var(--pv-ink-900);
  padding-block: var(--pv-space-8);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--pv-hairline-dark);
  border-block: 1px solid var(--pv-hairline-dark);
  margin-block-start: var(--pv-space-7);
}
.proof-cell {
  background: var(--pv-ink-900);
  padding: var(--pv-space-6) var(--pv-space-5);
  text-align: center;
}
.proof-engine {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.18em;
  color: var(--pv-grey-500); margin: 0 0 var(--pv-space-4);
}
.proof-move {
  display: flex; align-items: baseline; justify-content: center;
  gap: var(--pv-space-3);
}
.proof-from {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xl); color: var(--pv-grey-500);
}
.proof-arrow { color: var(--color-primary); font-size: var(--pv-text-lg); }
.proof-to {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1;
  letter-spacing: -0.02em; color: var(--pv-white);
}
.proof-note {
  text-align: center; color: var(--pv-grey-500);
  font-size: var(--pv-text-sm); margin-block-start: var(--pv-space-5);
}
.proof-note a { color: var(--pv-amber-400); }

/* ---------- the split band ----------------------------------
   Statement on one side, evidence table on the other. Full width,
   no dead space, and the table earns the room it takes. */
.split-band { display: grid; grid-template-columns: 5fr 7fr; gap: var(--pv-space-8); align-items: start; }
.split-band > div > p:last-child { margin-block-end: 0; }

/* ---------- service pillars ---------------------------------- */
.pillars { margin-block-start: var(--pv-space-7); }

/* ---------- guides preview ----------------------------------- */
.shelf-preview {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--pv-space-7); margin-block-start: var(--pv-space-7);
}
.shelf-preview .book { grid-template-columns: 120px 1fr; }

/* ---------- named contact, as a person not a form -------------
   Borrowed from the best Swiss and Greek B2B sites: a page ends
   with somebody's name, face and direct line, not a generic box. */
.contact-person {
  display: grid; grid-template-columns: 180px 1fr auto;
  gap: var(--pv-space-7); align-items: center;
  border: 1px solid var(--color-border);
  padding: var(--pv-space-7);
  max-inline-size: 62rem; margin-inline: auto;
}
.contact-person img { inline-size: 100%; block-size: auto; display: block; }
.contact-person h3 { margin: 0 0 var(--pv-space-1); }
.contact-person .role {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.16em;
  color: var(--color-primary); margin: 0 0 var(--pv-space-4);
}
.contact-person p { color: var(--color-text-muted); margin-block-end: var(--pv-space-4); }
.contact-lines { display: flex; flex-direction: column; gap: var(--pv-space-2); }
.contact-lines a { font-size: var(--pv-text-sm); }

/* ---------- related links grid, full width -------------------- */
/* The hairline rules are the container's own background showing through the
   1px gaps, so every track must be covered by a cell. A hub with fewer than
   three children therefore sets --link-cols to the number it has; leaving it
   at three would paint the empty tracks solid border-grey. */
.link-grid {
  display: grid; grid-template-columns: repeat(var(--link-cols, 3), 1fr);
  gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border);
  margin-block-start: var(--pv-space-7);
}
.link-cell {
  background: var(--color-surface);
  padding: var(--pv-space-6);
  text-decoration: none; color: inherit;
  transition: background var(--pv-dur-fast) var(--pv-ease-out);
}
.link-cell:hover { background: var(--color-bg-alt); }
.link-cell h3 {
  font-size: var(--pv-text-lg); margin: 0 0 var(--pv-space-2);
  transition: color var(--pv-dur-fast) var(--pv-ease-out);
}
.link-cell:hover h3 { color: var(--color-primary); }
.link-cell p { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin: 0; }

@media (max-width: 1100px) {
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .link-grid, .shelf-preview { grid-template-columns: repeat(min(var(--link-cols, 2), 2), 1fr); }
}
@media (max-width: 900px) {
  .split-band { grid-template-columns: 1fr; gap: var(--pv-space-6); }
  .contact-person { grid-template-columns: 1fr; text-align: start; }
  .contact-person img { max-inline-size: 160px; }
}
@media (max-width: 620px) {
  .proof-grid, .link-grid, .shelf-preview { grid-template-columns: 1fr; }
  .link-grid { --link-cols: 1; }
}

/* =============================================================
   SERVICE / PILLAR PAGE COMPOSITION
   Same system as the homepage: constrained prose beside a sticky
   rail, then full-width bands. The rail is what stops the right
   side of the page from being empty on a wide screen.
   ============================================================= */

.page-head { padding-block: var(--pv-space-8) var(--pv-space-5); }
.page-head h1 { max-inline-size: 22ch; }
.page-head .lede { max-inline-size: 60ch; margin-block-end: 0; }

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--pv-space-9);
  align-items: start;
}
.page-main { max-inline-size: 68ch; }
.page-main h2 { margin-block-start: var(--pv-space-8); scroll-margin-block-start: calc(var(--nav-height) + var(--pv-space-5)); }
.page-main h2:first-child { margin-block-start: 0; }
.page-main .pull { margin-block: var(--pv-space-6) var(--pv-space-7); }

.steps { padding-inline-start: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative; padding-inline-start: 3.25rem;
  margin-block-end: var(--pv-space-4); counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: .1em;
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-sm); letter-spacing: .08em;
  color: var(--color-primary);
}

/* ---------- sticky rail ---------- */
.page-rail {
  position: sticky; inset-block-start: calc(var(--nav-height) + var(--pv-space-6));
  display: flex; flex-direction: column; gap: var(--pv-space-6);
}
.toc, .rail-block, .rail-cta {
  border: 1px solid var(--color-border); padding: var(--pv-space-5);
}
.toc-h {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: .18em;
  color: var(--color-text-muted); margin: 0 0 var(--pv-space-3);
}
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; margin-block-end: var(--pv-space-2); }
.toc a {
  display: flex; gap: var(--pv-space-3); align-items: baseline;
  color: var(--color-text); text-decoration: none; font-size: var(--pv-text-sm);
}
.toc a::before {
  content: counter(toc); font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); color: var(--color-primary); min-inline-size: 1.2em;
}
.toc a:hover { color: var(--color-primary); }
.rail-cta { border-block-start: 3px solid var(--color-primary); background: var(--color-bg-alt); }
.rail-cta p { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin-block-end: var(--pv-space-4); }
.rail-cta .btn { inline-size: 100%; }

/* ---------- fit band ---------- */
.fit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--pv-hairline-dark); border: 1px solid var(--pv-hairline-dark);
  max-inline-size: 64rem; margin-inline: auto;
}
.fit-col { background: var(--pv-ink-900); padding: var(--pv-space-7); }
.fit-label {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: .2em;
  margin: 0 0 var(--pv-space-5);
}
.fit-yes { color: var(--pv-amber-400); }
.fit-no { color: var(--pv-grey-500); }
.fit-col .blade-list li { color: var(--pv-grey-300); }

@media (max-width: 1100px) {
  .page-grid { grid-template-columns: 1fr; gap: var(--pv-space-7); }
  .page-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .page-rail > * { flex: 1 1 260px; }
  .toc { display: none; }
}
@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }

.link-grid h2 { font-size: var(--pv-text-lg); margin: 0 0 var(--pv-space-2); transition: color var(--pv-dur-fast) var(--pv-ease-out); }
.link-cell:hover h2 { color: var(--color-primary); }
.hub-empty {
  border: 1px solid var(--color-border); border-inline-start: 3px solid var(--color-accent);
  padding: var(--pv-space-6); max-inline-size: 48rem;
}
.hub-empty p { color: var(--color-text-muted); margin-block-end: var(--pv-space-4); }

/* ---------- html sitemap ---------- */
.sitemap-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pv-space-8); }
.sitemap-cols h2 { font-size: var(--pv-text-xl); margin-block-end: var(--pv-space-4); }
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list li { padding-block: var(--pv-space-2); border-block-end: 1px solid var(--color-border); display: flex; flex-direction: column; }
.sitemap-list a { text-decoration: none; color: var(--color-text); font-weight: 600; font-size: var(--pv-text-sm); }
.sitemap-list a:hover { color: var(--color-primary); }
.sitemap-list .muted, .sitemap-cols .muted { color: var(--color-text-muted); font-size: var(--pv-text-xs); font-weight: 400; }
@media (max-width: 900px) { .sitemap-cols { grid-template-columns: 1fr; } }