/**
 * Cursora — Studio Sace chrome.
 * Tokens live in theme.json; this file carries what block attributes can't express:
 * decorative art, masked icons, rails, fixed Figma geometry.
 */

:root {
	--rw-radius-sm: 5px;
	--rw-radius-md: 10px;
	--rw-radius-lg: 20px;
	--rw-line: #21212119;
	--rw-ink: #212121;
	--rw-orange: #f07d3e;
	--rw-lime: #d4db69;
	--rw-lila: #e4cde4;
	/* The mist grey is intentionally rendered at 50% opacity everywhere it backs
	   a block or box (design correction, applied after the fact). Both the theme
	   variable and the WordPress "mist" preset (used e.g. on the footer band)
	   carry the alpha so every grey surface lightens consistently on every page.
	   The solid tint #f2f1f0 lives on only where opacity would break things — see
	   the hero masking circles. */
	--rw-mist: rgba(242, 241, 240, 0.5);
	--wp--preset--color--mist: rgba(242, 241, 240, 0.5);
	/* Full-bleed width tokens. Normally the viewport; in the scaled desktop mode
	   (scale.js adds html.rw-scaling) the layout is a fixed 1920 canvas, so `vw`
	   no longer matches the content — pin these to the design width instead so
	   the grey bands and scroll rails stay full-width. */
	--rw-vw: 100vw;
	--rw-50vw: 50vw;
}

/* scale.js renders the fixed 1920 canvas and zooms it down to fit the screen,
   so while it is on, the *layout* is 1920 wide no matter how wide the screen
   actually is. Every fluid token in theme.json is authored against the REAL
   viewport (`vw`), which no longer matches that canvas: on a 1440 laptop they
   resolve to their 1440 values inside a 1920 layout. Headings came out ~13%
   small (h1 52px instead of 60), the gutter lost 41px and the section rhythm
   25px — so titles wrapped differently and every section below drifted up,
   which is why 1440 never matched the board.

   Pin them to the values the 1920 board is drawn with for as long as we are
   scaling. Below scale.js's FLOOR the class is absent, the fluid behaviour
   returns and the reflow layout uses it as intended.

   Both selectors are needed: WordPress may emit these presets on :root or on
   body, and a declaration on body would beat one merely inherited from html. */
html.rw-scaling,
html.rw-scaling body {
	--rw-vw: 1920px;
	--rw-50vw: 960px;

	--wp--preset--font-size--h-1: 60px;
	--wp--preset--font-size--h-2: 40px;
	--wp--preset--font-size--h-3: 36px;
	--wp--preset--font-size--h-4: 22px;
	--wp--preset--font-size--step: 30px;

	--wp--preset--spacing--gutter: 165px;
	--wp--preset--spacing--section: 100px;
}

/* The ornaments (spirals, badges, photo frames) are placed on Figma's 1590
   content box and several are drawn deliberately hanging off its edges — the
   footer spiral is cropped by the section in the design. Below 1920 the box is
   narrower than the coordinates they carry, so that intended crop turns into
   real page scroll. `clip` crops them at the viewport without making a scroll
   container, so the CTA band can still overhang the footer vertically. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Section bands butt up against each other — no hairline seams. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

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

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

/* Custom components carry their own padding and Figma-fixed heights, so they
   must measure border-box — WP's reset does not reach plain markup in wp:html. */
.rw-tile,
.rw-card,
.rw-fact,
/* The rails are 100vw *plus* a gutter of padding as content-box, so each one
   pushes the document 20-165px wider than the screen. */
.rw-rail,
.rw-contactblok,
.rw-cta,
.rw-chip,
.rw-step,
.rw-photopair,
.rw-hero__deco,
.rw-voorwie__panel,
.rw-wwintro__panel,
.rw-wdiensten__panel {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- icons */
/* Figma ships these as Font Awesome glyphs; exported as SVG and masked so
   they inherit currentColor instead of shipping a whole icon font. */
.rw-i {
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex: none;
}

.rw-i--check { width: 14px; height: 14px; -webkit-mask-image: url("../icons/check.svg"); mask-image: url("../icons/check.svg"); }
.rw-i--tag { width: 13px; height: 13px; -webkit-mask-image: url("../icons/tag.svg"); mask-image: url("../icons/tag.svg"); }
.rw-i--location { width: 11px; height: 13px; -webkit-mask-image: url("../icons/location.svg"); mask-image: url("../icons/location.svg"); }
.rw-i--phone { width: 15px; height: 15px; -webkit-mask-image: url("../icons/phone.svg"); mask-image: url("../icons/phone.svg"); }
.rw-i--envelope { width: 16px; height: 13px; -webkit-mask-image: url("../icons/envelope.svg"); mask-image: url("../icons/envelope.svg"); }
.rw-i--angle-right { width: 7px; height: 12px; -webkit-mask-image: url("../icons/angle-right.svg"); mask-image: url("../icons/angle-right.svg"); }
.rw-i--arrow-right { width: 14px; height: 12px; -webkit-mask-image: url("../icons/arrow-right.svg"); mask-image: url("../icons/arrow-right.svg"); }

/* --------------------------------------------------------------- buttons */
.wp-block-button__link {
	border-radius: var(--rw-radius-sm);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button__link:hover {
	text-decoration: none;
}

/* Trailing arrow — Figma puts one on nearly every button. */
.rw-btn-arrow .wp-block-button__link::after {
	content: "";
	width: 14px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") no-repeat center / contain;
	mask: url("../icons/arrow-right.svg") no-repeat center / contain;
	transition: transform 0.15s ease;
}

.rw-btn-arrow .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.wp-block-button:not(.is-style-outline):not(.is-style-white):not(.is-style-text) .wp-block-button__link:hover {
	background-color: #d96a2e;
}

/* Figma draws outline buttons the same 46px tall as filled ones, with a
   1.5px inside stroke. The box is border-box, so 26 line + 2x10 padding. */
/* The background MUST be reset here. theme.json's outline variation sets it,
   but that style does not reach a button written as plain markup inside a
   wp:html block — leaving the element's orange background under orange text,
   i.e. an invisible label. Painting the stroke as an inset shadow instead of a
   border also keeps the box at Figma's 46 (26 line + 2x10) and matches the
   design's INSIDE stroke alignment. */
.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--rw-orange);
	border: 0;
	box-shadow: inset 0 0 0 1.5px var(--rw-orange);
	padding-top: 10px;
	padding-bottom: 10px;
}

.is-style-outline .wp-block-button__link:hover {
	background-color: var(--rw-orange);
	color: #fff;
}

.is-style-outline .wp-block-button__link:hover {
	background-color: var(--rw-orange);
	color: #fff;
}

.is-style-white .wp-block-button__link:hover {
	background-color: var(--rw-mist);
}

/* Text button — "Lees meer" / "Bekijk project" inline links. */
.is-style-text .wp-block-button__link {
	background: none;
	color: var(--rw-orange);
	padding: 0;
	font-weight: 700;
}

.is-style-text .wp-block-button__link:hover {
	background: none;
	text-decoration: underline;
}

/* LinkedIn button keeps the brand glyph, orange on outline. */
.rw-btn-linkedin .wp-block-button__link {
	color: var(--rw-orange);
	border-color: var(--rw-orange);
}

.rw-btn-linkedin .wp-block-button__link::before {
	content: "";
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("../icons/linkedin.svg") no-repeat center / contain;
	mask: url("../icons/linkedin.svg") no-repeat center / contain;
}

.rw-btn-linkedin .wp-block-button__link:hover {
	background-color: var(--rw-orange);
	color: #fff;
}

/* ---------------------------------------------------------------- header */
/* The header sticks to the top on scroll. Sticky has to sit on the template-
   part wrapper (a direct child of .wp-site-blocks, so it has the whole page to
   travel) — not on .rw-header, whose parent is only header-tall. The <footer>
   wrapper shares the class, hence the element-qualified selector. The ancestor
   .wp-site-blocks uses overflow-x:clip (not hidden), which does not trap sticky. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
}

.rw-header {
	border-bottom: 1px solid var(--rw-line);
	position: relative;
	z-index: 20;
}

.rw-header__bar {
	gap: 24px;
}

.rw-logo {
	display: inline-flex;
	line-height: 0;
}

.rw-logo img {
	width: 112px;
	height: 47px;
}

.rw-nav a,
.rw-footer__nav a {
	color: var(--rw-ink);
	text-decoration: none;
	font-size: 16px;
	line-height: 1.625;
}

.rw-nav a:hover,
.rw-footer__nav a:hover {
	color: var(--rw-orange);
	text-decoration: none;
}

/* Active page in the primary nav: bold, ink colour (aria-current is set in
   functions.php since custom-link menus carry no current-page marker). */
.rw-nav a[aria-current="page"] {
	font-weight: 700;
}

.rw-header__right {
	gap: 70px;
}

/* Orange seal straddling the header's bottom edge, left of centre — on every
   page. The compound selector beats .rw-deco--badge-3's own 58px sizing. It
   inherits position:absolute/z-index from .rw-deco; the header (position
   relative, no overflow) lets it hang below the border onto the page. */
/* Figma calls this "Stijlelement badge 3": 50x50 at Left 581 on the 1920 board,
   Top -28.95 against a hero that starts at y=99 — so it sits at y=70 and hangs
   21px below the header's band. It used to be eyeballed at `left: 24%` (x=461),
   145px left of the board and 9px low. Anchor it to the centred 1590 content box
   (581 - 165 gutter = 416 -> 50% - 795 + 416) so it keeps its place above the
   design width too, exactly like the cursora_deco() ornaments. */
.rw-header .rw-header__stamp {
	left: calc(50% - 379px);
	top: 70px;
	bottom: auto;
	transform: none;
	width: 50px;
	height: 50px;
}

/* --------------------------------------------------------------- section */
.rw-section {
	width: 100%;
	position: relative;
}

.rw-section--mist { background-color: var(--rw-mist); }
.rw-section--white { background-color: #fff; }

/* Eyebrow: small bullet + label above a heading. */
.rw-eyebrow {
	/* Block-level flex, not inline-flex: as an inline box it would sit inside a
	   line box of the parent's line-height, dropping the label ~8px below the y
	   Figma reports for it — and every offset under it with it. */
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	height: 16px;
	/* Figma fills label + bullet with Merk/Lila. Very low contrast on white —
	   kept because it is the design; flagged in the plan. */
	color: var(--rw-lila);
	margin: 0 0 4px;
}

.rw-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rw-lila);
	flex: none;
}

/* Shared "Tekstblok" — the eyebrow / H2 / body / button stack Figma reuses in
   Waarom, FAQ, Over mij intro, Voor wie, Werkwijze intro and Contact. Its
   rhythm is fixed (label 16/16, title 36/70, body 16/26), so it is defined once
   here instead of being restated per section. */
.rw-tekstblok h2 {
	font-size: 36px;
	line-height: 70px;
	margin: 4px 0 0;
}

/* Figma's H2 style is 36/70, but every hard-broken title in this file carries a
   per-line override to 40 for the continuation lines. Reproduced as a 29px
   offset plus 40 leading, which lands both lines on the design's baselines. */
.rw-tekstblok h2.rw-title--tight {
	line-height: 40px;
	padding-top: 29px;
}

/* :where() keeps this at one-class specificity so the adjacency rules below
   (h2 + p, p + p) still win — :not() would have outweighed them. */
.rw-tekstblok p:where(:not(.rw-eyebrow)) {
	margin: 0;
	font-size: 16px;
	line-height: 26px;
}

/* Figma keeps the body in ONE text node: the gap under the title is 19px, but a
   paragraph break inside that node is a real blank line — a full 26px line box. */
.rw-tekstblok h2 + p { margin-top: 19px; }
.rw-tekstblok p + p { margin-top: 26px; }

.rw-tekstblok .wp-block-buttons { margin-top: 36px; }

.rw-section__head--center {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}

.rw-section__head--wide { max-width: 878px; }

.rw-section__head--center .rw-eyebrow {
	justify-content: center;
	margin-inline: auto;
}

/* Figma stacks these tight: label 0-16, H2 20-90, intro 87-113. WP's default
   24px block gap has to be taken out before those offsets can be honoured. */
