/**
 * In Weelde — structural CSS.
 *
 * theme.json owns all tokens, typography, colour and block defaults.
 * This file carries only what theme.json cannot express:
 *   1. The fixed left rail and the body offset it requires
 *   2. Reshaping the core navigation overlay into a left panel
 *   3. The asymmetric full-bleed split grid used on the homepage
 *
 * Every value here reads from a theme.json token. If you find yourself
 * typing a hex code or a font name in this file, it belongs in theme.json.
 */

/* -------------------------------------------------------------------------
   1. Left rail
   ---------------------------------------------------------------------- */

.has-left-rail {
	padding-left: var(--wp--custom--rail-width);
}

.left-rail {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 900;
	width: var(--wp--custom--rail-width);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding-block-end: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--base);
	border-right: 1px solid var(--wp--preset--color--primary);
}

.left-rail__social .wp-block-social-link {
	opacity: 0.75;
	transition: opacity var(--wp--custom--transition-fast) ease;
}

.left-rail__social .wp-block-social-link:hover,
.left-rail__social .wp-block-social-link:focus-within {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   2. Header
   ---------------------------------------------------------------------- */

.site-header {
	position: relative;
	z-index: 800;
	background-color: var(--wp--preset--color--base);
}

.site-header__brand {
	/* The logo sits inboard of the rail, not centred in the header. */
	margin-inline-end: auto;
	padding-inline-start: var(--wp--preset--spacing--30);
}

.site-header__cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	padding-block: 14px;
	padding-inline: 32px;
}

/* -------------------------------------------------------------------------
   3. Navigation overlay
   ----------------------------------------------------------------------
   The core Navigation block with overlayMenu:"always" gives us the hamburger,
   the modal, focus trapping, ESC-to-close and correct ARIA for free. We only
   reposition it: full-screen modal becomes a fixed-width left panel sitting
   flush against the rail.
   ---------------------------------------------------------------------- */

/* The hamburger. Pinned into the rail, over everything. */
.site-nav .wp-block-navigation__responsive-container-open {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--rail-width);
	height: var(--wp--custom--rail-width);
	padding: 0;
	color: var(--wp--preset--color--contrast);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	cursor: pointer;
}

.site-nav .wp-block-navigation__responsive-container-open svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* The open panel. Core sets inset:0; we constrain it to the left. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
	inset: 0 auto 0 var(--wp--custom--rail-width);
	width: min(var(--wp--custom--menu-overlay-width), calc(100vw - var(--wp--custom--rail-width)));
	height: 100vh;
	padding: 0;
	background-color: var(--wp--preset--color--primary);
	overflow-y: auto;
}

/* Core centres the dialog contents; we want them left-aligned and set down
   from the top, matching the reference. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	padding-block-start: 38vh;
	padding-inline: var(--wp--preset--spacing--40);
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: var(--wp--preset--spacing--10);
	align-items: flex-start;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--accent);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	transition: opacity var(--wp--custom--transition-fast) ease;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover,
.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:focus {
	opacity: 0.65;
	text-decoration: none;
}

/* The close button, top-left of the panel. */
.site-nav .wp-block-navigation__responsive-container-close {
	top: 0;
	left: 0;
	right: auto;
	width: var(--wp--custom--rail-width);
	height: var(--wp--custom--rail-width);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--base);
	background: transparent;
	border: 0;
}

.site-nav .wp-block-navigation__responsive-container-close svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* -------------------------------------------------------------------------
   4. Split grid
   ----------------------------------------------------------------------
   The homepage alternates full-bleed image and black text cells in a 50/50
   grid. Apply .split-grid to a Group block and drop two children in.
   ---------------------------------------------------------------------- */

.split-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.split-grid > * {
	margin: 0;
	min-width: 0;
}

/* Image cells bleed to the cell edges with no padding. */
.split-grid__media,
.split-grid__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Text cells carry their own generous padding. */
.split-grid__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--base);
}

.split-grid__text > * {
	max-width: 46ch;
}

/* -------------------------------------------------------------------------
   5. Breakpoints
   ----------------------------------------------------------------------
   Matching the source: 991 / 767 / 479.
   ---------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
	.split-grid {
		grid-template-columns: 1fr;
	}

	/* Keep image-then-text order on every row once stacked, regardless of
	   which side the image was on at desktop width. */
	.split-grid.is-reversed .split-grid__media {
		order: -1;
	}

	.split-grid__text {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.split-grid__media img {
		height: auto;
		aspect-ratio: 16 / 10;
	}
}

@media screen and (max-width: 767px) {
	:root {
		--wp--custom--rail-width: 56px;
	}

	.site-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog {
		padding-block-start: 28vh;
	}
}

