/* Main theme styles for US DESIGN 2026. */

.site-footer__consent-button {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

/* ==========================================================================
   01. Design tokens
   ========================================================================== */

:root {
	--us-design-white: #ffffff;
	--us-design-text: #0b1213;
	--us-design-grey: #75848b;
	--us-design-light-grey: #b2bfc4;
	--us-design-purple: #72103c;
	--us-design-orange: #f7a600;
	--us-design-orange-10: #fef6e6; /* orange 10% – testimonial-farvevariant */
	--us-design-purple-5: rgba(114, 16, 60, 0.05); /* lilla 5% – testimonial-farvevariant */

	--font-heading: "Bw Beto Grande", serif;
	--font-body: "Lota Grotesque", sans-serif;

	--font-size-body: 1rem; /* 16px */
	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.5rem;
	--font-size-2xl: 2rem;
	--font-size-3xl: 3rem;
	--font-size-4xl: 4rem;

	--line-height-tight: 1.1;
	--line-height-heading: 1.15;
	--line-height-body: 1.6;

	--space-0: 0;
	--space-1: 0.5rem;  /* 8px */
	--space-2: 1rem;    /* 16px */
	--space-3: 1.5rem;  /* 24px */
	--space-4: 2rem;    /* 32px */
	--space-5: 2.5rem;  /* 40px */
	--space-6: 3rem;    /* 48px */
	--space-7: 3.5rem;  /* 56px */
	--space-8: 4rem;    /* 64px */
	--space-9: 4.5rem;  /* 72px */
	--space-10: 5rem;   /* 80px */
	--space-12: 6rem;   /* 96px */
	--space-16: 8rem;   /* 128px */

	--container-max: 1170px;
	--container-padding: var(--space-4);
	--container-outer-max: calc(var(--container-max) + (2 * var(--container-padding)));
	--section-padding-y: var(--space-12);
	--radius-image: 0.5rem; /* 8px */
}

/* ==========================================================================
   02. Font faces
   ========================================================================== */

@font-face {
	font-family: "Bw Beto Grande";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/bw-beto-grande/bw-beto-grande-bold.woff2") format("woff2");
}

@font-face {
	font-family: "Lota Grotesque";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/lota-grotesque/lota-grotesque-light.woff2") format("woff2");
}

@font-face {
	font-family: "Lota Grotesque";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/lota-grotesque/lota-grotesque-light-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Lota Grotesque";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/lota-grotesque/lota-grotesque-semibold.woff2") format("woff2");
}

@font-face {
	font-family: "Lota Grotesque";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/lota-grotesque/lota-grotesque-bold.woff2") format("woff2");
}

/* ==========================================================================
   03. Base
   ========================================================================== */

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

html {
	font-size: 100%;
	background-color: var(--us-design-text);
}

html,
body {
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--us-design-text);
	background: var(--us-design-white);
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

a:visited {
	color: inherit;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   04. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0;
	font-family: var(--font-heading);
	line-height: var(--line-height-heading);
}

/* Alle H1'er skal bruge den stramme linjeafstand (1.1), uanset side —
   generisk fallback for sider uden eget custom hero-selector (fx
   Persondatapolitik, som bruger WP's standard side-skabelon). */
.entry-title {
	line-height: var(--line-height-tight);
}

p {
	margin-block-start: 0;
	margin-block-end: 1em;
	line-height: var(--line-height-body);
}

p:last-child {
	margin-block-end: 0;
}

/* ==========================================================================
   05. Layout
   ========================================================================== */

.site-main {
	width: 100%;
}

.post,
.page {
	margin: 0;
}

/* ==========================================================================
   06. Buttons
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.125rem;
	padding: var(--space-2) 2.8125rem; /* 16px 45px */
	border: 1px solid transparent;
	border-radius: 100px;
	font-family: var(--font-body);
	font-size: 0.9375rem; /* 15px */
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color 160ms ease,
		background-color 160ms ease,
		border-color 160ms ease;
}

.button--primary,
.button--primary:visited {
	color: var(--us-design-white);
	background: var(--us-design-purple);
	border-color: var(--us-design-purple);
}

.button--primary:hover,
.button--primary:focus-visible {
	color: var(--us-design-white);
	background: var(--us-design-orange);
	border-color: var(--us-design-orange);
}

.button--accent,
.button--accent:visited {
	color: var(--us-design-text);
	background: var(--us-design-orange);
	border-color: var(--us-design-orange);
}

.button--orange,
.button--orange:visited {
	color: var(--us-design-white);
	background: var(--us-design-orange);
	border-color: var(--us-design-orange);
}

.button--orange:hover,
.button--orange:focus-visible {
	color: var(--us-design-orange);
	background: var(--us-design-white);
	border-color: var(--us-design-white);
}

/* ==========================================================================
   Floating contact icons
   ========================================================================== */

.floating-contact-icons {
	position: fixed;
	top: 11.875rem; /* 190px */
	right: -1rem;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	width: 4.125rem; /* 66px */
	pointer-events: none;
	transition:
		opacity 180ms ease,
		transform 180ms ease;
}


.floating-contact-icons__item,
a.floating-contact-icons__item,
a.floating-contact-icons__item:visited {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.125rem; /* 66px */
	height: 3.5rem; /* 56px */
	color: var(--us-design-white);
	background-color: var(--us-design-orange);
	border-radius: 80px 0 0 80px;
	pointer-events: auto;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform 180ms ease,
		background-color 180ms ease;
}

.floating-contact-icons__item:hover,
.floating-contact-icons__item:focus-visible,
a.floating-contact-icons__item:hover,
a.floating-contact-icons__item:focus-visible {
	background-color: var(--us-design-purple);
	transform: translateX(-1rem);
}

body:has(.front-hero-v2) .floating-contact-icons__item,
body:has(.front-hero-v2) a.floating-contact-icons__item,
body:has(.front-hero-v2) a.floating-contact-icons__item:visited {
	background-color: var(--us-design-purple);
}

body:has(.front-hero-v2) .floating-contact-icons__item:hover,
body:has(.front-hero-v2) .floating-contact-icons__item:focus-visible,
body:has(.front-hero-v2) a.floating-contact-icons__item:hover,
body:has(.front-hero-v2) a.floating-contact-icons__item:focus-visible {
	background-color: var(--us-design-orange);
}

.floating-contact-icons__icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--us-design-white);
	margin-right: 6px;
}

.floating-contact-icons__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 767px) {
	.floating-contact-icons {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.floating-contact-icons {
		right: -1rem;
	}

	.floating-contact-icons__icon {
		margin-right: 8px;
	}

	.floating-contact-icons__item:hover,
	.floating-contact-icons__item:focus-visible,
	a.floating-contact-icons__item:hover,
	a.floating-contact-icons__item:focus-visible {
		transform: translateX(-1rem);
	}
}

/* ==========================================================================
   07. Header
   ========================================================================== */

.site-header {
	position: relative;
	color: var(--us-design-white);
	background: var(--us-design-text);
	border-bottom: 4px solid var(--us-design-orange);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	max-width: var(--container-outer-max);
	min-height: 100px;
	margin-inline: auto;
	padding-block: 0;
	padding-inline: var(--container-padding);
}

.site-header__logo {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	line-height: 1;
	text-decoration: none;
}

.site-header__logo-mark {
	display: flex;
	align-items: center;
	width: var(--space-10);
	height: var(--space-10);
}

.site-header__logo-image {
	display: block;
	width: 100%;
	height: auto;
}

.site-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 0.375rem;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	color: var(--us-design-white);
	background: transparent;
}

.site-header__menu-toggle-line {
	display: block;
	width: 1.75rem;
	height: 0.125rem;
	background-color: currentColor;
}

.site-header__navigation {
	display: flex;
	align-items: center;
	align-self: stretch;
}

/* De to nye wrapper-divs (til mobil/tablet-slidet) skal være usynlige i
   boks-modellen på desktop, så .site-header__menu opfører sig som før -
   direkte flex-barn af .site-header__navigation. Submenu-panelet (kun
   til mobil/tablet) skjules helt. */
.site-header__nav-track,
.site-header__nav-pane--main {
	display: contents;
}

.site-header__nav-pane--submenu {
	display: none;
}

.site-header__menu {
	display: flex;
	gap: clamp(1.5rem, 2.5vw, 3rem);
	align-items: center;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header__menu-item {
	display: flex;
	align-items: center;
	align-self: stretch;
	margin: 0;
}

.site-header__menu-item--services {
	position: static;
}

/* Pilen der åbner submenu-panelet hører kun til mobil/tablet - desktop
   bruger stadig hover-mega-menuen. */
.site-header__submenu-toggle {
	display: none;
}

.site-header__menu-link,
.site-header__menu-link:visited {
	font-family: var(--font-body);
	font-size: clamp(0.8125rem, 1vw, 1rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-decoration: none;
}

.site-header__menu-link:hover,
.site-header__menu-link:focus-visible {
	color: var(--us-design-orange);
}

.site-header__menu-link.is-active,
.site-header__menu-link.is-active:visited {
	color: var(--us-design-orange);
}

.site-header__mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 90;
	width: 100%;
	padding-top: 4px;
	color: var(--us-design-text);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 140ms ease,
		visibility 140ms ease;
}

.site-header__menu-item--services:hover .site-header__mega-menu,
.site-header__menu-item--services:focus-within .site-header__mega-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.site-header__mega-menu-inner {
	width: 100%;
	padding: var(--space-6) max(var(--container-padding), calc((100vw - var(--container-outer-max)) / 2 + var(--container-padding)));
	background: #faf9f7;
	border-bottom: 1px solid rgba(11, 18, 19, 0.14);
	box-shadow: 0 1rem 2rem rgba(11, 18, 19, 0.08);
}

.site-header__service-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-2);
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.site-header__service-item {
	margin: 0;
}

.site-header__service-link,
.site-header__service-link:visited {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 7rem;
	padding: var(--space-2);
	color: var(--us-design-text);
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 0.5rem;
	transition:
		color 160ms ease,
		background-color 140ms ease,
		border-color 140ms ease;
}

.site-header__service-link:hover,
.site-header__service-link:focus-visible {
	color: var(--us-design-white);
	background: var(--us-design-purple);
	border-color: var(--us-design-purple);
}

.site-header__service-link.is-active,
.site-header__service-link.is-active:visited {
	color: var(--us-design-purple);
	background: var(--us-design-white);
	border-color: rgba(114, 16, 60, 1);
}

.site-header__service-icon {
	display: flex;
	flex: 0 0 4.5rem;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4rem;
}

.site-header__service-icon img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

.site-header__service-label {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 1023px) {
	.site-header {
		z-index: 100;
	}

	.site-header__inner {
		min-height: 100px;
	}

	.site-header__logo {
		align-self: center;
	}

	.site-header__menu-toggle {
		display: inline-flex;
	}

	.site-header__navigation {
		position: absolute;
		top: calc(100% + 4px);
		left: 0;
		right: 0;
		z-index: 100;
		display: none;
		align-items: stretch;
		align-self: auto;
		background: var(--us-design-text);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.site-header.is-menu-open .site-header__navigation {
		display: block;
	}

	/* Menu og submenu ligger side om side i et "spor", der glider 50% til
	   venstre når submenuen åbnes - højden følger automatisk den af de to
	   paneler, der fylder mest (begge er i normal flow, ikke absolut). */
	.site-header__navigation {
		overflow: hidden;
	}

	.site-header__nav-track {
		display: flex;
		width: 200%;
		transition: transform 260ms ease;
	}

	.site-header__navigation.is-submenu-open .site-header__nav-track {
		transform: translateX(-50%);
	}

	.site-header__nav-pane {
		display: block;
		width: 50%;
		flex-shrink: 0;
	}

	.site-header__nav-pane--submenu {
		display: block;
		padding: var(--space-3) var(--container-padding);
	}

	.site-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		height: auto;
		padding: var(--space-3) var(--container-padding);
	}

	.site-header__menu-item {
		display: block;
		border-bottom: 1px solid color-mix(in srgb, var(--us-design-white) 15%, transparent);
	}

	.site-header__menu-item:last-child {
		border-bottom: 0;
	}

	.site-header__menu-item--services {
		position: relative;
	}

	.site-header__menu-link {
		display: block;
		padding-block: var(--space-2);
		padding-right: 3rem; /* plads til pilen, så teksten ikke støder ind i den */
		font-size: 1.25rem;
		font-weight: 300;
		text-align: left;
		letter-spacing: normal;
		text-transform: none;
	}

	/* Pilen er sit eget tryk-mål (åbner submenu), adskilt fra selve linket
	   (som navigerer til Grafisk Design-siden). */
	.site-header__submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3rem;
		height: 100%;
		padding: 0;
		background: none;
		border: 0;
		color: var(--us-design-white);
	}

	.site-header__submenu-toggle-icon {
		display: block;
		width: 0.6875rem;
		height: 0.875rem;
	}

	.site-header__submenu-toggle-icon svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* Den gamle desktop-mega-menu skjules helt på mobil/tablet - erstattet
	   af det separate submenu-panel (.site-header__nav-pane--submenu). */
	.site-header__mega-menu {
		display: none;
	}

	.site-header__submenu-back {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		margin-bottom: var(--space-2);
		padding-block: var(--space-2);
		background: none;
		border: 0;
		color: var(--us-design-white);
		font-family: var(--font-body);
		font-size: 1rem;
	}

	.site-header__submenu-back-icon {
		display: block;
		width: 0.6875rem;
		height: 0.875rem;
		transform: rotate(180deg); /* samme ikon som pilen, men vendt mod venstre */
	}

	.site-header__submenu-back-icon svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.site-header__submenu-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.site-header__submenu-item {
		border-bottom: 1px solid color-mix(in srgb, var(--us-design-white) 15%, transparent);
	}

	.site-header__submenu-item:last-child {
		border-bottom: 0;
	}

	.site-header__submenu-link,
	.site-header__submenu-link:visited {
		display: block;
		padding-block: var(--space-2);
		color: var(--us-design-white);
		font-family: var(--font-body);
		font-size: 1.125rem;
		font-weight: 300;
		text-decoration: none;
	}

	.site-header__submenu-link:hover,
	.site-header__submenu-link:focus-visible,
	.site-header__submenu-link.is-active,
	.site-header__submenu-link.is-active:visited {
		color: var(--us-design-orange);
	}
}

/* ==========================================================================
   08. Footer
   ========================================================================== */

.site-footer {
	color: var(--us-design-text);
	background: var(--us-design-white);
	border-top: 4px solid var(--us-design-orange);
}

.site-footer__main {
	position: relative;
	overflow: hidden;
	background-color: var(--us-design-white);
}

.site-footer__main::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	content: "";
	background-image:
		radial-gradient(circle at 52% 58%, rgba(255, 255, 255, 0.78) 0%, rgba(247, 244, 241, 0.72) 18%, rgba(225, 216, 213, 0.42) 42%, rgba(194, 177, 176, 0.56) 100%),
		linear-gradient(90deg, rgba(188, 168, 167, 0.68) 0%, rgba(232, 226, 223, 0.78) 47%, rgba(190, 170, 169, 0.7) 100%);
	background-position: center center;
	background-size: cover;
	opacity: 0.28;
}

.site-footer__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.55fr);
	gap: var(--space-8);
	width: 100%;
	max-width: var(--container-outer-max);
	min-height: 35rem;
	margin-inline: auto;
	padding: var(--space-10) var(--container-padding) var(--space-8);
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
	max-width: 26.25rem;
}

.site-footer__logo {
	display: inline-flex;
	margin-bottom: var(--space-5);
	line-height: 1;
	text-decoration: none;
}

.site-footer__logo-image {
	display: block;
	width: auto;
	height: 6.5rem;
}

.site-footer__description {
	max-width: 26rem;
	margin: 0 0 var(--space-6);
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-text);
}

.site-footer__contact-list {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__contact-link,
.site-footer__contact-link:visited {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--us-design-text);
	text-decoration: none;
}

.site-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 3rem;
	width: 3rem;
	height: 3rem;
	color: var(--us-design-text);
	transition: color 160ms ease;
}

.site-footer__contact-icon svg {
	display: block;
	width: 3rem;
	height: 3rem;
}

.site-footer__contact-text {
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0.05em;
	transition: color 160ms ease;
}

.site-footer__contact-link:hover .site-footer__contact-icon,
.site-footer__contact-link:focus-visible .site-footer__contact-icon {
	color: var(--us-design-purple);
}

.site-footer__contact-link:hover .site-footer__contact-text,
.site-footer__contact-link:focus-visible .site-footer__contact-text {
	color: var(--us-design-purple);
}

.site-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6);
	justify-self: end;
	width: 100%;
	max-width: 35rem;
}

.site-footer__nav-column {
	min-width: 0;
}

.site-footer__nav-title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--us-design-text);
}

.site-footer__nav-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__nav-link,
.site-footer__nav-link:visited {
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 300;
	line-height: 2;
	color: var(--us-design-text);
	text-decoration: none;
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible {
	color: var(--us-design-purple);
}

.site-footer__bottom {
	color: var(--us-design-white);
	background-color: var(--us-design-text);
	border-top: 4px solid var(--us-design-orange);
}

.site-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	max-width: var(--container-outer-max);
	min-height: 5.125rem;
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.site-footer__copyright {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-white);
}

.site-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
	max-width: 100%;
	align-items: center;
	gap: var(--space-2) var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__legal-link,
.site-footer__legal-link:visited {
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-white);
	text-decoration: none;
}

.site-footer__legal-link:hover,
.site-footer__legal-link:focus-visible {
	color: var(--us-design-orange);
}

/* The approved two-column legal bar is a tablet-only exception. */
@media (min-width: 768px) and (max-width: 1023px) {
    .site-footer__bottom-inner {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
        column-gap: var(--space-8);
        row-gap: var(--space-6);
        padding-block: var(--space-6);
    }
    .site-footer__copyright > span { display: block; }
    .site-footer__legal-list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
        text-align: left;
    }
}

@media (max-width: 1023px) {
	.site-footer__inner {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.site-footer__nav {
		justify-self: stretch;
		max-width: none;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.site-footer__inner {
		display: grid;
		grid-template-columns: 1.5fr 1.25fr 2.25fr;
		column-gap: var(--space-6);
		row-gap: var(--space-6);
		padding-top: var(--space-8);
		padding-bottom: var(--space-8);
	}

	.site-footer__brand {
		display: contents;
		max-width: none;
	}

	.site-footer__brand-content {
		grid-column: 1 / span 3;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.site-footer__logo {
		margin-bottom: var(--space-4);
	}

	.site-footer__description {
		max-width: 40rem;
		margin-bottom: 0;
		padding-right: 22%;
	}

	.site-footer__logo-image {
		width: auto;
		height: 7.25rem;
	}

	.site-footer__contact-link {
		gap: var(--space-2);
	}

	.site-footer__contact-icon {
		flex-basis: 2.75rem;
		width: 2.75rem;
		height: 2.75rem;
	}

	.site-footer__contact-icon svg {
		width: 2.75rem;
		height: 2.75rem;
	}

	.site-footer__contact-text {
		font-size: 1.125rem;
	}

	.site-footer__nav {
		display: contents;
		max-width: none;
	}

	.site-footer__nav-column--services {
		grid-column: 1;
	}

	.site-footer__nav-column--company {
		grid-column: 2;
	}

	.site-footer__nav-column--services .site-footer__nav-list {
		column-count: 1;
		column-gap: 0;
	}

	.site-footer__nav-column--services .site-footer__nav-list li {
		break-inside: auto;
	}

	.site-footer__nav-column--company .site-footer__nav-list {
		column-count: 1;
	}

	.site-footer__nav-title {
		margin-bottom: var(--space-3);
	}

	.site-footer__contact-list {
		grid-column: 3;
		grid-row: 2;
		display: grid;
		grid-auto-flow: row;
		gap: var(--space-2);
		align-self: start;
		justify-self: start;
	}
}

@media (max-width: 767px) {
	.site-footer__inner {
		gap: var(--space-6);
		padding-block: var(--space-8);
	}

	.site-footer__brand {
		row-gap: var(--space-6);
	}

	.site-footer__logo {
		display: inline-flex;
		margin-bottom: var(--space-3);
		line-height: 1;
		padding-right: 1.25rem;
		text-decoration: none;
	}

	.site-footer__nav {
		grid-template-columns: 1fr;
	}


	.site-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--space-2);
		padding-block: var(--space-5);
	}

	.site-footer__legal-list {
		flex-direction: row;
		align-items: center;
		gap: var(--space-2) 2rem;
	}

	.site-footer__contact-icon {
		flex-basis: 2.75rem;
		width: 2.75rem;
		height: 2.75rem;
	}

	.site-footer__contact-icon svg {
		width: 2.75rem;
		height: 2.75rem;
	}

	.site-footer__contact-text {
		font-size: 1.125rem;
	}
}

/* ==========================================================================
   09. Front page hero
   ========================================================================== */

.front-hero {
	display: flex;
	min-height: 54.375rem; /* 870px */
	background: var(--us-design-white);
}

.front-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-6);
	align-items: center;
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.front-hero__content {
	max-width: 35.625rem; /* 570px */
}

.front-hero__title {
	margin-block-end: var(--space-5);
	font-family: var(--font-heading);
	font-size: 4.5rem; /* 72px */
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--us-design-text);
}

.front-hero__subtitle {
	margin-block: 0 var(--space-5);
	font-family: var(--font-body);
	font-size: 2rem; /* 32px */
	font-weight: 700;
	line-height: 1.2;
	color: var(--us-design-purple);
}

.front-hero__text {
	max-width: 30.25rem; /* 484px */
	font-family: var(--font-body);
	font-size: 1.25rem; /* 20px */
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-text);
}

.front-hero__text p {
	line-height: inherit;
}