.rw-section__head > * + *,
.rw-section__head--center > * + * {
	margin-block-start: 0;
}

.rw-section__head--center h2 {
	/* the eyebrow's own 4px bottom margin already supplies Figma's gap */
	margin: 0 0 -3px;
}

.rw-section__head--center .rw-eyebrow {
	margin-bottom: 4px;
}

/* Figma: intro ends 113, cards start 184. */
.rw-section__head--center + * {
	margin-block-start: 71px;
}

/* A rail's visual top is 60px inside its border box (the shadow clearance
   padding), and its own -60px margin would otherwise cancel the rhythm above
   it. Express the gap Figma actually shows, minus that clearance. */
.rw-section__head--center + .rw-rail {
	margin-block-start: calc(56px - 60px);
}

.rw-section__head--center .rw-lead {
	margin: 0;
}

.rw-lead {
	font-size: 16px;
	line-height: 1.625;
	margin: 0;
}

/* Checklist row used in hero, diensten, werkwijze, over mij. */
.rw-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 11px 24px;
}

/* Line height is a token, not a second rule: `.rw-checks--stack li` and
   `.rw-checks li` have equal specificity, so the later one silently won. */
.rw-checks--stack {
	--rw-check-lh: 38px;
	flex-direction: column;
	gap: 0;
}

/* Figma's bullet is Font Awesome f14a (square-check): a filled ink square with
   the tick knocked out, not a bare tick. Composed from the square (::before)
   plus the exported check as a white mask (::after). */
.rw-checks li {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
	font-weight: 500;
	line-height: var(--rw-check-lh, 26px);
	margin: 0;
}

.rw-checks li::before,
.rw-checks li::after {
	content: "";
	position: absolute;
	left: 0;
	/* Align the check to the FIRST line (its centre), not the whole item's
	   vertical centre — so a wrapped item keeps its check next to line one.
	   `50%` is the fallback for browsers without the `lh` unit. */
	top: 50%;
	top: 0.5lh;
}

.rw-checks li::before {
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border-radius: 3px;
	background-color: var(--rw-ink);
}

.rw-checks li::after {
	left: 3px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background-color: #fff;
	-webkit-mask: url("../icons/check.svg") no-repeat center / contain;
	mask: url("../icons/check.svg") no-repeat center / contain;
}

/* ------------------------------------------------------------------ hero */
/* Figma "02 / Hero": mist band 1920x728, content box 1590 starting at x=165.
   Every offset below is the Figma value minus that 165 gutter. */
.rw-hero {
	/* Figma "02 / Hero": the mist is a 728px band, not the section — the frame
	   runs 837 and the last 109 are white. */
	background: linear-gradient(to bottom, var(--rw-mist) 0 728px, #fff 728px);
	position: relative;
	overflow: hidden;
	padding-top: 85px;
	padding-bottom: 225px;
}

.rw-hero__text {
	position: relative;
	z-index: 2;
}

/* 22px SemiBold, not body copy. */
.rw-hero__intro {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 35px;
}

.rw-hero h1 {
	/* Figma text box; "perfect aansluitend" wraps naturally at this measure. */
	max-width: 814px;
	margin: 0;
}

/* The lime is a stroke behind the lower part of the line, not a block fill.
   Sized in em so it stays proportional to the heading: 12px stroke / 7px lift on
   the 60px desktop h1 (0.2em / 0.1167em) — identical there, but it no longer
   stays a fat 12px when the h1 shrinks with the fluid type ramp on mobile. */
.rw-mark {
	background-image: linear-gradient(var(--rw-lime), var(--rw-lime));
	background-repeat: no-repeat;
	background-size: 100% 0.2em;
	background-position: 0 calc(100% - 0.1167em);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.rw-checks--hero {
	margin-top: 36px;
	gap: 0 12px;
}

.rw-checks--hero li {
	line-height: 34px;
	margin-right: 12px;
}

.rw-hero__btns {
	margin-top: 39px;
}

/* --- decoration layer: same 1590 box as the text, so it tracks the gutter --- */
.rw-hero__deco {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(1590px, calc(100% - 2 * var(--wp--preset--spacing--gutter)));
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.rw-hero__deco > * {
	position: absolute;
}

.rw-hero__photo {
	left: 58.93%;
	top: 175px;
	width: 34.09%;
	max-width: none;
	height: auto;
}

.rw-hero__spiral { left: 51.45%; top: -35px; }
.rw-hero__badge2 { left: 48.49%; top: 484px; }
.rw-hero__badge1 { left: 95.53%; top: 217px; }

/* Rotating spiral + scattered badges. */
.rw-deco {
	position: absolute;
	pointer-events: none;
	user-select: none;
	z-index: 3;
}

.rw-deco--spiraal {
	width: 206px;
	height: 207px;
	background: url("../icons/spiraal.svg") no-repeat center / contain;
}

@keyframes rw-spin {
	to { transform: rotate(360deg); }
}

.rw-deco--badge-1 { width: 55px; height: 55px; background: url("../icons/badge-1.svg") no-repeat center / contain; }
.rw-deco--badge-2 { width: 50px; height: 50px; background: url("../icons/badge-2.svg") no-repeat center / contain; }
.rw-deco--badge-3 { width: 58px; height: 58px; background: url("../icons/badge-3.svg") no-repeat center / contain; }

/* size may be overridden per instance by cursora_deco() */
.rw-deco-layer > .rw-deco { background-size: contain; }

/* ----------------------------------------------------------- service tiles */
.rw-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.rw-tile {
	background: var(--rw-mist);
	border: 0;
	border-radius: var(--rw-radius-md);
	/* Figma: 54 left / 31 right gives the 290px checklist measure inside a 375 card. */
	padding: 55px 31px 49px 54px;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 382px;
}

.rw-tile__icon {
	width: 62px;
	height: 62px;
	border-radius: var(--rw-radius-sm);
	display: grid;
	place-items: center;
	flex: none;
}

.rw-tile__icon--lime { background: var(--rw-lime); }
.rw-tile__icon--lila { background: var(--rw-lila); }

.rw-tile__icon span {
	width: 24px;
	height: 24px;
	background-color: #fff;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.rw-tile__icon .rw-svc-1 { -webkit-mask-image: url("../icons/svc-swatchbook.svg"); mask-image: url("../icons/svc-swatchbook.svg"); }
.rw-tile__icon .rw-svc-2 { -webkit-mask-image: url("../icons/svc-rotate.svg"); mask-image: url("../icons/svc-rotate.svg"); }
.rw-tile__icon .rw-svc-3 { -webkit-mask-image: url("../icons/svc-eye.svg"); mask-image: url("../icons/svc-eye.svg"); }
.rw-tile__icon .rw-svc-4 { -webkit-mask-image: url("../icons/svc-4.svg"); mask-image: url("../icons/svc-4.svg"); }

.rw-tile__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 26px;
	margin: 38px 0 16px;
	/* Long single words ("Communicatiemiddelen") overflow the narrow card below
	   the design width — let them wrap/hyphenate instead. */
	overflow-wrap: break-word;
	hyphens: auto;
}

.rw-tile .rw-checks {
	flex-direction: column;
	gap: 0;
}

.rw-tile .rw-checks li {
	font-size: 16px;
	font-weight: 500;
	line-height: 30px;
}

.rw-tile__more {
	margin-top: auto;
	font-weight: 700;
	color: var(--rw-orange);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.rw-tile__more::after {
	content: "";
	width: 14px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") no-repeat center / contain;
	mask: url("../icons/arrow-right.svg") no-repeat center / contain;
}

/* ------------------------------------------------------------------ rails */
.rw-railhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 67px;
}

.rw-railhead__text { max-width: 1080px; }

/* Rail heads run 36px; only the centred section heads are 40. */
.rw-railhead__text h2 {
	font-size: 36px;
	line-height: 70px;
	margin: 0;
}

.rw-railhead__text .rw-eyebrow { margin: 0 0 14px; }
.rw-railhead__text .rw-lead { margin: 0; }

.rw-railhead__tools {
	display: flex;
	align-items: center;
	gap: 28px;
	flex: none;
}

.rw-rail-nav {
	display: flex;
	gap: 15px;
}

/* Rendered by core/button, so the target is the inner <a>. The arrow glyph
   replaces the label text (font-size:0) so the label stays for screen readers. */
.rw-rail-nav__btn .wp-block-button__link {
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: var(--rw-radius-sm);
	border: 0;
	box-shadow: inset 0 0 0 1.5px var(--rw-orange);
	background: transparent;
	color: var(--rw-orange);
	display: grid;
	place-items: center;
	font-size: 0;
	gap: 0;
}

.rw-rail-nav__btn .wp-block-button__link::after {
	content: "";
	width: 14px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") no-repeat center / contain;
	mask: url("../icons/arrow-right.svg") no-repeat center / contain;
}

.rw-rail-nav__btn--prev .wp-block-button__link::after {
	transform: scaleX(-1);
}

.rw-rail-nav__btn .wp-block-button__link:hover {
	background: var(--rw-orange);
	color: #fff;
}

.rw-rail-nav__btn .wp-block-button__link.is-disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* The rail is a viewport-level component: it starts at the content edge and
   runs off the right of the screen, exactly as Figma draws it.
   Three things have to be handled explicitly, and all three bit us:
   1. overflow-x makes this a clipping box, so the 50px card shadow needs
      vertical breathing room (padding-block, pulled back with margin-block);
   2. the scroll viewport must reach the browser edge, or the 4th card that
      Figma shows half-cut simply never appears;
   3. WP's default-layout block gap emits margin-block-start on every child
      except the first, which in a flex row drops every card but card 1 by 24px. */
/* Shadow clearance: the rail pads itself 60px and pulls the same back with a
   negative margin, so its visual top and bottom sit 60px inside its border box.
   Anything measuring against the design has to subtract it — hence the token
   rather than a bare 60 scattered through the spacing rules. */
:root { --rw-rail-bleed: 60px; }

.rw-rail {
	display: flex;
	gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	width: var(--rw-vw);
	/* WP caps post-template at max-width:100%, which would clamp the 100vw
	   back to the 1590 content box and hide the half-cut 4th card. */
	max-width: none;
	margin-left: calc(50% - var(--rw-50vw));
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: 0;
	padding-block: var(--rw-rail-bleed);
	margin-block: calc(-1 * var(--rw-rail-bleed));
	scroll-padding-inline: var(--wp--preset--spacing--gutter) 0;
}

.rw-rail::-webkit-scrollbar { display: none; }

/* Kill the block-gap margin WP puts on every child but the first. */
.rw-rail > * + * {
	margin-block-start: 0;
}

/* Card size is per rail, not per selector chain: each rail sets the two
   custom properties and the shared rules stay one rule. */
.rw-rail {
	--rw-rail-card-w: 510px;
	--rw-rail-card-h: 546px;
}

.rw-rail > * {
	scroll-snap-align: start;
	flex: 0 0 var(--rw-rail-card-w);
	max-width: 85vw;
	height: var(--rw-rail-card-h);
}

/* Figma "06 / Reviews" > "Kaarten carrousel": five 510-wide cards, 30 apart,
   the middle one centred on the 1920 board (Left 705 -> centre 960) with two
   cards either side running off the edges. The inline padding lets any card
   reach the centre; carousel-dots.js scrolls the middle card there on load. */
.rw-rail--reviews {
	--rw-rail-card-w: 510px;
	--rw-rail-card-h: auto;
	align-items: flex-start;
	padding-left: calc(var(--rw-50vw) - var(--rw-rail-card-w) / 2);
	padding-right: calc(var(--rw-50vw) - var(--rw-rail-card-w) / 2);
	scroll-padding-inline: 0;
}

.rw-rail--reviews > * { scroll-snap-align: center; }

/* Figma "04 / In het kort": the rail does not start at the gutter but at
   x=570, next to the intro column, and still runs off the right edge. */
.rw-rail--kort {
	--rw-rail-card-w: 375px;
	--rw-rail-card-h: 357px;
	width: auto;
	margin-left: 0;
	padding-left: 0;
	/* The 1590 content box ends at 50vw + 795; stretch to the viewport edge. */
	margin-right: calc(795px - var(--rw-50vw));
	scroll-padding-inline: 0;
}

/* ------------------------------------------------------------------ cards */
.rw-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius-md);
	box-shadow: 0 0 50px rgba(33, 33, 33, 0.1);
	overflow: hidden;
	background: #fff;
	height: 100%;
}

.rw-card .wp-block-post-featured-image,
.rw-card__media {
	margin: 0;
}

.rw-card .wp-block-post-featured-image img,
.rw-card__media img {
	width: 100%;
	aspect-ratio: 510 / 340;
	object-fit: cover;
	display: block;
	border-radius: var(--rw-radius-md) var(--rw-radius-md) 0 0;
}

/* Figma card 510x546: image 0-340, title 386, chips 431, link 474, inset 43. */
.rw-card__body {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0 43px 46px;
	flex: 1;
}

.rw-card__body > .rw-card__title { margin-top: 46px; }
.rw-card__body > .rw-chips { margin-top: 19px; }
.rw-card__body > .rw-card__more { margin-top: 18px; }

.rw-card__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.182;
	margin: 0;
}

