/* Strategic Labs — V002-M2 Services Index + the five service families.
   One system, five purpose-built compositions. */

/* ================= SERVICES INDEX ================= */

/* practice explorer: persistent selector bound to a detail panel */
.practice-explorer { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 7fr); gap: var(--s6); align-items: start; }
.practice-explorer__rail { display: grid; gap: var(--s2); }
.practice-explorer__tab {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: center; text-align: start;
  min-height: 64px; padding: var(--s4) var(--s5); cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink);
  box-shadow: var(--e1);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.practice-explorer__tab:hover { transform: translateX(-3px); border-color: var(--mint); box-shadow: var(--e2); }
.practice-explorer__num { color: var(--brand-mid); font-size: .78rem; font-weight: 700; }
.practice-explorer__name { font-weight: 600; font-size: .98rem; line-height: 1.5; }
.practice-explorer__tab.is-active { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-dark); box-shadow: var(--e2); }
.practice-explorer__tab.is-active .practice-explorer__num { color: var(--brand); }

.practice-explorer__panel {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: start;
  min-block-size: 100%; padding: clamp(1.75rem, 3vw, 3rem);
  background: var(--mint-wash); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: clip;
}
.practice-explorer__panel-body { min-width: 0; }
.practice-explorer__panel-body h3 { font-size: var(--fs-h3); margin-bottom: var(--s4); }
.practice-explorer__panel-body p { color: var(--ink-soft); max-width: 52ch; margin-bottom: var(--s5); }
.practice-explorer__panel-mark {
  display: grid; place-items: center; inline-size: clamp(64px, 8vw, 96px); aspect-ratio: 1; flex: none;
  border-radius: 50%; background: var(--white); color: var(--brand-mid); box-shadow: var(--e1);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 700;
}

/* practice detail map — always exactly five practices, so the row is composed
   explicitly (5 / 3 / 2 / 1) rather than left to auto-fit, which orphaned the
   fifth card on a second row at desktop. */
.services-map__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 1199px) { .services-map__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
@media (max-width: 833px)  { .services-map__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .services-map__grid { grid-template-columns: 1fr; } }
/* the orphaned tail item spans the remaining columns so no gap is ever left */
@media (min-width: 834px) and (max-width: 1199px) {
  .services-map__grid > *:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .services-map__grid > *:last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 600px) and (max-width: 833px) {
  .services-map__grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.services-map__card { display: flex; flex-direction: column; gap: var(--s3); }
.services-map__card .eyebrow { margin-bottom: 0; }
.services-map__card h3 { margin: 0; font-size: 1.08rem; }
.services-map__card p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 0; }
.services-map__card .sl-link { margin-block-start: auto; padding-block-start: var(--s4); }
.services-map .m1-authority-copy { margin-top: var(--s6); }

/* ================= LOCAL NAV (family pages) ================= */
.m2-local-nav {
  position: sticky; inset-block-start: var(--header-h); z-index: var(--z-local);
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line); overflow: auto;
}
.m2-local-nav > div { width: var(--content); margin-inline: auto; display: flex; gap: var(--s2); min-width: max-content; padding-block: var(--s3); }
.m2-local-nav button {
  border: 1px solid transparent; background: transparent; cursor: pointer; white-space: nowrap;
  min-height: 40px; padding: .5rem 1rem; border-radius: var(--r-pill);
  color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 500;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.m2-local-nav button:hover, .m2-local-nav button:focus-visible { background: var(--mint-wash); color: var(--brand-deep); border-color: var(--mint); }

/* ================= CORPORATE TRANSFORMATION ================= */
.m2-corp-spine { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s5); }
.m2-corp-spine article { display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start; }
.m2-corp-spine h3 { margin-bottom: var(--s2); font-size: 1.02rem; }
.m2-corp-spine p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.m2-corp-outcomes { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s4); }
.m2-corp-outcomes li {
  padding: var(--s4) var(--s5); background: rgba(255,255,255,.05); border: 1px solid var(--line-dark);
  border-radius: var(--r-card); color: var(--on-dark-soft); font-size: var(--fs-sm); line-height: 1.7;
  border-inline-start: 2px solid var(--brand);
}

/* ================= STRATEGIC PLANNING — stage timeline ================= */
.m2-stage-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--s5); position: relative; }
.m2-stage-line li {
  position: relative; padding: var(--s6) var(--s5) var(--s5);
  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);
}
.m2-stage-line li::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--s5); block-size: 3px;
  border-radius: 0 0 3px 3px; background: var(--brand);
}
.m2-stage-line li:hover { transform: translateY(-3px); box-shadow: var(--e3); }
.m2-stage-line span { display: block; margin-bottom: var(--s3); color: var(--brand-mid); font-size: .78rem; font-weight: 700; }
.m2-stage-line strong { font-size: 1rem; line-height: 1.55; }

