/* Modellerne
 * Fælles visuelt sprog: fjordblå streger, isblå flader, kort med tynd kant og rød kun dér,
 * hvor Human to Human gør forskellen (som buen i logoet). Farverne er temaets variabler, så
 * modellerne følger lyst og mørkt tema. Layoutet styres af modellens egen bredde
 * (container queries), så samme model virker i en halv kolonne og i fuld bredde.
 */

.h2h-model {
	--m-ink: var(--wp--preset--color--main, #14202E);
	--m-muted: var(--wp--preset--color--secondary, #586878);
	--m-blue: var(--wp--preset--color--primary, #1F3A5F);
	--m-ice: var(--wp--preset--color--primary-accent, #EAF0F5);
	--m-red: var(--wp--preset--color--primary-alt, #C8102E);
	--m-red-soft: var(--wp--preset--color--primary-alt-accent, #FBEAEC);
	/* Tekst på rød flade: hvid i lyst tema, mørk i mørkt tema (rød er lysere dér, så hvid står for svagt). */
	--m-on-red: var(--wp--preset--color--base, #FFFFFF);
	--m-line: var(--wp--preset--color--border-light, #D6DFE7);
	--m-card: var(--wp--preset--color--base, #FFFFFF);
	--m-bg: var(--wp--preset--color--base, #FFFFFF);
	position: relative;
	box-sizing: border-box;
	margin: 0;
	container-type: inline-size;
	color: var(--m-ink);
	font-family: var(--wp--preset--font-family--primary, "Figtree", sans-serif);
	line-height: 1.5;
}

/* På isblå bånd skal "huller" i figurerne have båndets farve. */
.h2h-section--band .h2h-model {
	--m-bg: var(--wp--preset--color--primary-accent, #EAF0F5);
}

.h2h-model *,
.h2h-model *::before,
.h2h-model *::after {
	box-sizing: border-box;
}

.h2h-model__body {
	position: relative;
}

/* Nulstilling uden specificitet, så modellernes egne klasser altid vinder. */
:where(.h2h-model) :where(p) {
	margin: 0;
	padding: 0;
}

/* Lister: lidt mere vægt end Ollies indryk på lister (ol/ul uden blokklasse). */
.h2h-model ol,
.h2h-model ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.h2h-model svg {
	display: block;
	overflow: visible;
}

.h2h-model__eyebrow {
	display: block;
	color: var(--m-muted);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.h2h-model__title {
	display: block;
	color: var(--m-ink);
	font-family: var(--wp--preset--font-family--secondary, "Newsreader", serif);
	font-size: 1.12rem;
	font-weight: 500;
	line-height: 1.25;
}

.h2h-model__text {
	display: block;
	margin-top: .2rem;
	color: var(--m-muted);
	font-size: .9rem;
	line-height: 1.5;
}

.h2h-model__num {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--m-blue);
	color: var(--m-card);
	font-size: .8rem;
	font-weight: 700;
	line-height: 1;
}

.h2h-model__result {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem 1.05rem;
	border: 2px solid var(--m-red);
	border-radius: 999px;
	background: var(--m-card);
	color: var(--m-red);
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
}

.h2h-model__result::before {
	content: "";
	flex: none;
	width: .55rem;
	height: .55rem;
	border-radius: 50%;
	background: var(--m-red);
}

.h2h-icon {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.h2h-icon .is-red {
	stroke: var(--m-red);
	stroke-width: 3.2;
}

/* Bevægelse: delene vises i rækkefølge (--i), og stregerne tegnes, når modellen ses.
 * Kun når scriptet har sat is-armed; ellers står alt færdigt.
 */
.h2h-model.is-armed .h2h-anim {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--i, 0) * 150ms);
}

.h2h-model.is-armed.is-in-view .h2h-anim {
	opacity: 1;
	transform: none;
}

.h2h-model.is-armed .h2h-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.1s ease;
	transition-delay: calc(var(--i, 0) * 150ms);
}

.h2h-model.is-armed.is-in-view .h2h-draw {
	stroke-dashoffset: 0;
}

/* Buer i strakte figurer (preserveAspectRatio="none" og non-scaling-stroke) kan ikke tegnes med
 * stregmønsteret: Chrome regner pathLength forkert, så buen bliver stiplet i hvile (Frederik 04.11.).
 * De tegnes i stedet frem fra venstre ved at afdække hele figuren; --i står på <svg>.
 */
.h2h-model.is-armed :is(.h2h-route__arcs, .h2h-bridge__arch, .h2h-cascade__bridge, .h2h-house__roof) .h2h-draw {
	stroke-dasharray: none;
	stroke-dashoffset: 0;
	transition: none;
}

.h2h-model.is-armed :is(.h2h-route__arcs, .h2h-bridge__arch, .h2h-cascade__bridge, .h2h-house__roof) svg {
	clip-path: inset(-10% 100% -10% 0);
	transition: clip-path 1.4s ease;
	transition-delay: calc(var(--i, 0) * 150ms);
}

.h2h-model.is-armed.is-in-view :is(.h2h-route__arcs, .h2h-bridge__arch, .h2h-cascade__bridge, .h2h-house__roof) svg {
	clip-path: inset(-10% -2% -10% 0);
}

/* ------------------------------------------------------------------ */
/* Tragten */

.h2h-funnel .h2h-model__body {
	display: grid;
	gap: 6px;
	max-width: 560px;
	margin-inline: auto;
}

.h2h-funnel.has-text .h2h-model__body {
	max-width: none;
}

.h2h-funnel__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 36px;
	align-items: center;
}

.h2h-funnel__in {
	display: grid;
	gap: 4px;
	text-align: center;
}

.h2h-funnel__dots {
	position: relative;
	height: 48px;
	margin: 0 7%;
}

.h2h-funnel__dot {
	position: absolute;
	top: var(--y);
	left: var(--x);
	width: var(--s);
	height: var(--s);
	margin-left: calc(var(--s) / -2);
	border-radius: 50%;
	background: var(--m-blue);
}

.h2h-funnel__dot.is-b {
	background: var(--m-muted);
	opacity: .55;
}

.h2h-funnel__dot.is-c {
	background: transparent;
	box-shadow: inset 0 0 0 2px var(--m-blue);
}

.h2h-model.is-armed .h2h-funnel__dot {
	opacity: 0;
	transform: translateY(-18px);
	transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--k) * 45ms);
}

.h2h-model.is-armed.is-in-view .h2h-funnel__dot {
	opacity: 1;
	transform: none;
}

.h2h-model.is-armed.is-in-view .h2h-funnel__dot.is-b {
	opacity: .55;
}

.h2h-funnel__stages {
	display: grid;
	gap: 6px;
}

/* Hver fase er et trapez; bunden af én fase er toppen af den næste. */
.h2h-funnel__shape {
	--w: 100%;
	--cut: 11%;
	display: grid;
	place-content: center;
	gap: 2px;
	width: var(--w);
	min-height: 84px;
	margin-inline: auto;
	/* Midt i højden er kanten kun skåret halvt ind, så teksten kan bruge bredden. */
	padding: 14px calc(var(--cut) / 2 + 12px);
	background: var(--m-blue);
	color: var(--m-card);
	text-align: center;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, var(--cut) 100%);
}

.h2h-funnel__shape.is-2 {
	--w: 78%;
	--cut: 14.1%;
}

.h2h-funnel__shape.is-3 {
	--w: 56%;
	--cut: 19.6%;
}

.h2h-funnel__shape.is-4 {
	--w: 34%;
	--cut: 22%;
}

.h2h-funnel__range {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	opacity: .8;
	text-transform: uppercase;
}

.h2h-funnel__title {
	font-family: var(--wp--preset--font-family--secondary, serif);
	font-size: 1.1rem;
	line-height: 1.2;
}

.h2h-funnel__out {
	display: grid;
	justify-items: center;
}

.h2h-funnel__stem {
	width: 2px;
	height: 24px;
	background: var(--m-red);
}

@container (min-width: 720px) {
	.h2h-funnel.has-text .h2h-funnel__row {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.h2h-funnel__desc {
		margin-top: 0;
		padding-left: 18px;
		border-left: 2px solid var(--m-line);
	}
}

@container (max-width: 719px) {
	.h2h-funnel__desc {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Stilstandscirklen */

.h2h-cycle .h2h-model__body {
	display: grid;
	gap: 22px;
	justify-items: center;
}

.h2h-cycle__ring {
	position: relative;
	width: min(100%, 260px);
	aspect-ratio: 1;
}

.h2h-cycle__ring svg {
	width: 100%;
	height: 100%;
}

.h2h-cycle__track {
	fill: none;
	stroke: var(--m-line);
	stroke-width: 1.5;
	stroke-dasharray: 2 6;
}

.h2h-cycle__arc {
	fill: none;
	stroke: var(--m-blue);
	stroke-width: 3;
	stroke-linecap: round;
}

.h2h-cycle__head {
	fill: var(--m-blue);
}

.h2h-cycle__node {
	fill: var(--m-card);
	stroke: var(--m-blue);
	stroke-width: 2.5;
}

.h2h-cycle__num {
	fill: var(--m-blue);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: central;
}

.h2h-cycle__halo {
	fill: none;
	stroke: var(--m-bg);
	stroke-width: 14;
	stroke-linecap: round;
}

.h2h-cycle__exit {
	fill: none;
	stroke: var(--m-red);
	stroke-width: 4;
	stroke-linecap: round;
}

.h2h-cycle__exit-head {
	fill: var(--m-red);
}

.h2h-cycle__center {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--m-muted);
	font-family: var(--wp--preset--font-family--secondary, serif);
	font-size: 1.2rem;
	font-style: italic;
	pointer-events: none;
}

.h2h-cycle__steps {
	display: grid;
	gap: 14px;
	width: 100%;
}

.h2h-cycle__step {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.h2h-cycle__copy .h2h-model__text {
	font-size: .86rem;
}

.h2h-cycle__break {
	width: 100%;
	padding: 12px 16px;
	border-left: 3px solid var(--m-red);
	border-radius: 0 10px 10px 0;
	background: var(--m-red-soft);
}

.h2h-cycle__break .h2h-model__title {
	color: var(--m-red);
}

@container (min-width: 520px) {
	.h2h-cycle .h2h-model__body {
		grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
		grid-template-areas: "ring steps" "ring break";
		gap: 18px 32px;
		align-items: center;
		justify-items: stretch;
	}

	.h2h-cycle__ring {
		grid-area: ring;
		width: 100%;
	}

	.h2h-cycle__steps {
		grid-area: steps;
	}

	.h2h-cycle__break {
		grid-area: break;
		align-self: start;
	}
}

/* Bred: teksterne står rundt om cirklen ud for deres trin. */
@container (min-width: 860px) {
	.h2h-cycle .h2h-model__body {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) minmax(0, 1fr);
		grid-template-areas: ". s1 ." "s4 ring s2" ". s3 brk";
		gap: 16px 28px;
	}

	.h2h-cycle__steps {
		display: contents;
	}

	.h2h-cycle__step.is-1,
	.h2h-cycle__step.is-3 {
		flex-direction: column;
		align-items: center;
		justify-self: center;
		max-width: 340px;
		text-align: center;
	}

	.h2h-cycle__step.is-1 {
		grid-area: s1;
		align-self: end;
	}

	.h2h-cycle__step.is-2 {
		grid-area: s2;
		max-width: 300px;
	}

	.h2h-cycle__step.is-3 {
		grid-area: s3;
		align-self: start;
	}

	.h2h-cycle__step.is-4 {
		grid-area: s4;
		flex-direction: row-reverse;
		justify-self: end;
		max-width: 300px;
		text-align: right;
	}

	.h2h-cycle__break {
		grid-area: brk;
		max-width: 300px;
		margin-top: 8px;
	}
}

/* ------------------------------------------------------------------ */
/* Executive Partner-modellen */

.h2h-cascade__bridge {
	display: none;
}

.h2h-cascade__nodes {
	display: grid;
	gap: 18px;
}

.h2h-cascade__node {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
}

.h2h-cascade__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 11px;
	border: 2px solid var(--m-line);
	border-radius: 50%;
	background: var(--m-card);
	color: var(--m-blue);
}

.h2h-cascade__node.is-2 .h2h-cascade__icon {
	border-color: var(--m-red);
	box-shadow: 0 0 0 5px var(--m-red-soft);
}

.h2h-cascade__node.is-5 .h2h-cascade__icon {
	border-color: var(--m-red);
	background: var(--m-red-soft);
	color: var(--m-red);
}

.h2h-cascade__node.is-5 .h2h-model__title {
	color: var(--m-red);
	font-weight: 600;
}

.h2h-cascade__node:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 56px;
	bottom: -18px;
	left: 27px;
	width: 2px;
	background: var(--m-line);
}

.h2h-cascade__node.is-1::after,
.h2h-cascade__node.is-2::after {
	background: var(--m-red);
}

@container (min-width: 760px) {
	.h2h-cascade .h2h-model__body {
		padding-top: 72px;
	}

	.h2h-cascade__bridge {
		position: absolute;
		top: 8px;
		left: 10%;
		display: block;
		width: 40%;
		height: 64px;
	}

	.h2h-cascade__bridge svg {
		width: 100%;
		height: 100%;
	}

	.h2h-cascade__bridge path {
		fill: none;
		stroke: var(--m-red);
		stroke-width: 3.5;
		stroke-linecap: round;
		vector-effect: non-scaling-stroke;
	}

	.h2h-cascade__bridge-label {
		position: absolute;
		top: 21px;
		left: 50%;
		translate: -50% -50%;
		padding: 0 .6rem;
		background: var(--m-bg);
		color: var(--m-red);
		font-size: .78rem;
		font-weight: 600;
		white-space: nowrap;
	}

	.h2h-cascade__nodes {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
	}

	.h2h-cascade__node {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		align-content: start;
		align-items: start;
		justify-items: center;
		padding-inline: 8px;
		text-align: center;
	}

	.h2h-cascade__icon {
		width: 64px;
		height: 64px;
		padding: 13px;
	}

	.h2h-cascade__node:not(:last-child)::after {
		top: 31px;
		right: calc(-50% + 40px);
		bottom: auto;
		left: calc(50% + 40px);
		width: auto;
		height: 2px;
	}

	.h2h-cascade__node:not(:last-child)::before {
		content: "";
		position: absolute;
		top: 27px;
		right: calc(-50% + 36px);
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		border-left: 8px solid var(--m-line);
	}

	.h2h-cascade__node.is-1::before,
	.h2h-cascade__node.is-2::before {
		border-left-color: var(--m-red);
	}
}

/* ------------------------------------------------------------------ */
/* Broen ind i Grønland */

.h2h-bridge .h2h-model__body {
	display: grid;
	gap: 18px;
}

.h2h-bridge__end {
	display: grid;
	gap: 4px;
	justify-items: center;
	text-align: center;
}

.h2h-bridge__icon {
	width: 60px;
	height: 60px;
	margin-bottom: 6px;
	padding: 12px;
	border: 2px solid var(--m-blue);
	border-radius: 50%;
	background: var(--m-card);
	color: var(--m-blue);
}

.h2h-bridge__end.is-to .h2h-bridge__icon {
	background: var(--m-ice);
}

.h2h-bridge__arch {
	display: none;
}

.h2h-bridge__span {
	display: grid;
	gap: 14px;
}

.h2h-bridge__label {
	justify-self: center;
	padding: .4rem .95rem;
	border-radius: 999px;
	background: var(--m-red);
	color: var(--m-on-red);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.h2h-bridge__steps {
	position: relative;
	display: grid;
	gap: 12px;
}

.h2h-bridge__steps::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 13px;
	width: 2px;
	background: var(--m-red);
}

.h2h-bridge__step {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: center;
}

.h2h-bridge__dot {
	z-index: 1;
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 2px solid var(--m-red);
	border-radius: 50%;
	background: var(--m-card);
	color: var(--m-red);
	font-size: .78rem;
	font-weight: 700;
}

.h2h-bridge__name {
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.3;
}

.h2h-bridge__note {
	padding-top: 10px;
	border-top: 1.5px dashed var(--m-line);
	font-size: .82rem;
	text-align: center;
}

/* Broen tegnes med bue fra 400 px, så den også kan stå i en halv kolonne ved siden af sidens titel
 * (Market Entry, som modellerne på de to andre ydelsessider). Enderne og ikonerne skaleres med
 * --bw og --bi; buen starter ved ikonets kant, og ikonets midte flugter med buens ender. */
@container (min-width: 400px) {
	.h2h-bridge .h2h-model__body {
		--bw: 96px;
		--bi: 44px;
		grid-template-columns: var(--bw) minmax(0, 1fr) var(--bw);
		gap: 0 12px;
		align-items: start;
	}

	.h2h-bridge__end {
		padding-top: calc(124px - var(--bi) / 2);
	}

	.h2h-bridge__icon {
		width: var(--bi);
		height: var(--bi);
		padding: calc(var(--bi) / 5);
	}

	.h2h-bridge__end .h2h-model__title {
		font-size: .95rem;
		line-height: 1.25;
	}

	.h2h-bridge .h2h-bridge__label {
		font-size: .74rem;
	}

	.h2h-bridge__step {
		gap: 6px;
	}

	.h2h-bridge__span {
		position: relative;
		display: block;
		padding-top: 112px;
	}

	.h2h-bridge__arch {
		position: absolute;
		top: 26px;
		right: calc(-1 * (var(--bw) / 2 - var(--bi) / 2 + 12px));
		left: calc(-1 * (var(--bw) / 2 - var(--bi) / 2 + 12px));
		display: block;
		height: 100px;
	}

	.h2h-bridge__arch svg {
		width: 100%;
		height: 100%;
	}

	.h2h-bridge__arch path {
		fill: none;
		stroke: var(--m-red);
		stroke-width: 4;
		stroke-linecap: round;
		vector-effect: non-scaling-stroke;
	}

	.h2h-bridge__label {
		position: absolute;
		top: 51px;
		left: 50%;
		translate: -50% -50%;
		box-shadow: 0 0 0 6px var(--m-bg);
		white-space: nowrap;
	}

	.h2h-bridge__steps {
		display: flex;
		gap: 0;
		justify-content: space-between;
	}

	.h2h-bridge__steps::before {
		top: 12px;
		right: 0;
		bottom: auto;
		left: 0;
		width: auto;
		height: 3px;
		background: var(--m-blue);
	}

	.h2h-bridge__step {
		flex: 1 1 0;
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}

	.h2h-bridge__dot {
		border-color: var(--m-blue);
		color: var(--m-blue);
	}

	.h2h-bridge__name {
		max-width: 130px;
		font-size: .74rem;
		hyphens: auto;
	}

	.h2h-bridge__note {
		margin-top: 26px;
	}
}

@container (min-width: 480px) {
	.h2h-bridge .h2h-model__body {
		--bw: 112px;
		--bi: 48px;
	}

	.h2h-bridge .h2h-bridge__label {
		font-size: .78rem;
	}

	.h2h-bridge__name {
		font-size: .8rem;
	}
}

@container (min-width: 600px) {
	.h2h-bridge .h2h-model__body {
		--bw: 140px;
		--bi: 54px;
	}

	.h2h-bridge .h2h-bridge__label {
		font-size: .82rem;
	}

	.h2h-bridge__name {
		font-size: .84rem;
	}
}

@container (min-width: 820px) {
	.h2h-bridge .h2h-model__body {
		--bw: 170px;
		--bi: 60px;
	}

	.h2h-bridge__icon {
		padding: 12px;
	}

	.h2h-bridge__end .h2h-model__title {
		font-size: inherit;
	}

	.h2h-bridge .h2h-bridge__label {
		font-size: .85rem;
	}

	.h2h-bridge__name {
		font-size: .85rem;
	}
}

/* ------------------------------------------------------------------ */
/* Værdihuset */

/* Huset hænger sammen (Kenneth 5.11.): buen hviler på en bjælke over søjlerne, og søjlerne står
 * direkte på fundamentet, så formålet bæres af principperne, der står på værtskabet. */
.h2h-house .h2h-model__body {
	display: grid;
	gap: 0;
}

.h2h-house__roof {
	position: relative;
	height: clamp(96px, 16cqi, 140px);
	margin-bottom: 8px;
}

/* Bjælken: en tynd fjordblå linje mellem buens ender. */
.h2h-house__roof::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--m-blue);
}

/* Med etiket over formålet: lidt højere tag, så etiketten står frit under buen. */
.h2h-house__roof:has(.h2h-house__label:not(:empty)) {
	height: clamp(120px, 18cqi, 160px);
}

.h2h-house__roof svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Buen er diskret (Kenneth 5.11.): tynd, men stadig rød, fordi formålet er dér, hvor Human to Human gør forskellen. */
.h2h-house__roof path {
	fill: none;
	stroke: var(--m-red);
	stroke-width: 2.5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.h2h-house__roof-copy {
	position: absolute;
	top: 62%;
	left: 50%;
	width: min(72%, 640px);
	translate: -50% -50%;
	text-align: center;
}

.h2h-house__label,
.h2h-house__base-label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.h2h-house__label {
	display: block;
	margin-bottom: .3rem;
	color: var(--m-muted);
}

/* Tomme felter (fx et tag uden tekst) fylder ikke. */
.h2h-house :is(.h2h-house__label, .h2h-house__base-label, .h2h-model__text):empty {
	display: none;
}

.h2h-house__roof-title {
	display: block;
	color: var(--m-red);
	font-family: var(--wp--preset--font-family--secondary, serif);
	font-size: 1.4rem;
	line-height: 1.1;
}

.h2h-house__roof-copy .h2h-model__text {
	font-size: .85rem;
}

.h2h-house__pillars {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* Et ulige antal søjler i to kolonner: den sidste står i fuld bredde. */
.h2h-house__pillar:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.h2h-house__card .h2h-model__title {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Kortet ligger på et indre element, så temaets regler for lister ikke kan ændre polstringen. */
.h2h-house__pillar {
	display: flex;
}

.h2h-house__card {
	display: block;
	flex: 1;
	padding: 16px 16px 20px;
	border: 1px solid var(--m-line);
	border-top: 4px solid var(--m-blue);
	border-radius: 4px 4px 0 0;
	background: var(--m-card);
}

.h2h-house__base {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem 1rem;
	align-items: baseline;
	justify-content: center;
	padding: 14px 18px;
	border-radius: 4px;
	background: var(--m-blue);
	color: var(--m-card);
	text-align: center;
}

.h2h-house__base-title {
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Etiketten står før titlen på samme linje: »Det menneskelige fundament · Værtskab«. */
.h2h-house__base-label {
	opacity: .75;
}

.h2h-house__base-label:not(:empty)::after {
	content: " · ";
}

.h2h-house__base-text {
	font-size: .9rem;
	opacity: .85;
}

/* Med etiket står teksten på sin egen linje under. */
.h2h-house__base-head:has(.h2h-house__base-label:not(:empty)) + .h2h-house__base-text {
	flex-basis: 100%;
}

/* Søjlerne på én række: op til fire fra 640 px, fem eller flere (is-many) fra 800 px; ellers to kolonner. */
@container (min-width: 640px) {
	.h2h-house__pillars:not(.is-many) {
		grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
	}

	.h2h-house__pillars:not(.is-many) .h2h-house__pillar:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

@container (min-width: 800px) {
	.h2h-house__pillars {
		grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
	}

	.h2h-house__pillar:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* Smal: højere tag, så titel og tekst står frit under buen. */
@container (max-width: 639px) {
	.h2h-house__roof {
		height: 150px;
	}

	.h2h-house__roof-copy {
		top: 64%;
		width: 62%;
	}

	/* Etiketten må ikke røre den stejle bue: lidt højere tag og en smallere tekst, der står lavere. */
	.h2h-house__roof:has(.h2h-house__label:not(:empty)) {
		height: 230px;
	}

	.h2h-house__roof:has(.h2h-house__label:not(:empty)) .h2h-house__roof-copy {
		top: 70%;
		width: 62%;
	}

	.h2h-house__label {
		letter-spacing: .08em;
	}

	/* Smal: etiketten i fundamentet på sin egen linje, uden prik. */
	.h2h-house__base-label {
		display: block;
	}

	.h2h-house__base-label:not(:empty)::after {
		content: none;
	}

	.h2h-house__roof:has(.h2h-house__label:not(:empty)) .h2h-house__roof-title {
		font-size: 1.15rem;
	}

	.h2h-house__roof-copy .h2h-model__text {
		font-size: .8rem;
		line-height: 1.4;
	}
}

@container (max-width: 380px) {
	.h2h-house__pillars {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------ */
/* Mandatet */

.h2h-equation__sum {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.h2h-equation__terms {
	display: contents;
}

.h2h-equation__term {
	display: inline-flex;
	gap: 10px;
	align-items: center;
}

.h2h-equation__chip {
	display: inline-flex;
	gap: .45rem;
	align-items: center;
	padding: .5rem .95rem .5rem .6rem;
	border: 1.5px solid var(--m-blue);
	border-radius: 999px;
	background: var(--m-card);
	color: var(--m-ink);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.2;
}

.h2h-equation__chip .h2h-icon {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	color: var(--m-blue);
	stroke-width: 4.5;
}

.h2h-equation__op,
.h2h-equation__eq {
	color: var(--m-muted);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1;
}

.h2h-equation__eq {
	color: var(--m-red);
	font-weight: 700;
}

.h2h-equation__note {
	margin-top: 16px;
}

/* ------------------------------------------------------------------ */
/* Forløb i trin */

.h2h-steps__list {
	display: grid;
	gap: 18px;
}

.h2h-steps__step {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 14px;
	align-content: start;
}

.h2h-steps__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--m-blue);
	border-radius: 50%;
	background: var(--m-card);
	color: var(--m-blue);
	font-weight: 700;
}

.h2h-steps__step:last-child .h2h-steps__num {
	border-color: var(--m-red);
	background: var(--m-red);
	color: var(--m-on-red);
}

/* Ligeværdige trin: en løbende arbejdsform uden slutpunkt (Executive Partner, Kenneth 5.11.). */
.h2h-steps.is-even .h2h-steps__step:last-child .h2h-steps__num {
	border-color: var(--m-blue);
	background: var(--m-card);
	color: var(--m-blue);
}

.h2h-steps__copy {
	padding-top: 9px;
}

.h2h-steps__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 44px;
	bottom: -18px;
	left: 21px;
	width: 2px;
	background: var(--m-line);
}

@container (min-width: 640px) {
	.h2h-steps__list {
		grid-template-columns: repeat(var(--n), minmax(0, 1fr));
		gap: 0;
	}

	.h2h-steps__step {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		padding-right: 22px;
	}

	.h2h-steps__copy {
		padding-top: 0;
	}

	.h2h-steps__step:not(:last-child)::after {
		top: 21px;
		right: 0;
		bottom: auto;
		left: 52px;
		width: auto;
		height: 2px;
	}
}

/* ------------------------------------------------------------------ */
/* Ruten */

.h2h-route__arcs {
	display: none;
}

.h2h-route__stops {
	position: relative;
	display: grid;
	gap: 16px;
}

.h2h-route__stop {
	position: relative;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 12px;
}

.h2h-route__stop > :not(.h2h-route__pin) {
	grid-column: 2;
}

.h2h-route__pin {
	grid-row: 1 / span 3;
	width: 40px;
	height: 40px;
	color: var(--m-blue);
}

.h2h-route__stop.is-now .h2h-route__pin {
	color: var(--m-red);
}

.h2h-route__stop:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 44px;
	bottom: -14px;
	left: 19px;
	border-left: 2px dashed var(--m-line);
}

.h2h-route__place {
	display: block;
	font-family: var(--wp--preset--font-family--secondary, serif);
	font-size: 1.4rem;
	line-height: 1.2;
}

.h2h-route__stop.is-now .h2h-route__place {
	color: var(--m-red);
}

@container (min-width: 640px) {
	.h2h-route .h2h-model__body {
		padding-top: 74px;
	}

	.h2h-route__arcs {
		position: absolute;
		top: 16px;
		right: 0;
		left: 0;
		display: block;
		height: 60px;
	}

	.h2h-route__arcs svg {
		width: 100%;
		height: 100%;
	}

	.h2h-route__arc {
		fill: none;
		stroke: var(--m-blue);
		stroke-width: 2.5;
		stroke-linecap: round;
		vector-effect: non-scaling-stroke;
	}

	.h2h-route__arc.is-last {
		stroke: var(--m-red);
		stroke-width: 3.5;
	}

	/* Stoppene flugter i toppen, så nålene står på linje, uanset hvor lang teksten under dem er. */
	.h2h-route__stops {
		grid-template-columns: repeat(var(--n), minmax(0, 1fr));
		gap: 0;
		align-items: start;
	}

	.h2h-route__stop {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		padding-inline: 12px;
		text-align: center;
	}

	.h2h-route__stop > * {
		grid-column: 1 !important;
	}

	.h2h-route__pin {
		grid-row: auto;
		width: 44px;
		height: 44px;
		margin-top: -32px;
		margin-bottom: 6px;
		background: var(--m-bg);
		border-radius: 50%;
	}

	.h2h-route__stop::after {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Prisfaktorerne */

.h2h-factors .h2h-model__body {
	display: grid;
	gap: 18px;
	justify-items: center;
}

.h2h-factors__hub {
	position: relative;
	width: min(100%, 190px);
	aspect-ratio: 1;
}

.h2h-factors__hub svg {
	width: 100%;
	height: 100%;
}

.h2h-factors__spoke {
	display: none;
	fill: none;
	stroke: var(--m-line);
	stroke-width: 2;
}

.h2h-factors__ring {
	fill: var(--m-red-soft);
	stroke: var(--m-red);
	stroke-width: 3;
}

.h2h-factors__center {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24%;
	color: var(--m-red);
	font-family: var(--wp--preset--font-family--secondary, serif);
	font-size: 1.25rem;
	line-height: 1.15;
	text-align: center;
}

.h2h-factors__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
}

.h2h-factors__factor {
	display: flex;
}

.h2h-factors__card {
	display: block;
	flex: 1;
	padding: 14px 16px;
	border: 1px solid var(--m-line);
	border-radius: 10px;
	background: var(--m-card);
}

.h2h-factors__not {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .8rem;
	align-items: baseline;
	justify-content: center;
	text-align: center;
}

.h2h-factors__not-title {
	color: var(--m-muted);
	font-weight: 700;
	text-decoration-color: var(--m-red);
	text-decoration-thickness: 2px;
}

.h2h-factors__not .h2h-model__text {
	margin: 0;
}

@container (max-width: 420px) {
	.h2h-factors__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container (min-width: 760px) {
	.h2h-factors .h2h-model__body {
		grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
		grid-template-areas: ". f1 ." "f4 hub f2" ". f3 ." "not not not";
		gap: 0;
		align-items: center;
	}

	.h2h-factors__list {
		display: contents;
	}

	.h2h-factors__hub {
		grid-area: hub;
		width: 200px;
	}

	.h2h-factors__spoke {
		display: inline;
	}

	.h2h-factors__factor {
		max-width: 280px;
	}

	.h2h-factors__factor.is-1 {
		grid-area: f1;
		align-self: end;
		justify-self: center;
		text-align: center;
	}

	.h2h-factors__factor.is-2 {
		grid-area: f2;
		justify-self: start;
	}

	.h2h-factors__factor.is-3 {
		grid-area: f3;
		align-self: start;
		justify-self: center;
		text-align: center;
	}

	.h2h-factors__factor.is-4 {
		grid-area: f4;
		justify-self: end;
		text-align: right;
	}

	.h2h-factors__not {
		grid-area: not;
		margin-top: 26px;
	}
}

/* ------------------------------------------------------------------ */
/* 90 dage i faser */

.h2h-phases .h2h-model__body {
	display: grid;
	gap: 18px;
}

.h2h-phases__list {
	display: grid;
	gap: 16px;
}

.h2h-phases__phase {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr);
	gap: 16px;
}

.h2h-phases__bar {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: var(--m-ice);
	box-shadow: inset 0 0 0 1px var(--m-line);
}

.h2h-phases__fill {
	position: absolute;
	inset: 0;
	background: var(--m-blue);
}

.h2h-phases__phase.is-1 .h2h-phases__fill {
	opacity: .5;
}

.h2h-phases__phase.is-2 .h2h-phases__fill {
	opacity: .75;
}

.h2h-model.is-armed .h2h-phases__fill {
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .8s ease;
	transition-delay: calc(var(--i, 0) * 450ms);
}

.h2h-model.is-armed.is-in-view .h2h-phases__fill {
	transform: none;
}

.h2h-phases__copy .h2h-model__title {
	margin-top: .15rem;
}

/* Med en kort linje under navnet får navnet lidt mere vægt, så rækkefølgen er tydelig. */
.h2h-phases__copy:has(.h2h-phases__kicker) .h2h-model__title {
	font-size: 1.3rem;
}

.h2h-phases__kicker {
	display: block;
	margin-top: .3rem;
	color: var(--m-ink);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.4;
}

.h2h-phases__outcome {
	display: block;
	margin-top: .9rem;
	padding: .7rem .85rem;
	border-left: 3px solid var(--m-red);
	border-radius: 0 8px 8px 0;
	background: var(--m-red-soft);
	color: var(--m-ink);
	font-size: .9rem;
	line-height: 1.45;
}

.h2h-phases__outcome-label {
	display: block;
	margin-bottom: .15rem;
	color: var(--m-red);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.h2h-phases__result {
	justify-self: start;
}

@container (min-width: 680px) {
	.h2h-phases .h2h-model__body {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0 14px;
		align-items: start;
	}

	.h2h-phases__list {
		grid-template-columns: repeat(var(--n), minmax(0, 1fr));
		gap: 0 6px;
	}

	.h2h-phases__phase {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 14px auto;
		gap: 16px;
	}

	.h2h-phases__copy {
		padding-right: 18px;
	}

	.h2h-model.is-armed .h2h-phases__fill {
		transform: scaleX(0);
		transform-origin: left;
	}

	.h2h-phases__result {
		margin-top: -12px;
	}
}

/* ------------------------------------------------------------------ */
/* Vejen videre: et rødt startpunkt, hvor vejen deler sig.
 * To retninger (is-paths): vejen deler sig i to stier med "eller" i delingspunktet, og
 * mulighederne står side om side for enden af hver sti. Andre antal (is-list): retningerne står
 * under hinanden med en streg fra startpunktet (smalt) eller til højre for det (bredt).
 * Stregerne er CSS, så de passer til kortenes højde. */

.h2h-fork .h2h-model__body {
	display: grid;
	gap: 28px;
}

.h2h-fork__branch {
	position: relative;
}

.h2h-fork__start,
.h2h-fork__card {
	position: relative;
	display: block;
	padding: 16px 18px;
	border: 1px solid var(--m-line);
	border-radius: 10px;
	background: var(--m-card);
}

.h2h-fork__start {
	border: 2px solid var(--m-red);
	background: var(--m-red-soft);
}

.h2h-fork__start .h2h-model__title {
	color: var(--m-red);
}

.h2h-fork__card .h2h-model__eyebrow {
	margin-bottom: .35rem;
}

/* To stier */

.h2h-fork.is-paths {
	--fork-gap: 16px;
}

.h2h-fork.is-paths .h2h-model__body {
	gap: 0;
}

.h2h-fork.is-paths .h2h-fork__start {
	justify-self: center;
	min-width: min(100%, 240px);
	text-align: center;
}

/* Delingspunktet: en stamme ned fra startpunktet og en bue ud til midten af hver sti. */
.h2h-fork__split {
	position: relative;
	height: 64px;
}

.h2h-fork__split::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 1px);
	height: 50%;
	border-left: 2px solid var(--m-blue);
}

/* Hver sti er en halv bue fra midten ud til sit kort. */
.h2h-fork__path {
	position: absolute;
	top: 50%;
	bottom: 8px;
	border-top: 2px solid var(--m-blue);
}

.h2h-fork__path.is-1 {
	right: 50%;
	left: calc(25% - var(--fork-gap) / 4 - 1px);
	border-left: 2px solid var(--m-blue);
	border-top-left-radius: 18px;
}

.h2h-fork__path.is-2 {
	right: calc(25% - var(--fork-gap) / 4 - 1px);
	left: 50%;
	border-right: 2px solid var(--m-blue);
	border-top-right-radius: 18px;
}

/* Fremhævet retning: den kraftigste sti og et markeret kort; den anden sti er roligere. */
.h2h-fork.has-featured .h2h-fork__path {
	border-color: var(--m-muted);
}

.h2h-fork.has-featured .h2h-fork__path.is-featured {
	border-width: 3px;
	border-color: var(--m-blue);
}

.h2h-fork.has-featured .h2h-fork__branch::before {
	border-top-color: var(--m-muted);
}

.h2h-fork.has-featured .h2h-fork__branch.is-featured::before {
	border-top-color: var(--m-blue);
}

.h2h-fork .h2h-fork__branch.is-featured .h2h-fork__card {
	border: 2px solid var(--m-blue);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--m-blue) 14%, transparent);
}

.h2h-fork__or {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	padding: .15rem .65rem;
	border-radius: 999px;
	background: var(--m-bg);
	color: var(--m-blue);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
}

.h2h-fork.is-paths .h2h-fork__branches {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fork-gap);
}

/* Pilen for enden af hver sti */
.h2h-fork.is-paths .h2h-fork__branch::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -9px;
	left: 50%;
	border-top: 9px solid var(--m-blue);
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	transform: translateX(-50%);
}

.h2h-fork.is-paths .h2h-fork__card {
	height: 100%;
}

/* Stierne tegnes ud fra delingspunktet, når modellen ses. */
.h2h-model.is-armed .h2h-fork__split::before {
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .35s ease .15s;
}

.h2h-model.is-armed .h2h-fork__path {
	transform: scaleX(0);
	transition: transform .5s ease .45s;
}

.h2h-model.is-armed .h2h-fork__path.is-1 {
	transform-origin: right;
}

.h2h-model.is-armed .h2h-fork__path.is-2 {
	transform-origin: left;
}

.h2h-model.is-armed.is-in-view .h2h-fork__split::before,
.h2h-model.is-armed.is-in-view .h2h-fork__path {
	transform: none;
}

@container (max-width: 420px) {
	.h2h-fork.is-paths {
		--fork-gap: 10px;
	}

	.h2h-fork.is-paths .h2h-fork__card {
		padding: 12px;
	}
}

/* Under hinanden (andre antal end to) */

.h2h-fork.is-list .h2h-fork__branches {
	display: grid;
	gap: 14px;
	padding-left: 28px;
}

.h2h-fork.is-list .h2h-fork__branch::before,
.h2h-fork.is-list .h2h-fork__branch::after {
	content: "";
	position: absolute;
	left: -18px;
}

/* Vandret stump ind til kortet */
.h2h-fork.is-list .h2h-fork__branch::before {
	top: 50%;
	width: 18px;
	border-top: 2px solid var(--m-blue);
}

/* Lodret streg: fra kortet over (eller startpunktet) ned til midten af dette kort, videre ned, hvis der kommer flere. */
.h2h-fork.is-list .h2h-fork__branch::after {
	top: -14px;
	height: calc(50% + 14px);
	border-left: 2px solid var(--m-blue);
}

.h2h-fork.is-list .h2h-fork__branch:not(:last-child)::after {
	height: calc(100% + 14px);
}

.h2h-fork.is-list .h2h-fork__branch:first-child::after {
	top: -28px;
	height: calc(50% + 28px);
}

.h2h-fork.is-list .h2h-fork__branch:first-child:not(:last-child)::after {
	height: calc(100% + 28px);
}

@container (min-width: 600px) {
	.h2h-fork.is-list .h2h-model__body {
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
		gap: 0 56px;
		align-items: center;
	}

	.h2h-fork.is-list .h2h-fork__start::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 100%;
		width: 28px;
		border-top: 2px solid var(--m-blue);
	}

	.h2h-fork.is-list .h2h-fork__branches {
		padding-left: 0;
	}

	.h2h-fork.is-list .h2h-fork__branch::before {
		left: -28px;
		width: 28px;
	}

	.h2h-fork.is-list .h2h-fork__branch::after,
	.h2h-fork.is-list .h2h-fork__branch:not(:last-child)::after {
		top: -7px;
		left: -28px;
		height: calc(100% + 14px);
	}

	.h2h-fork.is-list .h2h-fork__branch:first-child::after,
	.h2h-fork.is-list .h2h-fork__branch:first-child:not(:last-child)::after {
		top: 50%;
		height: calc(50% + 7px);
	}

	.h2h-fork.is-list .h2h-fork__branch:last-child::after {
		top: -7px;
		height: calc(50% + 7px);
	}

	.h2h-fork.is-list .h2h-fork__branch:only-child::after {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Vægten: to vægtskåle (kort) hænger i hver sin ende af en bjælke. Bjælken hviler på en stolpe,
 * som står på aftalen (rød). Uden for synsfeltet hælder vægten; når den ses, finder den balancen. */

.h2h-balance .h2h-model__body {
	display: grid;
	gap: 18px;
	justify-items: center;
}

.h2h-balance__scale {
	--bal-gap: 72px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--bal-gap);
	align-items: start;
	width: 100%;
	padding-top: 46px;
}

/* Bjælken: fra midten af den ene skål til midten af den anden. */
.h2h-balance__beam {
	position: absolute;
	z-index: 1;
	top: 10px;
	right: calc(25% - var(--bal-gap) / 4);
	left: calc(25% - var(--bal-gap) / 4);
	height: 4px;
	border-radius: 2px;
	background: var(--m-blue);
}

/* Omdrejningspunktet */
.h2h-balance__beam::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	border: 3px solid var(--m-bg);
	border-radius: 50%;
	background: var(--m-red);
	transform: translate(-50%, -50%);
}

/* Stolpen fra bjælken ned til aftalen */
.h2h-balance__post {
	position: absolute;
	top: 12px;
	bottom: -18px;
	left: calc(50% - 1.5px);
	width: 3px;
	background: var(--m-blue);
}

.h2h-balance__pan {
	position: relative;
	padding: 18px 20px;
	border: 1px solid var(--m-line);
	border-radius: 10px;
	background: var(--m-card);
}

/* Snoren fra bjælken ned til skålen */
.h2h-balance__pan::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: calc(50% - 1px);
	width: 2px;
	height: 34px;
	background: var(--m-blue);
}

.h2h-balance__pan .h2h-model__title {
	margin-bottom: .6rem;
	font-size: 1.25rem;
}

.h2h-balance__items {
	display: grid;
	gap: .45rem;
}

.h2h-balance__items li {
	display: grid;
	grid-template-columns: 1.05rem minmax(0, 1fr);
	gap: .5rem;
	align-items: start;
	color: var(--m-ink);
	font-size: .92rem;
	line-height: 1.4;
	hyphens: auto;
	overflow-wrap: break-word;
}

.h2h-balance__items .h2h-icon {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: .1rem;
	color: var(--m-blue);
}

.h2h-balance__center {
	position: relative;
	z-index: 1;
}

/* Bevægelse: vægten hælder, til modellen ses, og svinger så på plads. */
.h2h-model.is-armed .h2h-balance__beam,
.h2h-model.is-armed .h2h-balance__pan {
	transition: transform 1.1s cubic-bezier(.3, 1.45, .5, 1) .25s;
}

.h2h-model.is-armed .h2h-balance__beam {
	transform: rotate(-6deg);
}

.h2h-model.is-armed .h2h-balance__pan.is-left {
	transform: translateY(18px);
}

.h2h-model.is-armed .h2h-balance__pan.is-right {
	transform: translateY(-18px);
}

.h2h-model.is-armed.is-in-view .h2h-balance__beam,
.h2h-model.is-armed.is-in-view .h2h-balance__pan {
	transform: none;
}

@container (max-width: 480px) {
	.h2h-balance__scale {
		--bal-gap: 36px;
	}

	.h2h-balance__pan {
		padding: 14px;
	}

	.h2h-balance__pan .h2h-model__title {
		font-size: 1.05rem;
	}

	.h2h-balance__items li {
		font-size: .84rem;
	}
}

/* ------------------------------------------------------------------ */
/* Ved siden af ledelsen: ledelsen til venstre med pile nedad, Executive Partner til højre ud for
 * de niveauer, den arbejder med (streger med pile begge veje), og det fælles resultat nederst. */

.h2h-alongside .h2h-model__body {
	--al-gap: 96px;
	--al-row: 28px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--al-gap) minmax(0, 1fr);
	row-gap: var(--al-row);
}

.h2h-alongside__level,
.h2h-alongside__partner {
	position: relative;
	display: grid;
	align-content: center;
	gap: .15rem;
	padding: 14px 18px;
	border: 1px solid var(--m-line);
	border-radius: 10px;
	background: var(--m-card);
	text-align: center;
}

.h2h-alongside__level {
	grid-column: 1;
}

/* Streg ned fra hvert niveau (til det næste eller til resultatet) og en pil ind i det næste */
.h2h-alongside__level::after {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% - 1px);
	width: 2px;
	height: var(--al-row);
	background: var(--m-blue);
}