.rw-card__title a {
	color: var(--rw-ink);
	text-decoration: none;
}

.rw-card__title a:hover { color: var(--rw-orange); }

.rw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Figma "Card" > label: 25 tall, 10px side padding, icon (Font Awesome solid
   12, #212121 at full strength) 4px before the Accent/Kaartlabel text (14/400,
   #212121). The icon used to sit at 75% opacity, which read as grey next to the
   ink text and made the whole label look washed out. */
.rw-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--rw-mist);
	border-radius: var(--rw-radius-sm);
	padding: 0 10px;
	height: 25px;
	font-size: 14px;
	font-weight: 400;
	line-height: 25px;
	color: var(--rw-ink);
}

.rw-chip .rw-i { color: var(--rw-ink); }
.rw-chip .rw-i--tag { width: 11px; height: 12px; }

.rw-card__more {
	margin-top: auto;
	font-weight: 700;
	color: var(--rw-orange);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.rw-card__more::after {
	content: "";
	width: 14px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") no-repeat center / contain;
	mask: url("../icons/arrow-right.svg") no-repeat center / contain;
	transition: transform 0.15s ease;
}

.rw-card__more:hover::after { transform: translateX(3px); }

/* Projects belonging to one opdrachtgever — a wrapping grid of the shared card. */
.rw-opdrprojecten__head { margin-bottom: 44px; }
.rw-opdrprojecten__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 30px;
}
.rw-opdrprojecten__grid .rw-card__media { display: block; }

/* --------------------------------------------------- project detail lightbox */
/* Figma "Project pop-up" (1920x1080 board). Every number below is read off that
   board, measured against the dialog box:
     dialog      1590 x 895, radius 20, 1px Lijn/Inkt-10% stroke — the full 1590
                 content box, i.e. the same 165 gutter as the page
     overlay     #212121 @ 10%, starting UNDER the header (the header stays crisp)
     text column inset 132 top / 135 left, 375 wide; eyebrow 0, title 36/70 bold
                 at 20, chips at 107, "Over dit project" 22/26 at 199
     main image  780 x 520 at 675/132, radius 10 — the dominant element
     thumbs      105 x 105, 30 apart, 33 under the image, inactive at 50%
     controls    bottom-aligned with the thumbs; 105 bottom inset
   The dialog is vertically centred in the space below the header. On screens
   shorter than the board, project-lightbox.js scales the whole dialog down
   uniformly (--rw-fit) instead of reflowing it, so the design never changes. */
html.rw-modal-open { overflow: hidden; }

/* The board shows no header seal while the pop-up is open; it would otherwise
   hang into the overlay just above the dialog. */
html.rw-modal-open .rw-header__stamp { visibility: hidden; }

.rw-projmodal {
	position: fixed;
	inset: 0;
	/* Under the sticky header (z-index 20), so the header stays on top. */
	z-index: 19;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rw-header-h, 100px) 0 0;
}

/* The flex display above beats the UA [hidden] rule, so hide it explicitly —
   without this the modal is permanently open and cannot be closed. */
.rw-projmodal[hidden] { display: none; }

.rw-projmodal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(33, 33, 33, 0.1);
}

.rw-projmodal__dialog {
	position: relative;
	box-sizing: border-box;
	flex: none;
	width: 1590px;
	padding: 132px 135px 105px;
	background: #fff;
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius-lg);
	box-shadow: 0 0 50px rgba(33, 33, 33, 0.1);
	transform: scale(var(--rw-fit, 1));
	transform-origin: center;
}

.rw-projmodal__close {
	position: absolute;
	top: 51px;
	right: 48px;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--rw-radius-sm);
	background: #f2f1f0;
	color: var(--rw-ink);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.rw-projmodal__close:hover { color: var(--rw-orange); }

.rw-projmodal__item {
	display: grid;
	grid-template-columns: 375px 780px;
	column-gap: 165px;
	align-items: stretch;
}

.rw-projmodal__item[hidden] { display: none; }

.rw-projdetail__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rw-projdetail__text .rw-eyebrow { margin: 0 0 4px; }

/* Heading elements here would otherwise inherit the page H2 (40) and H3 (36). */
.rw-projdetail__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 70px;
}

.rw-projdetail__text .rw-chips { margin-top: 17px; }

.rw-projdetail__text h3 {
	margin: 67px 0 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 26px;
}

.rw-projdetail__body {
	margin-top: 26px;
	color: var(--rw-ink);
	font-size: 16px;
	line-height: 26px;
}

.rw-projdetail__body > * { margin: 0; }
.rw-projdetail__body > * + * { margin-top: 26px; }

.rw-projdetail__controls {
	display: flex;
	gap: 10px;
	/* Pinned to the column foot, which the grid stretches to the thumbs' foot. */
	margin-top: auto;
	padding-top: 40px;
}

.rw-projdetail__ctrl {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 24px;
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 1.5px var(--rw-orange);
	border-radius: var(--rw-radius-sm);
	color: var(--rw-orange);
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rw-projdetail__ctrl:hover { background: var(--rw-orange); color: #fff; }
.rw-projdetail__ctrl .rw-i { background-color: currentColor; }
.rw-projdetail__ctrl--prev { width: 46px; padding: 0; }
.rw-projdetail__ctrl--prev .rw-i { transform: rotate(180deg); }

.rw-projdetail__media { min-width: 0; }

.rw-projdetail__main img {
	display: block;
	width: 780px;
	height: 520px;
	max-width: 100%;
	object-fit: cover;
	background: #f2f1f0;
	border-radius: var(--rw-radius-md);
}

.rw-projdetail__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 33px;
}

.rw-projdetail__thumb {
	flex: none;
	width: 105px;
	height: 105px;
	padding: 0;
	border: 0;
	background: none;
	border-radius: var(--rw-radius-md);
	overflow: hidden;
	cursor: pointer;
	line-height: 0;
	transition: opacity 0.15s ease;
}

/* Board: the thumb on show is full strength, the rest at 50%. */
.rw-projdetail__thumbs.has-active .rw-projdetail__thumb:not(.is-active) { opacity: 0.5; }
.rw-projdetail__thumbs.has-active .rw-projdetail__thumb:hover { opacity: 1; }

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

/* Below scale.js's FLOOR there is no 1920 canvas to draw on, so the dialog
   becomes fluid: same order and proportions, image column still dominant. */
@media (max-width: 1280px) {
	.rw-projmodal {
		padding: calc(var(--rw-header-h, 100px) + 24px) var(--wp--preset--spacing--gutter) 24px;
	}

	.rw-projmodal__dialog {
		width: 100%;
		max-width: 1590px;
		max-height: 100%;
		overflow: auto;
		padding: 64px 56px 56px;
		transform: none;
	}

	.rw-projmodal__close { top: 16px; right: 16px; }

	.rw-projmodal__item {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		column-gap: 56px;
	}

	.rw-projdetail__main img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}

	.rw-projdetail__thumbs { gap: 16px; margin-top: 16px; }
	.rw-projdetail__thumb { width: 88px; height: 88px; }
	.rw-projdetail__text h3 { margin-top: 40px; }
}

