/* Strategic Labs — V002-M3 Owner final visual acceptance corrections.
   Loaded after every M2 sheet. Each block cites the directive section it
   answers. Nothing here changes approved copy — only its composition,
   contrast, spacing and density. */

/* =====================================================================
   §5 — DARK-SURFACE BUTTON CONTRAST (resting state, not hover)
   M2 only gave .section--dark the dark button treatment, so ghost and
   primary buttons sitting on the other dark chapters (.cta, .closing-cta,
   the axis focus panel) fell back to the LIGHT palette: brand-deep ink on
   a brand-deep surface. That is the "readable only on hover" defect.
   One rule set now covers every dark surface in the system.
   ===================================================================== */
.cta .btn--ghost, .cta .button:not(.btn--primary):not(.button--primary),
.closing-cta .btn--ghost, .m2-axis-focus .btn--ghost, .hr-model__panel .btn--ghost,
.section--dark .btn--ghost, .site-footer .btn--ghost {
  background: rgba(174,226,209,.08);
  color: var(--on-dark);
  border-color: rgba(174,226,209,.55);   /* 4.4:1 against --ink-800 */
}
.cta .btn--ghost:hover, .closing-cta .btn--ghost:hover,
.m2-axis-focus .btn--ghost:hover, .section--dark .btn--ghost:hover, .site-footer .btn--ghost:hover {
  background: rgba(174,226,209,.16); border-color: var(--mint); color: var(--white);
}
.cta .btn--primary, .cta .button--primary,
.closing-cta .btn--primary, .closing-cta .button--primary,
.m2-axis-focus .btn--primary, .hr-model__panel .btn--primary {
  background: var(--brand); color: var(--ink-900); border-color: var(--brand);
}
.cta .btn--primary:hover, .cta .button--primary:hover,
.closing-cta .btn--primary:hover, .closing-cta .button--primary:hover { background: var(--mint); border-color: var(--mint); }
/* inline "read:" links on dark surfaces */
.cta .sl-link, .closing-cta .sl-link, .section--dark .sl-link { color: var(--brand); }

/* =====================================================================
   §12 — DARK CURVED CHAPTERS: CONTENT SAFE AREA
   The paper-coloured arc covers the first/last ~60–120px of a dark
   chapter. Content sitting inside that band reads as falling out of the
   frame. Reserve the arc's height as padding so text can never enter it.
   ===================================================================== */
.section--dark:has(> .sl-arc-top), .cta:has(> .sl-arc-top) { padding-block-start: calc(var(--sec) + clamp(60px, 7vw, 120px) * .8); }
.section--dark:has(> .sl-arc-bottom) { padding-block-end: calc(var(--sec) + clamp(60px, 7vw, 120px) * .8); }
.home-hero:has(> .sl-arc-bottom) { padding-block-end: calc(clamp(4rem, 3rem + 5vw, 8rem) + clamp(60px, 7vw, 120px) * .7); }
/* content always above every decorative layer */
.section--dark > .wrap, .cta > .wrap, .closing-cta > .container, .mega__inner { position: relative; z-index: 1; }
/* the stripe motif must never run under the heading column */
.section--dark::after { opacity: .07; }

/* =====================================================================
   §13 — SIDE COPY: VISIBLY BOUND TO ITS HEADING
   A supporting column now carries a brand connector on the edge facing
   its heading, and the columns sit closer, so the pair reads as one
   composed statement rather than two detached blocks.
   ===================================================================== */
.sl-intro { gap: clamp(1.25rem, 2.2vw, 2.75rem); align-items: stretch; }
.sl-intro__body { padding-inline-start: clamp(1rem, 1.6vw, 1.75rem); border-inline-start: 2px solid var(--brand); }
.sl-intro--stack .sl-intro__body, .sl-intro--center .sl-intro__body { padding-inline-start: 0; border-inline-start: 0; }
.pm-copy-grid { gap: clamp(1.25rem, 2.2vw, 2.75rem); }
.pm-copy-body { padding-inline-start: clamp(1rem, 1.6vw, 1.75rem); border-inline-start: 2px solid var(--brand); }
.section--dark .sl-intro__body, .section--dark .pm-copy-body { border-inline-start-color: var(--brand); }
@media (max-width: 833px) {
  .sl-intro { grid-template-columns: 1fr; gap: var(--s4); }
  .sl-intro__body, .pm-copy-body {
    padding-inline-start: var(--s4); border-inline-start: 2px solid var(--brand);
  }
}

