/* BEC Roadmap
   Performance: the line, its fill and the marker are absolutely placed from measurements taken
   only when the size changes. Scrolling changes two transforms; milestones only toggle classes,
   and their reveal animates opacity and transform. */
.bec-rm {
	--rm-gap: 56px;
	--rm-edge: 14px;
	--rm-item-gap: 36px;
	--rm-ycol: fit-content(45%);
	--rm-card-max: 100%;
	--rm-hmin: 220px;
	--rm-haxis: 64px;
	--rm-hdot: start;
	--rm-line: 2px;
	--rm-line-style: solid;
	--rm-line-r: 0;
	--rm-track: rgba(20, 17, 10, .2);
	--rm-fill: #14110A;
	--rm-marker: 26px;
	--rm-marker-icon: 60%;
	--rm-halo: 8px;
	--rm-halo-c: rgba(20, 17, 10, .12);
	--rm-dot: 14px;
	--rm-year-gap: 16px;
	--rm-inner: 12px;
	--rm-icon: 40px;
	--rm-dim: .35;
	--rm-off: 12px;
	--rm-dur: 600ms;
	--rm-ease: cubic-bezier(.22, .8, .2, 1);
	--rm-tick-gap: 22px;
	--rm-tick-n: 5;
	--rm-tick-s: 12px;
	--rm-tick-l: 28px;
	--rm-tick-w: 2px;
	--rm-tick-c: #14110A;
	--rm-tick-k: .5;
	--rm-tick-m: 50%;
	--rm-alen: 36px;
	--rm-aw: 22px;
	--rm-agap: 8px;
	--rm-arrow: #FF662F;
	position: relative;
	color: #14110A;
	text-align: left;
}
.bec-rm, .bec-rm *, .bec-rm *::before, .bec-rm *::after { box-sizing: border-box; }
.bec-rm > script { display: none; }

.bec-rm__rail { position: relative; }
.bec-rm__list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--rm-item-gap); }
.bec-rm__item {
	position: relative;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--rm-year-gap);
	align-items: start;
	--b: 1; --o: 2; --tw: left; --tw-f: flex-start; --yo: left; --sx: 0; --sy: 1;
}
.bec-rm__item::before, .bec-rm__item::marker { content: none; }

/* ---------- line, fill, marker ---------- */
.bec-rm__track { position: absolute; z-index: 0; left: var(--rm-tx, 0); top: var(--rm-ty, 0); pointer-events: none; opacity: 0; }
.bec-rm__fill { position: absolute; display: block; border-radius: var(--rm-line-r); background-color: var(--rm-fill); background-image: linear-gradient(var(--rm-fill-dir, to bottom), var(--rm-fill), var(--rm-fill-2, var(--rm-fill))); will-change: transform; }
.bec-rm:not(.is-l-h) .bec-rm__track { width: 0; height: var(--rm-tl, 0); margin-left: calc(var(--rm-line) / -2); border-left: var(--rm-line) var(--rm-line-style) var(--rm-track); border-radius: var(--rm-line-r); }
.bec-rm:not(.is-l-h) .bec-rm__fill { left: calc(var(--rm-line) * -1); top: 0; width: var(--rm-line); height: 100%; transform-origin: 50% 0; transform: scaleY(0); }
.bec-rm.is-l-h .bec-rm__track { height: 0; width: var(--rm-tl, 0); margin-top: calc(var(--rm-line) / -2); border-top: var(--rm-line) var(--rm-line-style) var(--rm-track); border-radius: var(--rm-line-r); }
.bec-rm.is-l-h .bec-rm__fill { top: calc(var(--rm-line) * -1); left: 0; height: var(--rm-line); width: 100%; transform-origin: 0 50%; transform: scaleX(0); --rm-fill-dir: to right; }

