/* Stuurmaat — base + section styles. Tokens live in tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
	margin: 0;
	background: var(--sm-lightblue);
	color: var(--sm-navy);
	font-family: var(--sm-font-body);
	font-size: 20px;
	line-height: 1.4;
	/* Belt-and-braces against the intro arrow's scale-up (assets/js/
	   intro-reveal.js): at 50x its own size it can momentarily exceed
	   100% width around its own transform-origin, which would otherwise
	   open up horizontal scroll on the whole page. */
	overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }

/* Animated-underline utility for plain text links (footer, FAQ, body
   copy) — grows in from the left on hover instead of a static underline. */
.u-link {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.35s ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.u-link:is(:hover, :focus-visible) { background-size: 100% 1px; }
}

.container { max-width: var(--sm-container); margin-inline: auto; }

section[id] { scroll-margin-top: 120px; }

/* Standard text pages, such as the privacy policy. */
.standard-page {
	width: min(900px, calc(100% - 2 * var(--sm-gutter)));
	margin: 0 auto;
	padding: 160px 0 96px;
	text-align: left;
}
.standard-page__title {
	margin-bottom: 32px;
	font-family: var(--sm-font-display);
	font-size: var(--sm-text-3xl);
	line-height: 1.05;
}
.standard-page__content {
	font-size: 20px;
	line-height: 1.55;
}
.standard-page__content > * + * { margin-top: 24px; }
.standard-page__content h2,
.standard-page__content h3 {
	font-family: var(--sm-font-display);
	line-height: 1.15;
}
.standard-page__content h2 { font-size: 36px; }
.standard-page__content h3 { font-size: 28px; }
.standard-page__content ul { padding-left: 1.25em; list-style: disc; }

/* ------------------------------------------------------------------ *
 * Site nav
 * ------------------------------------------------------------------ */
.site-nav {
	position: fixed;
	/* Figma node 301:203: the floating navigation sits 38px below the
	   viewport edge. Keeping this on the containing fixed element also
	   preserves the compact/contact state transitions in section-dock.js. */
	top: 38px;
	left: 0;
	right: 0;
	z-index: 200;
	display: flex;
	justify-content: center;
	padding-inline: var(--sm-gutter);
}
.site-nav__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 64px;
	background: var(--sm-nav-bg);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid var(--sm-nav-border);
	border-radius: var(--sm-radius);
	padding: 4px 4px 4px 16px;
	min-height: 62px;
	transition: gap 0.65s cubic-bezier(0.22, 1, 0.36, 1), min-height 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav__default {
	display: flex;
	align-items: center;
	gap: 32px;
}
.site-nav__logo {
	display: block;
	width: 182px;
	height: 37px;
	position: relative;
	flex-shrink: 0;
	transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav__logo img { height: 37px; width: auto; }
.site-nav__logo-full,
.site-nav__logo-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.55s;
}
.site-nav__logo-icon { opacity: 0; visibility: hidden; transform: translateX(-8px) scale(0.88); }
.site-nav__logo-icon img { width: 23px; height: auto; }

.site-nav__links {
	display: flex;
	align-items: center;
	gap: 16px;
}
.site-nav__mobile-contact { display: none; }
.site-nav__mobile-services { display: none; }
.site-nav__link {
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	height: 100%;
	padding: 8px 16px;
	border-radius: var(--sm-radius-sm);
	text-decoration: none;
	font-weight: 500;
	color: var(--sm-navy);
}
.site-nav__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #F0EFFF;
	border-radius: inherit;
	opacity: 0;
	scale: 0.94;
	transition: opacity 0.25s ease, scale 0.55s 0.05s cubic-bezier(0.625, 0.05, 0, 1);
}
.site-nav__link:first-child::before,
.site-nav__link:is(:hover, :focus-visible)::before { opacity: 1; scale: 1; }
/* When the services menu owns the active state, do not leave "Over ons"
   highlighted at the same time. */
.site-nav:has(.section-dock--nav:is(:hover, :focus-within, .is-open)) .site-nav__link:first-child::before {
	opacity: 0;
	scale: 0.94;
}
.site-nav__link-text {
	position: relative;
	z-index: 1;
	display: inline-block;
	clip-path: inset(0);
}
.site-nav__link-text > span {
	display: inline-block;
	text-shadow: 0 1.3em currentColor;
	transition: translate 0.6s calc(var(--index) * 0.015s) cubic-bezier(0.625, 0.05, 0, 1);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.site-nav__link:is(:hover, :focus-visible) .site-nav__link-text > span {
		translate: 0 -1.3em;
		transition-delay: calc(var(--index) * 0.015s + 0.05s);
	}
}

.site-nav__cta .button-038 { font-size: 16px; }

/* Keep anchor targets clear of the fixed floating header. */
#over-ons,
#wat-we-doen,
#team,
#faq { scroll-margin-top: 120px; }

/* Contact bar — matches the Figma "Property1=Variant4" nav state and the
   grutdesigners.nl reference: clicking "contact" swaps out the whole nav
   bar's content for the logo/social/email/whatsapp/phone bar, in place.
   Deliberately NOT absolutely-positioned/cross-faded: this content can
   wrap onto a second line on narrow viewports, and an absolutely
   positioned bar (sized to match the closed .site-nav__default row)
   clipped/overlapped the wrapped row instead of growing to fit it. Plain
   display toggling lets the bar grow with its content instead. */
.site-nav__contact-bar {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding: 4px;
}
.site-nav__bar.is-contact-open .site-nav__default { display: none; }
.site-nav__bar.is-contact-open .site-nav__contact-bar { display: flex; }

.site-nav__contact-logo { display: flex; height: 54px; align-items: center; padding: 0 8px; }
.site-nav__contact-logo img { width: 20px; height: auto; }

/* Figma contact-nav controls share one 54px hit area. The component buttons
   otherwise size themselves from text padding, so fix the outer control
   height here without changing Button 038 outside this nav. */
.site-nav__contact-bar .button-038 { height: 54px; }
.site-nav__contact-bar .button-038__inner { padding-block: 0; }

/* Keep the LinkedIn control visibly distinct from the surrounding contact
   bar: it is a square icon button, not a narrow vertical pill. */
.site-nav__contact-pill--icon {
	display: flex;
	width: 54px;
	height: 54px;
	align-items: center;
	justify-content: center;
	background: var(--sm-nav-active);
	color: var(--sm-navy);
	border: 1px solid var(--sm-purple);
	border-radius: 0;
	text-decoration: none;
	font-weight: 700;
	font-size: 18px;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.site-nav__contact-pill--icon:is(:hover, :focus-visible) { background: var(--sm-purple); color: var(--sm-white); }

.button-038__icon.is-white { filter: brightness(0) invert(1); }

.site-nav__contact-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	background: var(--sm-purple);
	border: none;
	border-radius: var(--sm-radius-sm);
	cursor: pointer;
}
.site-nav__contact-close img { width: 16px; height: auto; }

.site-nav__burger { display: none; }

/* Scrolled state: bar compacts, full wordmark swaps for the icon mark. */
.site-nav.is-scrolled .site-nav__bar { gap: 16px; }
.site-nav.is-scrolled .site-nav__logo { width: 23px; }
.site-nav.is-scrolled .site-nav__logo-full { opacity: 0; visibility: hidden; transform: translateX(8px) scale(0.96); }
.site-nav.is-scrolled .site-nav__logo-icon { opacity: 1; visibility: visible; transform: translateX(0) scale(1); transition-delay: 0s; }
.site-nav.is-scrolled .site-nav__link:not(:first-child) { background: transparent; }

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */
.hero {
	position: relative;
	/* The Figma header is 920px at its design size, but should never be
	   taller than the available laptop viewport. */
	padding: 0 var(--sm-gutter) 0 0;
	height: min(920px, 100svh);
	min-height: 0;
	overflow: clip;
	display: flex;
	align-items: center;
}
.hero__text {
	max-width: 875px;
	flex-shrink: 0;
	padding-left: var(--sm-gutter);
	/* Clears the fixed nav — the photo bleeds up behind it instead. */
	padding-top: min(220px, 24svh);
	position: relative;
	z-index: 2;
}
.hero__heading {
	font-family: var(--sm-font-display);
	font-weight: 800;
	font-size: var(--sm-text-4xl);
	line-height: 1.1;
	letter-spacing: -1.4px;
	margin-bottom: 24px;
}
.hero__sub { font-size: var(--sm-text-lg); line-height: 1.45; max-width: 480px; }
.hero__sub p { margin: 0; }

