/*
 * How We Work page (/how-we-work/): one continuous investigation.
 * Builds on awr-homepage.css (.awr-hs tokens, eyebrow, titles, leads, buttons, CTA band).
 *
 * Every chapter sits on one vertical thread (.awr-hww-chapter::before/::after)
 * at the same x position, so the page reads as a single line of reasoning:
 * Uncertainty -> Evidence -> Variant view -> Operating model -> Implementation -> Measurement.
 *
 * Motion is progressive enhancement: start states apply only under html.awr-hww-js
 * (set by awr-how-we-work.js). Without JS or with reduced motion, everything is final.
 */

.awr-hww h1, .awr-hww h2, .awr-hww h3 { hyphens: manual; -webkit-hyphens: manual; }

/* Flow-layout margins off inside our own layouts. */
.awr-hww-split > *, .awr-converge > *, .awr-comb > *, .awr-variant > *, .awr-model > *,
.awr-stack > *, .awr-loopflow > *, .awr-case > *, .awr-case__step > * { margin-block: 0; }

/* ---------- Thread ---------- */

.awr-hs.awr-hww {
	--awr-gutter: clamp(2.5rem, 6vw, 5rem);
	--awr-chapter-pad: clamp(3.5rem, 7vw, 6rem);
	padding-top: 0;
	padding-bottom: 0;
	background: #fff;
}

.awr-hww-chapter {
	--awr-thread: 0;
	position: relative;
	padding: var(--awr-chapter-pad) 0 var(--awr-chapter-pad) var(--awr-gutter);
}
.awr-hww-chapter::before,
.awr-hww-chapter::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 6px;
	width: 1px;
	z-index: 1;
	pointer-events: none;
}
.awr-hww-chapter::before { background: var(--awr-line); }
.awr-hww-chapter::after {
	width: 2px;
	left: 5.5px;
	background: var(--awr-blue);
	transform-origin: center top;
	transform: scaleY(var(--awr-thread));
}
/* The thread starts fragmented in the hero (uncertainty). */
.awr-hww--hero .awr-hww-chapter::before {
	background: repeating-linear-gradient(to bottom, var(--awr-line) 0 6px, transparent 6px 14px);
}

