/*
 * AH Model Steps. The section head and the navy background come from the container.
 * Without JS every step and plate is lit and the last one is current. model-steps.js adds:
 *   .is-live    steps are clickable (also with reduced motion)
 *   .is-js      unlit steps dim and unlit plates float as dashed outlines
 *   .is-pinned  desktop: a spacer of --ah-steps-dist grows the track and the block sticks at --ah-steps-top
 * The parent containers must not clip overflow (overflow: hidden breaks position: sticky).
 */
.ah-steps {
	--ah-st-line: var(--ah-line);
	--ah-st-muted: var(--ah-muted);
	--ah-st-num: var(--ah-ink-gold);
	--ah-st-numline: rgba(122, 95, 49, .5);
	--ah-st-ghost: rgba(122, 95, 49, .55);
	--ah-st-ghost-op: .3;
	--ah-steps-cur: var(--ah-gold);
	color: var(--ah-ink);
	font-family: var(--ah-f-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}
.ah-steps.ah-on-dark {
	--ah-st-line: var(--ah-line-navy);
	--ah-st-muted: var(--ah-on-navy-muted);
	--ah-st-num: var(--ah-gold-hi);
	--ah-st-numline: rgba(232, 201, 136, .5);
	--ah-st-ghost: rgba(232, 201, 136, .45);
	--ah-st-ghost-op: .22;
	color: var(--ah-on-navy);
}

.ah-steps .ah-steps__wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px 56px;
	align-items: center;
}

/* ---------- the list ---------- */
.ah-steps .ah-steps__list.ah-steps__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ah-steps .ah-steps__step {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--ah-st-line);
	transition: opacity .45s var(--ah-ease);
}
.ah-steps .ah-steps__btn.ah-steps__btn {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 2px 14px;
	align-items: start;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 11px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1.75;
	letter-spacing: 0;
	text-align: start;
	text-transform: none;
	white-space: normal;
	cursor: default;
	transition: none;
}
.ah-steps .ah-steps__btn.ah-steps__btn:hover,
.ah-steps .ah-steps__btn.ah-steps__btn:focus { background: none; color: inherit; box-shadow: none; }
.ah-steps .ah-steps__btn.ah-steps__btn:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 2px; border-radius: 10px; }
.ah-steps .ah-steps__n {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-block-start: 2px;
	border-radius: 50%;
	border: 1px solid var(--ah-st-numline);
	font-family: var(--ah-f-mono);
	font-size: .82rem;
	line-height: 1;
	color: var(--ah-st-num);
	transition: background-color .4s, border-color .4s, color .4s, transform .5s var(--ah-spring);
}
.ah-steps .ah-steps__step.is-cur .ah-steps__n { background: var(--ah-steps-cur); border-color: var(--ah-steps-cur); color: var(--ah-deep); }
.ah-steps .ah-steps__title {
	display: block;
	font-family: var(--ah-f-body);
	font-weight: 700;
	font-size: 1.06rem;
	line-height: 1.75;
	color: inherit;
	transition: color .3s;
}
.ah-steps .ah-steps__en {
	margin-inline-start: 10px;
	font-family: var(--ah-f-mono);
	font-weight: 400;
	font-size: .64rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--ah-st-muted);
}
.ah-steps .ah-steps__text { font-size: .92rem; line-height: 1.75; color: var(--ah-st-muted); }

/* clickable once the script runs (.is-live); unlit steps dim only in the animated state (.is-js) */
.ah-steps.is-js .ah-steps__step { opacity: .34; }
.ah-steps.is-js .ah-steps__step.is-on { opacity: 1; }
.ah-steps.is-js .ah-steps__step:not(.is-on):hover { opacity: .66; }
.ah-steps.is-live .ah-steps__btn.ah-steps__btn { cursor: pointer; }
.ah-steps.is-live .ah-steps__btn:hover .ah-steps__title { color: var(--ah-st-num); }
.ah-steps.is-live .ah-steps__step:not(.is-cur) .ah-steps__btn:hover .ah-steps__n { border-color: var(--ah-st-num); transform: scale(1.08); }