.front-hero__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 43.75rem; /* 700px */
}

.front-hero__image {
	width: 100%;
	min-height: 43.75rem; /* 700px */
	background: rgba(11, 18, 19, 0.08);
	border-radius: var(--radius-image);
	overflow: hidden;
}

.front-hero__photo {
	display: block;
	width: 100%;
	min-height: 43.75rem; /* 700px */
	object-fit: cover;
}

@media (max-width: 1023px) {
	.front-hero {
		min-height: auto;
	}

	.front-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--space-6);
		padding-block: var(--space-8);
		padding-bottom: var(--container-padding);
	}

	.front-hero__content {
		max-width: 42rem;
	}

	.front-hero__title {
		max-width: 36rem;
		font-size: var(--font-size-4xl);
	}

	.front-hero__subtitle {
		font-size: var(--font-size-xl);
	}

	.front-hero__text {
		width: 100%;
		max-width: none;
	}

	.front-hero__media {
		min-height: auto;
		justify-content: flex-start;
	}

	.front-hero__image {
		min-height: 0;
		aspect-ratio: 570 / 700;
		border-radius: var(--radius-image);
	}

	.front-hero__photo {
		width: 100%;
		height: 100%;
		min-height: 0;
		object-fit: cover;
	}
}

/* Luft til floating-contact-icons i højre side på tablet - kun selve
   introteksten, ikke hele containeren (den ramte ellers også billedet).
   Samme værdi som kategorisidernes .service-category-hero__text. */
@media (min-width: 768px) and (max-width: 1023px) {
	.front-hero__text,
	.front-hero-v2__text {
		max-width: 85%;
	}
}

@media (max-width: 767px) {
	.front-hero__inner {
		padding-block: var(--space-7);
		padding-bottom: var(--container-padding);
	}

	.front-hero__title {
		max-width: none;
		font-size: var(--font-size-3xl);
	}

	.front-hero__subtitle {
		font-size: var(--font-size-lg);
	}

	.front-hero__text {
		font-size: var(--font-size-md);
	}

	.front-hero__image {
		aspect-ratio: 4 / 5;
	}
}

/* ==========================================================================
   09B. Front page hero V2
   ========================================================================== */

.front-hero-v2 {
	position: relative;
	isolation: isolate;
	display: flex;
	min-height: 54.375rem; /* 870px */
	color: var(--us-design-text);
	background-color: #ffffff;
	background-image: none;
	overflow: visible;
}

.front-hero-v2::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	content: "";
	background-image:
		radial-gradient(circle at 52% 58%, rgba(255, 255, 255, 0.78) 0%, rgba(247, 244, 241, 0.72) 18%, rgba(225, 216, 213, 0.42) 42%, rgba(194, 177, 176, 0.56) 100%),
		linear-gradient(90deg, rgba(188, 168, 167, 0.68) 0%, rgba(232, 226, 223, 0.78) 47%, rgba(190, 170, 169, 0.7) 100%);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.8;
	pointer-events: none;
}

.front-hero-v2__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 35.625rem) minmax(0, 1fr);
	gap: var(--space-6);
	/* Var "center" — indholdet blev lodret centreret i den 870px høje
	   hero-boks (143px luft foroven, tilfældigt, ikke en bevidst værdi).
	   Top-justeret nu, med eksplicit 96px, samme Header→H1-afstand som
	   Om US DESIGN/Kontakt på desktop. */
	align-items: start;
	padding-top: var(--space-12); /* 96px */
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.front-hero-v2__content {
	max-width: 35.625rem; /* 570px */
}

.front-hero-v2__title {
	margin-block-end: var(--space-5);
	font-family: var(--font-heading);
	font-size: 4.5rem; /* 72px */
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--us-design-text);
	padding-right: var(--front-hero-title-pr, 0);
}

.front-hero-v2__subtitle {
	margin-block: 0 var(--space-5);
	font-family: var(--font-body);
	font-size: 2rem; /* 32px */
	font-weight: 700;
	line-height: 1.2;
	color: var(--us-design-purple);
	padding-right: 8rem;
}

.front-hero-v2__text {
	max-width: 30.25rem; /* 484px */
	font-family: var(--font-body);
	font-size: 1.25rem; /* 20px */
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-text);
}

.front-hero-v2__text p {
	line-height: inherit;
}

.front-hero-v2__media {
	position: absolute;
	/* Keep desktop scale; let the right edge crop as the window narrows. */
	right: calc(min(0px, 100% - var(--container-outer-max)) - 3rem);
	bottom: -1rem;
	z-index: 0;
	width: 42rem;
	pointer-events: none;
}

.front-hero-v2__portrait {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: bottom center;
}

@media (max-width: 1024px) {
	.front-hero-v2 {
		min-height: auto;
		overflow: hidden;
	}

	.front-hero-v2__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
		width: 100%;
		max-width: 100%;
		padding-block: var(--space-8) 0;
		overflow: hidden;
	}

	.front-hero-v2__content {
		max-width: 42rem;
	}

	.front-hero-v2__title {
		max-width: 36rem;
		font-size: var(--font-size-4xl);
		padding-right: var(--front-hero-title-pr-tablet, var(--front-hero-title-pr, 0));
	}

	.front-hero-v2__subtitle {
		font-size: var(--font-size-xl);
	}

	.front-hero-v2__text {
		width: 100%;
		max-width: none;
	}

	.front-hero-v2__media {
		position: relative;
		right: auto;
		bottom: auto;
		justify-self: center;
		width: min(80vw, 34rem);
		max-width: 100%;
		margin-top: 0;
		overflow: hidden;
	}
}

@media (max-width: 767px) {
	.front-hero-v2__inner {
		padding-block: var(--space-7) 0;
	}

	.front-hero-v2__title {
		max-width: none;
		font-size: var(--font-size-3xl);
		padding-right: var(--front-hero-title-pr-mobile, var(--front-hero-title-pr, 0));
	}

	.front-hero-v2__subtitle {
		font-size: var(--font-size-lg);
	}

	.front-hero-v2__text {
		font-size: var(--font-size-md);
	}

	.front-hero-v2__media {
		width: min(92vw, 28rem);
		margin-inline: auto;
	}
}

/* ==========================================================================
   10. Front page breaker
   ========================================================================== */

.frontpage-breaker {
	position: relative;
	z-index: 5;
	color: var(--us-design-white);
	background-color: var(--us-design-text);
}

.frontpage-breaker__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--space-12);
	padding-inline: var(--space-3);
	text-align: center;
}

.frontpage-breaker__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.25rem; /* 20px */
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--us-design-white);
}

@media (max-width: 767px) {
	.frontpage-breaker__inner {
		min-height: 7rem; /* 112px */
	}

	.frontpage-breaker__text {
		font-size: 0.6875rem;
		line-height: 1.4;
		letter-spacing: 0.16em;
		white-space: nowrap;
	}
}

/* ==========================================================================
   11. Front page featured projects
   ========================================================================== */

.frontpage-featured-projects {
	color: var(--us-design-text);
	background-color: var(--us-design-white);
}

.frontpage-featured-projects__inner {
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding: 5.5rem var(--container-padding) var(--space-10); /* 88px 32px 80px */
}

.frontpage-featured-projects__title {
	margin: 0 0 var(--space-8);
	font-family: var(--font-heading);
	font-size: var(--font-size-3xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--us-design-text);
}

.frontpage-featured-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	margin-bottom: 4.5rem; /* 72px */
}

.project-card {
	display: flex;
	flex-direction: column;
}

/* Hele kortets indhold løftes samlet; artiklens hover-område står stille. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.project-card > .project-card__image-link,
	.project-card > .project-card__content {
		transform: translate3d(0, 0, 0);
		transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.project-card:is(:hover, :focus-within) > .project-card__image-link,
	.project-card:is(:hover, :focus-within) > .project-card__content {
		transform: translate3d(0, -8px, 0);
	}
}

.project-card--tablet-only {
	display: none;
}

.frontpage-featured-projects__grid .project-card:nth-child(4) {
	display: none;
}

/* The homepage's explicit six-item layout keeps every card visible. */
.frontpage-featured-projects--six-items .frontpage-featured-projects__grid .project-card:nth-child(4) {
	display: flex;
}

@media (min-width: 1024px) {
	.frontpage-featured-projects--six-items .frontpage-featured-projects__grid {
		row-gap: var(--space-8);
	}
}

.project-card__image-link {
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-image);
	margin-bottom: var(--space-4);
	text-decoration: none;
}

.project-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 372 / 294;
	background: rgba(11, 18, 19, 0.08);
	border-radius: var(--radius-image);
	object-fit: cover;
}

.project-card--no-image .project-card__image-link {
	margin-bottom: var(--space-4);
}

.project-card--no-image .project-card__image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 372 / 294;
	background:
		linear-gradient(135deg, rgba(113, 21, 67, 0.055), rgba(11, 18, 19, 0.025) 56%, rgba(230, 166, 47, 0.05)),
		var(--us-design-white);
	border: 1px solid rgba(11, 18, 19, 0.07);
}

.project-card--no-image .project-card__image::after {
	content: "";
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-4);
	width: 2.5rem;
	height: 1px;
	background: rgba(113, 21, 67, 0.32);
}

.project-card__content {
	max-width: 19.5rem; /* 312px */
	padding-inline: var(--space-2);
}

.project-card__category {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: 0.8125rem; /* 13px */
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--us-design-purple);
}

.project-card__title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--us-design-text);
}

.project-card__company {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 5px 16px;
	font-family: var(--font-body);
	font-size: 0.875rem; /* 14px */
	font-weight: 700;
	line-height: 1.4;
	color: var(--us-design-white);
	background: transparent;
}

/* Blend only the band with its photograph; keep the lettering pure white. */
.project-card__company::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	content: "";
	background: rgba(11, 18, 19, 0.8);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.project-card__company-name {
	position: relative;
	z-index: 1;
}


.project-card__title a,
.project-card__title a:visited {
	color: inherit;
	text-decoration: none;
	transition: color 160ms ease;
}

.project-card__title a:hover,
.project-card__title a:focus-visible {
	color: var(--us-design-purple);
	text-decoration: none;
}

.project-card__excerpt {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-text);
}

.project-card__link,
.project-card__link:visited {
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 700;
	line-height: 1.4;
	color: var(--us-design-purple);
	text-decoration: none;
	transition: color 160ms ease;
}

.project-card__link:hover,
.project-card__link:focus-visible {
	color: var(--us-design-orange);
}


@media (max-width: 1023px) {
	.frontpage-featured-projects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.frontpage-featured-projects__inner {
		padding-top: var(--space-10);
	}

	.frontpage-featured-projects__grid .project-card:nth-child(4) {
		display: flex;
	}

	.frontpage-featured-projects__grid {
		column-gap: var(--space-4);
		row-gap: var(--space-8);
	}

	.project-card--tablet-only {
		display: flex;
	}
}

@media (max-width: 767px) {
	.frontpage-featured-projects__grid .project-card:nth-child(4) {
		display: none;
	}

	.frontpage-featured-projects__inner {
		padding-block: var(--space-8);
	}

	.frontpage-featured-projects__title {
		margin-bottom: var(--space-6);
		font-size: var(--font-size-2xl);
	}

	.frontpage-featured-projects__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.project-card__content {
		max-width: none;
	}

	.project-card--tablet-only {
		display: none;
	}
}

/* ==========================================================================
   12. Project templates
   ========================================================================== */

.project-hero,
.project-featured-image,
.project-description,
.project-media,
.testimonial-list,
.project-cta,
.project-related,
.project-bottom-nav,
.project-archive__header,
.project-archive__projects {
	color: var(--us-design-text);
	background-color: var(--us-design-white);
}

.client-case-cta {
	background-color: transparent;
}

.project-hero__inner,
.project-featured-image__inner,
.project-description__inner,
.project-media__inner,
.testimonial-list__inner,
.project-cta__inner,
.project-related__inner,
.project-bottom-nav__inner,
.project-archive__inner {
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.project-hero__inner {
	padding-block: var(--space-8) var(--space-5);
}

.project-back-link,
.project-back-link:visited {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--font-size-md);
	font-weight: 700;
	color: var(--us-design-purple);
	text-decoration: none;
	transition: color 160ms ease;
}

.project-back-link:hover,
.project-back-link:focus-visible {
	color: var(--us-design-orange);
}

.project-back-link--hero {
	margin-bottom: var(--space-6);
}

.project-hero__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
	gap: var(--space-7);
	align-items: start;
}

.project-hero__main {
	max-width: 48rem;
}

.project-hero__service {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	color: var(--us-design-purple);
}

.project-hero__service-icon {
	width: 2rem;
	height: 2rem;
	object-fit: contain;
}

.project-hero__service-name,
.project-cta__eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	line-height: 1.4;
	text-transform: uppercase;
}

.project-hero__title,
.project-archive__title {
	max-width: 52rem;
	margin: 0;
	font-size: var(--font-size-4xl);
	font-weight: 700;
	line-height: var(--line-height-tight);
}

.project-hero__intro {
	max-width: 44rem;
	margin-top: var(--space-3);
	font-size: var(--font-size-lg);
	font-weight: 300;
}

.project-hero__meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin: var(--space-3) 0 0;
	padding: var(--space-1) 0 var(--space-1) var(--space-6);
	border-left: 1px solid rgba(11, 18, 19, 0.18);
}

.project-hero__meta-item {
	margin: 0;
}

.project-hero__meta dt {
	margin-bottom: 0;
	font-size: var(--font-size-sm);
	font-weight: 700;
	color: var(--us-design-purple);
}

.project-hero__meta dd {
	margin: 0;
	font-size: var(--font-size-md);
	font-weight: 300;
}

.project-hero--project .project-hero__inner {
	padding-top: 110px;
}

.project-hero__title--project {
	margin-bottom: var(--space-6);
}

.project-hero--project .project-hero__service {
	margin-bottom: var(--space-4);
}

.project-hero--project .project-hero__intro {
	margin-top: 0;
}

.project-hero__back-link {
	margin-top: var(--space-5);
}

.client-case-hero__title {
	max-width: none;
	margin-top: 0;
	margin-bottom: var(--space-7);
	/* 15% er det hidtidige faste layout og fortsat fallback når feltet er
	   tomt – styres nu via client_case_hero_title_padding_right (ACF),
	   samme princip som service_hero_title_padding_right. */
	padding-right: var(--client-case-hero-title-pr, 15%);
}

.client-case-hero .project-hero__inner {
	padding-top: 100px;
	padding-bottom: 4.5rem; /* 72px */
}

.client-case-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-7);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--us-design-purple);
	text-decoration: none;
	transition: color 160ms ease;
}

.client-case-hero__eyebrow:hover,
.client-case-hero__eyebrow:focus-visible {
	color: var(--us-design-orange);
}

.client-case-hero__eyebrow-icon {
	display: block;
	width: auto;
	height: 4.5rem; /* 72px */
	object-fit: contain;
}

.client-case-hero .project-hero__content {
	column-gap: var(--space-8);
}

.client-case-hero .project-hero__main {
	max-width: none;
}

.client-case-hero .project-hero__intro {
	margin-top: 0;
	max-width: 46rem;
	font-size: 1.25rem; /* 20px */
	line-height: 1.45;
}

.client-case-hero__back-link-wrap {
	margin-top: var(--space-7);
}

.client-case-hero__back-link,
.client-case-hero__back-link:visited {
	color: #75848b;
	font-family: var(--font-body);
	font-size: 0.8125rem; /* 13px */
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 160ms ease;
}

.client-case-hero__back-link:hover,
.client-case-hero__back-link:focus-visible {
	color: var(--us-design-purple);
}

.client-case-hero__aside {
	padding: var(--space-1) 0 var(--space-1) var(--space-7);
	border-left: 1px solid rgba(11, 18, 19, 0.18);
}

.client-case-hero__logo {
	margin-bottom: var(--space-5);
}

.client-case-hero__logo-image {
	display: block;
	width: auto;
	max-width: 10rem;
	max-height: 5rem;
	object-fit: contain;
}

.client-case-hero .project-hero__meta {
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	border: 0;
}

.client-case-hero .project-hero__meta dt {
	margin-bottom: 0.25rem; /* 4px */
	font-size: 0.8125rem; /* 13px */
	font-weight: 700;
	letter-spacing: 0.3em;
	line-height: 1.4;
	text-transform: uppercase;
}

.client-case-hero .project-hero__meta dd {
	font-size: 1.125rem; /* 18px */
	line-height: 1.45;
}

.client-case-hero .project-hero__meta a {
	color: var(--us-design-text);
	text-decoration: none;
	transition: color 160ms ease;
}

.client-case-hero .project-hero__meta a:hover,
.client-case-hero .project-hero__meta a:focus-visible {
	color: var(--us-design-orange);
}

.client-case-hero__meta-line {
	display: block;
}

.client-case-description__content {
	max-width: 50rem;
	margin-inline: auto;
	font-size: var(--font-size-lg);
	line-height: 1.62;
}

.client-case-single .project-featured-image__inner {
	padding-block: 0;
}

.client-case-single .project-description__inner {
	padding-block: var(--space-7) var(--space-4);
}

.client-case-description__content > :first-child {
	margin-top: 0;
}

.client-case-description__content > :last-child {
	margin-bottom: 0;
}

.client-case-media .project-media__inner {
	padding-block: var(--space-4);
}

/* NB: .project-media__section + .project-media__section (32px) er nu ens i
   base-reglen for både Client Case og Project – den tidligere
   client-case-media-specifikke override (samme værdi) og dens
   layout-par-specifikke gentagelse er fjernet som overflødige. */

.client-case-media .project-media__editorial-media-grid-media {
	margin-block: 0;
}

.client-case-media .project-media__editorial-media-grid-content {
	padding-block: var(--space-5);
}

.client-case-media .project-media__section--editorial-text {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	column-gap: var(--space-4);
	max-width: none;
	margin: 0;
	padding-block: var(--space-8);
}

.client-case-media .project-media__section--editorial-text .project-media__heading {
	grid-column: 3 / span 6;
	margin-bottom: var(--space-5);
}

.client-case-media .project-media__section--editorial-text .project-media__subheading,
.client-case-media .project-media__section--editorial-text .project-media__text {
	grid-column: 3 / span 4;
}

/* 2 sp / 3 sp Editorial text: 40px fra H2 ned til body-wrapper */
.client-case-media .project-media__section--editorial-text-columns {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);           /* 40px: H2 → body-wrapper */
	margin: 0;
	padding: var(--space-8) var(--space-9); /* 64px + 32px globalt element-gap = 96px samlet luft */
}

/* Nulstil browser-standard H2-margin inden for sektionen */
.client-case-media .project-media__section--editorial-text-columns .project-media__heading {
	margin: 0;
}

/* Body-wrapper: 32px fra H4 ned til spalterækken */
.client-case-media .project-media__editorial-text-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);           /* 32px: H4 → spalterække */
}

/* Nulstil browser-standard H4-margin */
.client-case-media .project-media__editorial-text-body .project-media__subheading {
	margin: 0;
}

/* Spalterække, 2 kolonner: 100px gap */
.client-case-media .project-media__section--editorial-text-columns-2 .project-media__editorial-text-columns-row {
	display: flex;
	gap: 6.25rem;                  /* 100px */
}

/* Spalterække, 3 kolonner: 64px gap */
.client-case-media .project-media__section--editorial-text-columns-3 .project-media__editorial-text-columns-row {
	display: flex;
	gap: var(--space-8);           /* 64px */
}

/* Editorial text + quote: vandret to-kolonne layout, 32px gutter (matcher editorial-media) */
.client-case-media .project-media__section--editorial-text-quote {
	display: flex;
	gap: var(--space-4);           /* 32px gutter + 72px tekstindryk = 104px effektivt hul */
	margin: 0;
	padding: var(--space-8) var(--space-9); /* 64px + 32px globalt element-gap = 96px samlet luft */
}

/* Tekstblok: flex-kolonne med 40px gap (H2 → H4 → tekst), fylder tilgængeligt rum */
.client-case-media .project-media__editorial-text-quote-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);           /* 40px */
	flex: 1;
}

/* Citat-kolonne: fast bredde ~35% så tekstblokken får mere plads */
.client-case-media .project-media__section--editorial-text-quote .project-media__editorial-quote {
	flex: 0 0 35%;
}

/* Citat venstre, tekst højre: tekstblok indrykkes 72px fra gabet */
.client-case-media .project-media__section--quote-left .project-media__editorial-text-quote-content {
	padding-left: var(--space-9);
}

/* Tekst venstre, citat højre: tekstblok indrykkes 72px mod gabet */
.client-case-media .project-media__section--quote-right .project-media__editorial-text-quote-content {
	padding-right: var(--space-9);
}

/* Quote-only: fuld bredde, optisk centrering med mere luft i bund */
.client-case-media .project-media__section--quote-only {
	display: block;
	padding: 4rem 25% 4.5rem 9rem;
}

.client-case-media .project-media__section--quote-only .project-media__editorial-quote {
	flex: none;
	align-self: auto;
	width: 100%;
}

/* Nulstil browser-standard heading-margins i quote-sektionen */
.client-case-media .project-media__section--editorial-text-quote .project-media__heading,
.client-case-media .project-media__section--editorial-text-quote .project-media__subheading {
	margin: 0;
}

.client-case-media .project-media__section--quote-left .project-media__editorial-quote {
	order: 1;
}

.client-case-media .project-media__section--quote-left .project-media__editorial-text-quote-content {
	order: 2;
}

.client-case-media .project-media__editorial-quote {
	display: flex;
	flex-direction: column;
	align-self: start;
	color: var(--us-design-grey);
}

.client-case-media .project-media__section--quote-align-center .project-media__editorial-quote {
	align-self: center;
}

.client-case-media .project-media__section--quote-align-bottom .project-media__editorial-quote {
	align-self: end;
}

