* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--mk-paper); color: var(--mk-ink); font: 400 1.25rem/1.5 var(--mk-font-read); }
a { color: inherit; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }

/* The desktop navigation shares one band with the mark. */
.company-header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; padding-block: 16px; border-bottom: 1px solid var(--mk-rule); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; }
.wordmark img { width: 176px; height: auto; display: block; }
.navigation { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 24px; font-size: 1rem; }
.navigation a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; text-decoration: none; border-bottom: 1px solid transparent; }
.navigation a:hover, .navigation a[aria-current=page], .navigation a.is-active { border-bottom-color: currentColor; }
.navigation a[aria-current=page] { font-weight: 700; }

h1, h2 { font: 900 2.75rem/1.12 var(--mk-font-display); letter-spacing: -.025em; margin: 0; }
h1 { font-size: 4rem; }
h3 { font: 700 1.5rem/1.25 var(--mk-font-read); margin: 0; }
.eyebrow { font-size: 1rem; font-weight: 700; color: var(--mk-pencil); margin: 0 0 16px; }
.prose p { margin: 0; }
.prose p + p { margin-top: 24px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 24px; }
.mk-button { display: inline-flex; align-items: center; background: var(--mk-ink); color: var(--mk-paper); padding: 12px 24px; min-height: 48px; font-weight: 700; text-decoration: none; }
.mk-button:hover { background: var(--mk-pencil); }
.mk-button:focus-visible { outline-color: var(--mk-ink); }
.mk-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }

/* Each composition owns its parent columns. Text always fills those columns. */
.company-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.company-section > *, .connected-work > *, .reuse-band > * { min-width: 0; }
.composition-intro { padding-block: 64px 40px; }
.intro-copy { grid-column: 1 / -1; }
.intro-lead { font-size: 1.5rem; margin-top: 24px; }
[data-page=about] .composition-intro { padding-block: 40px 32px; }
[data-page=about] .composition-intro h1 { font-size: 2.75rem; }
[data-page=about] .intro-lead { margin-top: 16px; }

.composition-mechanism { padding: 32px; background: var(--mk-select); }
.mechanism-copy { grid-column: 1 / 8; }
.mechanism-copy h2 { font-size: 2rem; line-height: 1.2; }
.mechanism-copy .prose { margin-top: 24px; }
.section-scene { grid-column: 8 / -1; margin: 0; align-self: center; }
.section-scene img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.section-scene figcaption { font-size: 1rem; color: var(--mk-pencil); margin-top: 12px; }
.section-scene figcaption strong { display: block; color: var(--mk-ink); font-weight: 700; }
.section-scene figcaption span { display: block; margin-top: 4px; }
.function-labels { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--mk-rule); font-size: 1rem; font-weight: 700; }

