/* Strategic Labs — V002-M4 Home hero: the signature moment.
   A quadrant composition on the deep-brand surface:
     · headline quadrant (start, 7 cols)
     · practice index as a ruled ledger (end, 4 cols) with the page's ONE hatch
       field behind it — vertical rules, orthogonal to the proof line below
     · proof line along the base: the three approved metrics on one baseline
   Motion: the count-up (existing) and a single settle-in of the composition. */

.hero4 { position: relative; padding-block: clamp(3rem, 2.2rem + 3.6vw, 6rem) 0; }
.hero4::after { display: none; }                       /* no corner stripe motif here — the hatch field IS the motif */
.hero4__grid {
  position: relative; display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 0;
  align-items: start;
}
.hero4__copy { grid-column: 1 / span 7; padding-block-end: clamp(2.5rem, 2rem + 2.4vw, 4.5rem); }
.hero4__copy .eyebrow { margin-bottom: var(--s5); }
.hero4 h1 { max-width: 14ch; font-size: var(--fs-h1); }
.hero4__lead { margin-block: var(--s5) var(--s6); font-size: var(--fs-lead); line-height: 1.75; color: var(--on-dark-soft); max-width: 46ch; }

/* practice index — a ledger, not a glass card */
.hero4__index { position: relative; grid-column: 9 / span 4; align-self: stretch; padding-block-start: .4rem; }
.hero4__field {
  position: absolute; inset-block-start: -1.5rem; inset-inline-end: -14%; inset-block-end: -.5rem; inline-size: 62%;
  z-index: -1; pointer-events: none; color: var(--mint); opacity: .2;
  background: var(--hatch-v);
  border-radius: var(--tab-sm); border-start-start-radius: var(--tab);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.hero4__index-label { display: flex; align-items: center; margin: 0 0 var(--s3); padding-bottom: var(--s3); border-bottom: var(--rule-dark);
  color: var(--brand); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .08em; }
.hero4__ledger { list-style: none; margin: 0; padding: 0; }
.hero4__ledger li + li { border-block-start: var(--rule-dark); }
.hero4__ledger a {
  display: grid; grid-template-columns: 2.4rem auto minmax(0,1fr); align-items: center; gap: var(--s3);
  min-height: 52px; padding: .55rem 0; color: var(--on-dark);
  transition: color var(--t) var(--ease), padding var(--t) var(--ease);
}
.hero4__ledger a > .lat { color: var(--brand); font-size: var(--fs-folio); font-weight: 700; letter-spacing: var(--track-folio); }
.hero4__ledger strong { font-weight: 600; font-size: .98rem; line-height: 1.45; }
.hero4__cue { justify-self: start; color: var(--on-dark-muted); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.hero4__ledger a:hover, .hero4__ledger a:focus-visible { color: var(--mint); }
.hero4__ledger a:hover .hero4__cue { transform: translateX(-4px); color: var(--brand); }

/* proof line — the base of the hero, above the arc */
.hero4__proof { grid-column: 1 / -1; margin-block-start: clamp(1rem, 1vw, 1.5rem); border-block-start: var(--rule-dark);
  padding-block-end: clamp(3.5rem, 3rem + 3vw, 6.5rem); }
.hero4__proof .proof4__item { padding-block-start: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem); }

/* arc reserve — the proof line's padding IS the safe area */
.hero4:has(> .sl-arc-bottom) { padding-block-end: 0; }
.hero4 .sl-arc-bottom { block-size: clamp(48px, 5.5vw, 96px); }

/* settle-in: one finite, reduced-motion-safe entrance for the composition */
@media (prefers-reduced-motion: no-preference) {
  .hero4__copy, .hero4__index, .hero4__proof { animation: hero4-settle 720ms var(--ease-out) both; }
  .hero4__index { animation-delay: 120ms; }
  .hero4__proof { animation-delay: 240ms; }
  @keyframes hero4-settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1199px) {
  .hero4__copy { grid-column: 1 / span 7; }
  .hero4__index { grid-column: 8 / span 5; }
}
@media (max-width: 1023px) {
  .hero4__grid { grid-template-columns: repeat(8, minmax(0,1fr)); }
  .hero4__copy { grid-column: 1 / -1; padding-block-end: var(--s6); }
  .hero4 h1 { max-width: 18ch; }
  .hero4__index { grid-column: 1 / span 6; padding-block: var(--s4) var(--s6); }
  .hero4__field { inset-inline-end: -8%; inline-size: 50%; opacity: .15; }
}
@media (max-width: 599px) {
  .hero4 { padding-block-start: var(--s7); }
  .hero4__grid { grid-template-columns: 1fr; }
  .hero4 h1 { max-width: none; }
  .hero4__lead { margin-block: var(--s4) var(--s5); }
  .hero4__index { grid-column: 1 / -1; padding-block: var(--s3) var(--s5); }
  .hero4__field { display: none; }
  .hero4__ledger a { min-height: 46px; padding: .4rem 0; grid-template-columns: 2rem minmax(0,1fr) auto; }
  .hero4__ledger strong { font-size: .9rem; }
  .hero4__proof { padding-block-end: clamp(2.5rem, 2rem + 2vw, 3.5rem); margin-block-start: 0; }
  .hero4__proof .proof4__item { padding-block-start: var(--s4); }
  .hero4 .sl-arc-bottom { block-size: 40px; }
}