.h2h-alongside__level + .h2h-alongside__level::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	border-top: 8px solid var(--m-blue);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	transform: translateX(-50%);
}

/* Stregen over til partneren: samarbejdet går begge veje */
.h2h-alongside__link {
	position: absolute;
	top: 50%;
	left: 100%;
	width: var(--al-gap);
	border-top: 2px solid var(--m-blue);
}

.h2h-alongside__link::before,
.h2h-alongside__link::after {
	content: "";
	position: absolute;
	top: -6px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.h2h-alongside__link::before {
	left: 0;
	border-right: 8px solid var(--m-blue);
}

.h2h-alongside__link::after {
	right: 0;
	border-left: 8px solid var(--m-blue);
}

.h2h-alongside__link span {
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	color: var(--m-muted);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
}

.h2h-alongside__partner {
	grid-column: 3;
	border: 2px solid var(--m-red);
	background: var(--m-red-soft);
}

.h2h-alongside__partner .h2h-model__title {
	color: var(--m-red);
	font-size: 1.3rem;
}

.h2h-alongside__text {
	display: block;
	margin-top: .2rem;
	color: var(--m-ink);
	font-weight: 600;
	line-height: 1.35;
}

/* Fra partneren ned til resultatet */
.h2h-alongside__partner.is-full::after {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% - 1px);
	width: 2px;
	height: var(--al-row);
	background: var(--m-blue);
}

