/**
 * Cursora — front + editor extras beyond theme.json.
 */

:root {
	--rw-radius-sm: 8px;
	--rw-radius-md: 12px;
	--rw-radius-lg: 20px;
	--rw-radius-pill: 999px;
}

/* In-page anchors (#diensten, #contact, #waarom, #over-ons) glide instead of
   jumping. Gated on prefers-reduced-motion so a long scroll can't trigger
   motion sickness, and offset by the admin bar, which is fixed for logged-in
   users and would otherwise cover the top of the target section. */
html {
	scroll-padding-top: var(--wp-admin--admin-bar--height, 0px);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Kill the 24px WP block gap under header/footer, and hairlines between colour bands. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.rw-section + .rw-section {
	margin-top: -1px;
}

/* Buttons */
.wp-block-button__link {
	border-radius: var(--rw-radius-sm);
	line-height: 1.25;
	font-size: 16px;
}

/* Hover/focus on the solid red buttons — outline buttons are excluded, core
   gives those a transparent fill. `button.wp-element-button` is the CF7 submit,
   which is a <button> rather than a block <a> and so misses the first selector.

   !important is unavoidable: two patterns set the background explicitly, and
   core emits that preset as `.has-primary-background-color { … !important }`,
   which no ordinary declaration can outrank. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.is-style-outline),
button.wp-element-button {
	transition: background-color 0.15s ease;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.is-style-outline):hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.is-style-outline):focus-visible,
button.wp-element-button:hover,
button.wp-element-button:focus-visible {
	background-color: var(--wp--preset--color--primary-dark, #b90c23) !important;
}

/* Section helpers used by Design patterns */
.rw-section {
	width: 100%;
}

.rw-section--padded {
	padding-top: var(--wp--preset--spacing--section, 50px);
	padding-bottom: var(--wp--preset--spacing--section, 50px);
}

.rw-section--grey {
	background-color: var(--wp--preset--color--shd-light, #f1f5f7);
}

.rw-section--dark {
	background-color: var(--wp--preset--color--shd-dark, #222);
	color: var(--wp--preset--color--white, #fff);
}

.rw-section--dark a {
	color: inherit;
}

/* Core emits `.has-text-color { color: … !important }` after `.has-white-color`
   at equal specificity, so preset white loses on dark sections. */
.rw-section--dark h1,
.rw-section--dark h2,
.rw-section--dark h3 {
	color: var(--wp--preset--color--white, #fff) !important;
}

/* USP / static tiles */
.rw-tile {
	border: 1px solid var(--wp--preset--color--border, #e3e8ef);
	border-radius: var(--rw-radius-md);
	padding: var(--wp--preset--spacing--lg, 1.5rem);
	height: 100%;
}

.rw-tile__label {
	display: block;
	font-size: var(--wp--preset--font-size--sm, 14px);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--shd-mid, #646464);
	margin-bottom: 0.5rem;
}

/* Cards (Query Loop post template) */
.rw-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border: 1px solid var(--wp--preset--color--border, #e3e8ef);
	border-radius: var(--rw-radius-md);
	overflow: hidden;
	height: 100%;
	background: var(--wp--preset--color--white, #fff);
}

.rw-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--md, 1rem);
	flex: 1;
}

.rw-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.rw-card--review {
	padding: var(--wp--preset--spacing--lg, 1.5rem);
}

.rw-card--faq {
	padding: var(--wp--preset--spacing--lg, 1.5rem);
}

/* Company info */
.rw-company-info__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.rw-company-info--tiles .rw-company-info__list {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.rw-company-info__label {
	display: block;
	font-size: var(--wp--preset--font-size--sm, 14px);
	font-weight: 600;
	color: var(--wp--preset--color--shd-mid, #646464);
	margin-bottom: 0.25rem;
}

.rw-company-info__item {
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--wp--preset--color--border, #e3e8ef);
}

.rw-company-info--panel {
	border: 1px solid var(--wp--preset--color--border, #e3e8ef);
	border-radius: var(--rw-radius-md);
	padding: var(--wp--preset--spacing--lg, 1.5rem);
	background: var(--wp--preset--color--shd-light, #fafafa);
}

.rw-company-info--empty {
	opacity: 0.7;
	font-style: italic;
}

.rw-company-info__call {
	margin-top: 1.25rem;
	margin-bottom: 0;
}

.rw-company-info--footer {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rw-company-info--footer .rw-company-info__row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.rw-company-info--footer .rw-company-info__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 3px;
	opacity: 0.85;
}

.rw-company-info--footer .rw-company-info__value {
	font-size: 15px;
	line-height: 25px;
	color: var(--wp--preset--color--text-inverse-muted, #a8bec8);
}

.rw-company-info--footer .rw-company-info__value a {
	color: inherit;
	text-decoration: none;
}

.rw-company-info--footer .rw-company-info__value a:hover {
	color: var(--wp--preset--color--white, #fff);
}

/* Quote banner */
.rw-quote {
	text-align: center;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

.rw-quote blockquote {
	font-size: var(--wp--preset--font-size--h-3, 24px);
	font-weight: 600;
	margin: 0;
}

/* ==========================================================================
   Finadon homepage — Topbar, Nav, Hero, Diensten, Over ons, USPs, Contact
   ========================================================================== */

/* Secondary (outline) button — Knop/Secundair.

   Core ships `padding: .667em 1.333em` for is-style-outline, which overrides the
   15px/26px from theme.json and leaves this button ~5px shorter than a solid one
   sitting next to it. Subtracting the 2px border from the theme padding makes the
   two buttons render at identical outer height and matching text insets. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--border-strong, #a8bec8);
	padding: calc(15px - 2px) calc(26px - 2px);
	color: var(--wp--preset--color--text, #051929);
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
}

/* Eyebrow label — Label/Sectie */
.rw-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta, 14px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #e00e2c);
	margin: 0;
}

.rw-eyebrow img {
	width: 14px;
	height: 14px;
	display: block;
}

.rw-eyebrow--on-dark {
	color: var(--wp--preset--color--accent-on-dark, #ff5c72);
}

/* Left-aligned section heading block.
   Aligns to the LEFT EDGE OF THE CENTRED CONTENT BOX, not the section padding
   edge — otherwise on viewports wider than contentSize the heading drifts left
   while the sibling columns stay centred. Needs !important to beat core's
   constrained-layout `margin: auto !important`. */
.rw-section__head {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important;
	margin-right: auto !important;
}

.rw-section__head--660 {
	max-width: 660px;
}

.rw-section__head--720 {
	max-width: 720px;
}

/* Plus-bullet row — pluspunten / opsomming */
.rw-plus-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rw-plus-list--row {
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
	width: 100%;
	gap: 0;
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 600;
	font-size: 15px;
	line-height: 20px;
	color: var(--wp--preset--color--text, #051929);
}

/* Hero CTAs sit on one row — Figma has them side by side */
.rw-hero .wp-block-buttons {
	flex-wrap: nowrap;
	margin-bottom: 0;
}

.rw-hero .wp-block-button__link {
	white-space: nowrap;
}

/* Figma scheiding is 1px #e3ebef across the 565 text column, 34px below the buttons.
   Core separator is a 150px darkened rule with 0.4 opacity — override it here. */
.rw-hero .wp-block-separator {
	width: 100%;
	max-width: none;
	height: 0;
	margin: 34px 0 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border, #e3ebef);
	background: none;
	opacity: 1;
	color: var(--wp--preset--color--border, #e3ebef);
}

.rw-hero .rw-plus-list--row {
	margin-top: 34px;
}

.rw-plus-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}

.rw-plus-list img {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Photo frames — Figma crop via object-fit, radius clipped in CSS */
.rw-photo {
	position: relative;
	overflow: hidden;
	border-radius: var(--rw-radius-lg);
	width: 100%;
	background: var(--wp--preset--color--shd-light, #f1f5f7);
}

.rw-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Photo placeholder — used until real photography is supplied */
.rw-photo-placeholder {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: var(--rw-radius-lg);
	background: var(--wp--preset--gradient--photo-placeholder);
	width: 100%;
	height: 100%;
	min-height: 260px;
}

.rw-photo-placeholder__caption {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--meta, 14px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-inverse-muted, #a8bec8);
	text-align: center;
	line-height: 1.3;
	margin: 0;
	padding: 1rem;
}

/* Experience badge — hero */
.rw-badge-stat {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--wp--preset--color--white, #fff);
	border-radius: var(--rw-radius-md);
	padding: 20px 24px;
	box-shadow: 0 18px 40px rgba(5, 26, 41, 0.14);
}

.rw-badge-stat__num {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 800;
	font-size: 34px;
	line-height: 36px;
	letter-spacing: -0.68px;
	color: var(--wp--preset--color--text, #051929);
	margin: 0;
}

.rw-badge-stat__bar {
	width: 3px;
	height: 42px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent-graphic, #ff1837);
	flex-shrink: 0;
}

.rw-badge-stat__caption {
	font-size: var(--wp--preset--font-size--meta, 14px);
	line-height: 22px;
	color: var(--wp--preset--color--shd-mid, #4a5c67);
	margin: 0;
}

/* Topbar */
.rw-topbar {
	background: var(--wp--preset--color--shd-dark, #051929);
	color: var(--wp--preset--color--text-inverse-muted, #a8bec8);
}

.rw-topbar,
.rw-topbar * {
	font-size: var(--wp--preset--font-size--meta, 14px);
}

.rw-topbar a {
	color: inherit;
	text-decoration: none;
}

/* Nav */
.rw-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md, 16px);
	color: var(--wp--preset--color--text, #051929);
	padding-bottom: 6px;
	border-bottom: 2px solid transparent;
}

.rw-nav .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--accent-graphic, #ff1837);
}

.rw-nav__phone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--wp--preset--color--text, #051929);
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md, 16px);
}

.rw-nav__phone-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--rw-radius-pill);
	background: var(--wp--preset--color--shd-light, #f1f5f7);
	flex-shrink: 0;
}

.rw-nav__phone-icon img {
	width: 16px;
	height: 16px;
}

/* Diensten — service cards */
.rw-service-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	padding: 32px 26px 28px;
	border: 1px solid var(--wp--preset--color--border, #e3ebef);
	border-radius: var(--rw-radius-md);
	background: var(--wp--preset--color--white, #fff);
}

.rw-service-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--rw-radius-sm);
	background: var(--wp--preset--color--shd-light, #f1f5f7);
}

.rw-service-card__icon img {
	width: 24px;
	height: 24px;
}

.rw-service-card h3 {
	font-size: var(--wp--preset--font-size--h-4, 21px);
	letter-spacing: -0.21px;
	margin: 0;
}

.rw-service-card p {
	font-size: var(--wp--preset--font-size--sm, 15px);
	color: var(--wp--preset--color--shd-mid, #4a5c67);
	margin: 0;
}

/* USPs — dark numbered cards */
.rw-usp-card {
	height: 100%;
	padding: 36px 32px;
	border-radius: var(--rw-radius-md);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.rw-usp-card__num {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm, 15px);
	color: var(--wp--preset--color--accent-on-dark, #ff5c72);
	margin: 0 0 12px;
}

.rw-usp-card h3 {
	font-size: var(--wp--preset--font-size--h-4, 21px);
	letter-spacing: -0.21px;
	color: var(--wp--preset--color--white, #fff);
	margin: 0 0 12px;
}

.rw-usp-card p {
	font-size: var(--wp--preset--font-size--base, 17px);
	line-height: 29px;
	color: var(--wp--preset--color--text-inverse-muted, #a8bec8);
	margin: 0;
}

/* Over ons — image composition */
.rw-about-media {
	position: relative;
}

.rw-about-media__detail {
	position: absolute;
	border: 8px solid var(--wp--preset--color--shd-light, #f1f5f7);
	border-radius: var(--rw-radius-lg);
	overflow: hidden;
}

.rw-about-media__plus {
	position: absolute;
	z-index: 1;
}

.rw-about-media__plus img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Contact section */
.rw-contact-form-card {
	position: relative;
	border: 1px solid var(--wp--preset--color--border, #e3ebef);
	border-radius: var(--rw-radius-md);
	padding: 40px;
	background: var(--wp--preset--color--white, #fff);
}

/* Form controls are NOT covered by the theme's reset — without border-box the
   1.5px border + 32px horizontal padding are added ON TOP of width:100%, so
   every input overflows its column by 35px (fields overlap, card bleeds). */
.rw-contact-form-card input,
.rw-contact-form-card textarea,
.rw-contact-form-card select {
	box-sizing: border-box;
}

/* Flat CF7 output can't express two spacings, so the form markup wraps each
   field in .rw-field: 22px between groups (Figma), 8px label→control. */
.rw-contact-form-card form {
	display: flex;
	flex-direction: column;
	gap: 22px;
	align-items: stretch;
}

.rw-contact-form-card .rw-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.rw-contact-form-card .wpcf7-form-control-wrap {
	display: block;
	margin: 0;
}

.rw-contact-form-card p {
	display: block;
	margin: 0;
}

.rw-contact-form-card .wpcf7-response-output {
	margin: 0;
}

.rw-contact-form-card .rw-field label {
	display: block;
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--sm, 15px);
	color: var(--wp--preset--color--text, #051929);
	margin: 0;
}

.rw-contact-form-card label .required {
	color: var(--wp--preset--color--primary, #e00e2c);
}

.rw-contact-form-card input[type="text"],
.rw-contact-form-card input[type="tel"],
.rw-contact-form-card input[type="email"],
.rw-contact-form-card textarea {
	width: 100%;
	border: 1.5px solid var(--wp--preset--color--border, #e3ebef);
	border-radius: var(--rw-radius-sm);
	padding: 14px 16px;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--base, 17px);
	line-height: 29px;
	color: var(--wp--preset--color--text, #051929);
	background: var(--wp--preset--color--white, #fff);
}

.rw-contact-form-card ::placeholder {
	color: var(--wp--preset--color--shd-mid, #4a5c67);
	opacity: 1;
}

.rw-contact-form-card textarea {
	height: 132px;
	min-height: 132px;
	resize: vertical;
	display: block;
}

.rw-contact-form-card input:focus,
.rw-contact-form-card textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary, #e00e2c);
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-light, #fbdadf);
}

.rw-contact-form-card .rw-field-row {
	display: flex;
	gap: 20px;
	margin: 0;
}

.rw-contact-form-card .rw-field-row > .rw-field {
	flex: 1 1 0;
}

.rw-contact-form-card .rw-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--wp--preset--font-size--meta, 14px);
	line-height: 22px;
	color: var(--wp--preset--color--shd-mid, #4a5c67);
}

/* CF7 wraps acceptance in its own span/label chain — flatten it so the
   checkbox and the copy sit on one row at 14px, not the 15px field-label size. */
.rw-contact-form-card .rw-consent .wpcf7-form-control-wrap,
.rw-contact-form-card .rw-consent .wpcf7-acceptance,
.rw-contact-form-card .rw-consent .wpcf7-list-item {
	display: contents;
}

.rw-contact-form-card .rw-consent label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--meta, 14px);
	line-height: 22px;
	color: var(--wp--preset--color--shd-mid, #4a5c67);
}

.rw-contact-form-card .rw-consent input[type="checkbox"] {
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	border: 1.5px solid var(--wp--preset--color--border-strong, #a8bec8);
	border-radius: 4px;
	background: var(--wp--preset--color--white, #fff);
	flex-shrink: 0;
	cursor: pointer;
}

.rw-contact-form-card .rw-consent input[type="checkbox"]:checked {
	background: var(--wp--preset--color--primary, #e00e2c);
	border-color: var(--wp--preset--color--primary, #e00e2c);
}

.rw-contact-form-card .rw-consent input[type="checkbox"]:checked::after {
	content: "";
	display: block;
	width: 4px;
	height: 8px;
	margin: 2px auto 0;
	border: solid var(--wp--preset--color--white, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.rw-contact-form-card .wpcf7-submit {
	align-self: flex-start;
}

/* Spinner is visibility-only chrome; keep it out of the flex column so it
   doesn't add a 22px gap + its own row under the submit button. */
.rw-contact-form-card .wpcf7-spinner {
	position: absolute;
	margin: 0;
}

.rw-contact-card {
	background: var(--wp--preset--color--shd-dark, #051929);
	color: var(--wp--preset--color--white, #fff);
	border-radius: var(--rw-radius-md);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.rw-contact-card h3 {
	font-size: var(--wp--preset--font-size--h-3, 24px);
	letter-spacing: -0.21px;
	margin: 0 0 10px;
}

.rw-contact-card > p {
	font-size: var(--wp--preset--font-size--base, 17px);
	line-height: 29px;
	color: var(--wp--preset--color--text-inverse-muted, #a8bec8);
	margin: 0;
}

.rw-contact-card__rows {
	display: flex;
	flex-direction: column;
}

.rw-contact-card__row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rw-contact-card__row:last-child {
	border-bottom: none;
}

.rw-contact-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--rw-radius-sm);
	background: rgba(255, 255, 255, 0.07);
	flex-shrink: 0;
}

.rw-contact-card__icon img {
	width: 18px;
	height: 18px;
}

.rw-contact-card__label {
	display: block;
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-inverse-muted, #a8bec8);
	margin: 0 0 5px;
}

.rw-contact-card__value,
.rw-contact-card__value a {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md, 16px);
	color: var(--wp--preset--color--white, #fff);
	text-decoration: none;
	line-height: 22px;
}

/* The whole red panel is the tap target — the wrapper IS the tel: link, so the
   label and the padding are clickable, not just the digits. Appearance is
   unchanged from when the panel was a div wrapping a link.

   Descendant selectors, not bare classes: theme.json emits the link colour as
   `:root :where(a…)`, which is also (0,1,0), so a single class would tie and
   lose on source order — the number would render in primary red. */
.rw-contact-card__call {
	display: block;
	background: var(--wp--preset--color--primary, #e00e2c);
	border-radius: var(--rw-radius-sm);
	padding: 22px 24px;
	color: var(--wp--preset--color--white, #fff);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

/* Same hover treatment as the solid red buttons. */
.rw-contact-card__call:hover,
.rw-contact-card__call:focus-visible {
	background-color: var(--wp--preset--color--primary-dark, #b90c23);
}

.rw-contact-card__call:focus-visible {
	outline: 2px solid var(--wp--preset--color--white, #fff);
	outline-offset: 2px;
}

/* Both shapes are styled: the panel is a dynamic block, so a page cache can
   still be serving the previous `<p>` + `<a>` markup against this stylesheet.
   Without the legacy selectors that old `<a>` falls back to the theme.json link
   colour — primary red on a primary red panel, i.e. an invisible phone number. */
.rw-contact-card .rw-contact-card__call-label,
.rw-contact-card .rw-contact-card__call > p:first-child {
	display: block;
	margin: 0;
	font-size: var(--wp--preset--font-size--meta, 14px);
	color: var(--wp--preset--color--white, #fff);
}

.rw-contact-card .rw-contact-card__call-number,
.rw-contact-card .rw-contact-card__call > a {
	display: block;
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 800;
	font-size: 26px;
	line-height: 36px;
	letter-spacing: -0.68px;
	color: var(--wp--preset--color--white, #fff);
	text-decoration: none;
}

/* Footer link columns (Diensten / Finadon) */
.rw-footer__link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rw-footer__link-list a {
	color: var(--wp--preset--color--text-inverse-muted, #a8bec8);
	text-decoration: none;
	font-size: 15px;
	line-height: 25px;
}

.rw-footer__link-list a:hover {
	color: var(--wp--preset--color--white, #fff);
}

.rw-nav {
	background: var(--wp--preset--color--white, #fff);
}

.rw-nav .custom-logo-link img,
.rw-nav .wp-block-site-logo img {
	width: 293px;
	height: 38px;
	object-fit: contain;
}

.rw-footer__logo {
	display: block;
	width: 293px;
	height: 38px;
}

.rw-footer__brand {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 800;
	font-size: 22px;
	color: var(--wp--preset--color--white, #fff);
	margin: 0;
}

.rw-footer__lead {
	font-size: 15px;
	line-height: 25px;
	color: var(--wp--preset--color--text-inverse-muted, #a8bec8);
	max-width: 340px;
	margin: 0;
}

.rw-footer__heading {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white, #fff);
	margin: 0 0 20px;
}

.rw-footer__bottom {
	align-items: center;
	font-size: var(--wp--preset--font-size--meta, 14px);
	color: var(--wp--preset--color--text-inverse-muted, #a8bec8);
}

.rw-footer__bottom a {
	color: inherit;
	text-decoration: none;
	margin-left: 24px;
}

.rw-footer__copy {
	margin: 0;
}

/* ==========================================================================
   Responsive — Figma only specifies the 1440 desktop frame, so these rules
   collapse the fixed-pixel compositions rather than following a mobile design.
   ========================================================================== */

@media (max-width: 1200px) {
	.rw-hero .wp-block-buttons {
		flex-wrap: wrap;
	}

	.rw-hero .wp-block-column {
		flex-basis: auto !important;
	}
}

@media (max-width: 900px) {
	/* !important beats core's equal-specificity `.wp-block-group-is-layout-flex`. */
	.rw-topbar {
		display: none !important;
	}

	/* Contact details stay reachable via the Contact section on small screens. */
	.rw-nav__phone,
	.rw-nav .wp-block-buttons {
		display: none !important;
	}

	.rw-nav .wp-block-site-logo img {
		max-width: 200px;
		height: auto;
	}

	/* With the phone chip and CTA hidden, the group that follows the menu button
	   collapses to zero width, so `space-between` parks the button halfway
	   between the logo and the right edge. Pushing it right gives it the same
	   inset from its edge as the logo has from the left. */
	.rw-nav .wp-block-navigation {
		margin-left: auto;
	}

	/* Core pads the open overlay with clamp(1rem, <root side padding>, 20rem).
	   theme.json sets that root padding to 0, so the overlay falls back to its
	   1rem floor while the header runs on clamp(20px, 8.33vw, 120px) — hence the
	   close button sitting further right and higher than the toggle it replaces.
	   Restating the header's insets drops it exactly onto the toggle: 21px header
	   padding + 1px, the offset that centres the 24px icon in the 26px logo row. */
	.rw-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		padding: 22px clamp(20px, 8.33vw, 120px);
	}

	/* Setting the variable core already reads beats overriding align-items on the
	   content, the list and every item separately — one declaration, and any
	   future core rule that consults it stays in step. */
	.rw-nav .wp-block-navigation__responsive-container.is-menu-open {
		--navigation-layout-justification-setting: flex-end;
	}

	.rw-section {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}

	.rw-plus-list--row {
		flex-direction: column;
		gap: 12px;
	}

	/* Over ons: the absolutely-placed detail photo and plus accent can't scale
	   down, so the composition falls back to the main image alone. */
	.rw-about-media {
		height: auto !important;
	}

	.rw-about-media .rw-photo:not(.rw-about-media__detail) {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 500 / 520;
	}

	.rw-about-media__detail,
	.rw-about-media__plus {
		display: none;
	}

	.rw-badge-stat {
		left: 0 !important;
		bottom: 16px !important;
	}

	.rw-contact-form-card,
	.rw-contact-card {
		padding: 24px;
	}

	.rw-contact-form-card .rw-field-row {
		flex-direction: column;
		gap: 22px;
	}

	.rw-footer__cols,
	.rw-footer__bottom {
		gap: 32px;
	}

	.rw-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.rw-footer__bottom a {
		margin-left: 0;
		margin-right: 24px;
	}
}

/* Core stacks .wp-block-columns at <=781px, and each card then sits alone in a
   full-width column. `height: 100%` only exists to level cards standing side by
   side; once stacked, the percentage resolves against a stretch-sized parent and
   the card renders taller than the column holding it — so the next card starts
   before the previous one has visually ended. Content height is what's wanted
   here anyway. */
@media (max-width: 781px) {
	.rw-service-card,
	.rw-usp-card {
		height: auto;
	}
}

@media (max-width: 600px) {
	.rw-hero .wp-block-button,
	.rw-hero .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.rw-hero .wp-block-button__link {
		white-space: normal;
	}
}