/* Stage marker on the thread */
.awr-hs .awr-hww-stage {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.75rem calc(-1 * var(--awr-gutter));
	padding-left: calc(var(--awr-gutter) - 1.25rem);
	color: var(--awr-slate-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.awr-hs .awr-hww-stage::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	transform: translateY(-50%);
	border: 1px solid var(--awr-slate-muted);
	border-radius: 50%;
	background: #fff;
	transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.awr-hww-stage.is-reached::before,
html:not(.awr-hww-js) .awr-hww-stage::before {
	border-color: var(--awr-blue);
	background: var(--awr-blue);
	box-shadow: 0 0 0 4px rgba(1, 120, 255, 0.14);
}
.awr-hs .awr-hww-stage.is-reached { color: var(--awr-blue-ink); }
.awr-hs .awr-hww-stage--key { color: var(--awr-slate); }
.awr-hs .awr-hww-stage--inline { margin-top: clamp(3rem, 6vw, 4.5rem); }

/* ---------- Shared layout ---------- */

.awr-hww-split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.awr-hww-split__text .awr-hs__lead { margin-top: 1.25rem; }
.awr-hww--accelerate .awr-hww-split { grid-template-columns: minmax(0, 46rem); }
.awr-hww-split__text p:not([class*="awr-"]) { margin-top: 1rem; color: var(--awr-slate); line-height: 1.65; }
.awr-hww-split__aside p:not([class*="awr-"]) { color: var(--awr-slate); font-size: 1.0625rem; line-height: 1.65; }
.awr-hs .awr-hww-num { color: var(--awr-blue-ink); margin-right: 0.15rem; }

/* ---------- 0 Hero: uncertainty ---------- */

.awr-hs.awr-hww.awr-hww--hero {
	position: relative;
	background:
		radial-gradient(circle at 72% 22%, var(--awr-blue) 0 2px, transparent 2.5px),
		radial-gradient(circle at 81% 41%, var(--awr-slate-muted) 0 1.5px, transparent 2px),
		radial-gradient(circle at 64% 57%, var(--awr-slate-muted) 0 1.5px, transparent 2px),
		radial-gradient(circle at 90% 63%, var(--awr-blue) 0 2px, transparent 2.5px),
		radial-gradient(circle at 76% 76%, var(--awr-slate-muted) 0 1.5px, transparent 2px),
		radial-gradient(circle at 88% 18%, var(--awr-slate-muted) 0 1.5px, transparent 2px),
		radial-gradient(circle at 69% 36%, var(--awr-line) 0 3px, transparent 3.5px),
		radial-gradient(circle at 95% 46%, var(--awr-line) 0 3px, transparent 3.5px),
		linear-gradient(28deg, transparent 49.6%, var(--awr-line) 49.6% 50.4%, transparent 50.4%) 70% 28% / 70px 34px no-repeat,
		linear-gradient(-18deg, transparent 49.6%, var(--awr-line) 49.6% 50.4%, transparent 50.4%) 84% 54% / 90px 28px no-repeat,
		linear-gradient(64deg, transparent 49.6%, var(--awr-line) 49.6% 50.4%, transparent 50.4%) 66% 70% / 40px 60px no-repeat,
		linear-gradient(90deg, var(--awr-line) 0 100%) 90% 30% / 46px 1px no-repeat,
		#fff;
}
.awr-hww--hero .awr-hww-chapter { padding-top: clamp(4.5rem, 9vw, 7.5rem); }
.awr-hs .awr-hww-title {
	margin: 0;
	max-width: 19ch;
	color: var(--awr-slate);
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.025em;
	text-wrap: balance;
}
.awr-hs .awr-hww-title__accent { display: block; margin-top: 0.15em; color: var(--awr-blue-ink); }
.awr-hww--hero .awr-hs__lead { margin-top: 1.75rem; max-width: 44rem; }

/* ---------- 1 From assumption to evidence: fragments converge ---------- */

.awr-converge {
	display: grid;
	grid-template-columns: minmax(9rem, 12rem) 2.5rem minmax(0, 1fr);
	align-items: center;
	align-self: center;
}
.awr-hs .awr-converge__inputs {
	grid-column: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.awr-hs .awr-converge__inputs li {
	position: relative;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--awr-line);
	border-radius: 3px;
	background: #fff;
	color: var(--awr-slate);
	font-size: 0.8125rem;
	font-weight: 600;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.9s ease, border-color 0.6s ease;
}
/* connector from each input to the collector */
.awr-hs .awr-converge__inputs li::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	width: 1.25rem;
	height: 1px;
	background: var(--awr-blue);
	transform-origin: left center;
	transition: transform 0.5s ease 0.9s;
}
/* collector bar */
.awr-hs .awr-converge__inputs::after {
	content: "";
	position: absolute;
	top: 1.2rem;
	bottom: 1.2rem;
	right: -1.25rem;
	width: 1px;
	background: var(--awr-blue);
	transform-origin: center center;
	transition: transform 0.5s ease 1.3s;
}
.awr-hs .awr-converge__result {
	grid-column: 3;
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* line from the collector into Evidence */
.awr-hs .awr-converge__result::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	width: 1.25rem;
	height: 1px;
	background: var(--awr-blue);
	transform-origin: left center;
	transition: transform 0.4s ease 1.7s;
}
.awr-hs .awr-converge__result li {
	position: relative;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--awr-blue);
	border-radius: var(--awr-radius);
	background: #fff;
	color: var(--awr-blue-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity 0.5s ease 1.9s, transform 0.5s ease 1.9s;
}
.awr-hs .awr-converge__result li + li {
	border-color: var(--awr-slate);
	background: var(--awr-slate);
	color: #fff;
	transition-delay: 2.3s;
}
.awr-hs .awr-converge__result li + li::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	width: 1.5rem;
	height: 1px;
	background: var(--awr-slate);
}
.awr-hs .awr-converge__result li + li::after {
	content: "";
	position: absolute;
	top: calc(50% - 4px);
	right: calc(100% + 1px);
	border-left: 6px solid var(--awr-slate);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}
