:root {
  --ink: #142221;
  --ink-soft: #31423f;
  --paper: #f4f1e9;
  --paper-bright: #fffdf7;
  --teal: #0b6660;
  --teal-dark: #073f3c;
  --lime: #cce66a;
  --line: rgba(20, 34, 33, 0.18);
  --max: 1180px;
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: .7rem 1rem; background: var(--ink); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
/* Focus ring: lime measured 1.23:1 against the paper ground, which is invisible.
   Dark ring on light sections (14.5:1), lime only where the ground is dark (11.8:1). */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.section-dark a:focus-visible, .cta-band a:focus-visible, .signal-card a:focus-visible,
.credential-card a:focus-visible, .quality-bar a:focus-visible, .site-footer a:focus-visible { outline-color: var(--lime); }

.site-header { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; max-width: 340px; font-size: .91rem; font-weight: 750; line-height: 1.2; text-decoration: none; letter-spacing: -.01em; }
.brand-mark { display: grid; place-items: center; width: 2.875rem; height: 2.875rem; flex: 0 0 2.875rem; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 0.84rem; letter-spacing: .08em; }
nav { display: flex; align-items: center; gap: 26px; }
nav a { padding: .3rem 0; color: var(--ink-soft); font-size: .92rem; font-weight: 680; text-decoration: none; border-bottom: 2px solid transparent; }
nav a:hover, nav a[aria-current="page"] { color: var(--ink); border-color: var(--teal); }

.hero, .contact-hero { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: clamp(40px, 7vw, 96px); align-items: center; padding: clamp(72px, 10vw, 138px) 0; }
.hero-copy { max-width: 760px; }
.eyebrow, .card-label { margin: 0 0 18px; color: var(--teal); font-size: 0.84rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3 { margin-top: 0; line-height: 1.08; letter-spacing: -.035em; }
h1 { max-width: 900px; margin-bottom: 30px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-1); font-weight: 500; }
h2 { margin-bottom: 24px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-2); font-weight: 500; }
h3 { margin-bottom: 16px; font-size: 1.22rem; }
p { margin-top: 0; }
.lede { max-width: 760px; margin-bottom: 34px; color: var(--ink-soft); font-size: var(--fs-3); line-height: 1.65; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: .8rem 1.15rem; border: 1px solid var(--ink); border-radius: 999px; font-size: .92rem; font-weight: 760; text-decoration: none; }
.button-primary { background: var(--ink); color: white; }
.button-primary:hover { background: var(--teal-dark); }
.button-secondary:hover { background: var(--paper-bright); }
.button-light { border-color: white; background: white; color: var(--ink); }
.button-light:hover { background: var(--lime); border-color: var(--lime); }

.signal-card, .contact-card { padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); background: var(--teal-dark); color: white; box-shadow: 18px 18px 0 var(--lime); }
.signal-card .card-label, .contact-card .card-label { color: var(--lime); }
.principle-list { margin: 0; padding: 0; list-style: none; }
.principle-list li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.2); font-weight: 680; }
.principle-list span { color: var(--lime); font-size: 0.84rem; letter-spacing: .1em; }

.section { padding: clamp(76px, 10vw, 132px) max(20px, calc((100% - var(--max)) / 2)); }
.section-dark { background: var(--ink); color: white; }
.section-dark .eyebrow, .section-dark .card-number { color: var(--lime); }
.section-heading { display: grid; grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-bottom: 56px; }
.section-heading h2 { max-width: 850px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card, .plain-card { min-height: 280px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); }
.service-card p:last-child, .plain-card p:last-child { color: var(--ink-soft); }
/* These two are dark-ground components by origin: their border and their closing
   paragraph were hardcoded white, so putting one on paper produced 1.13:1. The white
   values now belong to the dark ground rather than to the component, which is the same
   correction already applied to .estimate-note and .method-map. */
.section-dark .service-card, .section-dark .plain-card { border-color: rgba(255,255,255,.19); }
.section-dark .service-card p:last-child, .section-dark .plain-card p:last-child { color: rgba(255,255,255,.72); }
.card-number { margin-bottom: 76px; color: var(--teal); font-size: 0.84rem; font-weight: 800; letter-spacing: .16em; }
.plain-card { min-height: 210px; }