.h2h-alongside__drop {
	position: relative;
	grid-column: 3;
}

.h2h-alongside__drop::before {
	content: "";
	position: absolute;
	top: calc(var(--al-row) * -1);
	bottom: calc(var(--al-row) * -1);
	left: calc(50% - 1px);
	width: 2px;
	background: var(--m-blue);
}

.h2h-alongside__result {
	position: relative;
	grid-column: 1 / -1;
	margin: 0;
	padding: 14px;
	border: 1px solid var(--m-line);
	border-radius: 10px;
	background: var(--m-card);
	text-align: center;
}

/* Pilene, hvor de to veje rammer resultatet (midt under hver kolonne) */
.h2h-alongside__result::before,
.h2h-alongside__result::after {
	content: "";
	position: absolute;
	bottom: 100%;
	border-top: 8px solid var(--m-blue);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	transform: translateX(-50%);
}

.h2h-alongside__result::before {
	left: calc((100% - var(--al-gap)) / 4);
}

.h2h-alongside__result::after {
	left: calc(100% - (100% - var(--al-gap)) / 4);
}

@container (max-width: 560px) {
	.h2h-alongside .h2h-model__body {
		--al-gap: 76px;
		--al-row: 24px;
	}

	.h2h-alongside__level,
	.h2h-alongside__partner {
		padding: 10px 12px;
	}

	.h2h-alongside__level .h2h-model__title {
		font-size: 1rem;
	}

	.h2h-alongside__partner .h2h-model__title {
		font-size: 1.1rem;
	}

	/* Smalt er partnerens kolonne kun ca. 130 px: mindre tekst og orddeling, så intet rammer kanten. */
	.h2h-alongside__partner {
		padding: 10px 8px;
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}

@container (max-width: 420px) {
	.h2h-alongside__partner .h2h-model__title {
		font-size: .98rem;
	}

	.h2h-alongside__text {
		font-size: .82rem;
	}
}

@container (max-width: 560px) {
	.h2h-alongside__link span {
		right: 4px;
		left: 4px;
		font-size: .6rem;
		letter-spacing: .04em;
	}
}

/* ------------------------------------------------------------------ */
/* Skalaen: søjler, der vokser trin for trin, med en pil fra den ene ende af skalaen til den anden.
 * Smalt står trinene under hinanden med vandrette søjler. */

.h2h-scale .h2h-model__body {
	display: grid;
	gap: 16px;
}

.h2h-scale__axis {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	margin: 0;
	color: var(--m-muted);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1.3;
}

.h2h-scale__axis .is-high {
	text-align: right;
}

.h2h-scale__arrow {
	position: relative;
	width: clamp(60px, 18cqw, 200px);
	height: 2px;
	background: var(--m-blue);
}

.h2h-scale__arrow::after {
	content: "";
	position: absolute;
	top: -5px;
	right: -2px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid var(--m-blue);
}

.h2h-scale__steps {
	display: grid;
	grid-template-columns: repeat(var(--n), minmax(0, 1fr));
	gap: 12px;
}

.h2h-scale__step {
	display: grid;
	grid-template-rows: 80px 1fr;
	gap: 10px;
}

.h2h-scale__bar {
	position: relative;
	display: block;
	align-self: end;
	height: calc(12px + var(--level) * 68px / var(--n));
	overflow: hidden;
	border-radius: 6px 6px 2px 2px;
	background: var(--m-ice);
	box-shadow: inset 0 0 0 1px var(--m-line);
}

/* Isblå flade med en fjordblå kant øverst; fladen bliver mørkere trin for trin. */
.h2h-scale__fill {
	position: absolute;
	inset: 0;
	border-top: 3px solid var(--m-blue);
	background: color-mix(in srgb, var(--m-blue) calc((10 + 45 * var(--level) / var(--n)) * 1%), transparent);
}

.h2h-scale__card {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--m-line);
	border-radius: 10px;
	background: var(--m-card);
}