/* start state: fragmented, then organized */
.awr-hww-js .awr-converge:not(.is-in) .awr-converge__inputs li { opacity: 0.45; border-color: var(--awr-line-soft); }
.awr-hww-js .awr-converge:not(.is-in) .awr-converge__inputs li:nth-child(1) { transform: translate(18px, -10px) rotate(-2deg); }
.awr-hww-js .awr-converge:not(.is-in) .awr-converge__inputs li:nth-child(2) { transform: translate(-14px, 6px) rotate(1.5deg); }
.awr-hww-js .awr-converge:not(.is-in) .awr-converge__inputs li:nth-child(3) { transform: translate(26px, 4px) rotate(-1deg); }
.awr-hww-js .awr-converge:not(.is-in) .awr-converge__inputs li:nth-child(4) { transform: translate(-8px, -6px) rotate(2deg); }
.awr-hww-js .awr-converge:not(.is-in) .awr-converge__inputs li:nth-child(5) { transform: translate(12px, 10px) rotate(-1.5deg); }
.awr-hww-js .awr-converge:not(.is-in) .awr-converge__inputs li::after,
.awr-hww-js .awr-converge:not(.is-in) .awr-converge__result::before { transform: scaleX(0); }
.awr-hww-js .awr-converge:not(.is-in) .awr-converge__inputs::after { transform: scaleY(0); }
.awr-hww-js .awr-converge:not(.is-in) .awr-converge__result li { opacity: 0; transform: translateX(-8px); }

/* ---------- 2 Assess: inputs compress into the evidence base ---------- */