@media (max-width: 860px) {
	.rw-projmodal__item { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
	/* The work is what a visitor opens this for — lead with it on a phone. */
	.rw-projdetail__media { order: -1; }
	.rw-projmodal__dialog { padding: 72px 20px 28px; }
	.rw-projdetail__title { font-size: 28px; line-height: 1.25; }
	.rw-projdetail__text h3 { margin-top: 28px; }
	.rw-projdetail__controls { margin-top: 0; padding-top: 28px; }
	.rw-projdetail__thumbs { gap: 10px; margin-top: 10px; }
	.rw-projdetail__thumb { width: 64px; height: 64px; }
}

/* Portfolio grid (archive) */
/* A one-page query still emits the pagination wrapper — Figma shows none. */
.rw-pagination:not(:has(a)) { display: none; }

/* Figma "03 / Projecten": three 510 cards per row, 30 apart. The board draws the
   rows 86 apart, but per the client the archive keeps the vertical gap equal to
   the horizontal one (30) — so a uniform 30px grid. */
.rw-grid {
	display: grid;
	grid-template-columns: repeat(3, 510px);
	justify-content: space-between;
	gap: 30px;
}

.rw-grid > * { height: 546px; }

/* Kill the block-gap margin WP puts on every child but the first — in a grid
   it lands on top of the row gap. Same trap as .rw-rail. */
.rw-grid > * + * { margin-block-start: 0; }

/* Review card */
.rw-card--review {
	background: #fff;
	border-radius: var(--rw-radius-md);
	box-shadow: 0 0 50px rgba(33, 33, 33, 0.07);
	padding: 60px;
	gap: 28px;
	height: auto;
}

.rw-stars {
	display: flex;
	gap: 4px;
	color: var(--rw-orange);
	font-size: 15px;
	letter-spacing: 2px;
}

.rw-stars__empty { color: rgba(33, 33, 33, 0.18); }

.rw-card--review .rw-card__title { font-size: 22px; }

.rw-card--review blockquote,
.rw-card--review .rw-quote-body {
	margin: 0;
	font-size: 16px;
	line-height: 1.625;
	border: 0;
	padding: 0;
}

.rw-reviewer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.rw-reviewer img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.rw-reviewer__name {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
}

.rw-reviewer__role {
	font-size: 14px;
	line-height: 1.3;
	margin: 0;
	opacity: 0.7;
}

/* ------------------------------------------------------------- logo strip */
.rw-logostrip {
	overflow: hidden;
	padding: 44px 0;
	background: #fff;
}

.rw-logostrip__track {
	display: flex;
	align-items: center;
	width: max-content;
	/* Duration matched to the 3x-longer track so the on-screen speed is unchanged
	   (~31px/s): each half is now three copies wide, so -50% travels 3x further. */
	animation: rw-marquee 114s linear infinite;
}

@keyframes rw-marquee {
	to { transform: translateX(-50%); }
}

.rw-logostrip img {
	max-height: 59px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.38;
	/* Spacing lives on the item, not flex-gap: that keeps every logo (including
	   the one on each half's seam) the same distance apart, so translateX(-50%)
	   lands the second half exactly where the first began — no jump. */
	margin-right: 90px;
}

/* -------------------------------------------------------------------- FAQ */
.rw-faq__list > * + * {
	margin-top: 15px;
}

/* Figma: closed item is exactly 86 tall = 26 line + 2x30 padding, with the
   1.5px stroke drawn INSIDE that box. A real border would add its width to the
   height (and get rounded to 1px at DPR 1), so it is painted as an inset
   shadow instead — same look, zero effect on layout. */
.rw-faq .wp-block-details {
	border: 0;
	box-shadow: inset 0 0 0 1.5px var(--rw-line);
	border-radius: var(--rw-radius-sm);
	background: #fff;
	padding: 30px 40px;
}

.rw-faq .wp-block-details summary {
	cursor: pointer;
	list-style: none;
	font-size: 16px;
	font-weight: 600;
	line-height: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.rw-faq .wp-block-details summary::-webkit-details-marker { display: none; }

.rw-faq .wp-block-details summary::after {
	content: "";
	width: 14px;
	height: 8px;
	flex: none;
	background-color: var(--rw-ink);
	-webkit-mask: url("../icons/chevron-down.svg") no-repeat center / contain;
	mask: url("../icons/chevron-down.svg") no-repeat center / contain;
	transition: transform 0.2s ease;
}

.rw-faq .wp-block-details[open] summary::after {
	transform: rotate(180deg);
}

.rw-faq .wp-block-details > *:not(summary) {
	/* Figma frame gap between question and answer is 10; the answer wraps in a
	   688 box, not the full 698 the padding leaves. */
	margin-top: 10px;
	max-width: 688px;
	font-size: 16px;
	line-height: 26px;
}

/* Stacked photo pair used beside the FAQ and in "waarom". */
/* Figma: a 645x579 field holding two 375x457 plates, the second offset by
   +270/+122. Used identically in "Waarom Studio Sace" and the FAQ. */
.rw-photopair {
	position: relative;
	width: 645px;
	max-width: 100%;
	aspect-ratio: 645 / 579;
}

/* nth-of-type, not :first/:last-child — these pairs often have a decorative
   <span> sibling, which would steal :last-child. */
.rw-photopair img {
	position: absolute;
	width: 58.14%;
	height: 78.93%;
	object-fit: cover;
	border-radius: var(--rw-radius-md);
}

.rw-photopair img:nth-of-type(1) { left: 0; top: 0; z-index: 1; }
.rw-photopair img:nth-of-type(2) { left: 41.86%; top: 21.07%; z-index: 2; }

.rw-photopair--shadow img:nth-of-type(2) {
	box-shadow: 0 0 50px rgba(33, 33, 33, 0.1);
}

/* -------------------------------------------------------------------- CTA */
/* Figma "08 / CTA": band 1320x441 r20, inset 113, portrait overhangs the top. */
/* Figma advances the page only 252px past the CTA's top: the 441 band hangs
   200px over the footer's mist band. Every page's total height only adds up
   with that overlap, so the section is sized to the flow it occupies and the
   band is left to overflow. */
.rw-ctawrap {
	height: 252px;
	z-index: 2;
}

.rw-cta {
	background: var(--rw-orange);
	border-radius: var(--rw-radius-lg);
	color: #fff;
	position: relative;
	width: 1320px;
	max-width: 100%;
	margin-inline: auto;
	min-height: 441px;
	padding: 63px 113px 0;
}

.rw-cta h2,
.rw-cta p {
	color: #fff;
}

/* Figma sets this heading at 36, one step below the section H2. */
.rw-cta h2 {
	font-size: 36px;
	line-height: 70px;
	max-width: 665px;
	margin: 4px 0 0;
}

.rw-cta .rw-eyebrow {
	color: #fff;
	margin: 0;
}

.rw-cta .rw-eyebrow::before {
	background: #fff;
}

.rw-cta__lead {
	margin: 4px 0 0;
	max-width: 522px;
	font-size: 16px;
	line-height: 26px;
}

.rw-cta__body {
	position: relative;
	z-index: 2;
}

.rw-cta__contact {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 9px 0 0;
}

.rw-cta__contact a {
	color: #fff;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	line-height: 26px;
}

.rw-cta__contact a:hover { text-decoration: underline; }

.rw-cta__btns {
	position: relative;
	z-index: 2;
	margin-top: 23px;
}

.rw-cta__btns .wp-block-button__link {
	min-width: 245px;
	justify-content: center;
}

/* Portrait sits above the band and bleeds over its top edge. */
.rw-cta__media {
	position: absolute;
	left: 762px;
	top: -68px;
	width: 500px;
	z-index: 1;
	pointer-events: none;
}

.rw-cta__photo {
	width: 500px;
	max-width: none;
	display: block;
}

/* The exported portrait has two badges baked into its transparent margins;
   Figma hides them behind band-coloured rectangles. */
.rw-cta__patch {
	position: absolute;
	background: var(--rw-orange);
}

.rw-cta__patch--1 { left: 16px; top: 94px; width: 115px; height: 112px; }
/* Figma 'Rectangle 97': 72x101 at section 1456,17 -> media-relative 394,74. */
.rw-cta__patch--2 { left: 394px; top: 74px; width: 72px; height: 101px; }

/* --------------------------------------------------------------- paginakop */
/* Figma "02 / Paginakop", frame 1920x585: mist plane 1110x436 left, photo
   810x436 flush right (no radius), 1px hairline on top, text at y=125/171/277. */
.rw-kop {
	/* Figma's 585 is the 436 mist band plus a 149 tail — it is not driven by the
	   copy, which is shorter. min-height holds the band's rhythm while still
	   growing if a page ever carries a longer intro. */
	min-height: 585px;
	position: relative;
	background: #fff;
	border-top: 1px solid var(--rw-line);
	overflow: hidden;
}

.rw-kop__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Constrained layout caps children at contentSize; this plane is full-bleed. */
	max-width: none;
}

.rw-kop__mist {
	position: absolute;
	left: 0;
	top: 0;
	width: 57.81%;
	height: 436px;
	background: var(--rw-mist);
}

.rw-kop__photo {
	position: absolute;
	right: 0;
	top: 0;
	width: 42.19%;
	height: 436px;
	object-fit: cover;
	max-width: none;
}

.rw-kop__text {
	position: relative;
	z-index: 2;
}

.rw-kop--tall { min-height: 634px; }

.rw-crumbs {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 12px;
	line-height: 12px;
	margin: 0 0 34px;
}

.rw-crumbs a {
	color: var(--rw-ink);
	text-decoration: none;
}

.rw-crumbs a:hover { text-decoration: underline; }
.rw-crumbs span[aria-current] { font-weight: 500; }
.rw-crumbs .rw-i--angle-right { opacity: 0.6; }

.rw-kop__text h1 {
	margin: 0;
	max-width: 915px;
}

.rw-kop__intro {
	margin: 36px 0 0;
	max-width: 725px;
	font-size: 16px;
	line-height: 26px;
}

@media (max-width: 980px) {
	.rw-kop { padding-bottom: 80px !important; }
	.rw-kop__mist { width: 100%; }
	.rw-kop__photo { position: static; width: 100%; height: 260px; margin-top: 40px; }
	.rw-kop__bg { position: static; }
}

/* --------------------------------------------------------- process steps */
.rw-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.rw-step__num {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	color: var(--rw-orange);
	margin: 0 0 14px;
}

.rw-step__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.182;
	margin: 0 0 10px;
}

.rw-step p { margin: 0; }

/* ------------------------------------------------------------ Projectpagina */
/* Figma "03 / Projectgalerij": a headless rail — the cards are the first thing
   in the section, so the rail's -60 shadow margin has nothing above it to
   collapse into. flow-root keeps it inside the section. */
.rw-galerij { display: flow-root; }
.rw-galerij .rw-rail { margin-top: 0; padding-top: 0; }

/* Figma "04 / Projectbeschrijving": copy 510 at x=135, photo field 645 at
   x=810 — the same pair as Waarom, one step narrower on the text. */
.rw-projecttekst__grid {
	display: grid;
	grid-template-columns: 135px 510px 165px 645px 1fr;
	align-items: start;
	gap: 0;
	position: relative;
	z-index: 2;
}

.rw-projecttekst__body { grid-column: 2; }
.rw-projecttekst__media { grid-column: 4; margin-top: 1px; }

/* Figma "05 / Resultaten": a 1590x552 mist panel holding a white 240 logo card
   at x=135 y=156 and the review copy from x=540. */
.rw-resultaten__panel {
	position: relative;
	height: 552px;
	background: var(--rw-mist);
	border-radius: var(--rw-radius-lg);
}

.rw-resultaten__logo {
	position: absolute;
	left: 135px;
	top: 156px;
	width: 240px;
	height: 240px;
	display: grid;
	place-items: center;
	background: #fff;
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius-md);
	box-shadow: 0 0 50px rgba(33, 33, 33, 0.07);
}

.rw-resultaten__logo img { width: 117px; height: 69px; object-fit: contain; }

.rw-resultaten__review {
	position: absolute;
	left: 540px;
	top: 137px;
	width: 915px;
}

.rw-resultaten__review .rw-stars { font-size: 21px; line-height: 21px; }

.rw-resultaten__review h3 {
	margin: 28px 0 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 26px;
}

.rw-resultaten__review > p {
	margin: 15px 0 0;
	max-width: 886px;
	font-size: 16px;
	line-height: 26px;
}

.rw-resultaten__author {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 36px;
}

.rw-resultaten__author img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.rw-resultaten__author span { font-size: 16px; line-height: 22px; }
.rw-resultaten__author strong { font-weight: 600; line-height: 26px; }

@media (max-width: 1280px) {
	.rw-projecttekst__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
	.rw-projecttekst__body { grid-column: 1; }
	.rw-projecttekst__media { grid-column: 2; }
	.rw-resultaten__panel { height: auto; padding: 60px; }
	.rw-resultaten__logo,
	.rw-resultaten__review { position: static; width: auto; }
	.rw-resultaten__review { margin-top: 40px; }
}

/* ------------------------------------------------------- Waarom Diensten */
/* Figma "04 / Waarom Diensten": photo 645x647 at x=0, mist panel 915x647 at
   x=675 with the copy inside it. */
.rw-wdiensten__grid {
	display: grid;
	grid-template-columns: 645px 30px 915px;
	align-items: start;
	gap: 0;
	position: relative;
	z-index: 2;
}

.rw-wdiensten__media img {
	display: block;
	width: 645px;
	height: 647px;
	max-width: 100%;
	object-fit: cover;
	border-radius: var(--rw-radius-md);
}

/* Only the active carousel slide shows; the [hidden] on the image needs to beat
   the display:block above (plain [hidden] would lose to it). */
.rw-wdiensten__media img[hidden],
.rw-wdiensten__slide[hidden] { display: none; }

.rw-wdiensten__panel {
	grid-column: 3;
	height: 647px;
	background: var(--rw-mist);
	border-radius: var(--rw-radius-md);
	padding: 109px 133px 95px;
}

.rw-wdiensten__panel .rw-checks { margin-top: 34px; }
.rw-wdiensten__panel .rw-rail-nav { margin-top: 42px; }

/* Figma overrides the lines in this particular list to ~31. */
.rw-checks--tight { --rw-check-lh: 31px; }

@media (max-width: 1280px) {
	.rw-wdiensten__grid { grid-template-columns: 1fr; gap: 40px; }
	.rw-wdiensten__panel { grid-column: 1; height: auto; padding: 60px; }
}

/* ----------------------------------------------------------------- Reviews */
/* Figma "05 / Reviews": the section is white; the mist is a full-bleed band of
   1920x1088 at the section top. */
/* The beeldmerk peeks into the top-right corner and is cropped by the section
   edge — the same treatment as the hero seal (top:-35 + overflow). Clip is safe
   here: the rail is its own overflow-x scroll container, so it is untouched. */
.rw-reviews { position: relative; overflow: clip; }

/* Pin the seal to the corner and let the section crop its overhang, so the
   uitsnede is identical on every page that uses this rail (home + diensten).
   The generic deco helper places it on the 1590 box, which left it floating
   fully inside the band on wide screens and drifting per page (the homepage
   drops the band 81px). !important beats the inline left/top the helper emits. */
.rw-reviews .rw-deco--spiraal {
	left: auto !important;
	right: 32px !important;
	top: -36px !important;
}

.rw-reviews__band {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: var(--rw-vw);
	max-width: none;
	height: 1088px;
	background: var(--rw-mist);
	z-index: 0;
}

/* Figma: head 148..261, cards 317, button 925. */
.rw-reviews .rw-railwrap { margin-top: 0; }

/* ------------------------------------------------------ Werkwijze intro */
/* Figma "03 / Werkwijze intro": photo 510x569 at x=135, mist panel 780x593 at
   x=675 dropped 123px, copy inside the panel at 95/105. */
.rw-wwintro__grid {
	display: grid;
	grid-template-columns: 135px 510px 30px 780px 1fr;
	align-items: start;
	gap: 0;
}

.rw-wwintro__media { grid-column: 2; }