/* Home deep-dive: five composed practice records (name + tagline + detail)
   instead of fifteen equal cells of flattened matrix text. */
.home-deep__records {
  list-style: none; margin: var(--s7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s4);
}
.home-deep__records > li {
  display: flex; flex-direction: column; padding: var(--s5);
  background: rgba(255,255,255,.05); border: 1px solid var(--line-dark);
  border-radius: var(--r-card); border-inline-start: 2px solid var(--brand);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.home-deep__records > li:hover { background: rgba(174,226,209,.09); }
.home-deep__n { color: var(--brand); font-size: .74rem; font-weight: 700; margin-bottom: var(--s3); }
.home-deep__records h3 { margin: 0 0 var(--s2); color: var(--on-dark); font-size: 1rem; line-height: 1.45; }
.home-deep__tag { margin: 0 0 var(--s3); color: var(--mint); font-size: .84rem; font-weight: 600; }
.home-deep__body { margin: 0; color: var(--on-dark-soft); font-size: .84rem; line-height: 1.75; }
@media (max-width: 1199px) { .home-deep__records { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .home-deep__records > li:last-child:nth-child(3n+2) { grid-column: span 2; } }
@media (max-width: 833px) { .home-deep__records { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-deep__records > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* =====================================================================
   §2 (generalised) — NO HEADING OVER AN EMPTY FIELD
   A support-less heading block is composed as the opener of the chapter
   that follows it (see CmsPublicPage): title, then one editorial beat, then
   the content. The wrapper carries no padding of its own; the inner section
   keeps its surface and its bottom rhythm, and only its top is pulled up so
   the title visibly belongs to it.
   ===================================================================== */
.chapter { position: relative; padding: 0; }
.chapter__opener { padding-block: var(--sec) 0; }
.chapter__opener .pm-copy-head { max-width: 64ch; margin: 0; }
.chapter__opener .eyebrow { margin-bottom: var(--s3); }
.chapter > .section { padding-block-start: var(--s6); }
.chapter > .section--paper2, .chapter > .section--wash { margin-block-start: var(--s6); }
/* fallback: a bare heading with nothing after it (last block) — tight, never a field */
.section--opener { padding-block: var(--sec-tight) var(--s5); }
.section--opener .pm-copy-head { max-width: 64ch; margin: 0; }

/* =====================================================================
   §7 — METRICS: THE STRONGEST PROOF MOMENT
   The number now dominates its component at every tier.
   Count-up behaviour is untouched.
   ===================================================================== */
:root { --fs-stat: clamp(3.4rem, 2.1rem + 4.2vw, 5.75rem); }
.home-proof__metric, .pm-stat { padding: var(--s7) var(--s6) var(--s6); gap: 0; }
.home-proof__metric b, .pm-stat b {
  display: block; font-size: var(--fs-stat); font-weight: 700; line-height: .95;
  letter-spacing: -.035em; color: var(--brand-deep);
}
/* ROOT CAUSE of "the numbers are too small": the count-up renders the value in
   its own <span>, and the metric's label rule (`.home-proof__metric span`)
   matched that span too — so every verified metric painted at 15px inside a
   92px <b>. The label rules are now scoped to the direct child, and the
   counter's span explicitly inherits the stat type. */
.home-proof__metric b span, .pm-stat b span { font: inherit; color: inherit; letter-spacing: inherit; }
.home-proof__metric > span, .pm-stat > span {
  display: block; margin-block-start: var(--s4); padding-block-start: var(--s4);
  border-block-start: 1px solid var(--line);
  color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 600; line-height: 1.6;
}
.home-proof__metric::before, .pm-stat::before { inline-size: 56px; block-size: 4px; }
.section--dark .pm-stat b { color: var(--brand); }
.section--dark .pm-stat > span { border-block-start-color: var(--line-dark); color: var(--on-dark-soft); }
@media (max-width: 599px) {
  .home-proof__metric, .pm-stat { padding: var(--s6) var(--s5) var(--s5); }
  .home-proof__metric > span, .pm-stat > span { margin-block-start: var(--s3); padding-block-start: var(--s3); }
}

/* =====================================================================
   §3 — ARTICLE READING RHYTHM
   The body section carried BOTH .section padding and .reading-column
   padding — up to 216px of dead field between the meta line and the first
   paragraph. The body now starts one editorial beat below the meta.
   ===================================================================== */
.article-hero { padding-block: clamp(2.75rem, 2.2rem + 2.6vw, 4.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.article-meta { margin-block: var(--s5) 0; padding-block-start: var(--s4); }
.article-body.section { padding-block: 0; }
.reading-column { padding-block: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem) clamp(2.5rem, 2rem + 2.4vw, 4rem); }
.article-body .prose > *:first-child { margin-block-start: 0; }
.article-body .prose > p:first-child {
  font-size: 1.06em; color: var(--ink); /* standfirst: the opening paragraph leads */
}

/* =====================================================================
   §2 — ARTICLE FAQ
   Rendered only when the article actually carries questions (the ten
   approved bodies do not — see CmsInsightPage.splitArticleBody). When it
   is rendered it is a real accordion: visible question at rest, obvious
   affordance, native keyboard support, finite transition, RTL-correct.
   ===================================================================== */
.article-faq { padding-block: clamp(2rem, 1.6rem + 1.8vw, 3.25rem) clamp(2.5rem, 2rem + 2.4vw, 4rem); background: var(--paper-2); }
.article-faq__inner { width: min(72ch, calc(100vw - 80px)); margin-inline: auto; }
.article-faq__title { margin: 0 0 var(--s6); font-size: var(--fs-h2); line-height: 1.28; font-weight: 700; letter-spacing: -.012em; }
.article-faq__list { display: grid; gap: var(--s3); }
.article-faq__item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--e1); overflow: clip;
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.article-faq__item[open] { box-shadow: var(--e2); border-color: var(--mint); }
.article-faq__q {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--s4);
  min-height: 60px; padding: var(--s4) var(--s5); cursor: pointer; list-style: none;
  font-weight: 600; color: var(--ink);
}
.article-faq__q::-webkit-details-marker { display: none; }
.article-faq__n { color: var(--brand-mid); font-size: .78rem; font-weight: 700; }
.article-faq__text { line-height: 1.6; }
.article-faq__mark {
  position: relative; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%;
  background: var(--mint-wash); transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.article-faq__mark::before, .article-faq__mark::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 11px; block-size: 2px; border-radius: 2px; background: var(--brand-mid);
  transform: translate(50%, -50%);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.article-faq__mark::after { transform: translate(50%, -50%) rotate(90deg); }
.article-faq__item[open] .article-faq__mark { background: var(--brand); }
.article-faq__item[open] .article-faq__mark::before, .article-faq__item[open] .article-faq__mark::after { background: var(--ink-900); }
.article-faq__item[open] .article-faq__mark::after { transform: translate(50%, -50%) rotate(0deg); }
.article-faq__q:hover .article-faq__mark { background: var(--mint); }
/* finite reveal — grid-row animation keeps the height transition honest */
.article-faq__a { display: grid; grid-template-rows: 1fr; }
.article-faq__a-inner { min-block-size: 0; padding: 0 var(--s5) var(--s5) calc(var(--s5) + 28px + var(--s4)); }
.article-faq__prose { max-width: none; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.9; }
.article-faq__prose > *:last-child { margin-bottom: 0; }

/* =====================================================================
   §18 — RELATED READING (verify + polish)
   ===================================================================== */
.related-reading { padding-block: clamp(2.25rem, 1.8rem + 2vw, 3.75rem); }
.insight-card { min-block-size: 150px; }
.insight-card h3 { font-size: 1.04rem; font-weight: 600; color: var(--ink); }
.insight-card:focus-visible { transform: translateY(-4px); box-shadow: var(--e3); border-color: var(--mint); }

/* =====================================================================
   §4 — BUSINESS MODEL EXPLORER: A COMPLETE PANEL
   The selected axis now exposes its approved designation, its position in
   the framework, a live mini-map, and the financial band that crosses all
   five axes. Selector → panel is unmistakable.
   ===================================================================== */
.m2-axis-explorer { grid-template-columns: minmax(250px, 4fr) minmax(0, 7fr); align-items: start; }
.m2-axis-rail button { grid-template-columns: auto minmax(0,1fr) auto; }
.m2-axis-rail__label { min-width: 0; line-height: 1.5; }
.m2-axis-rail__cue {
  inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none;
  background: transparent; border: 2px solid var(--line-strong);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.m2-axis-rail button.is-active .m2-axis-rail__cue { background: var(--brand); border-color: var(--brand); transform: scale(1.25); }
.m2-axis-rail button.is-active { box-shadow: var(--e3); }

/* grid, not the M2 flex column: `justify-content: flex-end` there collapsed the
   panel content to max-content and parked it on the inline-end edge */
.m2-axis-focus {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: start; justify-content: stretch; gap: var(--s4);
  min-block-size: 0; padding: clamp(1.5rem, 2.6vw, 2.5rem);
}
.m2-axis-focus__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.m2-axis-focus__pos { color: var(--on-dark-muted); font-size: .8rem; }
.m2-axis-focus strong { font-size: clamp(1.5rem, 2.8vw, 2.35rem); line-height: 1.25; }
.m2-axis-focus__title { margin: 0; color: var(--mint); font-size: var(--fs-lead); font-weight: 600; line-height: 1.6; }
.m2-axis-focus__practice {
  margin: 0; justify-self: start; padding: .3rem .8rem; border-radius: var(--r-pill);
  background: rgba(174,226,209,.12); color: var(--on-dark-soft); font-size: .8rem; font-weight: 600;
}
/* framework mini-map: the relational chain, current axis lit */
.m2-axis-map {
  list-style: none; margin: var(--s2) 0 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 0;
  border-block-start: 1px solid var(--line-dark); padding-block-start: var(--s5);
}
.m2-axis-map li { position: relative; display: grid; justify-items: center; gap: var(--s2); text-align: center; }
.m2-axis-map li::before {
  content: ""; position: absolute; inset-block-start: 5px; inset-inline-start: -50%;
  inline-size: 100%; block-size: 2px; background: var(--line-dark);
}
.m2-axis-map li:first-child::before { display: none; }
.m2-axis-map li i {
  position: relative; inline-size: 12px; block-size: 12px; border-radius: 50%;
  background: var(--ink-800); border: 2px solid var(--line-dark-str);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.m2-axis-map li span { color: var(--on-dark-muted); font-size: .68rem; line-height: 1.35; }
.m2-axis-map li.is-active i { background: var(--brand); border-color: var(--brand); transform: scale(1.35); }
.m2-axis-map li.is-active span { color: var(--on-dark); font-weight: 700; }
/* financial band — the axis that runs across the other five */
.m2-axis-financial {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  margin-block-start: var(--s2); padding: var(--s4) var(--s5);
  background: rgba(174,226,209,.08); border-radius: var(--r-card);
  border-inline-start: 3px solid var(--brand);
}
.m2-axis-financial__label { color: var(--brand); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .05em; }
.m2-axis-financial ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.m2-axis-financial li {
  padding: .25rem .75rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); color: var(--on-dark); font-size: .82rem; font-weight: 600;
}

/* =====================================================================
   §11 — HR SIX-DOMAIN DIAGNOSTIC MODEL
   One model: a diagnostic core with six connected domains, and a panel
   that reveals the selected domain's approved questions.
   ===================================================================== */
.hr-model__intro { margin-bottom: var(--s7); }
.hr-model { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: clamp(1.5rem, 3vw, 3.25rem); align-items: start; }
.hr-model__frame { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); overflow: clip; }
/* the core sits in the matrix as its centre of gravity */
.hr-model__core {
  grid-column: 2; grid-row: 2; z-index: 1;
  display: grid; place-content: center; justify-items: center; gap: var(--s1);
  padding: var(--s4); border-radius: 50%; aspect-ratio: 1;
  background: var(--brand-deep); color: var(--on-dark); box-shadow: var(--e3);
}
.hr-model__core-label { color: var(--brand); font-size: .72rem; font-weight: 700; letter-spacing: .06em; }
.hr-model__core b { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1; font-weight: 700; }
.hr-model__node {
  position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--s3);
  text-align: start; cursor: pointer; min-height: 72px; padding: var(--s4);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1);
  color: var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
/* six nodes surround the core: 3 columns × 3 rows with the core at (2,2) */
.hr-model__ring { display: contents; }
.hr-model__node:nth-child(1) { grid-area: 1 / 1; }
.hr-model__node:nth-child(2) { grid-area: 1 / 2; }
.hr-model__node:nth-child(3) { grid-area: 1 / 3; }
.hr-model__node:nth-child(4) { grid-area: 3 / 1; }
.hr-model__node:nth-child(5) { grid-area: 3 / 2; }
.hr-model__node:nth-child(6) { grid-area: 3 / 3; }
.hr-model__node:hover { border-color: var(--mint); box-shadow: var(--e2); transform: translateY(-2px); }
.hr-model__node.is-active { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-dark); box-shadow: var(--e3); }
.hr-model__node-n { color: var(--brand-mid); font-size: .74rem; font-weight: 700; }
.hr-model__node.is-active .hr-model__node-n { color: var(--brand); }
.hr-model__node-name { min-width: 0; }
.hr-model__node-count {
  flex: none; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%;
  background: var(--mint-wash); color: var(--brand-mid); font-size: .7rem; font-weight: 700;
}
.hr-model__node.is-active .hr-model__node-count { background: var(--brand); color: var(--ink-900); }
/* connective geometry: a dashed orbit binds the six nodes to the core, so the
   six domains read as one model rather than six independent boxes */
.hr-model__core::before {
  content: ""; position: absolute; inset: -62%; z-index: -1; pointer-events: none;
  border: 2px dashed rgba(26,75,68,.18); border-radius: 50%;
}
.hr-model__core::after {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  border: 1px solid rgba(26,75,68,.10); border-radius: 50%;
}

.hr-model__panel {
  position: relative; padding: clamp(1.5rem, 2.6vw, 2.5rem);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e2);
}
.hr-model__panel-head { display: grid; gap: var(--s2); margin-bottom: var(--s5); padding-bottom: var(--s4); border-block-end: 1px solid var(--line); }
.hr-model__panel-n { color: var(--brand-mid); font-size: .78rem; font-weight: 700; }
.hr-model__panel-head h3 { margin: 0; font-size: var(--fs-h3); color: var(--brand-deep); }
.hr-model__questions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.hr-model__questions li {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s3); align-items: start;
  padding: var(--s4); background: var(--paper-2); border-radius: var(--r-sm);
  color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.7;
}
.hr-model__questions li > span { color: var(--brand-mid); font-size: .74rem; font-weight: 700; padding-block-start: .25em; }

