/* Strategic Labs — V002-M2 Home: a focused client journey.
   Hero → verified credibility → positioning → challenge → practice gateway →
   method → trust → knowledge → conversion. */

/* ---------- executive hero ---------- */
.home-hero {
  position: relative; padding-block: clamp(3.25rem, 2.4rem + 4vw, 6.5rem) clamp(4rem, 3rem + 5vw, 8rem);
}
.home-hero__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  gap: clamp(2rem, 4vw, 5rem); align-items: center;
}
.home-hero__copy { max-width: 42ch; }
.home-hero h1 { max-width: 15ch; }
.home-hero__lead { margin-block: var(--s5) var(--s6); font-size: var(--fs-lead); line-height: 1.8; color: var(--on-dark-soft); max-width: 48ch; }

/* practice index — a real navigation object, not a floating list */
.home-practice-index {
  background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); border-radius: var(--r-lg);
  padding: var(--s5); backdrop-filter: blur(6px);
}
.home-practice-index__label { margin: 0 0 var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-dark); color: var(--brand); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .06em; }
.home-practice-index__item {
  display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: var(--s3); align-items: center;
  padding: .7rem .6rem; margin-inline: -.6rem; border-radius: var(--r-sm); color: var(--on-dark); min-height: 48px;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.home-practice-index__item + .home-practice-index__item { border-block-start: 1px solid var(--line-dark); }
.home-practice-index__item span:first-child { color: var(--brand); font-size: .72rem; }
.home-practice-index__item strong { font-size: .98rem; line-height: 1.45; font-weight: 600; }
.home-practice-index__item span[aria-hidden] { color: var(--on-dark-muted); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.home-practice-index__item:hover, .home-practice-index__item:focus-visible { background: rgba(174,226,209,.10); }
.home-practice-index__item:hover span[aria-hidden] { transform: translateX(-4px); color: var(--brand); }

/* ---------- verified credibility ---------- */
.home-proof { background: var(--paper); }
.home-proof__band { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s5); }
.home-proof__metric {
  position: relative; display: grid; gap: var(--s2); padding: var(--s6) var(--s6) 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);
}
.home-proof__metric::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: var(--s6); inline-size: 38px; block-size: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
.home-proof__metric:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.home-proof__metric b { font-size: var(--fs-stat); line-height: 1; font-weight: 700; color: var(--brand-deep); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.home-proof__metric span { color: var(--ink-soft); font-size: var(--fs-sm); }
.home-proof__note { margin-top: var(--s6); }
.home-proof__note .prose, .home-proof__note p { max-width: none; margin: 0; font-size: var(--fs-sm); line-height: 1.8; }

/* ---------- practice gateway ---------- */
.home-gateway__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--s5); }
.home-gateway__card { display: flex; flex-direction: column; gap: var(--s4); min-block-size: 190px; }
.home-gateway__card h3 { margin: 0; flex: 1; font-size: 1.08rem; line-height: 1.5; }
.home-gateway__inventory { margin-top: var(--s6); }
.home-gateway__chips { list-style: none; margin: 0; padding: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.home-gateway__chips li {
  padding: .45rem .85rem; background: var(--mint-wash); color: var(--brand-deep);
  border-radius: var(--r-pill); font-size: .86rem; line-height: 1.5;
}

/* ---------- deep dive ---------- */
.home-deep__rail { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s4); }
.home-deep__rail 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;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.home-deep__rail li:hover { background: rgba(174,226,209,.09); border-color: var(--line-dark-str); }

/* ---------- method ---------- */
/* five method stages — composed explicitly so the fifth never orphans onto a
   second row (auto-fit gave 4 columns at desktop, leaving a three-cell gap) */
.home-method__flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 1199px) { .home-method__flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } .home-method__flow > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; } .home-method__flow > li:last-child:nth-child(3n+2) { grid-column: span 2; } }
@media (max-width: 833px)  { .home-method__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-method__flow > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 599px)  { .home-method__flow { grid-template-columns: 1fr; } }
.home-method__stage {
  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);
}
.home-method__stage:hover { transform: translateY(-3px); box-shadow: var(--e3); border-color: var(--mint); }
.home-method__num { display: grid; place-items: center; inline-size: 40px; block-size: 40px; margin-bottom: var(--s4); border-radius: 50%; background: var(--mint-wash); color: var(--brand-mid); font-size: .85rem; font-weight: 700; }
.home-method__stage h3 { margin-bottom: var(--s3); font-size: 1.05rem; }
.home-method__stage > p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; margin-bottom: var(--s4); }
.home-method__chips { list-style: none; margin: auto 0 0; padding: var(--s4) 0 0; border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .4rem; }
.home-method__chips li { padding: .3rem .7rem; background: var(--paper-2); border-radius: var(--r-pill); font-size: .8rem; color: var(--ink-soft); }

/* ---------- why us ---------- */
.home-why__traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s5); margin-bottom: var(--s7); }
.home-why__trait { padding-inline-start: var(--s5); border-inline-start: 2px solid var(--brand); }
.home-why__trait h3 { margin-bottom: var(--s3); font-size: 1.05rem; color: var(--brand-deep); }
.home-why__trait p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }
.home-why__reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: var(--s5); }
.home-why__reason h3 { margin-block: var(--s3); font-size: 1.05rem; }
.home-why__reason p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }

/* ---------- team / institutional note ---------- */
.home-team__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.75rem, 3.5vw, 4.5rem); align-items: center; }
.home-team__inner .sl-note p { font-size: var(--fs-sm); line-height: 1.85; }
.home-team__inner .cta__actions { margin-top: var(--s4); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1023px) {
  .home-hero__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .home-hero__copy { max-width: none; }
  .home-hero h1 { max-width: 18ch; }
  .home-practice-index { max-width: 560px; }
}
@media (max-width: 833px) {
  .home-team__inner { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 599px) {
  .home-hero { padding-block: var(--s7) var(--s8); }
  .home-hero h1 { max-width: none; }
  .home-hero__lead { margin-block: var(--s4) var(--s5); }
  .home-practice-index { padding: var(--s4); }
  .home-proof__metric, .home-method__stage { padding: var(--s5); }
  .home-gateway__chips li { font-size: .82rem; }
  .home-method__chips { display: none; }
  .home-why__traits { gap: var(--s4); }

  /* ---- mobile length reduction ----
     Long card groups become swipeable snap rails instead of tall vertical
     stacks. No content is hidden or truncated: every card remains present,
     reachable by swipe and by keyboard (each card is a tab stop, and focusing
     one scrolls it into view). This removes several thousand px of scroll
     from Home without touching a word of copy. */
  .home-gateway__grid,
  .home-deep__rail,
  .home-method__flow,
  .home-why__reasons {
    display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--s4);
    gap: var(--s4); padding-block-end: var(--s4);
    /* bleed to the screen edge so the rail reads as scrollable */
    margin-inline: calc(var(--gutter-side) * -1); padding-inline: var(--gutter-side);
    scrollbar-width: thin;
  }
  .home-gateway__grid > *,
  .home-deep__rail > *,
  .home-method__flow > *,
  .home-why__reasons > * {
    flex: 0 0 78%; scroll-snap-align: start; min-inline-size: 78%;
  }
  .home-deep__rail > li { min-block-size: 0; }
  /* short trait blocks pair up rather than stacking four deep */
  .home-why__traits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .home-why__trait { padding-inline-start: var(--s3); }
  .home-why__trait h3 { font-size: .98rem; }
}