.hero__badges {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 40px;
}
.hero__badge {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--sm-white);
	padding: 8px 8px 8px 16px;
	border-radius: var(--sm-radius-sm);
	font-weight: 500;
	white-space: nowrap;
	width: fit-content;
	animation: sm-float 5s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.4s);
}
.hero__badge:nth-child(1) { margin-left: 0; }
.hero__badge:nth-child(2) { margin-left: 88px; }
.hero__badge:nth-child(3) { margin-left: 32px; }
.hero__badge-icon { width: 12px; height: auto; }

.hero__photo-wrap {
	/* Bleeds to the top of the page (behind the fixed nav) and to the
	   viewport's right edge, rather than sitting inside .hero's padding. */
	position: absolute;
	top: 0;
	right: calc(-1 * var(--sm-gutter));
	height: 100%;
	aspect-ratio: 756 / 920;
	max-width: 756px;
	z-index: 1;
	transform-origin: 72% 46%;
	animation: sm-hero-photo-enter 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__photo {
	width: 100%;
	height: 100%;
	-webkit-mask-image: url('../img/hero-photo-mask.svg');
	mask-image: url('../img/hero-photo-mask.svg');
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* A restrained entrance gives the header image a little life without
   competing with the headline: it settles from a 10° clockwise turn. */
@keyframes sm-hero-photo-enter {
	from { opacity: 0; transform: rotate(10deg) scale(1.035); }
	to { opacity: 1; transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.hero__photo-wrap { animation: none; }
}

/* Exact purple vector exported from the Figma header. It deliberately
   overhangs the upper-left edge of the section. */
.hero__corner-arrow {
	position: absolute;
	left: calc(50% - 698px);
	top: -146px;
	/* The 428px Figma frame is the rotated bounding box. The source vector
	   itself is 210.66px wide; using the frame width here made it twice as
	   large as the design. */
	width: 210.66px;
	height: auto;
	transform: translateX(-50%) rotate(42.86deg);
	transform-origin: center;
	pointer-events: none;
	z-index: 0;
}

@keyframes sm-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

/* ------------------------------------------------------------------ *
 * Logos
 * ------------------------------------------------------------------ */
.logos {
	position: relative;
	background: var(--sm-purple);
	padding: 64px var(--sm-gutter);
	overflow: clip;
}
.logos__inner { display: flex; flex-direction: column; gap: 64px; }
.logos__kicker {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 500;
	font-size: var(--sm-text-md);
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(229, 245, 255, 0.4);
}
.logos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.logos__slot {
	position: relative;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.logos__img {
	position: absolute;
	inset: 0;
	margin: auto;
	max-height: 42px;
	width: auto;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.logos__img.is-active { opacity: 1; }

/* Follows the cursor within .logos (assets/js/logo-rotator.js sets x/y via
   GSAP on mousemove) — top/left:0 is the JS positioning origin, it always
   overrides these with an actual cursor-relative offset. */
.logos__hover-cta {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s;
	pointer-events: none;
	will-change: transform;
}
.logos:hover .logos__hover-cta,
.logos:focus-within .logos__hover-cta {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.logos:hover .logos__grid,
.logos:focus-within .logos__grid { opacity: 0.5; }
.logos__grid { transition: opacity 0.35s ease; }

/* ------------------------------------------------------------------ *
 * Intro + arrow
 * ------------------------------------------------------------------ */
.intro {
	position: relative;
	/* The growing arrow must stay above the incoming blue panel until its
	   own animation completes; otherwise the panel clips it at its top edge. */
	z-index: 2;
	min-height: 130vh;
	padding: 128px var(--sm-gutter) 48px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 40px;
	text-align: center;
}
.intro__heading {
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: var(--sm-text-3xl);
	line-height: 1.1;
	max-width: 640px;
}
/* Kept at a fixed footprint at rest — the growing icon inside is
   position:absolute (out of flow), so its growth never reflows the
   heading or the rest of the page. */
.intro__arrow {
	position: relative;
	/* Use the complete content width as the positioning frame, so the
	   animated SVG's `left: 50%` is always the exact horizontal centre of
	   the section rather than the centre of a small flex item. */
	align-self: stretch;
	width: 100%;
	height: 60px;
}
/* Absolute (not relative+transform:scale) so growth is driven by actual
   width/height instead of a CSS transform — an SVG re-renders its vector
   paths crisply at any *layout* size, but a browser rasterizes it once at
   its small on-screen size and stretches that bitmap when the growth is
   done with `scale()` instead, which is what was going soft/blurry. Top
   stays pinned at the wrapper's own top edge and grows straight down
   (assets/js/intro-reveal.js sets width/height, not scale) — a low
   z-index (below .compare__grid/__photo, see below) is what makes that
   growth read as happening *behind* the page's real content, the photo
   and the text, rather than needing to become a seamless fill itself. */
.intro__arrow-icon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
	display: block;
}

/* ------------------------------------------------------------------ *
 * Compare (blue full-width section)
 * ------------------------------------------------------------------ */
/* Full viewport width from the start now — the reveal-into-view moment
   is the arrow's scale-up in .intro (assets/js/intro-reveal.js), not a
   width/radius unfold on this section's own box. */
.compare {
	position: relative;
	--compare-photo-overlap: 120px;
	/* Explicit z-index (not just position:relative) so this section —
	   background included — reliably paints above the fixed, growing
	   .intro__arrow-icon (z-index:0) once it scrolls into view, rather
	   than leaving that an accident of DOM/stacking order. */
	z-index: 1;
	/* Background and photo are intentionally separate reveal layers: the
	   panel fades in first and the already-overlapping masked photo is then
	   uncovered from top to bottom. */
	background: transparent;
	color: var(--sm-white);
	width: 100%;
	/* Let the opaque next panel meet the arrow early. Its higher stacking
	   context then covers the SVG, so the arrow runs behind this panel. */
	/* Start lower so the blue-arrow reveal has more vertical travel before
	   this opaque panel takes over the viewport. */
	margin-top: -480px;
	/* Not clipped: .compare__photo deliberately breaks out above this
	   section's own top edge, and clipping here would cut that off. */
	overflow: visible;
	padding: 160px 0 96px;
}
.compare__background {
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--sm-darkblue);
	pointer-events: none;
}
.compare__pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.07), transparent 45%);
	pointer-events: none;
}

/* No position/z-index of its own on purpose: .compare__photo's
   `position:absolute` still resolves against .compare itself (the
   nearest *positioned* ancestor — a plain static wrapper is skipped),
   and .compare__grid's z-index still compares against .compare__pattern
   /the accordion exactly as if this wrapper weren't here. It exists
   purely as a single opacity target (assets/js/intro-reveal.js) so the
   photo and both text columns fade in together as one block. Starts
   fully visible in plain CSS (no-JS / reduced-motion fallback) — JS
   (assets/js/intro-reveal.js) is what drops it to 0 before animating it
   back in, only once it's actually going to run that animation. */
.compare__content { opacity: 1; }

/* Breaks out above .compare's own top edge (negative `top`, not just
   flush with it) so the photo reads as falling over the section boundary
   from the lighter section above — masked with the shape supplied by the
   user (compare-photo-mask.svg, native 775:825). z-index above both the
   section's background and .compare__pattern so it's never hidden behind
   them where it overlaps the section above. */
.compare__photo {
	position: absolute;
	z-index: 2;
	left: 0;
	top: calc(-1 * var(--compare-photo-overlap));
	width: min(45%, 570px);
	aspect-ratio: 775 / 825;
	-webkit-mask-image: url('../img/compare-photo-mask.svg');
	mask-image: url('../img/compare-photo-mask.svg');
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.compare__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Named "45/10/45" in Figma: the statement columns and the arrow between
   them split the row exactly that way. Each column keeps its own Figma
   alignment (left: bottom, under the photo; right: top) rather than both
   being vertically centered — see .compare__col--left/--right below. */
.compare__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 45fr 10fr 45fr;
	min-height: 600px;
	gap: 48px;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--sm-gutter);
}
.compare__col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-size: 20px;
	line-height: 1.4;
}
/* Vertical offsets specified in the desktop Figma annotation: the right
   statement sits 300px into the blue field; the left follows its photo
   boundary with 220px of breathing room. */