/* =====================================================================
   §6 — VISION / MISSION / VALUES: ONE INSTITUTIONAL COMPOSITION
   ===================================================================== */
.about-vmv { background: var(--paper); }
.about-vmv__head { margin-bottom: var(--s7); }
.about-vmv__composition {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch;
}
.about-vmv__mark { display: block; margin-bottom: var(--s5); font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.about-vmv__vision {
  position: relative; grid-row: span 1; display: flex; flex-direction: column; overflow: clip; isolation: isolate;
  padding: clamp(1.75rem, 3.4vw, 3.5rem);
  background: var(--brand-deep); color: var(--on-dark); border-radius: var(--r-lg);
}
.about-vmv__vision::before {
  content: ""; position: absolute; inset: -30% -20%; z-index: -2; pointer-events: none;
  background: radial-gradient(55% 55% at 78% 12%, rgba(68,188,167,.30), transparent 64%),
              radial-gradient(48% 48% at 10% 92%, rgba(7,22,20,.45), transparent 66%);
  animation: sl-drift var(--t-drift) ease-in-out infinite alternate;
}
.about-vmv__vision .about-vmv__mark { color: var(--brand); }
.about-vmv__vision h3 { margin: 0 0 var(--s5); color: var(--on-dark); font-size: clamp(1.15rem, 1.4vw, 1.35rem); }
.about-vmv__vision p {
  margin: 0; color: var(--white); font-size: clamp(1.3rem, 1rem + 1.5vw, 2.05rem);
  line-height: 1.45; font-weight: 600; letter-spacing: -.01em; text-wrap: balance;
}
/* logo-derived quarter arcs, decorative — anchored to the panel's inline-end
   corner so they frame the statement instead of crossing it */
.about-vmv__arc, .about-vmv__arc::before {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(174,226,209,.24);
  border-block-start-color: transparent; border-inline-start-color: transparent;
}
.about-vmv__arc { inset-block-end: -34%; inset-inline-end: -14%; inline-size: min(340px, 52%); aspect-ratio: 1; }
.about-vmv__arc::before { content: ""; inset: 18%; border-color: rgba(174,226,209,.16); border-block-start-color: transparent; border-inline-start-color: transparent; }
.about-vmv__mission {
  display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 2.6vw, 2.5rem);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e2);
}
.about-vmv__mission .about-vmv__mark { margin-bottom: var(--s4); }
.about-vmv__mission .about-vmv__mark { color: var(--brand-mid); }
.about-vmv__mission h3 { margin: 0 0 var(--s4); color: var(--brand-deep); font-size: clamp(1.1rem, 1.3vw, 1.3rem); }
.about-vmv__mission p { margin: 0; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.8; }
/* values constellation: a connected system, not a bullet list */
.about-vmv__values {
  grid-column: 1 / -1; padding: clamp(1.5rem, 2.6vw, 2.5rem);
  background: var(--mint-wash); border-radius: var(--r-lg);
}
.about-vmv__values-head { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s6); }
.about-vmv__values-head .about-vmv__mark { margin: 0; color: var(--brand-mid); }
.about-vmv__values-head h3 { margin: 0; color: var(--brand-deep); font-size: clamp(1.1rem, 1.3vw, 1.3rem); }
.about-vmv__constellation {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4);
}
.about-vmv__constellation li { position: relative; display: grid; justify-items: center; gap: var(--s4); text-align: center; }
/* the connecting spine between the four value nodes */
.about-vmv__constellation li::before {
  content: ""; position: absolute; inset-block-start: 23px; inset-inline-start: -50%;
  inline-size: 100%; block-size: 2px; background: var(--mint);
}
.about-vmv__constellation li:first-child::before { display: none; }
.about-vmv__node {
  position: relative; display: grid; place-items: center; inline-size: 46px; block-size: 46px;
  border-radius: 50%; background: var(--white); box-shadow: var(--e1);
  border: 2px solid var(--brand); color: var(--brand-mid);
}
.about-vmv__node i { font-style: normal; font-size: .74rem; font-weight: 700; }
.about-vmv__value { color: var(--brand-deep); font-weight: 600; font-size: var(--fs-sm); line-height: 1.55; }

