:root { --co-scrim: 40, 48, 18; }
.co-fill-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.co-art { color: var(--olive-400); }
.co-art svg { width: 100%; height: auto; }
.co-art svg * { stroke-width: 1; }
.co-statement { padding-block: clamp(88px, 13vw, 170px); }
.co-statement-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gutter); align-items: center; }
.co-statement .h2 { font-size: clamp(34px, 1.6rem + 2.6vw, 58px); line-height: 1; color: var(--olive-900); }
.co-statement p.co-body { margin-top: 28px; max-width: 48ch; }
.co-statement p.co-body + p.co-body { margin-top: 14px; }

/* full-bleed photo band with plain linear scrim */
.co-final { position: relative; min-height: 80vh; display: grid; align-items: end; overflow: hidden; color: var(--white); background: var(--olive-900); }
.co-final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--co-scrim), 0.55) 0%, rgba(var(--co-scrim), 0) 24%), linear-gradient(to top, rgba(var(--co-scrim), 0.88) 0%, rgba(var(--co-scrim), 0.5) 48%, rgba(var(--co-scrim), 0.12) 88%); }
.co-final-copy { position: relative; z-index: 1; padding-block: calc(var(--header-h) + 48px) clamp(56px, 9vw, 110px); }
.co-final h2 { font-size: clamp(36px, 1.7rem + 3vw, 72px); line-height: 0.98; letter-spacing: -0.01em; max-width: 17ch; }
.co-final p { margin-top: 22px; max-width: 44ch; color: var(--white); }
.co-final-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

@media (max-width: 900px) {
  .co-statement-grid { grid-template-columns: 1fr; }
  .co-statement-grid > * { grid-column: auto !important; }
  .co-art { width: min(48%, 200px); }
}

.co-about-hero { min-height: 92vh; min-height: 92svh; display: grid; align-items: stretch; }
.co-about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(var(--co-scrim), 0.6) 0%, rgba(var(--co-scrim), 0) 26%), linear-gradient(to top, rgba(var(--co-scrim), 0.86) 0%, rgba(var(--co-scrim), 0.5) 40%, rgba(var(--co-scrim), 0.1) 76%); }
.co-about-in { position: relative; z-index: 1; display: grid; grid-template-rows: auto 1fr; }
.co-about-copy { align-self: end; padding-block: 48px clamp(56px, 9vh, 104px); }
.co-about-copy h1 { max-width: 18ch; }
.co-about-copy .ph-lede { color: var(--white); }
@media (prefers-reduced-motion: no-preference) {
  .co-about-hero > .co-fill-media { animation: co-settle 1.8s var(--ease-out) both; }
  @keyframes co-settle { from { transform: scale(1.04); } to { transform: none; } }
}

.co-story { padding-block: clamp(96px, 13vw, 180px); }
.co-story-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) var(--gutter); }
.co-story-head { grid-column: 1 / span 10; font-size: clamp(32px, 1.5rem + 2.4vw, 56px); line-height: 1; color: var(--olive-900); max-width: 24ch; }
.co-story-art { grid-column: 1 / span 3; grid-row: 2; align-self: start; max-width: 240px; }
.co-story-body { grid-column: 6 / span 6; grid-row: 2; }
.co-story-body p { max-width: 56ch; }
.co-story-body p + p { margin-top: 1em; }
.co-story-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 32px !important; }

.co-record { padding-block: clamp(40px, 5vw, 80px) clamp(88px, 11vw, 150px); }
.co-record-lead { font-size: var(--h3); color: var(--olive-800); max-width: 30ch; }
.co-record-list { list-style: none; margin: clamp(32px, 5vw, 64px) 0 0; padding: 0; display: grid; gap: clamp(36px, 5vw, 72px); }
.co-record-list li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px var(--gutter); align-items: end; }
.co-record-list li:nth-child(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr); }
.co-record-list li:nth-child(even) .co-num { grid-column: 2; }
.co-num { font-size: clamp(76px, 3.5rem + 8vw, 190px); line-height: 0.84; letter-spacing: -0.03em; color: var(--olive-900); white-space: nowrap; }
.co-unit { font-size: 0.32em; letter-spacing: -0.01em; color: var(--olive-600); }
.co-what { font-size: var(--h3); color: var(--olive-800); max-width: 24ch; padding-bottom: 0.4em; }
.co-src { display: block; margin-top: 6px; font-size: var(--small); color: var(--olive-600); }

.co-desk { padding-block: clamp(72px, 9vw, 130px); }
.co-desk-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px clamp(32px, 5vw, 96px); align-items: center; }
.co-desk-photo { margin: 0; }
.co-desk-photo img { width: 100%; height: auto; aspect-ratio: 992 / 917; object-fit: cover; border-radius: var(--radius-card); }
.co-desk-text .co-desk-list { margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.co-desk-role { color: var(--cream-70); }
.co-desk-name { margin-top: 18px; font-size: clamp(48px, 2rem + 4.4vw, 104px); line-height: 0.92; letter-spacing: -0.02em; color: var(--cream); }
.co-desk-lang { margin-top: 24px; font-size: var(--h3); color: var(--cream); }
.co-desk-list { margin: 0; display: grid; gap: 22px; }
.co-desk-list dt { font-size: 15px; color: var(--cream-70); }
.co-desk-list dd { margin: 4px 0 0; font-size: clamp(18px, 1rem + 0.4vw, 22px); overflow-wrap: anywhere; }
.co-desk-list a { color: var(--cream); text-underline-offset: 4px; text-decoration-thickness: 1px; }

.co-company { padding-block: clamp(80px, 10vw, 140px); }
.co-company-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px var(--gutter); align-items: start; }
.co-company-list { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gutter); }
.co-company-list dt { font-size: 15px; color: var(--olive-600); }
.co-company-list dd { margin: 4px 0 0; font-size: clamp(18px, 1rem + 0.4vw, 22px); line-height: 1.35; color: var(--olive-900); }

@media (max-width: 900px) {
  .co-story-grid { grid-template-columns: 1fr; }
  .co-story-head, .co-story-art, .co-story-body { grid-column: auto; grid-row: auto; }
  .co-story-art { width: min(44%, 180px); justify-self: end; }
  .co-record-list li, .co-record-list li:nth-child(even) { grid-template-columns: 1fr; }
  .co-record-list li:nth-child(even) .co-num { grid-column: auto; }
  .co-desk-grid, .co-company-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .co-company-list { grid-template-columns: 1fr; } }