/* About page: night to day. Flat fills only. */

/* ---------- Hero art: a sun about to break the horizon ---------- */
.ab-art { max-width: 30rem; margin-inline: auto; }
.ab-art__stars circle { fill: var(--ivory); fill-opacity: .7; }
.ab-art__gold-star { fill: var(--gold); }
.ab-art__ring { fill: none; stroke: var(--gold); stroke-opacity: .22; stroke-width: 1.2; }
.ab-art__ring--strong { stroke-opacity: .5; }
.ab-art__sun { fill: var(--gold); }
.ab-art__horizon { stroke: var(--ivory); stroke-opacity: .4; stroke-width: 1; }

/* ---------- Before dawn: the problem ---------- */
.ab-statement { font-weight: 400; font-size: var(--step-display); line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; margin-top: 1.75rem; }
.ab-statement .gold { color: var(--gold); }
.ab-why__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; margin-top: clamp(2.5rem, 7vh, 4.5rem); padding-top: 1.5rem; border-top: 1px solid rgb(230 178 60 / 24%); }
.ab-why__foot p { font-family: var(--font-display); font-weight: 400; font-size: var(--step-subhead); line-height: 1.35; max-width: 44ch; }
@media (max-width: 760px) { .ab-why__foot { grid-template-columns: 1fr; } }

/* ---------- First light: what we believe ---------- */
.ab-num { display: block; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--gold); margin-bottom: 1.25rem; font-variant-numeric: tabular-nums; }
.ab-beliefs .panel h3 { font-size: var(--step-h3); line-height: 1.15; }

/* ---------- Dawn: the horizon of milestones ---------- */
.ab-hist__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; margin-bottom: clamp(1.25rem, 3.5vh, 2.25rem); }
.ab-hist__head > div { flex: 1 1 24rem; }
.ab-hist__head h2 { margin-top: 1.1rem; max-width: 16ch; }
.ab-hist__head > p { flex: 0 1 38ch; max-width: 38ch; color: var(--navy-fg-muted); }

.ab-horizon { --hz: .75rem; --gap: clamp(1rem, 2vw, 1.5rem); position: relative; height: clamp(8.5rem, 24vh, 14rem); }
.ab-horizon__sky { position: absolute; inset: 0 0 var(--hz) 0; overflow: hidden; }
.ab-horizon__sun { position: absolute; left: 0; top: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 .55rem rgb(230 178 60 / 18%), 0 0 0 1.2rem rgb(230 178 60 / 8%); will-change: transform; }
/* Without JS (or before the first frame) the sun sits high on the right, the "current" end state. */
.ab-horizon__sun { transform: translate(calc(100cqw - 4rem), 1.75rem); }
.ab-horizon__sky { container-type: inline-size; }
.ab-horizon__line { position: absolute; left: 0; right: 0; bottom: var(--hz); height: 1px; background: rgb(242 239 230 / 28%); }
.ab-horizon__line i { position: absolute; left: 0; right: 0; top: -.5px; height: 2px; background: var(--gold); transform-origin: 0 50%; }
.ab-horizon__stations { position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--hz); height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.ab-station { position: relative; }
.ab-station i { position: absolute; left: 0; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 1.5px solid var(--gold); transition: background-color 400ms, border-color 400ms; }
.ab-station b { position: absolute; left: 0; bottom: 1rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--gold); transition: opacity 400ms, color 400ms; white-space: nowrap; }
.js .ab-station:not(.on) i { background: var(--sky); border-color: rgb(242 239 230 / 55%); }
.js .ab-station:not(.on) b { color: var(--ivory); opacity: .45; }

.ab-stages { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap, clamp(1rem, 2vw, 1.5rem)); }
.ab-stage { transition: opacity 500ms var(--ease-out-quart); }
.js .ab-stage:not(.on) { opacity: .5; }
.ab-stage__year { font-size: var(--step-micro); letter-spacing: .14em; text-transform: uppercase; font-weight: 650; color: var(--gold); }
.ab-stage h3 { margin-top: .5rem; font-size: var(--step-subhead); line-height: 1.25; }
.ab-stage p:last-child { margin-top: .5rem; color: var(--navy-fg-muted); font-size: var(--step-caption); line-height: 1.5; max-width: 34ch; }
.ab-hist__links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
@media (max-width: 860px) {
  .ab-stages { grid-template-columns: 1fr; gap: 1.25rem; }
  .ab-stage p:last-child { max-width: 46ch; }
}

/* ---------- Sunrise: Lux and Lumen ---------- */
/* Small gold-brown text fails contrast on the gold sky, so labels go navy here. */
.on-gold .eyebrow, .on-gold .panel__tag { color: var(--navy); }
.ab-model h2 { margin-top: 1.2rem; max-width: 15ch; }
.ab-model__body { margin-top: 1.4rem; max-width: 46ch; color: var(--navy-700); }
.ab-model__cta { margin-top: 2rem; }
.ab-model__cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.tone-light.ab-model .panel { background: rgb(246 245 241 / 78%); border-color: rgb(9 24 50 / 14%); }
.ab-model .panel h3 { font-size: var(--step-h2); }

/* ---------- Morning: the evidence ---------- */
.ab-ev h2 { margin-top: 1.2rem; max-width: 14ch; }
.ab-ev .card { gap: 0; }
.ab-ev .card > p { color: var(--navy-fg-muted); }
.ab-ev .card > .ab-ev__lead { margin-top: 1.1rem; font-family: var(--font-display); font-size: var(--step-h3); line-height: 1.2; color: var(--ivory); max-width: 26ch; }
.ab-ev .card .btn { margin-top: 1.75rem; align-self: flex-start; }

/* ---------- Day: governance ---------- */
.ab-gov h2 { margin-top: 1.2rem; max-width: 18ch; }
.ab-acct { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(2rem, 5vh, 3rem); border: 1px solid rgb(9 24 50 / 14%); border-radius: var(--radius-card); overflow: hidden; background: rgb(255 255 255 / 50%); }
.ab-acct > div { display: grid; gap: .35rem; align-content: start; padding: clamp(1rem, 2vw, 1.5rem); border-right: 1px solid rgb(9 24 50 / 14%); }
.ab-acct > div:last-child { border-right: 0; }
.ab-acct strong { font-weight: 650; }
.ab-acct span { color: var(--paper-fg-muted); font-size: var(--step-caption); }
.ab-acct a { text-decoration-color: var(--accent-text); text-underline-offset: .2em; }
@media (max-width: 860px) {
  .ab-acct { grid-template-columns: 1fr 1fr; }
  .ab-acct > div { border-bottom: 1px solid rgb(9 24 50 / 14%); }
  .ab-acct > div:nth-child(2n) { border-right: 0; }
  .ab-acct > div:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 480px) {
  .ab-acct { grid-template-columns: 1fr; }
  .ab-acct > div { border-right: 0; border-bottom: 1px solid rgb(9 24 50 / 14%); }
  .ab-acct > div:last-child { border-bottom: 0; }
}
.ab-reg { display: flex; gap: 1.5rem; align-items: center; margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.ab-reg p { max-width: 62ch; color: var(--paper-fg-muted); }
.ab-reg__links { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin-top: 1rem; }
.fnd-badge { flex: none; display: inline-flex; background: var(--paper); border-radius: 50%; box-shadow: 0 0 0 1px rgb(9 24 50 / 14%); }
.fnd-badge img { width: 88px; height: 88px; border-radius: 50%; }
@media (max-width: 520px) { .ab-reg { flex-direction: column; align-items: flex-start; } }