.h2h-scale__card .h2h-model__title {
	font-size: 1.1rem;
}

.h2h-model.is-armed .h2h-scale__fill {
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .6s ease;
	transition-delay: calc(var(--i, 0) * 180ms);
}

.h2h-model.is-armed.is-in-view .h2h-scale__fill {
	transform: none;
}

@container (max-width: 600px) {
	.h2h-scale__axis {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 4px 10px;
	}

	.h2h-scale__axis .is-low {
		grid-column: 1 / -1;
	}

	.h2h-scale__arrow {
		width: 44px;
	}

	.h2h-scale__axis .is-high {
		text-align: left;
	}

	.h2h-scale__steps {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.h2h-scale__step {
		grid-template-rows: none;
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 12px;
		align-items: center;
	}

	.h2h-scale__bar {
		align-self: center;
		width: calc(10px + var(--level) * 54px / var(--n));
		height: 12px;
		border-radius: 2px 6px 6px 2px;
	}

	.h2h-scale__fill {
		border-top: 0;
		border-right: 3px solid var(--m-blue);
	}

	.h2h-model.is-armed .h2h-scale__fill {
		transform: scaleX(0);
		transform-origin: left;
	}
}

/* ------------------------------------------------------------------ */
/* Én partner og et netværk: kunden og partneren forbundet med én streg (pile begge veje),
 * specialisterne forbundet med stiplede streger. Smalt står det under hinanden. */

.h2h-hub .h2h-model__body {
	display: grid;
	grid-template-columns: minmax(0, .8fr) 150px minmax(0, 1fr) minmax(0, 1.25fr);
	align-items: center;
}

.h2h-hub__client,
.h2h-hub__center {
	position: relative;
	padding: 16px 18px;
	border: 1px solid var(--m-line);
	border-radius: 10px;
	background: var(--m-card);
	text-align: center;
}

.h2h-hub__center {
	border: 2px solid var(--m-red);
	background: var(--m-red-soft);
}

.h2h-hub__center .h2h-model__title {
	color: var(--m-red);
}

/* Stiplet streg fra partneren over til specialisterne */
.h2h-hub__center::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	width: 22px;
	border-top: 2px dashed var(--m-muted);
}

