/* Strategic Labs — V002-M5 Wave 1: Home hero = LIVING STRATEGIC FIELD.
   Copy quadrant (start) + the field (end). The field is the flagship moment:
   lattice · decision spine · orthogonal routes · practice nodes · evidence base.
   Signature motion #1: one finite activation on first view. */

.hero5 { position: relative; padding-block: clamp(2.5rem, 1.8rem + 3vw, 5rem) 0; overflow: clip; }
.hero5::after { display: none; }
.hero5__grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(1.5rem, 3vw, 4rem); align-items: center;
  padding-block-end: clamp(3.5rem, 3rem + 3vw, 6.5rem); }
.hero5__copy { max-width: 46ch; }
.hero5__copy .eyebrow { margin-bottom: var(--s5); }
.hero5 h1 { max-width: 13ch; font-size: var(--fs-h1); }
.hero5__lead { margin-block: var(--s5) var(--s6); font-size: var(--fs-lead); line-height: 1.75; color: var(--on-dark-soft); max-width: 44ch; }
.hero5__field { position: relative; min-width: 0; }

/* ---------- the field ---------- */
.sfield { position: relative; inline-size: 100%; aspect-ratio: 1 / 1; max-inline-size: 640px; margin-inline: auto; margin-block-start: 2.6rem; color: var(--mint); }
.sfield__svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.sfield__lattice { color: var(--mint); opacity: .16; }
.sfield__base { stroke: var(--mint); stroke-width: .5; opacity: .55; }
.sfield__spine { fill: none; stroke: var(--brand); stroke-width: .7; }
.sfield__route { fill: none; stroke: var(--mint); stroke-width: .45; opacity: .55; transition: opacity var(--t) var(--ease), stroke var(--t) var(--ease), stroke-width var(--t) var(--ease); }
.sfield__route.is-active { stroke: var(--brand); stroke-width: .9; opacity: 1; }
.sfield__junction { fill: var(--ink-800); stroke: var(--brand); stroke-width: .5; }
.sfield__post { stroke: var(--mint); stroke-width: .5; opacity: .7; }

/* core */
.sfield__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: .3rem; inline-size: clamp(88px, 22%, 132px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ink-800); border: 1px solid var(--line-dark-str); place-content: center;
  box-shadow: 0 0 0 10px rgba(68,188,167,.06), 0 0 0 22px rgba(68,188,167,.03); color: var(--brand); }
.sfield__core .m4-cross { margin: 0; inline-size: 12px; block-size: 12px; }
.sfield__core-name { font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--on-dark); white-space: nowrap; }

/* practice nodes — real links, positioned on the routes' end points */
.sfield__nodes { list-style: none; margin: 0; padding: 0; }
.sfield__nodes > li { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); }
.sfield__node { position: relative; display: grid; grid-template-columns: auto auto; align-items: center; gap: .55rem;
  min-height: 44px; padding: .35rem .6rem; border-radius: var(--tab-sm); color: var(--on-dark); text-decoration: none;
  transition: color var(--t) var(--ease), background var(--t) var(--ease); white-space: nowrap; }
.sfield__dot { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--ink-800); border: 2px solid var(--mint);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.sfield__n { font-size: var(--fs-folio); font-weight: 700; letter-spacing: var(--track-folio); color: var(--brand); }
.sfield__label { grid-column: 1 / -1; font-size: .92rem; font-weight: 600; line-height: 1.35; white-space: normal; min-inline-size: 13ch; max-inline-size: 19ch; }
/* labels sit on the outer side of their node so routes stay clear */
.sfield__nodes > li:nth-child(1) .sfield__node, .sfield__nodes > li:nth-child(2) .sfield__node { text-align: end; justify-items: end; }
.sfield__nodes > li:nth-child(3) .sfield__node, .sfield__nodes > li:nth-child(4) .sfield__node { text-align: start; justify-items: start; }
.sfield__nodes > li:nth-child(5) .sfield__node { text-align: center; justify-items: center; }
/* the spine-top node carries its label ABOVE the dot, outside the routed area */
.sfield__nodes > li:nth-child(5) .sfield__label { grid-row: 1; }
.sfield__nodes > li:nth-child(5) .sfield__dot, .sfield__nodes > li:nth-child(5) .sfield__n { grid-row: 2; }
.sfield__nodes > li:nth-child(5) { transform: translate(-50%, -78%); }
.sfield__node:hover, .sfield__node.is-active { color: var(--mint); }
.sfield__node:hover .sfield__dot, .sfield__node.is-active .sfield__dot { background: var(--brand); border-color: var(--brand); transform: scale(1.3); box-shadow: 0 0 0 6px rgba(68,188,167,.22); }
.sfield__node:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; }