.rw-wwintro__media img {
	display: block;
	width: 510px;
	height: 569px;
	max-width: 100%;
	object-fit: cover;
	border-radius: var(--rw-radius-md);
	box-shadow: 0 0 50px rgba(33, 33, 33, 0.07);
}

.rw-wwintro__panel {
	grid-column: 4;
	margin-top: 123px;
	background: var(--rw-mist);
	border-radius: var(--rw-radius-md);
	padding: 105px 95px 104px;
}

/* Title 248..357 (29 + 2x40), checklist at 384. */
.rw-wwintro__panel .rw-checks { margin-top: 27px; }

@media (max-width: 1280px) {
	.rw-wwintro__grid { grid-template-columns: 1fr; gap: 40px; }
	.rw-wwintro__media,
	.rw-wwintro__panel { grid-column: 1; }
	.rw-wwintro__panel { margin-top: 0; padding: 60px; }
}

/* ----------------------------------------------------- Uitleg werkwijze */
/* Figma "04 / Uitleg werkwijze": mist band over the top 830 of a 972 section
   (full 1920 wide), copy 522 at x=135, photo field 645 at x=810. */
.rw-uitleg { position: relative; }

.rw-uitleg__band {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: var(--rw-vw);
	max-width: none;
	height: 830px;
	background: var(--rw-mist);
	z-index: 0;
}

.rw-uitleg__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 135px 522px 153px 645px 1fr;
	align-items: start;
	gap: 0;
}

/* Same 32px drop the copy has against the photo field in Waarom and the FAQ. */
.rw-uitleg__text { grid-column: 2; margin-top: 32px; }
.rw-uitleg__media { grid-column: 4; position: relative; }

.rw-uitleg__text .rw-checks { margin-top: 19px; }
.rw-uitleg__text .wp-block-buttons { margin-top: 42px; }

@media (max-width: 1280px) {
	.rw-uitleg__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
	.rw-uitleg__text { grid-column: 1; margin-top: 0; }
	.rw-uitleg__media { grid-column: 2; }
	.rw-uitleg__band { height: 100%; }
}

/* --------------------------------------------------------- Processtappen */
/* Figma "05 / Processtappen": 3 columns of 510 with a 30 gap; the connector
   line sits on y=218, the vertical centre of the 62px tiles. */
.rw-steps {
	display: grid;
	grid-template-columns: repeat(3, 510px);
	gap: 30px;
	justify-content: center;
}

.rw-section__head--center + .rw-steps { margin-block-start: 74px; }

.rw-step {
	position: relative;
	text-align: center;
}

.rw-step__num {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto;
	border-radius: var(--rw-radius-sm);
	background: var(--rw-lime);
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 62px;
}

.rw-step__num--lila { background: var(--rw-lila); }

/* Line 2 runs 484..895 in frame coordinates; against a step column that starts
   at 705 that is -221 to +190. */
.rw-step + .rw-step::before {
	content: "";
	position: absolute;
	top: 31px;
	left: -221px;
	width: 411px;
	border-top: 1px solid var(--rw-line);
}

.rw-step h3 {
	font-size: 22px;
	font-weight: 600;
	line-height: 26px;
	margin: 34px 0 0;
}

.rw-step p {
	margin: 23px auto 0;
	max-width: 310px;
	font-size: 16px;
	line-height: 26px;
}

@media (max-width: 1280px) {
	.rw-steps { grid-template-columns: repeat(3, 1fr); }
	.rw-step + .rw-step::before { display: none; }
}

@media (max-width: 860px) {
	.rw-steps { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- Voor wie (Over mij) */
/* Figma "06 / Voor wie": mist panel 780x569 at x=135 with the copy inside it,
   and a 510x569 photo at x=945 dropped 123px lower. */
.rw-voorwie__grid {
	display: grid;
	grid-template-columns: 135px 780px 30px 510px 1fr;
	align-items: start;
	gap: 0;
}

.rw-voorwie__panel {
	grid-column: 2;
	background: var(--rw-mist);
	border-radius: var(--rw-radius-md);
	padding: 103px 95px 95px;
}

.rw-voorwie__panel .rw-checks { margin-top: 35px; }

.rw-voorwie__panel .wp-block-buttons { margin-top: 48px; }

.rw-voorwie__media {
	grid-column: 4;
	margin-top: 123px;
}

.rw-voorwie__media img {
	display: block;
	width: 510px;
	height: 569px;
	max-width: 100%;
	object-fit: cover;
	border-radius: var(--rw-radius-md);
	box-shadow: 0 0 50px rgba(33, 33, 33, 0.07);
}

@media (max-width: 1280px) {
	.rw-voorwie__grid { grid-template-columns: 1fr; gap: 40px; }
	.rw-voorwie__panel { grid-column: 1; padding: 60px; }
	.rw-voorwie__media { grid-column: 1; margin-top: 0; }
}

/* --------------------------------------------- In het kort (Over mij) */
/* Figma "04 / In het kort": a mist band the full 1920 wide (NOT the content
   box) with the intro column on the gutter and the card rail starting at
   x=570 and running off the right edge. */
.rw-kort { position: relative; }

.rw-kort__band {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 145px;
	width: var(--rw-vw);
	/* Constrained layout would otherwise clamp this back to 1590. */
	max-width: none;
	height: 588px;
	background: var(--rw-mist);
	z-index: 1;
}

.rw-kort__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 405px 1fr;
	align-items: start;
	gap: 0;
}

/* Label at y=305 against a grid that starts at 260. */
.rw-kort__intro {
	margin-top: 45px;
	max-width: 276px;
}

.rw-kort__intro .rw-rail-nav { margin-top: 34px; }

/* Kernwaardekaart 375x357. */
.rw-fact {
	background: #fff;
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius-md);
	box-shadow: 0 0 50px rgba(33, 33, 33, 0.07);
	padding: 55px 60px;
}

.rw-fact__icon {
	/* The glyph is a token: setting it through `mask:` in the base rule meant a
	   modifier below could still be overridden by the shorthand. */
	--rw-fact-icon: url("../icons/svc-swatchbook.svg");
	display: block;
	/* The contact card is a fixed-height flex column — without this the tile
	   shrinks instead of holding Figma's 62. */
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: var(--rw-radius-sm);
	background-color: var(--rw-lime);
	background-image: none;
	position: relative;
}

.rw-fact__icon--lila { background-color: var(--rw-lila); }

/* Contact cards each carry their own glyph; "In het kort" keeps the shared one
   (Figma genuinely repeats the same icon on all four of those). */
.rw-fact__icon--phone { --rw-fact-icon: url("../icons/phone.svg"); }
.rw-fact__icon--whatsapp { --rw-fact-icon: url("../icons/whatsapp.svg"); }
.rw-fact__icon--mail { --rw-fact-icon: url("../icons/envelope.svg"); }
.rw-fact__icon--location { --rw-fact-icon: url("../icons/location.svg"); }


.rw-fact__icon::after {
	content: "";
	position: absolute;
	inset: 19px;
	background-color: #fff;
	-webkit-mask: var(--rw-fact-icon) no-repeat center / contain;
	mask: var(--rw-fact-icon) no-repeat center / contain;
}

.rw-fact h3 {
	font-size: 22px;
	font-weight: 600;
	line-height: 26px;
	margin: 38px 0 0;
}

.rw-fact p {
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 26px;
}

@media (max-width: 1280px) {
	.rw-kort__grid { grid-template-columns: 1fr; gap: 40px; }
	.rw-kort__intro { margin-top: 0; max-width: none; }
	.rw-kort__band { top: 0; height: 100%; }
}

/* Figma "05 / Missie-uitspraak": one centred text node 1084 wide, 60/76
   regular, with a bold-italic run in the middle. */
.rw-missie__quote {
	margin: 0 auto;
	max-width: 1084px;
	text-align: center;
	font-size: 60px;
	font-weight: 400;
	line-height: 76px;
}

.rw-missie__quote em {
	font-weight: 700;
	font-style: italic;
}


/* --------------------------------------------------------- company block */
.rw-company-info--stack .rw-company-info__row + .rw-company-info__row {
	margin-top: 18px;
}

.rw-company-info--stack a,
.rw-company-info--stack span {
	color: var(--rw-ink);
	text-decoration: none;
	font-size: 16px;
	line-height: 1.625;
}

.rw-company-info--stack a:hover { color: var(--rw-orange); }

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

.rw-company-info--panel {
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius-md);
	padding: 30px;
	background: var(--rw-mist);
}

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

/* ----------------------------------------------------------------- footer */
/* Figma "09 / Footer": mist band 1920x696 with the copy inset 135 from the
   content box, then a 41px white legal bar. Columns sit at 135 / 675 / 945 /
   1215 of the content box — a 270 pitch for the three link columns. */
.rw-footer {
	/* The mist band is 696 in Figma; the seeded copy is a line or two shorter
	   than the design's text boxes, so hold the band and let it grow. */
	min-height: 696px;
	position: relative;
	overflow: hidden;
}

.rw-footer__grid {
	display: grid;
	grid-template-columns: 135px 375px 165px 270px 270px 1fr;
	align-items: start;
	gap: 0;
}

.rw-footer__grid > * + * { margin-block-start: 0; }

.rw-footer__about    { grid-column: 2; }
.rw-footer__nav-col  { grid-column: 4; }
.rw-footer__contact-col { grid-column: 5; }
.rw-footer__connect-col { grid-column: 6; }

.rw-footer__logo { display: block; line-height: 0; }

.rw-footer__heading {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 26px;
}

/* Every column starts its content 27px under the heading. Three classes deep
   on purpose: WP's own layout rule for the column is two, and wins otherwise. */
.rw-footer .rw-footer__col .rw-footer__heading + * { margin-block-start: 27px; }

.rw-footer__lead,
.rw-footer__cursora-lead {
	font-size: 16px;
	line-height: 26px;
	max-width: 375px;
}

/* Logo 317..364, lead 398, second lead 540, Cursora mark 616. */
.rw-footer__lead { margin: 34px 0 0; }
.rw-footer__cursora-lead { margin: 7px 0 0; max-width: 302px; }

.rw-footer__cursora {
	display: inline-flex;
	margin-top: 25px;
	line-height: 0;
}

.rw-footer__links,
.rw-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Figma pitches the link rows 49 apart: a 26 line plus 23. */
.rw-footer__nav a,
.rw-footer__links a {
	font-size: 16px;
	line-height: 26px;
}

/* Figma: 41px tall — one 26px line plus 8/7 padding. */
.rw-footer-bar {
	border-top: 1px solid var(--rw-line);
}

.rw-footer-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 28px;
}

.rw-footer-bar__legal,
.rw-footer-bar__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.rw-footer-bar__legal { gap: 28px; }
.rw-footer-bar__links { gap: 22px; }

.rw-footer-bar__inner span,
.rw-footer-bar__inner a {
	font-size: 12px;
	line-height: 26px;
}

.rw-footer-bar p { margin: 0; }

.rw-footer-bar a {
	color: var(--rw-ink);
	text-decoration: none;
}

.rw-footer-bar a:hover { text-decoration: underline; }

/* Big spiral bottom-right of the footer, cropped by the section. */
.rw-footer__spiral {
	position: absolute;
	right: -30px;
	bottom: -90px;
	width: 300px;
	height: 300px;
	background: url("../icons/spiraal.svg") no-repeat center / contain;
	pointer-events: none;
	z-index: 1;
}

.rw-footer > * { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
	.rw-deco--spiraal,
	.rw-footer__spiral,
	.rw-logostrip__track {
		animation: none;
	}
}

/* ------------------------------------------------------------ responsive */
/* Not designed in Figma — the source is desktop-only (1920). Behaviour below
   is our own judgement, logged in migrations/migrate-studio-sace-plan.md. */
@media (max-width: 1280px) {
	.rw-tiles { grid-template-columns: repeat(2, 1fr); }
	.rw-grid { grid-template-columns: repeat(2, 1fr); }
	.rw-paginakop__grid { grid-template-columns: 1fr 1fr; }
	.rw-hero__photo { width: 420px; }
	.rw-hero__media { min-height: 440px; }
}

