/* Sparkling's established identity applied to the v4 structure. */

/* v4.9: booking in the established Contact layout. */
.booking-panel { align-self:start; padding:40px; }
.booking-panel h2 { font-size:36px; line-height:1.2; margin:16px 0 22px; }
.booking-panel>p:not(.eyebrow):not(.booking-note) { font-size:15px; line-height:1.8; color:var(--muted); }
.booking-facts { display:flex; flex-wrap:wrap; gap:20px 48px; margin:28px 0; padding-block:20px; border-block:1px solid var(--line); }
.booking-facts dt { font:10px/1.6 var(--mono); text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.booking-facts dd { margin:0; font-size:15px; font-weight:600; }
.booking-panel .actions { margin-top:28px; }
.booking-panel .booking-note { margin-top:18px; font-size:12px; }
.booking-note a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:720px) { .booking-panel { padding:25px; } }
@font-face {
  font-family: Inter;
  src: url("inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
:root {
  --ink: #1a1a4e;
  --navy: #1a1a4e;
  --paper: #ffffff;
  --white: #ffffff;
  --muted: #626d7e;
  --line: #d6dee7;
  --teal: #007c8f;
  --mint: #10f2fd;
  --pale: #f1f5f9;
  --warm: #e8eef5;
  --navy-text: #e6ecf5;
  --navy-label: #b8c7df;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --radius: 8px;
}
body { background: var(--paper); }
h1, h2, h3 { font-weight: 600; letter-spacing: -.025em; }
h1 { font-weight: 700; }
.site-header { background: rgba(255,255,255,.98); border-color: #e8ecf1; }
.header-inner { height: 76px; }
.brand-lockup { display: block; width: 166px; flex: none; }
.brand-logo { display: block; width: 100%; height: auto; }
.brand-logo-inverse { display: none; }
.footer .brand-lockup { width: 184px; }
.footer .brand-logo-default { display: none; }
.footer .brand-logo-inverse { display: block; }
.button {
  background: var(--teal);
  border-color: var(--teal);
  border-radius: var(--radius);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) { .button:hover { background: #006666; border-color: #006666; } }
.button.light { color: var(--navy); background: var(--mint); border-color: var(--mint); }
@media (hover: hover) and (pointer: fine) { .button.light:hover { background: #87f8ff; border-color: #87f8ff; } }
.text-link { color: var(--teal); }
@media (hover: hover) and (pointer: fine) { .text-link:hover { color: #006666; } }
.dark .text-link { color: var(--mint); }
.home-hero h1 { font-weight: 700; letter-spacing: -.035em; }
.home-hero h1 em { color: var(--teal); }
.area-card, .entry, .experience-card, .depth-item, .proof-link, .contact-form {
  border-radius: var(--radius);
}
.area-card { border-top-color: var(--teal); box-shadow: 0 2px 7px rgba(26,26,78,.035); }
@media (hover: hover) and (pointer: fine) { .area-card:hover { background: #f0fafb; border-color: #a5d5de; } }
.area-descriptor { color: var(--teal); }
.decision-box, .context-note, .check-scope, .takeaway, .deliverables li {
  border-radius: 0 var(--radius) var(--radius) 0;
}
@media (hover: hover) and (pointer: fine) { .check-scope:hover { background: var(--warm); } }
.pill { border-color: #c8d5e2; border-radius: 5px; }
.pill.career { background: #edf1f8; border-color: #d3daea; color: #35355e; }
.pill.research { background: #eaf7f9; border-color: #c4e3e8; color: #126778; }
.menu-toggle { border-radius: 6px; }
.dark { background: var(--navy); color: white; }
.dark .lead, .fabric-step p { color: var(--navy-text); }
.dark .muted { color: var(--navy-label); }
.closing p { color: #cbd5e5; }
.fabric-note { color: var(--navy-label); }
.fabric-steps, .fabric-step { border-color: #41416d; }
.footer { background: var(--navy); color: var(--navy-text); }
.footer p, .footer .muted, .footer h3, .footer-bottom { color: var(--navy-label); }
.footer-bottom { border-color: #41416d; }
@media(max-width:900px) {
  .brand-lockup { width: 150px; }
}
@media(max-width:720px) {
  .brand-lockup { width: 158px; }
  .nav { background: white; box-shadow: 0 15px 25px rgba(26,26,78,.06); }
}

/* V4.3: component details from the established live-site design language. */
:root { --coral: #ff5a5f; }
.arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  vertical-align: middle;
  color: var(--coral);
}
.text-link {
  gap: 8px;
  border-bottom: 0;
  padding-bottom: 0;
}
.dark .text-link .arrow { color: var(--mint); }
.button { gap: 8px; }
.area-card-heading {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.area-card>.text-link, .package-link>.text-link, .proof-link>.text-link, .entry>.text-link {
  width: 100%;
  justify-content: space-between;
  align-self: stretch;
  margin-top: auto;
  padding-top: 24px;
}
.proof-link, .entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.check-scope>.text-link {
  width: 100%;
  align-self: stretch;
  justify-content: space-between;
}
@media (hover: hover) and (pointer: fine) {
  .area-card:hover .arrow,
  .package-link:hover .arrow,
  .proof-link:hover .arrow,
  .experience-card:hover .arrow,
  .check-scope:hover .arrow { transform: translateX(4px); }
}
.home .home-partners {
  background: var(--pale);
  border-color: #dde5ed;
}
.footer { border-top: 1px solid rgba(16,242,253,.24); }

/* Page names are the H1; the headline sits under it as a subtitle. */
.hero-subtitle {
  max-width: 790px;
  margin: 20px 0 0;
  color: var(--navy);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
}
.hero-subtitle+.lead { margin-top: 20px; }

/* About: founder photo. */
.founder-photo {
  margin: 0;
  align-self: start;
}
.founder-photo img {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--pale);
}
.founder-photo figcaption {
  max-width: 280px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* Visual pass fixes (screenshots of the offline copy at 375, 910, 1000 and 1440 px). */
/* Case-study lists read like the paragraphs around them: same colour, size and line length. */
.case-story .check-list {
  max-width: 820px;
  color: var(--muted);
}
.case-story .check-list li {
  color: var(--muted);
  font-size: 16px;
}
/* A link at the end of a note must not stretch its line. */
.context-note .text-link {
  display: inline;
  gap: 0;
}
.context-note .text-link .arrow {
  margin: 0 0 0 8px;
  vertical-align: -3px;
}
/* Short subtitles wrap evenly instead of leaving one word on the last line. */
.hero-subtitle { text-wrap: balance; }
/* Footer: the email address stays whole on phones and the note matches the links. */
.footer-links .small { font-size: 13px; }
@media(max-width:480px) {
  .footer-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: 20px;
  }
  .footer-links a[href^="mailto:"] { font-size: 12px; }
}
@media(min-width:361px) and (max-width:480px) {
  .footer-links a[href^="mailto:"] { overflow-wrap: normal; }
}

/* V4.4: the method behind the paid case, using the established brand. */
.case-evidence { margin: 0; }
.case-evidence>div { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.case-evidence dt { font-size: 15px; font-weight: 600; }
.case-evidence dd { margin: 9px 0 0; font-size: 14px; color: var(--muted); }
.area-artifacts { color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 14px; }
.prose-section>.engagement-result { color: var(--ink); font-size: 19px; line-height: 1.65; margin-bottom: 24px; }
.engagement-summary { margin: 0; border-top: 3px solid var(--teal); }
.engagement-summary>div { padding: 21px 0; border-bottom: 1px solid var(--line); }
.engagement-summary dt { font-size: 16px; font-weight: 600; }
.engagement-summary dd { margin: 9px 0 0; font-size: 14px; color: var(--muted); max-width: 780px; }
.delivery-example>.example-status { padding: 14px 18px; border-left: 3px solid var(--teal); background: var(--pale); font-size: 12px; line-height: 1.7; margin-bottom: 22px; }
.delivery-example>.example-intro { margin-bottom: 24px; }
.example-decision { padding: 20px; background: var(--pale); border-radius: var(--radius); margin: 24px 0; }
.example-decision>strong { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--teal); }
.example-decision>p { margin-top: 10px; color: var(--ink); font-size: 17px; }
.example-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; margin: 24px 0; gap: 10px; counter-reset: flow; }
.example-flow>li { counter-increment: flow; padding: 18px 15px; margin: 0; border: 1px solid var(--line); border-top: 3px solid var(--teal); border-radius: var(--radius); min-width: 0; }
.example-flow>li:before { content: '0' counter(flow); display: block; font: 11px var(--mono); color: var(--teal); margin-bottom: 12px; }
.example-flow strong { display: block; font-size: 14px; line-height: 1.4; }
.example-flow span { display: block; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 9px; }
.handoff-example { scroll-margin-top: 110px; }
.handoff-example>summary { font-size: 19px; font-weight: 600; padding: 22px 35px 22px 0; }
.example-rows { margin: 0 0 12px; }
.example-rows>div { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 22px; padding: 18px 0; border-top: 1px solid var(--line); }
.example-rows dt { font-size: 13px; font-weight: 600; line-height: 1.6; }
.example-rows dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.example-links { margin-block: 24px 34px; }
.partner-links { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.partner-option .partner-links .text-link { margin-top: 0; }
.prose-section>.authority-note { padding-left: 18px; border-left: 3px solid var(--teal); font-size: 14px; margin-bottom: 24px; }
.case-finding { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.case-finding h3 { font-size: 24px; line-height: 1.3; margin-bottom: 16px; }
.case-finding .actions { margin-top: 24px; }
@media(max-width:1050px) { .example-flow { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:720px) {
  .prose-section>.engagement-result { font-size: 17px; }
  .example-flow { grid-template-columns: 1fr; }
  .example-rows>div { grid-template-columns: 1fr; gap: 8px; }
  .handoff-example>summary { font-size: 18px; }
}

/* V5 design pass (23 October 2026, design review on branch website-design-restyle).
   The brand stays: logo, navy, teal, cyan and Inter. What changes is the system around it:
   one typeface (no monospace), a short type scale, running text in ink, labels in sentence
   case, no decorative numbering or icons, surfaces separated by tone instead of lines and
   shadows, one corner radius, and headlines given the full width of the page.
   Scale: 15 (interface, labels, notes) / 17 (body) / 21 (lead, list titles) / 28 (card titles)
   / 36 (in-page headings) / 52 (section headings) / 70 and 82 (page titles). */
:root {
  --mono: var(--sans);
  --muted: #434c60;
  --fs-ui: 15px;
  --fs-body: 17px;
  --fs-lead: 21px;
  --fs-h3: 28px;
  --fs-h2-inline: 36px;
  --fs-h2: clamp(32px, 3.6vw, 52px);
  --fs-h1: clamp(42px, 4.9vw, 70px);
}

/* Type: headings */
h2 { font-size: var(--fs-h2); }
.page-hero h1, .page-hero.compact h1, .page-intro h1, .area-page-hero h1 { font-size: var(--fs-h1); }
.area-page-hero h1>span, .services-hero h1>span { color: var(--ink); font-size: var(--fs-h2-inline); font-weight: 500; letter-spacing: -.025em; }
.home-hero h1 em { color: inherit; }
.prose-section h2, .case-story h2, .booking-panel h2, .closing h2 { font-size: var(--fs-h2-inline); }
.contact-aside h2, .legal h2, .case-story .case-method h2, .area-card h3, .entry h3,
.experience-card h3, .partner-option h3, .responsibility-grid h3, .check-scope h3, .package-link h3,
.area-package-grid .package-link h3 { font-size: var(--fs-h3); }
.fabric-step h3, .work-step h3, .scope-split h3, .variant-list h3, .depth-item h3, .proof-link h3,
.commission-item h3, .case-finding h3, .service-footnotes h3, .handoff-example>summary,
.decision-box p, .takeaway p, .example-decision>p { font-size: var(--fs-lead); }

/* Type: lead and running text, in ink */
.lead, .home-hero .lead, .section-heading .lead, .page-hero .lead, .principle-grid .lead,
.prose-section>.engagement-result { font-size: var(--fs-lead); }
.lead, .prose-section>p, .prose-section>ul, .case-story p, .case-story .check-list,
.case-story .check-list li, .founder-copy p, .legal p { color: var(--ink); }
.prose-section>p, .prose-section>ul, .case-story .check-list li, .check-list li, .founder-copy p,
.fabric-step p, .career-strip p, .closing p, .context-note, .work-step p, .deliverables li,
.scope-split p, details p, .package-link p, .area-package-grid .package-link p, .area-descriptor,
.entry p, .experience-card p, .service-footnotes p, .method-row p, .responsibility-grid p,
.partner-option p, .contact-aside p, .legal p, .variant-list p, .check-scope p, .commission-item p,
.depth-item p, .proof-link p, .booking-panel>p:not(.eyebrow):not(.booking-note), .booking-facts dd,
.engagement-summary dd, .case-evidence dd, .example-flow strong, .example-rows dd, .authority-note,
.prose-section>.authority-note, .routing-list, .scope-variants>summary, summary { font-size: var(--fs-body); }
.area-descriptor { color: var(--ink); font-weight: 500; }

/* Type: interface, labels and notes (one size, sentence case, the text face) */
.text-link, .area-card>.text-link, .package-link .text-link, .experience-card .text-link,
.check-scope .text-link, .proof-link .text-link, .partner-option .text-link,
.service-footnotes .text-link, .area-classification-note .text-link, .button, .nav, .nav .button,
.home-hero .button, .toc a, .area-nav, .breadcrumb, .footer p, .footer-links, .footer-links .small,
.small, .claim-note, .evidence-note, .decision-box small, .area-page-hero .decision-box small,
.area-outputs p, .area-artifacts, .founder-photo figcaption, .experience-facts span, .case-meta,
.booking-panel .booking-note, .delivery-example>.example-status, .example-flow span,
.example-rows dt, .menu-toggle, .case-evidence dt, .engagement-summary dt { font-size: var(--fs-ui); }
.eyebrow, .home-hero .eyebrow, .decision-box .eyebrow, .package-link .eyebrow, .entry .eyebrow,
.takeaway .eyebrow, .area-package-grid .package-link .eyebrow, .hero-footnote,
.hero-strip-inner, .area-outputs>span, .pill, .toc p, .footer h3,
.footer-bottom, .experience-card .sector, .case-meta dt, .contact-detail h3, .booking-facts dt,
.example-decision>strong, .proof-link>.small, .legal .updated, .fabric-note {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow { gap: 0; margin-bottom: 14px; font-weight: 600; }
.eyebrow:before { display: none; }
.area-outputs>span, .toc p, .footer h3, .case-meta dt, .contact-detail h3, .booking-facts dt,
.example-decision>strong, .proof-link>.small { font-weight: 600; }
.hero-footnote, .breadcrumb, .footer-bottom, .experience-card .sector { color: var(--muted); }
.footer-bottom, .footer h3 { color: var(--navy-label); }

/* Labels that were pill badges become plain text */
.pill, .pill.company, .pill.career, .pill.research {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 600;
}
.pill.company { color: var(--teal); }
.pill.career { color: var(--muted); }
.pill.research { color: #126778; }

/* No decorative numbering or icons: order is carried by position */
.deliverables li:before, .example-flow>li:before { content: none; }
.fabric-step, .work-step { grid-template-columns: minmax(0, 1fr); }
.method-row { grid-template-columns: .8fr 1.2fr; }
.deliverables li { padding-left: 24px; }

/* Colour: teal is for actions and labels; arrows follow their link */
.arrow, .text-link .arrow { color: currentColor; }

/* Surfaces: tone steps instead of lines, outlines and resting shadows; one radius */
.rule, .site-header, .hero-strip, .fabric-steps, .fabric-step, .career-strip, .footer,
.footer-bottom, .toc, .prose-section, .check-list li, details, details:last-child, .package-link,
.evidence-note, .method-row, .method-row:last-child, .experience-facts, .partner-option,
.contact-detail, .area-nav, .area-outputs, .variant-list>a, .commission-item, .booking-facts,
.case-evidence>div, .engagement-summary>div, .example-rows>div, .case-finding, .home .home-partners,
.case-meta { border-width: 0; }
.entry, .experience-card, .depth-item, .proof-link, .founder-photo img, .menu-toggle { border: 0; }
.area-card { border-width: 3px 0 0; box-shadow: none; background: var(--pale); }
@media (hover: hover) and (pointer: fine) { .area-card:hover { background: var(--warm); } }
.booking-panel, .example-flow>li { border-width: 0; }
.booking-panel { border-top-width: 4px; }
.example-flow>li { border-top-width: 3px; }
.example-flow>li { background: var(--pale); }
.experience-card, .depth-item, .proof-link, .menu-toggle { background: var(--pale); }
.experience-card:first-child { background: var(--warm); }
@media (hover: hover) and (pointer: fine) { .proof-link:hover { background: var(--warm); } }
details { padding-inline: 24px; background: var(--pale); border-radius: var(--radius); }
details+details { margin-top: 8px; }
details p { padding-right: 0; }
.menu-toggle { border-radius: var(--radius); }
.career-strip { padding-top: 0; }
.footer-bottom { padding-top: 0; }
.nav-link { border-bottom: 0; }
.responsibility-grid>div, .scope-split>div { border-top-color: var(--warm); }
.responsibility-grid>div:first-child, .scope-split>div:first-child { border-top-color: var(--teal); }

/* Frame: page titles and section headings take the full width; the text and the
   picture or panel share the row below. */
@media (min-width: 1001px) {
  .home-hero .desktop-break { display: none; }
}
@media (max-width: 1000px) {
  .home-hero h1 { font-size: clamp(42px, 6.2vw, 64px); max-width: none; }
  .home-hero .lead { max-width: 640px; }
}
@media (min-width: 721px) {
  .home-hero .desktop-break { display: none; }
  /* Heading-and-text splits stack: the heading takes the width, the text follows. */
  .principle-grid, .fabric-grid:not(:has(>.fabric-steps)) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .principle-grid>div:first-child>h2, .fabric-grid:not(:has(>.fabric-steps))>div:first-child>h2 { max-width: none; margin-bottom: 36px; }
  .principle-grid>div:last-child:has(>.muted), .fabric-grid:not(:has(>.fabric-steps))>div:last-child:has(>.muted) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
  }
  .principle-grid>div:last-child:has(>.muted)>p+p, .fabric-grid:not(:has(>.fabric-steps))>div:last-child:has(>.muted)>p+p { margin-top: 0; }
  .principle-grid>div:last-child>.actions, .fabric-grid:not(:has(>.fabric-steps))>div:last-child>.actions { grid-column: 1 / -1; }
  .principle-grid>div:last-child:not(:has(>.muted))>.lead { max-width: 860px; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .page-intro, .fabric-grid:has(>.fabric-steps) { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .page-intro .decision-box { max-width: 620px; }
  .partner-band { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .closing-inner { flex-direction: column; align-items: flex-start; }
  .nav-link, .nav .button { font-size: 14px; }
}
@media (max-width: 1000px) {
  :root { --fs-h3: 24px; --fs-h2-inline: 30px; }
}
@media (min-width: 901px) {
  .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
  .section-heading h2 { max-width: none; }
  .page-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); column-gap: 64px; row-gap: 0; align-items: start; }
  .page-intro>div:first-child { display: contents; }
  .page-intro>div:first-child>.eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .page-intro>div:first-child>h1 { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .page-intro>div:first-child>:not(.eyebrow):not(h1) { grid-column: 1; }
  .page-intro>.decision-box { grid-column: 2; grid-row: 3 / span 3; align-self: start; margin-top: 28px; }
  .fabric-grid:has(>.fabric-steps) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; row-gap: 0; }
  .fabric-grid:has(>.fabric-steps)>div:first-child { display: contents; }
  .fabric-grid:has(>.fabric-steps)>div:first-child>.eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .fabric-grid:has(>.fabric-steps)>div:first-child>h2 { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-bottom: 44px; }
  .fabric-grid:has(>.fabric-steps)>div:first-child>:not(.eyebrow):not(h2) { grid-column: 1; }
  .fabric-grid:has(>.fabric-steps)>.fabric-steps { grid-column: 2; grid-row: 3 / span 4; }
}
.package-link h3 { max-width: none; }
.area-card .area-question { font-size: var(--fs-lead); }
.contact-form>p.eyebrow { font-size: var(--fs-ui); }
.hero-subtitle { font-size: var(--fs-h3); }
.email-link { border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (max-width: 480px) {
  .footer-main { grid-template-columns: minmax(0, 1fr); }
  .footer-links a[href^="mailto:"] { font-size: var(--fs-ui); }
}

/* Phones */
@media (max-width: 720px) {
  :root { --fs-lead: 19px; --fs-h3: 24px; --fs-h2-inline: 30px; }
  .method-row { grid-template-columns: 1fr; }
  .method-row p { grid-column: auto; }
  .nav { border-bottom: 0; }
  details { padding-inline: 18px; }
}

/* V5.1 homepage composition and motion (design pass 2, direction "type and nothing else",
   quiet tone, brand palette and type kept). The first screen is a navy statement; the
   evidence map arrives below it as the first picture; the four areas are a statement cell
   beside navy rows; the six decisions are a one-size table; the method descends as a
   staircase; the paid case is two document pages; the close is a teal field; the footer
   ends on the logo at full width. Interface fragments carry data-ui. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --navy-2: #22225c;
  --navy-3: #2a2a6c;
  --page-margin: max(50px, calc((100vw - 1280px) / 2));
}

h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* Header: takes the ink of the section beneath it (motion.js adds .on-dark). */
.site-header { transition: background-color 300ms ease; }
.site-header .nav-link, .site-header .menu-toggle { transition: color 300ms ease, background-color 300ms ease; }
.brand-lockup { position: relative; }
.brand-logo-default { transition: opacity 300ms ease; }
.site-header .brand-logo-inverse { display: block; position: absolute; inset: 0; opacity: 0; transition: opacity 300ms ease; }
.site-header.on-dark { background: var(--navy); }
.site-header.on-dark .brand-logo-default { opacity: 0; }
.site-header.on-dark .brand-logo-inverse { opacity: 1; }
.site-header.on-dark .menu-toggle { background: var(--navy-3); color: var(--white); }
@media (min-width: 721px) {
  .site-header.on-dark .nav-link { color: var(--white); }
  .site-header.on-dark .nav .button { background: var(--mint); border-color: var(--mint); color: var(--navy); }
}

/* One button per ground: teal on light, cyan on navy, navy on teal. Cyan otherwise
   marks only links on navy and the logo's spark; labels on navy are a soft blue-grey. */
.dark .eyebrow, .home-hero .eyebrow { color: var(--navy-label); }

/* Two shared edges on the homepage: the page margin, and the middle of the page plus 48px. */
:root { --split-gap: 96px; }
@media (min-width: 901px) {
  .home .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
}

/* Hero: the statement across the page; the introduction and the evidence map share the row below. */
.home-hero { background: var(--navy); color: var(--white); padding: 72px 0 0; overflow: visible; }
.home-hero h1 { font-size: clamp(46px, 6.6vw, 100px); line-height: 1; letter-spacing: -.04em; max-width: none; color: var(--white); }
.home-hero h1 em { margin-top: .04em; }
.hero-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; margin-top: 48px; }
.home-hero .lead { margin: 0; color: var(--navy-text); font-size: var(--fs-lead); }
.home-hero .actions { margin: 32px 0 0; }
.home-hero .hero-footnote { margin-top: 28px; color: var(--navy-label); }
.home-hero .text-link { color: var(--mint); }
@media (hover: hover) and (pointer: fine) { .home-hero .text-link:hover { color: #87f8ff; } }
.hero-figure { position: relative; z-index: 1; }

/* The four areas: a pale statement cell that holds while the navy rows pass. */
.home-areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.areas-statement { background: var(--pale); }
.areas-statement-inner { position: sticky; top: 76px; padding: 112px 48px 96px var(--page-margin); }
.areas-statement h2 { margin: 0; font-size: clamp(32px, 3vw, 46px); }
.areas-statement h2>span { display: block; }
.areas-foot p { max-width: 34ch; margin: 28px 0 24px; font-size: var(--fs-body); }
.areas-rows { background: var(--navy); padding: 64px 0; }
.areas-rows>.area-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 24px; gap: 32px; align-items: start; padding: 36px var(--page-margin) 36px 48px; border: 0; border-radius: 0; background: transparent; color: var(--white); transition: background-color 240ms ease; }
.areas-rows>.area-card h3 { font-size: var(--fs-h3); color: var(--white); }
.area-row-name p { margin-top: 6px; color: var(--navy-label); font-size: var(--fs-ui); }
.area-row-question { font-size: var(--fs-body); line-height: 1.5; }
.area-row-result { margin-top: 12px; color: rgba(255, 255, 255, .82); font-size: var(--fs-body); line-height: 1.6; }
.area-row-result span { color: var(--white); font-weight: 600; }
.areas-rows>.area-card .arrow { align-self: center; color: var(--mint); transition: transform 300ms var(--ease-out); }

/* The six decisions: one type size; the description starts on the second edge. */
.decision-table { margin-top: 8px; }
.decision-table { margin-top: 24px; }
.decision-row { display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 32px; align-items: center; padding: 22px 0; color: var(--ink); }
.decision-row h3 { grid-column: 1; font-size: var(--fs-h2-inline); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; transition: color 180ms ease; }
.decision-row p { grid-column: 1; grid-row: 2; margin-top: 8px; color: var(--muted); font-size: var(--fs-body); }
.decision-row .arrow { grid-column: 2; grid-row: 1 / span 2; color: var(--teal); transition: transform 300ms var(--ease-out); }

/* The method: the heading takes the width; the introduction holds while the steps pass. */
.method-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
.method-grid>.eyebrow, .method-grid>h2 { grid-column: 1 / -1; }
.method-grid>h2 { margin-bottom: 56px; }
.method-side { position: sticky; top: 140px; }
.method-side .lead { margin: 0; color: var(--navy-text); font-size: var(--fs-lead); }
.method-side .actions { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; }
.method-side .fabric-note { margin-top: 28px; color: var(--navy-label); }
.method-step+.method-step { margin-top: 48px; }
.method-step h3 { font-size: var(--fs-h3); color: var(--white); letter-spacing: -.025em; }
.method-step p { max-width: 46ch; margin-top: 12px; color: var(--navy-text); font-size: var(--fs-body); }

/* The paid case: the account across the page, then two document pages on the two edges. */
.home-case { background: var(--pale); }
.case-copy { max-width: 46em; margin-bottom: 40px; }
.case-copy h3 { margin: 12px 0 14px; font-size: var(--fs-h3); }
.case-copy p { margin-bottom: 16px; color: var(--ink); font-size: var(--fs-body); }
[data-ui] .doc-rows, [data-ui] .doc-actions { margin-bottom: 24px; }
[data-ui] .doc-kind { color: var(--teal); font-size: 14px; font-weight: 600; }
[data-ui] .doc-title { margin: 10px 0 22px; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
[data-ui] .doc-rows { margin: 0; }
[data-ui] .doc-rows>div { padding: 14px 0; border-top: 1px solid #d6dee7; }
[data-ui] .doc-rows dt { font-size: 14px; font-weight: 600; }
[data-ui] .doc-rows dd { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
[data-ui] .doc-actions { margin: 0; padding: 0 0 0 22px; }
[data-ui] .doc-actions li { padding: 14px 0 14px 6px; border-top: 1px solid #d6dee7; font-size: 17px; }
[data-ui] .doc-actions li+li { margin-top: 0; }
[data-ui] .doc-note { margin-top: auto; padding-top: 14px; border-top: 1px solid #d6dee7; color: var(--muted); font-size: 13px; line-height: 1.6; }
.home-case .career-strip { margin-top: 48px; }

/* Responsibilities, with the principal named, on the two edges. */
.home .home-partners { background: var(--white); }
.home-partners .partner-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--split-gap); align-items: start; }
.partner-founder { justify-self: end; width: 100%; max-width: 400px; margin: 0; }
.partner-founder img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); filter: saturate(.78); }
.partner-founder figcaption { margin-top: 14px; font-size: var(--fs-ui); color: var(--muted); }
.partner-founder strong { display: block; color: var(--ink); font-size: var(--fs-body); }
.partner-main .lead { margin: 28px 0 24px; }

/* The close: a teal field on every page, with a navy button. */
.closing { background: var(--teal); padding: 128px 0 72px; }
.closing-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 64px; align-items: end; }
.closing-inner>div { display: contents; }
.closing h2 { grid-column: 1 / -1; max-width: 18em; color: var(--white); font-size: var(--fs-h2); line-height: 1.05; }
.closing p { grid-column: 1; max-width: 46ch; margin: 0; color: var(--white); font-size: var(--fs-lead); }
.closing .button.light { grid-column: 2; background: var(--navy); border-color: var(--navy); color: var(--white); }
@media (hover: hover) and (pointer: fine) { .closing .button.light:hover { background: var(--navy-3); border-color: var(--navy-3); color: var(--white); } }

/* Footer: links above, the logo at full width below. */
.footer { padding-top: 96px; }
.footer .footer-brand .wordmark { display: none; }
@media (min-width: 901px) {
  .footer-main { grid-template-columns: calc(50% - var(--split-gap) / 2) minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
  .footer-main>:nth-child(2) { padding-left: var(--split-gap); }
}

/* Motion: the first screen arrives by 1.2 s; sections below the fold arrive once, quickly. */
.button { transition: transform 140ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.button:active { transform: scale(.97); }
.text-link .arrow { transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .areas-rows>.area-card:hover { background: var(--navy-3); }
  .areas-rows>.area-card:hover .arrow, .decision-row:hover .arrow { transform: translateX(6px); }
  .decision-row:hover h3 { color: var(--teal); }
}
@media (prefers-reduced-motion: no-preference) {
  .home-hero .eyebrow { animation: v5-rise 600ms var(--ease-out) 40ms both; }
  .home-hero h1 { animation: v5-rise 900ms var(--ease-expo) 100ms both; }
  .home-hero h1 em { animation: v5-rise 900ms var(--ease-expo) 200ms both; }
  .home-hero .hero-copy { animation: v5-rise 700ms var(--ease-out) 320ms both; }
  .hero-figure { animation: v5-lift 800ms var(--ease-expo) 380ms both; }
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity 450ms var(--ease-out) var(--reveal-delay, 0ms), transform 650ms var(--ease-expo) var(--reveal-delay, 0ms); }
  .reveal.is-in { opacity: 1; transform: none; }
  .areas-rows>.area-card.reveal { transform: translateX(32px); }
  .decision-row.reveal { transform: translateY(12px); }
  .area-specimen.reveal { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease-in-out) var(--reveal-delay, 0ms); }
  .area-specimen.reveal.is-in { clip-path: inset(0); }
  .areas-rows>.area-card.reveal.is-in, .decision-row.reveal.is-in { transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-hero { view-timeline-name: --home-hero; }
  }
}
@keyframes v5-rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes v5-lift { from { opacity: 0; transform: translateY(48px); } }
@keyframes v5-fade { from { opacity: 0; transform: translateY(6px); } }
@keyframes v5-drift { to { transform: translateY(-32px); } }

/* Tablet */
@media (max-width: 1000px) {
  .hero-foot { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .hero-figure { max-width: 680px; }
  .home-areas { grid-template-columns: minmax(0, 1fr); }
  .areas-statement-inner { position: static; padding: 88px var(--page-margin) 56px; }
  .areas-rows { padding: 24px 0; }
  .areas-rows>.area-card { padding: 32px var(--page-margin); }
  .method-grid { grid-template-columns: minmax(0, 1fr); }
  .method-side { position: static; margin-bottom: 56px; }
  .home-partners .partner-band { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 48px; }
  .closing-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .closing .button.light { grid-column: 1; justify-self: start; }
}
@media (max-width: 1150px) { :root { --page-margin: 32px; --split-gap: 64px; } }

/* Phones */
@media (max-width: 720px) {
  :root { --page-margin: 20px; }
  .home-hero { padding-top: 48px; }
  .home-hero h1 { font-size: clamp(38px, 10.4vw, 46px); }
  .hero-foot { margin-top: 32px; row-gap: 40px; }
  .areas-statement-inner { padding: 64px var(--page-margin) 40px; }
  .areas-rows>.area-card { grid-template-columns: minmax(0, 1fr) 24px; gap: 12px 16px; padding: 28px var(--page-margin); }
  .area-row-body { grid-column: 1; grid-row: 2; }
  .areas-rows>.area-card .arrow { grid-column: 2; grid-row: 1; }
  .decision-row { column-gap: 16px; padding: 16px 0; }
  .decision-row h3 { font-size: var(--fs-h3); }
  .method-step+.method-step { margin-top: 36px; }
  .home-partners .partner-band { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .partner-founder { justify-self: start; max-width: 260px; }
  .closing { padding: 88px 0 56px; }
  .closing .button.light { width: 100%; }
}

/* V5.2 founder review (23 October 2026). Three house rules from the design pass were
   challenged and relaxed where they cost the reader or the brand:
   - The coral arrow (#ff5a5f, the live site's interactive colour) returns on links over
     light grounds; over navy the arrows stay cyan. Coral is used on arrows only.
   - Sequences whose order is real are numbered again, with plain figures (1, 2, 3), not
     zero-padded: the homepage method, "How the work unfolds", the How We Work method and
     the handoff flow. Lists without an order (the six questions, deliverables) stay unnumbered.
   - Thin lines return where they help the eye: FAQ rows and label/value lists. Sections,
     cards and panels keep tone steps. Labels above headings stay (they are signposts). */
.arrow, .text-link .arrow, .decision-row .arrow { color: var(--coral); }
.dark .arrow, .home-hero .arrow, .areas-rows .arrow { color: var(--mint); }

.method-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.method-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); counter-increment: step; }
.method-step::before { content: counter(step); grid-row: 1 / span 2; color: var(--navy-label); font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.method-step>h3, .method-step>p { grid-column: 2; }
.work-steps { counter-reset: work; }
.work-step { grid-template-columns: 32px minmax(0, 1fr); counter-increment: work; }
.work-step::before { content: counter(work); color: var(--teal); font-size: var(--fs-lead); font-weight: 600; line-height: 1.3; }
.method-row { grid-template-columns: 48px .8fr 1.2fr; counter-increment: method; }
.method-row::before { content: counter(method); color: var(--teal); font-size: var(--fs-h3); font-weight: 500; line-height: 1.15; }
.example-flow>li:before { content: counter(flow); display: block; margin-bottom: 10px; color: var(--teal); font: 600 var(--fs-ui)/1.4 var(--sans); }

/* A plain question (a details element with no class of its own). V5.9.17: the entrance classes that
   motion.js adds (reveal-init, reveal, is-in) still count as no class of its own. */
:is(details:not([class]), details[class="reveal-init reveal"], details[class="reveal"], details[class="reveal is-in"]) { padding-inline: 0; background: none; border-radius: 0; border-top: 1px solid var(--line); }
:is(details:not([class]), details[class="reveal-init reveal"], details[class="reveal"], details[class="reveal is-in"]):last-child { border-bottom: 1px solid var(--line); }
:is(details:not([class]), details[class="reveal-init reveal"], details[class="reveal"], details[class="reveal is-in"])+:is(details:not([class]), details[class="reveal-init reveal"], details[class="reveal"], details[class="reveal is-in"]) { margin-top: 0; }
.engagement-summary>div { border-bottom: 1px solid var(--line); }
.case-evidence>div, .example-rows>div { border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  .method-row { grid-template-columns: 32px minmax(0, 1fr); }
  .method-row>h3, .method-row>p { grid-column: 2; }
  .method-step { grid-template-columns: 36px minmax(0, 1fr); }
}

/* V5.3 homepage idea (23 October 2026, after an independent Codex brainstorm): the practice's
   own judgment is the page's picture. The paid case's recommendation sits in the hero and reads
   in full; the finding behind it opens on request. The illustrative map moves to the method it
   illustrates. The six questions open the scope, area and result they lead to, with a booking
   that carries the service. The case section shows how the evidence became the recommendation. */
.hero-figure .hero-doc { padding: 36px 40px 30px; background: var(--white); border-radius: var(--radius); color: var(--ink); }
.hero-doc .doc-title { margin: 12px 0 24px; font-size: 34px; line-height: 1.15; }
[data-ui] .doc-reasoning { margin: 24px 0 0; padding: 0; background: none; border-radius: 0; border-top: 1px solid #d6dee7; }
[data-ui] .doc-reasoning>summary { padding: 14px 32px 14px 0; color: var(--teal); font-size: var(--fs-ui); font-weight: 600; }
[data-ui] .doc-reasoning>summary:after { top: 9px; }
[data-ui] .doc-reasoning .doc-rows { margin-bottom: 14px; }
[data-ui] .doc-reasoning .doc-note { margin: 0 0 14px; }
[data-ui] .doc-sign { color: var(--muted); font-size: 13px; white-space: nowrap; }
.hero-doc>.text-link { margin-top: 20px; }
.home-hero .hero-doc .text-link { color: var(--teal); }
@media (hover: hover) and (pointer: fine) { .home-hero .hero-doc .text-link:hover { color: #006666; } }
.home-hero .hero-doc .arrow { color: var(--coral); }

details.decision-row { margin: 0; padding: 0; background: none; border-radius: 0; display: block; }
.decision-row>summary { display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 32px; align-items: center; padding: 22px 0; }
.decision-row>summary:after, .decision-row[open]>summary:after { content: none; }
[data-ui] .doc-actions { padding: 0; list-style: none; counter-reset: action; }
[data-ui] .doc-actions li { display: grid; grid-template-columns: 26px minmax(0, 1fr); padding-left: 0; counter-increment: action; }
[data-ui] .doc-actions li::before { content: counter(action) "."; color: var(--muted); }
.decision-row[open]>summary .arrow { transform: rotate(90deg); }
.decision-route { margin: 0 0 22px; padding: 26px 30px; background: var(--pale); border-radius: var(--radius); }
.decision-route .route-path { color: var(--teal); font-size: var(--fs-ui); font-weight: 600; }
.decision-route .route-result { max-width: 62ch; margin-top: 8px; color: var(--ink); font-size: var(--fs-body); }
.decision-route .actions { margin-top: 20px; }

.case-sheet { padding: 36px 40px 30px; background: var(--white); border-radius: var(--radius); color: var(--ink); }
[data-ui] .sheet-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 0 0 24px; }
[data-ui] .sheet-cols>div { padding-top: 16px; border-top: 1px solid #d6dee7; }
[data-ui] .sheet-cols dt { font-size: var(--fs-ui); font-weight: 600; }
[data-ui] .sheet-cols dd { margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

@media (prefers-reduced-motion: no-preference) {
  .decision-row[open] .decision-route, [data-ui] .doc-reasoning[open] .doc-rows { animation: v5-fade 320ms var(--ease-out) both; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-figure>.hero-doc { animation: v5-drift linear both; animation-timeline: --home-hero; animation-range: exit 0% exit 100%; }
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  .footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero-figure .hero-doc, .case-sheet { padding: 26px 22px 22px; }
  .hero-doc .doc-title { font-size: 28px; }
  [data-ui] .sheet-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .decision-route { padding: 22px; }
}

/* V5.5 Services overview, after a Codex brainstorm run with the same skill. The four areas
   are compared side by side on the first screen (tasteskill blueprint "Comparison set as
   text": columns without lines, rows on alternating tones, every answer in words). V5.6:
   their descriptions, outputs and constructed examples follow one under the other.
   The two starting points are compared side by side; choosing by purpose is a line-up of
   rows on the page's two edges. */
.services-hero { padding: 24px 0 112px; }
.services-hero-top { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 64px; align-items: end; }
.services-hero-top h1 { margin: 0; }
.services-hero h1>span { display: block; margin-top: 14px; line-height: 1.15; }
.services-hero-copy .lead { margin: 0; max-width: 46ch; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.services-hero-copy .actions { margin-top: 24px; }
/* The header carries the same button from 721px up; the page repeats it only on phones. */
@media (min-width: 721px) { .services-hero-copy .actions { display: none; } }
/* V5.6: the first screen arrives on load, a quieter echo of the homepage's opening: title,
   introduction, then the four columns left to right, all settled within about a second.
   A column that starts below the fold is given .reveal by motion.js, which drops this
   load-in so it arrives on scroll instead. */
@media (prefers-reduced-motion: no-preference) {
  .services-hero .eyebrow { animation: v5-rise 600ms var(--ease-out) 40ms both; }
  .services-hero h1 { animation: v5-rise 800ms var(--ease-expo) 100ms both; }
  .services-hero-copy { animation: v5-rise 700ms var(--ease-out) 220ms both; }
  .area-jump { animation: v5-rise 600ms var(--ease-out) 300ms both; }
  .services-page .area-index .area-card:not(.reveal) { animation: v5-rise 600ms var(--ease-out) 320ms both; }
  .services-page .area-index .area-card:nth-child(2):not(.reveal) { animation-delay: 380ms; }
  .services-page .area-index .area-card:nth-child(3):not(.reveal) { animation-delay: 440ms; }
  .services-page .area-index .area-card:nth-child(4):not(.reveal) { animation-delay: 500ms; }
}

.services-page .area-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 0; margin-top: 48px; }
.services-page .area-index .area-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-items: stretch; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.services-page .area-index .area-card>* { margin: 0; padding: 16px 24px; background: var(--white); transition: background-color 200ms ease; }
.services-page .area-index .area-card>:nth-child(odd) { background: var(--pale); }
@media (hover: hover) and (pointer: fine) { .services-page .area-index .area-card:hover>*, .services-page .area-index .area-card:focus-visible>* { background: var(--warm); } }
.services-page .area-index .area-card-heading { display: block; padding-top: 20px; }
.services-page .area-index h2 { margin: 0; font-size: var(--fs-h3); line-height: 1.15; transition: color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .services-page .area-index .area-card:hover h2 { color: var(--teal); } }
.services-page .area-index .area-descriptor { min-height: 0; margin-top: 6px; color: var(--teal); font-size: var(--fs-ui); font-weight: 600; line-height: 1.4; }
.services-page .area-index .area-question { max-width: none; font-size: var(--fs-body); line-height: 1.55; letter-spacing: 0; color: var(--ink); }
.services-page .area-index .area-outputs { width: auto; border: 0; }
.services-page .area-index .area-outputs>span { display: block; color: var(--ink); font-weight: 600; }
.services-page .area-index .area-outputs p { margin-top: 4px; color: var(--ink); font-size: var(--fs-body); line-height: 1.55; }
.services-page .area-index .area-card>.text-link { width: auto; justify-content: flex-start; align-self: stretch; padding: 14px 24px 20px; }
@media (hover: hover) and (pointer: fine) { .services-page .area-index .area-card:hover .arrow { transform: translateX(4px); } }
.services-page .area-index .arrow { transition: transform 300ms var(--ease-out); }

/* V5.6: the four areas one under the other, each on its own band (pale, white, pale, white),
   so the whole offer reads by scrolling, without tabs. The first band continues the heading's
   ground; each example document takes the other tone. */
.area-reader { padding-bottom: 0; background: var(--pale); }
.area-panel { padding: 48px 0 56px; }
.area-panel:first-child { padding-top: 8px; }
.area-panel:nth-child(even) { background: var(--white); }
.area-panel>.container { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: start; }
@media (min-width: 901px) {
  .area-panel-copy { display: grid; grid-template-columns: calc(50% - var(--split-gap) / 2) minmax(0, 1fr); column-gap: var(--split-gap); align-items: baseline; }
  .area-panel-copy>:not(h3):not(.area-descriptor) { grid-column: 2; }
  .area-panel-copy>h3 { grid-row: 1; }
  .area-panel-copy>.area-descriptor { grid-column: 1; grid-row: 2; align-self: start; }
  .area-reader .area-panel-copy>.area-description { grid-row: 1 / span 2; margin-top: 0; }
}
.area-panel-copy h3 { font-size: var(--fs-h2-inline); }
.area-panel-copy .area-descriptor { margin-top: 6px; color: var(--teal); font-size: var(--fs-body); font-weight: 600; }
.area-panel-copy .area-description { max-width: 60ch; margin-top: 20px; color: var(--ink); font-size: var(--fs-body); line-height: 1.6; }
.area-panel-copy .area-artifacts { margin-top: 16px; color: var(--muted); font-size: var(--fs-ui); }
.area-panel-copy .text-link { margin-top: 24px; }
[data-ui].area-specimen { padding: 36px 40px 30px; background: var(--white); border-radius: var(--radius); color: var(--ink); }
.area-panel:nth-child(even) [data-ui].area-specimen { background: var(--pale); }
[data-ui] .doc-excerpt { margin: -8px 0 20px; color: var(--ink); font-size: 16px; line-height: 1.6; }
[data-ui].area-specimen .doc-note { margin-top: 18px; }
[data-ui].area-specimen .doc-excerpt { max-width: 70ch; }
.doc-more>summary { display: none; }
[data-ui] .doc-more { margin: 0; border: 0; }
@media (min-width: 901px) {
  [data-ui].area-specimen .doc-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
}
/* On phones, where the comparison stacks, the four names lead to the areas' full bands. */
.area-jump { display: none; }

.services-page .entry>.text-link { width: auto; justify-content: flex-start; }
.services-page .entry-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
.services-page .entry { padding: 28px 0 0; border: 0; border-top: 3px solid var(--teal); border-radius: 0; background: none; }
.services-page .entry h3 { max-width: none; font-size: var(--fs-h2); line-height: 1.08; }
.services-page .entry p { max-width: 46ch; color: var(--ink); }

.services-page .scope-split>div, .services-page .scope-split>div:first-child, .services-page .service-footnotes>div { border-top: 1px solid var(--line); }
@media (min-width: 901px) {
  .services-page .scope-split, .services-page .service-footnotes { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; }
  .services-page .scope-split>div, .services-page .service-footnotes>div { display: grid; grid-template-columns: calc(50% - var(--split-gap) / 2) minmax(0, 1fr); column-gap: var(--split-gap); align-items: baseline; padding: 24px 0; }
  .services-page .service-footnotes>div:last-child { border-bottom: 1px solid var(--line); }
  .services-page .scope-split h3, .services-page .service-footnotes h3 { grid-row: 1 / span 2; margin: 0; font-size: var(--fs-lead); }
  .services-page .scope-split>div>:not(h3), .services-page .service-footnotes>div>:not(h3) { grid-column: 2; }
  .services-page .scope-split p, .services-page .service-footnotes p { margin: 0; color: var(--ink); font-size: var(--fs-body); }
  .services-page .service-footnotes .text-link { margin-top: 12px; }
}

@media (max-width: 1150px) {
  .services-hero-top { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .services-hero-copy .lead { max-width: 60ch; }
  .services-page .area-index { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .services-page .area-index .area-card:nth-child(n+3) { margin-top: 32px; }
}
@media (max-width: 900px) {
  .services-page .entry-grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
}
@media (max-width: 720px) {
  .area-nav>a:first-child { flex-basis: 100%; }
  .services-hero { padding-bottom: 72px; }
  .services-hero h1>span, .area-page-hero h1>span { margin-top: 10px; font-size: var(--fs-lead); letter-spacing: -.01em; }
  .services-page .area-index { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .services-page .area-index .area-card { display: block; grid-row: auto; margin: 0; padding: 28px 20px; background: var(--pale); }
  .services-page .area-index .area-card:nth-child(even) { background: var(--white); }
  .services-page .area-index .area-card:nth-child(n+3) { margin-top: 0; }
  .services-page .area-index .area-card>*, .services-page .area-index .area-card>:nth-child(odd) { padding: 0; background: none; }
  .services-page .area-index .area-card:hover>* { background: none; }
  .services-page .area-index .area-question { margin-top: 14px; }
  .services-page .area-index .area-outputs { margin-top: 14px; }
  .services-page .area-index .area-card>.text-link { display: flex; padding: 16px 0 0; }
  .area-jump { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 28px; }
  .area-jump a { padding: 10px 0; color: var(--ink); font-size: var(--fs-body); font-weight: 600; text-decoration: underline 2px var(--teal); text-underline-offset: 6px; }
  .services-page .area-index { margin-top: 28px; }
  /* The stacked summaries read as an index: their names a step below the bands' names. */
  .services-page .area-index h2 { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.01em; }
  .area-panel { padding: 40px 0 48px; }
  .area-panel:first-child { padding-top: 0; }
  [data-ui].area-specimen { padding: 26px 22px 22px; }
  [data-ui].area-specimen .doc-title { font-size: 22px; }
  .doc-more>summary { display: list-item; }
  [data-ui] .doc-more { margin-top: 4px; border-top: 1px solid #d6dee7; }
  .services-page .entry h3 { font-size: 30px; }
  .services-page .scope-split>div, .services-page .service-footnotes>div { padding-top: 20px; }
}

/* V5.7 Area pages (Assess, Architect, Govern, Assure), in line with Services after a review
   with the same skill and Codex. The buyer question stands beside the title as a pale field,
   so the first screen has no empty corner; running text keeps the Services measure; each area
   shows its full constructed example, as on Services; links keep their arrow beside the words;
   the first screen arrives on load. The contents menu and the reading column stay. */
@media (min-width: 901px) {
  /* The left column holds the longest descriptor (Govern, 758px) on one line at 1440. */
  .area-page-hero .page-intro { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); }
  .area-page-hero .page-intro>div:first-child>h1 { grid-column: 1; }
  .area-page-hero .page-intro>.decision-box { grid-row: 2 / span 3; align-self: stretch; display: flex; flex-direction: column; margin-top: 0; padding: 36px 36px 32px; }
  .area-page-hero .decision-box p:not(.eyebrow) { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.02em; }
  .area-page-hero .decision-box small { margin-top: auto; padding-top: 28px; }
}
.area-page-hero h1>span { max-width: none; }
.service-area-page .prose-section>p:not(.eyebrow), .service-area-page .check-list li,
.service-area-page .work-step p, .service-area-page .prose-section details p,
.service-area-page .variant-list p, .service-area-page .prose-section>.authority-note { max-width: 68ch; }
.service-area-page .prose-section>.engagement-result { max-width: 36em; }
.service-area-page .deliverables, .service-area-page .context-note { max-width: 72ch; }
.service-area-page [data-ui].area-specimen { margin-top: 40px; background: var(--pale); }
.service-area-page .package-link>.text-link, .service-area-page .check-scope>.text-link { width: auto; align-self: flex-start; justify-content: flex-start; }
/* An odd last scope takes the full row instead of leaving half of it empty (Architect). */
.service-area-page .area-package-grid>:last-child:nth-child(odd) { grid-column: 1 / -1; }
.service-area-page .area-package-grid>:last-child:nth-child(odd) p { max-width: 68ch; }
/* The current area is underlined, not shadowed. */
.area-nav a.is-active { box-shadow: none; text-decoration: underline 2px var(--teal); text-underline-offset: 9px; }
/* Tablet: the contents menu becomes an index above the column instead of a narrow rail. */
@media (min-width: 721px) and (max-width: 900px) {
  .service-area-page .body-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .service-area-page .toc { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; padding: 12px 0 0; }
  .service-area-page .toc p { width: 100%; margin-bottom: 6px; }
  .service-area-page .toc a { padding: 7px 0; }
}
@media (max-width: 720px) {
  .area-page-hero { padding-top: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .area-page-hero .page-intro>div>.eyebrow { animation: v5-rise 600ms var(--ease-out) 40ms both; }
  .area-page-hero h1 { animation: v5-rise 800ms var(--ease-expo) 100ms both; }
  .area-page-hero .page-intro .lead { animation: v5-rise 700ms var(--ease-out) 220ms both; }
  .area-page-hero .page-intro .actions { animation: v5-rise 600ms var(--ease-out) 300ms both; }
  .area-page-hero .decision-box { animation: v5-rise 700ms var(--ease-out) 360ms both; }
}

/* V5.8 Inner pages in the homepage's system (25 October 2026). The homepage and Services were
   redesigned in V5; the inner pages still used the old site's parts (arrow bullets, striped
   boxes, small teal numerals, smaller headings, a long white page), so they read as another site.
   - Lists are rows divided by thin lines, as in the homepage's documents: no glyph, no indent,
     text in ink at the body size. Arrows mark links only.
   - Boxes have one treatment: a pale field with the site's radius and no stripe. A box spans its
     column; the text inside keeps a reading measure of about 68 characters. Deliverables are one
     field holding rows instead of a box per item.
   - Ordered steps carry the homepage's numerals: plain figures (1, 2, 3) at the card-title size,
     weight 500, in one muted blue-grey (#7888a4: 3.6:1 on white, 3.3:1 on the pale ground).
   - From 721px up, inner section headings take the homepage's section size; sub-headings are the
     card-title size for blocks and the lead size for items. Phones keep their sizes.
   - One pale band per service page, edge to edge, behind "How the work unfolds", with its example
     document in white, as on Services. The contents rail stays above it.
   Every rule is an override from here, so the block moves as one piece. */
:root { --numeral: #7888a4; }

/* 1. Lists: rows divided by thin lines, a closing line at the end. */
.check-list, .routing-list { list-style: none; padding-left: 0; }
.prose-section>.check-list, .prose-section>.routing-list { max-width: none; }
.check-list li, .routing-list li, .case-story .check-list li, .service-area-page .check-list li {
  max-width: none;
  margin: 0;
  /* The line spans the list; the text keeps the measure. */
  padding: 15px max(0px, calc(100% - 68ch)) 15px 0;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.check-list li:last-child, .routing-list li:last-child { border-bottom: 1px solid var(--line); }
.check-list li::before { content: none; }
/* Case studies: the lines span the article, as its boxes do; the text keeps the paragraphs' 820px. */
.case-story .check-list { max-width: none; }
.case-story .check-list li { padding-right: max(0px, calc(100% - 820px)); }

/* 2. Boxes: a pale field, the site's radius, no stripe; full column width, text at a measure. */
.decision-box, .context-note, .takeaway, .prose-section>.authority-note,
.delivery-example>.example-status, .booking-panel, .example-flow>li, .check-scope {
  border: 0;
  border-radius: var(--radius);
  background: var(--pale);
}
.context-note, .prose-section>.authority-note, .delivery-example>.example-status {
  --box-pad: 30px;
  max-width: none;
  padding: 24px max(var(--box-pad), calc(100% - var(--box-pad) - 68ch)) 24px var(--box-pad);
}
.service-area-page .context-note, .service-area-page .prose-section>p.authority-note { max-width: none; }
/* The question beside the title spans its column at every width (it was held to 620px below 901px). */
.decision-box, .page-intro .decision-box { max-width: none; }
.takeaway { padding: 32px; }
.takeaway p, .check-scope p { max-width: 68ch; }
.deliverables, .service-area-page .deliverables {
  max-width: none;
  margin: 20px 0;
  padding: 6px 30px;
  list-style: none;
  border-radius: var(--radius);
  background: var(--pale);
}
.deliverables li {
  margin: 0;
  padding: 15px max(0px, calc(100% - 68ch)) 15px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.65;
}
.deliverables li+li { border-top: 1px solid var(--line); }
/* A thin rule above label/value rows and side-by-side columns, as on the homepage's case sheet;
   no column is singled out by a teal rule. */
.engagement-summary { border-top: 1px solid var(--line); }
.scope-split>div, .scope-split>div:first-child, .responsibility-grid>div, .responsibility-grid>div:first-child { border-top: 1px solid var(--line); }

/* 3. Numbered steps: the homepage's numerals. */
.work-step { grid-template-columns: 44px minmax(0, 1fr); gap: 0; align-items: baseline; }
.work-step p { max-width: 68ch; }
.work-step::before, .method-row::before { color: var(--numeral); font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; }
.method-row { grid-template-columns: 44px .8fr 1.2fr; }
.example-flow>li:before { color: var(--numeral); font: 500 var(--fs-h3)/1.2 var(--sans); }

/* 4. Headings: the homepage's section size; two sub-heading sizes. A case study's h2 are the
   chapters of one account, each over a paragraph, so they keep the in-page size (36px). */
@media (min-width: 721px) {
  .prose-section h2, .booking-panel h2 { font-size: var(--fs-h2); line-height: 1.1; }
  .prose-section h2 { max-width: none; }
}
.method-row h3 { font-size: var(--fs-h3); }
.contact-detail h3 { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.025em; }

/* 5. One pale band per service page, behind "How the work unfolds". The band is drawn by a
   border image set outside the box, so it neither scrolls sideways nor covers the contents rail. */
.service-area-page .prose-section#work, .service-detail .prose-section#work {
  padding-block: 80px;
  margin-bottom: 108px;
}
.service-area-page .prose-section#work [data-ui].area-specimen { background: var(--white); }

@media (max-width: 720px) {
  .context-note, .prose-section>.authority-note, .delivery-example>.example-status { --box-pad: 20px; padding-block: 20px; }
  .takeaway { padding: 24px 22px; }
  .deliverables, .service-area-page .deliverables { padding: 4px 20px; }
  .work-step { grid-template-columns: 36px minmax(0, 1fr); }
  .method-row { grid-template-columns: 36px minmax(0, 1fr); }
  .service-area-page .prose-section#work, .service-detail .prose-section#work { padding-block: 56px; margin-bottom: 76px; }
}

/* V5.9 Inner layout, separate version (25 October 2026). A design alternative for the four
   area pages and the 18 scope pages, after an independent review ranked "the desktop body is
   one white column beside the rail" as their main problem. The pages take the homepage's frame:
   - The contents menu is a white bar under the header. It holds while the page scrolls, keeps
     the page name and the section links in their order, and underlines the section being read
     (motion.js). Its booking link is a text link, so the header keeps the only solid button.
   - Every section is a row on the homepage's two edges: the label and heading on the left,
     holding while a long right column passes; text, lists, steps and questions on the right.
   - Card grids, the constructed example documents and the handoff flow take the full width
     under their heading row; their own columns sit on the same two edges.
   - Below 901px the pages stay one column and the menu is a static index, as before.
   The hero, breadcrumb and area switcher are unchanged. Words, links and their order too.
   Built on V5.8, which stays as on the main branch; where the two meet, this block decides. */
/* --toc-h: the bar's height, set by motion.js; without the script, room for two rows. */
:root { --toc-h: 90px; --toc-line: calc(76px + var(--toc-h)); }
.toc-cta .arrow { order: 1; }
@media (min-width: 901px) {
  /* An in-page jump lands below the header and the bar (motion.js measures the bar). */
  html:has(nav.toc) { scroll-padding-top: calc(var(--toc-line) + 32px); }
  :is(.service-area-page, .service-detail) :is(.prose-section, .commission-item, .handoff-example) { scroll-margin-top: 0; }
  :is(.service-area-page, .service-detail) .section-sm:has(>.body-grid) { padding-top: 0; }
  :is(.service-area-page, .service-detail) .body-grid { display: block; }

  /* The bar: white across the page, a line above and below. The page name, the section
     links and the booking link (held to the right) share one line, which wraps to a second
     only where they do not fit (at 1440, on the three scope pages with the most sections). */
  :is(.service-area-page, .service-detail) .body-grid>.toc {
    position: sticky;
    top: 76px;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    column-gap: 26px;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .body-grid>.toc>p { margin: 0 14px 0 0; color: var(--ink); white-space: nowrap; }
  .toc-links { display: contents; }
  .toc .toc-cta { margin-left: auto; }
  .toc-links a, .toc .toc-cta { padding: 11px 0; line-height: 1.5; white-space: nowrap; }
  .toc .toc-cta { display: inline-flex; gap: 8px; border: 0; }

  /* Sections: a row on the two edges, its heading holding while the right column passes. */
  :is(.service-area-page, .service-detail) .prose { padding-top: 104px; }
  :is(.service-area-page, .service-detail) .prose-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--split-gap);
    align-items: start;
    padding-bottom: 0;
    margin-bottom: 128px;
  }
  :is(.service-area-page, .service-detail) .prose-section:last-child { margin-bottom: 0; }
  .prose-section>* { grid-column: 2; min-width: 0; }
  .prose-section>.section-head { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: calc(var(--toc-line) + 32px); }
  .prose-section>.section-head>h2 { margin: 0; }
  /* V5.8's section size (52px at 1440) runs some headings to four or five lines in the left
     column; every section heading here takes the homepage's other section size instead, the
     four-areas statement's (43.2px at 1440). */
  :is(.service-area-page, .service-detail) .prose-section { --head-size: clamp(32px, 3vw, 46px); }
  :is(.service-area-page, .service-detail) .prose-section>.section-head>h2 { font-size: var(--head-size); }
  /* The right column starts level with the heading's capitals, below the label: a first line
     of text on them, or the first rule or field edge on them (V5.8's list rows and fields). */
  .prose-section>.section-head+* { margin-top: 36px; }
  .prose-section>.section-head+:is(.check-list, .routing-list, details, .engagement-summary, .scope-split,
    .deliverables, .example-status, .proof-list, .depth-list, .context-note) { margin-top: calc(37px + .186 * var(--head-size)); }
  .prose-section>.section-head+.commission-item { margin-top: calc(32px + .186 * var(--head-size)); padding-top: 0; }
  .prose-section>.section-head+.work-steps>.work-step:first-child { margin-top: 0; }
  .prose-section>.scope-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .delivery-example>.example-status { margin-bottom: 0; }
  .delivery-example>.example-intro { margin: 24px 0 0; }
  .delivery-example>.example-decision { margin: 28px 0 0; }

  /* Wide parts run the full width under the heading row. */
  .prose-section>:is(.area-package-grid, .assurance-checks, .assurance-checks+.small, .scope-variants,
    .area-specimen, .area-specimen+.actions, .example-flow, .handoff-example) { grid-column: 1 / -1; }
  .prose-section>.section-head+:is(.area-package-grid, .assurance-checks) { margin-top: 48px; }
  /* A heading holds only where nothing runs under it (a sticky grid item holds for the whole section). */
  .prose-section:has(>:is(.area-package-grid, .assurance-checks, .scope-variants, .area-specimen, .example-flow, .handoff-example))>.section-head { position: static; }
  /* Scope cards on the two edges; an odd last card keeps the full row (V5.7), its text the left column's measure. */
  .service-area-page .area-package-grid { column-gap: var(--split-gap); row-gap: 56px; }
  .service-area-page .area-package-grid>:last-child:nth-child(odd) p { max-width: calc(50% - var(--split-gap) / 2); }
  /* Assure's three checks side by side. */
  .service-area-page .assurance-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .service-area-page .check-scope { display: flex; flex-direction: column; }
  .service-area-page .check-scope>.text-link { margin-top: auto; padding-top: 20px; }
  .service-area-page .assurance-checks+.small { max-width: 68ch; }
  /* More situations: each name on the left edge, its description on the right edge. */
  .service-area-page .scope-variants { margin-top: 64px; }
  .service-area-page .variant-list>a { display: grid; grid-template-columns: calc(50% + var(--split-gap) / 2) minmax(0, 1fr) auto; column-gap: 0; align-items: start; }
  .service-area-page .variant-list>a>div { display: contents; }
  .service-area-page .variant-list h3 { padding-right: 48px; }
  .service-area-page .variant-list p { margin-top: 0; }
  .service-area-page .variant-list .arrow { margin: 4px 0 0 32px; }
  /* The example documents: their second column starts on the right edge. */
  .service-area-page .prose-section>.area-specimen { margin-top: 56px; }
  .service-area-page [data-ui].area-specimen .doc-rows { column-gap: var(--split-gap); }
  .prose-section>.area-specimen+.actions { margin-top: 28px; }
  .delivery-example>.example-flow { margin: 48px 0 16px; }
  .delivery-example .handoff-example .example-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
  .delivery-example .handoff-example .example-rows>div { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; }

  /* Notes that follow a section on some scope pages join its right column. */
  .prose>:is(.claim-note, .area-classification-note) { margin: -88px 0 128px calc(50% + var(--split-gap) / 2); }
  /* The related scopes heading on the same two edges. */
  .service-detail .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
}
/* Narrower desktops and tablets held sideways: the bar a step smaller, so it never needs
   more than two rows. */
@media (min-width: 901px) and (max-width: 1365px) {
  :is(.service-area-page, .service-detail) .body-grid>.toc { column-gap: 20px; }
  .body-grid>.toc>p { margin-right: 8px; }
  .toc-links a, .toc .toc-cta, .body-grid>.toc>p { font-size: 14px; }
}
/* Tablet and phones: one column; the menu is a static index above it, every link in view. */
@media (max-width: 900px) {
  :is(.service-area-page, .service-detail) .body-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  :is(.service-area-page, .service-detail) .toc { position: static; display: block; padding: 12px 0 0; }
  :is(.service-area-page, .service-detail) .toc>p { width: auto; margin-bottom: 4px; }
  .toc-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
  .toc-links a, .toc .toc-cta { padding: 11px 0; }
  .toc .toc-cta { display: inline-flex; gap: 8px; border: 0; color: var(--teal); }
}

/* V5.9.1 Fixes from the scoring round (26 October 2026), on V5.9. Codex and an independent
   reviewer both preferred V5.9 and named the same faults; each is fixed here, no word changed.
   - "Choosing the contribution" on the four area pages: its heading ran to three or four lines
     in the left column. It now spans the row, as the homepage's method heading does; the text
     and its link stand on the left edge, the responsibilities note on the right.
   - The contents bar holds under the header only while it fits on one line (motion.js measures
     it). A bar that wraps (smaller laptops, the three longest scope pages) stays above the
     first section as an index, so two rows never cover the page. Without the script it stays.
   - The question beside an area title takes its own height (it stretched to the hero's, with a
     gap inside), and the service heroes sit closer to the area switcher.
   - "More situations" on phones and tablets: the arrow stands beside the name, so the
     description takes the full width.
   - Teal text on a pale field on the service pages (labels, links) was a step darker, #007789,
     4.8:1 instead of 4.48:1. V5.9.2 replaces it with one teal ink on every page. */
:root { --toc-h: 0px; }
:is(.service-area-page, .service-detail) .page-hero { padding-top: 20px; }
@media (min-width: 901px) {
  :is(.service-area-page, .service-detail) .body-grid>.toc:not(.is-one-line) { position: static; }

  .service-area-page .prose-section#boundaries>.section-head { grid-column: 1 / -1; grid-row: auto; position: static; margin-bottom: 48px; }
  .service-area-page .prose-section#boundaries>.section-head+* { margin-top: 0; }
  .service-area-page .prose-section#boundaries>:not(.section-head):not(.context-note) { grid-column: 1; }
  /* 9px sets the field's edge on the first line's capitals beside it. */
  .service-area-page .prose-section#boundaries>.context-note { grid-column: 2; grid-row: 2 / span 20; margin-top: 9px; }

  .area-page-hero .page-intro>.decision-box { align-self: start; }
  .area-page-hero .decision-box small { margin-top: 0; padding-top: 24px; }
}
@media (max-width: 900px) {
  .service-area-page .variant-list>a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; }
  .service-area-page .variant-list>a>div { display: contents; }
  .service-area-page .variant-list .arrow { grid-column: 2; grid-row: 1; margin-top: 5px; }
  .service-area-page .variant-list p { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 720px) {
  :is(.service-area-page, .service-detail) .page-hero { padding-top: 12px; }
}

/* V5.9.2 Contrast round (26 October 2026), on V5.9.1. The founder could not see V5.9.1's darker
   teal (a 6% step, by design) and asked which elements would gain from more contrast. Measured on
   all 50 pages at 1440 and 390, then checked by eye and by Codex; no word changed.
   - One teal ink for teal text on every page, #006b7c, the brand teal's hue a step darker: 6.2:1 on
     white, 5.7:1 on the pale field and 5.3:1 on the Experience card (was 4.91, 4.48 and 4.20).
     Fills and marks keep the brand teal #007c8f: buttons, the closing band, the active underlines,
     the Services entry stripe, the diagram's points. Eyebrow squares and link underlines follow
     their text.
   - Experience filters: the inactive ones take the pale field and the ink, so all four read as
     buttons; hover steps the field.
   - The small print in the example documents (scope notes, the named principal) is 15px, up from 13px.
   - The homepage diagram has a phone drawing (build.py): the 540-wide map shrank its labels to
     about 9px on a phone. The phone map is drawn at the phone's width, same nodes, same words. */
:root { --teal-brand: #007c8f; --teal: #006b7c; }
.button { background: var(--teal-brand); border-color: var(--teal-brand); }
.closing { background: var(--teal-brand); }
.nav-link::after { background: var(--teal-brand); }
.area-nav a.is-active, .area-jump a, .toc-links a.is-current { text-decoration-color: var(--teal-brand); }
.services-page .entry { border-top-color: var(--teal-brand); }
[data-ui] .doc-note, [data-ui] .doc-sign { font-size: 15px; }

/* V5.9.3 Navy at meaningful sections (26 October 2026), on V5.9.2. The founder: the homepage has
   navy, Services and the service pages have none outside the footer. Without touching the header
   or the title areas, the inner pages take the homepage's own rule: navy marks the four areas and
   how the work is done; what is read in detail stays light. Agreed independently with Codex.
   - Services: the Assess / Architect / Govern / Assure comparison under the title sits on a navy
     field, as the homepage's list of the same four areas. Its rows keep their tone step (navy and
     a step lighter); names, questions and results in white, descriptors in light grey, links and
     arrows in cyan, as on the homepage.
   - The 4 area pages and 18 scope pages: "How the work unfolds" is a navy band (build.py adds
     the existing .dark), as the homepage's "More system evidence" with its numbered steps. The
     example document inside it stays a white document, as in the homepage's opening.
   The header keeps its behaviour: it reads only top-level sections, so it stays white here. */
.services-page .services-hero { padding-bottom: 0; }
.services-page .area-index { padding-block: 56px 64px; background-color: var(--navy); border-image: linear-gradient(var(--navy) 0 0) fill 0 / 0 / 0 100vmax; }
.services-page .area-index .area-card>* { background: var(--navy); }
.services-page .area-index .area-card>:nth-child(odd) { background: var(--navy-2); }
@media (hover: hover) and (pointer: fine) { .services-page .area-index .area-card:hover>*, .services-page .area-index .area-card:focus-visible>* { background: var(--navy-3); } }
.services-page .area-index h2, .services-page .area-index .area-card:hover h2,
.services-page .area-index .area-question, .services-page .area-index .area-outputs>span { color: var(--white); }
.services-page .area-index .area-descriptor { color: var(--navy-label); }
.services-page .area-index .area-outputs p { color: rgba(255, 255, 255, .82); }
.services-page .area-index .text-link, .services-page .area-index .arrow { color: var(--mint); }
.services-page .area-index .area-card:focus-visible { outline-color: var(--mint); }
@media (max-width: 720px) {
  .services-page .area-index { padding-block: 8px; }
  .services-page .area-index .area-card { background: var(--navy); }
  .services-page .area-index .area-card:nth-child(even) { background: var(--navy-2); }
  .services-page .area-index .area-card>*, .services-page .area-index .area-card>:nth-child(odd),
  .services-page .area-index .area-card:hover>* { background: none; }
}

.service-area-page .prose-section#work, .service-detail .prose-section#work { border-image: linear-gradient(var(--navy) 0 0) fill 0 / 0 / 0 100vmax; }
.prose-section#work.dark h2, .prose-section#work.dark .work-step h3 { color: var(--white); }
.prose-section#work.dark .work-step p { color: var(--navy-text); }
.prose-section#work.dark .work-step::before { color: var(--navy-label); }
.prose-section#work.dark [data-ui].area-specimen { color: var(--ink); }

/* V5.9.4 The top of the four area pages (26 October 2026), on V5.9.3. The founder: Assess,
   Architect, Govern and Assure need navy at the top, and the top should end in navy. The
   founder's layout, after a Services-order version (title and introduction on white, the question
   on a navy band) that they did not want. No word and no markup changed.
   - The title stays on white. Navy starts under it: the introduction in light text and the button
     in cyan, as in the homepage's opening.
   - The buyer question keeps its place, size and pale field beside the title, so it starts on
     white and runs over the navy's upper edge, as the homepage's card runs over its lower edge.
     The pale field marks the box's edge on white; on navy it reads as a light card. Phones stack
     it on the navy under the button.
   - The contents bar continues the navy a step lighter, the homepage's row hover (#2a2a6c): page
     name in white, links in light grey, the booking link in cyan. While the bar holds under the
     header, the section being read is a white tab; where the bar wraps it is an index at the foot
     of the navy, the section being read underlined in cyan. A fine line marks its lower edge
     where it passes over the navy work band.
   The navy is the title grid's ::before, set behind the introduction's rows and drawn to the
   page's edges and down to the hero's foot; the text and the box stand above it.
   The 18 service pages followed in V5.9.6 (their own top, the same bar). */
.area-page-hero { --navy-top: 48px; --navy-foot: 56px; padding-bottom: var(--navy-foot); }
.area-page-hero .page-intro::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 3 / span 2;
  align-self: stretch;
  background-color: var(--navy);
  border-image: linear-gradient(var(--navy) 0 0) fill 0 / 0 / 0 100vmax var(--navy-foot);
}
.area-page-hero .page-intro>div:first-child>h1 { margin-bottom: 40px; }
.area-page-hero .page-intro>div:first-child>.lead { grid-row: 3; margin-top: var(--navy-top); color: var(--navy-text); }
.area-page-hero .page-intro>div:first-child>.actions { grid-row: 4; }
.area-page-hero .page-intro>div:first-child>:is(.lead, .actions), .area-page-hero .page-intro>.decision-box { z-index: 1; }
.area-page-hero .actions .button { color: var(--navy); background: var(--mint); border-color: var(--mint); }
@media (hover: hover) and (pointer: fine) { .area-page-hero .actions .button:hover { background: #87f8ff; border-color: #87f8ff; } }
.area-page-hero .actions .button:focus-visible { outline-color: var(--mint); }
/* Phones and tablets: one column, the box on the navy under the button. */
@media (max-width: 900px) {
  .area-page-hero { --navy-top: 32px; --navy-foot: 40px; }
  .area-page-hero .page-intro { row-gap: 0; }
  .area-page-hero .page-intro::before { grid-row: 3 / span 3; }
  .area-page-hero .page-intro>div:first-child { display: contents; }
  .area-page-hero .page-intro>div:first-child>*, .area-page-hero .page-intro>.decision-box { grid-column: 1; }
  .area-page-hero .page-intro>div:first-child>.eyebrow { grid-row: 1; }
  .area-page-hero .page-intro>div:first-child>h1 { grid-row: 2; margin-bottom: 32px; }
  .area-page-hero .page-intro>.decision-box { grid-row: 5; margin-top: 36px; }
}

/* The contents bar on the four area pages and, from V5.9.6, the 18 service pages. */
:is(.service-area-page, .service-detail) .body-grid>.toc>p { color: var(--white); }
:is(.service-area-page, .service-detail) .toc-links a { color: var(--navy-label); }
@media (hover: hover) and (pointer: fine) { :is(.service-area-page, .service-detail) .toc-links a:hover { color: var(--mint); } }
:is(.service-area-page, .service-detail) .toc .toc-cta, :is(.service-area-page, .service-detail) .toc .toc-cta .arrow { color: var(--mint); }
@media (hover: hover) and (pointer: fine) { :is(.service-area-page, .service-detail) .toc .toc-cta:hover { color: #87f8ff; } }
:is(.service-area-page, .service-detail) .toc a:focus-visible { outline-color: var(--mint); }
:is(.service-area-page, .service-detail) .toc-links a.is-current { color: var(--white); text-decoration: underline 2px var(--mint); text-underline-offset: 9px; }
@media (min-width: 901px) {
  :is(.service-area-page, .service-detail) .body-grid>.toc {
    align-items: flex-end;
    column-gap: 0;
    background-color: var(--navy-3);
    border-image: linear-gradient(var(--navy-3) 0 calc(100% - 1px), #4c4c84 calc(100% - 1px)) fill 0 // 0 100vmax;
  }
  :is(.service-area-page, .service-detail) .body-grid>.toc>p { margin: 0 12px 0 0; padding-bottom: 12px; }
  :is(.service-area-page, .service-detail) .toc-links a { margin-top: 8px; padding: 10px 14px 12px; border-radius: var(--radius) var(--radius) 0 0; }
  :is(.service-area-page, .service-detail) .toc .toc-cta { padding: 0 0 12px; }
  :is(.service-area-page, .service-detail) .toc.is-one-line .toc-links a.is-current { color: var(--ink); background: var(--white); text-decoration: none; }
}
@media (min-width: 901px) and (max-width: 1365px) {
  :is(.service-area-page, .service-detail) .toc-links a { padding-inline: 10px; }
}
@media (max-width: 900px) {
  :is(.service-area-page, .service-detail) .section-sm:has(>.body-grid) { padding-top: 0; }
  :is(.service-area-page, .service-detail) .body-grid { gap: 56px; }
  :is(.service-area-page, .service-detail) .body-grid>.toc { padding: 20px 0 22px; border: 0; background-color: var(--navy-3); border-image: linear-gradient(var(--navy-3) 0 0) fill 0 // 0 100vmax; }
}

/* V5.9.5 "What you receive" on a pale band (26 October 2026), on V5.9.4. The founder: between the
   navy top and "How the work unfolds" the four area pages ran plain white (about 2,650px on Assess
   at 1440; the homepage never runs more than about 1,300px). Codex, from rendered options, and the
   founder chose the result and deliverables over "Relevant scopes" (a long band on Assess, running
   into the navy): the reader's second question, "What will I get?", gets its own field.
   - A full-width pale band (the homepage's middle tone) behind the section, 96px above and below
     (56px on phones); its deliverables box and Govern's authority note turn white, rows unchanged.
   - "Relevant scopes" stays white and keeps its pale "More situations" panel. Scope pages unchanged. */
.service-area-page .prose-section#outputs {
  padding-block: 96px;
  background-color: var(--pale);
  border-image: linear-gradient(var(--pale) 0 0) fill 0 / 0 / 0 100vmax;
}
.service-area-page .prose-section#outputs>:is(.deliverables, .authority-note) { background: var(--white); }
.service-area-page .prose-section#outputs>.deliverables { padding-inline: 32px; }
@media (max-width: 720px) {
  .service-area-page .prose-section#outputs { padding-block: 56px; }
  .service-area-page .prose-section#outputs>.deliverables { padding-inline: 20px; }
}

/* V5.9.6 The 18 service pages in the area pages' system (26 October 2026), on V5.9.5. The founder:
   the service pages no longer matched Services and the area pages, and they double as landing pages,
   so an all-white top looked unfinished. Codex argued for a light top (navy only for the areas) before
   the landing-page point was raised. No word and no markup changed.
   - The top: the title and its one-line promise stay on white; navy starts 40px under the promise and
     holds the introduction (light text) and the button (cyan), as on the area pages. "The decision"
     keeps its place beside the promise line, so it crosses the navy's upper edge (30-52% of it on
     white at 1440 across the 18 pages; the area pages' box starts level with the title instead).
   - The contents bar is the area pages' lighter navy with the white tab (V5.9.4's rules now cover
     both). Where it wraps (three pages at 1440) it stays an index at the foot of the navy.
   - Pale marks what is agreed and what the work looks like, never the first section under the bar:
     "Scope & responsibility" on every service page, starting where the navy method band ends; and
     the worked example on the five long pages ("The engagement", "Inspect a handoff", "Assessment
     depth", "Engagement options"; one field where two follow each other). Boxes inside turn white.
     A note that follows the scope section (Peer Review, Production Readiness) stays inside its band.
   - Phones: the title a step smaller (36px) so the button shows on the first screen.
   - The handoff example's "Constructed example" notice is a quiet note, not a box; same words.
   From V5.9.12 the eight situation pages (.journey-page) share this top. */
:is(.service-detail, .journey-page) .page-hero { --navy-top: 48px; --navy-foot: 56px; padding-bottom: var(--navy-foot); }
:is(.service-detail, .journey-page) .page-hero .page-intro::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 4 / span 2;
  align-self: stretch;
  background-color: var(--navy);
  border-image: linear-gradient(var(--navy) 0 0) fill 0 / 0 / 0 100vmax var(--navy-foot);
}
:is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child>.hero-subtitle { grid-row: 3; margin-bottom: 40px; }
:is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child>.lead { grid-row: 4; margin-top: var(--navy-top); color: var(--navy-text); }
:is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child>.actions { grid-row: 5; }
:is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child>:is(.lead, .actions), :is(.service-detail, .journey-page) .page-hero .page-intro>.decision-box { z-index: 1; }
:is(.service-detail, .journey-page) .page-hero .actions .button { color: var(--navy); background: var(--mint); border-color: var(--mint); }
@media (hover: hover) and (pointer: fine) { :is(.service-detail, .journey-page) .page-hero .actions .button:hover { background: #87f8ff; border-color: #87f8ff; } }
:is(.service-detail, .journey-page) .page-hero .actions .button:focus-visible { outline-color: var(--mint); }
@media (max-width: 900px) {
  :is(.service-detail, .journey-page) .page-hero { --navy-top: 32px; --navy-foot: 40px; }
  :is(.service-detail, .journey-page) .page-hero .page-intro { row-gap: 0; }
  :is(.service-detail, .journey-page) .page-hero .page-intro::before { grid-row: 4 / span 3; }
  :is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child { display: contents; }
  :is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child>*, :is(.service-detail, .journey-page) .page-hero .page-intro>.decision-box { grid-column: 1; }
  :is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child>.eyebrow { grid-row: 1; }
  :is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child>h1 { grid-row: 2; }
  :is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child>.hero-subtitle { margin-bottom: 32px; }
  :is(.service-detail, .journey-page) .page-hero .page-intro>.decision-box { grid-row: 6; margin-top: 36px; }
}

/* Pale fields on the service pages. */
.service-detail .prose-section:is(#scope, #engagement, #delivery-example, #assessment-depth, #commissions) {
  --pale-pad: 96px;
  padding-block: var(--pale-pad);
  background-color: var(--pale);
  border-image: linear-gradient(var(--pale) 0 0) fill 0 / 0 / 0 100vmax;
}
.service-detail .prose-section:is(#scope, #engagement, #delivery-example, #assessment-depth, #commissions)
  :is(.context-note, .example-decision, .example-flow>li, details, .depth-item) { background: var(--white); }
/* Two example sections in a row share one field. */
.service-detail .prose-section:is(#engagement, #delivery-example, #assessment-depth):has(+ :is(#delivery-example, #assessment-depth)) { margin-bottom: 0; }
.service-detail .prose-section:is(#engagement, #delivery-example, #assessment-depth)+.prose-section:is(#delivery-example, #assessment-depth) { padding-top: 32px; }
/* The scope field starts where the navy method band ends. */
.service-detail .prose-section#work:has(+ #scope) { margin-bottom: 0; }
/* A note after the scope section stays inside its field. */
.service-detail .prose-section#scope:has(+ :is(.claim-note, .area-classification-note)) { padding-bottom: 0; margin-bottom: 0; }
.service-detail .prose-section#scope+:is(.claim-note, .area-classification-note) {
  margin-top: 32px;
  margin-bottom: calc(var(--pale-gap, 96px) + 128px);
  box-shadow: 0 0 0 100vmax var(--pale);
  clip-path: inset(-32px -100vmax calc(-1 * var(--pale-gap, 96px)) -100vmax);
}
.service-detail .prose-section#scope+.claim-note { background: var(--pale); }
/* The box's side padding was a share of the whole reading width, which squeezed its text into a
   one-word column in the right half (V5.8's measure rule); it takes the box's own padding. */
.service-detail .prose-section#scope+.area-classification-note { padding: 24px var(--box-pad); background: var(--white); }
/* The handoff example's notice: a quiet note. */
.service-detail .delivery-example>.example-status { padding: 0; background: none; color: var(--muted); }
@media (max-width: 720px) {
  .service-detail .prose-section:is(#scope, #engagement, #delivery-example, #assessment-depth, #commissions) { --pale-pad: 56px; }
  .service-detail .prose-section#scope+:is(.claim-note, .area-classification-note) { --pale-gap: 56px; margin-bottom: calc(56px + 76px); }
}

/* V5.9.7 How We Work in the system (27 October 2026), on V5.9.6. A review (Codex and Claude) found
   the page on the pre-redesign template: five numbered steps without a heading of their own, 164px
   below the principle; three sections holding text on the left only (about 690px empty at 1440);
   the four example documents in an indented 900px column (x 270, every other section x 80), pale
   boxes on white, 2,551px long. The founder chose to keep the white top and give the method a pale
   band (a navy top would have no decision box or button to carry). Same words; the markup moved.
   - The method: "Depth of investigation" and its paragraph on the left, the five steps on the right,
     one section on a pale band, as the homepage and the service pages show a method.
   - "AI in our investigation" and "Make the arrangement explicit": heading left, text right.
   - The examples: built like the Services page's four areas, one band per area (pale, white, pale,
     white) with the document in the other tone, on the page's edge. All four stay open. Their
     heading keeps the full width (two lines; three in the left column).
   - Two columns on this page share the homepage's 1fr/1fr split.
   - Phones, on the four company pages (How We Work, About, Experience, Partners): the title at the
     service pages' 36px, its forced line break released (How We Work 5 lines to 4, Partners 6 to 4,
     Experience 4 to 3). A space before each <br> in the markup keeps the words apart. */
.approach-method { padding-block: 96px; background: var(--pale); }
.approach-method .method-rows { counter-reset: method; }
.approach-method .method-intro .lead { margin-top: 28px; }
@media (min-width: 901px) {
  .method-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .method-split>.method-intro { position: sticky; top: 140px; }
  .approach-method .method-row { grid-template-columns: 44px minmax(0, 1fr); column-gap: 0; row-gap: 10px; padding: 28px 0 30px; }
  .approach-method .method-row:first-child { padding-top: 0; border-top: 0; }
  .approach-method .method-row>h3, .approach-method .method-row>p { grid-column: 2; max-width: none; }
  .approach-method .method-row::before { grid-row: 1 / span 2; }
  .approach-page .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
  .approach-page .principle-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .approach-page .principle-grid>div:first-child>h2 { margin-bottom: 0; }
  .approach-page .principle-grid>div:last-child { margin-top: 36px; }
}
@media (max-width: 900px) {
  .approach-method .method-rows { margin-top: 48px; }
}
/* The examples' heading needs the width to stay on two lines; its paragraph and links follow it. */
.output-examples .section-heading { grid-template-columns: minmax(0, 1fr); row-gap: 28px; align-items: start; }
.output-examples .section-heading .lead { max-width: 640px; }
/* A link to one example lands on its band's top edge, under the header (the page keeps 105px of
   scroll padding, 90px on phones; the header is 76px). */
.output-examples .area-panel { scroll-margin-top: -29px; }
.output-examples [data-ui] .doc-title { margin-top: 0; }
@media (max-width: 720px) {
  .approach-method { padding-block: 56px; }
  .output-examples .area-panel { scroll-margin-top: -14px; }
  .company-page .page-hero h1 br { display: none; }
}

/* V5.9.8 Experience in the system (27 October 2026), on V5.9.7. A review (Codex and Claude) found
   the list page a grid of eight equal pale cards, the one Sparkling engagement barely set apart from
   six prior-employment entries and one R&D entry; and the eight case pages on the old template: a
   260px rail holding three facts (labels nearer the wrong value), story lines of about 103
   characters, the paid method a long grey box in the column, two related services in three columns.
   Same words; the markup moved. The founder removed the filter buttons ("not needed").
   - The list: the Sparkling engagement leads on a navy panel; the other seven are open rows divided
     by lines. Each entry: label and title left, summary, context and link right, at the homepage's
     split. The labels stay, so colour is never the only sign of what an entry is.
   - A case page: the three facts in a pale box beside the introduction, as the question box sits on
     a service page; each chapter a row, heading left and text right (about 70 characters a line);
     the names in "Name: finding" lists in bold; the lesson across the width, its note under it.
   - The paid case's method: a white document on a pale band across the page, as the homepage draws
     the same method; the band is drawn outside the box (as on the service pages), so it never
     scrolls sideways. A link to it lands on the band's top edge.
   - Related services on a case page: the two in two columns.
   - Phones: case titles at the company pages' 36px. */
.experience-index { padding-top: 0; border-top: 0; }
.experience-index .experience-list { display: block; margin-top: 0; }
.experience-index .experience-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 14px;
  padding: 34px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.experience-index .experience-card:last-child { border-bottom: 1px solid var(--line); }
.experience-index .experience-card h3 { margin: 10px 0 0; font-size: var(--fs-h3); line-height: 1.2; }
.experience-index .experience-card p { margin: 0; color: var(--ink); font-size: var(--fs-body); line-height: 1.65; }
.experience-index .experience-card .sector { display: block; margin: 12px 0 0; padding: 0; }
.experience-index .experience-card .text-link { display: flex; width: 100%; margin-top: 22px; justify-content: space-between; }
.experience-index .experience-card[data-case-type="sparkling"] {
  margin-bottom: 24px;
  padding: 44px 48px;
  border: 0;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
}
.experience-index .experience-card[data-case-type="sparkling"] .pill { color: var(--mint); }
.experience-index .experience-card[data-case-type="sparkling"] h3 { color: var(--white); font-size: var(--fs-h2-inline); line-height: 1.15; }
@media (hover: hover) and (pointer: fine) { .experience-index .experience-card[data-case-type="sparkling"]:hover h3 { color: var(--white); } }
.experience-index .experience-card[data-case-type="sparkling"] p { color: var(--navy-text); }
.experience-index .experience-card[data-case-type="sparkling"] .sector { color: var(--navy-label); }
.experience-index .experience-card[data-case-type="sparkling"] .text-link,
.experience-index .experience-card[data-case-type="sparkling"] .text-link .arrow { color: var(--mint); }
.experience-index .experience-card[data-case-type="sparkling"]+.experience-card { border-top: 0; }
.experience-index .context-note { margin-top: 48px; }

.case-hero h1 { margin-top: 26px; }
.case-hero .case-meta { display: block; margin: 36px 0 0; padding: 6px 30px; border: 0; border-radius: var(--radius); background: var(--pale); font-size: var(--fs-body); }
.case-hero .case-meta>div { padding: 16px 0; }
.case-hero .case-meta>div+div { border-top: 1px solid var(--line); }
.case-hero .case-meta dt { margin: 0; color: var(--muted); font: 600 var(--fs-ui)/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.case-hero .case-meta dd { margin: 4px 0 0; color: var(--ink); line-height: 1.5; }

.case-story .case-chapter>h2 { margin: 0 0 20px; }
.case-story .case-chapter+.case-chapter { margin-top: 56px; }
.case-story .case-chapter p { max-width: 68ch; color: var(--ink); font-size: var(--fs-body); line-height: 1.65; }
.case-story .check-list li { padding-right: 0; }
.case-story .check-list strong { font-weight: 600; }
.case-story .case-close { margin-top: 64px; }
.case-story .case-close>.takeaway { margin-top: 0; }
.case-story .case-close>.takeaway>p:not(.eyebrow) { margin-top: 0; }
.case-story .case-close>.evidence-note { margin-top: 24px; padding-top: 0; border-top: 0; max-width: 68ch; }
.case-doc { padding: 40px 48px 36px; border-radius: var(--radius); background: var(--white); color: var(--ink); }
.case-doc>p.eyebrow { margin-bottom: 0; color: var(--teal); font-size: var(--fs-ui); font-weight: 600; }
.case-story .case-doc h2 { margin: 10px 0 24px; font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.case-doc .case-evidence>div { margin-top: 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.case-doc .case-evidence dd { margin-top: 8px; color: var(--muted); font-size: var(--fs-body); line-height: 1.6; }
.case-doc .case-finding { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.case-doc .case-finding h3 { margin-bottom: 8px; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.015em; }
.case-doc .case-finding>.small { margin-bottom: 22px; color: var(--muted); font-size: var(--fs-ui); }

@media (min-width: 901px) {
  .experience-index .experience-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .experience-index .experience-card[data-case-type="sparkling"] h3 { max-width: 16ch; }

  .case-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr); column-gap: 64px; align-items: start; }
  .case-intro>div:first-child { display: contents; }
  .case-intro .pill { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .case-intro h1 { grid-column: 1 / -1; grid-row: 2; }
  .case-intro .case-lede { grid-column: 1; grid-row: 3; }
  .case-intro>.case-meta { grid-column: 2; grid-row: 3; margin-top: 24px; }

  .case-story .case-chapter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .case-story .case-chapter>h2 { margin: 0; }
  .case-story .case-chapter+.case-chapter { margin-top: 72px; }
  .case-story .case-close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
  .case-story .case-close>.takeaway { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; padding: 40px 48px; }
  .case-story .case-close>.takeaway>.eyebrow { margin: 6px 0 0; }
  .case-story .case-close>.evidence-note { grid-column: 2; }

  .case-doc .case-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }

  .case-detail .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
  .case-detail .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--split-gap); }
}
@media (min-width: 721px) and (max-width: 900px) {
  .case-hero .case-meta { max-width: 620px; }
}
@media (max-width: 900px) {
  .case-doc .case-evidence>div+div { margin-top: 20px; }
}
@media (max-width: 720px) {
  .experience-index .experience-card { padding: 28px 0; }
  .experience-index .experience-card[data-case-type="sparkling"] { padding: 30px 22px; }
  .experience-index .experience-card[data-case-type="sparkling"] h3 { font-size: var(--fs-h3); }
  .case-hero .case-meta { padding: 4px 22px; }
  .case-story .case-chapter+.case-chapter { margin-top: 44px; }
  .case-doc { padding: 26px 22px 22px; }
}

/* V5.9.9 The case pages in the site's fields (27 October 2026), on V5.9.8. The founder: the case pages
   still looked very different from the rest of the site. A review (Codex and Claude) found them white
   from the title to the related services (the paid case for 3,900px but one band), where every other page
   changes field and the homepage, Services, the area and service pages, How We Work and About each have a
   navy section; seven to nine chapter headings at 36px without a label under a 52px "Related services";
   the same row repeated whatever its weight ("Seven risk patterns" 900px down the right half). The top
   stays white: a navy top with a box crossing it is how the site marks a service to buy, and six of these
   pages describe prior employment. Same words; one class added in the markup.
   - One order on all eight: white top, the account on a pale band, the lesson on a navy band, related
     services on white, the teal closing. Lists and the paid method are white boxes on the pale band. The
     bands are drawn outside the boxes, so they never scroll sideways.
   - Chapter headings and "Related services" at the service pages' section size.
   - A list of more than five named items (the seven risk patterns) takes the full width in two columns
     under its heading, read down each column.
   - The facts box starts on the column line of everything below it (x 768 at 1440). */
.case-body { padding: 0; border-top: 0; }
.case-body+.section { border-top: 0; }
/* Each band's own box carries its colour too, so the text keeps its ground if the band is not drawn. */
.case-story { padding-top: 96px; background: var(--pale); border-image: linear-gradient(var(--pale) 0 0) fill 0 / 0 / 0 100vmax; }
.case-story .check-list { padding: 4px 30px; border-radius: var(--radius); background: var(--white); }
.case-story .check-list li:first-child { border-top: 0; }
.case-story .check-list li:last-child { border-bottom: 0; }
.case-story .case-method { margin-top: 96px; scroll-margin-top: 16px; }
.case-story .case-close {
  margin-top: 96px;
  padding-block: 88px;
  background: var(--navy);
  border-image: linear-gradient(var(--navy) 0 0) fill 0 / 0 / 0 100vmax;
  color: var(--white);
}
.case-story .case-close>.takeaway { padding: 0; border-radius: 0; background: none; }
.case-story .case-close>.takeaway>.eyebrow { color: var(--navy-label); }
.case-story .case-close>.takeaway>p:not(.eyebrow) { color: var(--white); font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.02em; }
.case-story .case-close>.evidence-note { color: var(--navy-label); }
@media (min-width: 721px) {
  .case-story .case-chapter>h2, .case-detail .section-heading h2 { font-size: clamp(32px, 3vw, 46px); line-height: 1.1; }
}
@media (min-width: 901px) {
  /* The pale facts box keeps clear of the pale band below it. */
  .case-hero { padding-bottom: 80px; }
  .case-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
  .case-story .case-chapter.wide { display: block; }
  .case-story .case-chapter.wide>h2 { margin-bottom: 32px; }
  .case-story .case-chapter.wide .check-list { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .case-story .case-chapter.rows-4 .check-list { grid-template-rows: repeat(4, auto); }
  .case-story .case-chapter.rows-4 .check-list li:nth-child(5) { border-top: 0; }
}
@media (max-width: 720px) {
  .case-story { padding-top: 56px; }
  .case-story .check-list { padding: 2px 20px; }
  .case-story .case-method { margin-top: 56px; }
  .case-story .case-close { margin-top: 56px; padding-block: 56px; }
}

/* V5.9.10 About in the system (28 October 2026), on V5.9.9. A review (Codex and Claude) found the page
   on the pre-redesign template: white from the header to y 1,785 (the top, "Why we exist" and the
   founder) before its one navy band, and no pale field; "Why we exist" and "Architecture expertise"
   stacked, their right-hand paragraph 22 to 24px low (inline margins); right-hand columns at x 586, 752
   and 860; the founder's account about 91 characters a line under a 52px name; on phones the facts in
   three 105px columns. Same words; the markup moved. The founder kept the order (the company first)
   and chose Codex's top.
   - The top: the title across; the subtitle and the lead side by side under it, on the split.
   - "Why we exist" on a pale band. Its heading spans (it needs 736px); its two paragraphs sit on the
     split's two lines, level; the company's own description at body size in ink, not a grey note.
   - The founder as a split: label, name (36px, was 52) and photograph left; the account, the facts and
     the links right from x 768 (about 70 characters a line). LinkedIn takes the arrow of every text link.
   - "Architecture expertise" on navy: heading left, text right.
   - "Clear accountabilities": its lead on x 768, as on How We Work (How We Work unchanged).
   - Phones: the name before the photograph; the facts one per row, each value beside its label. */
.about-page .about-why { padding-block: 96px; background: var(--pale); }
.about-page .about-why .muted { color: var(--ink); font-size: var(--fs-body); }
.about-page #company-building .muted { font-size: var(--fs-body); }
.about-page .founder-head h2 { margin: 0 0 32px; font-size: var(--fs-h2-inline); line-height: 1.15; }
.about-page .founder-copy p { max-width: 68ch; }
@media (min-width: 721px) {
  .about-page .about-why .principle-grid>div:last-child { column-gap: var(--split-gap); align-items: baseline; }
}
@media (min-width: 901px) {
  .about-page .about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: baseline; }
  .about-page .about-intro>:is(.eyebrow, h1) { grid-column: 1 / -1; }
  .about-page .about-intro>:is(.hero-subtitle, .lead) { grid-row: 3; margin-top: 32px; }
  .about-page .about-intro>.lead { grid-column: 2; }

  .about-page .founder-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .about-page .founder-copy { margin-top: 36px; }

  .about-page #company-building .fabric-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .about-page #company-building .fabric-grid>div:first-child>h2 { margin-bottom: 0; }
  .about-page #company-building .fabric-grid>div:last-child { display: block; margin-top: 36px; }
  .about-page #company-building .fabric-grid>div:last-child>.muted { margin-top: 20px; }

  .about-page .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
}
@media (max-width: 900px) {
  .about-page .founder-panel { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
}
@media (max-width: 720px) {
  .about-page .about-why { padding-block: 56px; }
  .about-page .experience-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .about-page .experience-facts>div { display: grid; grid-template-columns: 136px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
  .about-page .experience-facts>div:last-child { border-bottom: 1px solid var(--line); }
  .about-page .experience-facts strong { font-size: 24px; }
  .about-page .experience-facts span { margin-top: 0; }
}

/* V5.9.11 Your situation in the system (28 October 2026), on V5.9.10. A review (Codex and Claude) found
   the index and the eight situation pages on the old template: white from the header to the closing
   (1,455px on the index, 1,870 to 2,200px on a situation page); the question box at x 848; the signs'
   lines 1,280px wide under text half as wide; the scopes in two columns at x 80 and x 740 with the
   arrows pushed to the far right and a half-empty last row on seven pages; no button before the
   closing (on phones 3,000 to 3,900px down); nothing arriving on scroll; and the pages linked only from
   the footer. The founder chose the white top, the signs before the scopes, the existing "Discuss your
   situation" button in the top and one pale band on the index, and put "Your Situation" first in the
   menu. No word changed.
   - The menu: "Your Situation" first. Five items wrap at 721 to 939px (four already did at 721), so
     the phone menu now runs up to 959px.
   - A situation page: the white top with its question box on the split line (x 768) and the button
     under the introduction; the signs beside their heading, at the area pages' section size, the lines
     as wide as the column; the note and the scopes on a pale band, the scopes as rows (label and name
     left, introduction and link right), any count without a half-empty row.
   - The index: the eight situations as the same rows on one pale band under the white top.
   - Signs, note and rows arrive as you scroll. */
@media (min-width: 721px) and (max-width: 1079px) {
  .menu-toggle { display: block; }
  .nav { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 20px 32px; border-bottom: 0; background: white; box-shadow: 0 15px 25px rgba(26,26,78,.06); }
  .nav.is-open { display: flex; }
  .nav-link { padding: 15px 0; font-size: 17px; }
  .nav-link::after { display: none; }
  .nav .button { min-height: 48px; margin: 20px 0 0; justify-content: space-between; font-size: var(--fs-ui); }
  .site-header.on-dark .nav-link { color: var(--ink); }
  .site-header.on-dark .nav .button { background: var(--teal-brand); border-color: var(--teal-brand); color: var(--white); }
  html:not([data-nav-ready]) .menu-toggle { display: none; }
  html:not([data-nav-ready]) .header-inner { height: auto; flex-wrap: wrap; padding-block: 18px; }
  html:not([data-nav-ready]) .nav { display: flex; position: static; width: 100%; padding: 0; box-shadow: none; }
  html:not([data-nav-ready]) .nav-link { padding: 9px 0; font-size: 14px; }
  html:not([data-nav-ready]) .nav .button { align-self: flex-start; }
}

.signs-split { --head-size: clamp(32px, 3vw, 46px); }
.signs-head>h2 { margin: 0; font-size: var(--head-size); }
.signs-split>.check-list { margin: 28px 0 0; }
.situation-band { padding-block: 96px; border-top: 0; background: var(--pale); }
.situation-band .context-note { max-width: 62ch; margin: 0 0 48px; padding: 0; border-radius: 0; background: none; color: var(--ink); font-size: var(--fs-body); }
.row-list { display: block; }
.row-item { padding: 32px 0; border-top: 1px solid var(--line); }
.row-item:last-child { border-bottom: 1px solid var(--line); }
.row-item>.eyebrow { margin-bottom: 10px; }
.row-item>h3 { margin: 0; }
.row-item>p:not(.eyebrow):not(.card-tagline) { max-width: 68ch; margin-top: 14px; }
.row-item>.text-link { width: auto; align-self: flex-start; justify-content: flex-start; margin-top: 20px; padding-top: 0; }
@media (min-width: 901px) {
  .journey-page .page-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
  .signs-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  /* The first line sits level with the heading's capitals, as on the area pages. */
  .signs-split>.check-list { margin-top: calc(37px + .186 * var(--head-size)); }
  /* The second row takes the right column's extra height, so the name stays under its label. */
  .row-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--split-gap); align-items: start; }
  .row-item>:first-child { grid-column: 1; grid-row: 1; }
  .row-item>:nth-child(2) { grid-column: 1; grid-row: 2; }
  .row-item>p:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .row-item>.text-link { grid-column: 2; grid-row: 3; }
}
@media (max-width: 720px) {
  .situation-band { padding-block: 56px; }
  .situation-band .context-note { margin-bottom: 36px; }
  .row-item { padding: 28px 0; }
}

/* V5.9.12 Your situation: the navy top and a heading over the scopes (28 October 2026), on V5.9.11.
   The founder: the white top made the eight situation pages look like a different page, not one of
   the main pages, so they take the service pages' navy top. Codex had argued against it in the V5.9.11
   review (navy marks a service you buy; a situation is not a package); the founder's reason holds:
   these are landing pages that lead straight to services, and the note above the scopes still says
   there is no sequence and no retainer. The founder chose the heading over the scopes from three
   suggestions (new words): the area pages' label "Relevant scopes" and "Choose the scope that fits."
   - The top: V5.9.6's rules now cover .journey-page. Title and subtitle on white; navy from under the
     subtitle, holding the introduction and the button (cyan); "The question" crosses the navy's
     upper edge, still on the split line (x 768). Phones: the box under the button in the navy, the
     title at 36px. The index keeps its white top, as Services does above the area pages.
   - The scopes: label and heading on the left, the note on the right at x 768 (the section-heading
     split, lower edges level), the rows under both; the heading at the signs' size. */
.situation-band .section-heading { --head-size: clamp(32px, 3vw, 46px); }
.situation-band .section-heading h2 { font-size: var(--head-size); }
.situation-band .section-heading>.context-note { margin: 0; }
@media (min-width: 901px) {
  .situation-band .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
}

/* V5.9.13 The Your situation index as Services' sibling (28 October 2026), on V5.9.12. The founder: the
   index looked ugly, "totally different from the rest of the index pages" and "not so interesting",
   although Your Situation is as important as Services and the homepage. Codex, ROUND 1: design 4,
   creativity 3, "a secondary directory" (white title, then eight thin rows on 1,688px of pale, no navy
   before the closing). Six rendered variants and two blind Codex rounds followed; the founder chose
   variant F (Codex's two columns with the homepage's area-row hover), set its spacing and removed the
   lines between the situations. No word changed; the title has a line break.
   - The top as Services': label and title (two lines) left, the lead right on the split, at the lead size.
   - The eight situations two across on the split: name 28px, line 16px, introduction 18px, the link
     at the foot; the first four on navy, the last four on pale; no boxes, no lines.
   - Hover and keyboard focus, as the homepage's area rows: a lighter field fades in (navy-3 on navy,
     white on pale) from the screen's edge to the middle of the gutter, or from there to the other
     edge; the arrow moves 6px. The field is drawn past the edge and clipped by its band.
   - The title and lead rise as on Services; the situations arrive on scroll.
   - Phones: the lead under the title; one column, four on navy, four on pale.
   The situation pages keep V5.9.11's rows (.situation-band, .row-list). */
.situations-hero { padding: 24px 0 72px; }
.situations-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: end; }
.situations-hero-top h1 { margin: 0; }
.situations-hero-top>.lead { margin: 0; max-width: 30ch; font-size: var(--fs-lead); line-height: 1.45; color: var(--ink); }
.situation-field { overflow-x: clip; }
.situation-field.navy { background: var(--navy); }
.situation-field.pale { background: var(--pale); }
.situation-pairs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
.situation-entry { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; padding: 48px 0 60px; color: var(--ink); }
.situation-entry>h3 { margin: 0; font-size: 28px; line-height: 1.2; letter-spacing: -.02em; color: inherit; }
.situation-entry>.card-tagline { margin-top: 8px; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--teal); }
.situation-entry>p:not(.card-tagline) { margin-top: 20px; max-width: 52ch; font-size: 18px; line-height: 1.55; color: inherit; }
.situation-entry>.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 24px; }
.situation-entry .arrow { transition: transform 300ms var(--ease-out); }
.situation-entry::before { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; background: transparent; transition: background-color 240ms ease; }
.situation-entry:nth-child(odd)::before { left: -100vw; right: calc(-1 * var(--split-gap) / 2); }
.situation-entry:nth-child(even)::before { left: calc(-1 * var(--split-gap) / 2); right: -100vw; }
.situation-entry:focus-visible .arrow { transform: translateX(6px); }
.navy .situation-entry { color: var(--white); }
.navy .situation-entry>.card-tagline { color: var(--navy-label); }
.navy .situation-entry>p:not(.card-tagline) { color: rgba(255, 255, 255, .86); }
.navy .situation-entry>.text-link, .navy .situation-entry .arrow { color: var(--mint); }
.navy .situation-entry:focus-visible { outline-color: var(--mint); }
.navy .situation-entry:focus-visible::before { background: var(--navy-3); }
.pale .situation-entry:focus-visible::before { background: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .situations-hero .eyebrow { animation: v5-rise 600ms var(--ease-out) 40ms both; }
  .situations-hero h1 { animation: v5-rise 800ms var(--ease-expo) 100ms both; }
  .situations-hero-top>.lead { animation: v5-rise 700ms var(--ease-out) 220ms both; }
}
@media (max-width: 720px) {
  .situations-hero-top { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .situations-hero { padding-bottom: 48px; }
  .situation-field { padding-block: 40px 56px; }
  .situation-pairs { grid-template-columns: minmax(0, 1fr); }
  .situation-entry { padding: 24px 0 32px; }
  .situation-entry>h3 { font-size: 24px; }
  .situation-entry>p:not(.card-tagline) { font-size: 17px; }
  .situation-entry:nth-child(n)::before { left: -100vw; right: -100vw; }
}

/* V5.9.14 Services' four areas without stripes (28 October 2026), on V5.9.13. The founder: the four
   areas side by side stay, but the lighter navy rows behind the names and "The result" (V5.9.3) look
   like a table, "very ugly"; the hover should light the area from the top to the bottom of the navy,
   not a box; and the areas should follow the Your situation index. Codex agreed (design 6 to 8). No
   word and no markup changed.
   - No stripes and no box padding: the text sits on the four columns, 64px apart, so every line breaks
     where it did. The navy band has no padding of its own; each area has the situation entries' 48px
     above and 60px below, so the hover field runs from the band's top to its bottom.
   - Hover and keyboard focus: the situations' field (fades in, navy-3) over the area's full height,
     the column plus half the gutter on each side, the same width for all four. The founder: Assess
     and Assure do not run to the screen's edge, which would give them more weight.
   - Tablets (two by two): each area's field is half the screen, its row's height. Phones: the areas
     open on the navy like the situation entries, without the alternating blocks. */
.services-page .services-hero { overflow-x: clip; }
.services-page .area-index { --area-gap: 64px; column-gap: var(--area-gap); padding-block: 0; }
.services-page .area-index .area-card { position: relative; isolation: isolate; padding: 48px 0 60px; }
.services-page .area-index .area-card>*, .services-page .area-index .area-card>:nth-child(odd),
.services-page .area-index .area-card:hover>*, .services-page .area-index .area-card:focus-visible>* { background: transparent; }
.services-page .area-index .area-card>* { padding: 0; }
.services-page .area-index .area-card-heading { padding-top: 0; }
.services-page .area-index .area-question, .services-page .area-index .area-outputs { padding-top: 20px; }
.services-page .area-index .area-card>.text-link { padding: 24px 0 0; }
.services-page .area-index .area-card::before {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: -1;
  left: calc(-1 * var(--area-gap) / 2); right: calc(-1 * var(--area-gap) / 2);
  background: transparent; transition: background-color 240ms ease;
}
.services-page .area-index .area-card:focus-visible::before { background: var(--navy-3); }
@media (max-width: 1150px) {
  .services-page .area-index .area-card:nth-child(n+3) { margin-top: 0; }
}
@media (max-width: 720px) {
  .services-page .area-index { padding-block: 40px 56px; }
  .services-page .area-index .area-card, .services-page .area-index .area-card:nth-child(even) { padding: 24px 0 32px; background: none; }
  .services-page .area-index .area-question, .services-page .area-index .area-outputs { padding-top: 0; }
  .services-page .area-index .area-card>.text-link { padding: 16px 0 0; }
}

/* V5.9.15 Entrances from the first paint (28 October 2026), on V5.9.14. The founder: on the home page,
   Services and the area pages the opening rises, but on larger screens the content already on the
   first screen "just appears directly". Two systems met there: the opening's CSS animation, and
   motion.js, which hid only parts below the first screen (hiding a part already drawn makes it flash).
   Measured: at 1920 x 1080 the home page's strip and Assess's contents bar and "Typical decisions"; at
   2560 x 1440 also the start of the next section on home and Services; on area pages the contents bar
   even at 1440 x 900.
   - motion-start.js (in the head, before the first paint) marks the page with html.motion.
   - On the pages whose opening rises, the parts that arrive start hidden (the list below, the same as
     motion.js's groups; a test checks it). motion.js then brings the ones on the first screen in just
     after the opening (from about 420ms, lower parts later) and the rest on scroll, as before.
   - Parts inside an opening keep its own animation. Other pages are unchanged.
   - Reduced motion, no IntersectionObserver or no script: nothing is hidden. If motion.js has not
     run 2.5 seconds after the first paint, the mark is removed and everything shows.
   - The home page's strip and the area and service pages' contents bar join the entrances.
   - Fixed: the home page's four area rows never played their entrance (their hover transition
     replaced it); they now slide in from the right as V5.3 intended. */
@media (prefers-reduced-motion: no-preference) {
  /* The hold (a list of parts on four pages) is now universal: V5.9.17. */
  .reveal-init { transition: none !important; }
  /* The home page's area rows had their hover transition only, so their entrance (V5.3's slide from
     the right) never played and they appeared at once, also on scroll. */
  .areas-rows>.area-card.reveal { transition: opacity 450ms var(--ease-out) var(--reveal-delay, 0ms), transform 650ms var(--ease-expo) var(--reveal-delay, 0ms), background-color 240ms ease; }
}

/* V5.9.16 Hover with a mouse, a pressed field on touch (28 October 2026), on V5.9.15. The founder asked
   whether the hover should show on a tap. On touch screens a hover look sticks (tap an area, come back,
   it is still lit) and flashes when a finger starts a scroll; no feedback at all feels dead. So:
   - With a mouse or trackpad as the main input, the hover as before. (iPads count as touch, also with
     a trackpad: the browser reports touch as their main input.)
   - On touch, the highlighted fields (the Your situation entries, Services' four areas, the home
     page's area rows, Assure's checks, the proof links) show the same field only while the finger is
     down, at once; nothing sticks. Small effects (link colours, arrows, titles) are mouse-only.
     site.js listens for touches so iPhones apply the pressed state.
   - Keyboard focus shows the field in every case. */
@media (hover: hover) and (pointer: fine) {
  .situation-entry:hover .arrow { transform: translateX(6px); }
  .navy .situation-entry:hover::before { background: var(--navy-3); }
  .pale .situation-entry:hover::before { background: var(--warm); }
  .services-page .area-index .area-card:hover::before { background: var(--navy-3); }
}
@media (hover: none), (pointer: coarse) {
  .situation-entry::before, .services-page .area-index .area-card::before { transition: none; }
  .navy .situation-entry:active::before { background: var(--navy-3); }
  .pale .situation-entry:active::before { background: var(--warm); }
  .services-page .area-index .area-card:active::before { background: var(--navy-3); }
  .areas-rows>.area-card { transition: none; }
  .areas-rows>.area-card:active { background: var(--navy-3); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference), (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .areas-rows>.area-card.reveal { transition: opacity 450ms var(--ease-out) var(--reveal-delay, 0ms), transform 650ms var(--ease-expo) var(--reveal-delay, 0ms); }
}
/* Site-wide (a CSS audit of all 51 hover rules and a browser check of all 51 pages): every hover-only
   rule in this file is guarded for the mouse where it stands, so no cascade order changed. site.css
   cannot change, so on touch its hovers are cancelled here (each property back to its look without
   hover). Assure's checks and the proof links on three service pages are fields too and get the
   pressed field. The closing button lost its press when it joined the entrances (.reveal.is-in sets
   transform), so revealed buttons press with the separate scale property. */
@media (hover: none), (pointer: coarse) {
  .text-link:hover .arrow { transform: none; }
  .button:where(:not(.light, .secondary)):hover { background: var(--teal-brand); border-color: var(--teal-brand); }
  .home-hero .button.light:hover { background: var(--mint); border-color: var(--mint); }
  .nav-link:not([aria-current=page]):hover::after { transform: scaleX(0); }
  .breadcrumb a:hover, .footer a:not(.text-link):hover { color: inherit; }
  .package-link:hover h3, .experience-card:hover h3, .variant-list>a:hover h3 { color: inherit; }
  .area-nav a:not(.is-active):hover { color: inherit; }
  .area-nav>a:first-child:hover { color: var(--muted); }
  .check-scope:hover { background: var(--pale); }
  .check-scope:active { background: var(--warm); }
  .proof-link:active { background: var(--warm); }
}
.button.reveal:active { scale: .97; }

/* V5.9.17 Entrances on every page (28 October 2026), on V5.9.16. The founder: every page must be
   animated; pages that stay still read "like a book, unfinished". An audit of all pages found only the
   home page, Services and the Your situation index fully animated: other tops did not rise, and many
   components had no entrance (case stories, the steps, FAQ, the handoff example, the founder panel,
   Contact, the legal pages), because motion.js animated only the components on its list. Only the
   animation changes: no word, layout, colour or spacing (with reduced motion every page is
   pixel-identical to V5.9.16).
   - Every page top rises with the area pages' timing (the label 40ms, the title 100ms, the subtitle
     160ms, the introduction 220ms, the button 300ms, the question box or the facts 360ms). The four
     tops with their own animation keep it; the navy band of a top stays in place.
   - motion.js gives every content block an entrance (see its comment); brand.css holds the content
     below the top from the first paint on every page until motion.js has set up (data-motion-ready).
     The hold works two levels below each section, so a section's band and its wrapper keep their
     colour; the case story, the area bands, the prose bands, the deliverables box and the case
     lesson's navy panel keep theirs too (their children are held), and the note that continues a service page's pale scope field is not
     held (it stays still, as part of the band). Navigation (header, breadcrumb, area switcher,
     footer) never moves.
   - First-screen content starts at 300ms, lower parts up to 120ms later (was 420 + 360). */
@media (prefers-reduced-motion: no-preference) {
  :is(.page-hero:not(.area-page-hero, .services-hero, .situations-hero), .not-found) :is(.eyebrow, .pill):not(aside *) { animation: v5-rise 600ms var(--ease-out) 40ms both; }
  :is(.page-hero:not(.area-page-hero, .services-hero, .situations-hero), .not-found) h1 { animation: v5-rise 800ms var(--ease-expo) 100ms both; }
  :is(.page-hero:not(.area-page-hero, .services-hero, .situations-hero), .not-found) .hero-subtitle { animation: v5-rise 700ms var(--ease-out) 160ms both; }
  :is(.page-hero:not(.area-page-hero, .services-hero, .situations-hero), .not-found) .lead { animation: v5-rise 700ms var(--ease-out) 220ms both; }
  :is(.page-hero:not(.area-page-hero, .services-hero, .situations-hero), .not-found) .actions { animation: v5-rise 600ms var(--ease-out) 300ms both; }
  .page-hero:not(.area-page-hero, .services-hero, .situations-hero) :is(.decision-box, .case-meta) { animation: v5-rise 700ms var(--ease-out) 360ms both; }
  html.motion:not([data-motion-ready]) main > :not(.home-hero, .page-hero, .not-found, .container) > * > :not(.prose, .case-story, .area-panel),
  html.motion:not([data-motion-ready]) main :is(.case-story, .area-panel) > :not(.case-close),
  html.motion:not([data-motion-ready]) main .case-close > *,
  html.motion:not([data-motion-ready]) main .prose-section > :not(.deliverables),
  html.motion:not([data-motion-ready]) main .prose-section > .deliverables > * { opacity: 0; }
}

/* V5.9.19 Partners in the company family (28 October 2026), on V5.9.18. A review (Claude and a fresh Codex
   session; Codex ROUND 1: design 5.5, usability 6, creativity 4, content 8, "credible partner information
   presented as a long, lightly formatted document") found white from the header to the closing (2,911px at
   1440), a four-line title (the site's 1,050px title cap; each sentence fits one line at full width), columns
   at x860, x743, x752 and x270 instead of x768, the checklist hidden in a closed disclosure, grey running text
   and an inline margin. The founder: "go" on both reviews' plan. No word and no section order changed.
   - The top as How We Work's: the title across the width in two lines, the lead and button under it.
   - "Where we can contribute" on a pale band (the first colour under the top): heading left, lead right at
     x768; the four options as open rows divided by lines (the moment left, the text and links right), ink.
   - "Clear accountabilities" (shared) on white with its lead at x768, as on About and How We Work; its text in
     ink on all three pages (it was grey).
   - The checklist open, in a white box on a pale band: its title left, the six rows right at x768.
   - "Agree the arrangement" on white: the heading across, the lead left and the note right from the same line
     (the inline margin removed), the link under them. No navy band (Codex: the terms need no such emphasis). */
.partners-page .page-hero h1 { max-width: none; }
.partners-options, .partners-checklist { padding-block: 96px; border-top: 0; background: var(--pale); }
.partners-page .partner-options { display: block; margin-top: 8px; }
.partners-page .partner-option { padding: 32px 0; border-top: 1px solid var(--line); }
.partners-page .partner-option:last-child { border-bottom: 1px solid var(--line); }
.partners-page .partner-option>h3 { margin: 0; }
.partners-page .partner-option>p { margin: 16px 0 0; max-width: 68ch; }
.partners-page .partner-option>.partner-links { margin-top: 20px; }
/* The shared responsibilities (How We Work, About, Partners) in ink on all three pages (the founder). */
.partners-page .partner-option p, .responsibility-grid p { color: var(--ink); }
.partners-checklist .checklist-box { padding: 32px; border-radius: var(--radius); background: var(--white); }
.partners-checklist .checklist-box>h3 { margin: 0; }
.partners-checklist .checklist-box>.check-list { margin: 24px 0 0; }
.partners-checklist .check-list li { font-size: var(--fs-body); }
@media (min-width: 721px) {
  .partners-page .principle-grid>div:last-child:has(>.muted) { column-gap: var(--split-gap); }
}
@media (min-width: 901px) {
  .partners-page .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
  .partners-page .partner-option { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--split-gap); }
  .partners-page .partner-option>h3 { grid-column: 1; grid-row: 1 / span 2; }
  .partners-page .partner-option>p { grid-column: 2; grid-row: 1; margin-top: 0; }
  .partners-page .partner-option>.partner-links { grid-column: 2; grid-row: 2; }
  .partners-checklist .checklist-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .partners-checklist .checklist-box>.check-list { margin-top: 0; }
}
@media (max-width: 720px) {
  .partners-options, .partners-checklist { padding-block: 56px; }
  .partners-checklist .checklist-box { padding: 24px 20px; }
}

/* V5.9.20 AI-built software in the landing-page family (28 October 2026), on V5.9.19. A review (Claude and a
   fresh Codex session, then Codex again against the full DESIGN_RULES.md; Codex ROUND 1: design 6, usability 7,
   creativity 5, content 8, "a thoughtful service explainer, with less visual authority ... than the
   consultancy's front door") found white from the header to the closing (2,481px at 1440), the service pages'
   top markup without its navy and with the question box at x848, "Beyond a code scan" spanning although its
   heading fits the left column, its note at x752 and 22px lower (an inline style), the scopes' lead at x860, grey
   scope text with the arrows pushed to the far right, the paid engagement as plain text, and a 42px five-line
   title on phones. The founder: three scope columns (not rows: three fit side by side), "go". No word changed.
   - The top as the service and situation pages': the title on white, navy from 64px under it holding the
     introduction and the button (cyan); "A better question" on the split (x768), starting on white and crossing
     the navy's upper edge (this title spans the width, so the box starts under it). Phones: the title at 36px,
     the box under the button in the navy.
   - Section headings at the situation family's size (32 to 46px); the closing keeps its own.
   - "Beyond a code scan" as a split on white: heading left; the lead, then the note (16px grey), right at x768,
     the first line level with the heading's capitals.
   - The three scopes on a pale band: heading left, lead right at x768; text in ink, the arrow after the link.
   - The paid engagement in the Experience list's navy panel: heading left, lead and link right. */
.vibe-page main { --head-size: clamp(32px, 3vw, 46px); }
.vibe-page main section:not(.closing) h2 { font-size: var(--head-size); }
.vibe-page .page-hero { --navy-top: 48px; --navy-foot: 56px; --cross: 64px; padding-bottom: var(--navy-foot); }
.vibe-page .page-hero .page-intro::before {
  content: ""; grid-column: 1 / -1; grid-row: 3 / span 2; align-self: stretch; margin-top: var(--cross);
  background-color: var(--navy);
  border-image: linear-gradient(var(--navy) 0 0) fill 0 / 0 / 0 100vmax var(--navy-foot);
}
.vibe-page .page-hero .page-intro>div:first-child>h1 { margin-bottom: 40px; }
.vibe-page .page-hero .page-intro>div:first-child>.lead { grid-row: 3; margin-top: calc(var(--cross) + var(--navy-top)); color: var(--navy-text); }
.vibe-page .page-hero .page-intro>div:first-child>.actions { grid-row: 4; }
.vibe-page .page-hero .page-intro>div:first-child>:is(.lead, .actions), .vibe-page .page-hero .page-intro>.decision-box { z-index: 1; }
.vibe-page .page-hero .actions .button { color: var(--navy); background: var(--mint); border-color: var(--mint); }
@media (hover: hover) and (pointer: fine) { .vibe-page .page-hero .actions .button:hover { background: #87f8ff; border-color: #87f8ff; } }
.vibe-page .page-hero .actions .button:focus-visible { outline-color: var(--mint); }
.vibe-scan .principle-grid>div:last-child>.muted { margin-top: 24px; }
.vibe-scopes { padding-block: 96px; border-top: 0; background: var(--pale); }
.vibe-scopes .package-link p:not(.eyebrow) { color: var(--ink); }
.vibe-scopes .package-link>.text-link { width: auto; align-self: flex-start; justify-content: flex-start; }
.vibe-case { border-top: 0; }
.vibe-case-panel { padding: 44px 48px; border-radius: var(--radius); background: var(--navy); color: var(--white); }
.vibe-case-panel h2 { color: var(--white); }
.vibe-case-panel .eyebrow { color: var(--navy-label); }
.vibe-case-panel .lead { color: var(--navy-text); }
.vibe-case-panel .text-link, .vibe-case-panel .text-link .arrow { color: var(--mint); }
.vibe-case-panel .text-link:focus-visible { outline-color: var(--mint); }
@media (min-width: 721px) {
  .vibe-scan .principle-grid>div:last-child:has(>.muted) { display: block; }
}
@media (min-width: 901px) {
  .vibe-page .page-hero .page-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
  .vibe-page .page-hero .page-intro>.decision-box { grid-row: 3 / span 2; margin-top: 0; }
  :is(.vibe-scan .principle-grid, .vibe-case-panel) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  :is(.vibe-scan .principle-grid, .vibe-case-panel)>div:first-child>h2 { margin-bottom: 0; }
  :is(.vibe-scan .principle-grid, .vibe-case-panel)>div:last-child { margin-top: calc(37px + .186 * var(--head-size)); }
  .vibe-scopes .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); }
}
@media (max-width: 900px) {
  .vibe-page .page-hero { --navy-top: 32px; --navy-foot: 40px; --cross: 0px; }
  .vibe-page .page-hero .page-intro { row-gap: 0; }
  .vibe-page .page-hero .page-intro::before { grid-row: 3 / span 3; }
  .vibe-page .page-hero .page-intro>div:first-child { display: contents; }
  .vibe-page .page-hero .page-intro>div:first-child>*, .vibe-page .page-hero .page-intro>.decision-box { grid-column: 1; }
  .vibe-page .page-hero .page-intro>div:first-child>.eyebrow { grid-row: 1; }
  .vibe-page .page-hero .page-intro>div:first-child>h1 { grid-row: 2; margin-bottom: 32px; }
  .vibe-page .page-hero .page-intro>.decision-box { grid-row: 5; margin-top: 36px; }
}
@media (max-width: 720px) {
  .vibe-scopes { padding-block: 56px; }
  .vibe-case-panel { padding: 30px 22px; }
}

/* V5.9.21 Contact and Book (28 October 2026), on V5.9.20. A review (Claude and a fresh Codex session that read
   DESIGN_RULES.md and REDESIGN_RULES.md first; Codex ROUND 1: design 6, usability 5, creativity 5.5, content 8, "a
   credible but generic contact page that makes a ready visitor scroll to act") found the booking button below the
   first screen (y1022 at 1440 x 900; 340px below the phone's), white from the header to the footer, the booking box
   at x646 and the questions in an indented 900px column at x270 (an inline margin), nine of eleven paragraphs grey
   and a 42px phone title. The founder: build both layouts to choose (A: the booking panel beside the title; B, Codex:
   a pale booking band under a white top), move the panel's facts, button and note above its paragraphs ("codex
   call"), keep the questions as disclosures ("better for questions"). Only words' order inside the panel changed.
   The founder chose A: the booking panel beside the title, so the button is on the first screen on every desktop
   size and on a 390 x 844 phone (1440 x 900: y488 to 543, was y1022). The email column under the lead; the questions
   on a pale band.
   - The panel (Contact and Book): label, heading, the two facts, the button and its note, then the two paragraphs.
   - Running text in ink (the left column, the panel's paragraphs); the booking note stays a grey note.
   - "Before we talk" as a split: heading left, the questions right at x768.
   - Book on the page's margins: the white panel on a pale band, its label and heading left, the rest right.
   - Phones: the titles at 36px. */
.contact-page :is(.contact-aside, .contact-detail) p, .booking-panel>p:not(.eyebrow):not(.booking-note) { color: var(--ink); }
.booking-panel>.booking-note+p { margin-top: 28px; }
.contact-questions-split h2 { margin-bottom: 30px; }
.contact-questions-band, .book-booking { padding-block: 96px; border-top: 0; background: var(--pale); }
.book-booking .booking-panel { background: var(--white); }
.contact-top .contact-intro>.contact-aside { margin-top: 56px; }
@media (prefers-reduced-motion: no-preference) {
  .contact-top .contact-aside { animation: v5-rise 700ms var(--ease-out) 300ms both; }
  .contact-top .booking-panel { animation: v5-rise 700ms var(--ease-out) 360ms both; }
  .contact-top .booking-panel :is(.eyebrow, .actions) { animation: none; }
}
@media (min-width: 901px) {
  .contact-questions-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .contact-questions-split h2 { margin-bottom: 0; }
  .contact-questions-split>div:last-child { margin-top: 25px; }
  .contact-top .contact-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .book-booking .booking-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: var(--split-gap); align-items: start; }
  .book-booking .booking-panel>* { grid-column: 2; }
  .book-booking .booking-panel>:is(.eyebrow, h2) { grid-column: 1; }
}
@media (max-width: 900px) {
  .contact-top .contact-split { display: flex; flex-direction: column; }
  .contact-top .contact-intro { display: contents; }
  .contact-top .contact-split>.booking-panel { order: 1; margin-top: 36px; }
  .contact-top .contact-intro>.contact-aside { order: 2; margin-top: 48px; }
}
@media (max-width: 720px) {
  .contact-questions-band, .book-booking { padding-block: 56px; }
}

/* V5.9.22 Services, lower third (28 October 2026), on V5.9.21. A review (Claude and a fresh Codex read
   with the full rules): 2,588px of white from the Assure panel to the closing, both leads off the split at x860,
   and the two reviews' names at the section headings' size (52px), above the four areas' names.
   - "Two common starting points" on a pale band (96px, 56 on phones); "Choose by purpose" stays white. Tone
     separates the sections, so neither keeps its top line.
   - Both leads on the split at x768 (x544 at 1024), level with the heading's capitals.
   - "Understanding, design, authority or a defined gate?" runs to three lines in the 592px column, the last one
     "gate?" alone: it spans the width, and its lead sits under it on the split line, 44px below.
   - The two reviews open on the band: no teal rule above them, their names at the card size (28px, 24 below
     1000px), their text up to 68 characters. The purpose rows keep their 21px titles. */
.services-start { padding-block: 96px; background: var(--pale); }
.services-page .services-start .entry { padding-top: 0; border-top: 0; }
.services-page .services-start .entry h3 { font-size: var(--fs-h3); line-height: 1.2; }
.services-page .services-start .entry p { max-width: 68ch; }
@media (min-width: 901px) {
  .services-page :is(.services-start, .services-purpose) .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .services-page :is(.services-start, .services-purpose) .section-heading>.lead { margin-top: 36px; }
  .services-page .services-purpose .section-heading { row-gap: 0; }
  .services-page .services-purpose .section-heading>div:first-child { grid-column: 1 / -1; }
  .services-page .services-purpose .section-heading>.lead { grid-column: 2; margin-top: 44px; }
}
@media (max-width: 720px) {
  .services-start { padding-block: 56px; }
}

/* V5.9.23 Privacy, Terms and Trust as a document (28 October 2026), on V5.9.22. A review (Claude and a fresh Codex
   read with the full rules): the text in an 820px column centred at x310 under a title at x80, about 76 to 96
   characters a line, a 42px title on phones. The founder: they "can be white sheets"; a first build as rows on the
   split was turned down: "people expect to see a document here".
   - One column on the title's edge (x80, x32 at 1024), 592px wide (the split's left column), so about 65 to 70
     characters a line. Headings above their paragraphs, as before; no lines between sections.
   - "Contact Sparkling" as the site's text link (it carried the legal text's underline).
   - White throughout, no closing band. Phones: the title 36px. */
.legal-page .legal { max-width: none; }
.legal-page .legal>* { max-width: 592px; }
.legal-page .legal .text-link { text-decoration: none; }

/* V5.9.24 Footer and menu order (29 October 2026). The founder: the footer "looks awful"; "Work with us" was
   "too overcrowded"; the logo "too big and somehow placed extremely randomly" (720px wide, ending 32px past
   the split line, 400px below the line it belongs to, with a 270px empty field above it); Explore was nine
   links in one column. Reviewed by Claude and a fresh Codex session (Claude 5.8; Codex 4 / 6 / 3 / 8). The
   logo at the top of the brand column, the line and the contact details under it; Explore in two columns in
   the menu's order (the services, then the pages); "Work with us" for partners and enquiries; white
   headings. The footer stays still. No word changed. The menu's new order is in build.py. */
.footer .footer-brand .wordmark { display: flex; width: max-content; margin-bottom: 32px; }
.footer .brand-lockup { width: 240px; }
.footer .footer-brand p { max-width: none; font-size: var(--fs-body); }
.footer-contact { margin-top: 32px; }
.footer h3 { color: var(--white); font-weight: 600; }
.footer-links { align-content: start; }
.footer-main { column-gap: 0; row-gap: 0; margin-bottom: 64px; }
.footer-main>:nth-child(2) { padding-left: 0; }
@media (min-width: 1151px) {
  .footer-main { grid-template-columns: calc(50% - var(--split-gap) / 2) var(--split-gap) minmax(0, 2fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1; }
  .footer-explore { grid-column: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-content: start; }
  .footer-explore h3 { grid-column: 1 / -1; }
  .footer-work { grid-column: 4; }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .footer-main { grid-template-columns: calc(50% - var(--split-gap) / 2) var(--split-gap) minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
  .footer-brand { grid-column: 1; grid-row: 1 / span 3; }
  .footer-explore { display: contents; }
  .footer-explore h3 { grid-column: 3 / -1; grid-row: 1; }
  .footer-explore .footer-links:first-of-type { grid-column: 3; grid-row: 2 / span 2; }
  .footer-explore .footer-links:last-of-type { grid-column: 4; grid-row: 2; }
  .footer-work { grid-column: 4; grid-row: 3; margin-top: 40px; }
}
@media (max-width: 900px) {
  .footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .footer-brand { grid-column: 1 / -1; grid-row: 1; margin-bottom: 48px; }
  .footer-explore { display: contents; }
  .footer-explore h3 { grid-column: 1 / -1; grid-row: 2; }
  .footer-explore .footer-links:first-of-type { grid-column: 1; grid-row: 3 / span 2; }
  .footer-explore .footer-links:last-of-type { grid-column: 2; grid-row: 3; }
  .footer-work { grid-column: 2; grid-row: 4; margin-top: 32px; }
}
@media (max-width: 720px) {
  .footer { padding-top: 56px; }
  .footer-main { margin-bottom: 40px; }
  .footer .brand-lockup { width: 200px; }
  .footer-legal { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
  .footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 20px; }
}

/* V5.9.25 Homepage: no sideways drag on phones (29 October 2026). The founder: "on mobile I can drag the
   homepage left and right ... the issue stops when I scroll down to 'what needs to become clearer'". The
   four area rows run to the screen's edge and wait 32px to its right until they slide in (V5), so the
   page was 422px wide on a 390px phone (1,472 at 1440) until they had entered. Their section clips the
   overflow, as Services and the situations index already do; the rows still slide in from the edge. */
.home-areas { overflow-x: clip; }

/* Pictures (29 October 2026; the rules, every spot and the process: IMAGE_RULES.md). The founder: "identify
   several pages where you can showcase how this could look ... use subagents to design the exact picture
   and ... invoke codecs in order to generate the image", then "plan the pictures for the Rest of the
   pages". Generated drawings in one style, 3:2, decorative (alt=""), each in a spot that was empty ground
   beside a heading. White grounds, multiplied so they melt into pale fields. On phones each follows its
   heading at full width. */
/* Each frame is painted its field's colour, so the multiply finds the right ground even inside a sticky or
   moving layer (the homepage cell's pale is painted by its parent, outside the sticky text block). */
.showcase-pic { margin: 40px 0 0; max-width: 592px; background: var(--white); }
.showcase-home { background: var(--pale); }
.showcase-pic img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; filter: brightness(1.03); }
.showcase-pic.showcase-home { max-width: 480px; }
.signs-head>.showcase-pic { margin-top: 36px; }
/* Experience: beside the title from 1151px, out of the text's flow so no line moves; after the line below. */
@media (min-width: 1151px) {
  .experience-top { position: relative; }
  .experience-top>.showcase-pic { position: absolute; top: 0; right: 0; width: min(440px, calc(100% - 820px)); margin: 0; }
}
@media (max-width: 1150px) { .experience-top>.showcase-pic { margin-top: 32px; } }
/* The rest of the pages (the founder: "plan the pictures for the rest of the pages, do it exactly as you did
   so far"). Pale bands give their frame pale; navy bands carry the picture on a white plate, as a box on
   navy is white. */
:is(.approach-method, .contact-questions-band) .showcase-pic { background: var(--pale); }
:is(.dark, .case-close) .showcase-pic { background: var(--white); border-radius: var(--radius); padding: 20px; }
.approach-method .method-intro>.showcase-pic { margin-top: 40px; }
.partners-top-row>.showcase-pic { max-width: 440px; }
@media (min-width: 901px) {
  /* Case pages: under the lesson's label, beside the evidence note. */
  .case-story .case-close>.showcase-pic { grid-column: 1; grid-row: 2; margin-top: 32px; }
  .case-story .case-close:has(>.showcase-pic)>.evidence-note { grid-row: 2; }
  /* The paid case: under "What was sound", its list beside both. */
  .case-story .case-chapter:has(>.showcase-pic)>div { grid-column: 2; grid-row: 1 / span 2; }
  .case-story .case-chapter>.showcase-pic { grid-column: 1; grid-row: 2; margin-top: 12px; }
}
/* The paid case's chapters sit on pale: the frame takes the pale too. */
.case-story .case-chapter>.showcase-pic { background: var(--pale); }
@media (min-width: 901px) {
  /* Services, "Choose by purpose": the heading keeps its full row; the picture and the line share the next. */
  .services-page .services-purpose .section-heading>div:first-child:has(>.showcase-pic) { display: contents; }
  .services-page .services-purpose .section-heading>div:first-child>:is(.eyebrow, h2) { grid-column: 1 / -1; }
  .services-page .services-purpose .section-heading>div:first-child>.showcase-pic { grid-column: 1; grid-row: 3; margin-top: 44px; }
  .services-page .services-purpose .section-heading:has(.showcase-pic)>.lead { grid-row: 3; }
}
@media (min-width: 1151px) {
  /* Partners: the introduction keeps its width; the picture beside it under the title. */
  .partners-top-row { display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: var(--split-gap); align-items: start; }
  .partners-top-row>.showcase-pic { margin-top: 28px; }
}

/* V5.9.26 The 404 on the system (29 October 2026), on V5.9.25. A review (Claude and a fresh Codex read with the
   full rules): the title kept the old base size, 77.8px at 1440 against the page tops' 70px, 55px at 1024 against
   50px and 42px on phones against 36px. The founder: "ok fix".
   - The title at the page tops' size; phones 36px, like every other page top.
   - The page's tab icon: build.py adds the favicon link every other page has. */
.not-found h1 { font-size: var(--fs-h1); }

/* V5.9.27 Clean-up, no visible change (30 October 2026), on V5.9.26. REDESIGN_RULES section 5, re-measured
   on every page (Claude, with a helper that tested each removal); the founder: "1 do".
   - About 10 KB of rules that matched nothing or were fully overridden are gone: the old booking frame, the
     homepage picture backdrop, filters, the paid case's old method box, the area icons, the old footer
     logo, the hidden numerals (their spans are gone from build.py too) and a rule broken by a stray @media.
   - The bands painted only by border-image (the navy page tops, the contents bar, Services' area index,
     the pale bands on area and service pages) also carry the same colour as their background.
   - The last inline styles in build.py are these rules; the boundaries note no longer needs !important. */
.prose-section#boundaries>.context-note, .prose-section#scope>.context-note { margin-top: 30px; }
.prose-section#scope>p.small { margin-top: 22px; }
.assurance-checks+p.small { margin-top: 24px; }

/* V5.9.28 One system (30 October 2026), on V5.9.27. REDESIGN_RULES section 5, re-measured on every page; the
   founder: phone titles "use 36 as everywhere", the Services heading "fix it", "spacing and colours should be
   fixed", "hover color should be the same everywhere, round corners - too".
   - Phone titles: one token, --fs-h1 at 36px up to 720px. Services, the Your situation index and the four area
     pages were 42px; the case pages grew from 36px to 42px at 340px and below.
   - Split: the default section heading is the even split (Services' area heading moves from x860 to x768).
   - Hover, one per ground. On light: every colour hover is #006666 (card and row headings, the breadcrumb and
     the area menu were #006b7c) and every field turns --warm (Assure's checks were teal-tinted, the pale
     situation rows white). On navy: grey text turns mint, mint turns light mint, fields turn navy-3.
   - Corners: one radius, --radius (8px); the documents and the white picture frames on navy were 4px.
   - Text on navy: white headings, --navy-text for leads and running text, --navy-label for labels and notes,
     mint links (eight colours before).
   - Band spacing: one value, --band-pad (100px, 75px to 900px, 60px on phones, as .section); pale bands were
     96px and 56px, the navy work band 80px, the case close 88px. Continuations inside one band, page tops,
     Services' area index and the closing keep their own. */
:root { --band-pad: 100px; }
@media (max-width: 900px) { :root { --band-pad: 75px; } }
@media (max-width: 720px) { :root { --band-pad: 60px; --fs-h1: 36px; } }
.situation-band, .partners-options, .partners-checklist, .vibe-scopes, .contact-questions-band, .book-booking,
.services-start, .approach-method, .about-page .about-why, .service-area-page .prose-section#outputs,
.service-area-page .prose-section#work, .service-detail .prose-section#work { padding-block: var(--band-pad); }
.service-detail .prose-section:is(#scope, #engagement, #delivery-example, #assessment-depth, #commissions) { --pale-pad: var(--band-pad); }
.case-story { padding-top: var(--band-pad); }
.case-story .case-close { margin-top: var(--band-pad); padding-block: var(--band-pad); }
@media (hover: hover) and (pointer: fine) {
  .package-link:hover h3, .experience-card:hover h3, .variant-list>a:hover h3, .decision-row:hover h3,
  .breadcrumb a:hover, .area-nav a:not(.is-active):hover { color: #006666; }
}

/* V5.9.29 Long white runs (30 October 2026), on V5.9.28. Section 3 of REDESIGN_RULES: no white run past about
   1,300px. Measured at 1440, the service pages ran white for 1,271 to 1,501px from the navy top to the navy
   method band ("What you receive", "When this helps"); three of them for 1,541 to 1,926px at the end
   ("Relevant experience", "Practical questions", "Related work"); How We Work for 1,483px at the end. The
   founder: "agree" (one section in each long white run on the pale band; no word changes).
   - Service pages: "When this helps" between "What you receive" and the navy method band (13 pages). On
     Technical Delivery Assurance the pale engagement options follow it, so it stays white.
   - "Practical questions" after "Relevant experience" (3 pages).
   - How We Work: "Clear accountabilities", between the last worked example (white) and "Independence".
   A picture's frame takes the pale, as on every pale band (its white ground is multiplied into the field).
   Left white: a single section longer than a screen (Assess's and Architect's scopes, Services' "Choose by
   purpose") and the pages white by decision (Experience, the legal pages). */
.service-detail .prose-section#outputs+#when:has(+ #work), .service-detail .prose-section#experience+#questions {
  padding-block: var(--band-pad);
  background-color: var(--pale);
  border-image: linear-gradient(var(--pale) 0 0) fill 0 / 0 / 0 100vmax;
}
.service-detail .prose-section#outputs+#when:has(+ #work) { margin-bottom: 0; }
.service-detail .prose-section#outputs+#when:has(+ #work) .showcase-pic { background: var(--pale); }
.approach-page .output-examples+.section { background: var(--pale); }

/* V5.9.30 Tap areas (30 October 2026), on V5.9.29 (built separately on V5.9.28). Measured on every page at 390 with touch: the footer links,
   breadcrumbs, the area menu and the text links were 19 to 37px tall, under the 44px a finger needs. The
   founder: "agree" (an invisible 44px touch area; a little more space where links sit too close).
   Touch screens only, (pointer: coarse); with a mouse nothing changes. Each link gets a transparent ::after,
   at least 44 x 44px and centred on it, so nothing moves. Where two areas would overlap, the space between
   the links grows to fit: footer lists 9 to 19px, the legal links 8 to 21px, the area menu's rows 10 to 12px,
   stacked text links to 19px. Links inside a sentence (Technical Delivery Assurance's routing list) are left
   as they are: they sit a line apart, and the guidelines exempt them. */
@media (pointer: coarse) {
  :is(.text-link:not(.routing-list .text-link), .breadcrumb a, .area-nav a, .footer a, .site-header .wordmark,
    .strip-roles a, .email-link) { position: relative; }
  :is(.text-link:not(.routing-list .text-link), .breadcrumb a, .area-nav a, .footer a, .site-header .wordmark,
    .strip-roles a, .email-link)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .footer-links { row-gap: 19px; }
  .footer-legal { row-gap: 21px; }
  .area-nav { row-gap: 12px; }
  .actions:not(:has(.button)) { row-gap: 19px; }
}

/* V5.10 The rewording (30 October 2026), on V5.9.30. The team's v3.1 wording, ported with the founder's decisions
   (review/2026-10-30-website-rewording/consolidated-report.md, section 6). New pieces, built from existing ones:
   - Homepage "Two ways to start": the Where to start index's entries (open, two across on the split, the field
     hover from the screen's edge to the middle of the gutter), each one link; the offer name as the title, the
     team's line under it, the fee as a grey note. The heading spans ("product." stood alone on a third line), its
     lead under it on the split. A first build had white cards off the split (x732) with grey text.
   - Homepage design fixes (the founder's go after a rules check): "What you receive" on the split (it sat at x735),
     its right column no longer a ruled table with 15px labels over grey text (the founder: "the only place we have
     it like that"), all running text in ink;
     the partners heading spans (four lines in the left column), its lead under it on the split, the note at 17px;
     "Who stands behind the work" second paragraph at 17px; the four areas' pale cell takes the band padding like
     every section, while the navy rows keep no padding so the first and last hover fields reach its edges.
   - Homepage "Who stands behind the work": the founder band on the pale field (white before the teal closing would
     run long).
   - The partner note under the three ways of working keeps a reading width.
   - Services "All services": four lists side by side, one row per service, lines between rows.
   - Service pages: the pointer under the hero button ("Most clients start with …"), in the navy's label colour.
   - Homepage hero: the text holds on the left while the example report passes on the right (as the method band and
     the four areas do), from 1,001px where the two sit side by side; it stops at the navy's lower edge.
   - The menu has six items again (How We Work restored by the founder); they fit on one line from 1,050px, so the
     "Menu +" button now runs up to 1,079px (it ran to 959px; the V5.9.11 block holds the rule). */
.home-doors { overflow-x: clip; }
.home-doors .situation-entry { text-decoration: none; }
.home-doors .situation-entry>p.eyebrow { margin: 0 0 12px; font-size: var(--fs-ui); line-height: 1.5; color: var(--teal); }
.home-doors .situation-entry>p.small { margin-top: 16px; font-size: var(--fs-ui); color: var(--muted); }
.home-doors .container>.actions { margin-top: 40px; }
@media (min-width: 901px) {
  .home-partner-offer .section-heading { row-gap: 0; }
  .home-partner-offer .section-heading>div:first-child { grid-column: 1 / -1; }
  .home-partner-offer .section-heading>.lead { grid-column: 2; margin-top: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .all-services-list a:hover { color: #006666; }
}
.home .home-people { background: var(--pale); }
.home-people .partner-main>p:not(.lead, .eyebrow) { font-size: var(--fs-body); }
/* "What you receive": both columns on the split, the right one set like the left (the founder's option B): the three
   groups as names in ink with their text under them, no table lines; the format note small and grey at the end. */
@media (min-width: 901px) { .home-report .report-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); } }
.home-report .report-split h3 { margin-bottom: 16px; }
.home-report .report-split>div>p:not(.small) { margin: 0 0 16px; }
.home-report .report-split p:not(.small), .home-report .engagement-summary dd { font-size: var(--fs-body); color: var(--ink); }
.home-report .report-split p.small { font-size: var(--fs-ui); color: var(--muted); }
.home-report .engagement-summary { border-top: 0; }
.home-report .engagement-summary>div { margin-top: 16px; padding: 0; border: 0; }
.home-report .engagement-summary>div:first-child { margin-top: 0; }
.home-report .engagement-summary dt { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.home-report .engagement-summary dd { margin: 2px 0 0; }
.home-report .engagement-summary+p.small { margin-top: 20px; }
@media (min-width: 1001px) { .home-hero .hero-copy { position: sticky; top: 140px; align-self: start; } }
/* The four service areas (restored as they were, the founder): no space above and below the rows, so the first and
   last rows' hover fields reach the navy's edges; the pale cell takes the band padding like every section. */
.areas-rows { padding-block: 0; }
.areas-statement-inner { padding-block: var(--band-pad); }
.partner-offer-note { max-width: 68ch; margin-top: 32px; font-size: var(--fs-body); }
/* Partners (the founder: "shockingly bad"; a review by Claude and Codex): the three ways' note and example as a split
   under the columns, 48px below them, in ink at body size (they were a pale box touching the columns and a 15px line
   1,280px wide); the first step as a split on pale, without the photograph (it stays on the homepage and About), so
   the fields alternate and no white run passes about 700px (2,031px before). */
.partners-model-notes { margin-top: 48px; }
.partners-model-notes p { max-width: 68ch; margin: 0; font-size: var(--fs-body); color: var(--ink); }
.partners-model-notes p+p { margin-top: 16px; }
.partners-page .partners-first-step { background: var(--pale); }
/* The same split (heading left, text or rows right at x768) for Where to start's "When we're the wrong choice" (its
   text sat under the heading, 830px wide, the right half empty) and AI-built software's questions (rows 1,280px
   wide around ~700px of text). */
:is(.partners-first-step, .situations-not-a-fit) .principle-grid>div:last-child>p:not(.lead) { margin: 16px 0 0; max-width: 68ch; font-size: var(--fs-body); color: var(--ink); }
:is(.partners-first-step, .situations-not-a-fit) .principle-grid>div:last-child>.lead { margin: 0 0 24px; }
.partners-first-step .principle-grid>div:last-child>.text-link { margin-top: 28px; }
.vibe-questions .principle-grid>div:last-child>.actions { margin-top: 28px; }
@media (min-width: 901px) {
  .partners-model-notes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .partners-model-notes p+p { margin-top: 0; }
  :is(.partners-first-step, .situations-not-a-fit, .vibe-questions) .principle-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  :is(.partners-first-step, .situations-not-a-fit, .vibe-questions) .principle-grid>div:first-child>h2 { margin-bottom: 0; }
  :is(.partners-first-step, .situations-not-a-fit) .principle-grid>div:last-child { margin-top: 36px; }
  .vibe-questions .principle-grid>div:last-child { margin-top: 20px; }
  /* About, "Architecture expertise": the heading across in two lines (four in the left column, "needed." alone),
     the picture and the text side by side under it. */
  .about-page #company-building .fabric-grid>div:first-child { display: contents; }
  .about-page #company-building .fabric-grid>div:first-child>.eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .about-page #company-building .fabric-grid>div:first-child>h2 { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-bottom: 44px; }
  .about-page #company-building .fabric-grid>div:first-child>.showcase-pic { grid-column: 1; grid-row: 3; margin-top: 0; }
  .about-page #company-building .fabric-grid>div:last-child { grid-column: 2; grid-row: 3; margin-top: 0; }
}
/* Contact, "What happens next": the four steps as open rows (they were a pale box on white). */
.contact-steps { margin-top: 16px; }
.contact-steps+p { margin-top: 16px; }
/* Site-wide fixes from the rules review (Claude and four Codex reads; the founder's go, 30 October 2026):
   - Running text in ink (§4: grey is for notes). Sixteen components carried their argument in grey: the service
     cards (related, area, situation and proof rows), FAQ answers, the engagement rows, scope and limits text, worked
     examples, the depths and checks, the commission rows, How We Work's steps, the paid case's evidence sheet and
     AI-built software's second paragraph. Notes stay grey: fee lines, the booking note, format and earlier-work
     notes, the artifacts line.
   - Example documents: their text at 17px in ink (it was 16px grey; only their labels are 14px).
   - Contact: the booking panel stays in view while the longer left column passes (where it fits the screen).
   - Service and case pages: "Related services" at the family's heading size (it outranked the page's sections). */
.related-grid .package-link>p:not(.eyebrow), .row-list .package-link>p:not(.eyebrow), .area-package-grid .package-link>p:not(.eyebrow),
.proof-link>p:not(.eyebrow), .check-scope>p:not(.eyebrow), .depth-item>p:not(.eyebrow), .commission-item>p:not(.eyebrow),
.approach-method .method-row>p, .scope-split>div>p:not(.small, .muted, .eyebrow),
.service-footnotes>div>p, .variant-list>a p, details>p, .engagement-summary dd, .example-rows dd, .case-doc .case-evidence dd,
.vibe-scan .principle-grid>div:last-child>p.muted { color: var(--ink); }
.vibe-scan .principle-grid>div:last-child>p.muted { font-size: var(--fs-body); }
[data-ui] .doc-rows dd { font-size: var(--fs-body); color: var(--ink); }
[data-ui] .doc-excerpt { font-size: var(--fs-body); }
@media (min-width: 901px) and (min-height: 820px) { .contact-top .contact-split>.booking-panel { position: sticky; top: 104px; align-self: start; } }
@media (min-width: 721px) { .service-detail .section-heading h2 { font-size: clamp(32px, 3vw, 46px); line-height: 1.1; } }
@media (max-width: 720px) {
  :is(.service-detail, .case-detail) .section-heading h2 { font-size: 30px; }
}
/* Services, "All services" (a rules review, the founder's go): on a pale band (with "Choose by purpose" it made 2,452px
   of white) and on the split, Assess's ten services left and the other three areas stacked right (four columns of
   10, 4, 2 and 1 rows left most of the section empty). */
.services-page .services-all { background: var(--pale); }
.all-services { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); row-gap: 40px; margin-top: 48px; }
.all-services-group+.all-services-group { margin-top: 40px; }
.all-services h3 { font-size: 21px; }
.all-services-list { margin: 16px 0 0; padding: 0; list-style: none; }
.all-services-list li { padding: 0; border-top: 1px solid var(--line); }
/* The whole row is the link (a 49px tap area; the text alone was 25px) at body size (it was 16px), the coral arrow
   at the row's end as on the Case studies rows (the founder: "do"). */
.all-services-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; font-size: var(--fs-body); color: var(--ink); text-decoration: none; }
.all-services-list .arrow { flex: 0 0 auto; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .all-services-list a:hover .arrow { transform: translateX(4px); } }
.page-hero .start-with { margin-top: 18px; color: var(--navy-label); }
.page-hero .start-with a { color: var(--mint); }
@media (max-width: 720px) {
  .all-services { grid-template-columns: minmax(0, 1fr); }
}
/* Case studies (the founder: "let's try pale"): the list on a pale band under the white top, with the band padding. */
.company-page .experience-index { padding-block: var(--band-pad); background: var(--pale); }
/* Two more parts on the split line (§5; the founder's go, 30 October 2026), right column at x768 (x544 at 1024):
   - Services and How We Work, the four example documents: the split gap between their two equal columns, as on the
     Assess page; the document's equal inset on both sides keeps the second column on the split (a 48px gap put it at
     x744).
   - How We Work, the Architecture Fabric on navy: the method's equal columns and split gap (an 80px gap put the
     steps at x760). */
@media (min-width: 901px) {
  :is(.services-page, .approach-page) .area-reader [data-ui].area-specimen .doc-rows { column-gap: var(--split-gap); }
  .approach-page #architecture-fabric .fabric-grid { column-gap: var(--split-gap); }
}
/* The hero report (the founder, 30 October 2026): the question it answers sits above the answer. */
.hero-doc .doc-question { margin: 12px 0 0; color: var(--ink); font-size: var(--fs-lead); font-weight: 500; line-height: 1.35; }
.hero-doc .doc-question+.doc-title { margin-top: 4px; }
/* How we work: the diagram of the investigation (the founder, 30 October 2026) replaces the two-view map. It sits after the
   method grid, so the sticky introduction stops with the steps. The phone drawing shows from 900px down, at most 520px
   wide; no label falls below 12px at any width. */
.method-diagram { margin: 80px 0 0; }
.method-diagram svg { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.method-diagram figcaption { margin-top: 16px; color: var(--navy-label); font-size: 15px; }
.method-diagram .fabric-map-phone { display: none; }
@media (max-width: 900px) {
  .method-diagram { margin-top: 56px; }
  .method-diagram .fabric-map:not(.fabric-map-phone) { display: none; }
  .method-diagram .fabric-map-phone { display: block; max-width: 520px; }
}
/* The two specialisations (the founder's decisions, 31 October 2026: AI as a deep specialisation of the practice).
   The heading left and the lead right, as "What you receive" (across, with the lead under it, the white before the
   example sheet ran 1,379px at 1440, past the homepage's 1,300); the two specialisations on the split,
   each a title at the card size, its text in ink, its problems as link rows (the question in ink, the service under it
   as a teal label, the coral arrow; the Services list's rows and tap areas), then its further links. On the homepage
   the AI design example follows as a wide pale sheet (a box takes the other tone of its band). Services (the founder,
   31 October 2026, option C) shows the block on white, without the sheet and without the problem rows, its lead level
   with the heading's capitals as "Common starting points" (on pale the block made one 2,145px pale run with the four
   areas; the rows stay on the homepage). */
.specialisations { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); row-gap: 56px; }
.specialisation h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.02em; }
.specialisation h3 a { color: inherit; text-decoration: none; }
.specialisation>p { margin: 16px 0 0; max-width: 60ch; font-size: var(--fs-body); color: var(--ink); }
.specialisation-problems { margin-top: 24px; }
.specialisation-problems li:last-child { border-bottom: 1px solid var(--line); }
.specialisation-problems .problem { display: flex; flex-direction: column; gap: 2px; }
.specialisation-problems .problem-service { font-size: var(--fs-ui); font-weight: 600; color: var(--teal); }
.specialisation .actions { margin-top: 24px; }
.ai-design-sheet { margin-top: 72px; }
.home-specialisations .ai-design-sheet { background: var(--pale); }
.ai-design-sheet .doc-title { max-width: 44ch; }
.ai-design-sheet .sheet-cols dd { font-size: var(--fs-body); color: var(--ink); }  /* example documents' text: 17px in ink */
@media (hover: hover) and (pointer: fine) { .specialisation h3 a:hover { color: #006666; } }
@media (min-width: 901px) {
  .services-specialisations .section-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  .services-specialisations .section-heading>.lead { margin-top: 36px; }
}
@media (max-width: 900px) {
  .specialisations { grid-template-columns: minmax(0, 1fr); }
  .ai-design-sheet { margin-top: 56px; }
}
@media (max-width: 720px) { [data-ui].ai-design-sheet .doc-title { font-size: 22px; } }  /* as the area examples on phones */

/* Homepage top, option 1 (the founder, 31 October 2026: "the box stretches the hero a lot"). The navy ends after the
   hero's text; the strip's line and the four areas, stacked under it, sit on a pale band inside the same section; the
   shorter example report crosses from the navy onto the pale, as the service pages' decision box crosses its navy. */
.hero-crossing { isolation: isolate; overflow-x: clip; padding-bottom: 72px; }
.hero-crossing .hero-foot { grid-template-rows: auto 1fr; }
.hero-crossing .hero-copy { grid-column: 1; grid-row: 1; padding-bottom: 72px; }
.hero-crossing .hero-figure { grid-column: 2; grid-row: 1 / span 2; }
.hero-crossing .hero-start { position: relative; grid-column: 1; grid-row: 2; align-self: stretch; padding-top: 48px; color: var(--ink); }
.hero-crossing .hero-start::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: -72px; left: -100vw; right: -100vw; background: var(--pale); }
.hero-start>p { margin: 0; font-size: var(--fs-body); color: var(--ink); }
.start-roles { margin-top: 16px; }
.start-roles li:last-child { border-bottom: 1px solid var(--line); }
.start-roles a { font-weight: 600; }
.hero-crossing .start-roles .arrow { color: var(--coral); }  /* the pale's coral, not the navy's cyan */
.home-report .receive-reasoning { margin-top: 8px; }
@media (min-width: 1001px) { .hero-crossing .hero-copy { position: static; } }
@media (max-width: 1000px) {
  .hero-crossing .hero-foot { grid-template-rows: none; }
  .hero-crossing :is(.hero-copy, .hero-figure, .hero-start) { grid-column: 1; grid-row: auto; }
  .hero-crossing .hero-copy { padding-bottom: 0; }
  .hero-crossing .hero-start::before { top: -144px; }  /* the box's last 96px cross onto the pale */
}
@media (max-width: 720px) { .hero-crossing .hero-start::before { top: -136px; } }
/* AI Architecture situation (the founder's decision 50, 31 October 2026): the link to the AI design example beside the
   booking button sits on the navy, so it takes the navy's link colour, as "Where to start" in the homepage hero. */
.journey-page .page-hero .actions .text-link, .journey-page .page-hero .actions .text-link .arrow { color: var(--mint); }
@media (hover: hover) and (pointer: fine) { .journey-page .page-hero .actions .text-link:hover { color: #87f8ff; } }
/* Service page tops with "Most clients start with ..." (the founder, 31 October 2026: a white line between the navy and
   the contents bar). The navy is the intro grid's ::before, drawn over the introduction's and button's rows plus the
   hero's foot; the line had no row of its own, so it fell into the next row, outside the navy, and the navy stopped
   above the hero's end (43 to 93px of white). The line gets that row and the navy covers it: under the button, and on
   phones under the decision box, where it already stood. Pages without the line are untouched. */
@media (min-width: 901px) {
  :is(.service-detail, .journey-page) .page-hero .page-intro:has(>div>.start-with)::before { grid-row: 4 / span 3; }
  :is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child>.start-with { grid-row: 6; z-index: 1; }
}
@media (max-width: 900px) {
  :is(.service-detail, .journey-page) .page-hero .page-intro:has(>div>.start-with)::before { grid-row: 4 / span 4; }
  :is(.service-detail, .journey-page) .page-hero .page-intro>div:first-child>.start-with { grid-row: 7; z-index: 1; }
}

/* LinkedIn and GitHub links: brand icon before the text (footer, Contact). */
.social-icon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 20px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.text-link .social-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}