@media screen and (max-width: 479px) {
	.site-header__cta .wp-block-button__link {
		padding-inline: 20px;
	}

	.split-grid__text {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
}

/* -------------------------------------------------------------------------
   6. Accessibility
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* theme.json cannot set focus-visible globally; do it once here. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   7. Front page
   ----------------------------------------------------------------------
   theme.json applies root padding site-wide, which is right for text pages
   and wrong for the edge-to-edge split grid. Zero it out here only.
   ---------------------------------------------------------------------- */

.front-page-main {
	--wp--style--root-padding-left: 0;
	--wp--style--root-padding-right: 0;
}

.front-page-main > .split-grid {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* Image blocks inside a grid cell must fill it, not sit at intrinsic size. */
.split-grid > .split-grid__media {
	display: grid;
	margin: 0;
}

.split-grid > .split-grid__media > img {
	width: 100%;
	height: 100%;
	min-height: 340px;
	object-fit: cover;
	display: block;
}

@media screen and (max-width: 991px) {
	.split-grid > .split-grid__media > img {
		min-height: 0;
	}
}

/* =========================================================================
   8. Corrections
   =========================================================================
   Measured against the source stylesheet and the reference screenshots.
   These rules deliberately come last so they win on source order.

   Type scale is redefined here rather than in theme.json because the font
   installer rewrites theme.json, and a clobbered file would lose these.
   ---------------------------------------------------------------------- */

/* 8.1 Type scale ---------------------------------------------------------
   Source sizes: hero 50/60, h1 52/60, h2 40/50, h3 34/40, section 38/48.
   The original fluid minimums were far too low, so headings collapsed to
   roughly 60% of target at normal desktop widths. These clamps reach their
   maximum by about 1200px and floor at a readable mobile size.
   ---------------------------------------------------------------------- */

:root:root {
	--wp--preset--font-size--hero: clamp(2.25rem, 2.6vw + 1.4rem, 3.125rem);
	--wp--preset--font-size--heading-1: clamp(2.25rem, 2.8vw + 1.3rem, 3.25rem);
	--wp--preset--font-size--heading-2: clamp(1.875rem, 2.2vw + 1rem, 2.5rem);
	--wp--preset--font-size--heading-3: clamp(1.625rem, 1.6vw + 1rem, 2.125rem);
	--wp--preset--font-size--section: clamp(1.75rem, 1.8vw + 1rem, 2.375rem);
	--wp--preset--font-size--heading-4: clamp(1.5rem, 1.2vw + 1rem, 1.75rem);
}

/* Source line heights, which the fluid sizes above would otherwise stretch. */
.wp-block-heading.has-hero-font-size {
	line-height: 1.15;
}

.wp-block-heading.has-heading-2-font-size {
	line-height: 1.2;
	letter-spacing: -0.005em;
}

/* 8.2 Split grid row height ---------------------------------------------
   Without this the grid row takes the image's intrinsic height: a 2000px
   photo in a 700px column yields a 700px row. The source uses a fixed band
   of roughly 380px at desktop. minmax() keeps the floor while still letting
   a long text cell grow rather than clip.
   ---------------------------------------------------------------------- */

.split-grid {
	--split-row-height: clamp(300px, 21vw, 400px);
	grid-auto-rows: minmax(var(--split-row-height), auto);
	align-items: stretch;
}

.split-grid > .split-grid__media {
	display: block;
	height: 100%;
	min-height: 0;
	margin: 0;
	overflow: hidden;
}

.split-grid > .split-grid__media > img {
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 8.3 Text cell measure -------------------------------------------------
   Source: text column runs about 660px inside a 900px cell, with roughly
   80px of inner padding. The previous 46ch cap was about half that.
   ---------------------------------------------------------------------- */

.split-grid__text {
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: clamp(1.5rem, 4.8vw, 5rem);
	gap: 0;
}

.split-grid__text > * {
	max-width: 41rem;
}

.split-grid__text > * + * {
	margin-top: var(--wp--preset--spacing--10);
}

.split-grid__text > .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--30);
}

/* 8.4 Admin bar ---------------------------------------------------------
   The hamburger is fixed at top:0, which puts it underneath the WordPress
   admin bar (z-index 99999) for logged-in users. Offset it by the admin bar
   height so it stays reachable while editing.
   ---------------------------------------------------------------------- */

.admin-bar .site-nav .wp-block-navigation__responsive-container-open,
.admin-bar .site-nav .wp-block-navigation__responsive-container-close {
	top: 32px;
}

.admin-bar .site-nav .wp-block-navigation__responsive-container.is-menu-open {
	inset-block-start: 32px;
	height: calc(100vh - 32px);
}

.admin-bar .left-rail {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-nav .wp-block-navigation__responsive-container-open,
	.admin-bar .site-nav .wp-block-navigation__responsive-container-close {
		top: 46px;
	}

	.admin-bar .left-rail {
		top: 46px;
	}
}

/* 8.5 Hamburger visibility ----------------------------------------------
   Make the trigger unmistakable regardless of how core styles the button.
   ---------------------------------------------------------------------- */

.site-nav .wp-block-navigation__responsive-container-open,
.site-nav .wp-block-navigation__responsive-container-open:hover,
.site-nav .wp-block-navigation__responsive-container-open:focus {
	color: var(--wp--preset--color--contrast);
	opacity: 1;
	visibility: visible;
}

.site-nav .wp-block-navigation__responsive-container-open svg,
.site-nav .wp-block-navigation__responsive-container-open svg path {
	fill: currentColor;
	stroke: none;
}

/* 8.6 Header ------------------------------------------------------------
   Source OFFERTE button: solid white, dark label, square corners, compact
   uppercase Rajdhani with wide tracking.
   ---------------------------------------------------------------------- */

.site-header {
	min-height: 0;
	padding-block: var(--wp--preset--spacing--20) !important;
}

.site-header__cta .wp-block-button__link {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: 0;
	padding: 15px 34px;
}

.site-header__brand .wp-block-site-logo img {
	height: auto;
	display: block;
}

/* 8.7 Footer ------------------------------------------------------------
   "CONTACTGEGEVENS" was breaking mid-word because of the tracking applied
   to footer headings. Keep it on one line and match the source weight.
   ---------------------------------------------------------------------- */

.site-footer__heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.6;
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
	margin-bottom: var(--wp--preset--spacing--30);
}

.site-footer__nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5625;
	color: var(--wp--preset--color--contrast);
}

.site-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

.site-footer__columns {
	gap: var(--wp--preset--spacing--50);
}

.site-footer__badge {
	margin-top: var(--wp--preset--spacing--40);
}

.site-footer__rule {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: 0;
	border: 0;
	height: 1px;
	opacity: 0.5;
}

@media screen and (max-width: 767px) {
	.site-footer__heading {
		white-space: normal;
	}
}

/* =========================================================================
   9. Menu toggle and overlay refinements
   ========================================================================= */

/* 9.1 Stacking order ----------------------------------------------------
   .site-header is positioned with a z-index, so it forms a stacking
   context: the hamburger inside it cannot rise above the rail on its own,
   however large its own z-index. The header as a whole must outrank it.
   ---------------------------------------------------------------------- */

.left-rail {
	z-index: 700;
}

.site-header {
	z-index: 1200;
}

/* 9.2 Icon swap in place ------------------------------------------------
   Core ships two buttons: the opener in the header, and a closer inside the
   overlay (top-right by default). Rather than script a single toggle, the
   closer is moved on top of the opener's position and the opener hidden
   while open. The result reads as one icon changing from bars to a cross,
   with core's close handler, focus return and ARIA intact.
   ---------------------------------------------------------------------- */

body.has-modal-open .site-nav .wp-block-navigation__responsive-container-open,
.wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
	display: none;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	position: fixed;
	top: 0;
	left: 0;
	right: auto;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--rail-width);
	height: var(--wp--custom--rail-width);
	padding: 0;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.admin-bar .site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		top: 46px;
	}
}

.site-nav .wp-block-navigation__responsive-container-close svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* 9.3 Overlay panel ----------------------------------------------------
   Source panel: roughly 340px wide with about 88px of inner padding, menu
   block starting near 40% of viewport height.
   ---------------------------------------------------------------------- */

:root:root {
	--wp--custom--menu-overlay-width: 340px;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
	padding-block-start: 40vh;
	padding-inline: clamp(2rem, 5vw, 5.5rem);
}

/* 9.4 Menu items -------------------------------------------------------
   Source: about 16px, uppercase, roughly 28px between baselines. The
   previous 18px with tight gaps read too heavy and too cramped.
   ---------------------------------------------------------------------- */

.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 0.4rem;
	align-items: flex-start;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	padding-block: 0.15rem;
	color: var(--wp--preset--color--base);
}

@media screen and (max-width: 767px) {
	.site-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog {
		padding-block-start: 28vh;
	}
}

/* =========================================================================
   10. Toggle icon: unified geometry and animated swap
   =========================================================================
   Supersedes the sizing in 9.2 and 9.4.

   Core renders two buttons, not one. Making them share an identical box and
   animating one out as the other spins in reads as a single icon rotating
   between bars and cross.
   ---------------------------------------------------------------------- */

/* 10.1 Shared box ------------------------------------------------------- */

.site-nav .wp-block-navigation__responsive-container-open,
.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	position: fixed;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--rail-width);
	height: var(--wp--custom--rail-width);
	padding: 0;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transform-origin: 50% 50%;
}

.site-nav .wp-block-navigation__responsive-container-open svg,
.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	stroke: none;
	display: block;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The close button sits inside the overlay, which is offset by the rail
   width. position:fixed pulls it back over the rail. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	z-index: 10;
}

/* Admin bar offset applies to both, identically. */
.admin-bar .site-nav .wp-block-navigation__responsive-container-open,
.admin-bar .site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-nav .wp-block-navigation__responsive-container-open,
	.admin-bar .site-nav .wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-close {
		top: 46px;
	}
}

