/* Strategic Labs — V002-M2 shared blocks.
   The generic headingText renderer already emits .pm-copy-grid > .pm-copy-head +
   .pm-copy-body, which maps exactly onto the bound heading↔supporting-copy
   pattern — so restyling it here fixes the floating-side-copy anti-pattern on
   every template at once. */

/* ---------- page hero (non-home routes) ---------- */
.phero {
  position: relative; padding-block: clamp(3.5rem, 2.4rem + 4.4vw, 7rem) clamp(2.5rem, 2rem + 3vw, 5rem);
  background: linear-gradient(180deg, var(--mint-wash) 0%, var(--paper) 100%);
  overflow: clip; isolation: isolate;
}
.phero::before {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; z-index: -2;
  inline-size: min(560px, 52%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(68,188,167,.20), transparent 68%);
  animation: sl-drift calc(var(--t-drift) * 1.3) ease-in-out infinite alternate;
}
.phero::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 6%; z-index: -1;
  inline-size: 120px; block-size: 60%; opacity: .12; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, var(--brand-mid) 0 1px, transparent 1px 7px);
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
}
.phero__inner { position: relative; max-width: 940px; }
.phero h1 { max-width: 18ch; }
.phero__lead { margin-block: var(--s5) 0; font-size: var(--fs-lead); color: var(--ink-soft); max-width: 58ch; }
.phero .cta__actions { margin-top: var(--s6); }

/* ---------- generic section: bound heading + supporting copy ---------- */
.pm-copy-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.75rem, 3.5vw, 4.5rem); align-items: start;
}
.pm-copy-head { min-width: 0; }
.pm-copy-head .lead { margin-block: var(--s4) 0; }
.pm-copy-body { min-width: 0; }
.pm-copy-body .prose { max-width: 60ch; }
.pm-copy-body .cta__actions { margin-top: var(--s5); }
.sec-head { display: grid; gap: var(--s3); margin-bottom: var(--s7); max-width: 64ch; }
.pm-reading-band { max-width: var(--reading); }

/* ---------- metrics ---------- */
.pm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s5); margin-top: var(--s6); }
.pm-stat {
  position: relative; display: grid; gap: var(--s2); padding: var(--s6);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pm-stat::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: var(--s6); inline-size: 34px; block-size: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
.pm-stat:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.pm-stat b { font-size: var(--fs-stat); line-height: 1; font-weight: 700; color: var(--brand-deep); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pm-stat span { color: var(--ink-soft); font-size: var(--fs-sm); }
.pm-stat-intro { max-width: 64ch; color: var(--ink-soft); }
.section--dark .pm-stat { background: rgba(255,255,255,.05); border-color: var(--line-dark); box-shadow: none; }
.section--dark .pm-stat b { color: var(--brand); }
.section--dark .pm-stat span { color: var(--on-dark-soft); }
.pm-note, .muted.pm-note { margin-top: var(--s5); color: var(--muted); font-size: var(--fs-sm); max-width: 68ch; }

/* ---------- steps / journey ---------- */
.jsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--s5); }
.jstep {
  position: relative; display: flex; flex-direction: column; padding: var(--s6);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.jstep:hover { transform: translateY(-3px); box-shadow: var(--e3); border-color: var(--mint); }
.jstep > b {
  display: grid; place-items: center; inline-size: 40px; block-size: 40px; margin-bottom: var(--s5);
  border-radius: 50%; background: var(--mint-wash); color: var(--brand-mid);
  font-size: .85rem; font-weight: 700; font-family: Arial, sans-serif;
}
.jstep h3 { margin-bottom: var(--s3); }
.jstep p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; }

/* ---------- trust / foundation ---------- */
.foundation { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s5); }
.foundation > div {
  padding: var(--s6); background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--e1); color: var(--ink-soft);
}
.foundation b { display: inline-block; margin-block: var(--s2); font-size: 1.15rem; color: var(--ink); }
.foundation small { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7; display: block; }
.section--dark .foundation > div { background: rgba(255,255,255,.05); border-color: var(--line-dark); box-shadow: none; color: var(--on-dark-soft); }
.section--dark .foundation b { color: var(--on-dark); }

/* ---------- editorial cards ---------- */
.postgrid, .pm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: var(--s5); }
.post {
  position: relative; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.post:hover { transform: translateY(-4px); box-shadow: var(--e3); border-color: var(--mint); }
.pm-card-index { font-size: var(--fs-eyebrow); font-weight: 700; color: var(--brand-mid); font-family: Arial, sans-serif; }
.post__body { display: block; }
.post__body h3 { transition: color var(--t) var(--ease); }
.post:hover .post__body h3 { color: var(--brand-mid); }
.post__body p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }

