/* Strategic Labs — V002-M4 SIGNATURE VISUAL SYSTEM
   ------------------------------------------------------------------------
   Derived from the logo mark, which is four square modules in a 2×2 grid:
   each module is ruled with fine parallel lines in ONE direction, adjacent
   modules are orthogonal, every module carries exactly ONE rounded outer
   corner, and the gap between them is a cross of void with the intersection
   as the focal point.

   Extracted as a LANGUAGE (rules, not wallpaper):
     RULE      the hairline is the structural element — ledgers, spines,
               chapter rules. Lines, not boxes.
     HATCH     a ruled field in one direction. At most ONE per page, and it
               always sits orthogonal to the nearest rule system.
     TAB       one rounded corner per object (start-top), never four. The
               signature object shape — used only where a surface truly
               contains something (panels, plinths, the action surface).
     CROSS     two hairlines: the folio marker, the intersection.
     QUADRANT  asymmetric splits with a deliberate void column.

   Composition grammar (recognisable authorship, not a template):
     chapter opening   folio + rule + eyebrow + H2 on the start column
     evidence          ruled ledger — number | title | detail, no containers
     metric            proof line — numerals on one baseline between hairlines
     closure           closing rule — paper chapter, dark tab-corner action
     paper moments     rules + whitespace;  dark moments — rare
   ------------------------------------------------------------------------ */

:root {
  /* typography — deliberate executive scale (Owner ranges respected) */
  --fs-h1: clamp(2.25rem, 1.3rem + 2.9vw, 3.875rem);   /* 36 → 62 */
  --fs-h2: clamp(1.8rem, 1.3rem + 1.6vw, 2.75rem);     /* 29 → 44 */
  --lh-h1: 1.16;
  --fs-folio: .78rem;
  --track-folio: .14em;

  /* language primitives */
  --rule: 1px solid var(--line);
  --rule-strong: 1px solid var(--line-strong);
  --rule-dark: 1px solid var(--line-dark);
  --hatch-v: repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 7px);
  --hatch-h: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 7px);
  --tab: clamp(28px, 3.2vw, 48px);
  --tab-sm: 6px;
}

/* ---------- typography ---------- */
h1 { line-height: var(--lh-h1); letter-spacing: -.02em; font-weight: 700; }
.h2, .sec-head h2, .section-heading h2 { line-height: 1.22; letter-spacing: -.015em; }
.lead { line-height: 1.75; }
/* the eyebrow becomes a micro-label: cross mark + tracked text, no dash */
.eyebrow { gap: .55em; font-size: var(--fs-eyebrow); letter-spacing: .08em; font-weight: 600; }
.eyebrow::before { content: ""; inline-size: 10px; block-size: 10px; border-radius: 0; background:
  linear-gradient(var(--brand), var(--brand)) center / 100% 1px no-repeat,
  linear-gradient(var(--brand), var(--brand)) center / 1px 100% no-repeat; }
.section--dark .eyebrow::before { background:
  linear-gradient(var(--brand), var(--brand)) center / 100% 1px no-repeat,
  linear-gradient(var(--brand), var(--brand)) center / 1px 100% no-repeat; }

/* ---------- the cross mark (standalone) ---------- */
.m4-cross { display: inline-block; inline-size: 10px; block-size: 10px; margin-inline-end: .55em; vertical-align: middle;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; }

/* ---------- chapter folio + rule (every chapter except hero & closure) ----------
   A CSS counter numbers the chapters of a page; the folio and its rule are
   pseudo-elements — decorative, outside the accessibility tree and outside the
   content lock. The rule spans the content column; the folio sits on it. */