/* 10.2 Animated swap ---------------------------------------------------
   The opener stays in the layout and rotates out rather than being removed,
   so its transition can actually run. The closer arrives with its parent
   already displayed, so it needs a keyframe animation, not a transition.
   ---------------------------------------------------------------------- */

.site-nav .wp-block-navigation__responsive-container-open {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	transition:
		opacity 0.22s ease,
		transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

body.has-modal-open .site-nav .wp-block-navigation__responsive-container-open,
.wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
	display: flex;
	opacity: 0;
	transform: rotate(90deg) scale(0.7);
	pointer-events: none;
}

@keyframes inweelde-icon-spin-in {
	from {
		opacity: 0;
		transform: rotate(-90deg) scale(0.7);
	}
	to {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	animation: inweelde-icon-spin-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Slight lift on hover, on whichever icon is showing. */
.site-nav .wp-block-navigation__responsive-container-open:hover svg,
.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close:hover svg {
	transform: scale(1.12);
}

/* 10.3 Menu item size -------------------------------------------------
   20px, per the source.
   ---------------------------------------------------------------------- */

.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.5;
	padding-block: 0.2rem;
}

.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 0.5rem;
}

/* =========================================================================
   11. Single toggle control
   =========================================================================
   Supersedes sections 9.2, 10.1 and 10.2 for the close button.

   Core's block styles are printed after this stylesheet, so repositioning
   .wp-block-navigation__responsive-container-close with CSS loses on source
   order. Instead the closer is removed from view entirely and the opener
   handles both actions (see assets/js/menu-toggle.js), which also means the
   icon morph happens on one element rather than cross-fading two.

   State comes from .inweelde-menu-open on <html>, set by the script, so we
   never depend on which class core sets on <body>.
   ---------------------------------------------------------------------- */

/* 11.1 Remove core's close button --------------------------------------- */

.site-nav .wp-block-navigation__responsive-container-close,
.site-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	display: none !important;
}

/* 11.2 The opener stays put and stays visible --------------------------- */

.site-nav .wp-block-navigation__responsive-container-open,
.inweelde-menu-open .site-nav .wp-block-navigation__responsive-container-open,
body.has-modal-open .site-nav .wp-block-navigation__responsive-container-open,
.wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
	position: fixed;
	top: 0;
	left: 0;
	right: auto;
	bottom: auto;
	z-index: 100001; /* above core's overlay, which sits at 100000 */
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--rail-width);
	height: var(--wp--custom--rail-width);
	padding: 0;
	margin: 0;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.admin-bar .site-nav .wp-block-navigation__responsive-container-open,
.admin-bar.inweelde-menu-open .site-nav .wp-block-navigation__responsive-container-open {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-nav .wp-block-navigation__responsive-container-open,
	.admin-bar.inweelde-menu-open .site-nav .wp-block-navigation__responsive-container-open {
		top: 46px;
	}
}

/* 11.3 Icon morph -------------------------------------------------------
   Core's SVG provides the bars. Two pseudo-element strokes provide the
   cross. Closed: bars visible, strokes hidden. Open: bars rotate away as
   the strokes rotate into an X. One element, so this is a real morph.
   ---------------------------------------------------------------------- */

.site-nav .wp-block-navigation__responsive-container-open svg {
	width: 22px;
	height: 22px;
	display: block;
	fill: currentColor;
	stroke: none;
	opacity: 1;
	transform: rotate(0deg);
	transition:
		opacity 0.18s ease,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-nav .wp-block-navigation__responsive-container-open::before,
.site-nav .wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	background-color: currentColor;
	border-radius: 1px;
	opacity: 0;
	transform: translate(-50%, -50%) rotate(0deg);
	transition:
		opacity 0.18s ease 0.06s,
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.inweelde-menu-open .site-nav .wp-block-navigation__responsive-container-open svg {
	opacity: 0;
	transform: rotate(-90deg);
}

.inweelde-menu-open .site-nav .wp-block-navigation__responsive-container-open::before {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(45deg);
}

.inweelde-menu-open .site-nav .wp-block-navigation__responsive-container-open::after {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Hover nudge, whichever state it is in. */
.site-nav .wp-block-navigation__responsive-container-open:hover svg {
	transform: scale(1.12);
}

.inweelde-menu-open .site-nav .wp-block-navigation__responsive-container-open:hover svg {
	transform: rotate(-90deg) scale(0.9);
}

.inweelde-menu-open .site-nav .wp-block-navigation__responsive-container-open:hover::before {
	transform: translate(-50%, -50%) rotate(45deg) scaleX(1.12);
}

.inweelde-menu-open .site-nav .wp-block-navigation__responsive-container-open:hover::after {
	transform: translate(-50%, -50%) rotate(-45deg) scaleX(1.12);
}

/* =========================================================================
   12. Header alignment and CTA sizing
   =========================================================================
   Supersedes sections 2 and 8.6 for the header.
   ---------------------------------------------------------------------- */

/* 12.1 Take the nav out of the header flow ------------------------------
   The opener button is position:fixed, but .wp-block-navigation itself is
   still a flex item in the header. With justify-content:space-between that
   zero-width item claims the first slot and pushes the logo to the centre.
   Absolutely positioning the wrapper removes it from the flex line so only
   the brand and the CTA are distributed.
   ---------------------------------------------------------------------- */

.site-header {
	justify-content: flex-start;
}

.site-header > .site-nav,
.site-header > nav.site-nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	flex: 0 0 0;
	overflow: visible;
}

/* 12.2 Brand ------------------------------------------------------------
   The logo's left edge aligns with the hero text below it in the source,
   so it uses the same inset as the split grid's text cells.
   ---------------------------------------------------------------------- */

.site-header__brand {
	margin-inline: 0 auto;
	padding-inline-start: clamp(1.5rem, 4.8vw, 5rem);
}

.site-header__brand .wp-block-site-logo {
	margin: 0;
}

.site-header__brand .wp-block-site-logo img {
	display: block;
	width: auto;
	max-width: 110px;
	height: auto;
}

/* 12.3 OFFERTE ----------------------------------------------------------
   Source button measures roughly 99 x 33 with about 11px uppercase type and
   wide tracking. The previous 13px type with 15/34 padding was half again
   too large.
   ---------------------------------------------------------------------- */

.site-header__cta {
	margin-inline-start: auto;
	margin-block: 0;
}

.site-header__cta .wp-block-button {
	margin: 0;
}

.site-header__cta .wp-block-button__link,
.site-header__cta .wp-block-button.is-style-solid-light .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	padding: 11px 22px;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transition:
		background-color var(--wp--custom--transition-fast) ease,
		color var(--wp--custom--transition-fast) ease;
}

.site-header__cta .wp-block-button__link:hover,
.site-header__cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

@media screen and (max-width: 479px) {
	.site-header__cta .wp-block-button__link,
	.site-header__cta .wp-block-button.is-style-solid-light .wp-block-button__link {
		padding: 10px 16px;
		letter-spacing: 0.1em;
	}
}

/* =========================================================================
   13. Header: final alignment and CTA
   =========================================================================
   Supersedes sections 2, 8.6 and 12.
   ---------------------------------------------------------------------- */