/* ---------- the stack ---------- */
.ah-steps .ah-steps__vis { position: relative; min-width: 0; }
.ah-steps .ah-steps__fig { position: relative; width: 100%; margin-inline: auto; }
.ah-steps .ah-steps__svg { display: block; width: 100%; max-width: none; height: auto; overflow: visible; direction: ltr; }
.ah-steps .ah-steps__plate { transition: opacity .5s var(--ah-ease), transform .7s var(--ah-spring); }
.ah-steps .ah-steps__plate polygon { stroke-width: 1; transition: fill .4s, fill-opacity .4s, stroke .4s; }
.ah-steps .ah-steps__pt { fill: var(--ah-navy-2); stroke: rgba(232, 201, 136, .55); }
.ah-steps .ah-steps__pl { fill: #0C1634; stroke: rgba(232, 201, 136, .35); }
.ah-steps .ah-steps__pr { fill: #13204A; stroke: rgba(232, 201, 136, .35); }
.ah-steps .ah-steps__plate text {
	font-family: var(--ah-f-mono);
	font-size: 13px;
	fill: var(--ah-gold-hi);
	text-anchor: middle;
	transition: opacity .4s, fill .4s;
}
.ah-steps .ah-steps__plate.is-cur .ah-steps__pt { fill: var(--ah-steps-cur); }
.ah-steps .ah-steps__plate.is-cur text { fill: var(--ah-deep); }
.ah-steps.is-js .ah-steps__plate { opacity: var(--ah-st-ghost-op); transform: translateY(-16px); }
.ah-steps.is-js .ah-steps__plate.is-on { opacity: 1; transform: none; }
.ah-steps.is-js .ah-steps__plate:not(.is-on) polygon { fill-opacity: 0; stroke: var(--ah-st-ghost); stroke-dasharray: 4 5; }
.ah-steps.is-js .ah-steps__plate:not(.is-on) text { opacity: 0; }

/* hand-written note with an arrow to its layer (drawn for LTR, mirrored on RTL pages) */
.ah-steps .ah-steps__note {
	position: absolute;
	z-index: 2;
	top: -5%;
	inset-inline-start: -13%;
	max-width: 190px;
	font-size: 1.12rem;
	line-height: 1.45;
	rotate: calc(var(--ah-dir) * 5deg);
	pointer-events: none;
}
[dir="rtl"] .ah-steps .ah-steps__arrow { transform: translateX(420px) scaleX(-1); }
.ah-steps .ah-steps__arrow .ah-scrib { stroke-width: 2; }

/* readout: all readouts share one grid cell (height of the longest), only the current one shows */
.ah-steps .ah-steps__now { display: grid; margin-block-start: 8px; text-align: center; }
.ah-steps .ah-steps__ro {
	grid-area: 1 / 1;
	display: grid;
	gap: 4px;
	align-content: start;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s var(--ah-ease), visibility 0s linear .3s;
}
.ah-steps .ah-steps__ro.is-cur { visibility: visible; opacity: 1; transition: opacity .45s var(--ah-ease); }
.ah-steps .ah-steps__nowt {
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	line-height: 1.35;
	color: inherit;
}
.ah-steps .ah-steps__nowd {
	max-width: 46ch;
	margin-inline: auto;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ah-st-muted);
	text-wrap: balance;
}

/* ---------- desktop pin (added by the script, never without it) ---------- */
/* the spacer is content (not padding), so the sticky block can travel through it */
.ah-steps.is-pinned .ah-steps__track::after { content: ""; display: block; height: var(--ah-steps-dist, 980px); }
.ah-steps.is-pinned .ah-steps__pin { position: sticky; top: var(--ah-steps-top, 100px); }
.ah-steps.is-quiet *,
.ah-steps.is-quiet *::before,
.ah-steps.is-quiet *::after { transition: none !important; animation: none !important; }

/* ---------- how we start ---------- */
.ah-steps .ah-steps__start.ah-steps__start {
	display: grid;
	grid-template-columns: repeat(var(--ah-steps-sn, 3), minmax(0, 1fr));
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ah-st-line);
}
.ah-steps .ah-steps__sitem { display: grid; gap: 6px; align-content: start; margin: 0; padding: 22px 22px 4px; }
.ah-steps .ah-steps__sitem + .ah-steps__sitem { border-inline-start: 1px solid var(--ah-st-line); }
.ah-steps .ah-steps__sno { font-family: var(--ah-f-mono); font-size: .74rem; letter-spacing: .16em; line-height: 1.6; color: var(--ah-st-num); }
.ah-steps .ah-steps__stitle { font-family: var(--ah-f-display); font-weight: 700; font-size: 1.2rem; line-height: 1.5; color: inherit; }
.ah-steps .ah-steps__stext { font-size: .93rem; line-height: 1.7; color: var(--ah-st-muted); }

@media (prefers-reduced-motion: no-preference) {
	.ah-steps.is-js .ah-steps__ro.is-cur .ah-steps__nowt { animation: ah-fade-up .45s var(--ah-ease) backwards; }
	.ah-steps.is-js .ah-steps__ro.is-cur .ah-steps__nowd { animation: ah-fade-up .45s var(--ah-ease) .06s backwards; }
}
@media (prefers-reduced-motion: reduce) {
	.ah-steps .ah-steps__step,
	.ah-steps .ah-steps__n,
	.ah-steps .ah-steps__plate,
	.ah-steps .ah-steps__plate polygon,
	.ah-steps .ah-steps__plate text,
	.ah-steps .ah-steps__ro { transition: none; }
}

/* tablet and phone: one column, stack above the list, no note */
@media (max-width: 1024px) {
	.ah-steps .ah-steps__wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.ah-steps .ah-steps__vis { order: -1; justify-self: center; width: 100%; max-width: 420px; }
	.ah-steps .ah-steps__note,
	.ah-steps .ah-steps__arrow { display: none; }
	.ah-steps .ah-steps__start.ah-steps__start { grid-template-columns: minmax(0, 1fr); margin-block-start: 48px; }
	.ah-steps .ah-steps__sitem { padding: 20px 4px 8px; }
	.ah-steps .ah-steps__sitem + .ah-steps__sitem { border-inline-start: 0; border-top: 1px solid var(--ah-st-line); }
}
@media (max-width: 767px) {
	.ah-steps .ah-steps__vis { max-width: 300px; }
	.ah-steps .ah-steps__btn.ah-steps__btn { padding-block: 12px; }
}