main { counter-reset: chapter; }
main > .pm-section:not(.pm-index-0):not(.close4):not(.pm-chapter) > .wrap,
main > .pm-chapter > .wrap.chapter__opener { position: relative; counter-increment: chapter; }
main > .pm-section:not(.pm-index-0):not(.close4):not(.pm-chapter) > .wrap::before,
main > .pm-chapter > .wrap.chapter__opener::before {
  content: counter(chapter, decimal-leading-zero);
  position: absolute; inset-inline-start: 0; inset-block-start: calc(-1 * var(--sec) + 1.15rem);
  padding-inline-end: .75rem; background: inherit;
  font-family: Arial, sans-serif; font-variant-numeric: tabular-nums; font-size: var(--fs-folio); font-weight: 700;
  letter-spacing: var(--track-folio); color: var(--brand-mid); line-height: 1; z-index: 1;
}
main > .pm-section:not(.pm-index-0):not(.close4):not(.pm-chapter) > .wrap::after,
main > .pm-chapter > .wrap.chapter__opener::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: calc(-1 * var(--sec) + 1.55rem);
  block-size: 1px; background: var(--line); z-index: 0;
}
/* folio text must sit on the section's own ground so the rule breaks under it */
.section--paper2 > .wrap::before { background: var(--paper-2); }
.section--wash > .wrap::before   { background: var(--mint-wash); }
.pm-section:not(.section--paper2):not(.section--wash):not(.section--dark) > .wrap::before { background: var(--paper); }
.section--dark > .wrap::before { background: var(--ink-800); color: var(--brand); }
.section--dark > .wrap::after  { background: var(--line-dark); }
/* dark chapters carry the arc reserve — pull the folio back to the content edge */
.section--dark:has(> .sl-arc-top) > .wrap::before { inset-block-start: calc(-1 * var(--sec) - clamp(60px, 7vw, 120px) * .8 + 1.15rem + clamp(60px, 7vw, 120px) * .8); }
.section--dark:has(> .sl-arc-top) > .wrap::after  { inset-block-start: calc(-1 * var(--sec) - clamp(60px, 7vw, 120px) * .8 + 1.55rem + clamp(60px, 7vw, 120px) * .8); }
/* the composed chapter (title + content in one section): rule on the opener only */
main > .pm-chapter > .section > .wrap::before, main > .pm-chapter > .section > .wrap::after { display: none; }
.section--tight > .wrap::before { inset-block-start: calc(-1 * var(--sec-tight) + 1.15rem); }
.section--tight > .wrap::after  { inset-block-start: calc(-1 * var(--sec-tight) + 1.55rem); }
/* chapter heads sit a little lower now that a rule opens the chapter */
.sl-intro, .sec-head { margin-block-start: .35rem; }

/* ---------- evidence note: a ruled aside, not a tinted box ---------- */
.m4-note { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s4); align-items: start;
  padding: var(--s4) 0 var(--s4) 0; border-block: var(--rule); color: var(--ink-soft); }
.m4-note__mark { inline-size: 14px; block-size: 14px; margin-block-start: .45em;
  background: linear-gradient(var(--brand), var(--brand)) center / 100% 1px no-repeat,
              linear-gradient(var(--brand), var(--brand)) center / 1px 100% no-repeat; }
.m4-note p { margin: 0; font-size: var(--fs-sm); line-height: 1.85; }
.m4-note p + p { margin-top: var(--s3); }
.m4-note .prose { max-width: none; }
.m4-note .cta__actions { margin-top: var(--s4); }
.section--dark .m4-note { border-color: var(--line-dark); color: var(--on-dark-soft); }

/* ---------- ledger: numbered rows/columns separated by hairlines ---------- */
.ledger4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-block-start: var(--rule); }
.ledger4 > li { position: relative; padding: var(--s5) var(--s4) var(--s5) 0; border-block-end: var(--rule); min-width: 0; }
.ledger4__n, .home-deep__n { display: block; margin-bottom: var(--s3); font-size: var(--fs-folio); font-weight: 700; letter-spacing: var(--track-folio); color: var(--brand-mid); }
.ledger4 h3 { margin: 0 0 var(--s2); font-size: 1.05rem; line-height: 1.5; }
.ledger4 p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }
.ledger4--4 { grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: var(--s5); }
.ledger4--4 > li { border-block-end: 0; padding-inline-start: 0; }
.ledger4--4 > li + li { border-inline-start: var(--rule); padding-inline-start: var(--s5); }
/* row ledger (capability preview): number | title | practice, two columns of rows.
   Overrides every M2/M3 .pm-cap-preview grid/rail rule. */
