:root {
  --color-bg: #F7F6F2;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EEEDE7;
  --color-text: #202521;
  --color-text-muted: #586158;
  --color-border: #D5D8D1;
  --color-border-strong: #7A827A;
  --color-accent: #245B46;
  --color-accent-hover: #194332;
  --color-on-accent: #FFFFFF;
  --color-focus: #145FC7;
  --color-info: #254F85;
  --color-success: #245B46;
  --color-warning: #79501B;
  --color-error: #9B302D;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --type-display: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --type-title: clamp(2.25rem, 1.8rem + 2vw, 3.75rem);
  --type-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --type-h3: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --type-lead: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --type-body: 1.125rem;
  --type-compact: 1rem;
  --type-meta: .9375rem;
  --type-eyebrow: .875rem;
  --type-control: 1rem;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem;
  --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
  --container-wide: 80rem; --container-medium: 56rem; --container-prose: 42rem;
  --measure-body: 68ch; --measure-lead: 58ch;
  --page-gutter: var(--space-4); --section-gap: var(--space-16);
  --section-gap-text: var(--space-16);
  --radius-control: 6px; --radius-card: 8px; --radius-canvas: 12px;
  --border-width: 1px; --callout-border-width: 4px;
  --focus-width: 3px; --focus-offset: 3px; --shadow-default: none;
  --z-base: 0; --z-nav: 10; --z-skip: 30;
  --duration-fast: 120ms; --duration-normal: 180ms; --duration-reduced: 0ms;
  --ease-feedback: ease-out; --target-min: 44px; --button-height-min: 48px;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: var(--weight-regular) var(--type-body)/1.65 var(--font-sans); }