.composition-comparison { padding-block: 64px 48px; row-gap: 32px; }
.example-heading { grid-column: 1 / -1; }
.example-heading h2 { font-size: 2.75rem; }
.decision-copy { grid-column: 1 / 7; }
.decision-copy .prose { margin-top: 16px; }
.qualification { font-size: 1rem; color: var(--mk-pencil); }
.schedule-comparison { grid-column: 7 / -1; align-self: start; }
.schedule-comparison > h3 { padding: 16px; background: var(--mk-select); font-size: 1.25rem; }
.comparison-row { padding-block: 16px; border-bottom: 1px solid var(--mk-rule); }
.comparison-row h4 { margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; }
/* Intrinsic option widths wrap the whole labeled value when text grows. */
.comparison-values { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0; }
.comparison-option { flex: 1 1 max-content; min-width: 0; }
.comparison-option dt { font-size: 1rem; color: var(--mk-pencil); }
.comparison-option dd { margin: 4px 0 0; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.comparison-result { border-top: 3px solid var(--mk-ink); border-bottom: 0; }
.comparison-result dd { font-size: 1.5rem; font-weight: 700; }
.connected-work { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-top: 40px; border-top: 1px solid var(--mk-rule); }
.connected-copy { grid-column: 1 / 8; align-self: center; }
.connected-copy .prose { margin-top: 16px; }
.reuse-band { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 32px; background: var(--mk-select); }
.reuse-band h3 { grid-column: 1 / 5; }
.reuse-band .prose { grid-column: 5 / -1; }

.composition-vision { padding-block: 64px; }
.vision-heading { grid-column: 1 / 5; }
.vision-heading h2 { font-size: 1.75rem; line-height: 1.25; }
.vision-copy { grid-column: 5 / -1; }
.composition-contact { border-top: 3px solid var(--mk-ink); padding-block: 32px 48px; }
.composition-contact h2 { grid-column: 1 / 5; font-size: 2rem; }
.contact-details { grid-column: 5 / -1; }
.company-facts { font-weight: 700; }
.contact-details address { font: inherit; font-size: 1rem; color: var(--mk-pencil); margin-top: 12px; }
.contact-details a { overflow-wrap: anywhere; }

/* Existing non-composition pages retain their native sections and fallback. */
.content-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-block: 40px; border-bottom: 1px solid var(--mk-rule); }
.content-section.hero { padding-block: 56px 48px; }
.content-section:last-of-type { border-bottom: 0; }
/* Copy reads in a seven-column measure; the opening and closing bands may run wider. */
.section-copy { grid-column: 1 / 8; }
.hero .section-copy { grid-column: 1 / 10; }
.copy-section h2 { font-size: 2rem; line-height: 1.2; }
.section-copy .prose { margin-top: 20px; }
.has-scene .section-copy { grid-column: 1 / 8; }
.section-cta { margin-block: 24px 48px; padding: 40px; background: var(--mk-select); border-bottom: 0; }
.section-cta .section-copy { grid-column: 1 / 10; }
.section-cta h2 { font-size: 2rem; }
.lead { font-size: 1.5rem; }
.capability-grid, .work-steps { grid-column: 1 / -1; display: grid; gap: 24px; list-style: none; margin: 0; padding: 24px 0 0; }
.capability-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capability-grid p, .work-steps p { margin: 12px 0 0; }
.company-footer { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-block: 40px; font-size: 1rem; border-top: 1px solid var(--mk-rule); }
.company-footer > * { min-width: 0; }
.footer-identity { grid-column: 1 / 5; }
.footer-links { grid-column: 5 / 9; display: flex; flex-direction: column; align-items: flex-start; }
.footer-contact { grid-column: 9 / -1; display: flex; flex-direction: column; align-items: flex-start; }
.footer-contact a, .footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; }
.footer-contact a { overflow-wrap: anywhere; }
.footer-links a { text-decoration: none; }
.footer-links a:hover, .footer-links a[aria-current=page] { text-decoration: underline; }
.footer-links a[aria-current=page], .footer-company { font-weight: 700; }
.footer-contact p { margin: 0; }
.footer-contact address { font: inherit; color: var(--mk-pencil); margin-block: 12px; }
.footer-identity p { margin: 16px 0 0; }
.skip { position: absolute; top: -200px; left: 16px; background: var(--mk-ink); color: var(--mk-paper); padding: 12px; }
.skip:focus { top: 16px; }

/* The opening names the work beside the promise. The example shows a
   customer request becoming a quote and agreed delivery information. */