/* ================= BUSINESS MODEL — relational axis explorer ================= */
.m2-axis-explorer { display: grid; grid-template-columns: minmax(260px, 5fr) minmax(0, 6fr); gap: var(--s6); align-items: stretch; }
.m2-axis-rail { display: grid; gap: var(--s2); }
.m2-axis-rail button {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: center; text-align: start;
  min-height: 68px; padding: var(--s4) var(--s5); cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink);
  font-size: .98rem; font-weight: 600; box-shadow: var(--e1);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.m2-axis-rail button span { color: var(--brand-mid); font-size: .76rem; font-family: Arial, sans-serif; }
.m2-axis-rail button:hover { transform: translateX(-3px); border-color: var(--mint); }
.m2-axis-rail button.is-active { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-dark); }
.m2-axis-rail button.is-active span { color: var(--brand); }
.m2-axis-focus {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s3);
  padding: clamp(1.75rem, 3vw, 3rem); background: var(--ink-800); color: var(--on-dark);
  border-radius: var(--r-lg); overflow: clip; isolation: isolate; min-block-size: 260px;
}
.m2-axis-focus::before {
  content: ""; position: absolute; inset: -30%; z-index: -2; pointer-events: none;
  background: radial-gradient(50% 50% at 75% 20%, rgba(68,188,167,.26), transparent 65%), radial-gradient(45% 45% at 15% 85%, rgba(21,112,94,.32), transparent 68%);
  animation: sl-drift var(--t-drift) ease-in-out infinite alternate;
}
.m2-axis-focus span { color: var(--brand); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .06em; }
.m2-axis-focus strong { font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.3; color: var(--on-dark); }

/* ================= HUMAN RESOURCES ================= */
.m2-hr-layer-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: var(--s5); }
.m2-hr-level { display: inline-block; margin-bottom: var(--s4); padding: .3rem .8rem; background: var(--mint-wash); color: var(--brand-mid); border-radius: var(--r-pill); font-size: .8rem; font-weight: 700; }
.m2-hr-layer-stack h3 { margin-bottom: var(--s3); font-size: 1.05rem; }
.m2-hr-layer-stack p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.m2-hr-diagnostic { display: grid; grid-template-columns: minmax(0, 6fr) minmax(280px, 5fr); gap: var(--s6); align-items: start; }
.m2-hr-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--s4); }
.m2-hr-categories span {
  display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s5);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1);
  font-size: var(--fs-sm); line-height: 1.65;
}
.m2-hr-categories b { color: var(--brand-mid); font-size: .76rem; flex: none; }
.m2-hr-questions { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1); padding: var(--s5); }
.m2-hr-questions summary { cursor: pointer; font-weight: 600; color: var(--brand-deep); min-height: 44px; display: flex; align-items: center; gap: .5rem; list-style: none; }
.m2-hr-questions summary::-webkit-details-marker { display: none; }
.m2-hr-questions 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; }
.m2-hr-questions[open] summary::before { content: "−"; background: var(--brand); color: var(--ink-900); }
.m2-hr-questions ul { margin: var(--s4) 0 0; padding-inline-start: var(--s5); }
.m2-hr-questions li { margin-block: .5rem; color: var(--ink-soft); font-size: var(--fs-sm); }
.m2-nine-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s5); }
.m2-nine-services > div { display: grid; gap: var(--s3); align-content: start; }
.m2-nine-services strong { font-size: .98rem; line-height: 1.55; }
.m2-reward-flow { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s4); }
.m2-reward-flow li { padding: var(--s4) var(--s5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1); font-size: var(--fs-sm); }

/* ================= STARTUP ESTABLISHMENT — stage sequence ================= */
.m2-startup-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s5); }
.m2-startup-stages li { display: flex; flex-direction: column; }
.m2-startup-stages i { display: block; inline-size: 34px; block-size: 3px; border-radius: 3px; background: var(--brand); margin-block: var(--s4) var(--s4); }
.m2-startup-stages h3 { margin-bottom: var(--s3); font-size: 1.02rem; }
.m2-startup-stages p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.m2-startup-arc { display: none; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1023px) {
  .practice-explorer, .m2-axis-explorer { grid-template-columns: 1fr; }
  .practice-explorer__rail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .practice-explorer__tab { min-height: 56px; }
  .practice-explorer__tab:hover { transform: none; }
  .m2-axis-rail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
  .m2-axis-rail button:hover { transform: none; }
  .m2-hr-diagnostic { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .practice-explorer__rail, .m2-axis-rail { grid-template-columns: 1fr; }
  .practice-explorer__panel { grid-template-columns: 1fr; }
  .practice-explorer__panel-mark { display: none; }
  .m2-axis-focus { min-block-size: 180px; }
  .m2-local-nav > div { padding-inline: 18px; }
}