.h2h-hub__link {
	position: relative;
	height: 2px;
	background: var(--m-blue);
}

.h2h-hub__link::before,
.h2h-hub__link::after {
	content: "";
	position: absolute;
	top: -4px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.h2h-hub__link::before {
	left: 0;
	border-right: 8px solid var(--m-blue);
}

.h2h-hub__link::after {
	right: 0;
	border-left: 8px solid var(--m-blue);
}

.h2h-hub__link span {
	position: absolute;
	right: 14px;
	bottom: 10px;
	left: 14px;
	text-wrap: balance;
	color: var(--m-muted);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.25;
	text-align: center;
	text-transform: uppercase;
}

.h2h-hub__network {
	padding-left: 44px;
}

.h2h-hub__specialists {
	position: relative;
	display: grid;
	gap: 8px;
}

/* Stiplet samlelinje langs specialisterne og en stump ind til hver */
.h2h-hub__specialists::before {
	content: "";
	position: absolute;
	top: 19px;
	bottom: 19px;
	left: -22px;
	border-left: 2px dashed var(--m-muted);
}

.h2h-hub__specialist {
	position: relative;
}

.h2h-hub__specialist::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -22px;
	width: 22px;
	border-top: 2px dashed var(--m-muted);
}

.h2h-hub__specialist > span {
	display: block;
	padding: 9px 14px;
	border: 1px solid var(--m-line);
	border-radius: 8px;
	background: var(--m-card);
	color: var(--m-ink);
	font-size: .92rem;
	line-height: 1.3;
}