.journey-promise { align-items: center; padding-block: 48px; }
.promise-copy { grid-column: 1 / 8; }
.brand-promise { margin: 0 0 24px; color: var(--mk-pencil); font-size: 1.125rem; }
.promise-copy h1 { font-size: 4rem; line-height: 1.04; }
.promise-explanation { margin-top: 24px; font-size: 1.5rem; }
.opening-work-summary { margin: 20px 0 0; font-size: 1.125rem; }
.promise-copy .actions { margin-top: 24px; font-size: 1.125rem; }
.opening-work-example { grid-column: 8 / -1; padding: 24px; background: var(--mk-select); }
.opening-work-example h2 { font: 700 1.5rem/1.25 var(--mk-font-read); letter-spacing: 0; }
.opening-work-example dl { margin: 24px 0 0; }
.opening-work-example dl > div { padding: 16px 0; border-top: 1px solid var(--mk-rule); }
.opening-work-example dt { font-size: 1rem; font-weight: 700; }
.opening-work-example dd { margin: 8px 0 0; font-size: 1.125rem; }
.opening-work-example .scope-note { margin: 16px 0 0; }
.company-map { grid-column: 8 / -1; margin: 0; padding: 32px 24px; background: var(--mk-select); container-type: inline-size; }
.company-map figcaption { margin-bottom: 32px; font-size: 1rem; font-weight: 700; }
.system-network { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.map-functions { display: contents; list-style: none; padding: 0; margin: 0; }
.map-functions li { position: relative; padding-bottom: 32px; text-align: center; font-size: 1rem; font-weight: 700; }
.map-functions li:nth-child(-n+2) { grid-row: 1; }
.map-functions li:nth-child(n+3) { grid-row: 3; padding-top: 32px; padding-bottom: 0; }
.map-functions li::after { content: ''; position: absolute; bottom: 0; left: 50%; height: 24px; border-left: 1px solid var(--mk-ink); }
.map-functions li:nth-child(n+3)::after { top: 0; bottom: auto; }
.map-foundation { grid-column: 1 / -1; grid-row: 2; padding: 24px; border-block: 3px solid var(--mk-ink); background: var(--mk-paper); }
.map-foundation p { margin: 0; font: 700 1.5rem/1.25 var(--mk-font-read); }

.journey-mechanism-flow { padding: 48px 32px; background: var(--mk-select); row-gap: 40px; }
.mechanism-heading { grid-column: 1 / 8; }
.mechanism-heading h2 { font-size: 2rem; line-height: 1.2; }
.mechanism-introduction { grid-column: 8 / -1; align-self: end; font-size: 1.125rem; }
/* Four concrete outputs connect through the information carried forward.
   Each stage belongs to one scene, with a shared company foundation. */
.connected-example { grid-column: 1 / -1; margin: 0; }
.connected-example > figcaption { font-size: 1rem; font-weight: 700; margin-bottom: 24px; }
.connected-example-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.connected-example-steps li { min-width: 0; position: relative; padding-top: 24px; border-top: 2px solid var(--mk-ink); display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 16px; }
.connected-example-steps li::before { content: ''; position: absolute; top: -6px; left: 0; width: 10px; height: 10px; background: var(--mk-ink); }
.connected-example-steps h3 { font-size: 1.25rem; }
.step-number { display: block; margin-bottom: 12px; font-size: 1rem; color: var(--mk-pencil); }
.work-output { margin: 0; font-size: 1.125rem; }
.work-carry { padding: 16px; background: var(--mk-paper); border-top: 1px solid var(--mk-rule); }
.work-carry h4 { margin: 0 0 8px; font-size: 1rem; font-weight: 700; }
.work-carry p { margin: 0; font-size: 1rem; }
.connected-example-foundation { margin-top: 24px; padding: 16px; border-block: 1px solid var(--mk-pencil); font-size: 1.125rem; font-weight: 700; }
.connected-example .scope-note { margin: 16px 0 0; }
.journey-scene { margin: 0; min-width: 0; }
.journey-scene img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.journey-scene figcaption { margin-top: 12px; font-size: 1rem; color: var(--mk-pencil); }
.system-work .journey-scene { grid-column: 1 / 6; }
.system-sequence { grid-column: 6 / -1; list-style: none; padding: 0; margin: 0; }
.system-sequence li { position: relative; padding: 0 0 24px 24px; border-left: 1px solid var(--mk-pencil); }
.system-sequence li:last-child { padding-bottom: 0; }
.system-sequence li::before { content: ''; position: absolute; left: -4px; top: 8px; width: 8px; height: 8px; background: var(--mk-ink); }
.system-sequence h3 { font-size: 1.25rem; }
.system-sequence p { margin: 8px 0 0; font-size: 1.125rem; }
.mechanism-details { grid-column: 1 / -1; border-top: 1px solid var(--mk-rule); }
.mechanism-details summary { padding-block: 16px; cursor: pointer; font-size: 1rem; font-weight: 700; }
.mechanism-details-copy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-block: 16px; }
.mechanism-details-copy h3 { font-size: 1.5rem; }
.mechanism-details-copy .prose { font-size: 1.125rem; }
.mechanism-next { grid-column: 1 / -1; }
.mechanism-next .actions { margin: 0; font-size: 1rem; }
.scope-note { margin: 0 0 16px; font-size: 1rem; color: var(--mk-pencil); }