/* evidence anchors on the base rule */
.sfield__evidence.proof4 { position: absolute; left: 0; right: 0; top: 96%; margin: 0; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; transform: translateY(6px); }
.sfield__metric.proof4__item { padding: var(--s3) var(--s2) 0; border: 0 !important; text-align: center; justify-items: center; }
.sfield__metric b { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); color: var(--white); }
.sfield__metric > span { margin-block-start: var(--s1); font-size: .8rem; color: var(--on-dark-soft); }
/* room for the evidence row beneath the square field */
.hero5__field { padding-block-end: clamp(4.5rem, 4rem + 2vw, 6rem); }

/* ---------- signature motion #1: activation, once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sfield__spine, .sfield__route { stroke-dasharray: 200; stroke-dashoffset: 200; }
  .sfield__junction, .sfield__nodes > li, .sfield__evidence, .sfield__post, .sfield__core { opacity: 0; }
  .sfield.is-live .sfield__spine { animation: sfield-draw 560ms var(--ease-out) forwards; }
  .sfield.is-live .sfield__route { animation: sfield-draw 640ms var(--ease-out) forwards; animation-delay: calc(260ms + var(--i) * 90ms); }
  .sfield.is-live .sfield__core { animation: sfield-in 420ms var(--ease-out) forwards; animation-delay: 120ms; }
  .sfield.is-live .sfield__junction { animation: sfield-in 300ms var(--ease-out) forwards; animation-delay: 520ms; }
  .sfield.is-live .sfield__nodes > li { animation: sfield-in 380ms var(--ease-out) forwards; animation-delay: calc(700ms + var(--i) * 90ms); }
  .sfield.is-live .sfield__post { animation: sfield-in 300ms var(--ease-out) forwards; animation-delay: 1050ms; }
  .sfield.is-live .sfield__evidence { animation: sfield-in 420ms var(--ease-out) forwards; animation-delay: 1100ms; }
  @keyframes sfield-draw { to { stroke-dashoffset: 0; } }
  @keyframes sfield-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .sfield.is-live .sfield__nodes > li { animation-name: sfield-node; }
  @keyframes sfield-node { from { opacity: 0; } to { opacity: 1; } }
  .sfield.is-live .sfield__core { animation-name: sfield-core; }
  @keyframes sfield-core { from { opacity: 0; transform: translate(-50%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .sfield__spine, .sfield__route { stroke-dasharray: none; }
  .sfield__junction, .sfield__nodes > li, .sfield__evidence, .sfield__post, .sfield__core { opacity: 1; }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1199px) {
  .hero5__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sfield__label { font-size: .84rem; max-inline-size: 14ch; }
}
@media (max-width: 1023px) {
  /* tablet: copy above, the field full width beneath — the field is the beat */
  .hero5__grid { grid-template-columns: 1fr; row-gap: var(--s6); }
  .hero5__copy { max-width: 58ch; }
  .hero5 h1 { max-width: 18ch; }
  .sfield { max-inline-size: 620px; }
  .sfield__label { font-size: .9rem; max-inline-size: 16ch; }
}
@media (max-width: 599px) {
  .hero5 { padding-block-start: var(--s7); }
  .hero5__grid { row-gap: var(--s5); padding-block-end: var(--s7); }
  .hero5 h1 { max-width: none; }
  .hero5__lead { margin-block: var(--s4) var(--s5); }
  .sfield { max-inline-size: none; aspect-ratio: 1 / 1.08; }
  .sfield__core { inline-size: 76px; }
  .sfield__core-name { font-size: .62rem; }
  .sfield__node { min-height: 44px; padding: .3rem .4rem; gap: .35rem; }
  .sfield__label { font-size: .74rem; max-inline-size: 11ch; line-height: 1.3; }
  .sfield__dot { inline-size: 12px; block-size: 12px; }
  .sfield__metric b { font-size: 1.6rem; }
  .sfield__metric > span { font-size: .7rem; }
  .hero5__field { padding-block-end: 4.25rem; }
}
@media (max-width: 359px) {
  .sfield__label { font-size: .7rem; max-inline-size: 10ch; }
  .sfield__metric b { font-size: 1.4rem; }
}