@media (max-width: 980px) {
	.rw-header__right { gap: 24px; }
	.rw-railhead { flex-direction: column; align-items: flex-start; gap: 24px; }
	.rw-steps { grid-template-columns: 1fr; }
	.rw-contactgegevens { grid-template-columns: 1fr; }
	.rw-paginakop__grid { grid-template-columns: 1fr; }
	.rw-cta { padding: 40px; }
	.rw-cta__photo { display: none; }
	.rw-cta__body { max-width: none; }
	.rw-hero { padding-bottom: 60px; }
	.rw-hero__media { display: none; }
	.rw-photopair { min-height: 360px; }
}

@media (max-width: 720px) {
	.rw-tiles { grid-template-columns: 1fr; }
	.rw-grid { grid-template-columns: 1fr; }
	.rw-facts { grid-template-columns: 1fr; }
	.rw-rail > * { flex-basis: 88vw; }
	.rw-footer__cols { gap: 40px; }
	.rw-footer-bar__inner { gap: 12px; }
}

/* ------------------------------------------------------ additions in build */
/* USP row (Diensten) — same icon tile as the service cards, on one line. */
/* Figma "03 / USP-rij": a tab row, not an icon list — tile 62 on top, label
   22/26 at y=96, a 3px ink indicator under the active column on the hairline
   that runs the full 1590 at y=164. */
.rw-usprij {
	display: grid;
	/* Fluid: exactly 4x375 inside the 1590 content box, shrinking below it so the
	   row does not overflow (and clip text) between 980px and 1590px. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 30px;
	border-bottom: 1px solid var(--rw-line);
}

.rw-usp {
	text-align: center;
	padding-bottom: 42px;
	/* The tabs are <button>s driving the diensten carousel — strip the UA chrome
	   but keep them full-width grid cells so the hit area matches the label. */
	display: block;
	width: 100%;
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.rw-usp:focus-visible {
	outline: 2px solid var(--rw-orange);
	outline-offset: 4px;
}

/* Inset so the 3px indicator sits ON the hairline, not under it. */
.rw-usp.is-active { box-shadow: inset 0 -3px 0 var(--rw-ink); }

.rw-usp .rw-tile__icon { margin-inline: auto; }

.rw-usp__label {
	display: block;
	margin-top: 34px;
	font-size: 22px;
	font-weight: 600;
	line-height: 26px;
}

/* Figma "03 / Contactgegevens": four equal 375 cards on a 405 pitch, built on
   the same card as "In het kort". */
.rw-contactgegevens {
	display: grid;
	/* Fluid: exactly 4x375 inside the 1590 content box, shrinking below it so the
	   row does not overflow (and clip text) between 980px and 1590px. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 30px;
}

.rw-contactblok {
	min-height: 357px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Figma's copy box in these cards is 266 wide from the 60 left inset, so it
	   runs 13px past the shared 60px card padding (47 left on the right). With
	   the full 60 the Bellen line (265px) broke onto a second line and pushed its
	   button out of line with the others. */
	padding-right: 47px;
}

.rw-contactblok p { max-width: 266px; }

.rw-contactblok .wp-block-buttons { margin-top: 33px; }

.rw-pagination {
	gap: 8px;
}

.rw-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--rw-line);
	border-radius: var(--rw-radius-sm);
	color: var(--rw-ink);
	text-decoration: none;
}

.rw-pagination .page-numbers.current,
.rw-pagination .page-numbers:hover {
	background: var(--rw-ink);
	border-color: var(--rw-ink);
	color: #fff;
}

@media (max-width: 980px) {
	.rw-usprij { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.rw-usprij { grid-template-columns: 1fr; }
}

/* --------------------------------------------- Waarom / FAQ exact layout */
/* Both sections place a 645x579 photo field and a text column at fixed
   offsets inside the 1590 content box, so they are laid out on that grid
   rather than as percentage columns. */
.rw-waarom__grid,
.rw-faq__grid {
	display: grid;
	align-items: start;
	gap: 0;
}

/* Figma starts the copy 32px below the top of the photo field in both
   sections — centring it drifts by ~21px. */
.rw-waarom__text,
.rw-faq__body {
	margin-top: 32px;
}

/* Figma: text 522 wide at x=134, photo field 645 at x=810. */
.rw-waarom__grid {
	grid-template-columns: 134px 522px 154px 645px 1fr;
}

.rw-waarom__text { grid-column: 2; }
.rw-waarom__media { grid-column: 4; position: relative; }

/* Figma "03 / Over mij intro": mirror of Waarom — photo field 645 at x=135,
   text 536 at x=945 of the content box. */
.rw-overintro__grid {
	display: grid;
	align-items: start;
	gap: 0;
	grid-template-columns: 135px 645px 165px 536px 1fr;
}

.rw-overintro__media { grid-column: 2; position: relative; }

/* Figma puts the label at y=74 while the photo field starts at y=0. */
.rw-overintro__text {
	grid-column: 4;
	margin-top: 74px;
}

/* Figma: photo field at x=0, accordion 778 wide at x=811. */
.rw-faq__grid {
	grid-template-columns: 645px 166px 778px 1fr;
}

.rw-faq__media { grid-column: 1; position: relative; }
.rw-faq__body { grid-column: 3; }

.rw-faq__list { margin-top: 21px; }

.rw-waarom__badge { left: -55px; bottom: 8%; }
.rw-faq__badge { left: 13%; bottom: -8%; }

@media (max-width: 1280px) {
	.rw-overintro__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
	.rw-overintro__media { grid-column: 1; }
	.rw-overintro__text { grid-column: 2; margin-top: 0; }
	.rw-waarom__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
	.rw-waarom__text { grid-column: 1; }
	.rw-waarom__media { grid-column: 2; }
	.rw-faq__grid { grid-template-columns: 1fr 1fr; gap: 60px; }
	.rw-faq__media { grid-column: 1; }
	.rw-faq__body { grid-column: 2; }
}

@media (max-width: 980px) {
	.rw-overintro__grid { grid-template-columns: 1fr; gap: 40px; }
	.rw-overintro__media,
	.rw-overintro__text { grid-column: 1; }
	.rw-waarom__grid,
	.rw-faq__grid { grid-template-columns: 1fr; gap: 40px; }
	.rw-waarom__text,
	.rw-waarom__media,
	.rw-faq__media,
	.rw-faq__body { grid-column: 1; }
}

/* ------------------------------------------------- stijlelementen (deco) */
/* One element per Figma node, positioned on the 1590 content box. Kept as real
   DOM nodes rather than pseudo-elements so they can be counted against the
   design — see /design-check "stijlelementen-telling". */
.rw-deco-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	/* Absolutely positioned, but WP's block gap still shifts it via margin-block.
	   Only the block axis may be zeroed: margin-inline:auto is what keeps the
	   layer on the content box, which is what ornament coordinates are relative to. */
	margin-block: 0 !important;
}

/* Figma's child order decides whether an ornament sits under or over the
   content. Never leave this to source order alone. */
.rw-deco-layer--behind { z-index: 0; }
.rw-deco-layer--front { z-index: 3; }

.rw-deco-layer > .rw-deco {
	position: absolute;
}

/* .rw-layer marks every out-of-flow decorative child (deco layers, the
   paginakop background, the "In het kort" band). They are out of flow, but WP
   still counts them as siblings and puts a block-gap margin on what follows. */
/* `.rw-deco` is in the same boat: it is always position:absolute, but WP still
   counts it as a flow sibling. The header seal is written as the first child of
   the header, which handed .rw-header__bar a 24px block gap and made the header
   124 tall instead of the board's 99 — shifting every page down by 24px. */
.rw-layer + *,
.rw-deco + * {
	margin-block-start: 0 !important;
}

.rw-section {
	position: relative;
}

.rw-deco--fotokader {
	background: #fff;
}

/* The grid/text of a section must sit above its ornament layer. */
.rw-waarom__grid,
.rw-faq__grid,
.rw-railwrap,
.rw-overintro__grid,
.rw-voorwie__grid,
.rw-wwintro__grid,
.rw-steps,
.rw-footer__grid {
	position: relative;
	z-index: 2;
}

/* ==================================================================== mobile
   Figma only ships the 1920 desktop board, so everything below is our own
   responsive judgement rather than a design reference.

   Two things make this need a dedicated tail rather than edits in place:

   1. The geometry above is authored as fixed px against the 1590 content box
      (fixed grid tracks, fixed card and photo sizes, ornaments on absolute
      coordinates). Those values are right at the design width and only need
      replacing below it — so they are overridden here, inside media queries,
      and the desktop cascade is left exactly as it was.
   2. Several base rules further up already sit *after* the older responsive
      blocks (`.rw-contactgegevens`, `.rw-usprij`), so they silently beat them
      at equal specificity. Putting the mobile rules last is what makes them
      apply at all.

   Breakpoints: 1280, 980 (columns collapse, ornaments off, hamburger), 720
   (phone), 480 (small phone). The decisions themselves are written up in
   migrations/migrate-studio-sace-plan.md section 8.

   WHY 1280 AND NOT 1589 — this bit us on every page but the homepage.
   scale.js zoom-scales the whole 1920 canvas onto any viewport between its
   FLOOR (1280) and 1920, so a 1440px laptop is *meant* to show the untouched
   design at 75%. Media queries, however, always evaluate against the REAL
   viewport, never the scaled canvas — so a `max-width: 1589px` block still
   fired at 1440 and collapsed two-column sections (Waarom Diensten, Over mij
   intro, Werkwijze intro, Voor wie, Uitleg, Projecttekst, …) on top of a
   canvas that had plenty of room. The result was a hybrid that matched
   neither the design nor the reflow.
   The reflow tail must therefore start exactly where scaling stops: 1280.
   If scale.js's FLOOR ever changes, these blocks have to move with it.
   ------------------------------------------------------------------------ */