/* 13.1 Alignment --------------------------------------------------------
   WordPress emits a .wp-container-core-group-is-layout-* class carrying
   justify-content, printed inline in <head> and therefore after this file.
   At equal specificity it wins, so these selectors are deliberately more
   specific rather than using !important.
   ---------------------------------------------------------------------- */

header.site-header.wp-block-group {
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	position: relative;
}

header.site-header.wp-block-group > .site-nav,
header.site-header.wp-block-group > nav.site-nav {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	flex: 0 0 0;
	overflow: visible;
}

header.site-header.wp-block-group > .site-header__brand {
	margin-inline: 0 auto;
	padding-inline-start: clamp(1.5rem, 4.8vw, 5rem);
	flex: 0 0 auto;
}

header.site-header.wp-block-group > .site-header__cta {
	margin-inline-start: auto;
	margin-block: 0;
	flex: 0 0 auto;
}

/* 13.2 OFFERTE ----------------------------------------------------------
   Corrected: the source button is the bronze-outline treatment, not a solid
   white fill. Transparent interior, 1px bronze border, white uppercase
   label, square corners, filling bronze on hover.

   Measured at roughly 120 x 34 with 12px type.
   ---------------------------------------------------------------------- */

.site-header__cta .wp-block-button__link,
.site-header__cta .wp-block-button.is-style-solid-light .wp-block-button__link,
.site-header__cta .wp-block-button.is-style-outline .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	padding: 11px 30px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	transition:
		background-color var(--wp--custom--transition-slow) ease,
		border-color var(--wp--custom--transition-slow) ease,
		color var(--wp--custom--transition-slow) ease;
}

.site-header__cta .wp-block-button__link:hover,
.site-header__cta .wp-block-button__link:focus,
.site-header__cta .wp-block-button.is-style-solid-light .wp-block-button__link:hover,
.site-header__cta .wp-block-button.is-style-solid-light .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

@media screen and (max-width: 479px) {
	.site-header__cta .wp-block-button__link,
	.site-header__cta .wp-block-button.is-style-solid-light .wp-block-button__link {
		padding: 10px 18px;
		letter-spacing: 0.08em;
	}
}

/* =========================================================================
   14. Split grid: measured from the 1:1 reference
   =========================================================================
   Supersedes sections 4, 8.1, 8.2 and 8.3.

   Reference measurements at 1216px cell width:
     row height      515px   = 0.423 of cell width
     text inset L    105px   = 8.6%
     text measure    895px   = 73.6%
     hero h1         50 / 60  Montserrat 600
     section h2      40 / 50  Montserrat 700
     paragraph       16 / 25  Montserrat 400
     eyebrow         15px     Rajdhani 500, wide tracking

   Cross-checked against a 894px-cell screenshot: 368px row, 660px measure.
   Both land on the same ratios, so the source uses percentage padding and a
   proportional row height rather than fixed pixels.
   ---------------------------------------------------------------------- */

/* 14.1 Row height -------------------------------------------------------
   Derived from viewport rather than clamped, so it tracks at any width.
   Cell width is (100vw - rail) / 2, and the row is 0.423 of that.
   ---------------------------------------------------------------------- */

.split-grid {
	--split-cell-width: calc((100vw - var(--wp--custom--rail-width)) / 2);
	--split-row-height: calc(var(--split-cell-width) * 0.423);
	grid-auto-rows: minmax(var(--split-row-height), auto);
	align-items: stretch;
}

.split-grid > .split-grid__media {
	display: block;
	height: 100%;
	min-height: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.split-grid > .split-grid__media > img {
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 14.2 Text cell --------------------------------------------------------
   Percentage padding reproduces both the inset and the measure at any
   width, which a fixed max-width cannot.
   ---------------------------------------------------------------------- */

.split-grid__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 0;
	padding-inline: 8.6% 17.8%;
	background-color: var(--wp--preset--color--base);
	gap: 0;
}

.split-grid__text > * {
	max-width: none;
	margin-block: 0;
}

/* 14.3 Type -------------------------------------------------------------
   Fixed sizes, not fluid. "Identical to the original" and clamp() are
   incompatible goals, so the desktop values are exact and the smaller
   breakpoints step down explicitly.
   ---------------------------------------------------------------------- */

.split-grid__text .is-style-eyebrow,
.split-grid__text p.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 2px;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 6px;
}

.split-grid__text h1,
.split-grid__text .wp-block-heading.has-hero-font-size {
	font-family: var(--wp--preset--font-family--body);
	font-size: 50px;
	line-height: 60px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.split-grid__text h2,
.split-grid__text .wp-block-heading.has-heading-2-font-size {
	font-family: var(--wp--preset--font-family--body);
	font-size: 40px;
	line-height: 50px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 10px;
}

.split-grid__text p:not(.is-style-eyebrow) {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25px;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 10px;
}

.split-grid__text p:not(.is-style-eyebrow) strong {
	font-weight: 700;
}

/* 14.4 Buttons ----------------------------------------------------------
   Reference: 138 x 41, 13px uppercase, 1px bronze border, square.
   ---------------------------------------------------------------------- */

.split-grid__text .wp-block-buttons {
	margin-top: 22px;
	margin-bottom: 0;
}

.split-grid__text .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	padding: 14px 28px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	transition:
		background-color var(--wp--custom--transition-slow) ease,
		color var(--wp--custom--transition-slow) ease;
}

.split-grid__text .wp-block-button__link:hover,
.split-grid__text .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

/* 14.5 Breakpoints ------------------------------------------------------ */

@media screen and (max-width: 1280px) {
	.split-grid__text h1,
	.split-grid__text .wp-block-heading.has-hero-font-size {
		font-size: 40px;
		line-height: 48px;
	}

	.split-grid__text h2,
	.split-grid__text .wp-block-heading.has-heading-2-font-size {
		font-size: 32px;
		line-height: 40px;
	}
}

@media screen and (max-width: 991px) {
	/* Single column: the proportional row height no longer applies, since
	   cells are now full width. */
	.split-grid {
		grid-template-columns: 1fr;
		--split-row-height: auto;
		grid-auto-rows: auto;
	}

	.split-grid > .split-grid__media {
		height: auto;
	}

	.split-grid > .split-grid__media > img {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.split-grid__text {
		padding-block: 48px;
		padding-inline: 6%;
	}

	.split-grid__text h1,
	.split-grid__text .wp-block-heading.has-hero-font-size {
		font-size: 34px;
		line-height: 42px;
	}

	.split-grid__text h2,
	.split-grid__text .wp-block-heading.has-heading-2-font-size {
		font-size: 28px;
		line-height: 36px;
	}
}

@media screen and (max-width: 479px) {
	.split-grid__text {
		padding-inline: 7%;
	}

	.split-grid__text h1,
	.split-grid__text .wp-block-heading.has-hero-font-size {
		font-size: 28px;
		line-height: 36px;
	}

	.split-grid__text .wp-block-button__link {
		padding: 12px 20px;
		font-size: 12px;
	}
}

/* =========================================================================
   15. Media cells behave like background images
   =========================================================================
   Supersedes 14.1.

   The source uses a div with background-image:cover, not an <img>. A
   background contributes nothing to layout, so the element's height is set
   purely by its own box. Our <img> is a replaced element and does take part
   in sizing, which is why it kept forcing the grid row taller.

   Absolutely positioning the image removes it from flow entirely, giving the
   same behaviour as the original: the cell decides its height, the photo
   just fills it.
   ---------------------------------------------------------------------- */

.split-grid {
	/* Fallback on the rail width matters: if the custom property is missing
	   the whole calc() becomes invalid, --split-row-height is dropped, and
	   grid-auto-rows silently reverts to auto. */
	--split-cell-width: calc((100vw - var(--wp--custom--rail-width, 80px)) / 2);
	--split-row-height: calc(var(--split-cell-width) * 0.423);
	grid-auto-rows: minmax(var(--split-row-height, 21vw), auto);
	align-items: stretch;
}

.split-grid > .split-grid__media {
	position: relative;
	display: block;
	height: auto;
	min-height: var(--split-row-height, 21vw);
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
}

.split-grid > .split-grid__media > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	min-height: 0;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0;
}