.compare__col--left { text-align: left; justify-content: flex-end; margin-top: 220px; }
.compare__col--right { text-align: left; justify-content: flex-start; margin-top: 0; }
.compare__col p { margin-bottom: 1em; }
.compare__col p:last-child { margin-bottom: 0; }

.compare__arrow {
	/* The arrow keeps its final, crisp dimensions in the layout. The blurred
	   layer below scales far beyond this box, so it reads as a background
	   graphic while the copy remains legible above it. */
	position: relative;
	z-index: 0;
	width: 76px;
	height: 145px;
	aspect-ratio: 65 / 124;
	transform: rotate(-220deg);
	flex-shrink: 0;
	align-self: center;
	justify-self: center;
}
.compare__col { position: relative; z-index: 1; }
.compare__arrow img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.compare__arrow-blur {
	/* Initial state: this one arrow is deliberately oversized and diffuse.
	   scroll-effects.js shrinks and sharpens that same asset to scale(1). */
	filter: blur(25px);
	opacity: 0.3;
	transform: scale(9);
	will-change: transform, opacity, filter;
}

/* ------------------------------------------------------------------ *
 * Accordion (diensten)
 * ------------------------------------------------------------------ */
.accordion {
	position: relative;
	display: grid;
	grid-template-columns: minmax(280px, 480px) minmax(320px, 560px);
	gap: 96px;
	max-width: 1280px;
	/* Figma annotation: preserve 256px breathing room between the intro
	   copy and the services block, where the left list becomes sticky. */
	margin: 256px auto 0;
	padding-inline: var(--sm-gutter);
}
.accordion__list {
	position: sticky;
	top: 140px;
	align-self: start;
	display: flex;
	flex-direction: column;
}
.accordion__nav-item {
	display: block;
	padding-bottom: 20px;
	margin-bottom: 32px;
	border-bottom: 2px solid var(--sm-white);
	font-family: var(--sm-font-display);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.3;
	color: var(--sm-white);
	text-decoration: none;
	opacity: 0.5;
	transition: opacity 0.4s ease;
}
.accordion__nav-item[data-active] { opacity: 1; }

.accordion__cards {
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding-bottom: 15vh;
}
.accordion__card {
	/* Service anchors must clear the fixed nav and its open dropdown. */
	scroll-margin-top: 200px;
	border-radius: var(--sm-radius);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--sm-navy);
	will-change: transform, opacity;
}
.accordion__card--light { background: var(--sm-lightblue); }
.accordion__card--green { background: var(--sm-green); color: var(--sm-white); }
.accordion__kicker {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 500;
	font-size: 16px;
}
.accordion__title {
	font-family: var(--sm-font-display);
	font-weight: 600;
	font-size: var(--sm-text-2xl);
	line-height: 1.1;
}
.accordion__price { font-weight: 500; font-size: var(--sm-text-md); }
.accordion__price-intro,
.accordion__items-outro { font-size: var(--sm-text-md); line-height: 1.4; }
.accordion__price-intro p,
.accordion__items-outro p { margin: 0; }
.accordion__items { display: flex; flex-direction: column; gap: 8px; }
.accordion__items li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 16px;
	background: rgba(5, 33, 56, 0.1);
	font-weight: 500;
	font-size: var(--sm-text-md);
}
.accordion__card--green .accordion__items li { background: var(--sm-white); color: var(--sm-navy); }
.accordion__item-icon { width: 14px; height: auto; }
/* The service-card CTAs sit on the right edge in the design. The light
   cards use Stuurmaat green and keep their underline visible at rest. */
.accordion__card > .button-038,
.accordion__card > .button-038--tail {
	align-self: flex-end;
	margin-top: auto;
}
.accordion__card--light .button-038--underline .button-038__text {
	background-size: 100% 2px;
}

/* ------------------------------------------------------------------ *
 * Contrast (niet/wel)
 * ------------------------------------------------------------------ */
.contrast {
	position: relative;
	z-index: 2;
	/* The photo deliberately overlaps the services section; the copy and
	   comparison cards begin lower so the composition has breathing room. */
	padding: 208px var(--sm-gutter) 128px;
	overflow: visible;
}
.contrast__photo {
	position: absolute;
	z-index: 1;
	left: 0;
	top: -190px;
	width: min(43.513vw, 657.923px);
	height: 701px;
	aspect-ratio: 61 / 65;
	overflow: hidden;
	-webkit-mask: url('../img/compare-photo-mask.svg') center / 100% 100% no-repeat;
	mask: url('../img/compare-photo-mask.svg') center / 100% 100% no-repeat;
	pointer-events: none;
}
.contrast__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.contrast__inner {
	position: relative;
	z-index: 2;
	width: min(796px, calc(100vw - (2 * var(--sm-gutter))));
	margin-left: auto;
	margin-right: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.contrast__heading {
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: var(--sm-text-3xl);
	line-height: 1.1;
	text-align: left;
}
.contrast__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: var(--sm-radius);
	padding: 8px;
}
.contrast__col {
	border-radius: var(--sm-radius-sm);
	padding: 48px 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.contrast__col--not { background: var(--sm-white); }
.contrast__col--yes { background: var(--sm-green); color: var(--sm-white); }
.contrast__col-title {
	font-family: var(--sm-font-display);
	font-weight: 600;
	font-size: var(--sm-text-2xl);
	line-height: 1.1;
}
.contrast__items { display: flex; flex-direction: column; }

.contrast__item {
	border-bottom: 1px solid rgba(131, 135, 235, 1);
}

.contrast__col--yes .contrast__item { border-bottom-color: rgba(229, 245, 255, 0.6); }

.contrast__item-toggle {
	appearance: none;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 14px;
	align-items: center;
	gap: 10px;
	padding: 12px 8px 12px 16px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	font-size: var(--sm-text-md);
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.contrast__item-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -3px;
}

.contrast__item-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 280ms ease;
	font-size: 16px;
	line-height: 1.45;
	font-weight: 400;
}

.contrast__item-body > div { overflow: hidden; padding: 0 24px 0 16px; }
.contrast__item-body p { margin: 0; }
.contrast__item.is-open .contrast__item-body { grid-template-rows: 1fr; }
.contrast__item.is-open .contrast__item-body > div { padding-bottom: 16px; }
.contrast__item-icon {
	width: 14px;
	height: 23px;
	margin-left: auto;
	flex-shrink: 0;
	background-color: #8387eb;
	-webkit-mask: url('../img/icon-check-alt.svg') center / contain no-repeat;
	mask: url('../img/icon-check-alt.svg') center / contain no-repeat;
}
.contrast__item-icon--toggle {
	transition: transform 280ms ease, background-color 280ms ease;
}
/* The source motif faces right; a quarter turn makes the active state point down. */
.contrast__item.is-open .contrast__item-icon--toggle { transform: rotate(90deg); }
.contrast__col--not .contrast__item.is-open .contrast__item-icon { background-color: var(--sm-navy); }
.contrast__col--yes .contrast__item-icon {
	background-color: rgba(5, 33, 56, 0.3);
	-webkit-mask-image: url('../img/icon-check.svg');
	mask-image: url('../img/icon-check.svg');
}
.contrast__col--yes .contrast__item.is-open .contrast__item-icon { background-color: var(--sm-white); }
.contrast__cta { align-self: flex-end; }

/* ------------------------------------------------------------------ *
 * Testimonials
 * ------------------------------------------------------------------ */