.client-case-media .project-media__editorial-quote-mark {
	display: block;
	width: 4.125rem;
	margin-bottom: var(--space-4);
	color: var(--us-design-orange);
}

.client-case-media .project-media__editorial-quote-mark svg {
	display: block;
	width: 100%;
	height: auto;
}

.client-case-media .project-media__editorial-quote-text {
	font-family: var(--font-body);
	font-size: 1.25rem;       /* 20px */
	font-style: italic;
	font-weight: 300;
	line-height: 1.6;         /* 32px */
	color: var(--us-design-grey);
}

.client-case-media .project-media__editorial-quote-text > :first-child,
.client-case-media .project-media__editorial-quote-text > :last-child {
	margin-block: 0;
}

.client-case-media .project-media__editorial-quote-attribution {
	display: grid;
	gap: var(--space-1);
	margin-top: var(--space-4);
	font-size: 0.875rem;
	line-height: 1.4;
}

.client-case-media .project-media__editorial-quote-name {
	font-weight: 600;
	color: var(--us-design-purple);
}

.client-case-media .project-media__grid {
	gap: var(--space-4);
}

.client-case-media .project-media__heading {
	margin-bottom: var(--space-5);
}

.client-case-media .project-media__text p + p {
	margin-top: var(--space-2);
}

.client-case-media .project-media__section--text-block {
	max-width: 50rem;
	padding-block: var(--space-3);
	font-size: 1rem; /* 16px */
	line-height: 1.4; /* 22.4px */
}

.client-case-media .project-media__section--text-block h2 {
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-3xl);
	font-weight: 700;
	line-height: var(--line-height-tight);
}

.client-case-media .project-media__section--text-block h3 {
	margin: var(--space-6) 0 var(--space-3);
	font-size: var(--font-size-xl);
	font-weight: 700;
	line-height: 1.24;
	color: var(--us-design-purple);
}

.client-case-media .project-media__section--text-block > :first-child {
	margin-top: 0;
}

.client-case-media .project-media__section--text-block > :last-child {
	margin-bottom: 0;
}

.client-case-media .project-media__section--editorial-text {
	max-width: none;
	padding-block: var(--space-8);
}

.client-case-media .project-media__caption {
	margin-inline: auto;
}

.client-case-related-projects .project-related__inner {
	padding-block: var(--space-12) var(--space-12);
}

.client-case-related-projects .project-related__title {
	margin-bottom: var(--space-5);
}

.front-testimonial--client-case .front-testimonial__inner {
	min-height: 30rem;
}

.client-case-cta {
	background: none;
	padding-inline: var(--container-padding);
	padding-block: 0;
}

.client-case-cta .project-cta__inner {
	max-width: var(--container-max);
	background-color: var(--us-design-text);
	border-radius: var(--radius-image);
	padding: var(--space-9);
	color: var(--us-design-white);
}

.client-case-cta .button--primary,
.client-case-cta .button--primary:visited {
	background: var(--us-design-orange);
	border-color: var(--us-design-orange);
	color: var(--us-design-white);
}

.client-case-cta .button--primary:hover,
.client-case-cta .button--primary:focus-visible {
	background: var(--us-design-purple);
	border-color: var(--us-design-purple);
	color: var(--us-design-white);
}

.client-case-cta .project-cta__text {
	margin-bottom: var(--space-5);
}

/* Inner: ingen padding – fordeles på content og ikonkolonne */
.client-case-cta .project-cta__inner {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding: 0;
	overflow: hidden; /* clip til card border-radius */
}

.client-case-cta__content {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--space-9);
}

/* Ikonkolonne: højde styres af JS (se client-case-cta.php), bredde = halvdelen af højden */
.client-case-cta__quick-icons {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	flex: 0 0 auto;
}

.client-case-cta__quick-icon,
.client-case-cta__quick-icon:visited {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--us-design-text);
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.client-case-cta__quick-icon:hover,
.client-case-cta__quick-icon:focus-visible {
	background-color: var(--us-design-orange);
}

.client-case-cta__quick-icon-img {
	display: block;
	width: 2.5rem; /* 40px – dobbelt størrelse */
	height: 2.5rem;
	color: var(--us-design-white);
}

.client-case-cta__quick-icon-img svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media (max-width: 1023px) {
	.client-case-cta .project-cta__inner {
		display: block;
		padding: var(--space-7);
		padding-right: 20%;
		padding-bottom: var(--space-8);
	}

	.client-case-cta__content {
		padding: 0;
	}

	.client-case-cta__quick-icons {
		display: none;
	}
}

.cta-label--mobile { display: none; }
.cta-label--desktop { display: inline; }

.project-featured-image__inner,
.project-description__inner,
.project-media__inner,
.testimonial-list__inner,
.project-related__inner,
.project-bottom-nav__inner {
	padding-block: var(--space-6);
}

.project-featured-image__inner {
	padding-block: var(--space-7) var(--space-6);
}

.project-description__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-6);
	row-gap: var(--space-5);
}

.project-description__heading {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-lg);
	font-weight: 700;
	color: var(--us-design-purple);
}

.project-description__content {
	font-size: var(--font-size-md);
	font-weight: 300;
	line-height: var(--line-height-base);
}

.project-description__content > * {
	margin-block: 0;
}

.project-description__content > * + * {
	margin-top: var(--space-3);
}

.project-media__inner {
	padding-block: var(--space-6) var(--space-8);
}

/* A featured image followed directly by media uses the shared 32px rhythm. */
.project-featured-image:has(+ .project-media) .project-featured-image__inner {
	padding-bottom: 0;
}

.project-featured-image + .project-media .project-media__inner {
	padding-top: var(--space-4);
}

.project-featured-image__figure,
.project-media__section,
.project-media__gallery-item {
	margin: 0;
}

a.glightbox:has(.project-media__image),
a.glightbox:has(.project-featured-image__image) {
	display: block;
	height: 100%;
}

.glightbox-container .gslide-image img[src$=".svg"] {
	width: auto;
	height: auto;
	max-width: 90vw;
	max-height: 85vh;
	min-width: 80vw;
}

.project-featured-image__image,
.project-media__image {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--radius-image);
}

.project-featured-image__image {
	aspect-ratio: 16 / 10;
}

.project-media__image {
	aspect-ratio: 1170 / 780;
}

/* Canonical desktop section-gap for hele content-motoren (client_case +
   project, delt via us_design_render_media_sections()): 32px. Var tidligere
   64px her (kun Project ramte denne base-regel – Client Case havde sin egen
   .client-case-media-override på 32px, se historik). Harmoniseret så begge
   post-typer bruger samme værdi – de tidligere .client-case-media-specifikke
   overrides er fjernet som overflødige (samme værdi som base nu). */
.project-media__section + .project-media__section {
	margin-top: var(--space-4);
}

.project-media__grid {
	display: grid;
	gap: var(--space-4);
}

.project-media__grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-media__grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-media__caption {
	max-width: 48rem;
	margin-top: var(--space-2);
	font-size: var(--font-size-sm);
	font-weight: 300;
	line-height: 1.5;
}

.project-media__section--text-block {
	max-width: 48rem;
	margin-inline: auto;
	padding-block: var(--space-4);
	font-size: var(--font-size-lg);
	font-weight: 300;
}

.project-media__section--text-block p {
	margin-block: 0;
}

.project-media__section--text-block p + p {
	margin-top: var(--space-4);
}

.project-media__section--editorial-text {
	max-width: 48rem;
	margin-inline: auto;
	padding-block: var(--space-4);
	font-weight: 300;
}

.project-media__heading {
	margin: 0 0 var(--space-3);
	padding-right: var(--case-heading-padding-desktop, 0);
	font-size: var(--font-size-3xl);
	font-weight: 700;
	line-height: var(--line-height-tight);
}

.project-media__subheading {
	margin: 0 0 var(--space-4);
	padding-right: var(--case-subheading-padding-desktop, 0);
	font-size: var(--font-size-xl);
	font-weight: 700;
	line-height: 1.24;
	color: var(--us-design-purple);
}

.project-media__text {
	font-size: 1rem; /* 16px */
	line-height: 1.4; /* 22.4px */
}

.project-media__text > h3 {
	margin: var(--space-4) 0 var(--space-2);
}

.project-media__text > :first-child {
	margin-top: 0;
}

.project-media__text > :last-child {
	margin-bottom: 0;
}

.project-media__text p {
	margin-block: 0;
}

.project-media__text p + p {
	margin-top: var(--space-4);
}

.project-media__text ul,
.project-media__text ol {
	margin: var(--space-4) 0 0;
	padding-left: 1.4em;
}

.project-media__text li + li {
	margin-top: var(--space-1);
}

.project-media__section--editorial-media-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	align-items: stretch;
}

.project-media__section--editorial-media-grid.project-media__section--media-right .project-media__editorial-media-grid-media {
	order: 2;
}

.project-media__section--editorial-media-grid.project-media__section--media-right .project-media__editorial-media-grid-content {
	order: 1;
}

.project-media__editorial-media-grid-media {
	display: grid;
	grid-template-rows: minmax(22.25rem, 1fr) minmax(22.25rem, 1fr);
	gap: var(--space-4);
	align-self: stretch;
	margin-block: var(--space-4);
}

.project-media__editorial-media-grid-top,
.project-media__editorial-media-grid-bottom {
	min-height: 0;
}

.project-media__editorial-media-grid-top .project-media__image {
	height: 100%;
	aspect-ratio: auto;
}

.project-media__editorial-media-grid-bottom {
	display: grid;
	grid-template-columns: minmax(0, 360fr) minmax(0, 178fr);
	gap: var(--space-4);
	align-items: start;
	height: 100%;
}

.project-media__editorial-media-grid-large {
	height: 100%;
}

.project-media__editorial-media-grid-large .project-media__image {
	height: 100%;
	aspect-ratio: auto;
}

.project-media__editorial-media-grid-small .project-media__image {
	aspect-ratio: 1 / 1;
}

.project-media__section--editorial-media-grid.project-media__section--media-left .project-media__editorial-media-grid-bottom {
	grid-template-columns: minmax(0, 178fr) minmax(0, 360fr);
}

.project-media__section--editorial-media-grid.project-media__section--media-left .project-media__editorial-media-grid-large {
	grid-column: 2;
}

.project-media__section--editorial-media-grid.project-media__section--media-left .project-media__editorial-media-grid-small {
	grid-column: 1;
	grid-row: 1;
}

.project-media__editorial-media-grid-content {
	padding: var(--space-9);
}

.project-media__section--editorial-media,
.project-media__section--image-text {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
	align-items: stretch;
}

.project-media__section--media-right .project-media__editorial-media-asset,
.project-media__section--media-right .project-media__image-text-media {
	order: 2;
}

.project-media__section--media-right .project-media__editorial-media-content,
.project-media__section--media-right .project-media__image-text-content {
	order: 1;
}

.project-media__editorial-media-asset {
	margin: 0;
}

.project-media__editorial-media-asset .project-media__image,
.project-media__editorial-media-asset .project-media__video,
.project-media__editorial-media-asset .project-media__video-file {
	height: 100%;
	min-height: 20rem;
}

/* Lodret: 40px (matcher canonical section-rytme: 32px section-gap + 40px
   intern top/bund = 72px samlet, samme som .project-media__text-scroll-content).
   Vandret: uændret 72px (læsbarheds-gutter mod billedet, uden for denne
   opgaves scope – kun den lodrette rytme rettes her). */
.project-media__editorial-media-content {
	align-self: center;
	padding: var(--space-5) var(--space-9);
}

.project-media__image-text-media {
	min-height: calc(20rem + var(--space-4) + 20rem);
	margin: 0;
}

.project-media__image-text-stack {
	display: grid;
	gap: var(--space-4);
	height: 100%;
}

.project-media__image-text-stack--1 {
	grid-template-rows: minmax(20rem, 1fr);
}

.project-media__image-text-stack--2 {
	grid-template-rows: repeat(2, minmax(20rem, 1fr));
}

.project-media__image-text-item {
	min-height: 20rem;
}

.project-media__image-text-item .project-media__image {
	height: 100%;
	aspect-ratio: 16 / 10;
}

/* Kun desktop: gør billed-stackens højde tekst-drevet i stedet for
   aspect-ratio-drevet. Tekstkolonnens naturlige højde (40px top + indhold +
   40px bund) skal bestemme rækkens højde; billed-stacken stretcher til
   samme højde og de to billeder deler den ligeligt (grid 1fr/1fr).
   .project-media__image-text-media's egen min-height (672px, uændret
   herover) forbliver en sekundær gulv-værdi for meget korte tekster.

   aspect-ratio: auto blev testet og gav en alvorlig cirkulær layout-fejl i
   denne indlejrede grid-i-grid-struktur (sektionen eksploderede til
   ~3000px). Løsningen er i stedet position: absolute på billedet – samme
   etablerede teknik som .project-media__scroll-image bruger til at fjerne
   et billede fra at bidrage til sin grid-rækkes egen intrinsic/auto højde.
   Billedets item-wrapper får position: relative + overflow: hidden som
   positioneringskontekst/beskæring; object-fit: cover (uændret, arvet fra
   den delte .project-media__image-regel) sikrer stadig beskæring uden
   forvrængning.

   Scopet til ≥1024px – tablet/mobil beholder deres eksisterende,
   fungerende aspect-ratio-drevne billedhøjde uændret (stacked layout, egen
   min-height: 20rem pr. billede), så de ikke risikerer unaturligt flade
   billeder ved denne ændring. */
@media (min-width: 1024px) {
	.project-media__image-text-stack--1 {
		grid-template-rows: minmax(0, 1fr);
	}

	.project-media__image-text-stack--2 {
		grid-template-rows: repeat(2, minmax(0, 1fr));
	}

	.project-media__image-text-item {
		min-height: 0;
		position: relative;
		overflow: hidden;
	}

	.project-media__image-text-item .project-media__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
}

/* Samme lodrette 40px-rytme som .project-media__editorial-media-content
   herover – vandret 72px-gutter uændret. */
.project-media__image-text-content {
	align-self: stretch;
	padding: var(--space-5) var(--space-9);
}

/* ==========================================================================
   Text + scrollende website-billede (delt layout, project + client_case)
   ========================================================================== */

.project-media__section--text-scroll-image {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4); /* 32px – tættest eksisterende token på Figmas 30px */
	align-items: stretch;
}

.project-media__section--text-scroll-image.project-media__section--media-right .project-media__text-scroll-content {
	order: 1;
}

.project-media__section--text-scroll-image.project-media__section--media-right .project-media__scroll-viewport {
	order: 2;
}

.project-media__section--text-scroll-image.project-media__section--media-left .project-media__text-scroll-content {
	order: 2;
}

.project-media__section--text-scroll-image.project-media__section--media-left .project-media__scroll-viewport {
	order: 1;
}

/* Intet billede endnu: teksten fylder hele bredden i stedet for en tom kolonne. */
.project-media__section--text-scroll-image-no-asset {
	grid-template-columns: 1fr;
}

.project-media__text-scroll-content {
	align-self: center;
	padding-block: var(--space-5); /* ca. 40px, jf. Figma */
}

/* "Tekstindhold ligger ca. 70px inde fra kolonnens kant" – kun på ydersiden,
   ikke på gap-siden (den luft leverer grid-gap allerede). */
.project-media__section--text-scroll-image.project-media__section--media-right .project-media__text-scroll-content {
	padding-inline: var(--space-9) 0; /* ca. 70px */
}

.project-media__section--text-scroll-image.project-media__section--media-left .project-media__text-scroll-content {
	padding-inline: 0 var(--space-9);
}

.project-media__scroll-viewport {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-image);
	background-color: var(--us-design-light-grey);
}

/* Højden bestemmes af tekstkolonnen (grid align-items: stretch) – aldrig
   hardcodet til et Figma-eksempels px-mål.
   Billedet er position: absolute, så det IKKE bidrager til grid-rækkens
   egen intrinsic/auto højde. Uden dette ville et meget langt screenshot
   (fx 1170×4106) tvinge hele rækken til at vokse til billedets fulde
   højde, selvom .scroll-viewport har overflow: hidden – overflow alene
   nulstiller kun grid-items MINIMUMSstørrelse, ikke dets bidrag til
   auto-rækkens max-content-vækst. absolute positionering fjerner billedet
   fra flowet helt, så .scroll-viewport (nu uden eget indhold i flow)
   korrekt kan strække sig til rækkens højde i stedet. */
.project-media__scroll-image {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	transition: transform 900ms ease;
	will-change: transform;
}

a.project-media__scroll-lightbox-trigger {
	display: block;
	height: 100%;
}

/* Fuld bredde-varianten har ingen tekstkolonne at stretche imod (se
   project-media__section--scroll-image-full), så højden skal styres af et
   aspect-ratio i stedet. 1170 / 780 genbruger samme forhold som det generelle
   fuld-bredde-billede (.project-media__image) – jf. eksisterende
   full-width media-sections. Gælder også på tablet, ligesom
   text_scroll_image beholder sit 2-kolonne-stretch til og med 1023px.
   Samme specificitet som base-klassen herover, så ≤767px-reglen for
   .project-media__scroll-viewport (aspect-ratio: 4/3) fortsat vinder på
   kildeorden dernede. */
.project-media__scroll-viewport--full {
	aspect-ratio: 1170 / 780;
}

/* Hover-scroll er kun for pointere der reelt har hover (mus/trackpad) og kun
   når brugeren ikke har bedt om reduceret bevægelse. Distance/varighed sættes
   som CSS custom properties af js/scroll-image.js ud fra den faktisk
   renderede billedhøjde – aldrig hardcodet. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.project-media__scroll-viewport:hover .project-media__scroll-image {
		transform: translateY(calc(-1 * var(--scroll-distance, 0px)));
		transition-duration: var(--scroll-duration, 4s);
		transition-timing-function: linear;
	}

	.project-media__scroll-viewport:hover .project-media__scroll-indicator {
		opacity: 0.35;
	}
}

/* Touch: ingen hover-simulering. Viewporten er selv scrollbar med fingeren. */
@media (hover: none) {
	.project-media__scroll-viewport {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.project-media__scroll-indicator {
	position: absolute;
	right: var(--space-2);
	bottom: var(--space-2);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.375rem;
	border-radius: 999px;
	background-color: rgba(11, 18, 19, 0.55);
	color: var(--us-design-white);
	opacity: 0.7;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.project-media__scroll-indicator svg {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	transform: rotate(90deg);
}

.project-media__scroll-indicator svg:first-child {
	margin-bottom: -2px;
}

/* Touch-enheder styrer selv scroll ved berøring – indikatoren er overflødig
   støj, når der alligevel ikke er noget hover-anslag at signalere. */
@media (hover: none) {
	.project-media__scroll-indicator {
		display: none;
	}
}

.project-media__section--gallery {
	margin-inline: auto;
}

.project-media__gallery-grid {
	display: grid;
	gap: var(--space-4);
}

.project-media__section--gallery-balanced .project-media__gallery-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-media__section--gallery-stacked .project-media__gallery-grid {
	grid-template-columns: 1fr;
	max-width: 58rem;
	margin-inline: auto;
}

.project-media__section--gallery-mosaic .project-media__gallery-grid {
	grid-template-columns: repeat(12, minmax(0, 1fr));
}

.project-media__section--gallery-mosaic .project-media__gallery-item {
	grid-column: span 4;
}

.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 1),
.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 6) {
	grid-column: span 7;
}

.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 2),
.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 5) {
	grid-column: span 5;
}

.project-media__section--gallery .project-media__image {
	height: 100%;
}

.project-media__section--gallery-balanced .project-media__image,
.project-media__section--gallery-mosaic .project-media__image {
	aspect-ratio: 4 / 3;
}

.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 1) .project-media__image,
.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 6) .project-media__image {
	aspect-ratio: 16 / 10;
}

.project-media__video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-image);
	background: rgba(11, 18, 19, 0.08);
}

.project-media__video-file {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--radius-image);
	background: rgba(11, 18, 19, 0.08);
}

.project-media__video iframe,
.project-media__video embed,
.project-media__video object,
.project-media__video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.project-media__gallery {
	display: grid;
	gap: var(--space-4);
}

.testimonial-list__inner {
	padding-block: var(--space-6);
}

.testimonial-list--inline .testimonial-list__inner {
	max-width: none;
	padding: 0;
}

.testimonial-list__item {
	max-width: 48rem;
	margin: 0;
}

.testimonial-list__item + .testimonial-list__item {
	margin-top: var(--space-5);
}

.testimonial-list__quote {
	margin: 0;
	font-size: var(--font-size-lg);
	font-weight: 300;
	line-height: var(--line-height-base);
}

.testimonial-list__author {
	margin-top: var(--space-3);
}

.testimonial-list__logo {
	display: block;
	width: auto;
	max-width: 10rem;
	max-height: 4rem;
	margin-bottom: var(--space-3);
	object-fit: contain;
}

.project-cta__inner {
	padding-block: var(--space-10);
}

.project-cta__title,
.project-related__title {
	max-width: 44rem;
	margin: 0 0 var(--space-4);
	font-size: var(--font-size-3xl);
	font-weight: 700;
	line-height: var(--line-height-tight);
}

.project-cta__text {
	max-width: 42rem;
	margin-bottom: var(--space-4);
	font-size: var(--font-size-lg);
	font-weight: 300;
}

.project-related__grid,
.project-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--space-4);
	row-gap: var(--space-8); /* Match the homepage's 64px row spacing. */
}

/* Desktop: skjul enkelt orphan sidst i rækken (4, 7 items osv.) */
@media (min-width: 1024px) {
	.client-case-related-projects .project-related__grid > *:nth-child(3n+1):last-child:not(:only-child) {
		display: none;
	}
}