/* Any caption the editor adds would also be absolutely overlapped, so keep
   it out of these cells. */
.split-grid > .split-grid__media figcaption {
	display: none;
}

@media screen and (max-width: 991px) {
	.split-grid {
		--split-row-height: auto;
		grid-auto-rows: auto;
	}

	.split-grid > .split-grid__media {
		position: relative;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.split-grid > .split-grid__media > img {
		position: absolute;
		inset: 0;
		height: 100%;
	}
}

/* =========================================================================
   16. Footer typography
   =========================================================================
   Supersedes 8.7.

   Source: headings 18px semibold bronze, body and links 16px, 25px leading,
   about 38px between nav items.

   Sizes are set explicitly on every text element rather than relying on
   inheritance, since theme.json's h3 element style and the block font-size
   classes were competing here.
   ---------------------------------------------------------------------- */

.site-footer {
	font-family: var(--wp--preset--font-family--body);
}

/* 16.1 Column headings -------------------------------------------------- */

.site-footer .site-footer__heading,
.site-footer h3.site-footer__heading,
.site-footer h3.wp-block-heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: 18px;
	line-height: 30px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
	margin: 0 0 30px;
}

/* 16.2 Body copy -------------------------------------------------------- */

.site-footer p,
.site-footer .wp-block-paragraph {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25px;
	font-weight: 300;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 10px;
}

.site-footer p a {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer p a:hover {
	color: var(--wp--preset--color--primary);
}

/* 16.3 Page links ------------------------------------------------------- */

.site-footer .site-footer__nav .wp-block-navigation__container {
	gap: 13px;
}

.site-footer .site-footer__nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25px;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: color var(--wp--custom--transition-fast) ease;
}

.site-footer .site-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
}

/* 16.4 Review widget ---------------------------------------------------
   Third-party iframe, fixed at 135 x 173 by the provider.
   ---------------------------------------------------------------------- */

.site-footer__badge {
	margin-top: 30px;
}

.site-footer__badge iframe {
	display: block;
	width: 135px;
	height: 173px;
	border: 0;
	overflow: hidden;
	color-scheme: light;
}

/* 16.5 Copyright bar ---------------------------------------------------- */

.site-footer__rule {
	margin-top: 60px;
	margin-bottom: 0;
	border: 0;
	height: 1px;
	background-color: var(--wp--preset--color--primary);
	opacity: 0.55;
}

.site-footer .has-xx-small-font-size {
	font-size: 12px;
	line-height: 26px;
	font-weight: 400;
	letter-spacing: 0.02em;
	padding-block: 18px;
	margin: 0;
}

@media screen and (max-width: 767px) {
	.site-footer .site-footer__heading,
	.site-footer h3.site-footer__heading {
		white-space: normal;
		margin-bottom: 18px;
	}
}

/* =========================================================================
   17. Rail social link
   =========================================================================
   Source: roughly a 30px square, 1px light border, transparent interior,
   small muted glyph. Core's social-link default is a filled brand-colour
   rounded chip, so most of this is undoing that.
   ---------------------------------------------------------------------- */

.left-rail__social {
	gap: 8px;
	margin: 0;
	padding: 0;
}

.left-rail__social .wp-block-social-link,
.left-rail__social .wp-social-link {
	width: 30px;
	height: 30px;
	min-width: 0;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	opacity: 1;
	transition:
		border-color var(--wp--custom--transition-fast) ease,
		background-color var(--wp--custom--transition-fast) ease;
}

.left-rail__social .wp-block-social-link-anchor,
.left-rail__social .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
	color: rgba(255, 255, 255, 0.55);
	background: none;
	transition: color var(--wp--custom--transition-fast) ease;
}

.left-rail__social .wp-block-social-link svg,
.left-rail__social .wp-social-link svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	display: block;
}

/* Hover: pick up the brand bronze rather than lighten. */
.left-rail__social .wp-block-social-link:hover,
.left-rail__social .wp-social-link:hover,
.left-rail__social .wp-block-social-link:focus-within {
	border-color: var(--wp--preset--color--primary);
	background-color: transparent;
}

.left-rail__social .wp-block-social-link:hover .wp-block-social-link-anchor,
.left-rail__social .wp-social-link:hover a,
.left-rail__social .wp-block-social-link:focus-within .wp-block-social-link-anchor {
	color: var(--wp--preset--color--primary);
}

/* Core's own hover behaviour is an opacity fade; suppress it. */
.left-rail__social .wp-block-social-link:hover,
.left-rail__social .wp-social-link:hover {
	opacity: 1;
	transform: none;
}

/* =========================================================================
   18. Diensten overview
   =========================================================================
   Measured from the reference at 0.82 scale, so real values are:
     container      1200px
     columns        3, 24px gap
     card           384 x 343  (aspect 1.12)
     badge          12px uppercase on bronze, 27px in from top left
     card title     22 / 26  Montserrat 700, white
     LEES MEER      white fill, dark label, 13px, bottom left at 20/30
     page title     38 / 48  bronze uppercase, centred
     lead paragraph 16 / 25, max 583px, centred
   ---------------------------------------------------------------------- */

/* 18.1 Intro ------------------------------------------------------------ */

.diensten-intro__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 38px;
	line-height: 48px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 14px;
}

.diensten-intro__lead {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25px;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	max-width: 583px;
	margin-inline: auto;
}

.diensten-intro__lead strong {
	font-weight: 700;
}

/* 18.2 Grid ------------------------------------------------------------- */

.diensten-grid__list.is-layout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 18.3 Card ------------------------------------------------------------
   Cover with useFeaturedImage. aspect-ratio replaces min-height so the
   cards stay proportional at any column width.
   ---------------------------------------------------------------------- */

.dienst-card.wp-block-cover {
	position: relative;
	aspect-ratio: 384 / 343;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 0;
}

.dienst-card.wp-block-cover .wp-block-cover__image-background {
	object-fit: cover;
}

/* Content sits top-left, not centred as Cover defaults to. */
.dienst-card.wp-block-cover > .wp-block-cover__inner-container {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	padding: 27px 30px 20px;
}

/* 18.4 Category badge -------------------------------------------------- */

.dienst-card__tag {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	line-height: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--primary);
	padding: 7px 10px 6px;
	margin: 0 0 10px;
}

.dienst-card__tag a {
	color: inherit;
	text-decoration: none;
}