/* ---------- ruler: short and long ticks drawn with two repeating gradients ---------- */
.bec-rm-kind-ruler .bec-rm__track::before {
	content: "";
	position: absolute;
	pointer-events: none;
	--rm-tick-period: calc(var(--rm-tick-gap) * var(--rm-tick-n));
}
.bec-rm-kind-ruler:not(.bec-rm-base-yes) .bec-rm__track { border-color: transparent; }
.bec-rm-kind-ruler .bec-rm.is-l-h .bec-rm__track::before {
	left: calc(var(--rm-tick-w) / -2);
	width: calc(100% + var(--rm-tick-w));
	top: calc(var(--rm-line) / -2 - var(--rm-tick-l) * var(--rm-tick-k));
	height: var(--rm-tick-l);
	background:
		repeating-linear-gradient(to right, var(--rm-tick-c) 0 var(--rm-tick-w), transparent var(--rm-tick-w) var(--rm-tick-period)) 0 0 / 100% 100% no-repeat,
		repeating-linear-gradient(to right, var(--rm-tick-c) 0 var(--rm-tick-w), transparent var(--rm-tick-w) var(--rm-tick-gap)) 0 var(--rm-tick-m) / 100% var(--rm-tick-s) no-repeat;
}
.bec-rm-kind-ruler .bec-rm:not(.is-l-h) .bec-rm__track::before {
	top: calc(var(--rm-tick-w) / -2);
	height: calc(100% + var(--rm-tick-w));
	left: calc(var(--rm-line) / -2 - var(--rm-tick-l) * var(--rm-tick-k));
	width: var(--rm-tick-l);
	background:
		repeating-linear-gradient(to bottom, var(--rm-tick-c) 0 var(--rm-tick-w), transparent var(--rm-tick-w) var(--rm-tick-period)) 0 0 / 100% 100% no-repeat,
		repeating-linear-gradient(to bottom, var(--rm-tick-c) 0 var(--rm-tick-w), transparent var(--rm-tick-w) var(--rm-tick-gap)) var(--rm-tick-m) 0 / var(--rm-tick-s) 100% no-repeat;
}

.bec-rm__marker {
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	width: var(--rm-marker);
	height: var(--rm-marker);
	margin: calc(var(--rm-marker) / -2) 0 0 calc(var(--rm-marker) / -2);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background-color: #14110A;
	color: #FDD03A;
	box-shadow: 0 0 0 var(--rm-halo) var(--rm-halo-c);
	pointer-events: none;
	opacity: 0;
	will-change: transform;
}
.bec-rm__marker.is-image { background-color: transparent; box-shadow: none; }
.bec-rm__marker-in { display: grid; place-items: center; width: var(--rm-marker-icon); height: var(--rm-marker-icon); font-size: calc(var(--rm-marker) * .6); line-height: 1; }
.bec-rm__marker.is-image .bec-rm__marker-in { width: 100%; height: 100%; }
.bec-rm__marker-in svg { width: 100%; height: 100%; fill: currentColor; }
.bec-rm__marker-in img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; display: block; }
.bec-rm.is-ready .bec-rm__track, .bec-rm.is-ready .bec-rm__marker { opacity: 1; }

/* ---------- milestone points ---------- */
.bec-rm__dot {
	position: absolute;
	z-index: 2;
	top: var(--rm-dy, .5em);
	left: var(--rm-x, 50%);
	width: var(--rm-dot);
	height: var(--rm-dot);
	margin: calc(var(--rm-dot) / -2) 0 0 calc(var(--rm-dot) / -2);
	border: 2px solid rgba(20, 17, 10, .35);
	border-radius: 50%;
	background-color: #FBF6EE;
	color: inherit;
	transform: rotate(var(--rm-dot-rot, 0deg));
	transition: background-color .3s ease, border-color .3s ease, transform .3s var(--rm-ease);
}
.bec-rm:not(.has-dots) .bec-rm__dot { visibility: hidden; }
.bec-rm__item.is-on .bec-rm__dot { background-color: #14110A; border-color: #14110A; }
.bec-rm__item.is-current .bec-rm__dot { transform: rotate(var(--rm-dot-rot, 0deg)) scale(var(--rm-dot-cur, 1)); }
.bec-rm-pulse-yes .bec-rm__item.is-current .bec-rm__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: inherit;
	border: 2px solid currentColor;
	opacity: 0;
	animation: bec-rm-pulse 1.8s ease-out infinite;
}
/* ---------- arrow points: beside the line, pointing at it from the content side ---------- */
.bec-rm-dot-arrow .bec-rm__dot {
	width: var(--rm-aw);
	height: var(--rm-alen);
	margin-top: calc(var(--rm-alen) / -2);
	margin-left: calc(var(--rm-aw) / -2);
	border-width: 0 !important;
	border-radius: 0;
	background-color: var(--rm-arrow) !important;
	--rm-ah: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M2 2l10 9.5L22 2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--rm-as: linear-gradient(to right, transparent calc(50% - var(--rm-aw) * .054), #000 0 calc(50% + var(--rm-aw) * .054), transparent 0);
	-webkit-mask: var(--rm-ah) 50% 100% / 100% auto no-repeat, var(--rm-as) 50% 0 / 100% calc(100% - var(--rm-aw) * .08) no-repeat;
	mask: var(--rm-ah) 50% 100% / 100% auto no-repeat, var(--rm-as) 50% 0 / 100% calc(100% - var(--rm-aw) * .08) no-repeat;
	transform: rotate(var(--rm-arot, 0deg)) translateY(calc((var(--rm-alen) / 2 + var(--rm-agap)) * -1));
}
.bec-rm-dot-arrow .bec-rm__item.is-on .bec-rm__dot { background-color: var(--rm-arrow-on, var(--rm-arrow)) !important; }
.bec-rm-dot-arrow .bec-rm__item.is-current .bec-rm__dot { transform: rotate(var(--rm-arot, 0deg)) translateY(calc((var(--rm-alen) / 2 + var(--rm-agap)) * -1)) scale(var(--rm-dot-cur, 1)); }
.bec-rm-dot-arrow .bec-rm__dot::after { display: none; }
/* vertical layouts: the arrow sits on the content side (content on the left: points right) */
.bec-rm-dot-arrow .bec-rm:not(.is-l-h) .bec-rm__item { --rm-arot: calc(var(--sx) * -90deg); }
.bec-rm-dot-arrow .bec-rm.is-l-h .bec-rm__dot { margin: 0; }
.bec-rm-dot-arrow .bec-rm.is-l-h.is-y-below:not(.is-h-alt) .bec-rm__item { --rm-arot: 180deg; }

@keyframes bec-rm-pulse { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.9); opacity: 0; } }