[hidden] { display: none !important; }
a { color: var(--color-accent); text-underline-offset: .2em; transition: color var(--duration-fast) var(--ease-feedback); overflow-wrap: anywhere; }
a:hover, a:active { color: var(--color-accent-hover); }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.container { width: min(calc(100% - 2 * var(--page-gutter)), var(--container-wide)); margin-inline: auto; }
.skip-link { position: absolute; z-index: var(--z-skip); top: var(--space-4); left: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-surface); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.site-header { border-bottom: var(--border-width) solid var(--color-border); }
.header-inner { min-height: 4rem; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); padding-block: var(--space-2); }
.wordmark { color: var(--color-text); font-size: var(--type-control); font-weight: var(--weight-semibold); text-decoration: none; min-height: var(--target-min); display: inline-flex; align-items: center; }
.primary-navigation, .footer-inner nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.primary-navigation { flex-basis: 100%; }
nav a { min-width: var(--target-min); display: inline-flex; align-items: center; min-height: var(--target-min); font-size: var(--type-control); font-weight: var(--weight-medium); }
nav a[aria-current] { color: var(--color-text); text-decoration-thickness: 2px; }
.menu-toggle { margin-left: auto; padding: var(--space-3) var(--space-4); min-height: var(--button-height-min); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-control); color: var(--color-accent); background: var(--color-bg); font: var(--weight-medium) var(--type-control)/1.25 var(--font-sans); cursor: pointer; }
.menu-toggle:hover, .menu-toggle:active { background: var(--color-surface-muted); }
.page-opening { padding-block: var(--space-12); max-width: var(--container-medium); }
h1, h2, h3, h4 { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
h1 { font-size: var(--type-title); line-height: 1.12; letter-spacing: -.025em; max-width: 22ch; margin: var(--space-6) 0; }
.home-hero h1 { font-size: var(--type-display); line-height: 1.06; letter-spacing: -.035em; }
h2 { font-size: var(--type-h2); line-height: 1.18; letter-spacing: -.02em; margin: 0 0 var(--space-6); }
p { margin: 0 0 var(--space-6); }
.eyebrow { font-size: var(--type-eyebrow); font-weight: var(--weight-semibold); letter-spacing: .04em; }
.lead { max-width: var(--measure-lead); font-size: var(--type-lead); line-height: 1.45; }
.prose { max-width: min(var(--container-prose), var(--measure-body)); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--button-height-min); padding: var(--space-3) var(--space-6); background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius-control); font-size: var(--type-control); font-weight: var(--weight-medium); text-decoration: none; }
.button:hover, .button:active { color: var(--color-on-accent); background: var(--color-accent-hover); }
.button:focus-visible { outline-offset: var(--focus-offset); }
.text-link { display: inline-flex; align-items: center; min-height: var(--target-min); }
.section { margin-bottom: var(--section-gap); }
.section-text { margin-bottom: var(--section-gap-text); }
.project-links { padding-left: var(--space-6); }
.project-links a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.contact { padding: var(--space-8); background: var(--color-surface-muted); border-radius: var(--radius-canvas); }
.site-footer { margin-top: var(--section-gap); border-top: var(--border-width) solid var(--color-border); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding-block: var(--space-8); font-size: var(--type-meta); }
.footer-inner p { margin: 0; }
h3, h4 { font-size: var(--type-h3); line-height: 1.25; letter-spacing: -.01em; margin: 0 0 var(--space-4); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.selected-grid, .capabilities-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.selected-grid > *, .capabilities-grid > *, .supporting-project > * { min-width: 0; }
.project-card { display: flex; }
.project-card-link { width: 100%; display: flex; flex-direction: column; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); color: var(--color-text); background: var(--color-surface); text-decoration: none; transition: border-color var(--duration-normal) var(--ease-feedback), color var(--duration-normal) var(--ease-feedback); }
.project-card-link:hover, .project-card-link:active { border-color: var(--color-accent); color: var(--color-text); }
.temporary-media { aspect-ratio: 16 / 10; display: grid; place-items: center; padding: var(--space-4); background: var(--color-surface-muted); border-radius: var(--radius-card) var(--radius-card) 0 0; color: var(--color-text-muted); text-align: center; font-size: var(--type-meta); }
.project-card-copy { flex: 1; display: flex; flex-direction: column; padding: var(--space-6); }
.project-card-copy > p { font-size: var(--type-compact); }
.project-descriptor { font-weight: var(--weight-medium); }
.project-tags { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-6); font-size: var(--type-meta); color: var(--color-text-muted); }
.card-cta { margin-top: auto; color: var(--color-accent); text-decoration: underline; text-underline-offset: .2em; font-size: var(--type-control); font-weight: var(--weight-medium); }
.supporting-project { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--space-8); border-top: var(--border-width) solid var(--color-border); gap: var(--space-4) var(--space-12); }
.supporting-project:last-child { border-bottom: var(--border-width) solid var(--color-border); }
.project-meta, .status-label { font-size: var(--type-meta); line-height: 1.5; color: var(--color-text-muted); margin-bottom: 0; }
.status-label { margin-top: var(--space-3); font-weight: var(--weight-medium); }
.supporting-teaser p:last-child { margin-bottom: 0; }
.supporting-project details { grid-column: 1 / -1; }
summary { width: fit-content; max-width: 100%; min-height: var(--button-height-min); display: list-item; padding-block: var(--space-3); cursor: pointer; color: var(--color-accent); font-size: var(--type-control); font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: .2em; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary:hover, summary:active { color: var(--color-accent-hover); }
.chevron { flex-shrink: 0; width: .75rem; height: .75rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-bottom: var(--space-1); }
details[open] .chevron { transform: rotate(225deg); margin-bottom: 0; }
.supporting-overview { padding-top: var(--space-6); }
.supporting-overview ul { padding-left: var(--space-6); margin: 0 0 var(--space-6); }
.supporting-overview li + li { margin-top: var(--space-2); }
.confidential-note { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); color: var(--color-text-muted); }
.capability { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-6); }
.capability p { margin-bottom: 0; }
.section-text .prose > p:last-child { margin-bottom: 0; }
@media (min-width: 40rem) { .capabilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  :root { --section-gap-text: calc(var(--space-12) + var(--space-6)); }
  .selected-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capabilities-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .supporting-project { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .contact { padding: var(--space-12); }
}
.case-study { padding-top: var(--space-12); }
.case-hero, .case-opening, .case-section { margin-bottom: var(--section-gap); }
.case-hero { max-width: var(--container-medium); margin-inline: auto; }
.case-hero h1 { max-width: 22ch; margin-inline: 0; }
.case-hero .lead { margin-inline: 0; }
.case-section > h2, .metadata-heading { max-width: var(--container-medium); margin-inline: auto; }
.case-hero .text-link { margin-bottom: var(--space-4); }
.case-prose { max-width: min(var(--container-prose), var(--measure-body)); margin-inline: auto; }
.case-prose p { margin-bottom: var(--space-6); }
.case-section > h2 { margin-bottom: var(--space-8); }
.project-metadata { max-width: var(--container-medium); margin: var(--space-6) auto var(--space-12); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.project-metadata > div { min-width: 0; padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.project-metadata dt { font-size: var(--type-meta); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.project-metadata dd { margin: var(--space-2) 0 0; }
.metadata-heading { font-size: var(--type-h3); }
.decision-callout { max-width: var(--container-medium); margin: var(--space-12) auto; border-left: var(--callout-border-width) solid var(--color-accent); padding: var(--space-6); background: var(--color-surface-muted); }
.decision-callout p { margin: 0; }
.media-figure { margin: var(--space-12) 0 0; }
.media-detail { max-width: var(--container-medium); margin-inline: auto; }
.split-comparison { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.media-panel { min-width: 0; }
.panel-label { margin-bottom: var(--space-3); font-weight: var(--weight-medium); font-size: var(--type-control); }
.case-media-slot { border-radius: var(--radius-canvas); }
.media-figure figcaption { max-width: 75ch; margin-top: var(--space-4); font-size: var(--type-meta); line-height: 1.5; color: var(--color-text-muted); }
.status-block { max-width: var(--container-medium); margin-inline: auto; padding: var(--space-8); border-radius: var(--radius-canvas); background: var(--color-surface-muted); }
.project-navigation { border-top: var(--border-width) solid var(--color-border); padding-block: var(--space-8); margin-bottom: var(--space-12); }
.case-contact { margin-bottom: var(--space-12); }
@media (min-width: 40rem) { .project-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metadata-wide { grid-column: 1 / -1; } }
@media (min-width: 64rem) { .split-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .actions { flex-direction: column; align-items: stretch; } .project-card-copy { padding: var(--space-4); } }
@media (min-width: 40rem) { :root { --page-gutter: var(--space-6); } }
@media (min-width: 48rem) { .header-inner { min-height: 4.5rem; } .primary-navigation { flex-basis: auto; margin-left: auto; } }
@media (min-width: 64rem) { :root { --page-gutter: var(--space-8); --section-gap: var(--space-24); } }
@media (max-width: 22.5rem) { .home-hero h1 { font-size: 2.25rem; } .contact { padding: var(--space-8) var(--space-4); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: var(--duration-reduced) !important; } }
/* Shared mobile-source figure layouts: readable crops, no shrink-to-fit full Forecast. */
.media-mobile-hero { max-width: var(--container-medium); margin-inline: auto; }
.media-mobile-hero .media-panel { max-width: 24.375rem; margin-inline: auto; }
.media-mobile-hero .case-media-slot { aspect-ratio: 390 / 861; }
.media-sequence, .media-mobile-comparison, .media-analysis { max-width: var(--container-medium); margin-inline: auto; }
.media-sequence .split-comparison { grid-template-columns: minmax(0, 1fr); }
.media-analysis .split-comparison { grid-template-columns: minmax(0, 1fr); }
.media-analysis .media-panel:last-child { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-8); }
.project-navigation { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.capability-list { padding-left: var(--space-6); margin-block: 0; }
.capability-list li + li { margin-top: var(--space-3); }
@media (min-width: 64rem) { .media-sequence .split-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Let summary text shrink independently of its decorative chevron at enlarged text sizes. */
.summary-label { min-width: 0; overflow-wrap: anywhere; }

.summary-content { display: inline-flex; align-items: center; gap: var(--space-4); max-width: 100%; vertical-align: middle; }
/* Reflow of long words and labels under user text-size/spacing preferences. */
body { overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .decision-callout, .status-block { padding: var(--space-4); }
}