.dienst-card__tag .wp-block-post-terms__separator {
	display: none;
}

/* 18.5 Title ----------------------------------------------------------- */

.dienst-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 22px;
	line-height: 26px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.75);
	width: 90%;
	margin: 0;
}

.dienst-card__title a {
	color: inherit;
	text-decoration: none;
}

.dienst-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

/* 18.6 Lees meer ------------------------------------------------------- */

.dienst-card__link {
	position: absolute;
	left: 30px;
	bottom: 20px;
	margin: 0;
}

.dienst-card__link a,
a.dienst-card__link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	padding: 12px 24px;
	transition:
		background-color var(--wp--custom--transition-fast) ease,
		color var(--wp--custom--transition-fast) ease,
		border-color var(--wp--custom--transition-fast) ease;
}

.dienst-card__link a:hover,
a.dienst-card__link:hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

/* Subtle lift on the whole card. */
.dienst-card.wp-block-cover .wp-block-cover__image-background {
	transition: transform 0.5s ease;
}

.dienst-card.wp-block-cover:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}

/* 18.7 Breakpoints ----------------------------------------------------- */

@media screen and (max-width: 991px) {
	.diensten-grid__list.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}

	.diensten-intro__title {
		font-size: 30px;
		line-height: 40px;
	}
}

@media screen and (max-width: 599px) {
	.diensten-grid__list.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dienst-card.wp-block-cover > .wp-block-cover__inner-container {
		padding: 22px 24px 18px;
	}

	.dienst-card__link {
		left: 24px;
		bottom: 18px;
	}
}

/* =========================================================================
   19. Page template width
   =========================================================================
   templates/page.html gives <main> a default (not constrained) layout with
   zero padding, so each pattern controls its own measure. Root padding is
   zeroed for the same reason it is on the front page: a 1200px constrained
   section should be 1200px, not 1200 minus root padding.

   Source: .container-full { max-width: 1200px; margin-inline: auto }
   ---------------------------------------------------------------------- */

.page-main {
	--wp--style--root-padding-left: 0;
	--wp--style--root-padding-right: 0;
}

/* Constrained sections inside page-main resolve to the source's 1200px. */
.page-main > .is-layout-constrained {
	max-width: none;
	width: 100%;
}

.page-main > .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1200px;
	margin-inline: auto;
}

/* Side gutters only bite below the container width, so they never shrink
   the 1200px measure on desktop. */
.diensten-intro,
.diensten-section {
	padding-inline: 24px;
}

@media screen and (min-width: 1249px) {
	.diensten-intro,
	.diensten-section {
		padding-inline: 0;
	}
}

/* =========================================================================
   20. Dienst detail page
   =========================================================================
   Measured against the fixed 135px review badge for scale:
     banner        300px tall, title white uppercase centred, ~38px
     content       1200px container, left aligned
     headings      ~34 / 40 bronze, sentence case
     body          16 / 25
     related card  371 x 272 image + ~98px white panel, 22px gap
     back button   bronze outline, centred
   ---------------------------------------------------------------------- */

/* 20.1 Banner ----------------------------------------------------------
   Matches .post-section { height: 300px } in the source.
   ---------------------------------------------------------------------- */

.dienst-banner.wp-block-cover {
	min-height: 300px;
	height: 300px;
	max-height: 500px;
	padding: 0;
	align-items: center;
	justify-content: center;
}

.dienst-banner.wp-block-cover .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center;
}

.dienst-banner__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 38px;
	line-height: 48px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.65);
	margin: 0;
	max-width: 900px;
}

/* 20.2 Content --------------------------------------------------------- */

.dienst-body {
	padding-inline: 24px;
}

@media screen and (min-width: 1249px) {
	.dienst-body {
		padding-inline: 0;
	}
}

.dienst-body .wp-block-post-content > * {
	max-width: none;
}

.dienst-body h2,
.dienst-body h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 34px;
	line-height: 40px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--primary);
	margin: 40px 0 12px;
}

.dienst-body h2:first-child,
.dienst-body h3:first-child,
.dienst-body > .wp-block-post-content > :first-child {
	margin-top: 0;
}

.dienst-body h4 {
	font-family: var(--wp--preset--font-family--body);
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 30px 0 10px;
}

.dienst-body p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25px;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 10px;
}

.dienst-body p strong,
.dienst-body li strong {
	font-weight: 700;
}

.dienst-body p a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dienst-body ul,
.dienst-body ol {
	margin: 0 0 10px;
	padding-left: 26px;
}

.dienst-body li {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25px;
	color: var(--wp--preset--color--contrast);
	margin-bottom: 2px;
}

.dienst-body li::marker {
	color: var(--wp--preset--color--contrast);
}

/* 20.3 Related grid ----------------------------------------------------
   A different card treatment from the overview: image on top, badge
   overlapping its lower edge, white caption panel beneath.
   ---------------------------------------------------------------------- */

.dienst-related {
	padding-inline: 24px;
}

@media screen and (min-width: 1249px) {
	.dienst-related {
		padding-inline: 0;
	}
}

.dienst-related__list.is-layout-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0 0 44px;
	padding: 0;
	list-style: none;
	max-width: 1160px;
	margin-inline: auto;
}

.related-card {
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--contrast);
	overflow: hidden;
}

/* Media, with the badge overlapping its bottom-left corner. */
.related-card__media {
	position: relative;
	margin: 0;
	line-height: 0;
}

.related-card__media .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 371 / 272;
	overflow: hidden;
}

.related-card__media .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.related-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.related-card__tag {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	line-height: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--primary);
	padding: 8px 14px 7px;
	margin: 0;
}

.related-card__tag a {
	color: inherit;
	text-decoration: none;
}

.related-card__tag .wp-block-post-terms__separator {
	display: none;
}

/* White caption panel, with the bronze rule beneath the title. */
.related-card__body {
	background-color: var(--wp--preset--color--contrast);
	padding: 22px 26px 26px;
}

.related-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--preset--color--primary);
}

.related-card__title a {
	color: inherit;
	text-decoration: none;
}

.related-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

/* 20.4 Back button ----------------------------------------------------- */

.dienst-related__back {
	margin: 0;
}

.dienst-related__back .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 30px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	transition:
		background-color var(--wp--custom--transition-slow) ease,
		color var(--wp--custom--transition-slow) ease;
}

.dienst-related__back .wp-block-button__link:hover,
.dienst-related__back .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

/* 20.5 Breakpoints ----------------------------------------------------- */