.journey-working-relationship { padding-block: 64px; row-gap: 40px; }
.relationship-heading { grid-column: 1 / 6; }
.relationship-heading h2 { font-size: 2.5rem; }
.relationship-heading .prose { margin-top: 24px; font-size: 1.125rem; }
.relationship-steps { grid-column: 7 / -1; list-style: none; margin: 0; padding: 0; counter-reset: relationship; }
.relationship-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; counter-increment: relationship; }
.relationship-steps li + li { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mk-rule); }
.relationship-steps li::before { content: '0' counter(relationship); grid-column: 1; grid-row: 1 / 3; font-size: 1rem; font-weight: 700; color: var(--mk-pencil); }
.relationship-steps h3 { grid-column: 2; font-size: 1.25rem; }
.relationship-steps p { grid-column: 2; margin: 8px 0 0; font-size: 1.125rem; }
.adaptation-note { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-top: 24px; border-top: 1px solid var(--mk-rule); }
.adaptation-note h3 { grid-column: 1 / 6; font-size: 1.125rem; }
.adaptation-note p { grid-column: 7 / -1; margin: 0; font-size: 1rem; color: var(--mk-pencil); }

.journey-customer-stories { padding: 48px 32px; background: var(--mk-select); row-gap: 32px; }
.stories-heading { grid-column: 1 / -1; }
.stories-heading h2 { font-size: 2rem; }
.story-quote { grid-column: 1 / 8; margin: 0; }
.story-quote blockquote { margin: 0; font: 700 2rem/1.3 var(--mk-font-read); }
.story-quote blockquote p { margin: 0; }
.story-quote blockquote p::before { content: '“'; }
.story-quote blockquote p::after { content: '”'; }
.story-quote figcaption { margin-top: 24px; font-size: 1rem; }
.story-result { grid-column: 9 / -1; border-top: 3px solid var(--mk-ink); padding-top: 24px; }
.story-result h3 { font-size: 1rem; }
.story-result > p { margin: 16px 0 0; font: 700 1.5rem/1.3 var(--mk-font-read); }
.story-qualification { grid-column: 1 / -1; margin: 0; font-size: 1rem; color: var(--mk-pencil); }
.stories-next { grid-column: 1 / -1; }
.stories-next .actions { margin: 0; font-size: 1rem; }

.journey-example-journey { padding-block: 48px; row-gap: 24px; }
.journey-example-journey .example-heading h2 { font-size: 1.75rem; }
.example-details { grid-column: 1 / -1; border-block: 1px solid var(--mk-rule); }
.example-details summary { padding-block: 16px; font-size: 1.125rem; font-weight: 700; cursor: pointer; }
.example-details summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.example-details[open] summary { margin-bottom: 16px; }
.example-sequence { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; counter-reset: company-example; }
.example-sequence > li { counter-increment: company-example; position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 32px 0; border-top: 1px solid var(--mk-rule); }
.example-sequence > li::before { content: '0' counter(company-example); grid-column: 1; grid-row: 1; font-size: 1rem; font-weight: 700; color: var(--mk-pencil); }
.example-sequence > li > * { min-width: 0; }
.example-copy { grid-column: 2 / 8; grid-row: 1; }
.example-copy h3 { font-size: 1.5rem; }
.example-copy .prose { margin-top: 16px; font-size: 1.125rem; }
.example-copy .qualification { font-size: 1rem; }
.example-calculation { grid-column: 8 / -1; grid-row: 1; align-self: start; padding: 24px; background: var(--mk-select); container-type: inline-size; }
.example-calculation h4 { margin: 0 0 24px; font-size: 1rem; font-weight: 700; }
/* Shared intrinsic rows align equivalent inputs and results as labels wrap. */
.calculation-schedules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.calculation-schedule { display: grid; grid-template-rows: subgrid; grid-row: span calc(1 + var(--calculation-value-tracks)); row-gap: 0; min-width: 0; }
.calculation-schedule h5 { margin: 0 0 16px; font-size: 1.125rem; line-height: 1.25; }
.calculation-schedule dl { display: grid; grid-template-rows: subgrid; grid-row: span var(--calculation-value-tracks); row-gap: 0; margin: 0; font-size: 1rem; }
.calculation-schedule dl > div { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }
.calculation-schedule dl > div + div { margin-top: 12px; }
.calculation-schedule dt { color: var(--mk-pencil); }
.calculation-schedule dd { margin: 4px 0 0; font-variant-numeric: tabular-nums; font-weight: 700; }
.calculation-schedule .calculation-result { padding-top: 16px; border-top: 3px solid var(--mk-ink); }
.calculation-result dd { font-size: 1.5rem; }
.example-connected .journey-scene { grid-column: 8 / -1; grid-row: 1; align-self: center; }
.example-sequence .example-reuse { padding-block: 32px; background: var(--mk-select); }
.example-reuse h3 { grid-column: 2 / 6; grid-row: 1; align-self: start; font-size: 1.5rem; }
.example-reuse .prose { grid-column: 6 / -1; grid-row: 1; padding-right: 24px; font-size: 1.25rem; }
.example-reuse::before { padding-left: 24px; }