.testimonials {
	position: relative;
	/* A calm centre stage with testimonials floating around it. */
	min-height: clamp(900px, 68vw, 1220px);
	padding: 0 var(--sm-gutter);
	overflow: hidden;
	display: grid;
	place-items: center;
}
.testimonials__heading {
	position: relative;
	z-index: 2;
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: var(--sm-text-3xl);
	line-height: 1.1;
	text-align: center;
	max-width: 780px;
	margin: 0;
}
.testimonials__wall {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.testimonials__card {
	position: absolute;
	width: clamp(272px, 20vw, 390px);
	background: var(--sm-white);
	border: 1px solid rgba(5, 33, 56, 0.2);
	border-radius: var(--sm-radius);
	padding: clamp(18px, 1.25vw, 28px);
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.3vw, 24px);
	opacity: 0;
	--testimonial-pointer-x: 0px;
	--testimonial-pointer-y: 0px;
	--testimonial-scroll-x: 0px;
	--testimonial-scroll-y: 0px;
	--testimonial-x: calc(var(--testimonial-pointer-x) + var(--testimonial-scroll-x));
	--testimonial-y: calc(var(--testimonial-pointer-y) + var(--testimonial-scroll-y));
	will-change: transform, opacity;
	transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
	transition-delay: var(--testimonial-delay, 0ms);
}
.testimonials__card:nth-child(1) { top: 3%; left: 50%; transform: translate(calc(-50% + var(--testimonial-x)), calc(-72px + var(--testimonial-y))) scale(0.8); }
.testimonials__card:nth-child(2) { top: 37%; left: 5%; transform: translate(calc(-88px + var(--testimonial-x)), calc(24px + var(--testimonial-y))) scale(0.8); }
.testimonials__card:nth-child(3) { bottom: 4%; left: 50%; transform: translate(calc(-50% + var(--testimonial-x)), calc(72px + var(--testimonial-y))) scale(0.8); }
.testimonials__card:nth-child(4) { top: 39%; right: 5%; transform: translate(calc(88px + var(--testimonial-x)), calc(24px + var(--testimonial-y))) scale(0.8); }
.testimonials.is-visible .testimonials__card { opacity: 1; }
.testimonials.is-visible .testimonials__card:nth-child(1),
.testimonials.is-visible .testimonials__card:nth-child(3) { transform: translate(calc(-50% + var(--testimonial-x)), var(--testimonial-y)) scale(1); }
.testimonials.is-visible .testimonials__card:nth-child(2),
.testimonials.is-visible .testimonials__card:nth-child(4) { transform: translate(var(--testimonial-x), var(--testimonial-y)) scale(1); }
.testimonials__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.testimonials__card-person { display: flex; flex-direction: column; gap: 3px; font-size: clamp(16px, 1.1vw, 20px); }
.testimonials__card-photo { width: clamp(56px, 4.2vw, 84px); height: clamp(56px, 4.2vw, 84px); border-radius: var(--sm-radius-sm); object-fit: cover; flex-shrink: 0; }
.testimonials__card-quote { font-size: clamp(16px, 1.05vw, 20px); line-height: 1.4; }
.testimonials__card-quote p { margin: 0; }

/* ------------------------------------------------------------------ *
 * About
 * ------------------------------------------------------------------ */
.about {
	padding: 0 0 64px var(--sm-gutter);
	display: grid;
	grid-template-columns: minmax(0, 653px) minmax(0, 1fr);
	gap: 0;
	align-items: start;
	overflow: hidden;
}
.about__text { padding-top: 256px; position: relative; z-index: 1; }
.about__heading {
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: var(--sm-text-3xl);
	line-height: 1.1;
	margin-bottom: 32px;
	max-width: 556px;
}
.about__body { width: 100%; margin-left: 64px; font-size: var(--sm-text-lg); line-height: 1.46; max-width: 589px; }
.about__body p + p { margin-top: 1em; }
.about__visual { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.about__photo {
	width: min(100%, 773px);
	height: 825px;
	margin-bottom: -64px;
	overflow: hidden;
	-webkit-mask: url('../img/compare-photo-mask.svg') center / 100% 100% no-repeat;
	mask: url('../img/compare-photo-mask.svg') center / 100% 100% no-repeat;
	transform: scaleX(-1);
}
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transform: scaleX(-1); }
.about__join {
	position: relative;
	z-index: 1;
	width: min(515px, calc(100% - 64px));
	margin-right: 64px;
	padding: 64px 32px;
	border-radius: var(--sm-radius-sm);
	background: var(--sm-purple);
	color: var(--sm-white);
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.about__join-copy { display: flex; flex-direction: column; gap: 16px; }
.about__join h3 { font-family: var(--sm-font-display); font-size: var(--sm-text-xl); line-height: 1.1; font-weight: 600; }
.about__join p { font-size: var(--sm-text-md); line-height: 1.6; }
.about__join-body p { margin: 0; }

/* ------------------------------------------------------------------ *
 * Blog / insights
 * ------------------------------------------------------------------ */
.blog {
	padding: 144px var(--sm-gutter);
	background: var(--sm-lightblue);
}
.blog__head,
.blog__grid,
.blog__cta {
	width: min(100%, var(--sm-container));
	margin-inline: auto;
}
.blog__head {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
	gap: clamp(40px, 8vw, 160px);
	align-items: end;
	margin-bottom: 56px;
}
.blog__eyebrow,
.blog__category {
	margin: 0 0 12px;
	color: var(--sm-green);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}
.blog__heading {
	max-width: 750px;
	font-family: var(--sm-font-display);
	font-size: clamp(44px, 5vw, 84px);
	font-weight: 600;
	letter-spacing: -0.055em;
	line-height: 0.98;
}
.blog__intro { max-width: 430px; font-size: 20px; line-height: 1.45; }
.blog__intro p { margin: 0; }
.blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.blog__card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;
	border: 1px solid var(--sm-nav-border);
	border-radius: var(--sm-radius);
	background: var(--sm-white);
	color: var(--sm-navy);
	text-decoration: none;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog__card:is(a):is(:hover, :focus-visible) { transform: translateY(-8px); }
.blog__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sm-purple); }
.blog__card--2 .blog__media { background: var(--sm-green); }
.blog__card--3 .blog__media { background: var(--sm-navy); }
.blog__media img { width: 100%; height: 100%; object-fit: cover; }
.blog__media img[aria-hidden="true"] { position: absolute; bottom: -18%; right: -7%; width: 58%; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; }
.blog__card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px; }
.blog__card h3 { margin: 0; font-family: var(--sm-font-display); font-size: clamp(25px, 2vw, 34px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.03; }
.blog__card-copy > p:not(.blog__category),
.blog__excerpt { margin: 18px 0 24px; font-size: 18px; line-height: 1.5; }
.blog__excerpt { max-height: 4.5em; overflow: hidden; }
.blog__excerpt p { margin: 0; }
.blog__read { margin-top: auto; color: var(--sm-green); font-weight: 700; }
.blog__read span { display: inline-block; margin-left: 8px; transition: transform 0.3s ease; }
.blog__card:is(a):is(:hover, :focus-visible) .blog__read span { transform: translateX(5px); }
.blog__cta { margin-top: 40px; text-align: right; }

/* ------------------------------------------------------------------ *
 * News article
 * ------------------------------------------------------------------ */
.post-single { background: var(--sm-lightblue); color: var(--sm-navy); }
.post-single__hero {
	position: relative;
	min-height: 487px;
	background: var(--sm-purple);
	overflow: hidden;
}
.post-single__hero-inner {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 487px;
	padding-left: var(--sm-gutter);
}
.post-single__intro { position: relative; z-index: 1; width: min(40vw, 540px); }
.post-single__title {
	margin: 0;
	font-family: var(--sm-font-display);
	color: var(--sm-white);
	font-size: 58.67px;
	font-weight: 700;
	letter-spacing: -0.045em;
	line-height: 1.1;
}
.post-single__featured-image {
	position: absolute;
	top: 0;
	right: 0;
	width: min(51.5vw, 777px);
	height: 487px;
	margin: 0;
	overflow: hidden;
	background: var(--sm-purple);
	-webkit-mask: url('../img/post-feature-mask.svg') center / 100% 100% no-repeat;
	mask: url('../img/post-feature-mask.svg') center / 100% 100% no-repeat;
	transform: scaleX(-1);
}
.post-single__featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scaleX(-1); }
.post-single__mobile-vector { display: none; }
.post-single__body-card {
	position: relative;
	z-index: 2;
	width: min(900px, calc(100% - 2 * var(--sm-gutter)));
	margin: -52px auto 0;
	padding: 0;
	border-radius: var(--sm-radius-sm);
	background: transparent;
}
.post-single__body-card-inner { padding: 64px 32px; border-radius: var(--sm-radius-sm); background: var(--sm-white); }
.post-single__content { font-size: 18.71px; line-height: 30px; }
.post-single__content > :first-child { margin-top: 0; }
.post-single__content > :last-child { margin-bottom: 0; }
.post-single__related { width: min(900px, calc(100% - 2 * var(--sm-gutter))); margin: 96px auto 128px; }
.post-single__related-title { margin: 0 0 16px; font-family: var(--sm-font-display); font-size: 24.67px; font-weight: 600; line-height: 1.3; }
.post-single__related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.post-single__related-card { overflow: hidden; border: 1px solid var(--sm-nav-border); border-radius: var(--sm-radius-sm); background: var(--sm-white); color: var(--sm-navy); text-decoration: none; transition: transform 0.25s ease; }
.post-single__related-card:is(:hover, :focus-visible) { transform: translateY(-4px); }
.post-single__related-media { aspect-ratio: 447 / 293; background: var(--sm-lightblue); }
.post-single__related-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-single__related-card h3 { margin: 16px 16px 8px; font-family: var(--sm-font-display); font-size: 22px; font-weight: 600; line-height: 1.12; }
.post-single__related-card > span { display: block; margin: 0 16px 16px; color: var(--sm-green); font-size: 15px; font-weight: 700; }
.post-single__related-card > span b { display: inline-block; margin-left: 5px; transition: transform 0.25s ease; }
.post-single__related-card:is(:hover, :focus-visible) > span b { transform: translateX(4px); }