.awr-hs .awr-hww-question__label {
	margin: 0 0 0.75rem;
	color: var(--awr-slate-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.awr-hs .awr-hww-question {
	margin: 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--awr-blue);
	color: var(--awr-slate);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.awr-comb { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.awr-hs .awr-comb__inputs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.awr-hs .awr-comb__inputs li {
	position: relative;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--awr-line);
	border-radius: 3px;
	color: var(--awr-slate);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
	transition: border-color 0.5s ease;
}
.awr-hs .awr-comb__inputs li::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 1px;
	height: calc(2.25rem + 1px);
	background: var(--awr-blue);
	transform-origin: center top;
	transition: transform 0.6s cubic-bezier(0.3, 0, 0.2, 1);
}
.awr-hs .awr-comb__inputs li:nth-child(2)::after { transition-delay: 0.1s; }
.awr-hs .awr-comb__inputs li:nth-child(3)::after { transition-delay: 0.2s; }
.awr-hs .awr-comb__inputs li:nth-child(4)::after { transition-delay: 0.3s; }
.awr-hs .awr-comb__inputs li:nth-child(5)::after { transition-delay: 0.4s; }
.awr-hs .awr-comb__base {
	margin: 2.25rem 0 0;
	padding: 1rem 1.25rem;
	border-radius: var(--awr-radius);
	background: var(--awr-slate);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
	transform-origin: center;
	transition: transform 0.6s ease 0.6s, opacity 0.6s ease 0.6s;
}
.awr-hww-js .awr-comb:not(.is-in) .awr-comb__inputs li::after { transform: scaleY(0); }
.awr-hww-js .awr-comb:not(.is-in) .awr-comb__base { opacity: 0; transform: scaleX(0.6); }

/* ---------- 3 Architect: the variant view, then the operating model ---------- */

.awr-variant {
	position: relative;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
	border-radius: var(--awr-radius);
	background-color: var(--awr-slate);
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 44px 44px;
	color: #fff;
	text-align: center;
}
.awr-hs .awr-variant__path {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.awr-hs .awr-variant__path li {
	position: relative;
	color: #AEB9C5;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.awr-hs .awr-variant__path li:not(:last-child)::after {
	content: "→";
	content: "→" / "";
	position: absolute;
	top: 50%;
	right: calc(-0.5 * clamp(1.5rem, 4vw, 3.5rem) - 0.4em);
	transform: translateY(-50%);
	color: #4C9BFF;
	font-size: 1rem;
	letter-spacing: 0;
}
.awr-hs .awr-variant__path li:nth-child(2) {
	padding: 0.25em 0.1em 0.3em;
	color: #fff;
	font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	background: linear-gradient(var(--awr-blue), var(--awr-blue)) 0 100% / 100% 3px no-repeat;
}
.awr-hs .awr-variant__caption {
	margin: 1.5rem auto 0;
	max-width: 32rem;
	color: #C9D2DC;
	font-size: 1rem;
	line-height: 1.55;
	transition: opacity 0.6s ease 0.7s;
}
.awr-hww-js .awr-variant:not(.is-in) .awr-variant__path li:nth-child(1) { opacity: 0; transform: translateX(-12px); }
.awr-hww-js .awr-variant:not(.is-in) .awr-variant__path li:nth-child(2) { opacity: 0; transform: scale(0.92); }
.awr-hww-js .awr-variant:not(.is-in) .awr-variant__path li:nth-child(3) { opacity: 0; transform: translateX(12px); }
.awr-hww-js .awr-variant:not(.is-in) .awr-variant__caption { opacity: 0; }
.awr-variant.is-in .awr-variant__path li:nth-child(2) { transition-delay: 0.35s; }
.awr-variant.is-in .awr-variant__path li:nth-child(3) { transition-delay: 0.7s; }

/* Operating model: hub expands into connected parts */
.awr-hs .awr-model__intro { margin: 0 0 2rem; color: var(--awr-slate); font-size: 1.125rem; font-weight: 600; }
.awr-hs .awr-model__hub {
	position: relative;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0.8rem 1.4rem;
	border: 1px solid var(--awr-blue);
	border-radius: var(--awr-radius);
	color: var(--awr-blue-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.awr-hs .awr-model__hub::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 1px;
	height: calc(1.5rem + 1px);
	background: var(--awr-blue);
}
.awr-hs .awr-model__parts {
	position: relative;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 1.5rem 0 0;
	list-style: none;
	border-top: 1px solid var(--awr-blue);
	/* the bus line spans between the first and last part centres (7 columns, 6 gaps of 0.75rem) */
	border-image: linear-gradient(90deg, transparent calc((100% - 4.5rem) / 14), var(--awr-blue) calc((100% - 4.5rem) / 14) calc(100% - (100% - 4.5rem) / 14), transparent calc(100% - (100% - 4.5rem) / 14)) 1;
}
.awr-hs .awr-model__parts li {
	position: relative;
	padding: 0.75rem 0.5rem;
	border: 1px solid var(--awr-line);
	border-radius: 3px;
	background: #fff;
	color: var(--awr-slate);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
	transition: opacity 0.4s ease, transform 0.5s ease;
}
.awr-hs .awr-model__parts li::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: 1px;
	height: calc(1.5rem + 1px);
	background: var(--awr-blue);
}
.awr-hww-js .awr-model:not(.is-in) .awr-model__parts li { opacity: 0; transform: translateY(-6px); }
.awr-model.is-in .awr-model__parts li:nth-child(2) { transition-delay: 0.08s; }
.awr-model.is-in .awr-model__parts li:nth-child(3) { transition-delay: 0.16s; }
.awr-model.is-in .awr-model__parts li:nth-child(4) { transition-delay: 0.24s; }
.awr-model.is-in .awr-model__parts li:nth-child(5) { transition-delay: 0.32s; }
.awr-model.is-in .awr-model__parts li:nth-child(6) { transition-delay: 0.4s; }
.awr-model.is-in .awr-model__parts li:nth-child(7) { transition-delay: 0.48s; }

/* ---------- 4 Activate: the model moves into live operations ---------- */

.awr-stack { display: flex; flex-direction: column; align-items: stretch; }
.awr-hs .awr-stack__step {
	position: relative;
	margin: 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--awr-line);
	border-radius: var(--awr-radius);
	color: var(--awr-slate);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.awr-hs .awr-stack__step:not(.awr-stack__live) { margin-bottom: 2rem; }
.awr-hs .awr-stack__step:not(.awr-stack__live)::after {
	content: "";
	position: absolute;
	top: calc(100% + 1px);
	left: 50%;
	width: 1px;
	height: calc(2rem + 1px);
	background: var(--awr-blue);
}
.awr-hs .awr-stack__parts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	transition: opacity 0.5s ease 0.4s;
	position: relative;
}
.awr-hs .awr-stack__parts li {
	padding: 0.7rem 0.75rem;
	border: 1px solid var(--awr-blue);
	border-radius: 3px;
	color: var(--awr-blue-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	text-align: center;
}
.awr-hs .awr-stack__live {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	border-color: var(--awr-slate);
	background: var(--awr-slate);
	color: #fff;
	transition-delay: 0.7s;
}
.awr-hs .awr-stack__live::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 1px);
	left: 50%;
	width: 1px;
	height: calc(2rem + 1px);
	background: var(--awr-blue);
}
.awr-hs .awr-stack__live::after {
	content: "";
	order: -1;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4C9BFF;
	box-shadow: 0 0 0 0 rgba(76, 155, 255, 0.55);
}
.awr-stack.is-in .awr-stack__live::after,
html:not(.awr-hww-js) .awr-stack__live::after { animation: awr-live 2.4s ease-out 2; }
@keyframes awr-live {
	0% { box-shadow: 0 0 0 0 rgba(76, 155, 255, 0.55); }
	70%, 100% { box-shadow: 0 0 0 8px rgba(76, 155, 255, 0); }
}
.awr-hww-js .awr-stack:not(.is-in) .awr-stack__step:nth-child(2) { opacity: 0; transform: translateY(-6px); }
.awr-hww-js .awr-stack:not(.is-in) .awr-stack__parts { opacity: 0; }
.awr-hww-js .awr-stack:not(.is-in) .awr-stack__live { opacity: 0; transform: translateY(-6px); }
.awr-stack.is-in .awr-stack__step:nth-child(2) { transition-delay: 0.2s; }