.journey-company-introduction { padding-block: 64px; row-gap: 40px; }
.company-introduction-heading { grid-column: 1 / 6; }
.company-introduction-heading h1 { font-size: 2.75rem; }
.company-introduction-copy { grid-column: 6 / -1; }
.company-introduction-copy .prose p:first-child { font-size: 1.75rem; font-weight: 700; line-height: 1.3; }
.company-introduction-copy .actions { font-size: 1rem; }
.company-identity { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--mk-rule); }
.company-identity dt { font-size: 1rem; color: var(--mk-pencil); }
.company-identity dd { margin: 8px 0 0; font-size: 1.125rem; font-weight: 700; }
.journey-company-leadership { padding: 40px 32px; background: var(--mk-select); row-gap: 32px; }
.leadership-heading { grid-column: 1 / 5; }
.leadership-heading h2 { font-size: 2rem; }
.company-people { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.company-people h3 { font-size: 1.5rem; }
.company-people p { margin: 8px 0 0; font-size: 1.125rem; }
.company-partnership { grid-column: 5 / -1; padding-top: 24px; border-top: 1px solid var(--mk-rule); }
.company-partnership h3 { font-size: 1.125rem; }
.company-partnership p { margin: 8px 0 16px; font-size: 1.125rem; }
.company-partnership a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; }