@media screen and (max-width: 991px) {
	.dienst-banner.wp-block-cover {
		min-height: 240px;
		height: 240px;
	}

	.dienst-banner__title {
		font-size: 28px;
		line-height: 36px;
	}

	.dienst-body h2,
	.dienst-body h3 {
		font-size: 26px;
		line-height: 34px;
		margin-top: 32px;
	}

	.dienst-related__list.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 599px) {
	.dienst-banner__title {
		font-size: 24px;
		line-height: 32px;
	}

	.dienst-related__list.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
   21. Over ons
   =========================================================================
   Banner matches .banner.homepages-4.about-us.first in the source:
   linear-gradient(#c88b3cd9, #c88b3cd9) over the photo, i.e. bronze at 85%.
   Content shares the 1200px page measure, left aligned.
   ---------------------------------------------------------------------- */

/* 21.1 Banner ---------------------------------------------------------- */

.about-banner.wp-block-cover {
	min-height: 500px;
	padding-block: 0;
	padding-inline: 24px;
	align-items: center;
	justify-content: flex-start;
}

.about-banner.wp-block-cover > .wp-block-cover__inner-container {
	text-align: left;
}

.about-banner__eyebrow {
	color: var(--wp--preset--color--contrast) !important;
	opacity: 0.9;
	margin-bottom: 6px;
}

.about-banner__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 44px;
	line-height: 54px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 12px;
}

.about-banner__lead {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25px;
	color: var(--wp--preset--color--contrast);
	max-width: 580px;
	margin: 0;
}

.about-banner__lead strong {
	font-weight: 700;
}

/* 21.2 Section headings ----------------------------------------------- */

.about-craft__title,
.about-coffee__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 40px;
	line-height: 50px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 14px;
}

.about-craft p,
.about-coffee p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25px;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 16px;
}

.about-craft p strong,
.about-coffee p strong {
	font-weight: 700;
}

.about-craft,
.about-coffee,
.about-process {
	padding-inline: 24px;
}

@media screen and (min-width: 1249px) {
	.about-craft,
	.about-coffee,
	.about-process {
		padding-inline: 0;
	}
}

.about-craft__cta,
.about-coffee__cta {
	margin-top: 22px;
}

.about-craft__cta .wp-block-button__link,
.about-coffee__cta .wp-block-button__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 28px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	transition:
		background-color var(--wp--custom--transition-slow) ease,
		color var(--wp--custom--transition-slow) ease;
}

.about-craft__cta .wp-block-button__link:hover,
.about-coffee__cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

/* 21.3 Stats panel ----------------------------------------------------
   Bronze frame, light inner panel, 2 x 2 grid with hairline dividers.
   Source: .number-fact 55/66 on #000, .facts-text 16/26 uppercase 500.
   ---------------------------------------------------------------------- */

.stats-frame {
	background-color: var(--wp--preset--color--primary);
	padding: 10px;
}

.stats-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: #f8f8f8;
}

.stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 34px 20px;
	border-right: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Only interior dividers, not an outer ring. */
.stat:nth-child(2n) {
	border-right: 0;
}

.stat:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.stat__number {
	font-family: var(--wp--preset--font-family--body);
	font-size: 44px;
	line-height: 54px;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	margin: 0;
}

.stat__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	margin: 0;
}

/* 21.4 Koffie block --------------------------------------------------- */

.about-coffee__media {
	margin: 0;
}

.about-coffee__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 431 / 403;
	object-fit: cover;
}

/* 21.5 Process row ----------------------------------------------------
   Four steps, oversized bronze numeral behind a white label, hairline
   dividers between and a rule beneath each.
   ---------------------------------------------------------------------- */

.process-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.process-step {
	position: relative;
	padding: 0 24px 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.process-step + .process-step {
	padding-left: 24px;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.process-step__number {
	font-family: var(--wp--preset--font-family--body);
	font-size: 46px;
	line-height: 46px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

/* The label overlaps the numeral's lower half, as in the reference. */
.process-step__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	margin: -26px 0 0;
	position: relative;
	z-index: 2;
}

/* 21.6 Breakpoints ---------------------------------------------------- */

@media screen and (max-width: 991px) {
	.about-banner.wp-block-cover {
		min-height: 400px;
	}

	.about-banner__title {
		font-size: 32px;
		line-height: 42px;
	}

	.about-craft__title,
	.about-coffee__title {
		font-size: 30px;
		line-height: 40px;
	}

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

	.process-step:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.process-step {
		padding-top: 18px;
	}
}

@media screen and (max-width: 599px) {
	.stats-panel {
		grid-template-columns: 1fr;
	}

	.stat {
		border-right: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.stat:last-child {
		border-bottom: 0;
	}

	.process-row {
		grid-template-columns: 1fr;
	}

	.process-step {
		padding-left: 0;
		border-left: 0;
	}

	.about-banner__title {
		font-size: 28px;
		line-height: 36px;
	}
}

/* =========================================================================
   22. Koffie background video
   =========================================================================
   Supersedes the .about-coffee__media image rules in 21.4.

   The source uses a Webflow background video: muted, looping, object-fit
   cover, with a poster frame. Aspect ratio matches the still it replaces.
   ---------------------------------------------------------------------- */

.about-coffee__media {
	position: relative;
	margin: 0;
	aspect-ratio: 431 / 403;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface);
}

.about-coffee__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	/* The poster covers the frame while the video buffers, so there is no
	   flash of empty box on first paint. */
	background-size: cover;
	background-position: center;
}

@media screen and (max-width: 991px) {
	.about-coffee__media {
		aspect-ratio: 16 / 10;
	}
}

/* =========================================================================
   23. Over ons banner corrections
   =========================================================================
   Supersedes 21.1.

   Two fixes:
   1. Constrained layout gives every child margin-inline:auto, so a child with
      a max-width gets centred rather than left aligned. The lead paragraph
      was indented relative to the title for that reason.
   2. Title to the source's 50px; lead explicitly 16 / 25.
   ---------------------------------------------------------------------- */

.about-banner.wp-block-cover > .wp-block-cover__inner-container > * {
	margin-inline: 0;
}

.about-banner__eyebrow,
.about-banner .is-style-eyebrow {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 15px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	opacity: 0.95;
	margin: 0 0 8px;
}

.about-banner .about-banner__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 50px;
	line-height: 60px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 14px;
	max-width: none;
}

.about-banner .about-banner__lead {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25px;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	max-width: 580px;
	margin: 0;
}

.about-banner .about-banner__lead strong {
	font-weight: 700;
}

@media screen and (max-width: 991px) {
	.about-banner .about-banner__title {
		font-size: 36px;
		line-height: 46px;
	}
}

@media screen and (max-width: 599px) {
	.about-banner .about-banner__title {
		font-size: 28px;
		line-height: 36px;
	}
}

/* =========================================================================
   24. Over ons banner: correct alignment approach
   =========================================================================
   Supersedes 21.1 and 23.

   Constrained layout does not create a container box. It gives each child
   max-width and margin-inline:auto independently, so margin-inline:0 aligns a
   child to the full-width edge, not to a shared left edge. That is why the
   blanket reset in 23 threw the title out to the viewport margin.

   The fix: every child keeps the same 1200px measure as the sections below,
   so the banner text aligns with the page content. The lead's shorter line
   length comes from padding rather than a narrower box.
   ---------------------------------------------------------------------- */

.about-banner.wp-block-cover > .wp-block-cover__inner-container > * {
	max-width: 1200px;
	margin-inline: auto;
	box-sizing: border-box;
}

.about-banner .about-banner__eyebrow,
.about-banner .is-style-eyebrow {
	font-family: var(--wp--preset--font-family--accent);
	font-size: 15px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	opacity: 0.95;
	margin-block: 0 8px;
	padding-right: 0;
}

.about-banner .about-banner__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 50px;
	line-height: 60px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin-block: 0 14px;
	padding-right: 0;
}

/* Same 1200px box as the title, so the left edges align. The shorter line
   length comes from padding on the right, not a smaller max-width. */
