/* Strategic Labs — V002-M5 Wave 2: About — editorial / manifesto / image-led.
   Vision = image-led manifesto · Mission = quiet editorial · Values = 2×2
   principle system. The architecture field tokens live here too. */

/* ---------- architecture field (brand-derived "image") ---------- */
.afield { display: block; inline-size: 100%; block-size: 100%; }
.afield--deep { --af-sky-a: #0C2320; --af-sky-b: #15705E; --af-ground-a: #0A1F1C; --af-ground-b: #071614; --af-light: #44BCA7; --af-line: #AEE2D1; --af-mass: #1A4B44; --af-volume: #44BCA7; --af-edge: #E4F4EE; }
.afield--paper { --af-sky-a: #F3F6F3; --af-sky-b: #E4F4EE; --af-ground-a: #EBF0EC; --af-ground-b: #F3F6F3; --af-light: #AEE2D1; --af-line: #1A4B44; --af-mass: #AEE2D1; --af-volume: #1A4B44; --af-edge: #1A4B44; }

/* ---------- VISION — image-led manifesto, near-full-bleed ---------- */
.vmv5 { padding-block-end: var(--sec); overflow-x: clip; }  /* the 100vw vision field must never widen the page */
.vmv5 .about-vmv__head { margin-bottom: var(--s6); }
.vmv5__vision { position: relative; inline-size: 100vw; margin-inline-start: calc(50% - 50vw); min-block-size: clamp(420px, 62vh, 680px);
  display: grid; align-items: end; overflow: clip; isolation: isolate; color: var(--on-dark); }
.vmv5__vision-field { position: absolute; inset: 0; z-index: -1; }
.vmv5__vision-field .afield { inline-size: 100%; block-size: 100%; }
/* a legibility veil rising from the base, never a green rectangle */
.vmv5__vision::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(7,22,20,.78) 0%, rgba(7,22,20,.35) 42%, transparent 70%); }
.vmv5__vision-inner { position: relative; padding-block: clamp(2.5rem, 5vw, 5rem); }
.vmv5__vision-copy { max-width: min(100%, 720px); }
.vmv5__vision-copy .about-vmv__mark { display: block; margin-bottom: var(--s4); color: var(--brand); font-size: var(--fs-folio); letter-spacing: var(--track-folio); }
.vmv5__vision-copy h3 { margin: 0 0 var(--s4); color: var(--mint); font-size: var(--fs-eyebrow); letter-spacing: .08em; font-weight: 700; }
.vmv5__vision-copy p { margin: 0; color: var(--white); font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.3; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; max-width: 19ch; }

/* ---------- MISSION — quiet editorial composition ---------- */
.vmv5__mission { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); column-gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start;
  margin-block-start: clamp(3rem, 2.4rem + 3vw, 5.5rem); padding-block: var(--s6) var(--s7); }
.vmv5__mission-folio { font-size: clamp(4rem, 3rem + 4vw, 7.5rem); font-weight: 700; line-height: .85; letter-spacing: -.05em; color: var(--mint); align-self: start; }
.vmv5__mission-body h3 { margin: 0 0 var(--s4); color: var(--brand-deep); font-size: var(--fs-eyebrow); letter-spacing: .08em; font-weight: 700; }
.vmv5__mission-body p { margin: 0; color: var(--ink); font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); line-height: 1.65; font-weight: 600; max-width: 34ch; }
/* the annotation rule: a vertical hairline in the third column, the chapter's quiet structure */
.vmv5__mission-rule { align-self: stretch; justify-self: center; inline-size: 1px; background: var(--line-strong); }

/* ---------- VALUES — the 2×2 principle system with the cross of void ---------- */
.vmv5__values { padding-block-start: var(--s6); border-block-start: var(--rule-strong); }
.vmv5__values-head { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s6); }
.vmv5__values-head .about-vmv__mark { margin: 0; color: var(--brand-mid); }
.vmv5__values-head h3 { margin: 0; font-size: 1.15rem; color: var(--brand-deep); }
.vmv5__quad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; max-inline-size: 880px; }
.vmv5__cell { position: relative; display: grid; grid-template-columns: 96px minmax(0,1fr); grid-template-rows: auto auto; column-gap: var(--s5); row-gap: var(--s2); align-items: center;
  min-block-size: 160px; padding: var(--s5) var(--s5) var(--s5) var(--s4); background: var(--paper-2); border-radius: var(--tab-sm);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease); }
/* each module carries ONE outer rounded corner — the logo's module */
.vmv5__cell:nth-child(1) { border-start-start-radius: var(--tab); }
.vmv5__cell:nth-child(2) { border-start-end-radius: var(--tab); }
.vmv5__cell:nth-child(3) { border-end-start-radius: var(--tab); }
.vmv5__cell:nth-child(4) { border-end-end-radius: var(--tab); }
.vmv5__cell:hover { background: var(--mint-wash); }
.vmv5__line { grid-row: 1 / span 2; inline-size: 96px; block-size: 96px; color: var(--brand-deep); }
.vmv5__s { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vmv5__s--soft { opacity: .35; }
.vmv5__d { fill: var(--brand); }
.vmv5__n { font-size: var(--fs-folio); font-weight: 700; letter-spacing: var(--track-folio); color: var(--brand-mid); align-self: end; }
.vmv5__cell .about-vmv__value { font-size: 1.15rem; font-weight: 700; color: var(--ink); align-self: start; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1023px) {
  .vmv5__vision { min-block-size: clamp(380px, 56vw, 560px); }
  .vmv5__mission { grid-template-columns: minmax(0, 2fr) minmax(0, 8fr); }
  .vmv5__mission-rule { display: none; }
  .vmv5__quad { max-inline-size: none; }
}
@media (max-width: 599px) {
  .vmv5__vision { min-block-size: 380px; }
  .vmv5__vision-copy { max-width: none; }
  .vmv5__vision-copy p { font-size: clamp(1.5rem, 1.1rem + 2.2vw, 1.9rem); max-width: none; }
  .vmv5__mission { grid-template-columns: 1fr; row-gap: var(--s3); margin-block-start: var(--s7); padding-block: var(--s5) var(--s6); }
  .vmv5__mission-folio { font-size: 3.6rem; }
  .vmv5__mission-body p { font-size: 1.15rem; max-width: none; }
  .vmv5__quad { grid-template-columns: 1fr; gap: 10px; }
  .vmv5__cell { min-block-size: 0; grid-template-columns: 72px minmax(0,1fr); padding: var(--s4); }
  .vmv5__cell:nth-child(n) { border-radius: var(--tab-sm); border-start-start-radius: 22px; }
  .vmv5__line { inline-size: 72px; block-size: 72px; }
  .vmv5__cell .about-vmv__value { font-size: 1.02rem; }
}

/* ---------- principles (ledger) and reasons (folio columns) on About ---------- */
.about-principles__ledger { margin-block-start: var(--s3); }
.folio4--dark { border-block-start-color: var(--line-dark-str); }
.folio4--dark .folio4__n { color: var(--brand); }
.folio4--dark .folio4__item h3 { color: var(--on-dark); }
.folio4--dark .folio4__item p { color: var(--on-dark-soft); }
@media (max-width: 833px) { .folio4--dark .folio4__item { border-block-end-color: var(--line-dark); } }