/* A narrow diagram becomes one connected list, including when text grows. */
@container (max-width: 16rem) {
  .calculation-schedules { grid-template-columns: minmax(0, 1fr); }
  .calculation-schedule + .calculation-schedule { margin-top: 24px; }
  .system-network { display: block; }
  .map-functions { display: block; margin-left: 12px; padding-left: 24px; border-left: 1px solid var(--mk-ink); }
  .map-functions li:nth-child(n) { padding: 0 0 16px; text-align: left; }
  .map-functions li:nth-child(n)::after { top: 12px; bottom: auto; left: -24px; width: 16px; height: 0; border-left: 0; border-top: 1px solid var(--mk-ink); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .company-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding-block: 16px; }
  .navigation { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .company-section, .connected-work, .reuse-band, .company-footer, .content-section { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  h1 { font-size: 3.5rem; }
  .composition-mechanism { padding: 24px; }
  .mechanism-copy, .connected-copy, .has-scene .section-copy { grid-column: 1 / 5; }
  .section-scene { grid-column: 5 / -1; }
  .decision-copy, .schedule-comparison { grid-column: 1 / -1; }
  .vision-heading, .composition-contact h2, .reuse-band h3 { grid-column: 1 / 4; }
  .vision-copy, .contact-details, .reuse-band .prose { grid-column: 4 / -1; }
  .footer-identity { grid-column: 1 / -1; }
  .footer-links { grid-column: 1 / 5; }
  .footer-contact { grid-column: 5 / -1; }
  .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .section-copy, .section-cta .section-copy { grid-column: 1 / -1; }
  .journey-promise { padding-block: 48px; }
  .promise-copy { grid-column: 1 / 6; }
  .promise-copy h1 { font-size: 3rem; }
  .promise-explanation { font-size: 1.25rem; }
  .opening-work-example { grid-column: 6 / -1; }
  .opening-work-example h2 { font-size: 1.25rem; }
  .opening-work-example dd { font-size: 1rem; }
  .company-map { grid-column: 6 / -1; padding: 24px 16px; }
  .map-foundation { padding: 16px; }
  .map-foundation p { font-size: 1.25rem; }
  .journey-mechanism-flow { padding: 32px 24px; gap: 24px; }
  .mechanism-heading, .mechanism-introduction { grid-column: 1 / -1; }
  .connected-example-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .system-work { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .system-work .journey-scene { grid-column: 1 / 5; }
  .system-sequence { grid-column: 5 / -1; }
  .mechanism-next { grid-column: 1 / -1; }
  .company-work-map ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 0 24px 24px; border-left: 1px solid var(--mk-pencil); }
  .company-work-map li { padding: 0; }
  .company-work-map li::after { display: none; }
  .connected-benefit { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .connected-benefit h3 { grid-column: 1 / 4; }
  .connected-benefit p { grid-column: 4 / -1; }
  .relationship-heading { grid-column: 1 / 5; }
  .relationship-heading h2 { font-size: 2rem; }
  .relationship-steps { grid-column: 5 / -1; }
  .adaptation-note { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .adaptation-note h3 { grid-column: 1 / 5; }
  .adaptation-note p { grid-column: 5 / -1; }
  .journey-customer-stories { padding: 32px 24px; }
  .story-quote { grid-column: 1 / 6; }
  .story-quote blockquote { font-size: 1.5rem; }
  .story-result { grid-column: 6 / -1; }
  .story-result > p { font-size: 1.25rem; }
  .example-sequence > li { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .example-copy { grid-column: 2 / -1; }
  .example-calculation { grid-column: 2 / -1; grid-row: 2; }
  .calculation-result dd { font-size: 1.25rem; }
  .example-connected .example-copy { grid-column: 2 / 5; }
  .example-connected .journey-scene { grid-column: 5 / -1; }
  .example-reuse h3 { grid-column: 2 / 5; }
  .example-reuse .prose { grid-column: 5 / -1; }
  .contact-invitation { grid-column: 1 / 5; }
  .journey-contact-band h2 { font-size: 2.25rem; }
  .journey-contact-band .contact-details { grid-column: 5 / -1; }
  .company-introduction-heading, .leadership-heading { grid-column: 1 / 4; }
  .company-introduction-copy, .company-people, .company-partnership { grid-column: 4 / -1; }
  .company-people { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  body { font-size: 1.125rem; }
  .wrap { padding-inline: 16px; }
  .company-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding-block: 16px; }
  .wordmark img { width: 144px; }
  .navigation { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 4px 24px; }
  .company-section, .connected-work, .reuse-band, .company-footer, .content-section { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
  .company-section > *, .connected-work > *, .reuse-band > *, .company-footer > *, .content-section > * { grid-column: 1 / -1; }
  .reuse-band .prose, .has-scene .section-copy { grid-column: 1 / -1; }
  h1 { font-size: 2.75rem; }
  h2, .example-heading h2 { font-size: 2rem; }
  .composition-intro { padding-block: 40px 32px; }
  [data-page=about] .composition-intro { padding-block: 32px; }
  [data-page=about] .composition-intro h1 { font-size: 2.25rem; }
  .intro-lead, .lead { font-size: 1.25rem; }
  .composition-mechanism { padding: 24px 16px; }
  .mechanism-copy h2 { font-size: 1.75rem; }
  .section-scene { align-self: start; }
  .composition-comparison { padding-block: 48px 40px; row-gap: 32px; }
  .connected-work { padding-top: 32px; }
  .reuse-band { padding: 24px 16px; }
  .composition-vision { padding-block: 48px; }
  .vision-heading h2 { font-size: 1.75rem; }
  .composition-contact { padding-block: 32px; }
  .composition-contact h2 { font-size: 2rem; }
  .contact-details .actions { align-items: flex-start; }
  .content-section { padding-block: 32px; }
  .content-section.hero { padding-block: 40px 32px; }
  .content-section .section-copy, .hero .section-copy, .section-cta .section-copy { grid-column: 1 / -1; }
  .section-cta { padding: 24px 16px; }
  .capability-grid, .work-steps { grid-template-columns: 1fr; }
  .journey-promise { padding-block: 32px 48px; row-gap: 32px; }
  .promise-copy h1 { font-size: 2.5rem; }
  .brand-promise { margin-bottom: 16px; font-size: 1rem; }
  .promise-explanation { margin-top: 16px; font-size: 1.25rem; }
  .promise-copy .actions { margin-top: 24px; font-size: 1rem; }
  .opening-work-example { padding: 24px; }
  .opening-work-example h2 { font-size: 1.25rem; }
  .opening-work-example dd { font-size: 1rem; }
  .opening-work-summary { margin-top: 16px; }
  .company-map { padding: 24px 16px; }
  .company-map figcaption { margin-bottom: 24px; }
  .map-foundation { padding: 16px; }
  .map-foundation p { font-size: 1.25rem; }
  .journey-mechanism-flow { padding: 32px 16px; row-gap: 24px; }
  .mechanism-heading h2 { font-size: 1.75rem; }
  .connected-example-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .connected-example-steps li { display: block; grid-row: auto; padding: 0 0 0 24px; border-top: 0; border-left: 2px solid var(--mk-ink); }
  .connected-example-steps li::before { top: 8px; left: -6px; }
  .work-output { margin-top: 12px; }
  .work-carry { margin-top: 16px; }
  .mechanism-details-copy { grid-template-columns: minmax(0, 1fr); }
  .system-work { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; padding-top: 24px; }
  .system-work .journey-scene, .system-sequence { grid-column: 1 / -1; }
  .company-work-map ul { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 0 24px 24px; border-left: 1px solid var(--mk-pencil); }
  .company-work-map li { padding: 0; }
  .company-work-map li::after { top: 12px; bottom: auto; left: -24px; width: 16px; height: 0; border-left: 0; border-top: 1px solid var(--mk-pencil); }
  .company-work-map figcaption { padding: 16px; font-size: 1.125rem; }
  .connected-benefit { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .connected-benefit h3, .connected-benefit p { grid-column: 1 / -1; }
  .journey-working-relationship { padding-block: 48px; }
  .relationship-heading h2 { font-size: 2rem; }
  .relationship-steps li { column-gap: 16px; }
  .adaptation-note { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .adaptation-note h3, .adaptation-note p { grid-column: 1 / -1; }
  .journey-customer-stories { padding: 32px 16px; }
  .stories-heading h2 { font-size: 1.75rem; }
  .story-quote blockquote { font-size: 1.5rem; }
  .story-result { padding-top: 24px; }
  .story-result > p { font-size: 1.25rem; }
  .journey-example-journey { padding-block: 48px; row-gap: 24px; }
  .journey-example-journey .example-heading h2 { font-size: 1.75rem; }
  .example-sequence > li { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-block: 24px; }
  .example-sequence > li::before { grid-column: 1 / -1; grid-row: auto; }
  .example-sequence > li > * { grid-column: 1 / -1; grid-row: auto; }
  .example-connected .journey-scene, .example-reuse .prose { grid-column: 1 / -1; grid-row: auto; }
  .example-copy h3, .example-reuse h3 { font-size: 1.375rem; }
  .example-calculation { padding: 24px 16px; }
  .calculation-schedules { column-gap: 16px; }
  .calculation-result dd { font-size: 1.25rem; }
  .example-sequence .example-reuse { padding: 24px 16px; }
  .example-reuse .prose { padding: 0; font-size: 1.125rem; }
  .example-reuse::before { padding: 0; }
  .journey-contact-band { padding: 32px 16px; margin-bottom: 48px; }
  .journey-contact-band h2 { font-size: 2rem; }
  .journey-contact-band .contact-details { grid-column: 1 / -1; }
  .journey-contact-band .actions { margin-top: 0; font-size: 1rem; }
  .journey-company-introduction { padding-block: 40px; }
  .company-introduction-heading h1 { font-size: 2.25rem; }
  .company-introduction-copy .prose p:first-child { font-size: 1.5rem; }
  .company-identity { grid-template-columns: minmax(0, 1fr); }
  .journey-company-leadership { padding: 32px 16px; }
  .leadership-heading h2 { font-size: 1.75rem; }
  .company-people { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Enterprise retains its procurement reading path in the shared company grid. */
.enterprise-opening { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 32px; padding-block: 64px; }
.enterprise-opening > div { grid-column: 1 / 8; }
.enterprise-opening h1 { font-size: 3rem; }
.enterprise-guide { grid-column: 9 / -1; align-self: start; padding: 24px; background: var(--mk-select); }
.enterprise-guide h2 { font-size: 1.25rem; }
.enterprise-guide ol { list-style: none; padding: 0; margin: 24px 0 0; }
.enterprise-guide a { display: flex; gap: 16px; padding-block: 8px; }
.enterprise-guide a span { color: var(--mk-pencil); }
.enterprise-section { padding-block: 48px; }
.enterprise-section > header { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px 32px; margin-bottom: 32px; }
.enterprise-section > header > * { grid-column: 1 / 9; }
.enterprise-section h2 { font-size: 2rem; }
.enterprise-section h3 { font-size: 1.25rem; }
.enterprise-boundaries { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.enterprise-boundaries > div { min-width: 0; }
.enterprise-company-map { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 32px; margin: 0; padding: 32px; background: var(--mk-select); }
.enterprise-company-map figcaption { grid-column: 1 / 5; align-self: center; padding-right: 32px; border-right: 2px solid var(--mk-ink); }
.enterprise-company-map dl { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 32px; margin: 0; }
.enterprise-company-map dt,.enterprise-procurement dt { font-family: var(--mk-font-display); font-weight: 700; }
.enterprise-company-map dd,.enterprise-procurement dd { margin: 8px 0 0; }
.enterprise-sequence { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
.enterprise-sequence li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; padding-top: 16px; border-top: 1px solid var(--mk-pencil); }
.enterprise-sequence li > span { font-family: var(--mk-font-display); font-size: 2rem; }
.enterprise-systems { background: var(--mk-select); padding-inline: 32px; }
.enterprise-review-topics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-bottom: 24px; }
.enterprise-procurement { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 32px; }
.enterprise-procurement > header { grid-column: 1 / 6; display: block; }
.enterprise-procurement dl { grid-column: 7 / -1; margin: 0; }
.enterprise-procurement dl > div { padding-block: 16px; border-bottom: 1px solid var(--mk-pencil); }
.enterprise-proof { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.enterprise-proof article { padding-top: 16px; border-top: 2px solid var(--mk-ink); }
.enterprise-faq { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 32px; }
.enterprise-faq > h2 { grid-column: 1 / 5; }
.enterprise-faq > div { grid-column: 5 / -1; }
.enterprise-faq details { padding-block: 16px; border-bottom: 1px solid var(--mk-pencil); }
.enterprise-faq summary { cursor: pointer; font-weight: 700; }
.enterprise-plan-link { margin-block: 32px; }
@media (max-width: 1023px) {
 .enterprise-opening > div { grid-column: 1 / 8; } .enterprise-guide { grid-column: 8 / -1; }
 .enterprise-boundaries,.enterprise-review-topics,.enterprise-proof { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .enterprise-company-map figcaption { grid-column: 1 / -1; padding-right: 0; padding-bottom: 24px; border-right: 0; border-bottom: 2px solid var(--mk-ink); }
 .enterprise-company-map dl { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
 .enterprise-opening { padding-block: 32px; } .enterprise-opening > div,.enterprise-guide { grid-column: 1 / -1; }
 /* Twelve-column grids with 32px gaps need 352px; phones narrower than 384px get one column. */
 .enterprise-opening,.enterprise-section > header,.enterprise-company-map,.enterprise-procurement,.enterprise-faq { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .enterprise-opening h1 { font-size: 2.25rem; } .enterprise-section { padding-block: 32px; }
 .enterprise-section > header { display: block; } .enterprise-section h2 { font-size: 1.75rem; }
 .enterprise-company-map,.enterprise-systems { padding: 24px 16px; }
 .enterprise-company-map dl,.enterprise-sequence { grid-template-columns: minmax(0,1fr); }
 .enterprise-procurement > header,.enterprise-procurement dl,.enterprise-faq > h2,.enterprise-faq > div { grid-column: 1 / -1; }
}