/* Tablet: 2 kolonner, max 6 items, skjul orphan hvis total er ulige */
@media (max-width: 1023px) {
	.client-case-related-projects .project-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.client-case-related-projects .project-related__grid > *:nth-child(n+7) {
		display: none;
	}

	.client-case-related-projects .project-related__grid > *:nth-child(odd):last-child:not(:only-child) {
		display: none;
	}
}

/* Mobil: 1 kolonne, max 6 items */
@media (max-width: 767px) {
	.client-case-related-projects .project-related__grid {
		grid-template-columns: 1fr;
	}

	.client-case-related-projects .project-related__grid > *:nth-child(n+7) {
		display: none;
	}

	.client-case-related-projects .project-related__grid > *:nth-child(odd):last-child:not(:only-child) {
		display: revert;
	}
}

.project-bottom-nav__inner {
	padding-bottom: var(--space-10);
}

.project-archive__inner {
	padding-block: var(--space-10);
}

.project-archive__header .project-archive__inner {
	padding-bottom: var(--space-5);
}

.project-archive__projects .project-archive__inner {
	padding-top: var(--space-5);
	padding-bottom: calc( var(--space-10) + 2rem );
}

.client-case-archive .project-archive__header .project-archive__inner {
	padding-top: 110px;
}

.project-archive__description {
	max-width: 48rem;
	margin-top: var(--space-8); /* 64px - samme afstand som Grafisk Design/Kontakt/Om US DESIGN */
	font-size: var(--font-size-lg);
	font-weight: 300;
}

/* Portfolio-filtre (type + servicekategori) — pill-links, ingen JS krævet.
   Ingen egen padding-block: header-sektionen bidrager allerede med bunden
   (--space-5), og grid-sektionen bidrager med toppen (--space-5) — ellers
   lægges afstanden dobbelt (jf. CLAUDE.md om dobbelt-lagt sektionspadding). */
.portfolio-filters .project-archive__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding-block: 0;
}

.portfolio-filters__group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.portfolio-filters__pill,
.portfolio-filters__pill:visited {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--us-design-light-grey);
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--us-design-text);
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.portfolio-filters__pill:hover,
.portfolio-filters__pill:focus-visible {
	border-color: var(--us-design-purple);
	color: var(--us-design-purple);
}

.portfolio-filters__pill.is-active {
	border-color: var(--us-design-purple);
	background-color: var(--us-design-purple);
	color: var(--us-design-white);
}

/* Nummereret paginering (paginate_links) på Portfolio-oversigten. */
.project-archive__pagination {
	margin-top: var(--space-6);
}

.project-archive__pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.project-archive__pagination .page-numbers li {
	display: flex;
}

.project-archive__pagination .page-numbers a,
.project-archive__pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-2);
	border: 1px solid var(--us-design-light-grey);
	border-radius: var(--radius-image);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: 600;
	color: var(--us-design-text);
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.project-archive__pagination .page-numbers a:hover,
.project-archive__pagination .page-numbers a:focus-visible {
	border-color: var(--us-design-purple);
	color: var(--us-design-purple);
}

.project-archive__pagination .page-numbers .current {
	border-color: var(--us-design-purple);
	background-color: var(--us-design-purple);
	color: var(--us-design-white);
}

/* Luft til floating-contact-icons i højre side på tablet - kun selve
   introteksten, ikke hele header-containeren (den ramte ellers også
   overskriften, som allerede har sin egen padding-right). Samme værdi
   som kategorisidernes .service-category-hero__text. */
@media (min-width: 768px) and (max-width: 1023px) {
	.project-archive__description {
		max-width: 85%;
	}

	/* Samme overskriftsstørrelse og header-afstand som kategorisiderne
	   (.service-category-hero__title / __inner). Gælder også Portfolio-
	   arkivet (uden .client-case-archive) — manglede denne reduktion før,
	   og var derfor fastfrosset på desktops 80px på tablet. */
	.client-case-archive .project-archive__header .project-archive__inner,
	.project-archive__header .project-archive__inner {
		padding-top: var(--space-9); /* 72px */
	}

	.project-archive__title {
		font-size: var(--font-size-3xl); /* 3rem / 48px */
	}

	/* CTA-overskriften (delt på tværs af Om US DESIGN, Kontakt/Grafisk
	   design, Kundecase-single, Kundecase-arkiv, Service-kategori og
	   Projekt-single) manglede en tablet-reduktion og forblev på desktops
	   48px alle steder undtagen Om US DESIGN, hvor den ved et tilfælde blev
	   32px via .about-page h2. Om US DESIGN's størrelse er den rigtige —
	   gjort eksplicit og ens for alle sider her i stedet for at være en
	   utilsigtet sideeffekt. */
	.project-cta__title,
	.project-related__title {
		font-size: var(--font-size-2xl); /* 32px */
	}
}

@media (max-width: 1023px) {
	.project-hero__content,
	.project-description__grid,
	.project-related__grid,
	.project-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.project-hero__content {
		grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem);
	}

	/* Teksten skal justere sig efter kolonnebredden, ikke et fast mål —
	   312px passede kun til desktops kolonner, og efterlod 24-90px ubrugt
	   plads i 2-kolonne-gridet på tablet (336-402px brede kolonner). */
	.project-card__content {
		max-width: none;
	}

	.client-case-media .project-media__grid--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.project-media__heading {
		padding-right: var(--case-heading-padding-tablet, var(--case-heading-padding-desktop, 0));
	}

	.project-media__subheading {
		padding-right: var(--case-subheading-padding-tablet, var(--case-subheading-padding-desktop, 0));
	}

	.project-media__section--gallery-balanced .project-media__gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.client-case-hero .project-hero__inner {
		padding-top: var(--space-8);
	}

	.client-case-hero__title {
		padding-right: var(--client-case-hero-title-pr-tablet, 15%);
	}

	/* Generisk for hele content-motoren (client_case + project), ikke kun
	   Client Case – todelte sektioner stacker til én kolonne på tablet.
	   Rækkefølgen bestemmes IKKE her – den eksisterende, position-bevidste
	   order-regel (media-right sætter explicit order; media-left får
	   billede-først via sin egen DOM-rækkefølge) er unscoped og gælder
	   derfor allerede korrekt på tablet. En tidligere version af denne
	   regel tvang content altid til order: 1, hvilket vendte media-left
	   sektioner forkert (billede endte efter teksten, modsat desktop). */
	.project-media__image-text-content,
	.project-media__editorial-media-grid-content {
		padding-left: var(--space-4);
		padding-right: calc(var(--space-4) + 12%);
	}

	.project-media__section--image-text,
	.project-media__section--editorial-media-grid,
	.project-media__section--editorial-media,
	.project-media__section--text-scroll-image {
		grid-template-columns: 1fr;
		row-gap: var(--space-4);
	}

	.project-media__image-text-media,
	.project-media__editorial-media-asset {
		min-height: 0;
	}

	.project-media__image-text-content,
	.project-media__editorial-media-grid-content,
	.project-media__editorial-media-content {
		/* editorial-media-content manglede tidligere i denne liste og beholdt
		   desktops 72px – gav 32px gap + 72px intern top = 104px i stedet for
		   72px, samme afvigelse som image-text havde på desktop. */
		padding-block: 2.5rem; /* 40px plus the 32px media gap */
	}

	.project-media__editorial-media-grid-media {
		margin-block: 0;
	}

	/* Editorial text (enkeltkolonne): 40px top/bund + asymmetrisk højre-luft */
	.client-case-media .project-media__section--editorial-text {
		grid-template-columns: 1fr;
		padding-block: var(--space-5);
		padding-left: var(--space-4);
		padding-right: calc(var(--space-4) + 14%);
	}

	.client-case-media .project-media__section--editorial-text .project-media__heading,
	.client-case-media .project-media__section--editorial-text .project-media__subheading,
	.client-case-media .project-media__section--editorial-text .project-media__text {
		grid-column: 1;
	}

	/* 2sp/3sp: 40px top/bund + asymmetrisk højre-luft + stack kolonner */
	.client-case-media .project-media__section--editorial-text-columns {
		padding-block: var(--space-5);
		padding-left: var(--space-4);
		padding-right: calc(var(--space-4) + 14%);
	}

	.client-case-media .project-media__section--editorial-text-columns-2 .project-media__editorial-text-columns-row,
	.client-case-media .project-media__section--editorial-text-columns-3 .project-media__editorial-text-columns-row {
		flex-direction: column;
		gap: var(--space-4);
	}

	/* Quote: stack på tablet + 40px top/bund + asymmetrisk højre-luft */
	.client-case-media .project-media__section--editorial-text-quote {
		flex-direction: column;
		padding-block: var(--space-5);
		padding-left: var(--space-4);
		padding-right: calc(var(--space-4) + 14%);
		gap: var(--space-4);
	}

	/* Aside: fuld bredde + 72px indryk */
	.client-case-media .project-media__section--editorial-text-quote .project-media__editorial-quote {
		flex: 0 0 auto;
		width: 100%;
		padding-inline: var(--space-5); /* 32px sektion + 40px = 72px i alt */
	}

	/* Quote øverst: ingen luft i top, 32px i bunden mod teksten */
	.client-case-media .project-media__section--quote-tablet-quote_first .project-media__editorial-quote {
		padding-bottom: var(--space-4);
	}

	/* Quote nederst: 32px i top mod teksten, 16px i bunden */
	.client-case-media .project-media__section--quote-tablet-text_first .project-media__editorial-quote {
		padding-top: var(--space-4);
		padding-bottom: var(--space-2);
	}

	/* Fjern side-specifik tekstindryk når stacked */
	.client-case-media .project-media__section--quote-left .project-media__editorial-text-quote-content,
	.client-case-media .project-media__section--quote-right .project-media__editorial-text-quote-content {
		padding-left: 0;
		padding-right: 0;
	}

	/* Quote-only: mere indryk fra venstre + reduceret luft ved text_first */
	.client-case-media .project-media__section--editorial-text-quote.project-media__section--quote-only {
		padding-left: var(--space-7);
	}

	.client-case-media .project-media__section--quote-only.project-media__section--quote-tablet-text_first .project-media__editorial-quote {
		padding-top: var(--space-1);
		padding-bottom: var(--space-2);
	}

	.client-case-media .project-media__editorial-quote-attribution {
		margin-top: var(--space-3); /* 32px → 24px */
		gap: 0.25rem;               /* 8px → 4px */
	}

	.client-case-media .project-media__section--quote-tablet-text_first .project-media__editorial-text-quote-content,
	.client-case-media .project-media__section--quote-tablet-quote_first .project-media__editorial-quote {
		order: 1;
	}

	.client-case-media .project-media__section--quote-tablet-text_first .project-media__editorial-quote,
	.client-case-media .project-media__section--quote-tablet-quote_first .project-media__editorial-text-quote-content {
		order: 2;
	}

	.project-media__editorial-media-content,
	.project-media__image-text-content,
	.project-media__editorial-media-grid-content,
	.project-media__section--text-scroll-image.project-media__section--media-right .project-media__text-scroll-content,
	.project-media__section--text-scroll-image.project-media__section--media-left .project-media__text-scroll-content {
		/* Erstatter desktops asymmetriske padding-inline (var(--space-9) 0 /
		   0 var(--space-9), kun luft på ydersiden) med samme symmetriske
		   venstre/højre-indryk som de øvrige stackede editorial-sektioner –
		   uden dette beholdt webscroll-teksten sin desktop-brede 72px/0-luft
		   på tablet, mens søskende-sektionerne allerede var rykket til 48/48. */
		padding-inline: var(--space-6);
	}

	/* text_scroll_image/scroll_image_full stacker nu til én kolonne på
	   tablet (se .project-media__section--text-scroll-image herover) –
	   viewporten har derfor ingen søsterkolonne at strække sig imod
	   længere, og billedet bidrager ikke selv til højden (position:
	   absolute). Genbruger samme 4/3-forhold som den eksisterende
	   mobil-regel, så viewporten forbliver kontrolleret i stedet for at
	   kollapse til 0 højde. Touch-scroll leveres allerede af den unscopede
	   "@media (hover: none)"-regel. */
	.project-media__scroll-viewport {
		aspect-ratio: 4 / 3;
	}

	.project-media__section--gallery-mosaic .project-media__gallery-item,
	.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 1),
	.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 2),
	.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 5),
	.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 6) {
		grid-column: span 6;
	}

	.client-case-cta .project-cta__inner {
		padding: var(--space-7);
		padding-right: 20%;
		padding-bottom: var(--space-8);
	}

	.client-case-related-projects .project-related__inner {
		padding-block-start: var(--space-10); /* 96px → 80px */
	}
}

@media (max-width: 767px) {
	.project-hero__inner,
	.project-archive__inner {
		padding-block: var(--space-7);
	}

	.project-hero__title,
	.project-archive__title {
		font-size: 2.5rem;
	}

	.project-archive__description {
		margin-top: var(--space-5);
	}

	/* 24px, matcher Om US DESIGN's CTA (var 32px for alle andre sider). */
	.project-cta__title,
	.project-related__title {
		font-size: var(--font-size-xl);
	}

	.client-case-archive .project-archive__header .project-archive__inner {
		padding-top: var(--space-7);
	}

	/* Portfolio-arkivet (uden .client-case-archive) manglede denne — arvede
	   56px (--space-7) fra den generelle regel herover i stedet for den
	   bekræftede mobil-standard, 64px (--space-8). */
	.project-archive__header .project-archive__inner {
		padding-top: var(--space-8); /* 64px */
	}

	.project-hero__content {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	.project-back-link--hero {
		margin-bottom: var(--space-5);
	}

	.project-hero__service {
		margin-bottom: var(--space-3);
	}

	.project-hero__intro {
		margin-top: var(--space-3);
	}

	.project-hero--project .project-hero__inner {
		padding-top: var(--space-7);
	}

	.project-hero__title--project {
		margin-bottom: var(--space-5);
	}

	.project-hero--project .project-hero__service {
		margin-bottom: var(--space-3);
	}

	.project-hero--project .project-hero__intro {
		margin-top: 0;
	}

	.project-hero__back-link {
		margin-top: var(--space-4);
	}

	.client-case-hero__title {
		margin-bottom: var(--space-7);
		padding-right: var(--client-case-hero-title-pr-mobile, 15%);
	}

	.client-case-hero .project-hero__inner {
		padding-top: var(--space-8);
		padding-bottom: 0;
	}

	.client-case-hero .project-hero__intro {
		margin-top: 0;
		font-size: 1.25rem; /* 20px */
	}

	.client-case-hero__back-link-wrap {
		margin-top: var(--space-7);
	}

	.client-case-hero {
		display: flex;
		flex-direction: column;
	}

	.client-case-hero .project-hero__inner,
	.client-case-hero .project-hero__content {
		display: contents;
	}

	.client-case-hero__title,
	.client-case-hero__eyebrow,
	.client-case-hero .project-hero__main,
	.client-case-hero__aside {
		padding-inline: var(--container-padding);
	}

	.client-case-hero__title {
		order: 1;
		padding-top: var(--space-8);
	}

	.client-case-hero__eyebrow {
		order: 2;
	}

	.client-case-hero .project-hero__main {
		order: 3;
	}

	.client-case-hero .project-featured-image {
		order: 5;
	}

	.client-case-hero__aside {
		order: 4;
		margin: var(--space-3) var(--container-padding) 0;
		padding: var(--space-3);
		border: 0;
		border-radius: var(--radius-image);
		background: #F7F5F3;
	}

	.client-case-hero .project-hero__meta {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--space-3);
		row-gap: var(--space-3);
	}

	.client-case-hero .project-hero__meta-item--categories {
		grid-column: 2;
		grid-row: 1 / span 4;
	}

	.client-case-hero .project-hero__meta dt {
		font-size: 0.75rem; /* 12px */
	}

	.client-case-hero .project-hero__meta dd {
		font-size: 0.875rem; /* 14px */
		line-height: 1.45;
	}

	.client-case-hero__back-link-wrap {
		display: none;
	}

	.project-hero__meta,
	.project-description__grid,
	.project-media__grid--two,
	.project-media__grid--three,
	.project-media__section--editorial-media,
	.project-media__section--image-text,
	.project-media__section--editorial-media-grid,
	.project-media__section--text-scroll-image,
	.project-related__grid,
	.project-archive__grid {
		grid-template-columns: 1fr;
	}

	.project-hero__meta {
		margin-top: 0;
		gap: var(--space-3);
		padding: var(--space-3) 0 0;
		border-top: 1px solid rgba(11, 18, 19, 0.18);
		border-left: 0;
	}

	.client-case-media .project-media__grid--three {
		grid-template-columns: 1fr;
	}

	.project-featured-image__inner,
	.project-description__inner,
	.project-media__inner,
	.testimonial-list__inner,
	.project-related__inner,
	.project-bottom-nav__inner {
		padding-block: var(--space-5);
	}

	.project-featured-image__inner {
		padding-top: var(--space-4);
	}

	.client-case-single .project-featured-image__inner {
		padding-block: var(--space-3) 0;
	}

	.client-case-single .project-description__inner {
		padding-block: var(--space-6) var(--space-4);
	}

	/* Shared 32px content-block rhythm, including mobile (30 October 2026). */
	.project-media__section + .project-media__section {
		margin-top: var(--space-4);
	}

	.project-archive__grid {
		row-gap: var(--space-6); /* Match the homepage's 48px mobile spacing. */
	}

	.project-media__section--media-right .project-media__editorial-media-asset,
	.project-media__section--media-right .project-media__image-text-media,
	.project-media__section--media-right .project-media__editorial-media-grid-media,
	.project-media__section--media-right .project-media__editorial-media-content,
	.project-media__section--media-right .project-media__image-text-content,
	.project-media__section--media-right .project-media__editorial-media-grid-content,
	.project-media__section--text-scroll-image.project-media__section--media-right .project-media__text-scroll-content,
	.project-media__section--text-scroll-image.project-media__section--media-right .project-media__scroll-viewport,
	.project-media__section--text-scroll-image.project-media__section--media-left .project-media__text-scroll-content,
	.project-media__section--text-scroll-image.project-media__section--media-left .project-media__scroll-viewport {
		order: initial;
	}

	.project-media__editorial-media-content,
	.project-media__image-text-content,
	.project-media__editorial-media-grid-content,
	.project-media__section--text-scroll-image.project-media__section--media-right .project-media__text-scroll-content,
	.project-media__section--text-scroll-image.project-media__section--media-left .project-media__text-scroll-content {
		padding: var(--space-6) 0;
	}

	.project-media__scroll-viewport {
		aspect-ratio: 4 / 3;
	}

	.project-media__editorial-media-grid-top {
		margin-bottom: var(--space-4);
	}

	.project-media__image-text-media {
		min-height: 0;
	}

	.project-media__image-text-stack {
		grid-template-rows: none;
	}

	.project-media__image-text-item {
		min-height: 20rem;
	}

	/* margin-top/padding-block for disse to selectors blev tidligere sat her
	   OG længere nede i samme @media-blok (var(--space-3)/24px her,
	   var(--space-2)/16px længere nede) – sidstnævnte vandt altid i praksis
	   (samme specificitet, senere i filen). Den døde 24px-deklaration er
	   fjernet; se den effektive 16px-regel længere nede i denne blok. */

	.client-case-media .project-media__grid,
	.client-case-media .project-media__image-text-stack,
	.client-case-media .project-media__editorial-media-grid-media,
	.client-case-media .project-media__editorial-media-grid-bottom,
	.client-case-media .project-media__gallery-grid,
	.client-case-media .project-media__section--image-text,
	.client-case-media .project-media__section--editorial-media-grid {
		gap: var(--space-3);
	}

	.client-case-media .project-media__editorial-media-grid-media {
		grid-template-rows: none;
	}

	.client-case-media .project-media__editorial-media-grid-top {
		margin-bottom: 0;
	}

	.client-case-hero__aside {
		margin-top: var(--space-6);
		padding: var(--space-4);
	}

	.client-case-hero .project-hero__meta {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}

	.client-case-hero .project-hero__meta-item--categories {
		grid-column: auto;
		grid-row: auto;
	}

	.client-case-single .project-featured-image__inner {
		padding-top: var(--space-2);
	}

	.client-case-media .project-media__inner {
		padding-block: var(--space-4);
	}

	.client-case-media .project-media__grid,
	.client-case-media .project-media__image-text-stack,
	.client-case-media .project-media__editorial-media-grid-media,
	.client-case-media .project-media__editorial-media-grid-bottom,
	.client-case-media .project-media__gallery-grid,
	.client-case-media .project-media__section--image-text,
	.client-case-media .project-media__section--editorial-media-grid {
		gap: var(--space-4);
	}

	.client-case-single .project-featured-image__image,
	.client-case-media .project-media__image {
		height: auto;
	}

	.client-case-single .us-design-image--landscape,
	.client-case-media .us-design-image--landscape {
		aspect-ratio: 4 / 3;
	}

	.client-case-single .us-design-image--portrait,
	.client-case-media .us-design-image--portrait {
		aspect-ratio: 3 / 4;
	}

	.client-case-single .us-design-image--square,
	.client-case-media .us-design-image--square {
		aspect-ratio: 1 / 1;
	}

	.client-case-media .project-media__image-text-item {
		min-height: 0;
	}

	.client-case-related-projects .project-related__inner {
		padding-block-start: var(--space-8); /* 96px → 64px */
		padding-block-end: calc(var(--space-7) + var(--space-4)); /* 56px + 32px = 88px */
	}

	.client-case-cta .project-cta__inner {
		padding: var(--space-5);
		padding-bottom: var(--space-6);
	}

	.client-case-media .project-media__section--text-block {
		padding-block: 2.5rem; /* 40px editorial text offset */
		font-size: var(--font-size-md);
	}

	.client-case-media .project-media__image-text-content,
	.client-case-media .project-media__editorial-media-grid-content,
	.client-case-media .project-media__editorial-media-content,
	.client-case-media .project-media__section--text-scroll-image.project-media__section--media-right .project-media__text-scroll-content,
	.client-case-media .project-media__section--text-scroll-image.project-media__section--media-left .project-media__text-scroll-content {
		/* Uden dette beholdt webscroll-teksten den generiske ≤767px-regels
		   48px (var(--space-6)) i stedet for at følge samme reducerede
		   32px-rytme som søskende-sektionerne herover – heraf den for
		   store luft over/under teksten på mobil. editorial-media-content
		   (plain editorial_media) manglede i denne liste af samme grund og er
		   tilføjet her – havde ellers beholdt 48px, mens de øvrige tre
		   "media + tekst"-layouts allerede var på 32px. */
		padding-block: var(--space-4);
		padding-inline: 0;
	}

	.client-case-media .project-media__editorial-media-grid-bottom {
		grid-template-columns: 1fr;
	}

	.client-case-media .project-media__section--image-text .project-media__image-text-content,
	.client-case-media .project-media__section--editorial-media-grid .project-media__editorial-media-grid-content {
		order: 1;
	}

	.client-case-media .project-media__section--image-text .project-media__image-text-media,
	.client-case-media .project-media__section--editorial-media-grid .project-media__editorial-media-grid-media {
		order: 2;
	}

	.client-case-media .project-media__section--quote-mobile-text_first .project-media__editorial-text-quote-content,
	.client-case-media .project-media__section--quote-mobile-quote_first .project-media__editorial-quote {
		order: 1;
	}

	.client-case-media .project-media__section--quote-mobile-text_first .project-media__editorial-quote,
	.client-case-media .project-media__section--quote-mobile-quote_first .project-media__editorial-text-quote-content {
		order: 2;
	}

	.client-case-media .project-media__section--editorial-text,
	.client-case-media .project-media__section--editorial-text-columns,
	.client-case-media .project-media__section--editorial-text-quote {
		padding-inline: 0;
	}

	/* Quote: stack lodret på mobil */
	.client-case-media .project-media__section--editorial-text-quote {
		flex-direction: column;
	}

	.client-case-media .project-media__section--editorial-text-quote .project-media__editorial-quote {
		flex: 0 0 auto;
		width: 100%;
	}

	/* Quote-only på mobil: nulstil tablet padding-left (specificitet 0,3,0) */
	.client-case-media .project-media__section--editorial-text-quote.project-media__section--quote-only {
		padding-inline: 0;
	}

	/* Quote-only på mobil: minimal luft ved text_first */
	.client-case-media .project-media__section--quote-only.project-media__section--quote-tablet-text_first .project-media__editorial-quote {
		padding-top: var(--space-1);
		padding-bottom: var(--space-1);
	}

	/* Nulstil side-specifik tekstindryk på mobil */
	.client-case-media .project-media__section--quote-left .project-media__editorial-text-quote-content,
	.client-case-media .project-media__section--quote-right .project-media__editorial-text-quote-content {
		padding-left: 0;
		padding-right: 0;
	}

	.client-case-media .project-media__section--text-block h2 {
		font-size: var(--font-size-2xl);
	}

	.client-case-media .project-media__section--text-block h3 {
		font-size: var(--font-size-lg);
	}

	.project-media__heading {
		padding-right: var(--case-heading-padding-mobile, var(--case-heading-padding-tablet, var(--case-heading-padding-desktop, 0)));
		font-size: var(--font-size-2xl);
	}

	.project-media__subheading {
		padding-right: var(--case-subheading-padding-mobile, var(--case-subheading-padding-tablet, var(--case-subheading-padding-desktop, 0)));
		font-size: var(--font-size-lg);
	}

	.project-media__text {
		font-size: 1rem;
	}

	.front-testimonial--client-case .front-testimonial__inner {
		min-height: 0;
	}

	.project-media__gallery-grid,
	.project-media__section--gallery-balanced .project-media__gallery-grid,
	.project-media__section--gallery-mosaic .project-media__gallery-grid {
		grid-template-columns: 1fr;
	}

	.project-media__section--gallery-mosaic .project-media__gallery-item,
	.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 1),
	.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 2),
	.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 5),
	.project-media__section--gallery-mosaic .project-media__gallery-item:nth-child(6n + 6) {
		grid-column: auto;
	}

	.project-featured-image__image,
	.project-media__image,
	.project-media__video {
		border-radius: var(--radius-image);
	}

	.client-case-cta .project-cta__inner {
		padding: var(--space-5); /* 40px */
		padding-bottom: var(--space-6); /* 48px */
	}

	.cta-label--desktop { display: none; }
	.cta-label--mobile { display: inline; }
}