.pm-cap-preview.ledger4--rows, .pm-cap-family__items.ledger4--rows { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--s7); row-gap: 0; border-block-start: var(--rule); background: transparent; gap: 0 var(--s7); }
.pm-cap-preview.ledger4--rows > *, .pm-cap-family__items.ledger4--rows > * { grid-column: auto; }
.ledger4__row { display: grid; grid-template-columns: 2.6rem minmax(0,1fr) auto; align-items: baseline; gap: var(--s3); padding: var(--s4) 0; border-block-end: var(--rule); background: transparent; border-radius: 0; box-shadow: none; }
.ledger4__row .ledger4__n { margin: 0; }
.ledger4__row b { font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--ink); }
.ledger4__row p { margin: 0; color: var(--muted); font-size: .78rem; white-space: nowrap; }
/* dark ledger (Home deep-dive): the same grammar on the dark surface */
.ledger4--dark { border-block-start: var(--rule-dark); grid-template-columns: repeat(5, minmax(0,1fr)); column-gap: 0; }
.ledger4--dark > li { background: transparent; border: 0; border-radius: 0; padding: var(--s5) var(--s4) var(--s5) var(--s4); }
.ledger4--dark > li + li { border-inline-start: var(--rule-dark); }
.ledger4--dark > li:first-child { padding-inline-start: 0; }
.ledger4--dark > li:hover { background: transparent; }
.ledger4--dark .home-deep__n { color: var(--brand); }

/* ---------- oversized folio columns (three reasons) ---------- */
.folio4 { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s6); border-block-start: var(--rule-strong); }
.folio4__item { position: relative; padding-block-start: var(--s6); background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.folio4__n { display: block; margin-bottom: var(--s4); font-size: clamp(2.6rem, 2rem + 2vw, 4rem); font-weight: 700; line-height: .9; letter-spacing: -.04em; color: var(--mint); }
.folio4__item h3 { margin: 0 0 var(--s3); font-size: 1.1rem; }
.folio4__item p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }

/* ---------- proof line: metrics on one baseline between hairlines ---------- */
.proof4 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin: 0; }
.proof4__item { padding: var(--s5) var(--s6) var(--s4) 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
.proof4__item + .proof4__item { border-inline-start: var(--rule-dark); padding-inline-start: var(--s6); }
.proof4__item b { display: block; font-size: var(--fs-stat); font-weight: 700; line-height: .95; letter-spacing: -.035em; color: var(--white); }
.proof4__item b span { font: inherit; color: inherit; letter-spacing: inherit; }
.proof4__item > span { display: block; margin-block-start: var(--s3); color: var(--on-dark-soft); font-size: var(--fs-sm); font-weight: 600; }

/* ---------- editorial index (five practices, no containers) ---------- */
.index4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; border-block-start: var(--rule-strong); }
.index4 > li { min-width: 0; }
/* the M2 tail-spanning rule targets .home-gateway__grid — an editorial index never spans */
.home-gateway__grid.index4 > li:last-child { grid-column: auto; }
.index4 > li + li .index4__item { border-inline-start: var(--rule); }
.index4__item { display: flex; flex-direction: column; gap: var(--s3); min-block-size: 220px; padding: var(--s5) var(--s4) var(--s5) var(--s4); color: var(--ink);
  transition: background var(--t) var(--ease); }
.index4 > li:first-child .index4__item { padding-inline-start: 0; }
.index4__item:hover, .index4__item:focus-visible { background: var(--mint-wash); }
.index4__n { font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem); font-weight: 700; line-height: .9; letter-spacing: -.04em; color: var(--brand); }
.index4__item h3 { margin: 0; flex: 1; font-size: 1.05rem; line-height: 1.5; }
.index4__item .sl-link { font-size: var(--fs-sm); }