.split-section { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(0, 1fr); gap: clamp(50px, 9vw, 130px); }
.prose-stack { max-width: 720px; color: var(--ink-soft); font-size: 1.12rem; }
.prose-stack p { margin-bottom: 22px; }
.text-link { display: inline-block; min-height: 26.7px; margin-top: 14px; color: var(--teal-dark); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cta-band { width: min(var(--max), calc(100% - 40px)); margin: 30px auto 80px; padding: clamp(36px, 6vw, 70px); display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: var(--radius); background: var(--teal); color: white; }
.cta-band .eyebrow { color: var(--lime); }
.cta-band h2 { max-width: 720px; margin: 0; font-size: var(--fs-4); }

.page-hero { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: clamp(72px, 10vw, 128px) 0 clamp(58px, 8vw, 100px); }
.page-hero h1 { max-width: 22ch; font-size: var(--fs-5); line-height: 1.06; text-wrap: balance; }
.service-list { padding-top: 20px; }
.service-row { display: grid; grid-template-columns: 110px 1fr; gap: 28px; padding: 44px 0; border-top: 1px solid var(--line); }
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row .card-number { margin: 6px 0 0; }
.service-row h2 { font-size: var(--fs-6); }
.service-row div > p { max-width: 74ch; }
.service-row p:last-child { max-width: 74ch; color: var(--ink-soft); font-size: 1.08rem; }
.contact-hero h1 { max-width: 22ch; font-size: var(--fs-7); line-height: 1.06; text-wrap: balance; }
.contact-email { display: inline-block; margin-bottom: 26px; color: var(--lime); font-size: var(--fs-8); font-weight: 800; text-underline-offset: 5px; }
.contact-card p:last-child { color: rgba(255,255,255,.75); }

.site-footer { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; min-height: 100px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.84rem; }
.site-footer p { margin: 0; }

@media (max-width: 820px) {
  .site-header { align-items: flex-start; padding: 22px 0; }
  .brand { max-width: 220px; }
  nav { flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; }
  .hero, .contact-hero, .split-section { grid-template-columns: 1fr; }
  .signal-card, .contact-card { max-width: 620px; }
  .section-heading { grid-template-columns: 1fr; gap: 12px; }
  .card-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 220px; }
  .card-number { margin-bottom: 42px; }
  .cta-band { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .site-header { display: block; }
  .brand { max-width: none; }
  nav { margin-top: 22px; justify-content: flex-start; }
  .hero, .contact-hero, .page-hero { width: min(100% - 28px, var(--max)); }
  .hero, .contact-hero { padding-top: 62px; }
  h1 { font-size: 4.4rem; }
  .service-row { grid-template-columns: 1fr; gap: 8px; }
  .site-footer { padding: 26px 0; align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* --- Expansion additions (systems flow, capability tags, system blocks) --- */

.flow-strip { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.flow-step { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-bright); }
.flow-num { margin: 0 0 30px; color: var(--teal); font-size: 0.84rem; font-weight: 800; letter-spacing: .16em; }
.flow-step h3 { margin-bottom: 10px; font-size: 1.05rem; }
.flow-step p:last-child { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.55; }

.card-grid-five { grid-template-columns: repeat(5, 1fr); }
.card-grid-five .plain-card { min-height: 190px; padding: 26px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; padding: 0; list-style: none; }
.tag { display: inline-block; padding: .34rem .85rem; border: 1px solid transparent; border-radius: 999px; background: rgba(20, 34, 33, .06); color: var(--teal-dark); font-size: 0.84rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
/* A bordered pill sitting under two real buttons reads as a button. Labels lost the
   outline and took a fill; only the pills that actually navigate keep the outline, and
   they gain a hover so the affordance is earned rather than implied. */
.tag-link { border-color: var(--line); background: transparent; text-decoration: none; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.tag-link:hover { border-color: var(--ink); background: var(--ink); color: var(--paper-bright); }

.system-block h2 { margin-bottom: 26px; }
.system-block .mini-label { margin: 26px 0 8px; color: var(--teal); font-size: 0.84rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.system-block .mini-label:first-of-type { margin-top: 0; }
.system-block div p { max-width: 760px; color: var(--ink-soft); font-size: 1.05rem; }
.system-block div p.outcome-line { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.24rem; line-height: 1.45; }
.system-block div p.continuity-note { max-width: 74ch; margin-top: 28px; padding: 16px 20px; border-left: 3px solid var(--teal); border-radius: 0 12px 12px 0; background: var(--paper-bright); font-size: .98rem; }
.continuity-note strong { color: var(--teal-dark); }

.prose-on-dark { color: rgba(255, 255, 255, .78); }
.section-footnote { margin: 44px 0 0; }
.text-link-light { color: var(--lime); }

@media (max-width: 1100px) {
  .flow-strip { grid-template-columns: 1fr; }
  .card-grid-five { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .card-grid-five { grid-template-columns: 1fr; }
  .card-grid-five .plain-card { min-height: 0; }
  .system-block .mini-label:first-of-type { margin-top: 4px; }
}

/* --- Rebalance additions (cross-sector sections, proof blocks, six-step flows) --- */

.section-lede { max-width: 780px; margin: -26px 0 48px; color: var(--ink-soft); font-size: 1.12rem; line-height: 1.65; }
.flow-strip.flow-six { grid-template-columns: repeat(6, 1fr); }
.card-grid-two { grid-template-columns: repeat(2, 1fr); }
.proof-card { min-height: 0; }
.proof-card h3 { margin-bottom: 18px; }
.proof-card p { margin-bottom: 12px; font-size: .96rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.proof-card p:last-child { margin-bottom: 0; color: rgba(255, 255, 255, .82); }
.proof-card strong { color: var(--lime); font-weight: 750; }
.system-block .block-title { margin-bottom: 26px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-9); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.service-row p.continuity-note { margin-top: 18px; max-width: 74ch; padding: 16px 20px; border-left: 3px solid var(--teal); border-radius: 0 12px 12px 0; background: var(--paper-bright); color: var(--ink-soft); font-size: .98rem; }
.service-row p.continuity-note strong { color: var(--teal-dark); }
.hero-copy .tag-row { margin-top: 40px; }

@media (max-width: 1100px) {
  .flow-strip.flow-six { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .card-grid-two { grid-template-columns: 1fr; }
}

/* Evidence and proof additions */
.stat-band { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 0 0 clamp(48px, 6vw, 72px); }
.stat-band ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-band li { padding: 26px 0; }
.stat-band .stat-figure { display: block; margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-10); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.stat-band .stat-label { display: block; color: var(--ink-soft); font-size: 0.84rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.case-study { padding: clamp(56px, 7vw, 88px) 0; border-top: 1px solid var(--line); }
.case-study:first-of-type { border-top: 0; }
.case-study .case-kicker { margin: 0 0 14px; color: var(--teal); font-size: 0.84rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.case-study h2 { max-width: 20ch; margin: 0 0 26px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-11); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; }
.case-study p, .case-study li { max-width: 760px; color: var(--ink-soft); font-size: 1.08rem; }
.case-study .case-lede { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-12); line-height: 1.45; }
.method-map { margin: 30px 0 0; padding: 24px 26px; border-left: 3px solid var(--teal); border-radius: 0 12px 12px 0; background: var(--paper-bright); }
.method-map p.mini-label { margin: 0 0 12px; color: var(--teal); font-size: 0.84rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.method-map ol { margin: 0; padding-left: 1.2rem; }
.method-map li { max-width: 74ch; margin-bottom: 8px; font-size: .99rem; }
.method-map li:last-child { margin-bottom: 0; }
.evidence-table { width: 100%; margin: 30px 0 0; border-collapse: collapse; font-size: .95rem; }
.evidence-table caption { margin-bottom: 12px; color: var(--ink-soft); font-size: .9rem; text-align: left; }
.evidence-table th, .evidence-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.evidence-table th { color: var(--teal-dark); font-size: 0.84rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.evidence-table td { color: var(--ink-soft); }
.estimate-note { margin-top: 26px; padding: 14px 18px; border: 1px dashed var(--line); border-radius: 12px; background: var(--paper-bright); font-size: .95rem; }
.estimate-note strong { color: var(--teal-dark); }
.credential-card { padding: clamp(28px, 4vw, 48px); border-radius: var(--radius); background: var(--teal-dark); color: white; box-shadow: 18px 18px 0 var(--lime); }
.credential-card h2 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-13); font-weight: 500; letter-spacing: -.03em; }
.credential-card .credential-role { margin: 0 0 24px; color: var(--lime); font-size: 0.84rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.credential-card p { max-width: 640px; color: rgba(255, 255, 255, .84); font-size: 1.03rem; }
.credential-card .credential-contact { margin-bottom: 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: .95rem; }
.credential-card a { color: var(--lime); }
.quality-bar { margin: 0; padding: 26px 30px; border-left: 3px solid var(--lime); background: var(--ink); color: white; border-radius: 0 16px 16px 0; }
.quality-bar .bar-words { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-14); line-height: 1.4; color: white; }
.quality-bar p { color: rgba(255, 255, 255, .82); font-size: 1rem; }
.quality-bar p:last-child { margin-bottom: 0; }
.commitment-list { margin: 0; padding: 0; list-style: none; }
.commitment-list li { max-width: 74ch; padding: 18px 0; border-top: 1px solid var(--line); font-size: 1.04rem; color: var(--ink-soft); }
.commitment-list li:last-child { border-bottom: 1px solid var(--line); }
.commitment-list strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 0.84rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .stat-band ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stat-band ul { grid-template-columns: 1fr; }
  .stat-band li { padding: 18px 0; border-top: 1px solid var(--line); }
  .stat-band li:first-child { border-top: 0; }
  .evidence-table th, .evidence-table td { padding-right: 8px; font-size: .88rem; }
}

/* Two practices, one method: paired presentation */
.practice-band { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 0 0 clamp(48px, 6vw, 80px); }
.practice-spine { max-width: 40ch; margin: 0 0 40px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-15); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; color: var(--ink); }
.practice-spine span { color: var(--teal); }
.practice-cols { --practice-gap: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--practice-gap); border-top: 1px solid var(--line); }
.practice-col { padding-top: 28px; }
.practice-col + .practice-col { padding-left: clamp(28px, 5vw, 64px); border-left: 1px solid var(--line); }
.practice-label { margin: 0 0 6px; color: var(--teal); font-size: 0.84rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.practice-years { margin: 0 0 26px; color: var(--ink-soft); font-size: .92rem; }
.practice-col ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.practice-col li { min-width: 0; }
.practice-col .stat-figure { display: block; margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-16); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.practice-col .stat-label { display: block; color: var(--ink-soft); font-size: .88rem; line-height: 1.4; }

/* The convergence. Both practice columns resolve onto one statement, so the
   spine sits BELOW the columns as their conclusion rather than above them as a
   heading. Everything here is the RESTING layout: with no JavaScript, under
   prefers-reduced-motion, or in a print context this reads as two bodies of
   work above the one sentence they share, which is the argument. Motion only
   adds the arriving. */
.practice-merge { --practice-gap: clamp(28px, 5vw, 64px); position: relative; height: clamp(44px, 5vw, 72px); }
/* Drawn as pseudo-elements, not borders. .practice-col already swaps
   border-left for border-top at 820px and a bordered connector would collide
   with that rule. */
.practice-merge::before {
  content: ""; position: absolute; top: 0; height: 50%;
  left: calc(25% - var(--practice-gap) / 4);
  right: calc(25% - var(--practice-gap) / 4);
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.practice-merge::after {
  content: ""; position: absolute; top: 50%; left: 50%; margin-left: -.5px;
  width: 1px; height: 50%; background: var(--line);
}
.practice-vertex { max-width: 46ch; margin: 0 auto; text-align: center; }
.practice-vertex .practice-spine { max-width: none; margin: 0; }

@media (max-width: 820px) {
  /* Stacked, there is no left and right to converge from, so the bracket
     becomes a single stem and the columns arrive in reading order instead.
     Same argument, delivered as sequence rather than as geometry. */
  .practice-merge { height: clamp(32px, 6vw, 48px); }
  .practice-merge::before { left: 50%; right: 50%; border-right: 0; border-bottom: 0; }
  /* stacked: the legs would have nothing to point at */
  .practice-merge::after { display: none; }
}
.proof-group { margin-top: clamp(40px, 5vw, 64px); }
.proof-group:first-of-type { margin-top: 0; }
.proof-group-label { display: flex; align-items: baseline; gap: 14px; margin: 0 0 8px; }
.proof-group-label .pg-tag { color: var(--lime); font-size: 0.84rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.proof-group-label .pg-rule { flex: 1; height: 1px; background: rgba(255, 255, 255, .22); }
.proof-group h3.pg-title { margin: 0 0 26px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-17); font-weight: 500; letter-spacing: -.03em; color: white; }

@media (max-width: 820px) {
  .practice-cols { grid-template-columns: 1fr; }
  .practice-col + .practice-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .practice-col ul { grid-template-columns: 1fr; gap: 16px; }
}

/* The through-line: brief / saw / result */
.insight-list { margin: 0; padding: 0; list-style: none; }
.insight-list li { padding: 34px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.insight-list li:last-child { border-bottom: 1px solid var(--line); }
.insight-brief { margin: 0; }
.insight-brief .insight-tag { display: block; margin-bottom: 10px; color: var(--teal); font-size: 0.84rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.insight-brief .insight-said { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
.insight-body { margin: 0; }
.insight-saw { margin: 0 0 14px; color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-18); line-height: 1.42; }
.insight-result { margin: 0; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
.insight-result strong { color: var(--teal-dark); font-weight: 750; }

@media (max-width: 820px) {
  .insight-list li { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
}

/* Hero headline: two sentences need a tighter scale and character-based wrapping,
   otherwise a wider viewport produces MORE lines, not fewer. */
.hero h1 { max-width: 24ch; font-size: var(--fs-19); line-height: 1.06; text-wrap: balance; }

/* Mobile header: seven nav items were consuming a quarter of a phone viewport.
   Tighter type and spacing keeps the whole nav to two compact rows. */
@media (max-width: 820px) {
  .site-header { min-height: 0; padding: 18px 0; }
  nav { gap: 8px 16px; }
  nav a { font-size: .86rem; }
}
@media (max-width: 560px) {
  .brand { font-size: .84rem; }
  .brand-mark { width: 2.375rem; height: 2.375rem; flex: 0 0 2.375rem; }
  nav { margin-top: 16px; gap: 6px 14px; }
  nav a { font-size: 0.84rem; }
}

/* Provenance note under the figures */
.band-note { margin: 20px 0 0; color: var(--ink-soft); font-size: .9rem; font-style: italic; }


/* ---------------------------------------------------------------------------
   Accessibility pass, 2026-08-26. Measured, not eyeballed.

   A ground owns its ink. Three elements measured between 1.02:1 and 1.55:1
   because a paper-ground class was reused on a dark ground and kept its dark
   ink: a section lede on systems, and two case-study links. Fixing the ground
   once beats fixing each element and remembering to next time.
   --------------------------------------------------------------------------- */
.section-dark .section-lede,
.section-dark .lede,
.section-dark .band-note { color: rgba(255, 255, 255, .82); }
.section-dark .text-link,
.section-dark .mini-label,
.section-dark .tag { color: var(--lime); }
.section-dark .tag { background: rgba(255, 255, 255, .1); border-color: transparent; }
.section-dark .tag-link { background: transparent; border-color: rgba(255, 255, 255, .3); }
.section-dark .tag-link:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }

/* A light island inside a dark ground states its own ink rather than inheriting
   white onto cream, which is how a whole note measured 1.02:1. Twice: the estimate
   note, then the method map, when one was first placed on a dark section. Any future
   component that paints its own light fill belongs in this list on the day it is
   written, not on the day it is measured. */
.estimate-note { color: var(--ink); }
.estimate-note a { color: var(--teal-dark); }
.method-map { color: var(--ink); }
.method-map li, .method-map strong { color: var(--ink); }
.method-map a { color: var(--teal-dark); }

/* Tap targets. Nav links measured 33px and the brand 38px against the 44pt
   mobile minimum, on every page. The min-height creates the height, and the row
   gap comes down so the header does not grow. */
@media (max-width: 820px) {
  nav { gap: 2px 18px; }
  nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
  .brand { min-height: 44px; }
  /* Standalone call-to-action links measured 24 to 29px. Links sitting inside a
     sentence are exempt: enlarging those would break the line box around them. */
  .text-link, .contact-email { min-height: 44px; display: inline-flex; align-items: center; }
}


/* Two named practices, one vocabulary. The services page ran as six undifferentiated
   rows, so a land client and a software client had to sort the list themselves.
   Same device as the proof page's Part one / Part two, on a paper ground. */
.lane-group + .lane-group { margin-top: clamp(56px, 7vw, 88px); }
.lane-heading { display: flex; align-items: baseline; gap: 14px; margin: 0 0 10px; }
.lane-tag { color: var(--teal); font-size: 0.84rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; }
.lane-rule { flex: 1; height: 1px; background: var(--line); }
.lane-title { margin: 0 0 14px; font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-20); font-weight: 500; letter-spacing: -.03em; }
.lane-note { max-width: 74ch; margin: 0 0 10px; color: var(--ink-soft); font-size: 1.04rem; }
.lane-both { max-width: 78ch; margin: clamp(48px, 6vw, 72px) 0 0; padding: 20px 24px; border-left: 3px solid var(--teal);
  border-radius: 0 14px 14px 0; background: var(--paper-bright); }


/* The career record. The site had no roles, no dates and no education anywhere, which
   is the first thing an employer looks for and the thing that lets them reconcile this
   site against a resume. Dates in the left rail, same rhythm as the service rows. */
.record-list { margin: 0; padding: 0; list-style: none; }
.record-list li { display: grid; grid-template-columns: 150px 1fr; gap: 28px;
  padding: 34px 0; border-top: 1px solid var(--line); }
.record-list li:last-child { border-bottom: 1px solid var(--line); }
.record-when { margin: 6px 0 0; color: var(--teal); font-size: 0.84rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; }
.record-list h3 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-21); font-weight: 500; letter-spacing: -.02em; }
.record-list p:not(.record-when) { max-width: 74ch; margin: 0; color: var(--ink-soft); font-size: 1.02rem; }
@media (max-width: 820px) {
  .record-list li { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
  .record-when { margin: 0; }
}


/* The domain pills are navigation on a phone as much as on a desktop. */
@media (max-width: 820px) {
  .tag-link { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --- Motion -----------------------------------------------------------
   Every rule below is scoped to .js-motion, which motion.js puts on <html>
   only after it has found something to animate and confirmed the reader has
   not asked for less of it. Without that class this whole block is inert and
   the page renders as it always has. Content is never hidden by CSS alone. */

.js-motion [data-r] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .62s cubic-bezier(.22, .68, .36, 1),
              transform .62s cubic-bezier(.22, .68, .36, 1);
}
.js-motion [data-r].is-in { opacity: 1; transform: none; }

/* A revealed element must never sit behind a focus ring or a sticky header
   in a half-transformed state, so focus inside one settles it immediately. */
.js-motion [data-r]:focus-within { opacity: 1; transform: none; transition-delay: 0ms; }

/* The four-step method reads as a sequence, so its rail draws down as the
   block arrives rather than being there before the steps are. */
.js-motion .method-map { position: relative; border-left-color: transparent; }
.js-motion .method-map::before {
  content: ""; position: absolute; left: -3px; top: 0; width: 3px; height: 100%;
  background: var(--teal); transform: scaleY(0); transform-origin: top;
  transition: transform .7s cubic-bezier(.22, .68, .36, 1) .1s;
}
.js-motion .method-map.is-in::before { transform: scaleY(1); }

/* The two practices arrive inward, and the connector draws after them.
   `translate`, NOT `transform`. These columns are also reveal targets, and
   `.js-motion [data-r].is-in` sets `transform: none` at higher specificity,
   so a convergence written as transform: translateX() would silently do
   nothing. That is KIE-208, and this is exactly the shape of feature that
   hits it. The standalone property composes with the reveal instead of
   fighting it. */
.js-motion .practice-cols > .practice-col {
  translate: -20px 0;
  transition: translate .72s cubic-bezier(.22, .68, .36, 1);
}
.js-motion .practice-cols > .practice-col + .practice-col { translate: 20px 0; }
.js-motion .practice-cols > .practice-col.is-in { translate: 0 0; }

.js-motion .practice-merge::before,
.js-motion .practice-merge::after {
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s cubic-bezier(.22, .68, .36, 1);
}
.js-motion .practice-merge::before { transition-delay: .18s; }
.js-motion .practice-merge::after { transition-delay: .42s; }
.js-motion .practice-merge.is-in::before,
.js-motion .practice-merge.is-in::after { transform: scaleY(1); }

@media (max-width: 820px) {
  /* Stacked: the arrival is vertical, which the reveal already does. */
  .js-motion .practice-cols > .practice-col,
  .js-motion .practice-cols > .practice-col + .practice-col { translate: 0 0; }
}

/* Reading position. Two pixels, brand teal, and it is decorative: it carries
   aria-hidden and no information that is not already in the scrollbar. */
.read-rail {
  position: fixed; top: 0; left: 0; z-index: 90;
  width: 100%; height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: left;
  will-change: transform; pointer-events: none;
}

/* The header is a centred column, so making it sticky left the page scrolling
   visibly past it on both sides. This paints the bar full-bleed behind the
   header's own content without touching the markup on fourteen pages. It is
   present at rest too, where paper on paper is invisible, so there is no
   uncovered moment between scroll position 0 and the scrolled state. */
/* Sticky only where the header stays one compact row. Measured: it is 96px at
   900px and above, 127px from 640px, and 187px at 390px, where the nav has
   wrapped to two lines. Pinning 187px to the top of an 844px phone spends 22%
   of the screen on navigation for the whole scroll, which is a bad trade for a
   site people are here to read. */
.site-header { z-index: 80; }
@media (min-width: 900px) { .site-header { position: sticky; top: 0; } }
.site-header::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: -1px; left: 50%; transform: translateX(-50%);
  width: 100vw; background: var(--paper);
  transition: box-shadow .3s ease;
}
.site-header.is-scrolled::before { box-shadow: 0 10px 24px -20px rgba(20, 34, 33, .55); }

/* An anchor jump must not land under the sticky bar. */
:target, #main { scroll-margin-top: 24px; }
@media (min-width: 900px) { :target, #main { scroll-margin-top: 112px; } }

/* Hover: a lift small enough to read as responsiveness rather than as a card
   that moves. Guarded to pointers that actually hover, so a touch device does
   not get a stuck hover state after a tap. */
/* These lifts use `translate`, not `transform`, and that is deliberate. Most of
   these cards are also reveal targets, and `.js-motion [data-r].is-in` sets
   `transform: none` at a higher specificity than `.flow-step:hover`, so a hover
   written as `transform: translateY(-2px)` silently lost every time. The shadow
   appeared and the card did not move. `translate` is its own property, so the
   two compose instead of competing and no specificity race is needed. */
@media (hover: hover) {
  .service-card, .plain-card, .flow-step, .signal-card, .credential-card, .system-block {
    transition: translate .28s cubic-bezier(.22, .68, .36, 1), box-shadow .28s ease, border-color .28s ease;
  }
  .service-card:hover, .plain-card:hover, .flow-step:hover,
  .signal-card:hover, .credential-card:hover, .system-block:hover {
    translate: 0 -2px;
    box-shadow: 0 18px 34px -26px rgba(20, 34, 33, .55);
  }
  .text-link span[aria-hidden] { display: inline-block; transition: translate .26s cubic-bezier(.22, .68, .36, 1); }
  .text-link:hover span[aria-hidden] { translate: 4px 0; }
  .button { transition: translate .2s cubic-bezier(.22, .68, .36, 1), box-shadow .2s ease, background .2s ease, color .2s ease; }
  .button:hover { translate: 0 -1px; }
  nav a { transition: color .2s ease, border-color .2s ease; }
}

/* The global reduce block above neutralises durations. This removes the
   mechanisms outright, so nothing is left mid-transform at 0.01ms. */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-r] { opacity: 1 !important; transform: none !important; }
  /* `translate` is a separate property from `transform` and the reset above
     does not reach it. Without this line a reader who asked for less motion
     would be left holding the columns 20px off their resting position. */
  .js-motion .practice-cols > .practice-col,
  .js-motion .practice-cols > .practice-col + .practice-col { translate: none !important; }
  .js-motion .practice-merge::before,
  .js-motion .practice-merge::after { transform: none !important; transition: none !important; }
  .js-motion .method-map { border-left-color: var(--teal); }
  .js-motion .method-map::before { display: none; }
  .read-rail { display: none; }
  .site-header { position: static; }
}

/* Uppercase kickers carry .16em of tracking, which reads well across a desktop
   column and turns into three stacked lines on a 390px screen. Measured: the
   home page kicker is 3 lines at 390px and drops to 2 at .09em, at the same
   type size. Tracking is the thing to spend here, not size -- size is pinned by
   the accessible floor. */
@media (max-width: 640px) {
  .eyebrow, .card-label, .mini-label, .practice-label, .case-kicker, .lane-tag,
  .proof-group-label { letter-spacing: .09em; }
}

/* Delivered-work rows: put the link on its own line, always.
   `.text-link` carries `margin-top: 14px`, which is right for a link that
   already sits on its own line and wrong when it lands inline at the end of a
   sentence -- there it adds leading to that one line and nothing else, so rows
   sat unevenly depending only on where the sentence happened to wrap. Four of
   the six looked broken and two looked fine, for no reason a reader could see.
   Block display makes the wrap point irrelevant. */
.commitment-list .text-link { display: block; width: fit-content; }

/* --- Type scale, rem only ---------------------------------------------
   Every heading used to be clamp(MINrem, calc(Arem + Bvw), MAXrem). A `vw`
   term is an ABSOLUTE length, so it cannot respond to the root font size:
   when a reader doubles their browser's default text size the fluid middle
   term does not move and the value scales by less than two. Measured before
   this change, at 1440px: h1 reached 1.37x and .lede 1.76x, against the 2x
   the accessibility guidance asks for.

   Smooth viewport fluidity and exact 2x text scaling cannot both hold, so
   the fluidity is what gives. These are the sizes the old curve produced,
   sampled at the MIDPOINT of each range below and pinned there. Fitting the
   top of each range instead put the largest error at a breakpoint edge, so
   midpoints it is. Type steps between these widths rather than sliding, and
   every value is rem, so all of it doubles with the reader's setting. */
:root {
  --fs-1: 3.492rem;
  --fs-2: 2.25rem;
  --fs-3: 1.1rem;
  --fs-4: 2rem;
  --fs-5: 2.5rem;
  --fs-6: 2rem;
  --fs-7: 2.5rem;
  --fs-8: 1.05rem;
  --fs-9: 1.9rem;
  --fs-10: 2.1rem;
  --fs-11: 2.134rem;
  --fs-12: 1.24rem;
  --fs-13: 1.9rem;
  --fs-14: 1.3rem;
  --fs-15: 1.5rem;
  --fs-16: 1.9rem;
  --fs-17: 1.5rem;
  --fs-18: 1.14rem;
  --fs-19: 2.5rem;
  --fs-20: 1.7rem;
  --fs-21: 1.25rem;
}
@media (min-width: 560px) {
  :root {
    --fs-1: 4.005rem;
    --fs-2: 2.447rem;
    --fs-3: 1.113rem;
    --fs-4: 2.225rem;
    --fs-5: 2.781rem;
    --fs-6: 2.225rem;
    --fs-7: 2.781rem;
    --fs-8: 1.113rem;
    --fs-9: 2.002rem;
    --fs-10: 2.225rem;
    --fs-11: 2.447rem;
    --fs-12: 1.24rem;
    --fs-13: 1.9rem;
    --fs-14: 1.446rem;
    --fs-15: 1.669rem;
    --fs-16: 1.9rem;
    --fs-17: 1.557rem;
    --fs-18: 1.14rem;
    --fs-19: 2.559rem;
    --fs-20: 1.768rem;
    --fs-21: 1.294rem;
  }
}
@media (min-width: 700px) {
  :root {
    --fs-1: 4.383rem;
    --fs-2: 2.679rem;
    --fs-3: 1.218rem;
    --fs-4: 2.435rem;
    --fs-5: 3.044rem;
    --fs-6: 2.435rem;
    --fs-7: 3.044rem;
    --fs-8: 1.218rem;
    --fs-9: 2.192rem;
    --fs-10: 2.435rem;
    --fs-11: 2.679rem;
    --fs-12: 1.339rem;
    --fs-13: 2.07rem;
    --fs-14: 1.583rem;
    --fs-15: 1.826rem;
    --fs-16: 1.948rem;
    --fs-17: 1.704rem;
    --fs-18: 1.157rem;
    --fs-19: 2.8rem;
    --fs-20: 1.934rem;
    --fs-21: 1.381rem;
  }
}
@media (min-width: 840px) {
  :root {
    --fs-1: 4.761rem;
    --fs-2: 2.909rem;
    --fs-3: 1.323rem;
    --fs-4: 2.645rem;
    --fs-5: 3.306rem;
    --fs-6: 2.645rem;
    --fs-7: 3.306rem;
    --fs-8: 1.3rem;
    --fs-9: 2.381rem;
    --fs-10: 2.645rem;
    --fs-11: 2.909rem;
    --fs-12: 1.455rem;
    --fs-13: 2.248rem;
    --fs-14: 1.719rem;
    --fs-15: 1.984rem;
    --fs-16: 2.116rem;
    --fs-17: 1.852rem;
    --fs-18: 1.256rem;
    --fs-19: 3.042rem;
    --fs-20: 2.101rem;
    --fs-21: 1.469rem;
  }
}
@media (min-width: 980px) {
  :root {
    --fs-1: 5.139rem;
    --fs-2: 3.14rem;
    --fs-3: 1.34rem;
    --fs-4: 2.855rem;
    --fs-5: 3.569rem;
    --fs-6: 2.855rem;
    --fs-7: 3.569rem;
    --fs-8: 1.3rem;
    --fs-9: 2.569rem;
    --fs-10: 2.855rem;
    --fs-11: 3.14rem;
    --fs-12: 1.57rem;
    --fs-13: 2.427rem;
    --fs-14: 1.856rem;
    --fs-15: 2.141rem;
    --fs-16: 2.284rem;
    --fs-17: 1.998rem;
    --fs-18: 1.356rem;
    --fs-19: 3.283rem;
    --fs-20: 2.267rem;
    --fs-21: 1.556rem;
  }
}
@media (min-width: 1120px) {
  :root {
    --fs-1: 5.517rem;
    --fs-2: 3.372rem;
    --fs-3: 1.34rem;
    --fs-4: 3.065rem;
    --fs-5: 3.831rem;
    --fs-6: 3.065rem;
    --fs-7: 3.831rem;
    --fs-8: 1.3rem;
    --fs-9: 2.758rem;
    --fs-10: 3.065rem;
    --fs-11: 3.372rem;
    --fs-12: 1.6rem;
    --fs-13: 2.605rem;
    --fs-14: 1.9rem;
    --fs-15: 2.299rem;
    --fs-16: 2.452rem;
    --fs-17: 2.145rem;
    --fs-18: 1.42rem;
    --fs-19: 3.525rem;
    --fs-20: 2.433rem;
    --fs-21: 1.6rem;
  }
}
@media (min-width: 1260px) {
  :root {
    --fs-1: 5.895rem;
    --fs-2: 3.603rem;
    --fs-3: 1.34rem;
    --fs-4: 3.275rem;
    --fs-5: 4.094rem;
    --fs-6: 3.275rem;
    --fs-7: 4.094rem;
    --fs-8: 1.3rem;
    --fs-9: 2.947rem;
    --fs-10: 3.1rem;
    --fs-11: 3.6rem;
    --fs-12: 1.6rem;
    --fs-13: 2.7rem;
    --fs-14: 1.9rem;
    --fs-15: 2.3rem;
    --fs-16: 2.62rem;
    --fs-17: 2.2rem;
    --fs-18: 1.42rem;
    --fs-19: 3.766rem;
    --fs-20: 2.599rem;
    --fs-21: 1.6rem;
  }
}
@media (min-width: 1400px) {
  :root {
    --fs-1: 6.3rem;
    --fs-2: 3.85rem;
    --fs-3: 1.34rem;
    --fs-4: 3.5rem;
    --fs-5: 4.375rem;
    --fs-6: 3.4rem;
    --fs-7: 4.375rem;
    --fs-8: 1.3rem;
    --fs-9: 3.1rem;
    --fs-10: 3.1rem;
    --fs-11: 3.6rem;
    --fs-12: 1.6rem;
    --fs-13: 2.7rem;
    --fs-14: 1.9rem;
    --fs-15: 2.3rem;
    --fs-16: 2.7rem;
    --fs-17: 2.2rem;
    --fs-18: 1.42rem;
    --fs-19: 3.9rem;
    --fs-20: 2.6rem;
    --fs-21: 1.6rem;
  }
}
@media (min-width: 1560px) {
  :root {
    --fs-1: 6.732rem;
    --fs-2: 4.114rem;
    --fs-3: 1.34rem;
    --fs-4: 3.7rem;
    --fs-5: 4.4rem;
    --fs-6: 3.4rem;
    --fs-7: 4.4rem;
    --fs-8: 1.3rem;
    --fs-9: 3.1rem;
    --fs-10: 3.1rem;
    --fs-11: 3.6rem;
    --fs-12: 1.6rem;
    --fs-13: 2.7rem;
    --fs-14: 1.9rem;
    --fs-15: 2.3rem;
    --fs-16: 2.7rem;
    --fs-17: 2.2rem;
    --fs-18: 1.42rem;
    --fs-19: 3.9rem;
    --fs-20: 2.6rem;
    --fs-21: 1.6rem;
  }
}
@media (min-width: 1720px) {
  :root {
    --fs-1: 6.8rem;
    --fs-2: 4.4rem;
    --fs-3: 1.34rem;
    --fs-4: 3.7rem;
    --fs-5: 4.4rem;
    --fs-6: 3.4rem;
    --fs-7: 4.4rem;
    --fs-8: 1.3rem;
    --fs-9: 3.1rem;
    --fs-10: 3.1rem;
    --fs-11: 3.6rem;
    --fs-12: 1.6rem;
    --fs-13: 2.7rem;
    --fs-14: 1.9rem;
    --fs-15: 2.3rem;
    --fs-16: 2.7rem;
    --fs-17: 2.2rem;
    --fs-18: 1.42rem;
    --fs-19: 3.9rem;
    --fs-20: 2.6rem;
    --fs-21: 1.6rem;
  }
}

/* --- Holding together at 2x text --------------------------------------
   Found by setting the root font size to 32px and walking every page. The
   type scale above now genuinely doubles, which is the point, and doubling
   it exposed four places that could not take it. None of these are new
   faults; they were simply never reachable while headings only grew 1.37x. */

/* 1. Long words. "straightforward", "recommendations" and "automation" all
      exceed their column at 2x. Headings are the only place this bites,
      because body copy has short enough words and a wider measure -- except
      inside the narrow cards, where a five-column grid at 2x leaves a 132px
      column and "documentation" is wider than that on its own. Set on body
      and inherited, since it only breaks a word that would otherwise spill. */
body { overflow-wrap: break-word; }

/* 2. Grid and flex children default to min-width:auto, which refuses to
      shrink below their content. The five-column flow strip pushed the page
      67px sideways at 2x because of it. */
.flow-strip > *, .card-grid > *, .practice-cols > *, .record-list li > *,
.stat-band li, .split-section > * { min-width: 0; }

/* 3. The email button holds one long unbreakable address. At 2x it left the
      viewport, so it is allowed to wrap and to break the address. */
.contact-email, .button-light { overflow-wrap: anywhere; max-width: 100%; }

/* 4. The SSU monogram overflowed its own disc at 2x, because the disc was a
      fixed 46px and the glyph inside it was rem. Pinning the glyph in px
      fixed the overflow and left a tiny mark beside a doubled wordmark, so
      the disc is rem now too and the whole lockup scales as one object. The
      glyph stays at the 0.84rem floor, which fits because the disc scales
      with it -- the type-floor gate caught the 0.8rem I tried first. */