/* ==========================================================================
   13. Front page testimonial
   ========================================================================== */

.front-testimonial {
	color: var(--us-design-white);
	background-color: var(--us-design-text);
}

/* Farve-varianter (jf. Figma "Testimonial"-komponent, node 1817:4580).
   Layoutet er identisk – kun baggrund + tekstfarver skifter. Ingen klasse
   tilføjet = nuværende mørke standard (uændret). */
.front-testimonial--white {
	color: var(--us-design-text);
	background-color: var(--us-design-white);
}

.front-testimonial--white .front-testimonial__quote-mark,
.front-testimonial--white .front-testimonial__name {
	color: var(--us-design-purple);
}

.front-testimonial--white .front-testimonial__quote p {
	color: var(--us-design-text);
}

.front-testimonial--orange-light {
	color: var(--us-design-text);
	background-color: var(--us-design-orange-10);
}

.front-testimonial--orange-light .front-testimonial__quote-mark,
.front-testimonial--orange-light .front-testimonial__name {
	color: var(--us-design-orange);
}

.front-testimonial--orange-light .front-testimonial__quote p {
	color: var(--us-design-text);
}

.front-testimonial--purple-light {
	color: var(--us-design-text);
	background-color: var(--us-design-purple-5);
}

.front-testimonial--purple-light .front-testimonial__quote-mark,
.front-testimonial--purple-light .front-testimonial__name {
	color: var(--us-design-purple);
}

.front-testimonial--purple-light .front-testimonial__quote p {
	color: var(--us-design-text);
}

.front-testimonial--purple {
	color: var(--us-design-white);
	background-color: var(--us-design-purple);
}

.front-testimonial--purple .front-testimonial__quote-mark,
.front-testimonial--purple .front-testimonial__name {
	color: var(--us-design-orange);
}

.front-testimonial--purple .front-testimonial__quote p {
	color: var(--us-design-white);
}

/* "Portrait"-variant: stor, integreret testimonial midt i en case (jf.
   Peter Schnedler/Dealhaus). Fuldt genopbygget fra Figma – desktop node
   2219:5651, tablet node 2219:5647, mobil node 2219:5641 (fil
   q4JlBSSVLTa4IDDhsdhQ0U). Rundet boks i content-bredde (ikke full-bleed som
   standardvarianten), gradient-baggrund og et stort, kvadratisk portræt.
   Generisk – ikke bundet til Dealhaus. Bruges via
   client_case_media_sections "Testimonial"-layoutets Style-felt.

   Fælles princip på tværs af alle tre breakpoints: citat-mærket står som en
   selvstændig blok OVER citatteksten (ikke ved siden af, som i
   standardvariantens grid-kolonne) – .front-testimonial__inner sættes derfor
   til normal blok-flow for denne variant i stedet for at arve den delte
   3-kolonne grid. Højden er indholdsstyret på alle breakpoints (ingen faste
   min-height-værdier) – boksen vokser med citatets længde. */
.front-testimonial--portrait {
	position: relative; /* positioneringskontekst for det absolut placerede portræt på desktop */
	color: var(--us-design-white);
	background-image: linear-gradient(135deg, var(--us-design-purple) 0%, var(--us-design-text) 100%);
	border-radius: var(--radius-image);
	overflow: hidden;
}

.front-testimonial--portrait .front-testimonial__inner {
	display: block; /* ikke grid – citat-mærke og content stables i normal flow, portrættet er absolut/frit stående */
	max-width: none;
	min-height: 0;
}

.front-testimonial--portrait .front-testimonial__quote-mark,
.front-testimonial--portrait .front-testimonial__name {
	color: var(--us-design-orange);
}

.front-testimonial--portrait .front-testimonial__quote p {
	color: var(--us-design-white);
}

/* Citat-mærket: samme genbrugte ikon (quotation-marks-66.svg) som resten af
   temaet, blot sat til ~58px bredde for at matche Figma-referencen
   (~58×47px) – frem for det delte standardmål på 64px. Uændret på tværs af
   breakpoints; kun teksten under skalerer ned. */
.front-testimonial--portrait .front-testimonial__quote-mark {
	width: 3.625rem; /* ~58px */
	margin: 0 0 var(--space-4); /* 32px ned til citatteksten, alle breakpoints */
	/* Nulstiller den delte tablet-regels transform: translateX(1rem) (kalibreret
	   til standardvariantens grid-kolonne-layout, ikke relevant her). */
	transform: none;
}

.front-testimonial--portrait .front-testimonial__quote-mark svg,
.front-testimonial--portrait .front-testimonial__quote-mark img {
	width: 3.625rem; /* ~58px */
}

.front-testimonial--portrait .front-testimonial__content {
	padding: 0;
	/* Nulstiller den delte tablet-regels transform: translateX(1rem) og
	   padding-right: 5rem (samme grid-kolonne-hack som ovenfor). */
	transform: none;
}

.front-testimonial--portrait .front-testimonial__quote {
	margin: 0 0 var(--space-4); /* 32px ned til personinfo, alle breakpoints */
}

.front-testimonial--portrait .front-testimonial__name {
	margin: 0 0 0.625rem; /* 10px ned til rolle – intet eksisterende space-token rammer præcis 10px */
}

/* Rolle/titel under navnet – bruger samme typografiske værdier som den
   (pt. ubrugte) .front-testimonial__source, men skrevet direkte her for at
   undgå at arve dens cascade. .front-testimonial__meta er ustylet i
   standard-/list-varianten (ren <p>) og forbliver det – denne regel er
   strengt scopet til portrait. */
.front-testimonial--portrait .front-testimonial__meta {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.8125rem; /* 13px, desktop/tablet */
	font-weight: 600; /* Lota Grotesque SemiBold */
	line-height: 1.6;
	letter-spacing: 0.3em; /* ~30% tracking */
	text-transform: uppercase;
	transition: color 160ms ease;
}

/* Samme hover-affordance som .front-testimonial__source (orange på hover),
   men kun når navn+rolle rent faktisk er pakket i et LinkedIn-link. */
.front-testimonial--portrait .front-testimonial__author-link:hover .front-testimonial__meta,
.front-testimonial--portrait .front-testimonial__author-link:focus-visible .front-testimonial__meta {
	color: var(--us-design-orange);
}

/* Den delte .front-testimonial__image har en rgba-baggrund beregnet til
   gennemsigtige firmalogoer i standardvarianten – skal ikke vises som en
   falsk flade bag portrættet her. Boksens egen gradient/radius/clipping
   (.front-testimonial--portrait) er den eneste baggrund/form portrættet
   skal integreres i. */
.front-testimonial--portrait .front-testimonial__image {
	background: transparent;
}

/* Desktop (≥1024px): tekst ~52% bredde øverst til venstre, portræt ~48%
   bredde som absolut overlay nederst til højre (Figma node 2219:5651).
   Boksen har INGEN fast højde – vokser med citatets længde; portrættet
   følger med nedad/opad da det er bund-forankret. top sættes bevidst ikke
   – luften foroven opstår naturligt af tekstblokkens højde. */
@media (min-width: 1024px) {
	/* Portrættet er kvadratisk og fylder 48% af boksens bredde – ved
	   standard containerbredde (--container-max, 1170px) svarer det til
	   ~562px i højden. Uden en nedre grænse her ville en kort testimonial
	   gøre boksen lavere end portrættet, og toppen af billedet ville blive
	   beskåret af overflow: hidden (bekræftet i browser-QA med den faktiske
	   Dealhaus-tekst). min-height sikrer portrættet altid er helt synligt,
	   uden at forhindre boksen i at vokse videre ved en længere testimonial
	   – content-driven height er stadig hovedprincippet. */
	.front-testimonial--portrait {
		min-height: 35.25rem; /* ~564px */
	}

	.front-testimonial--portrait .front-testimonial__inner {
		padding: var(--space-10); /* 80px top/venstre jf. Figma; symmetrisk højre/bund, da portrættet er frit overlay uden om grid'et */
	}

	.front-testimonial--portrait .front-testimonial__content {
		max-width: 52%;
	}

	.front-testimonial--portrait .front-testimonial__media {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 48%;
		max-width: 48%;
		height: auto;
		min-height: 0;
	}

	.front-testimonial--portrait .front-testimonial__image {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: right bottom;
	}
}

/* Tablet (768–1023px, Figma node 2219:5647): normal flow, ingen absolut
   positionering. Princip: boksens indvendige padding (72px top/venstre/
   højre, 0 bund) definerer ÉN fælles content-bredde som både tekst og
   portræt fylder – ikke to uafhængige bredder. Portrættet er kvadratisk
   (kildebilledet er kvadratisk) og flugter præcis med boksens underkant
   (ingen bund-padding under billedet). */
@media (max-width: 1023px) and (min-width: 768px) {
	.front-testimonial--portrait .front-testimonial__inner {
		padding: var(--space-9) var(--space-9) 0;
	}

	.front-testimonial--portrait .front-testimonial__content {
		max-width: none;
	}

	/* Den delte tablet-regel for standardvarianten (samme media query)
	   sætter margin-left/-right/-bottom i rem (kalibreret til DENS
	   tekstbredde/transform) – nulstilles eksplicit her med margin-shorthand,
	   ellers ville portrættet blive smallere end content-bredden og skævt
	   centreret. */
	.front-testimonial--portrait .front-testimonial__media {
		margin: var(--space-2) 0 0; /* 16px fra personinfo til portræt, ingen sidemargin */
		width: 100%;
		max-width: none;
		height: auto;
		min-height: 0;
		aspect-ratio: 1 / 1;
		border-radius: 0; /* boksens egen radius/clipping klarer hjørnerne */
		overflow: hidden;
	}

	.front-testimonial--portrait .front-testimonial__image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center bottom;
	}
}

/* Mobil (≤767px, Figma node 2219:5641): samme flow-princip som tablet, men
   portrættet må bryde ud af tekstens sidepadding og fylde HELE boksens
   bredde (ikke kun tekstkolonnens ~246px). Sidepaddingen (40px) sidder på
   .front-testimonial__inner selv, så den gælder både citat-mærke og content
   (én fælles venstrekant, jf. Figma) – portrættet bryder ud af den igen med
   negativ margin + calc-bredde (klassisk "full-bleed i en padded container"). */
@media (max-width: 767px) {
	.front-testimonial--portrait .front-testimonial__inner {
		padding: var(--space-7) var(--space-5) 0; /* 56px top, 40px sider, 0 bund */
	}

	.front-testimonial--portrait .front-testimonial__quote p {
		font-size: var(--font-size-lg); /* 18px */
	}

	.front-testimonial--portrait .front-testimonial__name {
		font-size: var(--font-size-xl); /* 24px */
	}

	.front-testimonial--portrait .front-testimonial__meta {
		font-size: 0.75rem; /* 12px */
	}

	.front-testimonial--portrait .front-testimonial__media {
		margin: var(--space-2) calc(-1 * var(--space-5)) 0; /* 16px ned, bryder ud af inner's 40px sidepadding i begge sider */
		width: calc(100% + var(--space-5) * 2); /* kompenserer for negativ margin, så billedet fylder inner's fulde ydre bredde */
		max-width: none;
		height: auto;
		min-height: 0;
		aspect-ratio: auto;
		border-radius: 0;
		overflow: hidden;
	}

	.front-testimonial--portrait .front-testimonial__image {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center bottom;
	}
}

.front-testimonial__inner {
	display: grid;
	grid-template-columns: var(--space-8) minmax(0, 36.25rem) minmax(17.5rem, 1fr);
	column-gap: var(--space-4);
	align-items: stretch;
	width: 100%;
	max-width: var(--container-outer-max);
	min-height: 27rem; /* 432px */
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.front-testimonial__quote-mark {
	align-self: start;
	width: var(--space-8);
	margin-top: 5.5rem; /* 88px */
	color: var(--us-design-orange);
	font-family: var(--font-heading);
	font-size: var(--font-size-4xl);
	line-height: 0.75;
}

.front-testimonial__quote-mark svg,
.front-testimonial__quote-mark img {
	display: block;
	width: var(--space-8); /* 64px */
	height: auto;
}

.front-testimonial__content {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0;
	padding-block: 7rem;
}

.front-testimonial__quote {
	margin: 0 0 var(--space-5);
}

.front-testimonial__quote p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.25rem; /* 20px */
	font-style: italic;
	font-weight: 300;
	line-height: 1.6;
	color: var(--us-design-white);
}

.front-testimonial__author {
	margin: 0;
}

/* Navn+rolle bliver ét klikbart LinkedIn-link (featured-testimonial.php),
   når testimonial_linkedin er udfyldt – på tværs af ALLE varianter, ikke
   kun portrait. Nulstiller browserens standard link-farve/-understregning
   her generisk, så .front-testimonial__name/__meta's egne farver (orange
   hhv. arvet hvid) vinder uændret, uanset hvilken variant det optræder i. */
.front-testimonial__author-link,
.front-testimonial__author-link:visited,
.front-testimonial__author-link:hover,
.front-testimonial__author-link:focus {
	display: block;
	color: inherit;
	text-decoration: none;
}

.front-testimonial__name {
	margin: 0 0 var(--space-1);
	font-family: var(--font-heading);
	font-size: var(--font-size-2xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--us-design-orange);
}

.front-testimonial__source,
.front-testimonial__source:visited {
	font-family: var(--font-body);
	font-size: 0.8125rem; /* 13px */
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--us-design-white);
	text-decoration: none;
	transition: color 160ms ease;
}

.front-testimonial__source:hover,
.front-testimonial__source:focus-visible {
	color: var(--us-design-orange);
}

.front-testimonial__media {
	align-self: stretch;
	justify-self: end;
	width: 100%;
	max-width: 23.125rem; /* 370px */
	height: auto;
	min-height: 100%;
	overflow: hidden;
}

.front-testimonial--blue-tone .front-testimonial__media {
	position: relative;
}

.front-testimonial__filter {
	position: absolute;
	pointer-events: none;
}

.front-testimonial--blue-tone .front-testimonial__image--toned {
	position: absolute;
	inset: 0;
	filter: var(--testimonial-tone-filter);
	opacity: 1;
	pointer-events: none;
	transition: opacity 220ms ease;
}

/* Keep the approved tone fixed on touch; reveal color only with a mouse. */
@media (hover: hover) and (pointer: fine) {
	.front-testimonial--blue-tone:focus-within .front-testimonial__image--toned,
	.front-testimonial--blue-tone:hover .front-testimonial__image--toned {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.front-testimonial--blue-tone .front-testimonial__image--toned {
		transition: none;
	}
}

/* Keep both portrait layers in the same definite mobile image frame. */
@media (max-width: 1023px) {
	.front-testimonial--blue-tone:not(.front-testimonial--portrait) .front-testimonial__media > .front-testimonial__image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
	}
}

/* Poul's square source keeps its natural proportions; the mobile frame crops it. */
@media (max-width: 767px) {
	.front-testimonial--blue-tone .front-testimonial__media > .front-testimonial__image[src*="/poul-lorentzen-linkedin-original"] {
		width: 125%;
		max-width: none;
		height: auto;
		aspect-ratio: 1 / 1;
		left: -12.5%;
		right: auto;
		bottom: auto;
		object-fit: fill;
	}
}

.front-testimonial--cafe-headshot .front-testimonial__media {
	position: relative;
}

.front-testimonial--headshot-center .front-testimonial__image {
	/* Hoved/skuldre fra det godkendte brede Brith-foto; originalen bevares. */
	object-position: 50% 25%;
	transform: scale(1.5);
	transform-origin: 50% 25%;
}

.front-testimonial--headshot-top .front-testimonial__image {
	/* Bevar toppen af Oles højformatportræt i tabletens kvadratiske ramme. */
	object-position: center top;
}

.front-testimonial--cafe-headshot .front-testimonial__media::after {
	/* A very soft local lift over the face; keep the original photo intact. */
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 44% 43% at 46% 34%, rgba(255, 255, 255, 0.10), transparent 85%);
}

.front-testimonial--cafe-headshot .front-testimonial__image {
	/* Non-destructive head-and-shoulders crop of the original café photo. */
	filter: grayscale(1);
	object-position: 42% top;
	transform: scale(1.7);
	transform-origin: 42% top;
}

.front-testimonial__image {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.16);
	object-fit: cover;
	object-position: center center;
}

@media (max-width: 1023px) {
	.front-testimonial__inner {
		grid-template-columns: auto minmax(0, 1fr);
		row-gap: var(--space-6);
		min-height: auto;
		padding-block: var(--space-12) var(--container-padding);
	}

	.front-testimonial__quote-mark {
		align-self: start;
		margin-top: 0;
	}

	.front-testimonial__content {
		align-self: start;
		display: block;
		padding-block: 0;
	}

	.front-testimonial__media {
		grid-column: 1 / -1;
		justify-self: stretch;
		width: 100%;
		max-width: none;
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
		border-radius: var(--radius-image);
		overflow: hidden;
	}

	.front-testimonial__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}
}