/* All news / insights ------------------------------------------------ */
.insights-archive { min-height: 70vh; padding: 164px var(--sm-gutter) 120px; background: var(--sm-lightblue); }
.insights-archive__head,
.insights-archive__grid,
.insights-archive__pagination,
.insights-archive__empty { width: min(100%, var(--sm-container)); margin-inline: auto; }
.insights-archive__head { margin-bottom: 56px; }
.insights-archive__title { max-width: 840px; margin: 0; font-family: var(--sm-font-display); font-size: clamp(48px, 5vw, 84px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.98; }
.insights-archive__intro { max-width: 580px; margin-top: 24px; font-size: 20px; line-height: 1.45; }
.insights-archive__intro p { margin: 0; }
.insights-archive__pagination { margin-top: 48px; font-weight: 600; }
.insights-archive__pagination .nav-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.insights-archive__pagination a,
.insights-archive__pagination .current { display: inline-flex; min-width: 42px; min-height: 42px; align-items: center; justify-content: center; padding: 8px 14px; border-radius: var(--sm-radius-sm); text-decoration: none; }
.insights-archive__pagination a { color: var(--sm-navy); background: var(--sm-white); }
.insights-archive__pagination .current { color: var(--sm-white); background: var(--sm-darkblue); }
.insights-archive__empty { font-size: 20px; }

/* ------------------------------------------------------------------ *
 * CTA - "Tijd om het financiële roer om te gooien" (green)
 * ------------------------------------------------------------------ */
.cta-roer {
	position: relative;
	overflow: clip;
	margin: 64px var(--sm-gutter);
	border-radius: var(--sm-radius);
	background: var(--sm-green);
	color: var(--sm-white);
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cta-roer__pattern {
	position: absolute;
	left: 0;
	top: 0;
	width: 45%;
	height: 100%;
	opacity: 0.5;
	pointer-events: none;
}
.cta-roer__pattern img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.cta-roer__inner {
	position: relative;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	text-align: center;
	padding: 64px var(--sm-gutter);
}
.cta-roer__heading {
	font-family: var(--sm-font-display);
	font-weight: 700;
	font-size: var(--sm-text-3xl);
	line-height: 1.1;
}
.cta-roer__body { font-size: 20px; line-height: 1.45; margin-top: 32px; }
.cta-roer__body p { margin: 0; }
.cta-roer__actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; }

/* ------------------------------------------------------------------ *
 * FAQ + closing CTA
 * ------------------------------------------------------------------ */
/* Sizing/spacing here matches the Figma node (322:1716 "FAQ") exactly,
   pulled via get_design_context — heading, question list and closing CTA
   all live in one 714px column ("FAQQ"), gap 64px between the three. */
.faq { padding: 64px 0; }

/* Matches .faq__cta-shape's own ratio: a floor height so the "Heb je een
   andere vraag?" content (absolutely positioned below, pinned to the
   shape's point) always has room, while .faq__list — normal flow — can
   still push the stack taller when an accordion answer opens. */
.faq__stack { position: relative; width: 100%; aspect-ratio: 1512 / 1200; }
/* The purple/wave shape is a background layer sized to fill .faq__stack
   (i.e. however tall the cards + closing CTA turn out to be), rather than
   a fixed aspect-ratio — so it always starts at the very top card and
   always reaches down to and past the closing CTA, regardless of how
   many FAQ answers happen to be open. The Figma frame itself has no
   background on this block — it sits in front of a shape behind it. */
.faq__cta-shape {
	/* Fixed to its own aspect ratio (the SVG's native 1512:1200) instead of
	   inset:0 — an accordion answer opening/closing changes .faq__stack's
	   content height, and stretching this to match warped the shape every
	   time. It now sits pinned to the top of the stack at a constant size
	   regardless of accordion state. */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1512 / 1200;
	background-color: var(--sm-purple);
	-webkit-mask-image: url('../img/faq-cta-bg.svg');
	mask-image: url('../img/faq-cta-bg.svg');
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* width (not padding) so the 714px from Figma is the card's actual
   rendered width — padding-inline here would eat into that 714px budget
   instead of adding screen-edge margin outside it. min() keeps a gutter
   margin only once the viewport gets narrower than 714px + 2 gutters. */
.faq__col {
	position: relative;
	z-index: 1;
	width: min(714px, 100% - 2 * var(--sm-gutter));
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
}
.faq__heading {
	font-family: var(--sm-font-display);
	font-weight: 600;
	font-size: 38.67px;
	line-height: 1.1;
	text-align: center;
	width: min(714px, 100% - 2 * var(--sm-gutter));
	margin: 0 auto 64px;
}

.faq__list { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.faq__item { background: var(--sm-white); border-radius: var(--sm-radius); padding: 32px; }
.faq__question {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--sm-font-display);
	font-weight: 600;
	font-size: 24.67px;
	line-height: 1.3;
	color: var(--sm-navy);
}
.faq__chevron { position: relative; width: 29.48px; height: 17.6px; flex-shrink: 0; }
.faq__chevron-icon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.faq__chevron-icon--open { opacity: 0; transform: rotate(180deg); }
.faq__item.is-open .faq__chevron-icon--open { opacity: 1; }
.faq__item.is-open .faq__chevron-icon--closed { opacity: 0; }
.faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { overflow: hidden; }
.faq__answer-inner p {
	font-size: 20px;
	line-height: 30px;
	color: var(--sm-navy);
	padding-top: 24px;
}
.faq__answer-inner p:empty { display: none; }

/* Pinned to the shape's point (bottom-center of the fixed aspect-ratio
   box) via position:absolute — so it stays put at that point regardless
   of how tall .faq__list (normal flow, above it) currently is when an
   accordion answer is open vs. closed. */
/* inset:0 makes this cover the whole stack (down to the point) so its
   content can be pinned to the bottom via justify-content — but that
   means its empty upper area sits right over the FAQ cards. pointer-events:
   none here (re-enabled on the actual clickable content below) stops that
   invisible area from swallowing clicks meant for the cards underneath. */
.faq__cta-content {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	color: var(--sm-white);
	padding: 0 var(--sm-gutter) 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 32px;
	text-align: center;
	pointer-events: none;
}
.faq__cta-text { display: flex; flex-direction: column; gap: 16px; max-width: 544px; pointer-events: auto; }
.faq__cta-heading {
	font-family: var(--sm-font-display);
	font-weight: 600;
	font-size: 38.67px;
	line-height: 1.1;
}
.faq__cta-body { font-size: 20px; line-height: 1.4; }
.faq__cta-body p { margin: 0; }
.faq__cta-actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; pointer-events: auto; }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.site-footer {
	padding: 64px var(--sm-gutter) 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	color: var(--sm-navy);
	font-size: 16px;
	text-align: center;
}
.site-footer__brand {
	font-family: var(--sm-font-display);
	font-weight: 800;
	font-size: 70px;
	letter-spacing: -1.4px;
}
.site-footer__row {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: var(--sm-container);
	font-weight: 500;
	flex-wrap: wrap;
	gap: 8px;
}
.site-footer__row a { text-decoration: none; }

/* Cookie consent ---------------------------------------------------- */
.cookie-consent {
	position: fixed;
	inset: auto 24px 24px;
	z-index: 1000;
	margin: 0;
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__panel {
	width: min(680px, 100%);
	margin-left: auto;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	padding: 24px;
	border: 1px solid var(--sm-purple);
	border-radius: var(--sm-radius);
	background: var(--sm-lightblue);
	color: var(--sm-navy);
}
.cookie-consent__mark {
	width: 40px;
	aspect-ratio: 1;
	background: var(--sm-purple);
	clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%, 26% 50%);
}
.cookie-consent__content h2 {
	margin: 0 0 6px;
	font-family: var(--sm-font-display);
	font-size: 22px;
	line-height: 1.1;
}
.cookie-consent__content p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.45;
}
.cookie-consent__content a { font-size: 14px; font-weight: 600; }
.cookie-consent__actions { display: flex; flex-direction: column; gap: 8px; }
.cookie-consent__button {
	min-width: 160px;
	border: 1px solid var(--sm-green);
	border-radius: 0;
	padding: 11px 14px;
	background: var(--sm-green);
	color: var(--sm-white);
	font: 600 15px/1.2 var(--sm-font-body);
	cursor: pointer;
}
.cookie-consent__button--secondary {
	border-color: var(--sm-navy);
	background: transparent;
	color: var(--sm-navy);
}
.cookie-consent__button:hover,
.cookie-consent__button:focus-visible { filter: brightness(.92); }