/* =====================================================================
   §10 — DIRECT CONTACT METHODS: ONE SYSTEM
   ===================================================================== */
.contact-methods { margin-block: var(--s7) 0; display: grid; gap: var(--s3); }
.contact-methods h2 { margin: 0 0 var(--s2); color: var(--muted); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .05em; }
.contact-method {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--s4);
  min-height: 72px; padding: var(--s4) var(--s5);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1);
  color: var(--ink);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.contact-method:hover, .contact-method:focus-visible { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--mint); }
.contact-method__icon {
  flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%;
  background: var(--mint-wash) center / 20px 20px no-repeat;
}
.contact-method[data-method="email"] .contact-method__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315705E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7.5 8.5 5.5 8.5-5.5'/%3E%3C/svg%3E");
}
.contact-method[data-method="phone"] .contact-method__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315705E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.5h3.1l1.5 4.6-2 1.4a12.5 12.5 0 0 0 5.7 5.7l1.4-2 4.6 1.5v3.1a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.2 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E");
}
.contact-method[data-method="whatsapp"] .contact-method__icon {
  background-color: var(--brand-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEE2D1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.6a8.4 8.4 0 0 1-12.3 7.5L3.5 20.5l1.4-4.6A8.4 8.4 0 1 1 20.5 11.6z'/%3E%3Cpath d='M8.9 8.2c.3-.1.7 0 .9.4l.7 1.4c.1.3.1.6-.1.8l-.5.6c.6 1.2 1.5 2.1 2.7 2.7l.6-.5c.2-.2.5-.3.8-.1l1.4.7c.4.2.5.6.4.9-.3.8-1.2 1.3-2 1.2-3-.3-5.7-3-6-6-.1-.8.3-1.7 1.1-2.1z'/%3E%3C/svg%3E");
}
.contact-method__body { min-width: 0; display: grid; gap: .15rem; }
.contact-method__label { color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
/* RTL-correct: the value box is start-aligned in the card, and an LTR value
   (phone / email) renders LTR internally while sitting at the card's RTL edge */
.contact-method__value { display: block; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }
.contact-method__value[dir="ltr"] { direction: ltr; unicode-bidi: isolate; text-align: right; }
.contact-method__cue { flex: none; color: var(--brand-mid); font-size: .9rem; }
.contact-method:hover .contact-method__cue { color: var(--brand-deep); }
/* the WhatsApp card leads the system without leaving it */
.contact-method[data-method="whatsapp"] { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-dark); }
.contact-method[data-method="whatsapp"] .contact-method__label { color: var(--brand); }
.contact-method[data-method="whatsapp"] .contact-method__value { color: var(--on-dark); }
.contact-method[data-method="whatsapp"] .contact-method__cue { color: var(--brand); }
.contact-method[data-method="whatsapp"]:hover { background: var(--brand-mid); border-color: var(--brand-mid); }

/* §9 — success state: no fabricated reference in the isolated preview.
   The labelled component below is what a REAL reference renders into. */
/* the counter is an LTR "used / limit" pair — bidi would otherwise print it
   as "1200 / 68" and read as the wrong way round */
.field-hint[dir="ltr"] { text-align: right; }

.inquiry-success .consultation-intro { display: grid; justify-items: start; gap: 0; }
.inquiry-success__seal {
  inline-size: 56px; block-size: 56px; border-radius: 50%; margin-bottom: var(--s5);
  background: var(--mint-wash) center / 26px 26px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315705E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 4.5 4.5 10.5-10.5'/%3E%3C/svg%3E");
}
.inquiry-success h1 { margin-bottom: var(--s5); }
.inquiry-reference {
  display: grid; gap: var(--s2); margin-block: var(--s2) var(--s5); padding: var(--s4) var(--s5);
  background: var(--mint-wash); border: 1px solid var(--mint); border-radius: var(--r-card);
  inline-size: max-content; max-inline-size: 100%;
}
.inquiry-reference__label { color: var(--brand-mid); font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
.inquiry-reference__value { font-size: 1.35rem; font-weight: 700; color: var(--brand-deep); direction: ltr; letter-spacing: .06em; }
.inquiry-success .contact-methods { inline-size: 100%; max-inline-size: 420px; }

/* =====================================================================
   §17 — CLIENTS: optical balance only. No structural regression.
   ===================================================================== */
.trustwall__cell img { max-block-size: 52px; inline-size: auto; max-inline-size: 78%; object-fit: contain; margin-inline: auto; }
.trustwall__cell { align-content: center; justify-items: center; }

/* =====================================================================
   §16 — FOOTER: desktop multi-column, mobile disclosure groups
   ===================================================================== */
.foot-group__title { margin: 0 0 var(--s4); padding: 0; border: 0; }
.foot-group__toggle {
  inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 0 0 var(--s3); border: 0; border-block-end: 1px solid var(--line-dark); background: transparent;
  color: var(--on-dark); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-align: start;
}
.foot-group__cue { position: relative; flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%; background: rgba(174,226,209,.12); }
.foot-group__cue::before, .foot-group__cue::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 9px; block-size: 2px; border-radius: 2px; background: var(--brand);
  transform: translate(50%, -50%); transition: transform var(--t) var(--ease);
}
.foot-group__cue::after { transform: translate(50%, -50%) rotate(90deg); }
.foot-group__toggle[aria-expanded="true"] .foot-group__cue::after { transform: translate(50%, -50%) rotate(0deg); }
@media (min-width: 600px) {
  /* desktop/tablet: always open, the control is inert decoration */
  .foot-group .foot-list { display: grid !important; }
  .foot-group__toggle { pointer-events: none; }
  .foot-group__cue { display: none; }
}

/* =====================================================================
   RESPONSIVE — tablet
   ===================================================================== */
@media (max-width: 1023px) {
  .m2-axis-explorer { grid-template-columns: 1fr; }
  .m2-axis-map { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--s3); }
  .m2-axis-map li { grid-template-columns: auto minmax(0,1fr); justify-items: start; text-align: start; gap: var(--s3); display: grid; }
  .m2-axis-map li::before { inset-block-start: auto; inset-block-end: 50%; inset-inline-start: 5px; inline-size: 2px; block-size: 100%; }
  .m2-axis-map li span { font-size: .8rem; }
  .hr-model { grid-template-columns: 1fr; }
  .hr-model__frame { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* the orbit only means something in the radial desktop arrangement; below
     1024px the model reflows to a stacked matrix and the orbit would inflate
     off a wide, short core and overflow the page */
  .hr-model__core::before, .hr-model__core::after { display: none; }
  .hr-model__core { grid-area: auto; grid-column: 1 / -1; aspect-ratio: auto; border-radius: var(--r-card); grid-auto-flow: column; justify-content: start; gap: var(--s4); padding: var(--s4) var(--s5); }
  .hr-model__node:nth-child(n) { grid-area: auto; }
  .about-vmv__composition { grid-template-columns: 1fr; }
  .about-vmv__constellation { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5) var(--s4); }
  .about-vmv__constellation li::before { display: none; }
}