/* ---------- CTA ---------- */
.cta { position: relative; background: var(--ink-800); color: var(--on-dark); overflow: clip; isolation: isolate; }
.cta::before {
  content: ""; position: absolute; inset: -25% -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(52% 58% at 84% 12%, rgba(68,188,167,.22), transparent 62%),
    radial-gradient(46% 52% at 10% 88%, rgba(21,112,94,.34), transparent 66%);
  animation: sl-drift var(--t-drift) ease-in-out infinite alternate;
}
.cta::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: min(240px, 26%); z-index: -1;
  opacity: .12; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, var(--mint) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(70% 90% at 0% 100%, #000 30%, transparent 72%);
          mask-image: radial-gradient(70% 90% at 0% 100%, #000 30%, transparent 72%);
}
.cta__inner { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.cta h2 { color: var(--on-dark); font-size: var(--fs-h2); margin: 0; max-width: 20ch; }
.cta .eyebrow { color: var(--brand); }
.cta .eyebrow::before { background: var(--brand); }
.cta p { color: var(--on-dark-soft); max-width: 56ch; margin-block: var(--s4) 0; }

/* ---------- About: vision / mission / values ---------- */
.about-vmv__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.about-vmv__panel { display: flex; flex-direction: column; gap: var(--s4); }
.about-vmv__panel h3 { margin: 0; padding-bottom: var(--s4); border-block-end: 1px solid var(--line); color: var(--brand-deep); font-size: 1.1rem; }
.about-vmv__panel p { margin: 0; color: var(--ink-soft); }
.about-vmv__values ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.about-vmv__values li {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .9rem;
  background: var(--mint-wash); border-radius: var(--r-pill); color: var(--brand-deep);
  font-weight: 600; font-size: var(--fs-sm);
}
.about-vmv__values li::before { content: ""; flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--brand); }

/* four principles read best two-up — avoids a 3+1 orphan row at desktop */
.about-principles .sl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- generic fallbacks ---------- */
.public-block { padding-block: var(--sec-tight); }
.media-frame { margin: 0; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.media-frame figcaption { padding: var(--s3) var(--s4); color: var(--muted); font-size: var(--fs-sm); }
.timeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.timeline-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); padding: var(--s5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1); }
.timeline-list li > span { color: var(--brand-mid); font-weight: 700; font-size: var(--fs-sm); }
.accordion-list { display: grid; gap: var(--s3); }
.accordion-list details, .m1-authority-copy, .contact-authority-copy {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1);
  padding: var(--s4) var(--s5); transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.accordion-list details[open], .m1-authority-copy[open], .contact-authority-copy[open] { box-shadow: var(--e2); border-color: var(--mint); }
.accordion-list summary, .m1-authority-copy summary, .contact-authority-copy summary {
  cursor: pointer; font-weight: 600; color: var(--brand-deep); min-height: 44px; display: flex; align-items: center; gap: .5rem;
  list-style: none;
}
.accordion-list summary::-webkit-details-marker, .m1-authority-copy summary::-webkit-details-marker, .contact-authority-copy summary::-webkit-details-marker { display: none; }
.accordion-list summary::before, .m1-authority-copy summary::before, .contact-authority-copy summary::before {
  content: "+"; display: grid; place-items: center; inline-size: 24px; block-size: 24px; flex: none;
  border-radius: 50%; background: var(--mint-wash); color: var(--brand-mid); font-weight: 700; font-size: 1rem;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
details[open] > summary::before { content: "−"; background: var(--brand); color: var(--ink-900); }
.accordion-list details > div, .m1-authority-copy .prose, .contact-authority-copy__body { padding-top: var(--s4); }
.section--dark .m1-authority-copy, .section--dark .accordion-list details {
  background: rgba(255,255,255,.05); border-color: var(--line-dark); box-shadow: none;
}
.section--dark .m1-authority-copy summary { color: var(--on-dark); }
.section--dark .m1-authority-copy summary::before { background: rgba(174,226,209,.12); color: var(--brand); }
.section--dark .m1-authority-copy .prose { color: var(--on-dark-soft); }
.section--dark .m1-authority-copy .prose a { color: var(--brand); }

.tab-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s5); }
.tab-stack article { padding: var(--s6); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1); }
.editorial-quote { margin: 0 auto; max-width: 860px; padding: var(--s7); background: var(--mint-wash); border-radius: var(--r-lg); font-size: clamp(1.25rem, 2.2vw, 1.85rem); line-height: 1.6; color: var(--ink); }
.editorial-quote cite { display: block; margin-top: var(--s5); font-size: var(--fs-sm); color: var(--muted); font-style: normal; }
.service-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s5); margin-top: var(--s5); }
.service-list article { padding: var(--s6); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1); }
.service-list span { font-size: var(--fs-eyebrow); font-weight: 700; color: var(--brand-mid); }
.split-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s6); }
.section-space { block-size: var(--s7); }
.section-space--small { block-size: var(--s6); }
.section-space--large { block-size: var(--s8); }
.section-space hr { border: 0; border-block-start: 1px solid var(--line); width: var(--content); margin-inline: auto; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1023px) {
  .cta__inner { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 1023px) {
  .about-vmv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-vmv__grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 833px) {
  .pm-copy-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .phero h1 { max-width: none; }
  .about-principles .sl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .about-vmv__grid, .about-principles .sl-grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .pm-stat { padding: var(--s5); }
  .jstep, .post, .foundation > div, .tab-stack article, .service-list article { padding: var(--s5); }
  .editorial-quote { padding: var(--s6); }
}