/* Keep the outer footer credits close to the viewport edge, while the
 * legal links remain precisely centred underneath the Stuurmaat wordmark. */
@media (min-width: 1001px) {
	.site-footer { padding-inline: 64px; }
	.site-footer__row {
		max-width: none;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	.site-footer__row > :first-child { justify-self: start; }
	.site-footer__row > :nth-child(2) { justify-self: center; }
	.site-footer__credit { justify-self: end; }
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
.site-nav__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}
.site-nav__burger span {
	display: block;
	height: 2px;
	background: var(--sm-navy);
	border-radius: 1px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.site-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* CTA refinement applies to every desktop and laptop layout. */
@media (min-width: 801px) {
	.cta-roer__inner { max-width: 880px; gap: 0; }
	.cta-roer__heading { margin-bottom: 16px; }
	.cta-roer__body { margin: 0 0 64px; }
}

/* Extra-wide desktop -------------------------------------------------
 * Keep the Figma-sized laptop composition intact. On wide external
 * displays, however, the fixed-size visual elements left too much open
 * space between the copy and the imagery. These rules only start above
 * 1900px, where that additional scale has room to breathe. */
@media (min-width: 1901px) {
	.hero { height: min(1040px, 100svh); }
	.hero__text {
		max-width: 980px;
		padding-top: min(96px, 10svh);
		padding-left: clamp(260px, 10vw, 380px);
	}
	/* The right edge stays flush with the viewport; increasing the height
	 * therefore expands the masked image towards the left. */
	.hero__photo-wrap { top: -5%; height: 110%; max-width: none; }
	.hero__corner-arrow { left: calc(40% - 698px); top: -146px; }
	.post-single__hero-inner { padding-left: clamp(260px, 10vw, 380px); }

	/* Let the comparison image match the scale of the following image,
	 * while reserving a full row below it for the left-hand copy. */
	.compare { --compare-photo-overlap: 136px; }
	.compare__photo { width: min(48vw, 780px); }
	.compare__grid {
		max-width: 1460px;
		grid-template-columns: 42fr 8fr 50fr;
		min-height: 940px;
		gap: 32px;
	}
	.compare__col--left { justify-content: flex-start; margin-top: 760px; }
	/* The oversized decorative arrow remains visible in the blue field,
	 * but is covered above its top edge. The photo stays above this cover. */
	.compare::after {
		content: "";
		position: absolute;
		z-index: 1;
		left: 0;
		right: 0;
		bottom: 100%;
		height: 420px;
		background: var(--sm-lightblue);
		pointer-events: none;
	}

	.contrast__photo { width: min(48vw, 780px); height: 830px; }
	.contrast__inner { width: min(920px, calc(100vw - (2 * var(--sm-gutter)))); }

	.about { grid-template-columns: minmax(0, 760px) minmax(0, 1fr); }
	.about__body { margin-left: 64px; max-width: 589px; }
	.about__photo { width: min(100%, 920px); height: 980px; }
	.about__join { width: min(580px, calc(100% - 64px)); }

	.faq__col,
	.faq__heading { width: min(860px, 100% - 2 * var(--sm-gutter)); }
}

/* Desktop-wide: keep a purple edge visible above the white FAQ cards.
 * This intentionally does not apply to portrait tablets or phones. */
@media (min-width: 1440px) {
	.faq__list { margin-top: 32px; }
}

@media (max-width: 1000px) {
	.site-nav__burger { display: flex; }
	.cookie-consent { inset: auto 16px 16px; }
	.cookie-consent__panel { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 20px; }
	.cookie-consent__mark { width: 32px; }
	.cookie-consent__actions { grid-column: 1 / -1; flex-direction: row; }
	.cookie-consent__button { flex: 1; min-width: 0; }
	.site-nav__links {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		background: var(--sm-nav-bg);
		backdrop-filter: blur(5px);
		border: 1px solid var(--sm-nav-border);
		border-radius: var(--sm-radius);
		padding: 16px;
		gap: 8px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	}
	.site-nav__bar.is-open .site-nav__links {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.site-nav__bar { position: relative; }

	.hero { flex-direction: column; height: auto; min-height: 760px; padding-top: 140px; }
	.hero__corner-arrow { display: none; }
	.compare { margin-top: 0; }
	.compare__grid { grid-template-columns: 1fr; text-align: center !important; }
	.compare__col--left,
	.compare__col--right { margin-top: 0; }
	.compare__col--left { text-align: center; }
	.compare__photo { display: none; }
	.accordion { grid-template-columns: 1fr; }
	.accordion__list { position: static; }
	.contrast { padding-top: 96px; }
	.contrast__photo { display: none; }
	.contrast__inner { width: 100%; margin: 0; }
	.contrast__cols { grid-template-columns: 1fr; }
	.contrast__cta { align-self: flex-start; }
	.testimonials { min-height: auto; padding: 96px var(--sm-gutter) 128px; display: block; }
	.testimonials__heading { margin: 0 auto 48px; }
	.testimonials__wall { position: relative; inset: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; height: auto; }
	/* `inset: auto` alone doesn't win here: the desktop layout's
	   `.testimonials__card:nth-child(n)` rules (main.css, ~line 807) set
	   top/left/right/bottom directly, and that compound selector is more
	   specific than the plain `.testimonials__card` class — so without
	   `!important` those percentage offsets kept applying on top of the
	   grid layout below, shifting/overlapping the cards instead of
	   stacking them cleanly. */
	.testimonials__card { position: relative; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto; opacity: 1; transform: none !important; }
	.about { grid-template-columns: 1fr; padding: 64px var(--sm-gutter); gap: 48px; overflow: visible; }
	.about__text { padding-top: 0; }
	.about__body { margin-left: 0; }
	.about__photo { width: 100%; height: auto; aspect-ratio: 775 / 825; margin-bottom: -32px; }
	.about__join { width: min(100%, 515px); margin-right: 0; padding: 40px 24px; }
	.blog { padding: 96px var(--sm-gutter); }
	.blog__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
	.blog__grid { grid-template-columns: 1fr; }
	.blog__cta { text-align: left; }
	.post-single__hero { padding-top: 136px; }
	.post-single__hero-inner { grid-template-columns: 1fr; }
	.post-single__featured-image { order: -1; }
	.insights-archive__head { grid-template-columns: 1fr; gap: 24px; }
	.logos__grid { grid-template-columns: repeat(2, 1fr); }
	.faq__cta-content { padding-bottom: 140px; }
}

/* Phone layout ------------------------------------------------------ */
@media (max-width: 800px) {
	body { font-size: 15px; }
	.site-nav { top: 16px; padding-inline: var(--sm-gutter); }
	.site-nav__bar { width: 100%; min-height: 60px; padding-left: 12px; gap: 8px; justify-content: space-between; }
	.site-nav__default { min-width: 0; flex: 1; gap: 0; }
	.site-nav__logo { width: 148px; height: 31px; }
	.site-nav__logo img { height: 31px; }
	.site-nav__logo-icon img { width: 21px; }
	.site-nav.is-scrolled .site-nav__logo { width: 21px; }
	.site-nav__burger { width: 44px; height: 44px; padding: 10px; }
	.site-nav__links { top: calc(100% + 8px); padding: 12px; max-height: calc(100svh - 92px); overflow-y: auto; }
	.site-nav__link { min-height: 48px; padding: 12px 16px; }
	.site-nav:has(.section-dock--anchors.is-open) .site-nav__bar,
	.site-nav:has(.section-dock--nav:is(:hover, :focus-within, .is-open)) .site-nav__bar { min-height: 60px; }

	.hero { min-height: 0; padding: 112px var(--sm-gutter) 48px; display: block; }
	.hero__text { width: 100%; max-width: none; padding: 0; }
	.hero__heading { margin-bottom: 16px; letter-spacing: -0.04em; }
	.hero__sub { max-width: 330px; font-size: 15px; }
	.hero__badges { gap: 8px; margin-top: 28px; }
	.hero__badge { max-width: 100%; padding: 7px 10px 7px 12px; font-size: 16px; white-space: normal; }
	.hero__badge:nth-child(2) { margin-left: 24px; }
	.hero__badge:nth-child(3) { margin-left: 8px; }
	/* The desktop photo is intentionally omitted in the narrow hero: it
	 * otherwise competes with the headline and makes the first screen noisy. */
	.hero__photo-wrap { display: none; }
	.hero { min-height: 0; padding-bottom: 72px; }

	.logos { padding-block: 48px; }
	.logos__inner { gap: 32px; }
	.logos__kicker { padding-bottom: 20px; font-size: 15px; }
	.logos__grid { opacity: 1 !important; gap: 8px; }
	.logos__slot { height: 36px; padding: 8px; }
	/* Overrides the desktop 42px max-height — that size was tuned for the
	   80px desktop slot, and at the 36px mobile slot above it was forcing
	   logos to render almost as tall as the slot itself. */
	.logos__img { max-height: 20px; }
	.logos__hover-cta { display: none; }

	.intro { min-height: 76svh; padding: 80px var(--sm-gutter) 32px; gap: 28px; }
	.intro__heading { max-width: 360px; }

	.compare { margin-top: 0; padding: 88px 0 72px; overflow: hidden; }
	.compare__grid { min-height: 0; gap: 32px; }
	.compare__col { font-size: 15px; }
	.compare__arrow { width: 56px; height: 108px; }
	.accordion { margin: 72px auto 0; gap: 40px; }
	.accordion__list {
		position: sticky;
		top: 84px;
		z-index: 5;
		gap: 0;
		padding: 16px 0 12px;
		background: var(--sm-darkblue);
	}
	.accordion__nav-item { margin-bottom: 20px; padding-bottom: 14px; font-size: 18px; }
	.accordion__cards { gap: 24px; padding-bottom: 0; }
	.accordion__card { padding: 24px 20px; gap: 20px; scroll-margin-top: 252px; }
	.accordion__card { transform: none !important; opacity: 1 !important; }
	.accordion__card[hidden] { display: none; }
	.accordion__items li { font-size: 15px; }
	.accordion__items li { align-items: flex-start; padding: 12px; }

	.contrast { padding: 72px var(--sm-gutter); }
	.contrast__inner { gap: 32px; }
	.contrast__cols { gap: 6px; padding: 6px; }
	.contrast__col { padding: 32px 12px; gap: 20px; }
	.contrast__item-toggle { padding: 12px 4px 12px 8px; }
	.contrast__item-body > div { padding-inline: 8px; }
	.contrast__item-toggle { font-size: 15px; }
	.contrast__item-body { font-size: 16px; }

	.testimonials { padding: 72px var(--sm-gutter) 80px; }
	.testimonials__heading { margin-bottom: 32px; }
	.testimonials__wall { grid-template-columns: 1fr; gap: 16px; }
	.testimonials__card { padding: 20px; gap: 20px; }
	.testimonials__card-person,
	.testimonials__card-quote { font-size: 15px; }

	.about { padding: 72px var(--sm-gutter); gap: 32px; }
	.about__heading { margin-bottom: 24px; }
	.about__body { font-size: 15px; }
	.about__join { padding: 32px 20px; }

	.blog { padding: 72px var(--sm-gutter); }
	.blog__head { margin-bottom: 32px; }
	.blog__heading { font-size: 42px; }
	.blog__intro { font-size: 15px; }
	.blog__excerpt { font-size: 15px; }
	.blog__card-copy { padding: 22px; }
	.blog__cta { margin-top: 28px; }
	.post-single__hero { padding: 112px var(--sm-gutter) 40px; }
	.post-single__category { font-size: 13px; }
	.post-single__title { font-size: 44px; }
	.post-single__excerpt,
	.post-single__content { font-size: 15px; }
	/* Article detail: on phones the photo leads, the rotated Figma vector
	 * points down into the purple title area, then the article card overlaps
	 * that section. */
	.post-single__hero { min-height: 0; padding: 0; background: var(--sm-purple); }
	.post-single__hero-inner { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; overflow: hidden; }
	.post-single__featured-image {
		position: relative;
		top: auto;
		right: auto;
		order: 0;
		/* Same vector mask as desktop. These dimensions and its offset are
		 * the rotated mobile composition from the Figma frame. */
		width: 200vw;
		height: min(133vw, 523px);
		min-height: 0;
		margin: 0 0 0 -40vw;
		overflow: hidden;
		background: transparent;
		-webkit-mask-image: url('../img/post-feature-mask.svg');
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: 40vw 0;
		-webkit-mask-size: 100vw min(132.3vw, 520px);
		mask-image: url('../img/post-feature-mask.svg');
		mask-repeat: no-repeat;
		mask-position: 40vw 0;
		mask-size: 100vw min(132.3vw, 520px);
		transform: none;
	}
	.post-single__featured-image img { min-height: 0; transform: none; object-position: center 42%; }
	.post-single__mobile-vector { display: none; }
	.post-single__intro { order: 1; z-index: 2; width: auto; padding: 32px calc(var(--sm-gutter) + 10px) 96px; }
	.post-single__title { font-size: clamp(42px, 11vw, 52px); }
	.post-single__body-card { width: calc(100% - 2 * var(--sm-gutter)); margin: -48px auto 72px; padding: 0; }
	.post-single__body-card-inner { padding: 40px 20px; }
	.post-single__content { padding: 0; }
	.post-single__related { width: 100%; margin: 0 0 72px; padding-left: var(--sm-gutter); overflow: hidden; }
	.post-single__related-title { margin-bottom: 16px; }
	.post-single__related-grid { display: flex; gap: 10px; overflow-x: auto; padding: 0 var(--sm-gutter) 12px 0; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.post-single__related-grid::-webkit-scrollbar { display: none; }
	.post-single__related-card { flex: 0 0 min(68vw, 260px); scroll-snap-align: start; }
	.post-single__related-card h3 { margin: 12px 12px 6px; font-size: 17px; }
	.post-single__related-card > span { margin: 0 12px 14px; font-size: 13px; }
	.insights-archive { padding: 120px var(--sm-gutter) 72px; }
	.insights-archive__head { margin-bottom: 32px; }
	.insights-archive__title { font-size: 42px; }
	.insights-archive__intro,
	.insights-archive__empty { font-size: 15px; }

	.cta-roer { min-height: 0; margin: 32px var(--sm-gutter); }
	.cta-roer__pattern { width: 100%; opacity: 0.32; }
	.cta-roer__inner { align-items: flex-start; gap: 32px; padding: 56px 24px; text-align: left; }
	.cta-roer__body { font-size: 15px; }
	.cta-roer__actions { align-items: flex-start; gap: 20px; justify-content: flex-start; }

	.faq { padding: 56px 0; }
	.faq__heading { width: calc(100% - 2 * var(--sm-gutter)); margin-bottom: 32px; font-size: 38px; }
	.faq__stack { display: flex; flex-direction: column; gap: 48px; aspect-ratio: auto; padding: 0 0 48px; background: var(--sm-purple); }
	.faq__cta-shape { display: none; }
	.faq__col { width: calc(100% - 2 * var(--sm-gutter)); }
	.faq__item { padding: 24px 20px; }
	.faq__question { gap: 16px; font-size: 21px; }
	.faq__answer-inner p { padding-top: 18px; font-size: 15px; line-height: 1.45; }
	.faq__cta-content { position: relative; inset: auto; padding: 0 var(--sm-gutter); gap: 24px; }
	.faq__cta-heading { font-size: 32px; }
	.faq__cta-body { font-size: 15px; }
	.faq__cta-actions { align-items: center; flex-direction: column; gap: 18px; }

	.site-footer { padding: 48px var(--sm-gutter) 24px; gap: 24px; }
	.site-footer__brand { font-size: 48px; }
	.site-footer__row { justify-content: center; text-align: center; }
}

/* Tablet portrait ---------------------------------------------------
 * 600–800px used to inherit the phone layout wholesale. At 768px that
 * left a lot of useful room unused (and hid key imagery), so restore a
 * compact two-column composition where it improves scanning. */
@media (min-width: 600px) and (max-width: 1000px) and (orientation: portrait) {
	:root {
		--sm-gutter: 32px;
		--sm-text-4xl: 56px;
		--sm-text-3xl: 50px;
		--sm-text-2xl: 38px;
		--sm-text-xl: 34px;
	}

	.site-nav { top: 24px; }
	.site-nav__bar { width: min(100%, 620px); min-height: 64px; padding-left: 16px; gap: 0; }
	.site-nav__default { min-width: 0; flex: 1; }
	.site-nav__logo { width: 168px; height: 34px; }
	.site-nav__logo img { height: 34px; }

	/* Keep the primary visual on an iPad rather than treating it as phone. */
	.hero {
		display: flex;
		flex-direction: row;
		height: min(820px, 100svh);
		min-height: 760px;
		padding: 0 var(--sm-gutter) 0 0;
		align-items: center;
	}
	.hero__text {
		/* Reserve the right-hand third for the masked photo. Previously
		 * 65% + a 45vw photo overlapped on 820–900px wide tablets. */
		width: 55%;
		max-width: 520px;
		padding: 128px 0 64px var(--sm-gutter);
	}
	.hero__sub { max-width: 360px; font-size: 17px; }
	.hero__photo-wrap {
		display: block;
		top: 10%;
		right: 0;
		height: 80%;
		width: 42vw;
		max-width: none;
	}
	.hero__badge { font-size: 17px; }

	.logos { padding-block: 56px; }
	.logos__grid { grid-template-columns: repeat(3, 1fr); }
	.logos__slot { height: 44px; padding: 10px; }
	.logos__img { max-height: 24px; }

	/* Keep the large reveal inside its own section once it has handed off
	 * to the comparison panel. This prevents a thin blue arrow edge from
	 * remaining visible below the panel at the end of the scroll. */
	.intro { min-height: 72svh; padding: 96px var(--sm-gutter) 48px; overflow: clip; }
	.intro__heading { max-width: 520px; }

	/* Match the phone's service navigation: it remains available while the
	 * cards scroll underneath it instead of disappearing above the viewport. */
	.accordion { margin: 96px auto 0; gap: 40px; }
	.accordion__list {
		position: sticky;
		top: 88px;
		z-index: 5;
		gap: 0;
		padding: 16px 0 12px;
		background: var(--sm-darkblue);
	}
	.accordion__nav-item { margin-bottom: 20px; padding-bottom: 14px; font-size: 20px; }
	.accordion__cards { gap: 24px; padding-bottom: 0; }
	.accordion__card { padding: 32px; scroll-margin-top: 220px; }
	.accordion__card[hidden] { display: none; }

	/* Tablet has room for the testimonials and insight cards side by side. */
	.testimonials { padding: 88px var(--sm-gutter) 104px; }
	.testimonials__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.testimonials__card { padding: 22px; }

	.blog { padding: 88px var(--sm-gutter); }
	.blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.blog__card:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.blog__card-copy { padding: 24px; }
	.blog__card h3 { font-size: 28px; }

	.about { padding: 80px var(--sm-gutter); grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 28px; align-items: center; }
	.about__text { padding-top: 0; }
	.about__body { max-width: none; font-size: 17px; }
	.about__photo { height: auto; aspect-ratio: 0.88; margin-bottom: -20px; }
	.about__join { width: 100%; margin: 0; padding: 28px 22px; }

	/* Article pages retain a readable two-card related-news grid. */
	/* Reset the phone's rotated-mask geometry: tablet uses the desktop
	 * side-by-side hero, scaled down to its available width. */
	.post-single__hero { min-height: 487px; padding: 0; }
	.post-single__hero-inner { display: flex; flex-direction: row; align-items: center; min-height: 487px; padding-left: var(--sm-gutter); overflow: visible; }
	.post-single__featured-image {
		display: block;
		position: absolute;
		order: initial;
		top: 0;
		right: 0;
		width: min(51.5vw, 396px);
		height: 487px;
		margin: 0;
		background: var(--sm-purple);
		-webkit-mask: url('../img/post-feature-mask.svg') center / 100% 100% no-repeat;
		mask: url('../img/post-feature-mask.svg') center / 100% 100% no-repeat;
		transform: scaleX(-1);
	}
	.post-single__featured-image img { height: 100%; transform: scaleX(-1); object-position: center; }
	.post-single__intro { order: 0; width: min(43vw, 330px); padding: 0; }
	.post-single__title { font-size: 48px; }
	.post-single__body-card { width: min(620px, calc(100% - 2 * var(--sm-gutter))); margin: -40px auto 72px; }
	.post-single__related { width: min(620px, calc(100% - 2 * var(--sm-gutter))); margin: 72px auto 96px; padding: 0; overflow: visible; }
	.post-single__related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 0; }
	.post-single__related-card { flex: initial; }

	.insights-archive { padding: 144px var(--sm-gutter) 96px; }
	.insights-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cta-roer { margin: 48px var(--sm-gutter); }
	.cta-roer__inner { padding: 72px 40px; }
	/* On portrait tablets the FAQ must grow with its answers. Keeping the
	 * closing CTA in normal flow (as on phone) places "Bel Nick" below the
	 * accordion, rather than over the decorative purple shape and questions. */
	.faq { padding: 72px 0; }
	.faq__heading { width: calc(100% - 2 * var(--sm-gutter)); margin-bottom: 40px; }
	.faq__stack {
		display: flex;
		flex-direction: column;
		gap: 56px;
		aspect-ratio: auto;
		padding: 0 0 72px;
		background: var(--sm-purple);
	}
	.faq__cta-shape { display: none; }
	.faq__col { width: calc(100% - 2 * var(--sm-gutter)); }
	.faq__item { padding: 28px 24px; }
	.faq__cta-content { position: relative; inset: auto; padding: 0 var(--sm-gutter); gap: 28px; }

	.site-footer { padding: 56px var(--sm-gutter) 28px; }
	.site-footer__brand { font-size: 58px; }
	.site-footer__row { justify-content: space-between; text-align: left; }
}