.why { position: relative; padding-block: clamp(4.5rem, 7.5vw, 9rem) clamp(4rem, 6vw, 7rem); overflow-x: clip; }
.why__anchor { position: absolute; top: 0; left: 0; }
.why__inner { margin-inline: var(--gutter); }

.why__opening { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 1.5rem 4vw; padding-bottom: clamp(2.5rem, 4.5vw, 5rem); }
.why__eyebrow { grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; color: var(--on-dark-muted); font-size: .72rem; letter-spacing: .11em; text-transform: uppercase; }
.why__eyebrow::before { content: ''; width: 1.6rem; height: 1px; background: var(--gold-lit); }
.why__heading { font-size: clamp(3.4rem, 7.2vw, 8.6rem); font-weight: 600; line-height: .98; letter-spacing: -.06em; }
.why__heading > span:first-child { display: block; font-size: .42em; font-weight: 400; line-height: 1.3; letter-spacing: -.04em; color: var(--on-dark-body); margin-bottom: .12em; }
.why__question { color: var(--gold-lit); font-weight: 400; margin-left: .03em; }
.why__intro { max-width: 26rem; padding-bottom: .6rem; color: var(--on-dark-ink); font-size: clamp(1rem, 1.35vw, 1.4rem); line-height: 1.5; letter-spacing: -.015em; text-wrap: pretty; }