/* ---------- process line (five stages on one directional rule) ---------- */
.process4 { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s5); }
.process4::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 19px; block-size: 1px; background: var(--line-strong); }
.process4__stage { position: relative; display: flex; flex-direction: column; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.process4__stage:hover { transform: none; box-shadow: none; }
.process4__node { position: relative; display: grid; place-items: center; inline-size: 40px; block-size: 40px; margin-bottom: var(--s5);
  border-radius: 50%; background: var(--paper); border: 1px solid var(--brand-deep); color: var(--brand-deep); font-size: .8rem; font-weight: 700; letter-spacing: .06em; }
.process4__stage:first-child .process4__node { background: var(--brand-deep); color: var(--on-dark); }
.process4__stage h3 { margin: 0 0 var(--s3); font-size: 1.05rem; }
.process4__stage > p { margin: 0 0 var(--s4); color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }
.process4 .home-method__chips { margin-top: auto; border-block-start: var(--rule); padding-top: var(--s3); gap: .35rem; }
.process4 .home-method__chips li { background: transparent; padding: 0; color: var(--muted); font-size: .78rem; }
.process4 .home-method__chips li + li::before { content: "·"; margin-inline-end: .35rem; color: var(--line-strong); }

/* ---------- closing rule (page / service-section closure) ---------- */
.close4 { position: relative; background: var(--paper); color: var(--ink); padding-block: var(--sec); }
.close4::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; background: var(--line-strong); }
.close4__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: stretch; }
.close4__copy .eyebrow { color: var(--brand-mid); }
.close4__copy h2 { max-width: 18ch; }
.close4__copy p { margin-block: var(--s4) 0; color: var(--ink-soft); max-width: 52ch; }
.close4__panel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s4);
  padding: clamp(1.5rem, 2.6vw, 2.5rem); min-block-size: 220px;
  background: var(--ink-800); color: var(--on-dark); overflow: clip; isolation: isolate;
  border-radius: var(--tab-sm); border-start-start-radius: var(--tab); }
.close4__panel::before { content: ""; position: absolute; inset: -30% -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 55% at 78% 12%, rgba(68,188,167,.28), transparent 64%); }
.close4__mark { position: absolute; inset-block-start: var(--s5); inset-inline-end: var(--s5); inline-size: 14px; block-size: 14px;
  background: linear-gradient(var(--brand), var(--brand)) center / 100% 1px no-repeat,
              linear-gradient(var(--brand), var(--brand)) center / 1px 100% no-repeat; }
.close4__panel .cta__actions { flex-direction: column; align-items: stretch; }
.close4__panel .btn { inline-size: 100%; }
.close4__panel .btn--primary { background: var(--brand); color: var(--ink-900); border-color: var(--brand); }
.close4__panel .btn--primary:hover { background: var(--mint); border-color: var(--mint); }
.close4__panel .btn--ghost { background: rgba(174,226,209,.08); color: var(--on-dark); border-color: rgba(174,226,209,.55); }
.close4__panel .btn--ghost:hover { background: rgba(174,226,209,.16); border-color: var(--mint); }