@media (max-width: 1280px) {
	/* The sections carry no horizontal padding: at the design width their
	   1590px contentSize centres inside a 1920 viewport and *is* Figma's 165
	   gutter. Below 1590 that max-width stops binding, so every band runs
	   edge-to-edge — the copy touches the screen. The gutter preset is what
	   the header, footer and rails already inset by, so the sections take it
	   too as soon as the contentSize stops doing the job. Above 1590 nothing
	   changes: the rule does not apply. */
	.rw-section { padding-inline: var(--wp--preset--spacing--gutter); }

	/* With the gutter back, the content box is narrower than the 1590 the
	   fixed Figma tracks are cut for — which is why the section grids above
	   collapse at this same breakpoint. These three are the tracks that are
	   still authored in px down here. */
	.rw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.rw-usprij,
	.rw-contactgegevens {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Photo fields are Figma frame sizes too. A `1fr` track's implicit minimum
	   is min-content, so from here down the fixed image is what sizes its
	   column: it overflows the grid and drags the document scroll with it.
	   Ratio-locked and fluid, the track sizes to the copy instead. */
	.rw-photopair { width: 100%; }

	/* core/post-featured-image writes Figma's 340 crop as an inline height on
	   both the figure and the image, so the card's own `aspect-ratio` never
	   gets a say once the card is narrower than the 510 it was cut for. */
	.rw-card .wp-block-post-featured-image,
	.rw-card .wp-block-post-featured-image img { height: auto !important; }

	/* Stacked, the fixed Figma photos would balloon to the full content width.
	   Cap them at their design size and centre them so they stay in proportion. */
	.rw-wdiensten__media img {
		width: 100%;
		max-width: 645px;
		height: auto;
		aspect-ratio: 645 / 647;
		margin-inline: auto;
	}

	.rw-wwintro__media img,
	.rw-voorwie__media img {
		width: 100%;
		max-width: 510px;
		height: auto;
		aspect-ratio: 510 / 569;
		margin-inline: auto;
	}

	/* A grid item's automatic minimum size is its min-content, which for a
	   ratio-locked image or a fixed-inset panel is still the Figma frame — so
	   the item, not the track, sizes the column. `min-width: 0` hands that
	   back to the track. */
	.rw-waarom__grid > *,
	.rw-faq__grid > *,
	.rw-overintro__grid > *,
	.rw-voorwie__grid > *,
	.rw-wwintro__grid > *,
	.rw-wdiensten__grid > *,
	.rw-uitleg__grid > *,
	.rw-projecttekst__grid > *,
	.rw-kort__grid > *,
	.rw-grid > *,
	.rw-tiles > *,
	.rw-steps > *,
	.rw-usprij > *,
	.rw-contactgegevens > *,
	.rw-footer__grid > * {
		min-width: 0;
	}

	/* The footer's three link columns sit on a fixed 270 pitch inside 1590,
	   with 135/165 spacer tracks. Below the design width the pitch has to give
	   before the last column does. */
	.rw-footer__grid {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		gap: 40px;
	}

	.rw-footer__about { grid-column: 1; }
	.rw-footer__nav-col { grid-column: 2; }
	.rw-footer__contact-col { grid-column: 3; }
	.rw-footer__connect-col { grid-column: 4; }
}

@media (max-width: 1280px) {
	/* Bands are drawn at the Figma height of the stack they sit behind. Once
	   that stack reflows they have to track it instead of holding 1088px. */
	.rw-reviews__band { height: 100%; }

	/* Restated after the reflow-tail rule above, which would otherwise win. */
	.rw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* This rail is pinned beside the intro column with a right margin computed
	   from 50vw; below the design width that arithmetic turns positive and
	   collapses the rail. Fall back to the normal full-bleed rail. */
	.rw-rail--kort {
		width: var(--rw-vw);
		margin-left: calc(50% - var(--rw-50vw));
		margin-right: 0;
		padding-left: var(--wp--preset--spacing--gutter);
		scroll-padding-inline: var(--wp--preset--spacing--gutter) 0;
	}
}

@media (max-width: 980px) {
	/* ------------------------------------------------------------ ornaments */
	/* Spirals, badges and photo frames are placed on the 1590 box; below it
	   they drift off the layout, and they are what actually makes the document
	   scroll sideways. They are aria-hidden decoration, so they come off. */
	.rw-deco-layer,
	.rw-deco,
	.rw-footer__spiral {
		display: none;
	}

	/* ---------------------------------------------------------------- type */
	/* Figma's leading is px against a fixed ramp; the ramp is fluid in
	   theme.json, so below the design width the leading has to be a ratio or
	   the lines drift apart exactly as the type gets smaller. */
	.wp-site-blocks :is(h2, h3) { line-height: 1.25; }

	.rw-tekstblok h2,
	.rw-railhead__text h2,
	.rw-cta h2 {
		font-size: var(--wp--preset--font-size--h-3);
		line-height: 1.25;
	}

	/* The 29px offset exists to land a hard-broken title on Figma's baselines;
	   once the breaks go (720 below) it is just a gap. */
	.rw-tekstblok h2.rw-title--tight {
		line-height: 1.25;
		padding-top: 0;
	}

	.rw-missie__quote {
		font-size: clamp(24px, 6.4vw, 44px);
		line-height: 1.27;
	}

	.rw-hero__intro { font-size: 18px; margin-bottom: 24px; }

	/* The 360px floor stood in for a height while the pair was a fixed 645
	   wide. Now that it is fluid, its own 645/579 ratio supplies the height —
	   and the floor is a 401px min-*width* that blows the column open. */
	.rw-photopair { min-height: 0; }

	/* --------------------------------------------------------------- header */
	.rw-header__bar { gap: 16px; }
	.rw-header__right { gap: 16px; }

	/* core/navigation's "mobile" overlay switches at 600px, but five links plus
	   the CTA stop fitting the bar around 900. Raising the switch to this
	   file's own collapse breakpoint is a pair of overrides on core's own
	   min-width:600 rules — the button and the inline list swap roles. */
	.rw-nav .wp-block-navigation__responsive-container-open { display: flex; }

	.rw-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/* The overlay itself is core's; it only needs the site's type and a target
	   the thumb can actually hit. */
	.rw-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 24px var(--wp--preset--spacing--gutter);
	}

	/* The bar's nav is right-justified, and core hands that same justification
	   to the overlay's cross axis — which stacks the menu against the right
	   bezel. Full-screen, it reads from the left like the rest of the site. */
	.rw-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.rw-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		gap: 4px;
		width: 100%;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.rw-nav .wp-block-navigation__responsive-container.is-menu-open a {
		font-size: 22px;
		font-weight: 600;
		line-height: 1.2;
		padding: 12px 0;
	}

	/* ----------------------------------------------------------------- hero */
	/* The 728px mist band and the portrait's absolute placement are both
	   Figma-box geometry. The band becomes the whole hero, and the decoration
	   layer becomes a normal block under the copy — the order swap is why the
	   hero switches to flex. */
	.rw-hero {
		background: var(--rw-mist);
		display: flex;
		flex-direction: column;
		padding-top: 40px;
		padding-bottom: 0;
	}

	/* WP's constrained layout puts `margin-inline: auto` on every child, and an
	   auto cross-axis margin opts a flex item out of `stretch` — so without
	   this the copy and the photo shrink to fit their own text. */
	.rw-hero > * { width: 100%; }

	.rw-hero__text { order: 1; }

	.rw-hero__deco {
		order: 2;
		position: static;
		transform: none;
		width: 100%;
		max-width: 420px;
		height: auto;
		margin: 40px auto 0;
	}

	.rw-hero__deco > * { position: static; }

	.rw-hero__photo {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.rw-hero h1 { max-width: none; }

	/* -------------------------------------------------------------- section */
	/* Figma's vertical rhythm is authored inline per section, up to 291px —
	   most of a phone viewport. Inline styles can only be capped with
	   !important; the attribute selectors keep the deliberate zeros at zero
	   and leave the CTA wrapper (a spacer, not a band) alone. */
	.rw-section[style*="padding-top"]:not([style*="padding-top:0"]):not(.rw-ctawrap) {
		padding-top: 80px !important;
	}

	.rw-section[style*="padding-bottom"]:not([style*="padding-bottom:0"]) {
		padding-bottom: 80px !important;
	}

	.rw-section__head--center + * { margin-block-start: 48px; }
	.rw-railhead { margin-bottom: 40px; }

	/* ------------------------------------------------------------ paginakop */
	/* Figma splits the header into a 1110 mist plane and an 810 photo side by
	   side. Stacked, the plane is just a band behind the copy — so it becomes
	   the section's own background and the photo ends the band, the same shape
	   the hero takes. Ordering is why the section turns into a flex column:
	   the background layer is written before the copy in the markup.

	   The existing 980 rule above leaves both layers static, which paints the
	   absolutely-positioned mist plane over the (now in-flow) photo. */
	.rw-kop,
	.rw-kop--tall {
		display: flex;
		flex-direction: column;
		min-height: 0;
		background: var(--rw-mist);
	}

	/* Same auto-margin/stretch interaction as the hero above. */
	.rw-kop > * { width: 100%; }

	.rw-kop__text { order: 1; }
	.rw-kop__mist { display: none; }

	.rw-kop__bg {
		order: 2;
		margin-top: 40px;
	}

	.rw-kop__photo { height: 220px; margin-top: 0; }
	.rw-kop__text h1 { max-width: none; }
	.rw-kop__intro { max-width: none; margin-top: 24px; }

	/* ---------------------------------------------------------------- rails */
	/* Figma's cards are a fixed 546 tall because their copy is fixed too. At
	   phone measure the copy wraps further, so the row sizes itself and
	   stretch keeps the cards level with each other. */
	.rw-rail {
		--rw-rail-card-h: auto;
		align-items: stretch;
	}

	/* Figma runs the reviews off both edges of a 1920 board, so this rail has
	   no left inset. On a phone that puts a card against the bezel; it takes
	   the same gutter every other rail already starts on. */
	.rw-rail--reviews {
		padding-left: var(--wp--preset--spacing--gutter);
		padding-right: 0;
		scroll-padding-inline: var(--wp--preset--spacing--gutter) 0;
	}

	/* The centred carousel is a desktop-board layout; stacked, cards start on
	   the gutter like every other rail (mobile board 06/Reviews). */
	.rw-rail--reviews > * { scroll-snap-align: start; }

	/* ------------------------------------------------------ one-column grids */
	.rw-projecttekst__grid,
	.rw-uitleg__grid,
	.rw-grid,
	.rw-contactgegevens,
	.rw-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.rw-projecttekst__body,
	.rw-projecttekst__media,
	.rw-uitleg__text,
	.rw-uitleg__media,
	.rw-footer__about,
	.rw-footer__nav-col,
	.rw-footer__contact-col,
	.rw-footer__connect-col {
		grid-column: 1;
	}

	.rw-projecttekst__grid,
	.rw-uitleg__grid { gap: 40px; }

	/* Figma sizes the portfolio card to its frame; below the design width the
	   card has to size to its own copy. */
	.rw-grid { gap: 30px; }
	.rw-grid > * { height: auto; }

	.rw-contactgegevens { gap: 20px; }
	.rw-contactblok { height: auto; }
	.rw-contactblok p { width: auto; }

	/* ------------------------------------------------------------------ CTA */
	/* The band is 200px taller than the flow it occupies so it can hang over
	   the footer's mist. Reflowed copy makes that overhang unpredictable, so
	   the CTA goes back in flow and the footer drops its clearance padding. */
	.rw-ctawrap { height: auto; }

	.rw-cta {
		width: auto;
		min-height: 0;
		padding: 40px 32px;
	}

	.rw-cta h2,
	.rw-cta__lead { max-width: none; }

	.rw-cta__media { display: none; }

	/* --------------------------------------------------------------- footer */
	.rw-footer {
		/* 317px of clearance for a CTA that no longer overhangs. */
		padding-top: 64px !important;
		min-height: 0;
	}

	.rw-footer__grid { gap: 40px; }
	.rw-footer__lead,
	.rw-footer__cursora-lead { max-width: none; }
}

@media (max-width: 720px) {
	/* Figma hard-breaks its headings and leads to land on the design's
	   baselines. At phone measure those breaks fall mid-phrase, so the copy
	   wraps naturally instead. */
	.rw-hero h1 br,
	.rw-kop__text h1 br,
	.rw-kop__intro br,
	.rw-tekstblok h2 br,
	.rw-tekstblok p br,
	.rw-cta h2 br,
	.rw-cta__lead br,
	.rw-lead br,
	.rw-missie__quote br {
		display: none;
	}

	/* ---------------------------------------------------------------- bands */
	.rw-section[style*="padding-top"]:not([style*="padding-top:0"]):not(.rw-ctawrap) {
		padding-top: 56px !important;
	}

	.rw-section[style*="padding-bottom"]:not([style*="padding-bottom:0"]) {
		padding-bottom: 56px !important;
	}

	.rw-section__head--center + * { margin-block-start: 36px; }
	.rw-tekstblok .wp-block-buttons { margin-top: 26px; }

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

	/* -------------------------------------------------- boxes: Figma insets */
	/* Every inset below is measured from a 375-510px wide frame. On a 375px
	   *screen* the same number is most of the line, so they all step down to
	   one shared phone inset. */
	.rw-tile {
		padding: 32px 24px;
		min-height: 0;
	}

	.rw-tiles { gap: 20px; }
	.rw-tile__title { margin-top: 28px; }

	/* Without the fixed card height, margin-top:auto collapses and "Lees meer"
	   sits right under the last check. The board keeps the card's uniform 16px
	   gap there, so restore it as a real margin. */
	.rw-tile__more { margin-top: 16px; }

	.rw-card__body { padding: 0 24px 28px; }
	.rw-card__body > .rw-card__title { margin-top: 28px; }

	.rw-card--review { padding: 32px 24px; }

	.rw-fact { padding: 32px 24px; }
	.rw-fact h3 { margin-top: 26px; }

	.rw-wdiensten__panel,
	.rw-wwintro__panel,
	.rw-voorwie__panel,
	.rw-resultaten__panel { padding: 32px 24px; }

	.rw-cta { padding: 32px 24px; }

	/* The 245px minimum is a Figma button width, not a content minimum. */
	.rw-cta__btns .wp-block-button__link { min-width: 0; }

	.rw-faq .wp-block-details { padding: 22px 20px; }
	.rw-faq .wp-block-details > *:not(summary) { max-width: none; }

	/* ----------------------------------------------------------------- misc */
	.rw-logostrip { padding: 28px 0; }
	.rw-logostrip img { max-height: 40px; margin-right: 44px; }

	.rw-step p { max-width: none; }

	.rw-resultaten__review { margin-top: 28px; }
}

@media (max-width: 480px) {
	/* Logo + burger + CTA fit on one 375px bar only once the button stops
	   holding its desktop inset. */
	.rw-logo img { width: 96px; height: 40px; }
	.rw-header__bar,
	.rw-header__right { gap: 12px; }

	.rw-header__cta .wp-block-button__link {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* nowrap is what keeps a desktop button on one line; at this measure it is
	   what pushes it off the screen. */
	.wp-block-button__link { white-space: normal; }

	.rw-checks--hero li { margin-right: 0; }
	.rw-crumbs { flex-wrap: wrap; }
}

/* Carousel dots are a phone-only affordance; the JS injects them on every
   width, so they are hidden by default and only revealed in the mobile block. */
.rw-dots { display: none; }

/* ============================================== mobile design (Figma 390)
   The client added a dedicated "Homepage / Mobiel 390" board. The rules below
   align the stacked layout with that board; they sit last so they win over the
   earlier, judgement-based responsive tail.

   Two breakpoints, on purpose:

   980 — the width at which this theme ALREADY collapses to one column (nav
         becomes a burger, every section grid goes 1fr, ornaments come off). Every
         decision on the board that is about *what* is shown and in what order —
         alignment, section order, which ornaments, the logo strip, the carousel
         affordance — belongs to that whole stacked range. Pinning them lower
         leaves a 600-980 band that still shows the old desktop treatment.
   600 — genuinely narrow-phone sizing: the board's 24px gutter and its
         full-width buttons. Stretching those to a 900px column reads badly, so
         they stay on phones.
   ---------------------------------------------------------------------- */
@media (max-width: 980px) {
	/* --- header: logo + burger only, no inline CTA (board 01/Header).
	   !important beats core's .wp-block-buttons.is-layout-flex display. --- */
	.rw-header__cta { display: none !important; }

	/* --- section heads: Diensten and Reviews centre their eyebrow/title/lead on
	   the desktop board; the mobile board left-aligns them, like every other
	   section once the layout is stacked.
	   Both groups are core "constrained" layouts, and that layout emits
	   `margin-left/right: auto !important` (plus a max-width) on every direct
	   child. The eyebrow is a `width: fit-content` box, so those auto margins —
	   not text-align or justify-content — are what centre it. Beating them takes
	   !important on the same longhands. --- */
	.rw-section__head--center {
		text-align: left;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.rw-section__head--center .rw-eyebrow {
		justify-content: flex-start;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* core's .wp-block-heading.has-text-align-center (0,2,0) out-specifies a plain
	   descendant selector, so force it. */
	.rw-section__head--center h2,
	.rw-section__head--center p {
		text-align: left !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none !important;
	}

	/* --- head rhythm: the mobile board's "Sectiekop" stacks eyebrow/title/
	   subtitle with a uniform 15px gap. On the site these heads carried desktop-
	   tuned offsets that read far too tight once stacked: the centred heads had
	   the title's -3px bottom (title & subtitle almost touching) and the portfolio
	   railhead had 0. Reset the vertical margins and let a flex gap own the
	   spacing, so all three section heads breathe like the board. --- */
	.rw-section__head--center,
	.rw-railhead__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}
	.rw-section__head--center > *,
	.rw-railhead__text > * {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* --- section rhythm: the hero and the diensten band both carry a Figma
	   desktop padding of 0 on the seam between them (they butt together on the
	   1920 board). Stacked, that glues the hero photo to the diensten eyebrow.
	   The board gives diensten a 56px top; restore it. The inline padding-top:0
	   makes !important necessary. --- */
	.rw-hero + .rw-section { padding-top: 56px !important; }

	/* Diensten cards sit 24px apart on the board and carry a touch more room. */
	.rw-tiles { gap: 24px; }
	.rw-tile { padding: 40px 28px; }

	/* --- hero portrait: board 02/Hero has a 16px auto-layout gap and the photo's
	   own frame adds a 30px top padding — 46px under the buttons.
	   Same first-child trap as the CTA portrait: .rw-hero__deco is the FIRST
	   child in the markup (it only drops below the copy via `order`), so core's
	   `:where(body .is-layout-flow) > *:first-child { margin-block-start: 0 }`
	   ties with the tablet tail's `.rw-hero__deco` rule and zeroes its margin.
	   The child combinator breaks the tie. --- */
	.rw-hero > .rw-hero__deco { margin-top: 46px; }

	/* --- decorative stamps (board 02/Hero) ---
	   The ≤980 tail hides every ornament because they are laid out on the 1590
	   content box and drift once stacked. The mobile board keeps three: the
	   orange header seal, a lime seal by the checklist and a lilac seal on the
	   photo. Re-show just those and re-anchor them. The big "Studio Sace" spiral
	   is NOT on the mobile board, so it stays hidden.
	   `.wp-site-blocks{overflow-x:clip}` crops any overhang, so no side-scroll. */
	/* The desktop rule anchors this to the 1590 box with `top`; on a phone it is
	   centred on the header band instead, so both of those have to be undone. */
	.rw-header .rw-header__stamp {
		display: block;
		left: 46%;
		top: auto;
		bottom: -22px;
		transform: translateX(-50%);
		width: 44px;
		height: 44px;
	}

	/* The badges live inside .rw-hero__deco (the photo box), which is static
	   here — so absolute badges anchor to .rw-hero (position:relative). Percent
	   tops place them against the section: ~checklist and ~photo top. */
	.rw-hero__deco > .rw-hero__badge1,
	.rw-hero__deco > .rw-hero__badge2 {
		display: block;
		position: absolute;
		width: 34px;
		height: 34px;
	}
	.rw-hero__deco > .rw-hero__badge2 { /* lime — right, by the checklist */
		left: auto;
		right: 18px;
		top: 43%;
	}
	.rw-hero__deco > .rw-hero__badge1 { /* lilac — left, on the photo */
		left: 10px;
		top: 64%;
	}

	/* --- portfolio + reviews rails: card(s) → dots → button, no prev/next
	   arrows (boards 04/Portfolio, 06/Reviews). Scoped with :has to the two
	   rails that carry dots, so the project-page rails are untouched. */
	.rw-railwrap:has(.rw-rail--dots) { display: flex; flex-direction: column; }
	.rw-railwrap:has(.rw-rail--dots) .rw-railhead { display: contents; }
	.rw-railwrap:has(.rw-rail--dots) .rw-railhead__text { order: 1; }
	/* The rail carries a -60px top margin (shadow clearance) that pulls its cards
	   flush against the section head. Give the head->cards seam the board's 24px
	   section gap back by trimming that negative margin (bottom shadow clearance
	   is untouched). */
	.rw-railwrap:has(.rw-rail--dots) .rw-rail {
		order: 2;
		margin-top: calc(24px - var(--rw-rail-bleed));
	}
	.rw-railwrap:has(.rw-rail--dots) .rw-dots { order: 3; }
	.rw-railwrap:has(.rw-rail--dots) .rw-railhead__tools {
		order: 4;
		width: 100%;
		margin-top: 24px !important;
	}
	.rw-railhead__tools .rw-rail-nav { display: none; }

	/* Carousel dots — hidden above this breakpoint (see .rw-dots base rule). */
	.rw-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
	.rw-dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(33, 33, 33, 0.2);
		cursor: pointer;
		transition: background-color 0.15s ease;
	}
	.rw-dot.is-active { background: var(--rw-orange); }

	/* --- FAQ: accordion above the photo (board 07/FAQ). The grid is already a
	   single 1fr column here; grid honours `order`, so reorder with that rather
	   than switching to flex — flex + the shared `align-items:start` collapses
	   the photo field to zero width. --- */
	.rw-faq__body { order: 1; margin-top: 0; }
	.rw-faq__media { order: 2; }

	/* --- CTA: portrait shown below the button (board 08/CTA). hero-lisa ships
	   without baked-in badges, so the cover patches are dropped. Capped and
	   centred here; the phone block below bleeds it to the band edges. --- */
	.rw-cta {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding-bottom: 0;
	}
	.rw-cta__body { order: 1; }
	.rw-cta__btns { order: 2; }
	/* Board: the block's auto-layout gap is 16 and the photo's own frame adds a
	   30px top padding — 46px between the button and the portrait. The photo
	   frame is 286 inside a 342 block, i.e. it sits INSIDE the block padding
	   rather than bleeding to its edges.
	   The child combinator is load-bearing: .rw-cta__media is the FIRST child in
	   the markup (it only moves to the end visually, via `order`), so core's
	   `:where(body .is-layout-flow) > *:first-child { margin-block-start: 0 }`
	   ties on specificity and would otherwise zero this margin out. */
	.rw-cta > .rw-cta__media {
		order: 3;
		display: block;
		position: static;
		width: 100%;
		max-width: 420px;
		margin: 46px auto 0;
	}
	.rw-cta__photo { width: 100%; height: auto; max-width: none; display: block; }
	.rw-cta__patch { display: none; }

	/* --- logostrip: same as desktop — a WHITE band below the grey reviews
	   section (not inside it), with the faded-grey logos. The mobile board drew
	   it on the mist ground, but per the client that was a design slip; it should
	   sit outside the grey box like desktop.
	   The reviews band is height:100% on mobile, so it fills the section to the
	   very bottom and the logos ended up touching the grey edge. Desktop keeps
	   ~106px of white between the band and the logos; the section's inline
	   padding-top:0 zeroes the strip's own top padding, so add it back (with
	   importance to beat the inline style) for that separation. */
	.rw-logostrip { padding-top: 56px !important; }

	/* --- footer: Kennismaken above LinkedIn (board 09/Footer) --- */
	.rw-footer__btns .rw-btn-linkedin { order: 2; }
}

@media (max-width: 600px) {
	/* The board insets every section 24px; the fluid gutter is ~33px at 390.
	   Override the token on <body> (with importance) so it also reaches the
	   header/footer/rail paddings that are written as inline styles. */
	body { --wp--preset--spacing--gutter: 24px !important; }

	/* --- hero: checks stacked, both buttons full-width (board 02/Hero) --- */
	.rw-checks--hero { flex-direction: column; gap: 8px; }
	.rw-checks--hero li { margin-right: 0; }

	.rw-hero__btns { flex-direction: column; align-items: stretch; }
	.rw-hero__btns .wp-block-button,
	.rw-hero__btns .wp-block-button__link { width: 100%; justify-content: center; }

	/* --- rail CTA full-width under the dots --- */
	.rw-railwrap:has(.rw-rail--dots) .rw-railhead__tools { justify-content: stretch; }
	.rw-railhead__tools .wp-block-buttons { width: 100%; }
	.rw-railhead__tools .wp-block-button,
	.rw-railhead__tools .wp-block-button__link { width: 100%; justify-content: center; }

	/* --- CTA: board insets the block 28px and runs the button full-width. The
	   portrait stays within that inset (no bleed) and its bottom meets the
	   block's bottom edge, which carries no padding. --- */
	.rw-cta { padding: 32px 28px 0; }
	.rw-cta__btns { display: flex; }
	.rw-cta__btns .wp-block-button,
	.rw-cta__btns .wp-block-button__link { width: 100%; justify-content: center; }

	/* The orange band runs over the footer's grey. Rather than move the block
	   (which made the footer content overlap the photo at wider phones), paint the
	   grey directly behind the photo as a section background: white behind the
	   copy, mist from ~the photo's top edge (≈360 from the section top) down. That
	   mist meets the footer's mist band seamlessly right below, so the orange sits
	   on one continuous grey field while the block and footer stay in normal flow
	   — the footer content can never overlap the photo. */
	.rw-section.rw-ctawrap {
		background: linear-gradient(to bottom, #fff 0 360px, var(--rw-mist) 360px);
	}

	/* --- footer: full-width buttons (board 09/Footer) --- */
	.rw-footer__btns { align-items: stretch; }
	.rw-footer__btns .wp-block-button,
	.rw-footer__btns .wp-block-button__link { width: 100%; justify-content: center; }
}