/* ------------------------------------------------------------ the stage */
.why__stage { display: grid; grid-template-columns: minmax(0, 7.2fr) minmax(0, 4.8fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; }
.why__plate { margin: 0 0 0 calc(-1 * var(--gutter)); min-width: 0; }
.why__frame { position: relative; aspect-ratio: 1586 / 992; overflow: hidden; background: var(--on-dark-line); }
.why__frame picture, .why__frame img { display: block; width: 100%; height: 100%; }
.why__frame img { object-fit: cover; }
.why__caption { margin-top: .9rem; padding-left: var(--gutter); color: var(--on-dark-muted); font-size: .7rem; letter-spacing: .02em; }

.why__points { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.why__point { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: clamp(2rem, 2.6vw, 2.6rem); aspect-ratio: 1; border: 1px solid var(--gold-lit); border-radius: 50%; background: rgb(var(--surface-dark-rgb) / .86); color: var(--on-dark-ink); font-size: clamp(.62rem, .72vw, .74rem); font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 .4rem rgb(var(--surface-dark-rgb) / .16); transform: translate(-50%, -50%); transition: transform 320ms var(--motion), background-color 220ms ease, color 220ms ease, opacity 220ms ease; }

.why__principles { border-top: 1px solid var(--line); }
.why__principle { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: .4rem 1rem; padding-block: clamp(1.05rem, 1.45vw, 1.45rem); border-bottom: 1px solid var(--line); }
.why__principle::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold-lit); transform: scaleX(0); transform-origin: left center; transition: transform 450ms var(--ease-editorial); }
.why__no { padding-top: .3rem; color: var(--gold-lit); font-size: .74rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.why__title { font-size: clamp(1.1rem, 1.45vw, 1.55rem); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
.why__copy { margin-top: .4rem; color: var(--on-dark-body); font-size: clamp(.8rem, .86vw, .9rem); line-height: 1.7; max-width: 30rem; }
.why__where { padding-top: .45rem; color: var(--on-dark-muted); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* Point at a principle → its mark lifts, the rest step back (never hidden). */
@media (hover: hover) {
  .why__principle:hover::after { transform: scaleX(1); }
  .why__stage:has(.why__principle:hover) .why__point { opacity: .4; }
  .why__stage:has(.why__principle[data-point="1"]:hover) .why__point[data-point="1"],
  .why__stage:has(.why__principle[data-point="2"]:hover) .why__point[data-point="2"],
  .why__stage:has(.why__principle[data-point="3"]:hover) .why__point[data-point="3"],
  .why__stage:has(.why__principle[data-point="4"]:hover) .why__point[data-point="4"],
  .why__stage:has(.why__principle[data-point="5"]:hover) .why__point[data-point="5"] { opacity: 1; background: var(--gold-lit); color: var(--on-gold); transform: translate(-50%, -50%) scale(1.18); }
}

/* ------------------------------------------------------- the foundation */
.why__foundation { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); align-items: center; gap: 1.5rem 4vw; margin-top: clamp(3rem, 5vw, 5.5rem); padding-top: clamp(1.8rem, 2.8vw, 3rem); border-top: 1px solid var(--line); }
.why__years { display: flex; align-items: baseline; gap: .8rem; }
.why__years-no { font-size: clamp(4.2rem, 6.2vw, 7.4rem); font-weight: 400; line-height: .9; letter-spacing: -.075em; }
/* The plus reads 'more than': gold, lighter and raised, so the numeral keeps its weight. */
.why__years-plus { display: inline-block; color: var(--gold-lit); font-size: .46em; line-height: 1; letter-spacing: 0; vertical-align: top; margin: .12em .08em 0 0; }
.why__years-unit { color: var(--on-dark-body); font-size: clamp(.85rem, 1vw, 1.05rem); letter-spacing: -.01em; }
.why__foundation-text { color: var(--on-dark-body); font-size: clamp(.84rem, .95vw, .98rem); line-height: 1.75; max-width: 30rem; }
.why__cta { justify-self: end; display: inline-flex; align-items: center; gap: 1.2rem; min-height: 2.75rem; padding-block: .6rem; border-bottom: 1px solid var(--on-dark-line-strong); color: var(--on-dark-ink); font-size: .8rem; }
.why__cta svg { width: 1rem; height: 1rem; fill: none; stroke: var(--gold-lit); stroke-width: 1.4; transition: transform 250ms var(--motion); }
.why__cta:hover { border-color: var(--gold-lit); }
.why__cta:hover svg { transform: translate(2px, -2px); }

@media (max-width: 79.99em) {
  .why__stage { grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr); }
  .why__where { display: none; }
  .why__principle { grid-template-columns: 2.2rem minmax(0, 1fr); }
}
@media (max-width: 63.99em) {
  .why__opening { grid-template-columns: 1fr; }
  .why__stage { display: block; }
  .why__plate { margin-inline: calc(-1 * var(--gutter)); }
  .why__caption { padding-inline: var(--gutter); }
  .why__principles { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; border-top: 0; }
  .why__principle { border-top: 1px solid var(--line); border-bottom: 0; }
  .why__principle:last-child { grid-column: 1 / -1; }
  .why__foundation { grid-template-columns: auto minmax(0, 1fr); }
  .why__cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 47.99em) {
  .why { padding-block: 3.8rem 3.6rem; }
  .why__opening { padding-bottom: 2rem; gap: 1.1rem; }
  .why__heading { font-size: clamp(3rem, 14.2vw, 4.6rem); }
  .why__intro { font-size: 1rem; }
  .why__intro br { display: none; }
  .why__point { width: 1.85rem; font-size: .6rem; box-shadow: 0 0 0 .25rem rgb(var(--surface-dark-rgb) / .16); }
  .why__principles { display: block; margin-top: 1.6rem; }
  .why__principle { grid-template-columns: 2rem minmax(0, 1fr); padding-block: 1rem; }
  .why__principle:last-child { border-bottom: 1px solid var(--line); }
  .why__title { font-size: 1.08rem; }
  .why__copy { font-size: .8rem; }
  .why__foundation { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.4rem; padding-top: 1.6rem; }
  .why__years-no { font-size: 4.2rem; }
}
/* Entry (js/motion.js): the tray settles from a slight zoom while it crosses
   the screen — marks travel with it — and the five marks land in order. */
.why__frame.is-zoom > picture, .why__frame.is-zoom > .why__points { transform: scale(var(--z, 1)); transform-origin: 50% 50%; }
.why__point:nth-child(2) { --i: 1; } .why__point:nth-child(3) { --i: 2; } .why__point:nth-child(4) { --i: 3; } .why__point:nth-child(5) { --i: 4; }
.why__plate.reveal:not(.is-settled) .why__point { transition: transform 700ms var(--motion) calc(var(--i, 0) * 120ms + 450ms), opacity 450ms ease calc(var(--i, 0) * 120ms + 450ms); }
.why__plate.reveal:not(.is-in) .why__point { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
@media (prefers-reduced-motion: reduce) {
  .why__point, .why__principle::after, .why__cta svg { transition: none; }
}