/* =====================================================================
   RESPONSIVE — mobile
   ===================================================================== */
@media (max-width: 599px) {
  /* §12 — arcs are smaller on mobile, so the reserve shrinks with them */
  .article-faq__inner { width: calc(100% - 36px); }
  .article-faq__q { grid-template-columns: auto minmax(0,1fr) auto; gap: var(--s3); padding: var(--s4); }
  .article-faq__a-inner { padding: 0 var(--s4) var(--s4); }

  .hr-model__frame { grid-template-columns: 1fr; gap: var(--s2); }
  .hr-model__core { grid-auto-flow: column; justify-content: start; }
  .hr-model__node { min-height: 60px; padding: var(--s3) var(--s4); }
  .hr-model__panel { padding: var(--s5); }

  .about-vmv__constellation { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5) var(--s3); }
  .about-vmv__vision p { font-size: clamp(1.2rem, 1rem + 2vw, 1.55rem); }

  .contact-method { min-height: 64px; padding: var(--s3) var(--s4); gap: var(--s3); }
  .contact-method__icon { inline-size: 36px; block-size: 36px; }

  /* §16 — mobile footer: three compact disclosure groups */
  .site-footer__cols { display: grid; grid-template-columns: 1fr; gap: 0; }
  .foot-group { border-block-start: 1px solid var(--line-dark); padding-block: var(--s2); }
  .foot-group:first-child { border-block-start: 0; }
  .foot-group__title { margin: 0; }
  .foot-group__toggle { min-height: 52px; padding-block: var(--s3); border-block-end: 0; font-size: 1rem; color: var(--on-dark); }
  .foot-group:has(.foot-group__toggle[aria-expanded="false"]) .foot-list { display: none; }
  .foot-group .foot-list { padding-block-end: var(--s4); }
  .foot-list a { padding: .45rem 0; min-height: 40px; color: var(--on-dark-soft); }
  .site-footer { padding-block-start: var(--sec-tight); }
  .site-footer__top { padding-block-end: var(--s6); gap: var(--s5); }
  .site-footer__brand > p { margin-block: var(--s4) 0; }
  .site-footer__contact { margin-block-start: var(--s5); gap: var(--s2); }
  /* the corner stripe motif is masked to a corner at desktop; at phone width it
     read as a bright rectangle across the contact block, so it is stilled */
  .site-footer .grid-lines { display: none; }
}

/* =====================================================================
   REDUCED MOTION — final states only (the base sheet already stills
   transitions; these are the M3 additions that animate)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .about-vmv__vision::before { animation: none; transform: none; }
}