/* ---------- 5 Accelerate: measurement loops back to Assess ---------- */

.awr-loopflow { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.awr-hs .awr-loopflow__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: awr-loop;
}
.awr-hs .awr-loopflow__steps::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 6px;
	right: 0;
	height: 1px;
	background: var(--awr-line);
}
.awr-hs .awr-loopflow__steps li {
	counter-increment: awr-loop;
	position: relative;
	padding-top: 2rem;
	color: var(--awr-slate);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background:
		radial-gradient(circle at 6.5px 6.5px, var(--awr-blue) 0 2.5px, transparent 3px),
		radial-gradient(circle at 6.5px 6.5px, #fff 0 5.5px, var(--awr-blue) 6px 6.5px, transparent 7px);
	background-repeat: no-repeat;
}
.awr-hs .awr-loopflow__steps li::before {
	content: counter(awr-loop, decimal-leading-zero);
	display: block;
	margin-bottom: 0.35rem;
	color: var(--awr-blue-ink);
	letter-spacing: 0.12em;
}
.awr-hs .awr-loopflow__steps li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 2.5px;
	right: calc(-0.75rem - 4px);
	border-left: 6px solid var(--awr-line);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}
/* Return arc: from Improvement (node 5) back to Baseline (node 1). Node n sits at
   (n-1) * (20% + 4.8px) + 6.5px, so the arc spans 6px .. 80% + 25.7px. */