.h2h-hub__note {
	margin-top: 10px !important;
}

@container (max-width: 640px) {
	.h2h-hub .h2h-model__body {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Lodret streg mellem kunden og partneren, med teksten ved siden af */
	.h2h-hub__link {
		justify-self: center;
		width: 2px;
		height: 52px;
	}

	.h2h-hub__link::before,
	.h2h-hub__link::after {
		left: -4px;
		border-top: 0;
		border-right: 5px solid transparent;
		border-bottom: 0;
		border-left: 5px solid transparent;
	}

	.h2h-hub__link::before {
		top: 0;
		border-bottom: 8px solid var(--m-blue);
	}

	.h2h-hub__link::after {
		top: auto;
		right: auto;
		bottom: 0;
		border-top: 8px solid var(--m-blue);
	}

	.h2h-hub__link span {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 14px;
		white-space: nowrap;
		text-align: left;
		transform: translateY(-50%);
	}

	.h2h-hub__center::after {
		top: 100%;
		left: calc(50% - 1px);
		width: 0;
		height: 22px;
		border-top: 0;
		border-left: 2px dashed var(--m-muted);
	}

	.h2h-hub__network {
		padding-top: 22px;
		padding-left: 0;
	}

	.h2h-hub__specialists {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.h2h-hub__specialists::before,
	.h2h-hub__specialist::before {
		display: none;
	}

	.h2h-hub__specialist > span {
		height: 100%;
		border-style: dashed;
	}
}

/* Alternativer på forslagssider (et valg i noterne) står skjult for alle, til de vælges i panelet. */
.h2h-rv-alt:not(.h2h-rv-shown) {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Ledelsesniveauer: tre niveauer med tovejspile imellem; det fremhævede har rød kant (Kenneth 9.11.). */

.h2h-levels {
	margin-block: clamp(24px, 4vw, 40px);
}

.h2h-levels .h2h-model__body {
	display: grid;
	justify-items: center;
}

.h2h-levels__list {
	display: grid;
	width: min(100%, 560px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ollie fjerner luften over første og under sidste listepunkt i en artikel (med !important). */
.h2h-levels .h2h-levels__level {
	display: grid;
	gap: 4px;
	padding: 16px 22px !important;
	border: 1px solid var(--m-line);
	border-radius: 10px;
	background: var(--m-card);
	text-align: center;
}

.h2h-levels__level .h2h-model__title {
	font-size: 1.2rem;
}

.h2h-levels__level .h2h-model__text {
	letter-spacing: .02em;
}

.h2h-levels__level.is-key {
	border: 2px solid var(--m-red);
	background: var(--m-red-soft);
}

.h2h-levels__level.is-key .h2h-model__title {
	color: var(--m-red);
}

/* Tovejspil mellem to niveauer: retning ned, indsigt op. */
.h2h-levels__link {
	position: relative;
	justify-self: center;
	width: 2px;
	height: 44px;
	margin: 6px 0;
	background: var(--m-blue);
}

.h2h-levels__link::before,
.h2h-levels__link::after {
	content: "";
	position: absolute;
	left: -4px;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
}

.h2h-levels__link::before {
	top: -1px;
	border-bottom: 8px solid var(--m-blue);
}

.h2h-levels__link::after {
	bottom: -1px;
	border-top: 8px solid var(--m-blue);
}