/* Route block: a visual flow of stations on a blue band, connected by arrows; one station can be highlighted. */
.route-block { position: relative; isolation: isolate; padding: 104px 0; overflow: hidden; color: #fff; background: var(--fa-color-primary); }
.route-block::before { position: absolute; z-index: -1; right: 0; bottom: 0; width: min(420px, 70%); height: 340px; content: ""; background: var(--fa-motif-light) no-repeat; background-position: 0 0; background-size: 560px 560px; pointer-events: none; }
.route-block__intro { max-width: 760px; margin-bottom: 56px; }
.route-block__eyebrow { margin: 0 0 16px; color: rgba(255, 255, 255, .75); font-size: 13px; line-height: 1.4; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.route-block__title { margin: 0; color: #fff; font-size: 52px; line-height: 1.05; font-weight: 500; letter-spacing: -.035em; }
.route-block__title em { color: var(--fa-color-primary-light); font-style: normal; }
.route-block__text { margin-top: 22px; color: rgba(255, 255, 255, .85); font-size: 16px; line-height: 1.7; }
.route-block__text > :first-child { margin-top: 0; }
.route-block__text > :last-child { margin-bottom: 0; }
.route-block__list { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 36px; margin: 0; padding: 0; list-style: none; }
.route-block__station { position: relative; padding: 28px 24px 30px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .24); border-radius: 18px; }
/* Arrow in the gap towards the next station. */
.route-block__station:not(:last-child)::after { position: absolute; top: 50%; right: -30px; width: 24px; height: 24px; content: ""; background: rgba(255, 255, 255, .8); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat; transform: translateY(-50%); }
.route-block__icon { position: relative; display: block; width: 52px; height: 52px; margin-bottom: 20px; background: #fff; border-radius: 50%; }
.route-block__icon::after { position: absolute; inset: 13px; content: ""; background: var(--fa-color-primary); -webkit-mask: var(--fa-route-icon) center / contain no-repeat; mask: var(--fa-route-icon) center / contain no-repeat; }
.route-block__label { margin: 0 0 6px; color: rgba(255, 255, 255, .7); font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.route-block__station-title { margin: 0; color: #fff; font-size: 20px; line-height: 1.3; font-weight: 700; }
.route-block__station-text { margin: 10px 0 0; color: rgba(255, 255, 255, .84); font-size: 15px; line-height: 1.65; }
/* Highlighted station: the step where Field Advies takes over. */
.route-block__station--highlight { background: #fff; border-color: #fff; box-shadow: 0 20px 44px rgba(0, 30, 60, .25); }
.route-block__station--highlight .route-block__icon { background: var(--fa-color-primary); }
.route-block__station--highlight .route-block__icon::after { background: #fff; }
.route-block__station--highlight .route-block__label { color: var(--fa-color-primary); }
.route-block__station--highlight .route-block__station-title { color: var(--fa-color-text); }
.route-block__station--highlight .route-block__station-text { color: rgba(0, 0, 0, .72); }
@media (max-width: 1000px) {
	.route-block__list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.route-block__station:not(:last-child)::after { display: none; }
}
@media (max-width: 900px) {
	.route-block { padding: 80px 0; }
	.route-block__title { font-size: 46px; }
}
@media (max-width: 600px) {
	.route-block { padding: 64px 0; }
	.route-block__title { font-size: 38px; }
	.route-block__list { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.route-block__station:not(:last-child)::after { top: auto; right: auto; bottom: -30px; left: 50%; display: block; transform: translateX(-50%) rotate(90deg); }
	.route-block::before { height: 220px; background-size: 330px 330px; opacity: .7; }
}