.awr-hs .awr-loopflow__return {
	position: relative;
	box-sizing: border-box;
	width: calc(80% + 19.2px + 1px);
	margin: 1.25rem 0 0 6px;
	padding: 1.2rem 0 0.6rem;
	border: 1px dashed var(--awr-blue);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	color: var(--awr-blue-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
	transition: opacity 0.6s ease 0.6s, clip-path 1.1s cubic-bezier(0.3, 0, 0.2, 1) 0.4s;
	clip-path: inset(-8px -6px 0 -6px); /* room for the arrowhead above the left end */
}
.awr-hs .awr-loopflow__return::before {
	content: "";
	position: absolute;
	top: -7px;
	left: -5px;
	border-bottom: 7px solid var(--awr-blue);
	border-left: 4.5px solid transparent;
	border-right: 4.5px solid transparent;
}
.awr-hww-js .awr-loopflow:not(.is-in) .awr-loopflow__return { opacity: 0; clip-path: inset(-8px -6px 0 100%); }

/* ---------- 6 Illustrative engagement ---------- */

.awr-hs .awr-case__disclaimer {
	display: inline-block;
	margin: 1rem 0 0;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--awr-line);
	border-radius: 3px;
	color: var(--awr-slate-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}
.awr-case {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.25rem;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: 2rem;
}
.awr-case::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 6px;
	right: 0;
	height: 1px;
	background: var(--awr-line);
}
.awr-case__step {
	position: relative;
	padding: 1.25rem;
	border: 1px solid var(--awr-line);
	border-radius: var(--awr-radius);
	background: #fff;
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.awr-case__step::before {
	content: "";
	position: absolute;
	top: calc(-2rem + 0px);
	left: 0;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	border: 1px solid var(--awr-blue);
	border-radius: 50%;
	background: #fff;
}
.awr-hs .awr-case__tag {
	margin: 0 0 0.6rem;
	color: var(--awr-blue-ink);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.awr-hs .awr-case__title {
	margin: 0 0 0.75rem;
	color: var(--awr-slate);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}
.awr-hs .awr-case__text {
	margin: 0;
	color: var(--awr-slate-muted);
	font-size: 0.875rem;
	line-height: 1.55;
}
.awr-hs .awr-case__text strong { color: var(--awr-slate); }
.awr-hs .awr-case__quote {
	display: block;
	color: var(--awr-slate);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.awr-case__step--key {
	border-color: var(--awr-slate);
	background: var(--awr-slate);
}
.awr-case__step--key::before { border-color: var(--awr-blue); background: var(--awr-blue); box-shadow: 0 0 0 4px rgba(1, 120, 255, 0.14); }
.awr-hs .awr-case__step--key .awr-case__tag { color: #8CC2FF; }
.awr-hs .awr-case__step--key .awr-case__title { color: #fff; }
.awr-hs .awr-case__step--key .awr-case__text { color: #E0DFE2; font-size: 0.9375rem; }
.awr-hww-js .awr-case:not(.is-in) .awr-case__step { opacity: 0; transform: translateY(8px); }
.awr-case.is-in .awr-case__step:nth-child(2) { transition-delay: 0.12s; }
.awr-case.is-in .awr-case__step:nth-child(3) { transition-delay: 0.24s; }
.awr-case.is-in .awr-case__step:nth-child(4) { transition-delay: 0.36s; }
.awr-case.is-in .awr-case__step:nth-child(5) { transition-delay: 0.48s; }

/* ---------- 7 Final CTA ---------- */

.awr-hww-cta .awr-hs__title { max-width: 20ch; }

/* ---------- Responsive ---------- */

/* the convergence row needs ~30rem; stack it under the text before it gets squeezed */
@media (max-width: 1279.98px) {
	.awr-hww--assumption .awr-hww-split { grid-template-columns: minmax(0, 1fr); }
	.awr-converge { margin-top: 1rem; max-width: 46rem; }
}

@media (max-width: 1199.98px) {
	.awr-case { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
	.awr-case::before, .awr-case__step::before { display: none; }
	.awr-case__step--key { grid-column: 1 / -1; }
	.awr-hs .awr-model__parts { grid-template-columns: repeat(4, minmax(0, 1fr)); border-image: none; border-top: 0; padding-top: 0; }
	.awr-hs .awr-model__parts li::before { display: none; }
	.awr-hs .awr-model__hub::after { display: none; }

	/* the headline fills the width here: keep the fragments to the edges */
	.awr-hs.awr-hww.awr-hww--hero {
		background:
			radial-gradient(circle at 93% 7%, var(--awr-blue) 0 2px, transparent 2.5px),
			radial-gradient(circle at 97% 12%, var(--awr-slate-muted) 0 1.5px, transparent 2px),
			radial-gradient(circle at 88% 4%, var(--awr-line) 0 3px, transparent 3.5px),
			radial-gradient(circle at 95% 95%, var(--awr-slate-muted) 0 1.5px, transparent 2px),
			radial-gradient(circle at 89% 98%, var(--awr-blue) 0 2px, transparent 2.5px),
			linear-gradient(90deg, var(--awr-line) 0 100%) 96% 9% / 28px 1px no-repeat,
			#fff;
	}
}

@media (max-width: 1023.98px) {
	.awr-hww-split { grid-template-columns: minmax(0, 1fr); }
	.awr-converge { margin-top: 1rem; }
}

@media (max-width: 781.98px) {
	.awr-hs.awr-hww { --awr-gutter: 1.75rem; }
	.awr-hs .awr-hww-stage { padding-left: calc(var(--awr-gutter) - 0.5rem); }

	/* convergence becomes vertical */
	.awr-converge { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; }
	.awr-hs .awr-converge__inputs { grid-column: 1; flex-direction: row; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid var(--awr-blue); }
	.awr-hs .awr-converge__inputs li::after, .awr-hs .awr-converge__inputs::after { display: none; }
	.awr-hs .awr-converge__result { grid-column: 1; flex-direction: column; align-items: flex-start; gap: 1.75rem; }
	.awr-hs .awr-converge__result::before { top: auto; bottom: 100%; right: auto; left: 1.25rem; width: 1px; height: 2.5rem; transform-origin: center top; }
	.awr-hww-js .awr-converge:not(.is-in) .awr-converge__result::before { transform: scaleY(0); }
	.awr-hs .awr-converge__result li + li::before { top: auto; bottom: 100%; right: auto; left: 1.25rem; width: 1px; height: 1.75rem; }
	.awr-hs .awr-converge__result li + li::after { top: -7px; right: auto; left: calc(1.25rem - 4px); border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--awr-slate); border-bottom: 0; }

	.awr-hs .awr-comb__inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.awr-hs .awr-comb__inputs li::after { display: none; }
	.awr-hs .awr-comb__base { margin-top: 1.25rem; }

	.awr-hs .awr-variant__path { flex-direction: column; gap: 1.75rem; }
	.awr-hs .awr-variant__path li:not(:last-child)::after { content: "↓"; content: "↓" / ""; top: auto; bottom: -1.5rem; right: 50%; transform: translateX(50%); }

	.awr-hs .awr-model__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.awr-hs .awr-loopflow__steps { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.awr-hs .awr-loopflow__steps::before { top: 0; bottom: 0; left: 6px; right: auto; width: 1px; height: auto; }
	.awr-hs .awr-loopflow__steps li { padding: 0 0 0 2rem; background-position: 0 0.15em; }
	.awr-hs .awr-loopflow__steps li:not(:last-child)::after { display: none; }
	.awr-hs .awr-loopflow__return { width: auto; margin: 1.25rem 0 0; border: 1px dashed var(--awr-blue); border-radius: var(--awr-radius); padding: 0.6rem; }
	.awr-hs .awr-loopflow__return::before { display: none; }

	.awr-case { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.awr-hww *, .awr-hww *::before, .awr-hww *::after { transition: none !important; animation: none !important; }
	.awr-hww-chapter::after { transform: scaleY(1); }
}