@media (max-width: 1023px) and (min-width: 768px) {
	.front-testimonial__inner {
		align-items: start;
		column-gap: var(--space-3);
		padding-left: var(--container-padding);
		padding-right: var(--container-padding);
	}

	.front-testimonial__quote-mark {
		align-self: start;
		margin-top: -1.5rem;
		transform: translateX(1rem);
	}

	.front-testimonial__content {
		align-self: start;
		padding-right: 5rem;
		transform: translateX(1rem);
	}

	/* Billedet fyldte hele grid-bredden (1/-1, inkl. citat-mærke-kolonnen)
	   fra den brede ≤1023px-regel herover — med aspect-ratio 1/1 blev det
	   derfor kæmpestort (lige så højt som hele containeren er bred). Sat til
	   kun at fylde tekst-kolonnen (kolonne 2), så det holder kant med
	   teksten i begge sider, stadig med samme 1:1-forhold. Kun tablet. */
	.front-testimonial__media {
		grid-column: 2;
		/* width: auto er nødvendig — den bredere ≤1023px-regel sætter
		   width: 100% (en fast værdi), som IKKE krymper når man tilføjer
		   margin i begge sider. auto lader boksen strække sig til det, der
		   er tilbage mellem margins, som normal grid-stretch-adfærd.
		   Målt direkte mod citatteksten/navnets faktiske render (inkl.
		   .front-testimonial__content's egen transform: translateX(1rem) og
		   padding-right: 5rem) — 1rem venstre-margin og 4rem højre-margin
		   giver billedet samme venstre- og højrekant som teksten, pixel for
		   pixel, ved 768px. */
		width: auto;
		margin-left: 1rem;
		margin-right: 4rem;
		aspect-ratio: 1 / 1;
		border-radius: var(--radius-image);
		overflow: hidden;
		margin-bottom: 2rem;
	}
}

@media (max-width: 767px) {
	.front-testimonial__inner {
		grid-template-columns: 1fr;
		padding-block: var(--space-8) var(--container-padding);
	}

	.front-testimonial__quote-mark {
		margin-top: 0;
	}

	.front-testimonial__quote p {
		font-size: var(--font-size-lg);
	}

	.front-testimonial__name {
		font-size: 1.75rem; /* 28px */
	}

	.front-testimonial__media {
		aspect-ratio: 4 / 5;
		border-radius: var(--radius-image);
		overflow: hidden;
	}
}

/* ==========================================================================
   13. Front page graphic design
   ========================================================================== */

.graphic-design-page__hero,
.graphic-design-page__services {
	color: var(--us-design-text);
	background-color: var(--us-design-white);
}

.graphic-design-page__hero-inner,
.graphic-design-page__services-inner {
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.graphic-design-page__hero-inner {
	padding-block: 6.875rem var(--space-10);
}

.graphic-design-page__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-4xl);
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--us-design-text);
	padding-right: var(--graphic-design-title-pr, 0);
}

.graphic-design-page__intro {
	max-width: 53rem;
	margin-top: var(--space-8);
	font-family: var(--font-body);
	font-size: var(--font-size-lg);
	font-weight: 300;
	line-height: 1.5;
}

.graphic-design-page__intro > :first-child {
	margin-top: 0;
}

.graphic-design-page__intro > :last-child {
	margin-bottom: 0;
}

.graphic-design-page__services-inner {
	padding-block: var(--space-4) calc(var(--space-12) + 2rem);
}

.frontpage-graphic-design {
	color: var(--us-design-text);
	background-color: var(--us-design-white);
}

.frontpage-graphic-design__inner {
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding: var(--space-12) var(--container-padding);
}

.frontpage-graphic-design__title {
	margin: 0 0 var(--space-8);
	font-family: var(--font-heading);
	font-size: var(--font-size-3xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--us-design-text);
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--space-4);
	row-gap: var(--space-10);
}

.service-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	color: var(--us-design-text);
	text-decoration: none;
}

.service-card__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 6.25rem; /* 100px */
	height: 5.5rem; /* 88px */
}

.service-card__icon {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

.service-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 20.9375rem; /* 335px */
}

.service-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--us-design-text);
}

.service-card__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-text);
}

/* .service-card__link-text er nu også .link-forward (pil-ikon + versaler,
   se "Link-ikoner"-afsnittet) — men beholder kortets egen idle/hover-farve
   (purple/orange) fra før, i stedet for .link-forwards generiske grå/purple,
   da farven allerede var godkendt for denne side. Compound selector for at
   vinde specificitetskampen mod .link-forward uanset rækkefølge i filen. */
.service-card__link-text.link-forward {
	color: var(--us-design-purple);
}

.service-card:hover .service-card__link-text,
.service-card:focus-visible .service-card__link-text {
	color: var(--us-design-orange);
}

@media (max-width: 1023px) {
	.graphic-design-page__title {
		font-size: var(--font-size-3xl);
		padding-right: var(--graphic-design-title-pr-tablet, var(--graphic-design-title-pr, 0));
	}

	.service-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-4);
		row-gap: var(--space-8);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.frontpage-graphic-design__inner {
		padding-block: var(--space-10);
	}

	.service-card__content {
		max-width: none;
		padding-right: 3.5rem;
	}

	/* Luft til floating-contact-icons i højre side - kun selve introteksten,
	   ikke hele hero-containeren (overskriften har sin egen padding-right).
	   Samme værdi som kategorisidernes .service-category-hero__text. */
	.graphic-design-page__intro {
		max-width: 85%;
	}

	/* Samme header-afstand som kategorisiderne (.service-category-hero__inner).
	   Overskriftsstørrelsen var allerede korrekt (3rem). */
	.graphic-design-page__hero-inner {
		padding-top: var(--space-9); /* 72px */
		/* Hero → services var fastfrosset på desktops 112px (80+32) hele
		   vejen til mobil (64px) — ingen tablet-reduktion fandtes. Skalerer
		   nu proportionalt: 64+24 = 88px, mellem desktop og mobil. */
		padding-bottom: var(--space-8); /* 64px */
	}

	.graphic-design-page__services-inner {
		padding-top: var(--space-3); /* 24px */
	}
}

@media (max-width: 767px) {
	.graphic-design-page__hero-inner {
		padding-block: var(--space-8) var(--space-6);
	}

	.graphic-design-page__title {
		font-size: var(--font-size-2xl);
		padding-right: var(--graphic-design-title-pr-mobile, var(--graphic-design-title-pr, 0));
	}

	.graphic-design-page__intro {
		margin-top: var(--space-5);
		font-size: var(--font-size-md);
	}

	.graphic-design-page__services-inner {
		padding-block: var(--space-2) calc(var(--space-8) + 2rem);
	}

	.frontpage-graphic-design__inner {
		padding-block: var(--space-7);
	}

	.frontpage-graphic-design__title {
		margin-bottom: var(--space-5);
		font-size: var(--font-size-2xl);
	}

	.service-grid {
		grid-template-columns: 1fr;
		row-gap: var(--space-8);
	}

	.service-card {
		gap: var(--space-2);
	}

	.service-card__content {
		max-width: none;
		gap: var(--space-2);
	}

	.service-card__icon-wrap {
		width: 5rem;
		height: 4.5rem;
	}

	.service-card__text {
		line-height: 1.45;
	}
}

/* ==========================================================================
   14. Front page startup offer
   ========================================================================== */

.front-startup-offer {
	color: var(--us-design-text);
	background-color: var(--us-design-white);
}

.front-startup-offer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(20rem, 33.75rem);
	gap: var(--space-8);
	align-items: center;
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding: var(--space-12) var(--container-padding);
}

.front-startup-offer__content {
	max-width: 35rem;
}

.front-startup-offer__eyebrow {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: 0.8125rem; /* 13px */
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--us-design-purple);
}

.front-startup-offer__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-heading);
	font-size: var(--font-size-3xl);
	font-weight: 700;
	line-height: 1;
	color: var(--us-design-text);
}

.front-startup-offer__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 29.0625rem; /* 465px */
	margin-bottom: var(--space-5);
}

.front-startup-offer__text p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-text);
}

.front-startup-offer__text strong {
	font-weight: 700;
}

.front-startup-offer__actions {
	display: flex;
	align-items: center;
}

.front-startup-offer__media {
	display: flex;
	justify-content: flex-end;
}

.front-startup-offer__image {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1023px) {
	.front-startup-offer__inner {
		grid-template-columns: 1fr;
		gap: var(--space-4);
		padding-block: var(--space-10);
	}

	.front-startup-offer__content {
		max-width: 42rem;
	}

	.front-startup-offer__media {
		justify-content: flex-end;
		width: 100%;
		padding-right: 2rem;
	}

	.front-startup-offer__text {
		max-width: none;
	}

	.front-startup-offer__image {
		width: 100%;
		max-width: 38rem;
		height: auto;
	}
}

@media (max-width: 767px) {
	.front-startup-offer__inner {
		padding-block: var(--space-8);
	}

	.front-startup-offer__title {
		font-size: var(--font-size-2xl);
		line-height: 1.1;
	}

	.front-startup-offer__text {
		max-width: none;
	}

	.front-startup-offer__media {
		padding-right: 0;
	}
	.front-startup-offer__image {
		max-width: 100%;
	}
}

/* ==========================================================================
   15. Front page freelance designer
   ========================================================================== */

.front-freelance-designer {
	position: relative;
	isolation: isolate;
	color: var(--us-design-white);
	background-color: var(--us-design-text);
	overflow: hidden;
}

.front-freelance-designer__background {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.front-freelance-designer__background::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(11, 18, 19, 0.85);
}

.front-freelance-designer__background-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.front-freelance-designer__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding: 6rem var(--container-padding);
}

.front-freelance-designer__content {
	max-width: 45rem;
}

.front-freelance-designer__title {
	max-width: 35rem;
	margin: 0 0 var(--space-5);
	font-family: var(--font-heading);
	font-size: var(--font-size-4xl);
	font-weight: 700;
	line-height: 1.05;
	color: var(--us-design-orange);
}

.front-freelance-designer__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 44.875rem; /* 718px */
	margin-bottom: var(--space-7);
}

.front-freelance-designer__text p {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-lg);
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-white);
}

.front-freelance-designer__text strong {
	font-weight: 700;
}

.front-freelance-designer__actions {
	display: flex;
	align-items: center;
}

@media (min-width: 1024px) {
	.front-freelance-designer {
		background-image:
			linear-gradient(rgba(11, 18, 19, 0.85), rgba(11, 18, 19, 0.85)),
			url("../img/freelance-designer-bg.webp");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	.front-freelance-designer__background {
		display: none;
	}
}

@media (max-width: 1023px) {
	.front-freelance-designer__inner {
		padding-block: var(--space-10);
	}

	.front-freelance-designer__content {
		max-width: 42rem;
	}

	.front-freelance-designer__title {
		max-width: 32rem;
		font-size: var(--font-size-4xl);
	}

	.front-freelance-designer__text {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.front-freelance-designer__inner {
		padding-block: var(--space-8);
	}

	.front-freelance-designer__title {
		font-size: var(--font-size-3xl);
		line-height: 1.05;
	}

	.front-freelance-designer__text {
		margin-bottom: var(--space-6);
	}

	.front-freelance-designer__text p {
		font-size: var(--font-size-md);
	}

	.front-freelance-designer__actions {
		width: 100%;
	}
}


/* ==========================================================================
   16. Highlighted project
   ========================================================================== */

.highlighted-project {
	color: var(--us-design-text);
	background-color: var(--us-design-white);
}

.highlighted-project__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 0.95fr);
	grid-template-areas: "media content";
	align-items: center;
	column-gap: var(--space-7);
	row-gap: var(--space-5);
	width: 100%;
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding: var(--space-12) var(--container-padding);
}

.highlighted-project__content {
	grid-area: content;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.highlighted-project__content > .highlighted-project__eyebrow {
		margin: 0;
	}
}

.highlighted-project__intro {
	grid-area: intro;
}

.highlighted-project__eyebrow {
	grid-area: eyebrow;
}

.highlighted-project__eyebrow {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: 700;
	line-height: 1.125;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--us-design-purple);
}

.highlighted-project__title {
	max-width: 35.625rem; /* 570px */
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-2xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--us-design-text);
}

.highlighted-project__title-link,
.highlighted-project__title-link:visited {
	color: inherit;
	text-decoration: none;
	transition: color 160ms ease;
}

.highlighted-project__title-link:hover,
.highlighted-project__title-link:focus-visible {
	color: var(--us-design-purple);
	text-decoration: none;
}

.highlighted-project__text {
	max-width: 30.25rem; /* 484px */
	margin: var(--space-3) 0 0;
	font-family: var(--font-body);
	font-size: var(--font-size-lg);
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-text);
}

.highlighted-project__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
}

.highlighted-project__media {
	grid-area: media;
	align-self: start;
}

.highlighted-project__image {
	display: block;
	width: 100%;
	aspect-ratio: 851 / 600;
	object-fit: cover;
	object-position: center center;
	border-radius: var(--radius-image);
}

@media (max-width: 1023px) {
	.highlighted-project__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"eyebrow"
			"media"
			"intro"
			"actions";
		row-gap: var(--space-6);
		padding: var(--space-10) var(--container-padding) var(--space-12);
	}

	.highlighted-project__inner {
		align-items: stretch;
	}

	.highlighted-project__content {
		display: contents;
	}
}

@media (max-width: 767px) {
	.highlighted-project__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"eyebrow"
			"media"
			"intro"
			"actions";
		row-gap: var(--space-3);
		padding-block: var(--space-8);
	}

	.highlighted-project__title {
		font-size: var(--font-size-2xl);
	}

	.highlighted-project__image {
		aspect-ratio: 1 / 1;
		margin-bottom: 0.5rem;
	}

	.highlighted-project__actions {
		margin-top: 0.5rem;
	}
}

/* ==========================================================================
   Service category pages
   ========================================================================== */

.service-category-hero__inner {
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	padding-top: var(--space-12);
	padding-bottom: var(--space-10);
}

.service-category-hero__title {
	font-size: 4.5rem; /* 72px */
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--us-design-text);
	padding-right: var(--service-hero-title-pr, 0);
	margin-bottom: var(--space-7);
}

/* Kun til stede når H2-underoverskriften vises (5 ud af 12 kategorier) —
   tættere afstand ned til H2 end den normale afstand ned til meta-rækken. */
.service-category-hero__title:has(+ .service-category-hero__subtitle) {
	margin-bottom: var(--space-4); /* 32px */
}

.service-category-hero__subtitle {
	margin: 0 0 var(--space-7); /* 56px — samme afstand til meta-rækken som H1 normalt har */
	font-family: var(--font-body);
	font-size: var(--font-size-2xl); /* 32px, jf. Figma 774:3098 */
	font-weight: 700;
	line-height: 1.2;
	color: var(--us-design-purple);
}

.service-category-hero__meta {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: var(--space-7);
}

.service-category-hero__icon img {
	display: block;
	width: auto;
	height: 4.5rem; /* 72px */
}

.service-category-hero__name {
	color: var(--us-design-purple);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

/* .service-category-hero__meta (ikon + kategorinavn) er bevidst UDENFOR
   denne grid (egen blok mellem H1 og body, se service-hero.php) — billedet
   justeres derfor lodret efter introteksten, ikke efter meta-rækken. Dette
   er en bevidst afvigelse fra Figma (godkendt 2026-07-10) for at give lidt
   mere luft i sektionen. */
.service-category-hero__body {
	display: grid;
	grid-template-columns: 420px 1fr;
	gap: 2rem;
	align-items: start;
}

.service-category-hero__text {
	min-width: 0;
	font-size: 1.25rem;
	line-height: 1.4;
	padding-right: var(--service-intro-text-pr, 5%);
}

.service-category-hero__media {
	min-width: 0;
}

.service-category-hero__image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1; /* Figma: fast kvadratisk key visual, 720x720 */
	object-fit: cover;
	border-radius: var(--radius-image);
}

@media (max-width: 1023px) {
	.service-category-hero__inner {
		padding-top: var(--space-9);
		padding-bottom: var(--space-8);
	}

	.service-category-hero__body {
		grid-template-columns: 1fr;
	}

	.service-category-hero__title {
		font-size: 3rem;
		padding-right: var(--service-hero-title-pr-tablet, 0);
	}

	.service-category-hero__subtitle {
		font-size: var(--font-size-xl); /* 24px */
	}

	.service-category-hero__media {
		order: -1;
		width: 100%;
	}

	.service-category-hero__text {
		max-width: 93%;
		/* padding-right-feltet er kun tiltænkt desktop — på tablet giver
		   max-width:93% allerede sit eget indryk, så de to må ikke lægges oveni. */
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	.service-category-hero__inner {
		padding-top: var(--space-7);
		padding-bottom: var(--space-6);
	}

	.service-category-hero__title {
		font-size: 2.5rem;
		padding-right: var(--service-hero-title-pr-mobile, 0);
	}

	.service-category-hero__subtitle {
		font-size: var(--font-size-lg); /* 18px */
	}

	.service-category-hero__text {
		font-size: 1rem;
		max-width: 100%;
	}

	.service-category-hero__media {
		width: 100%;
	}
}

/* Prev/next-navigation mellem hero og CTA. Ingen egen top-luft — hero's
   eget padding-bottom er allerede gabet hertil (samme "ingen dobbelt-lagt
   sektionspadding"-princip som resten af siden). Bund-luften før CTA
   genbruger hero's egne padding-bottom-værdier for samme rytme. */
.service-category-nav__inner {
	max-width: var(--container-outer-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
	padding-bottom: var(--space-10); /* 80px */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-4);
}

@media (max-width: 1023px) {
	.service-category-nav__inner {
		padding-bottom: var(--space-8); /* 64px */
	}
}

@media (max-width: 767px) {
	.service-category-nav__inner {
		padding-bottom: var(--space-6); /* 48px */
		flex-wrap: nowrap;
	}

	.service-category-nav__label {
		display: none;
	}
}

.service-category-cta,
.client-case-archive-cta,
.portfolio-archive-cta,
.project-single-cta,
.page-cta {
	margin-bottom: 6rem;
}

.front-testimonial--project + .project-single-cta,
.page-cta {
	margin-top: 6rem;
}

@media (max-width: 1023px) {
	.service-category-cta,
	.client-case-archive-cta,
	.portfolio-archive-cta,
	.project-single-cta,
	.page-cta {
		margin-bottom: var(--space-9); /* 72px */
	}

	.front-testimonial--project + .project-single-cta,
	.page-cta {
		margin-top: var(--space-9);
	}
}

@media (max-width: 767px) {
	.service-category-cta,
	.client-case-archive-cta,
	.portfolio-archive-cta,
	.project-single-cta,
	.page-cta {
		margin-bottom: var(--space-8); /* 64px */
	}

	.front-testimonial--project + .project-single-cta,
	.page-cta {
		margin-top: var(--space-8);
	}
}

/* ==========================================================================
   Contact page foundation
   ========================================================================== */

.contact-hero,
.contact-main {
	padding-block: var(--space-12);
}

/* Hero-tekst → kort: 48px, ikke to stablede sektion-paddings (96px+96px). */
.contact-hero {
	padding-bottom: 0;
}

.contact-main {
	padding-top: var(--space-6); /* 48px */
}

.contact-hero__inner,
.contact-main__inner {
	width: min(100%, var(--container-outer-max));
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.contact-hero__inner {
	display: grid;
	gap: var(--space-8); /* 64px - samme afstand som Grafisk Design/Portfolio/Om US DESIGN */
}

/* Samme mønster som .about-hero__title - fluid clamp() i stedet for en
   fast værdi, så H1 skalerer på samme måde som resten af sitets sider. */
.contact-hero__title {
	/* Ingen max-width — padding-right-feltet i admin er nu den eneste
	   styring af linjefald, ikke en konkurrerende fast bredde her. */
	font-size: clamp(var(--font-size-3xl), 5vw, 4.5rem);
	font-weight: 700;
	line-height: var(--line-height-tight); /* 1.1 */
	color: var(--us-design-text);
	padding-right: var(--contact-hero-title-pr, 0);
}

.contact-hero__text {
	max-width: 46.75rem; /* 748px */
	font-family: var(--font-body);
	font-size: 1.25rem; /* 20px */
	font-weight: 300;
	line-height: 1.4;
	color: var(--us-design-text);
}

/* To kolonner, jf. Figma: venstre = kort + info-boks, højre = formular.
   align-items: stretch gør at venstre kolonne strækkes til formularens
   højde - info-boksen (flex: 1 herunder) optager den ekstra plads. */
.contact-main__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 35.625rem));
	gap: 1.875rem; /* 30px */
	align-items: stretch;
}

.contact-main__column {
	display: flex;
	flex-direction: column;
	gap: 1.875rem; /* 30px */
}

/* Kontaktkort - 4 kort i 2x2 grid, 270px hvert (Figma-mål). */
.contact-info-cards {
	display: grid;
	grid-template-columns: repeat(2, 16.875rem);
	gap: 1.875rem; /* 30px */
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Kortet er nu et link (mailto/tel/kort) - <li> skal blot lade det fylde
   hele grid-cellen. */
.contact-info-cards > li {
	display: flex;
}

.contact-info-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--space-4);
	border-radius: var(--radius-image);
	background: color-mix(in srgb, #f1f1f1 25%, transparent);
	border: 1px solid color-mix(in srgb, var(--us-design-light-grey) 50%, transparent);
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
	text-decoration: none;
	color: inherit;
}

/* Alle fire kort er ens som udgangspunkt - det lilla gradient er en
   hover/focus-tilstand (Figma viste kun Telefon-kortet som eksempel). */
.contact-info-card:hover,
.contact-info-card:focus-within {
	color: var(--us-design-white);
	background: linear-gradient(141.78deg, rgb(108, 3, 63) 0.32%, rgb(32, 36, 42) 102.92%);
	border-color: var(--us-design-purple);
}

.contact-info-card__icon {
	display: block;
	position: relative;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.5rem; /* 24px til overskrift */
	color: var(--us-design-purple);
	transition: color 0.15s ease;
}

