/* Homepage photography and dark four-stage process roadmap. */
.home-roadmap { isolation: isolate; background: #04121e; border-block: 1px solid var(--line); }
.home-process__background { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.home-process__background img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.home-roadmap::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(2,12,21,.85), rgba(2,12,21,.92)); }
.roadmap__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.roadmap__intro .lede { margin-top: 24px; max-width: 55ch; }
.roadmap__toggle { flex-shrink: 0; min-height: 44px; padding: 10px 16px; border: 1px solid #92a5b2; color: #fff; background: rgba(2,12,21,.6); font-size: .875rem; }
.roadmap__toggle[hidden] { display: none; }
.roadmap__stages { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; margin-top: 64px; }
.roadmap__stage { position: relative; border-top: 2px solid #70818e; padding: 24px 16px 28px; transition: border-color 300ms ease, background-color 300ms ease; }
.roadmap__stage.is-active { border-top-color: #e6eff8; background: rgba(221,232,248,.08); }
.roadmap__stage:not(:last-child)::after { content: "→"; position: absolute; right: -24px; top: 28px; color: #c7d7e4; font-size: 24px; line-height: 1; }
.roadmap__stage h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.05rem + .5vw, 1.65rem); line-height: 1.25; }
.roadmap__stage [data-roadmap-stage] { display: grid; gap: 24px; align-content: start; min-height: 156px; width: 100%; border: 0; background: transparent; color: #fff; text-align: left; padding: 0; font: inherit; }
.roadmap__number { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: #a9bdce; transition: color 300ms ease; }
.roadmap__stage.is-active .roadmap__number { color: #fff; }
.roadmap__stage > p { margin-top: 20px; color: #d7e0e8; font-size: .9375rem; line-height: 1.7; }
.roadmap__meta { margin-top: 28px; display: grid; gap: 18px; border-top: 1px solid #536575; padding-top: 22px; }
.roadmap__meta dt { font-size: .8125rem; color: #a9bdce; margin-bottom: 6px; }
.roadmap__meta dd { color: #e3e9ed; font-size: .875rem; line-height: 1.6; }
.roadmap__stage [data-roadmap-stage]:focus-visible, .roadmap__toggle:focus-visible { outline: 2px solid #dde8f8; outline-offset: 6px; }
@media (max-width: 1100px) {
  .roadmap__stages { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 28px; }
  .roadmap__stage:nth-child(2)::after { display: none; }
  .roadmap__stage [data-roadmap-stage] { min-height: 128px; }
}
@media (max-width: 640px) {
  .roadmap__intro { display: grid; align-items: start; justify-items: start; }
  .roadmap__stages { grid-template-columns: 1fr; margin-top: 44px; gap: 36px; }
  .roadmap__stage [data-roadmap-stage] { min-height: 0; gap: 18px; }
  .roadmap__stage:not(:last-child)::after { content: "↓"; display: block; right: 16px; top: auto; bottom: -30px; }
}
@media (prefers-reduced-motion: reduce) {
  .roadmap__stage, .roadmap__number { transition: none; }
}
.briefing .home-card-photo { position: relative; overflow: hidden; min-width: 0; background: #dae0e2; }
.briefing .home-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.briefing .card--lead .home-card-photo { aspect-ratio: 16 / 10; }
.briefing .card:not(.card--lead) .home-card-photo { min-height: 190px; }
.briefing .card:not(.card--lead) .home-card-photo img { position: absolute; inset: 0; }
.briefing .card { background: #fff; }
.briefing .card:focus-within { outline: 2px solid #21587e; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .briefing .card:hover { background: #f0f3f3; }
}
@media (max-width: 640px) {
  .briefing .card:not(.card--lead) .home-card-photo { aspect-ratio: 16 / 9; min-height: 0; }
}