/* ---------- year and card ---------- */
.bec-rm__year { grid-column: var(--yc, var(--b)); grid-row: var(--yr, 1); margin: 0; padding: 0; color: #14110A; text-align: var(--al, left); min-width: 0; overflow-wrap: break-word; transition: color .3s ease; }
.bec-rm__card {
	position: relative;
	grid-column: var(--b);
	grid-row: var(--cr, 2);
	justify-self: var(--al, left);
	width: 100%;
	max-width: var(--rm-card-max);
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: var(--al-f, flex-start);
	gap: var(--rm-inner);
	text-align: var(--al, left);
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	color: inherit;
	border-radius: 24px;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.bec-rm.has-card .bec-rm__card { background-color: #FBF6EE; padding: 28px; }
.bec-rm__item.no-year .bec-rm__card { grid-row: 1; }
.bec-rm__card > * { max-width: 100%; }

.bec-rm__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--rm-icon); height: var(--rm-icon); font-size: var(--rm-icon); line-height: 1; color: inherit; flex: none; }
.bec-rm__icon svg { width: 100%; height: 100%; fill: currentColor; }
.bec-rm__icon img { width: 100%; height: 100%; object-fit: contain; display: block; transition: filter .3s ease; }
.bec-rm__badge { display: inline-block; padding: 4px 12px; border: 1.5px solid currentColor; border-radius: 99px; font-size: 12px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; transition: background-color .3s ease, color .3s ease; }
.bec-rm__title { margin: 0; padding: 0; color: inherit; font-weight: 400; text-align: inherit; transition: color .3s ease; }
.bec-rm__text { color: #4A4538; text-align: inherit; transition: color .3s ease; }
.bec-rm__text p { margin: 0 0 var(--rm-par, 12px); text-align: inherit; color: inherit; font: inherit; }
.bec-rm__text ul, .bec-rm__text ol { margin: 0 0 var(--rm-par, 12px); padding-left: 1.2em; text-align: left; }
.bec-rm__text > :last-child { margin-bottom: 0; }

/* link: colours from variables, so the theme's a / a:hover colours can't override them */
.bec-rm a.bec-rm__link { display: inline-flex; align-items: center; gap: 8px; color: var(--rm-link, inherit); text-decoration: none; }
.bec-rm a.bec-rm__link:hover, .bec-rm a.bec-rm__link:focus { color: var(--rm-link-h, var(--rm-link, inherit)); text-decoration: var(--rm-link-ul, none); }
.bec-rm__link-icon { display: inline-flex; transition: transform .25s var(--rm-ease); }
.bec-rm__link-icon svg { width: 1em; height: 1em; fill: currentColor; }
.bec-rm a.bec-rm__link:hover .bec-rm__link-icon { transform: translateX(4px); }
.bec-rm a.bec-rm__link.is-stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bec-rm a.bec-rm__link.is-stretched:focus-visible { outline: none; }
.bec-rm a.bec-rm__link.is-stretched:focus-visible::after { outline: 3px solid #FF662F; outline-offset: 3px; }
.bec-rm__text a { position: relative; z-index: 2; }
.bec-rm a.bec-rm__link:focus-visible { outline: 3px solid #FF662F; outline-offset: 3px; }
.bec-rm__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- alignment ---------- */
.bec-rm.is-a-start .bec-rm__item { --al: left; --al-f: flex-start; }
.bec-rm.is-a-center .bec-rm__item { --al: center; --al-f: center; }
.bec-rm.is-a-end .bec-rm__item { --al: right; --al-f: flex-end; }
.bec-rm.is-a-line .bec-rm__item { --al: var(--tw); --al-f: var(--tw-f); }
.bec-rm.is-y-above { --yr: 1; --cr: 2; }
.bec-rm.is-y-below { --yr: 2; --cr: 1; }
.bec-rm.is-y-opposite { --yr: 1; --cr: 1; }
.bec-rm.is-y-opposite .bec-rm__year { grid-column: var(--o); text-align: var(--yo); }

/* ---------- zigzag ---------- */
.bec-rm.is-l-alt .bec-rm__item, .bec-rm.is-l-alt-r .bec-rm__item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--rm-gap) * 2); --rm-x: 50%; }
.bec-rm.is-l-alt .bec-rm__item.is-odd, .bec-rm.is-l-alt-r .bec-rm__item.is-even { --b: 1; --o: 2; --tw: right; --tw-f: flex-end; --yo: left; --sx: 1; }
.bec-rm.is-l-alt .bec-rm__item.is-even, .bec-rm.is-l-alt-r .bec-rm__item.is-odd { --b: 2; --o: 1; --tw: left; --tw-f: flex-start; --yo: right; --sx: -1; }

/* ---------- line on the left / right ---------- */
.bec-rm.is-l-left .bec-rm__item { grid-template-columns: 0 minmax(0, 1fr); column-gap: calc(var(--rm-edge) + var(--rm-gap)); --rm-x: var(--rm-edge); --b: 2; --o: 1; --tw: left; --tw-f: flex-start; --yo: right; --sx: -1; }
/* year on the other side: one shared year column (subgrid), sized by the widest year unless a width is set */
.bec-rm.is-l-left.is-y-opposite .bec-rm__list { grid-template-columns: var(--rm-ycol) minmax(0, 1fr); column-gap: calc(var(--rm-gap) * 2); }
.bec-rm.is-l-left.is-y-opposite .bec-rm__item { grid-column: 1 / -1; grid-template-columns: subgrid; --rm-x: var(--rm-xj, calc(var(--rm-ycol) + var(--rm-gap))); }
.bec-rm.is-l-right .bec-rm__item { grid-template-columns: minmax(0, 1fr) 0; column-gap: calc(var(--rm-edge) + var(--rm-gap)); --rm-x: calc(100% - var(--rm-edge)); --b: 1; --o: 2; --tw: right; --tw-f: flex-end; --yo: left; --sx: 1; }
.bec-rm.is-l-right.is-y-opposite .bec-rm__list { grid-template-columns: minmax(0, 1fr) var(--rm-ycol); column-gap: calc(var(--rm-gap) * 2); }
.bec-rm.is-l-right.is-y-opposite .bec-rm__item { grid-column: 1 / -1; grid-template-columns: subgrid; --rm-x: var(--rm-xj, calc(100% - var(--rm-ycol) - var(--rm-gap))); }

/* ---------- horizontal ---------- */
.bec-rm.is-l-h.is-overflow .bec-rm__rail { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
.bec-rm.is-l-h.is-overflow .bec-rm__list { padding-bottom: calc(var(--rm-off) + 16px); }
.bec-rm.is-l-h .bec-rm__list { padding-inline-end: calc(var(--rm-marker) / 2 + var(--rm-halo)); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(var(--rm-hmin), 1fr); grid-template-rows: auto var(--rm-haxis) auto auto; column-gap: var(--rm-item-gap); row-gap: 0; }
.bec-rm.is-l-h .bec-rm__item { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; --b: 1; --o: 1; --tw: left; --tw-f: flex-start; --yo: left; --sx: 0; --sy: 1; }
.bec-rm.is-l-h .bec-rm__dot { position: relative; grid-row: 2; grid-column: 1; align-self: center; justify-self: var(--rm-hdot); top: auto; left: auto; margin: 0; }
.bec-rm.is-l-h .bec-rm__year { grid-column: 1; grid-row: 1; align-self: end; text-align: var(--al, left); }
.bec-rm.is-l-h.is-y-below .bec-rm__year { grid-row: 4; align-self: start; margin-top: var(--rm-year-gap); }
.bec-rm.is-l-h .bec-rm__card { grid-column: 1; grid-row: 3; align-self: stretch; }

/* ---------- horizontal, alternating above and below ---------- */
.bec-rm.is-l-h.is-h-alt .bec-rm__list { grid-template-rows: auto auto var(--rm-haxis) auto auto; grid-auto-columns: minmax(calc(var(--rm-hmin) / 2), 1fr); }
.bec-rm.is-l-h.is-h-alt .bec-rm__item { grid-row: 1 / span 5; grid-column: var(--rm-col, auto) / span 2; }
.bec-rm.is-l-h.is-h-alt .bec-rm__dot { grid-row: 3; }
.bec-rm.is-l-h.is-h-alt .bec-rm__item.is-odd .bec-rm__card { grid-row: 1; align-self: end; margin-bottom: var(--rm-year-gap); }
.bec-rm.is-l-h.is-h-alt .bec-rm__item.is-odd .bec-rm__year { grid-row: 2; align-self: end; margin: 0 0 var(--rm-year-gap); }
.bec-rm.is-l-h.is-h-alt .bec-rm__item.is-even .bec-rm__year { grid-row: 4; align-self: start; margin: var(--rm-year-gap) 0 0; }
.bec-rm.is-l-h.is-h-alt .bec-rm__item.is-even .bec-rm__card { grid-row: 5; align-self: start; margin-top: var(--rm-year-gap); }
.bec-rm.is-l-h.is-h-alt .bec-rm__item.is-odd.no-year .bec-rm__card { grid-row: 1 / span 2; }
.bec-rm.is-l-h.is-h-alt .bec-rm__item.is-even.no-year .bec-rm__card { grid-row: 4 / span 2; }
.bec-rm.is-l-h.is-h-alt .bec-rm__item.is-even { --sy: -1; }
.bec-rm-dot-arrow .bec-rm.is-l-h.is-h-alt .bec-rm__item.is-even { --rm-arot: 180deg; }
/* with arrows, the year and text keep clear of the arrow */
.bec-rm-dot-arrow .bec-rm.is-l-h.is-h-alt { --rm-haxis-min: calc((var(--rm-alen) + var(--rm-agap)) * 2 + 8px); }
.bec-rm-dot-arrow .bec-rm.is-l-h.is-h-alt .bec-rm__list { grid-template-rows: auto auto max(var(--rm-haxis), var(--rm-haxis-min)) auto auto; }

/* ---------- reveal ---------- */
.bec-rm.is-ready .bec-rm__year, .bec-rm.is-ready .bec-rm__card { transition: opacity var(--rm-dur) ease, transform var(--rm-dur) var(--rm-ease), background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.bec-rm.is-init *, .bec-rm.is-init *::before, .bec-rm.is-init *::after { transition: none !important; }
.bec-rm-fx-up .bec-rm.is-ready:not(.is-mode-static) .bec-rm__item:not(.is-on) .bec-rm__year,
.bec-rm-fx-up .bec-rm.is-ready:not(.is-mode-static) .bec-rm__item:not(.is-on) .bec-rm__card { opacity: var(--rm-dim); transform: translate3d(0, var(--rm-off), 0); }
.bec-rm-fx-fade .bec-rm.is-ready:not(.is-mode-static) .bec-rm__item:not(.is-on) .bec-rm__year,
.bec-rm-fx-fade .bec-rm.is-ready:not(.is-mode-static) .bec-rm__item:not(.is-on) .bec-rm__card { opacity: var(--rm-dim); }
.bec-rm-fx-side .bec-rm.is-ready:not(.is-mode-static) .bec-rm__item:not(.is-on) .bec-rm__year,
.bec-rm-fx-side .bec-rm.is-ready:not(.is-mode-static) .bec-rm__item:not(.is-on) .bec-rm__card { opacity: var(--rm-dim); transform: translate3d(calc(var(--sx) * var(--rm-off)), 0, 0); }
.bec-rm-fx-side .bec-rm.is-ready.is-y-opposite:not(.is-mode-static) .bec-rm__item:not(.is-on) .bec-rm__year { transform: translate3d(calc(var(--sx) * var(--rm-off) * -1), 0, 0); }
.bec-rm-fx-side .bec-rm.is-ready.is-l-h:not(.is-mode-static) .bec-rm__item:not(.is-on) .bec-rm__card { transform: translate3d(0, calc(var(--sy) * var(--rm-off) * -1), 0); }
.bec-rm-fx-scale .bec-rm.is-ready:not(.is-mode-static) .bec-rm__item:not(.is-on) .bec-rm__year,
.bec-rm-fx-scale .bec-rm.is-ready:not(.is-mode-static) .bec-rm__item:not(.is-on) .bec-rm__card { opacity: var(--rm-dim); transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
	.bec-rm *, .bec-rm *::before, .bec-rm *::after { transition: none !important; animation: none !important; }
}