.contact-info-card:hover .contact-info-card__icon,
.contact-info-card:focus-within .contact-info-card__icon {
	color: var(--us-design-white);
}

.contact-info-card__icon-default,
.contact-info-card__icon-hover {
	position: absolute;
	inset: 0;
	display: block;
	transition: opacity 0.15s ease;
}

.contact-info-card__icon-hover {
	opacity: 0;
}

.contact-info-card:hover .contact-info-card__icon-default,
.contact-info-card:focus-within .contact-info-card__icon-default {
	opacity: 0;
}

.contact-info-card:hover .contact-info-card__icon-hover,
.contact-info-card:focus-within .contact-info-card__icon-hover {
	opacity: 1;
}

.contact-info-card__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.contact-info-card__heading {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0 0 var(--space-2);
}

.contact-info-card__text {
	font-size: 1rem;
	line-height: 1.4;
	margin: 0 0 1.5rem; /* 24px til værdi */
}

.contact-info-card__value {
	font-weight: 700;
	font-size: 1rem;
	color: inherit;
}

.contact-info-box,
.contact-main__form-wrap {
	border-radius: var(--radius-image);
	background: color-mix(in srgb, #f1f1f1 25%, transparent);
	border: 1px solid color-mix(in srgb, var(--us-design-light-grey) 50%, transparent);
}

/* Variabel højde der følger resten af venstre kolonne - teksten centreres
   lodret så luften fordeles jævnt foroven og forneden. */
.contact-info-box {
	display: flex;
	flex: 1;
	min-height: 0;
}

.contact-info-box__inner {
	margin: auto 0;
	/* Matcher cards' padding (.contact-info-card) i stedet for sin egen
	   større 48/48/56px — samme boks-familie skal have samme indre luft. */
	padding: var(--space-4);
}

.contact-info-box__title {
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0 0 var(--space-2);
}

.contact-info-box__text {
	font-size: 1rem;
	line-height: 1.4;
}

/* min-height svarer til den fulde formulars højde, så kortet ikke
   krymper/hopper når formularen erstattes af success-beskeden. */
.contact-main__form-wrap {
	display: flex;
	flex-direction: column;
	min-height: 56.625rem; /* ~906px */
	padding: 1.875rem 1.875rem 2.5rem; /* 30px 30px 40px */
}

/* Success-beskeden fylder ikke resten af formularen ud, så den
   centreres lodret i det ekstra rum i stedet for at flyde foroven. */
.contact-form__status--success {
	margin-block: auto;
}

.contact-form {
	display: grid;
	align-content: start;
	gap: 1.25rem; /* 20px felt-gap, jf. Figma */
}

.contact-form__field {
	display: grid;
	gap: var(--space-1);
}

.contact-form__label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.875rem;
}

.contact-form__required {
	color: var(--us-design-purple);
}

/* Elementnavn + klasse i selectoren, så specificiteten matcher/slår
   Underscores' egen input[type="..."]-reset i style.css (ellers vinder
   den og giver f.eks. 3px padding på almindelige tekstfelter). */
input.contact-form__input,
select.contact-form__input,
textarea.contact-form__input {
	width: 100%;
	min-height: 2.5rem;
	padding: var(--space-1) var(--space-2);
	border: 1px solid var(--us-design-light-grey);
	border-radius: 0.25rem;
	font: inherit;
	color: inherit;
	background: var(--us-design-white);
}

input.contact-form__input:focus,
select.contact-form__input:focus,
textarea.contact-form__input:focus {
	outline: none;
	border-color: var(--us-design-orange);
	box-shadow: 0 0 0 1px var(--us-design-orange);
}

/* Fjern browserens native pil og sæt et eget chevron 1rem fra højre
   kant, jf. Figma (i stedet for helt ude i kanten). */
select.contact-form__input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.75rem;
	background-image: url("../icons/ui/contact-form-select-arrow.svg");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.875rem;
}

.contact-form__message {
	min-height: 10.5625rem; /* 169px */
	resize: vertical;
}

.contact-form__field--error .contact-form__label,
.contact-form__field--error input.contact-form__input,
.contact-form__field--error select.contact-form__input,
.contact-form__field--error textarea.contact-form__input {
	color: var(--us-design-purple);
	border-color: var(--us-design-purple);
}

.contact-form__field-error {
	margin: 0;
	color: var(--us-design-purple);
	font-size: 0.875rem;
	font-style: italic;
}

.contact-form__status {
	padding: var(--space-2);
	border: 1px solid currentColor;
	border-radius: var(--radius-image);
}

.contact-form__status--error {
	margin-bottom: 2rem;
	border: none;
	border-radius: 0.25rem;
	background: var(--us-design-purple);
	color: var(--us-design-white);
	text-align: center;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.875rem;
}

.contact-form__submit {
	justify-self: stretch;
}

.contact-form__privacy {
	font-size: 0.875rem;
	color: var(--us-design-text);
}

.contact-form__privacy-link {
	color: var(--us-design-purple);
	text-decoration: none;
}

.contact-form__privacy-link:hover {
	text-decoration: underline;
}

.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Tablet: de faste 2x570px-kolonner passer ikke i 768-1023px - stak
   formularen under kort/info-boks. */
@media (min-width: 768px) and (max-width: 1023px) {
	.contact-main__inner {
		grid-template-columns: 1fr;
	}

	/* Kortenes faste 2x270px-grid (Figma-mål til desktop, hvor venstre
	   kolonne selv er 570px) fylder IKKE resten af bredden nu hvor venstre
	   kolonne er blevet fuld bredde herover — kortene stopper langt inde
	   fra info-boks/formularens kant. Skal matche resten af elementernes
	   bredde: fleksible kolonner i stedet for faste 16.875rem. */
	.contact-info-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Formular → testimonial: fast 96px på alle breakpoints, aldrig
	   reduceret (i modsætning til .contact-main's egen top-padding, som
	   allerede er 48px) — samme sektions-rytme som resten af siden. */
	.contact-main {
		padding-bottom: var(--space-9); /* 72px */
	}

	.contact-hero__title {
		padding-right: var(--contact-hero-title-pr-tablet, var(--contact-hero-title-pr, 0));
	}

	/* Luft til floating-contact-icons i højre side - kun selve introteksten,
	   ikke hele hero-containeren. .contact-main__inner (kort/info-boks/
	   formular) fylder fortsat 100%, ligesom Testimonial og Footer. Samme
	   værdi som kategorisidernes .service-category-hero__text. */
	.contact-hero__text {
		max-width: 85%;
	}

	/* Samme overskriftsstørrelse og header-afstand som kategorisiderne
	   (.service-category-hero__title / __inner). */
	.contact-hero {
		padding-top: var(--space-9); /* 72px */
	}

	.contact-hero__title {
		font-size: var(--font-size-3xl); /* 3rem / 48px */
	}
}

@media (max-width: 767px) {
	/* Header → H1 på mobil: 64px (--space-8), samme værdi som Om US DESIGN
	   og single case-siden — var uændret 96px (desktop/tablet-værdien),
	   hvilket gjorde luften mellem header og overskrift unødigt stor. */
	.contact-hero {
		padding-top: var(--space-8);
	}

	/* Formular → testimonial: samme princip som header→H1 herover, endnu et
	   trin ned fra tablets 72px. */
	.contact-main {
		padding-bottom: var(--space-8); /* 64px */
	}

	.contact-hero__title,
	.contact-hero__text {
		max-width: none;
	}

	.contact-hero__inner {
		gap: var(--space-5);
	}

	.contact-hero__title {
		padding-right: var(--contact-hero-title-pr-mobile, var(--contact-hero-title-pr, 0));
		/* Samme H-skala mobil som Om US DESIGN: uden denne bunder H1's
		   desktop-clamp() ud i sit minimum (48px) i stedet for 36px. */
		font-size: 2.25rem;
	}

	.contact-info-cards {
		grid-template-columns: 1fr;
	}

	.contact-main__inner {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   About page — Figma-aligned v2
   ========================================================================== */

.about-hero,
.about-intro,
.about-match,
.about-process {
	padding-block: var(--space-12);
}

/* Hero image → intro text: 72px, not the stacked 96px + 96px of two
   adjacent section paddings. */
.about-hero {
	padding-bottom: 0;
}

.about-intro {
	padding-top: var(--space-9); /* 72px */
	padding-bottom: 0;
}

/* Intro text → Godt/Mindre match box: the flow's last paragraph already
   carries its own 32px margin (the flow-root container contains it rather
   than collapsing it away), so this adds just the extra 32px of air —
   64px total, not a full 96px section gap. */
.about-match {
	/* 40px here + the flow's last paragraph's own 32px margin = 72px total
	   from the end of the text to this box. */
	padding-top: var(--space-5); /* 40px */
	padding-bottom: 0;
}

.about-process {
	padding-top: var(--space-12); /* 96px from the match box down to the full-width image */
}

.about-hero__inner,
.about-intro__inner,
.about-match__inner,
.about-process__inner {
	width: min(100%, var(--container-outer-max));
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* 8-column / 32px-gap grid: column 8 stays empty except for full-bleed
   media, the CTA section and the testimonial section (those already span
   the full container width and need no grid). */
.about-intro__inner,
.about-match__inner,
.about-process__inner {
	--about-col: calc((var(--container-max) - 7 * var(--space-4)) / 8);
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	column-gap: var(--space-4);
}

.about-hero__content {
	/* Ingen max-width — H1'en skal have fuld bredde, så padding-right-feltet
	   i admin er den eneste styring af linjefald, ikke en konkurrerende
	   fast bredde her. */
	margin-bottom: var(--space-8);
}

.about-hero__title {
	font-size: clamp(var(--font-size-3xl), 5vw, 4.5rem);
	line-height: var(--line-height-tight);
	padding-right: var(--about-hero-title-pr, 0);
}

.about-hero__media,
.about-process__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-image);
}

.about-hero__image,
.about-process__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Ekstra specificitet (.about-hero forælder) for at vinde over den generiske .about-page h2-regel,
   nu hvor billedteksten er en rigtig <h2> og ikke længere en figcaption. */
.about-hero .about-hero__subtitle {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--space-5) var(--space-8);
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-3xl));
	line-height: var(--line-height-heading);
	color: var(--us-design-white);
	background: color-mix(in srgb, var(--us-design-purple) 88%, transparent);
}

.about-hero__text {
	max-width: 35.625rem;
	margin-top: var(--space-8);
	margin-left: auto;
	font-size: 1.25rem; /* 20px — intro-tekst styling */
	line-height: 1.4;
}

/* Continuous text flow: intro paragraph, floated pull quote, match heading + intro */
.about-intro__text {
	grid-column: 4 / span 4;
	display: flow-root; /* contains the float so section height/clearing behave */
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
}

.about-intro__text p {
	margin: 0 0 var(--space-4);
}

/* Kun det allerførste afsnit er intro-tekst — resten af flowet er bodytext */
.about-intro__text > p:first-child {
	font-size: 1.25rem; /* 20px — intro-tekst styling */
	line-height: 1.4;
}

.about-intro__text h2 {
	clear: none; /* let the heading wrap beside the floated pull quote, like the rest of the flow */
	/* em i stedet for faste px: luften følger overskriftens egen font-size,
	   så den skalerer automatisk ned på tablet/mobil uden separate regler.
	   Forholdet er regnet ud fra desktop (64px / 32px ved 48px H2), så
	   desktop forbliver pixel-identisk — kun tablet/mobil ændrer sig. */
	margin: 1.3333em 0 0.6667em;
}

.about-pull-quote {
	float: left;
	width: var(--pull-quote-width, 40rem); /* 640px default */
	/* Top margin defaults to 0 so it sits flush with the paragraph it
	   attaches to (the wrap then adjusts automatically as that text
	   changes length). Left reach into the grid stays code-computed —
	   only top/right/bottom are editor-configurable. */
	margin: var(--pull-quote-margin-top, 0) var(--pull-quote-margin-right, var(--space-6)) var(--pull-quote-margin-bottom, var(--space-6)) calc(-3 * (var(--about-col) + var(--space-4)));
	padding: var(--pull-quote-padding-top, 6.5rem) 5rem var(--pull-quote-padding-bottom, 7rem) 17rem; /* 104 80 112 272 default */
	border-radius: var(--radius-image);
	background-size: cover;
	background-position: var(--pull-quote-image-position, center);
}

.about-pull-quote__inner {
	display: flex;
	width: 100%; /* fills the padding box — adapts automatically to a configurable box width */
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-5); /* 40px */
}

.about-pull-quote__mark {
	display: block;
	width: 4rem; /* 64px */
	color: var(--us-design-purple);
}

.about-pull-quote__mark svg {
	display: block;
	width: 100%;
	height: auto;
}

.about-pull-quote__text {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding-left: var(--pull-quote-text-padding-left, 0);
	color: var(--us-design-text);
	text-align: right;
	font-family: var(--font-body);
	font-size: 2rem; /* 32px */
	font-style: italic; /* Lota Grotesque Light It */
	font-weight: 300;
	line-height: 1.6; /* 160% / 51.2px */
}

.about-pull-quote__text p {
	margin: 0;
}

.about-page h2 {
	font-size: var(--font-size-3xl);
	line-height: var(--line-height-tight);
}

.about-match__lists {
	grid-column: 4 / span 4;
	display: flex;
	flex-direction: column;
	gap: var(--space-8); /* 64px between the Godt match / Mindre godt match groups */
	padding: var(--space-8) var(--space-7); /* 64px top/bottom, 56px left/right */
	border: 1px solid color-mix(in srgb, var(--us-design-light-grey) 75%, transparent);
	border-radius: var(--radius-image);
	background: rgba(241, 241, 241, 0.5);
}

.about-match__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-4); /* 32px heading -> list */
}

.about-match__group-heading {
	margin: 0;
	font-size: var(--font-size-2xl); /* 32px — H3-trin i det foreslåede H-hierarki (H2 48px ÷1,5) */
	font-weight: 700;
	line-height: 1.2;
}

.about-match__list li {
	font-size: 1.25rem; /* 20px — intro-tekst styling, bevidst holdt som Godt/Mindre godt match-listerne */
	line-height: 1.4;
}

.about-process__flow p {
	font-size: var(--font-size-body); /* normal bodytext efter overskrifter */
	line-height: var(--line-height-body);
}

.about-match__list,
.about-timeline__list {
	padding: 0;
	margin: 0;
}

.about-match__list {
	display: grid;
	gap: var(--space-2); /* 16px between bullet items */
	padding-inline-start: 1.875rem; /* 30px — Figma-specified indent */
}

.about-process__inner {
	gap: var(--space-12) var(--space-4); /* 96px from the picture down to the flow row, 32px column gap */
}

.about-process__media {
	grid-column: 1 / -1;
}

.about-process__media--stroke {
	/* Border, ikke inset box-shadow: en inset box-shadow males UNDER
	   elementets eget indhold i CSS'ens malingsrækkefølge, så det fuldt
	   opake billede indeni dækker skyggen helt — stroken var derfor usynlig
	   på alle breakpoints, ikke kun tablet/mobil. En border ligger i selve
	   boks-modellen og kan ikke dækkes af indholdet. box-sizing: border-box
	   (global regel) sikrer at det ikke giver layout-shift, og border følger
	   border-radius helt automatisk. */
	border: 1px solid var(--us-design-light-grey);
}

/* Continuous text column, col 4-7 like the rest of the page — the timeline
   floats in from the top of the first heading and reaches back to col 1,
   exactly like the Pull Out Quote floats into the intro text. */
.about-process__flow {
	grid-column: 4 / span 4;
	grid-row: 2;
	display: flow-root;
}

.about-process__flow p {
	margin: 0 0 var(--space-4);
}

.about-process__flow h2 {
	clear: none; /* let the heading wrap beside the floated timeline, like the rest of the flow */
	/* Samme em-baserede luft som .about-intro__text h2 — se kommentar der. */
	margin: 1.3333em 0 0.6667em;
}

.about-process__flow h2:first-child,
.about-timeline + h2 {
	margin-top: 0;
}

.about-timeline {
	float: left;
	width: calc(3 * var(--about-col) + 2 * var(--space-4)); /* spans col 1-3 */
	margin-top: var(--timeline-margin-top, 0);
	margin-right: var(--space-4);
	margin-bottom: var(--space-6);
	margin-left: calc(-3 * (var(--about-col) + var(--space-4)));
	padding-top: var(--timeline-padding-top, 0);
}

.about-timeline__inner {
	padding: 0;
}

.about-timeline__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
}

.about-timeline__list::before {
	position: absolute;
	top: 1rem;
	bottom: 0;
	/* Markørcirklen sidder forskudt 1rem fra listens venstrekant (dens eget
	   centrum) — linjen skal centreres OM det punkt, ikke starte der. */
	left: calc(1rem - 0.1875rem / 2);
	width: 0.1875rem;
	background: var(--us-design-orange);
	content: "";
}

.about-timeline__list::after {
	position: absolute;
	bottom: -0.1rem;
	/* The visible tip is the box's bottom-right corner, which lands at the
	   box's own center once rotated — so this must equal the marker's
	   center (1rem, samme som linjens centrum) minus half this box. */
	left: calc(1rem - 0.75rem / 2);
	width: 0.75rem;
	height: 0.75rem;
	border-right: 0.1875rem solid var(--us-design-orange);
	border-bottom: 0.1875rem solid var(--us-design-orange);
	transform: rotate(45deg);
	content: "";
}

.about-timeline__item {
	position: relative;
	display: grid;
	/* marker column unchanged; year column fixed at 72px with a 12px gap
	   on both sides (circle -> year -> title) */
	grid-template-columns: 2.5rem 4.5rem minmax(0, 1fr);
	gap: 0.75rem; /* 12px */
	align-items: start;
	min-height: 7.5rem;
}

.about-timeline__year {
	font-weight: 700;
	color: var(--us-design-orange);
	transition: color 160ms ease;
}

.about-timeline__marker {
	position: relative;
	z-index: 1;
	display: block;
	width: 2rem;
	height: 2rem;
	border: 0.1875rem solid var(--us-design-orange);
	border-radius: 50%;
	background: var(--us-design-white);
	transition: border-color 160ms ease;
}

.about-timeline__marker::after {
	position: absolute;
	inset: 0.35rem;
	border-radius: 50%;
	background: var(--us-design-orange);
	content: "";
	transition: background-color 160ms ease;
}

.about-timeline__content {
	display: grid;
	gap: 0.2rem;
}

.about-timeline__title {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-tight);
	transition: color 160ms ease;
}

.about-timeline__item:hover .about-timeline__marker {
	border-color: var(--us-design-purple);
}

.about-timeline__item:hover .about-timeline__marker::after {
	background: var(--us-design-purple);
}

.about-timeline__item:hover .about-timeline__year,
.about-timeline__item:hover .about-timeline__title {
	color: var(--us-design-purple);
}

.about-cases-bridge__link {
	margin-top: var(--space-2);
}

/* Spalte 4-7-elementerne rykkes 72px mod højre, men skal stadig stoppe ved
   spalte 7 — 72px er mindre end en hel spaltebredde, så det kan ikke gøres
   via grid-linjer. margin-left virker her fordi grid-elementer som
   udgangspunkt strækkes til deres areal: sætter man kun venstre margin,
   holder højrekanten sig ved spalte 7, mens boksen blot bliver 72px smallere. */
@media (min-width: 1024px) {
	.about-intro__text,
	.about-match__lists,
	.about-process__flow {
		margin-left: 72px;
	}

	.about-pull-quote {
		/* Keep the quote on the container's left edge, as in Figma,
		   independently of the deliberately inset, narrower text column.
		   Resolve the three-column reach from the actual four-column text
		   width, not the maximum container width, so it also fits 1024px. */
		margin-left: calc(-0.75 * (100% + 72px + var(--space-4)) - 72px);
	}
}

@media (max-width: 1023px) {
	.about-intro__inner,
	.about-match__inner,
	.about-process__inner {
		grid-template-columns: 1fr;
	}

	.about-intro__text,
	.about-match__lists {
		grid-column: 1;
	}

	.about-process__media,
	.about-process__flow {
		grid-column: 1;
		grid-row: auto;
	}

	.about-timeline {
		float: none;
		width: 100%;
		margin: 0 0 var(--space-6);
	}

	.about-pull-quote {
		float: none;
		width: 100%;
		margin-top: var(--pull-quote-margin-top-tablet, 0);
		margin-right: 0;
		margin-bottom: var(--pull-quote-margin-bottom-tablet, var(--space-6));
		margin-left: 0;
		padding-top: var(--pull-quote-padding-top-tablet, var(--space-8));
		padding-right: var(--space-6);
		padding-bottom: var(--pull-quote-padding-bottom-tablet, var(--space-8));
		padding-left: var(--space-6);
	}

	.about-pull-quote__inner {
		width: 100%;
	}

	.about-pull-quote__text {
		padding-left: var(--pull-quote-text-padding-left-tablet, 0);
	}

	.about-hero__title {
		padding-right: var(--about-hero-title-pr-tablet, var(--about-hero-title-pr, 0));
	}

	/* H1 er låst til 48px på tablet (se reglen længere nede) — uden denne
	   ville sektionsoverskrifterne (H2) forblive på desktops 48px og fremstå
	   lige så store som H1, i stedet for tydeligt underordnet. */
	.about-page h2 {
		font-size: var(--font-size-2xl); /* 32px */
	}
}

/* Luft til floating-contact-icons i højre side på tablet - kun selve
   introteksten (inkl. Pull Out Quote-flowet), ikke hele containeren (den
   ramte ellers også hero-billedet). Samme værdi som kategorisidernes
   .service-category-hero__text. */