.about-banner .about-banner__lead {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 25px;
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
	margin-block: 0;
	padding-right: min(620px, 48%);
}

.about-banner .about-banner__lead strong {
	font-weight: 700;
}

@media screen and (max-width: 991px) {
	.about-banner .about-banner__title {
		font-size: 36px;
		line-height: 46px;
	}

	.about-banner .about-banner__lead {
		padding-right: 0;
		max-width: 580px;
	}
}

@media screen and (max-width: 599px) {
	.about-banner .about-banner__title {
		font-size: 28px;
		line-height: 36px;
	}
}

/* =========================================================================
   25. Stats panel corrections
   =========================================================================
   Supersedes 21.3.

   The generic ".about-craft p" rule in 21.2 (specificity 0,2,0) was beating
   ".stat__number" (0,1,0), so the figures inherited 16px white body copy on a
   near-white panel. These selectors are scoped to match, and the sizes now
   follow the source: .number-fact 55/66, .facts-text 16/26, both on #000.
   ---------------------------------------------------------------------- */

.about-craft .stats-frame {
	background-color: var(--wp--preset--color--primary);
	padding: 12px;
}

.about-craft .stats-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: #f9f9fb;
}

.about-craft .stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 46px 20px;
	border-right: 1px solid rgba(0, 0, 0, 0.09);
	border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.about-craft .stat:nth-child(2n) {
	border-right: 0;
}

.about-craft .stat:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.about-craft .stat p.stat__number,
.about-craft .stat .stat__number {
	font-family: var(--wp--preset--font-family--body);
	font-size: 55px;
	line-height: 66px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--base);
	margin: 0;
	max-width: none;
}

.about-craft .stat p.stat__label,
.about-craft .stat .stat__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	margin: 0;
	max-width: none;
}

@media screen and (max-width: 1199px) {
	.about-craft .stat p.stat__number,
	.about-craft .stat .stat__number {
		font-size: 42px;
		line-height: 52px;
	}

	.about-craft .stat {
		padding: 34px 16px;
	}
}

@media screen and (max-width: 599px) {
	.about-craft .stats-panel {
		grid-template-columns: 1fr;
	}

	.about-craft .stat {
		border-right: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.09);
	}

	.about-craft .stat:last-child {
		border-bottom: 0;
	}
}

/* =========================================================================
   26. Stats panel: forced
   =========================================================================
   Supersedes 21.3 and 25.

   This uses !important deliberately, and that is a stopgap rather than a
   solution. The real problem is that section 21.2 styles every <p> inside
   .about-craft, which means any component living in that section has to keep
   escalating specificity to escape it. Body copy of that kind belongs in
   theme.json, at low specificity, where components can override it cleanly.

   Source values: .number-fact 55/66 on #000, .facts-text 16/26 uppercase 500.
   ---------------------------------------------------------------------- */

.about-craft .stats-panel .stat .stat__number,
.about-craft .stats-panel .stat p.stat__number {
	font-size: 55px !important;
	line-height: 66px !important;
	font-weight: 700 !important;
	color: #111111 !important;
	letter-spacing: -0.01em !important;
	margin: 0 !important;
	max-width: none !important;
	text-transform: none !important;
}

.about-craft .stats-panel .stat .stat__label,
.about-craft .stats-panel .stat p.stat__label {
	font-size: 16px !important;
	line-height: 26px !important;
	font-weight: 500 !important;
	color: #111111 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	max-width: none !important;
}

/* Belt and braces: nothing inside the panel should inherit white. */
.about-craft .stats-panel,
.about-craft .stats-panel * {
	color: #111111;
}

@media screen and (max-width: 1199px) {
	.about-craft .stats-panel .stat .stat__number,
	.about-craft .stats-panel .stat p.stat__number {
		font-size: 42px !important;
		line-height: 52px !important;
	}
}

@media screen and (max-width: 599px) {
	.about-craft .stats-panel .stat .stat__number,
	.about-craft .stats-panel .stat p.stat__number {
		font-size: 38px !important;
		line-height: 46px !important;
	}
}

/* =========================================================================
   27. Process row corrections
   =========================================================================
   Supersedes 21.5.

   Measured against the reference crop at the same 1456px width:
     numeral digit height  80px  -> ~112px font size (Montserrat digits sit
                                    at roughly 0.70em)
     label cap height      20px  -> ~28px
     label position        vertically centred ON the numeral, left aligned
     dividers              vertical only, taller than the content
     bottom rule           none

   Numeral and label share one grid cell so the label centres on the numeral
   without magic offsets. The numeral sets the row height; the label is free
   to overflow to the right.
   ---------------------------------------------------------------------- */

.about-process .process-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	align-items: stretch;
}

.about-process .process-step {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: start;
	padding: 4px 20px 34px 0;
	border-bottom: 0;
	border-left: 0;
	overflow: visible;
}

/* Vertical hairline between steps. Padding is inside the border box, so the
   rule runs taller than the text, as in the reference. */
.about-process .process-step + .process-step {
	padding-left: 22px;
	border-left: 1px solid rgba(255, 255, 255, 0.45);
}

/* Both children occupy the same cell. */
.about-process .process-step__number,
.about-process .process-step__title {
	grid-area: 1 / 1;
	justify-self: start;
	align-self: center;
	margin: 0;
	max-width: none;
}

.about-process .process-step p.process-step__number {
	font-family: var(--wp--preset--font-family--body);
	font-size: 112px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
	z-index: 1;
}

.about-process .process-step .process-step__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast);
	white-space: nowrap;
	z-index: 2;
	position: relative;
}

/* 27.1 Breakpoints ---------------------------------------------------- */

@media screen and (max-width: 1199px) {
	.about-process .process-step p.process-step__number {
		font-size: 88px;
	}

	.about-process .process-step .process-step__title {
		font-size: 22px;
	}
}

@media screen and (max-width: 991px) {
	.about-process .process-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 20px;
	}

	.about-process .process-step:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.about-process .process-step p.process-step__number {
		font-size: 80px;
	}
}

@media screen and (max-width: 599px) {
	.about-process .process-row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 10px;
	}

	.about-process .process-step,
	.about-process .process-step + .process-step {
		padding-left: 0;
		padding-bottom: 12px;
		border-left: 0;
	}

	.about-process .process-step p.process-step__number {
		font-size: 72px;
	}

	.about-process .process-step .process-step__title {
		font-size: 20px;
	}
}

/* =========================================================================
   28. Footer measure
   =========================================================================
   The footer was inheriting theme.json's 940px contentSize while every page
   section uses 1200px, so their edges did not line up.

   WordPress emits its layout rule as ".wp-container-x > :where(...)" at
   specificity 0,1,0. Matching it with 0,2,0 here rather than reaching for
   !important.
   ---------------------------------------------------------------------- */

.site-footer.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1200px;
	margin-inline: auto;
}

.site-footer .site-footer__columns {
	max-width: 1200px;
	margin-inline: auto;
}

/* Keep the intro paragraph's line length close to the reference rather than
   letting it run the full width of the wider column. */
.site-footer .site-footer__columns > .wp-block-column:first-child p {
	max-width: 340px;
}

@media screen and (max-width: 781px) {
	.site-footer .site-footer__columns > .wp-block-column:first-child p {
		max-width: none;
	}
}