/* ---------- the tab object (one rounded corner) — applied to true containers ---------- */
.practice-explorer__panel, .m2-axis-focus, .hr-model__panel, .consultation-card, .about-vmv__vision, .insights-featured {
  border-radius: var(--tab-sm); border-start-start-radius: var(--tab);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1023px) {
  .ledger4--dark { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ledger4--dark > li { border-inline-start: 0 !important; border-block-end: var(--rule-dark); padding-inline: 0; }
  .index4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .index4 > li:nth-child(4) .index4__item { border-inline-start: 0; padding-inline-start: 0; }
  .index4 > li:nth-child(n+4) .index4__item { border-block-start: var(--rule); }
  .process4 { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: var(--s6); }
  .process4::before { display: none; }
  .close4__inner { grid-template-columns: 1fr; }
  .close4__panel { min-block-size: 0; }
}
@media (max-width: 833px) {
  .ledger4--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ledger4--4 > li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .ledger4--4 > li:nth-child(n+3) { border-block-start: var(--rule); }
  .folio4 { grid-template-columns: 1fr; gap: 0; }
  .folio4__item { padding-block: var(--s5); border-block-end: var(--rule); }
  .folio4__item:last-child { border-block-end: 0; }
  .index4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .index4 > li:nth-child(n) .index4__item { border-inline-start: 0; border-block-start: 0; padding-inline-start: 0; }
  .index4 > li:nth-child(even) .index4__item { border-inline-start: var(--rule); padding-inline-start: var(--s4); }
  .index4 > li:nth-child(n+3) .index4__item { border-block-start: var(--rule); }
  .index4__item { min-block-size: 180px; }
}
@media (max-width: 599px) {
  :root { --tab: 28px; }
  main > .pm-section > .wrap::before, main > .pm-chapter > .wrap.chapter__opener::before { inset-block-start: calc(-1 * var(--sec) + .9rem); }
  main > .pm-section > .wrap::after,  main > .pm-chapter > .wrap.chapter__opener::after  { inset-block-start: calc(-1 * var(--sec) + 1.3rem); }
  .ledger4--4 { grid-template-columns: 1fr; }
  .ledger4--4 > li { border-inline-start: 0 !important; padding-inline-start: 0 !important; border-block-start: 0; border-block-end: var(--rule); padding-block: var(--s4); }
  .ledger4--dark { grid-template-columns: 1fr; }
  .index4 { grid-template-columns: 1fr; }
  .index4 > li:nth-child(n) .index4__item { border-inline-start: 0; padding-inline-start: 0; border-block-start: 0; border-block-end: var(--rule); min-block-size: 0; padding-block: var(--s4); }
  .index4__item { flex-direction: row; align-items: center; gap: var(--s4); }
  .index4__n { font-size: 1.6rem; }
  .index4__item h3 { flex: 1; font-size: .98rem; }
  .index4__item .sl-link span:not([aria-hidden]) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* mobile rails: the M3 mobile sheet turns these into peeking snap rails.
     Primary navigation (index) and evidence (reasons) now STACK — nothing to
     discover by swiping; secondary detail (deep records, process) keeps the
     approved rail. */
  .index4, .folio4 { display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; padding-block-end: 0; scroll-snap-type: none; }
  .index4 > li, .folio4 > li { flex: none; min-inline-size: 0; }
  .folio4 { margin-block-start: var(--s6); }
  .folio4__item { padding-block: var(--s4); }
  .folio4__n { font-size: 2.2rem; margin-bottom: var(--s3); }
  .ledger4--dark, .process4 { display: flex; }
  /* the capability ledger stacks on mobile (rows are short) — no rail */
  .pm-cap-preview.ledger4--rows, .pm-cap-family__items.ledger4--rows { display: grid; grid-template-columns: 1fr; overflow: visible; margin-inline: 0; padding-inline: 0; padding-block-end: 0; scroll-snap-type: none; }
  .pm-cap-preview.ledger4--rows > li, .pm-cap-family__items.ledger4--rows > li { flex: none; min-inline-size: 0; padding: var(--s3) 0; }
  .ledger4__row { grid-template-columns: 2.2rem minmax(0,1fr); }
  .ledger4__row p { grid-column: 2; white-space: normal; }
  .ledger4--dark > li { border-block-end: 0; border-inline-start: 0 !important; padding: var(--s4); border: var(--rule-dark); border-radius: var(--tab-sm); }
  .process4__stage { padding: var(--s4); border: var(--rule); border-radius: var(--tab-sm); background: var(--white); }
  .proof4 { grid-template-columns: 1fr; border-block-start: var(--rule-dark); }
  .proof4__item { padding: var(--s4) 0; border-inline-start: 0 !important; border-block-end: var(--rule-dark); padding-inline-start: 0 !important; }
  .proof4__item b { font-size: 3rem; }
  .proof4__item > span { margin-block-start: var(--s2); }
}