@media (min-width: 768px) and (max-width: 1023px) {
	.about-hero__text,
	.about-intro__text,
	.about-process__flow {
		max-width: 85%;
	}

	/* Billede → introtekst: matcher nu mobils 48px i stedet for desktops
	   uændrede 72px. */
	.about-intro {
		padding-top: var(--space-6); /* 48px */
	}

	/* Eksperimentel indrykning, aflæst fra single case-siden (kun tablet):
	   64px fra den reelle sidekant i alt = 32px almindelig container-margin
	   + 32px (var(--space-4)) ekstra indryk. Sat på al tekst på Om US DESIGN
	   for at se hvordan det ser ud — ikke rullet ud andre steder endnu. */
	.about-hero__text,
	.about-intro__text,
	.about-match__lists,
	.about-process__flow {
		padding-left: var(--space-4); /* 32px */
	}

	/* Citatboksen skal bryde ud af BÅDE 85%-begrænsningen og den nye 32px
	   venstre-padding på .about-intro__text, så den holder samme fulde
	   bredde som match-boksen og billedet uden indryk i nogen side.
	   margin-left annullerer paddingen, width lægger den tilbage før
	   0.85-opdelingen. Skal IKKE gælde på mobil, hvor hverken 85%-
	   begrænsningen eller indrykningen findes. */
	.about-pull-quote {
		margin-left: calc(-1 * var(--space-4));
		width: calc((100% + var(--space-4)) / 0.85);
	}

	/* Samme overskriftsstørrelse og header-afstand som kategorisiderne
	   (.service-category-hero__title / __inner). */
	.about-hero {
		padding-top: var(--space-9); /* 72px */
	}

	.about-hero__title {
		font-size: var(--font-size-3xl); /* 3rem / 48px */
	}

	/* Fast størrelse i stedet for desktop-clamp'en (3vw), som på tablet-
	   bredder falder helt ned til ~24-31px — for lille i forhold til H1's
	   faste 48px. 32px holder samme ca. 1,5-forhold som desktop (72:48). */
	.about-hero .about-hero__subtitle {
		font-size: var(--font-size-2xl); /* 32px */
		padding: var(--space-4) var(--space-5); /* 32px / 40px, kun tablet */
	}

	/* H-skala tablet: H3 ét trin ned fra desktops 32px, ligesom H1/H2. */
	.about-match__group-heading {
		font-size: var(--font-size-xl); /* 24px */
	}

	/* Introtekst-rytme tablet: 20px → 18px. */
	.about-hero__text,
	.about-intro__text > p:first-child,
	.about-match__list li {
		font-size: var(--font-size-lg); /* 18px */
	}

	/* Match-boks → billede og billede → tidslinje arvede desktops uændrede
	   96px hver, uden nogen tablet-reduktion — 192px "død zone" i alt
	   omkring billedet. Reduceret til 72px hver, samme skalering som
	   resten af tablet-reglerne (jf. --space-9 andre steder på siden). */
	.about-process {
		padding-top: var(--space-9); /* 72px, match-boks → billede */
	}

	.about-process__inner {
		gap: var(--space-9) var(--space-4); /* 72px, billede → tidslinje */
	}
}

@media (max-width: 767px) {
	.about-hero,
	.about-intro,
	.about-match,
	.about-process {
		padding-block: var(--space-8);
	}

	/* Samme princip som desktop (se kommentarer ovenfor) — hver sektion
	   bidrager kun luften fra ÉN side, så to tilstødende sektioners padding
	   ikke lægges oveni hinanden. Uden dette bliver f.eks. billede→introtekst
	   64+64=128px i stedet for det tilsigtede 48px. */
	.about-hero {
		padding-bottom: 0;
	}

	.about-intro {
		padding-top: var(--space-6); /* 48px, billede → introtekst */
		padding-bottom: 0;
	}

	.about-match {
		/* 16px her + flowets sidste afsnits egen 32px margin = 48px total. */
		padding-top: var(--space-2); /* 16px */
		padding-bottom: 0;
	}

	/* Match-boks → billede manglede denne reduktion — var stadig på den
	   generelle 64px sektionspadding, mens de to andre overgange (billede→
	   introtekst, introtekst→match) allerede var rettet til 48px. Ensrettet. */
	.about-process {
		padding-top: var(--space-6); /* 48px, match-boks → billede */
	}

	.about-hero__content {
		margin-bottom: var(--space-5);
	}

	/* .about-hero-forælder nødvendig for at vinde specificitetskampen mod
	   desktop-reglen (samme grund som .about-page h2-fixet) — ellers vinder
	   "position: absolute" stadig, og billedteksten forbliver et overlay. */
	.about-hero .about-hero__subtitle {
		position: static;
		padding: var(--space-3);
		background: var(--us-design-purple); /* 100% massiv, ikke gennemsigtigt overlay som på desktop */
	}

	.about-hero__text {
		margin-top: var(--space-5);
	}

	.about-hero__title {
		padding-right: var(--about-hero-title-pr-mobile, var(--about-hero-title-pr, 0));
		font-size: 2.25rem; /* 36px — H-skala mobil, ét trin ned fra tablets 48px */
	}

	/* H-skala mobil: H2 24px, H3 20px — endnu et trin ned fra tablet. */
	.about-page h2 {
		font-size: var(--font-size-xl); /* 24px */
	}

	.about-match__group-heading {
		font-size: 1.25rem; /* 20px */
	}

	/* Introtekst-rytme mobil: bunder ud i normal bodytext (16px). */
	.about-hero__text,
	.about-intro__text > p:first-child,
	.about-match__list li {
		font-size: var(--font-size-body); /* 16px */
	}

	/* Billede → tidslinje: 48px (--space-6), samme rytme som de tre
	   sektionsovergange på siden — ikke det generelle 40px "element-til-
	   element"-mål, det virkede 0,5rem for lidt her. */
	.about-process__inner {
		gap: var(--space-6);
	}

	.about-match__lists {
		gap: var(--space-5);
		padding: var(--space-6) var(--space-5); /* 48px/40px, kun mobil (desktop/tablet: 64px/56px) */
	}

	.about-timeline {
		margin-bottom: var(--space-5);
	}

	.about-pull-quote {
		margin-top: var(--pull-quote-margin-top-mobile, var(--pull-quote-margin-top-tablet, 0));
		margin-bottom: var(--pull-quote-margin-bottom-mobile, var(--pull-quote-margin-bottom-tablet, var(--space-6)));
		padding-top: var(--pull-quote-padding-top-mobile, var(--pull-quote-padding-top-tablet, var(--space-8)));
		padding-bottom: var(--pull-quote-padding-bottom-mobile, var(--pull-quote-padding-bottom-tablet, var(--space-8)));
	}

	.about-pull-quote__text {
		font-size: 1.5rem;
		padding-left: var(--pull-quote-text-padding-left-mobile, var(--pull-quote-text-padding-left-tablet, 0));
	}

	.about-timeline__item {
		grid-template-columns: 2.5rem 4rem minmax(0, 1fr);
		min-height: 6.5rem;
	}
}

/* ==========================================================================
   Persondatapolitik — ingen Figma-reference, bruger H-hierarki-skalaen fra
   CLAUDE.md (72/48/32 → 48/32/24 → 36/24/20) og samme tekstbredde som
   .project-hero__intro (44rem).
   ========================================================================== */

.privacy-page {
	padding-block: var(--space-12) var(--space-16);
}

.privacy-page__inner {
	width: min(100%, var(--container-outer-max));
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.privacy-page__header {
	max-width: 44rem;
	margin-bottom: var(--space-8);
}

.privacy-page__title {
	margin: 0;
	font-size: 4.5rem; /* 72px */
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--us-design-text);
}

.privacy-page__updated {
	margin: var(--space-3) 0 0;
	font-size: var(--font-size-sm);
	color: var(--us-design-grey);
}

.privacy-page__content {
	max-width: 44rem;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--us-design-text);
}

.privacy-page__content p,
.privacy-page__content ul {
	margin: 0 0 var(--space-4);
}

.privacy-page__content > :last-child {
	margin-bottom: 0;
}

.privacy-page__content h2 {
	font-size: var(--font-size-3xl); /* 48px */
	line-height: var(--line-height-tight);
	/* Samme em-baserede luft som .about-intro__text h2 — se kommentar der. */
	margin: 1.3333em 0 0.6667em;
}

.privacy-page__content h3 {
	font-size: var(--font-size-2xl); /* 32px */
	line-height: var(--line-height-tight);
	margin: 1.3333em 0 0.6667em;
}

/* Persondatapolitik: H2/H3 rykket ét trin ned i H-hierarki-skalaen (H2 vises
   som H3-trinnet, H3 som H4-trinnet) — ikke ændret tag-hierarki, kun visuel
   størrelse, da sidens mange underoverskrifter ellers fremstod for
   dominerende. */
.privacy-page--compact-headings .privacy-page__content h2 {
	font-size: var(--font-size-2xl); /* 32px — H3-trinnet */
}

.privacy-page--compact-headings .privacy-page__content h3 {
	font-size: var(--font-size-xl); /* 24px — H4-trinnet */
}

.privacy-page__content ul {
	padding-left: var(--space-4);
}

.privacy-page__content li + li {
	margin-top: var(--space-1);
}

.privacy-page__content a {
	color: var(--us-design-purple);
	text-decoration: none;
}

.privacy-page__content a:hover {
	text-decoration: underline;
}

@media (min-width: 768px) and (max-width: 1023px) {
	.privacy-page__title {
		font-size: var(--font-size-3xl); /* 48px */
	}

	.privacy-page__content h2 {
		font-size: var(--font-size-2xl); /* 32px */
	}

	.privacy-page__content h3 {
		font-size: var(--font-size-xl); /* 24px */
	}

	.privacy-page--compact-headings .privacy-page__content h2 {
		font-size: var(--font-size-xl); /* 24px */
	}

	.privacy-page--compact-headings .privacy-page__content h3 {
		font-size: var(--font-size-lg); /* 18px */
	}
}

@media (max-width: 767px) {
	.privacy-page {
		padding-block: var(--space-8) var(--space-10);
	}

	.privacy-page__title {
		font-size: 2.25rem; /* 36px */
	}

	.privacy-page__content h2 {
		font-size: var(--font-size-xl); /* 24px */
	}

	.privacy-page__content h3 {
		font-size: 1.25rem; /* 20px */
	}

	.privacy-page--compact-headings .privacy-page__content h2 {
		font-size: 1.25rem; /* 20px */
	}

	.privacy-page--compact-headings .privacy-page__content h3 {
		font-size: var(--font-size-body); /* 16px */
	}
}

/* ==========================================================================
   Link-ikoner — link-back / link-forward / link-external
   Genbruger den etablerede "lille label"-typografi fra .project-cta__eyebrow
   og .client-case-hero__back-link (13px / 0.3em letter-spacing / versaler).
   Ikonerne er inlinet SVG med stroke="currentColor" og har ingen egen
   farve-regel, så de altid matcher linkteksten 1:1, også ved hover.
   ========================================================================== */

.link-back,
.link-back:visited,
.link-forward,
.link-forward:visited,
.link-external,
.link-external:visited {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-body);
	font-size: 0.8125rem; /* 13px */
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--us-design-grey);
	transition: color 160ms ease;
}

.link-back:hover,
.link-back:focus-visible,
.link-forward:hover,
.link-forward:focus-visible,
.link-external:hover,
.link-external:focus-visible {
	color: var(--us-design-purple);
}

.link-back__icon,
.link-forward__icon,
.link-external__icon {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	/* Flex align-items:center giver matematisk lodret centrering, men
	   versaler+letter-spacing har intet under-baseline-rum (ingen descenders),
	   så deres optiske midte ligger lidt over den geometriske — ikonet
	   nudges derfor 2px op for at matche. */
	transform: translateY(-2px);
}

/* Mørk baggrund (fx en boks med eksterne links) — lysere dæmpet farve,
   orange ved hover som sitets øvrige hover-accent på mørke/farvede flader
   (jf. .button--primary:hover). */
.link-back--on-dark,
.link-forward--on-dark,
.link-external--on-dark {
	color: var(--us-design-light-grey);
}

.link-back--on-dark:hover,
.link-back--on-dark:focus-visible,
.link-forward--on-dark:hover,
.link-forward--on-dark:focus-visible,
.link-external--on-dark:hover,
.link-external--on-dark:focus-visible {
	color: var(--us-design-orange);
}

/* ==========================================================================
   GLightbox – høje billeder (delt, ikke webscroll-specifik)
   GLightbox' egen .gslide-image img presser som standard alt ned på maks.
   skærmhøjden med object-fit: cover – fint til almindelige foto, men
   beskærer et langt website-screenshot voldsomt. Ethvert billede der er
   markant højere end bredt (klassificeret af main.js, ikke af hvilken
   sektionstype det kommer fra) får i stedet lov at vises i fuld bredde og
   scrolle naturligt lodret inde i lightboxen. Højere specificitet end
   GLightbox' egne ".gslide-image img"-regler (2 klasser mod 1), så
   overstyringen vinder uanset stylesheet-rækkefølge (glightbox.min.css
   indlæses efter main.css). */
.gslide-media.gslide-image.gslide-image--tall {
	align-items: flex-start;
	max-height: 90vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.gslide-image.gslide-image--tall img {
	max-height: none;
	object-fit: contain;
}
/* Redaktionelle projekter: Brith Ankjær, Figma 2179:5148.
   Korttitel, metadata og fælles billedviser genbruges. */
.project-single--editorial .project-hero__inner {
	padding-block: 6.25rem;
}

.client-case-single--editorial .project-media__heading,
.client-case-single--editorial .project-media__subheading {
	hyphens: auto;
	overflow-wrap: anywhere;
}
.client-case-single--editorial .project-hero__meta dd { font-size: 1.25rem; line-height: 1.4; }
@media (max-width: 767px) {
 .client-case-single--editorial .project-hero__meta dd { font-size: 1.125rem; }
}
.client-case-single--editorial .project-featured-image__image { height: auto; aspect-ratio: auto; }
@media (max-width: 767px) {
 .client-case-single--editorial .client-case-hero__aside { margin: 0; padding: 0; background: transparent; }
}

/* Redaktionel kundecase: opt-in bevarer de eksisterende casevisninger. */
.client-case-single--editorial .client-case-hero .project-hero__inner { display: block; padding-block: 6.25rem; }
.client-case-single--editorial .client-case-hero .project-hero__content { display: grid; grid-template-columns: minmax(0, 788fr) minmax(0, 326fr); gap: var(--space-7); }
.client-case-single--editorial .client-case-hero__title { padding: 0; font-size: 4.5rem; overflow-wrap: anywhere; }
.client-case-single--editorial .client-case-hero__eyebrow { padding: 0; gap: var(--space-3); font-size: 1rem; }
.client-case-single--editorial .client-case-hero__eyebrow-icon { width: 54.198px; height: 48px; }
.client-case-single--editorial .client-case-hero .project-hero__intro { max-width: 45.125rem; line-height: 1.4; }
.client-case-single--editorial .client-case-hero .project-hero__intro p { margin: 0; line-height: inherit; }
.client-case-single--editorial .client-case-hero .project-hero__intro p + p { margin-top: 1.4em; }
.client-case-single--editorial .client-case-media .project-media__inner { padding-top: var(--space-4); }
.client-case-single--editorial .project-media__image { height: auto; aspect-ratio: auto; }
.client-case-single--editorial .project-media__image-text-media { min-height: 0; }
.client-case-single--editorial .project-media__image-text-stack { height: auto; grid-template-rows: auto; }
.client-case-single--editorial .project-media__image-text-item { min-height: 0; overflow: visible; }
.client-case-single--editorial .project-media__image-text-item .project-media__image { position: static; height: auto; aspect-ratio: auto; }
.client-case-single--editorial .project-media__editorial-media-asset .project-media__image { min-height: 0; }
@media (max-width: 1023px) {
 .client-case-single--editorial .client-case-hero .project-hero__inner { padding-block: var(--space-8); }
 .client-case-single--editorial .client-case-hero__title { font-size: 3rem; }
 .client-case-single--editorial .client-case-hero .project-hero__content { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
 .client-case-single--editorial .client-case-hero { display: block; }
 .client-case-single--editorial .client-case-hero__title { font-size: 2.25rem; margin-bottom: var(--space-5); hyphens: auto; }
 .client-case-single--editorial .client-case-hero .project-hero__main,
 .client-case-single--editorial .client-case-hero__aside { padding-inline: 0; }
 .client-case-single--editorial .project-hero__kicker { font-size: 1rem; }
 .client-case-single--editorial .client-case-hero .project-hero__intro { font-size: 1.125rem; }
}

.project-hero__kicker {
	margin: 0 0 var(--space-4);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--us-design-purple);
}

.project-single--editorial .project-hero__title {
	/* Lange danske sammensætninger skal kunne brydes på smalle skærme. */
	hyphens: auto;
	overflow-wrap: anywhere;
	max-width: 53.125rem;
	margin-bottom: var(--space-7);
	font-size: 4.5rem;
}

/* Bevar hele ord i desktop-layoutets redaktionelle overskrifter. */
@media (min-width: 1024px) {
	.project-single--editorial .project-hero__title {
		hyphens: manual;
	}
}

.project-single--editorial .project-hero__title--narrow {
	max-width: 49.25rem;
}

.project-single--editorial .project-hero__title--full-width {
	max-width: none;
}

.project-single--editorial .project-hero__content {
	grid-template-columns: minmax(0, 788fr) minmax(0, 326fr);
	gap: var(--space-7);
}

.project-single--editorial .project-hero__main {
	max-width: none;
}

.project-single--editorial .project-hero__service {
	min-height: 3rem;
	gap: var(--space-3);
	margin-bottom: var(--space-7);
}

.project-single--editorial .project-hero__service-icon {
	width: 3.375rem;
	height: 3rem;
}

.project-single--editorial .project-hero__service-name {
	font-size: var(--font-size-md);
}

.project-single--editorial .project-hero__intro {
	max-width: 45.125rem;
	font-size: 1.25rem;
	line-height: 1.4;
}

.project-single--editorial .project-hero__intro p {
	line-height: inherit;
	margin: 0;
}

.project-single--editorial .project-hero__intro p + p {
	margin-top: 1.4em;
}

.project-single--editorial .project-hero__meta {
	margin-top: 6.5rem;
	padding: 0 0 0 var(--space-7);
	gap: var(--space-3);
}

.project-single--editorial .project-hero__meta dt {
	font-size: 0.8125rem;
	line-height: 1.6;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.project-single--editorial .project-hero__meta dd {
	font-size: 1.25rem;
	line-height: 1.4;
}

.project-single--editorial .project-hero__back-link {
	margin-top: var(--space-7);
}

.project-single--editorial .project-media__inner {
	padding-top: 0;
	padding-bottom: var(--section-padding-y);
}

.project-single--editorial .project-media__image {
	aspect-ratio: auto;
	height: auto;
	border-radius: 0;
}

.project-media__section--gallery-portrait_stack .project-media__gallery-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
}

.project-media__section--gallery-portrait_stack .project-media__gallery-item:first-child {
	grid-row: span 2;
}

.project-media__section--gallery-portrait_stack .project-media__image {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

@media (max-width: 1023px) {
	.project-media__section--gallery-portrait_stack .project-media__gallery-item:first-child .project-media__image { height: 100%; }
	.project-single--editorial .project-hero__inner { padding-block: var(--space-8); }
	.project-single--editorial .project-hero__title { font-size: var(--font-size-3xl); }
	.project-single--editorial .project-hero__content { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	.project-single--editorial .project-hero__meta { margin: 0; padding: 0; border: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.project-single--editorial .project-hero__service { margin-bottom: var(--space-5); }
}

@media (max-width: 767px) {
	.project-single--editorial .project-hero__title { font-size: 2.25rem; margin-bottom: var(--space-5); }
	.project-hero__kicker { font-size: var(--font-size-md); }
	.project-single--editorial .project-hero__intro { font-size: var(--font-size-lg); }
	.project-single--editorial .project-hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.project-single--editorial .project-hero__meta dd { font-size: var(--font-size-lg); }
	.project-single--editorial .project-hero__back-link { margin-top: var(--space-5); }
	.project-media__section--gallery-portrait_stack .project-media__gallery-grid { grid-template-columns: 1fr; grid-template-rows: none; }
	.project-media__section--gallery-portrait_stack .project-media__gallery-item:first-child { grid-row: auto; }
}

/* Approved company band: 80% deep black, white text and solid 2px US yellow. */
.project-card__company::after {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    content: "";
    background: var(--us-design-orange);
    mix-blend-mode: normal;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
}

/* Category CTA -> cases: one section gap, matching client-case related projects. */
.service-category-cta:has(+ .frontpage-featured-projects) {
    margin-bottom: 0;
}
.service-category-cta + .frontpage-featured-projects .frontpage-featured-projects__inner {
    padding-top: var(--space-12);
}
@media (max-width: 1023px) {
    .service-category-cta + .frontpage-featured-projects .frontpage-featured-projects__inner {
        padding-top: var(--space-10);
    }
}
@media (max-width: 767px) {
    .service-category-cta + .frontpage-featured-projects .frontpage-featured-projects__inner {
        padding-top: var(--space-8);
    }
}

/* Case headlines keep whole words on tablet/desktop; Danish hyphenation is allowed on mobile. */
.project-single .project-hero__title,
.client-case-single .client-case-hero__title,
.project-single .project-media__heading,
.project-single .project-media__subheading,
.client-case-single .project-media__heading,
.client-case-single .project-media__subheading,
.project-card__title {
    -webkit-hyphens: none;
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}

@media (max-width: 767px) {
    .project-single .project-hero__title,
    .client-case-single .client-case-hero__title,
    .project-single .project-media__heading,
    .project-single .project-media__subheading,
    .client-case-single .project-media__heading,
    .client-case-single .project-media__subheading,
    .project-card__title {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}