/*
 * Landing pages "Main" and "Comfortabel slapen".
 *
 * Part 1 is the design as drawn, lifted straight out of the design-canvas
 * export: every value below matches the artboard at 1440px. Part 2 adds
 * the behaviour the static export could not carry (FAQ accordion, hover
 * and focus states). Part 3 is the responsive layer — the design is drawn
 * at one width, so everything that adapts is collected there rather than
 * scattered through the base rules.
 *
 * Markup: template-parts/content-landing-main.php
 *         template-parts/content-landing-comfortabel-slapen.php
 */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ==========================================================================
   Page shell — keep the theme's legacy style.css out of the design
   ========================================================================== */

body.sd-landing {
	margin: 0;
	background: #f2f5f7;
	-webkit-font-smoothing: antialiased;
}

body.sd-landing .site-container,
body.sd-landing .site-inner,
body.sd-landing .content,
body.sd-landing .entry,
body.sd-landing .entry-content {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

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

/*
 * These are element resets, and they are wrapped in :where() on purpose.
 * `.sdlp a` scores 0-1-1, which quietly outranks a component class like
 * .sdlp-btn--ink at 0-1-0 — that is how every button ended up with the
 * gold link colour instead of its own white. :where() contributes nothing,
 * so each of these behaves like the bare tag rule it is meant to be and
 * any component rule wins.
 */

:where(.sdlp) h1,
:where(.sdlp) h2,
:where(.sdlp) h3 { font-weight: 400; text-transform: none; }

:where(.sdlp) p,
:where(.sdlp) ul,
:where(.sdlp) li { text-transform: none; }

:where(.sdlp) ul { list-style: none; }
:where(.sdlp) em { font-style: italic; }
:where(.sdlp) img { max-width: 100%; }

/* style.css underlines links site-wide, including the logo. Inside the
   design, only the components that ask for a rule get one. */
:where(.sdlp) a {
	color: #9d6f26;
	text-decoration: none;
	border-bottom: 0;
}

.sdlp .sdlp-logo,
.sdlp .sdlp-logo:hover,
.sdlp .sdlp-logo:focus {
	border-bottom: 0;
	text-decoration: none;
	box-shadow: none;
}

/* ==========================================================================
   1. The design at 1440px
   ========================================================================== */

.sdlp-footline {
	background: #022330;
	padding: 34px 0;
	border-top: 1px solid rgba(255,255,255,.12);
}

.sdlp-sec--ink {
	background: #022330;
	padding: 92px 0;
}

.sdlp-sec--navy {
	background: #03364f;
	padding: 88px 0;
}

.sdlp-sec--grey {
	background: #f2f5f7;
	padding: 88px 0;
}

.sdlp-sec--hero {
	background: #ffffff;
	padding: 76px 0;
}

.sdlp-sec--white {
	background: #ffffff;
	padding: 88px 0;
}

.sdlp-ctabar-btn {
	background: #03364f;
	color: #ffffff;
	border-radius: 2px;
	padding: 15px 30px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sdlp-ctabar {
	background: #f2f5f7;
	padding: 0 0 30px;
}

.sdlp-band {
	background: #ffffff;
	border-bottom: 1px solid #ccd8de;
	padding: 20px 0;
}

.sdlp-ctabar-inner {
	background: #ffffff;
	border: 1px solid #ccd8de;
	border-radius: 3px;
	box-shadow: 0 -6px 24px rgba(3,54,79,.10);
	padding: 16px 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.sdlp-textlink {
	font-weight: 600;
	text-decoration: none;
}

.sdlp-textlink--ink {
	color: rgb(3, 54, 79);
	border-bottom: 1px solid rgb(182, 202, 212);
}

.sdlp-textlink--gold {
	font-size: 16px;
	color: #9d6f26;
	border-bottom: 1px solid #e3cfa5;
	padding-bottom: 2px;
}

.sdlp-star {
	color: #d9a44a;
	font-size: 15px;
	letter-spacing: .06em;
}

.sdlp-liescard-img {
	display: block;
	flex: 0 0 210px;
	width: 210px;
	height: 210px;
	object-fit: cover;
	object-position: 50% 30%;
}

.sdlp-advcard-btn {
	display: block;
	text-align: center;
	background: #03364f;
	color: #ffffff;
	border: 1px solid #03364f;
	border-radius: 2px;
	padding: 13px 10px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.sdlp-advcard-img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
}

.sdlp-modelcard-img {
	display: block;
	width: 100%;
	height: 236px;
	object-fit: cover;
}

.sdlp-logo {
	display: block;
	width: 148px;
}

.sdlp-logo-svg {
	display: block;
	width: 148px;
	height: auto;
}

.sdlp-atelier-img {
	display: block;
	width: 374px;
	height: 230px;
	object-fit: cover;
	border-radius: 2px;
}

.sdlp-split-img {
	display: block;
	width: 460px;
	height: 520px;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: 0 14px 36px rgba(3,54,79,.12);
}

.sdlp-hero-img {
	display: block;
	width: 520px;
	height: 392px;
	object-fit: cover;
	filter: brightness(1.04);
}

.sdlp-modelcard-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.sdlp-prijslist-item {
	display: flex;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(255,255,255,.14);
	font-size: 16px;
	line-height: 1.5;
	color: #c6d8e1;
}

.sdlp-maatlist-item {
	display: flex;
	gap: 14px;
	margin-bottom: 16px;
	font-size: 17px;
	line-height: 1.55;
	color: #c6d8e1;
}

.sdlp-atelier-row {
	display: flex;
	gap: 18px;
	margin-bottom: 48px;
}

/* Shared two-item flex row. Two unrelated users: the slaapadviseur card
   grid (.sdlp-advcard-grid) and each slaapcheck step (.sdlp-step-item),
   which the markup tags so they can adapt differently. */
.sdlp-row22 {
	display: flex;
	gap: 22px;
}

.sdlp-modelcard-grid {
	display: flex;
	gap: 24px;
}

.sdlp-usp-grid {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.sdlp-levering-grid {
	display: flex;
	gap: 26px;
}

.sdlp-advies-grid {
	display: flex;
	gap: 60px;
}

.sdlp-split-row {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}

.sdlp-atelier-cols {
	display: flex;
	gap: 60px;
	align-items: flex-start;
	margin: 26px 0 44px;
}

.sdlp-steps-row {
	display: flex;
	gap: 70px;
	align-items: flex-start;
}

/* Shared image-and-text band: the hero, and the two "in jouw stijl" /
   "zo stel je jouw bed samen" sections. */
.sdlp-duo {
	display: flex;
	gap: 80px;
	align-items: center;
}

.sdlp-btn {
	display: inline-block;
	border-radius: 2px;
	padding: 17px 32px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
}

.sdlp-btn--ink {
	background: #03364f;
	color: #ffffff;
	border: 1px solid #03364f;
}

.sdlp-btn--gold {
	background: #c49a2c;
	color: #022330;
	border: 1px solid #c49a2c;
}

.sdlp-step-numcol {
	flex: 0 0 42px;
}

.sdlp-li-mark {
	flex: 0 0 auto;
	color: #d9a44a;
}

.sdlp-li-mark--plus {
	font-weight: 600;
}

.sdlp-step-body {
	flex: 1;
}

.sdlp-stat {
	flex: 1;
	padding: 0 28px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.sdlp-stat--sep {
	border-right: 1px solid #dfe6ea;
}

.sdlp-advies-col {
	flex: 1;
	padding-top: 22px;
	border-top: 2px solid #9d6f26;
}

.sdlp-kicker {
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6d8c9c;
	margin-bottom: 6px;
}

.sdlp-eyebrow {
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.sdlp-eyebrow--gold {
	color: #9d6f26;
}

.sdlp-eyebrow--sand {
	color: #d9a44a;
}

.sdlp-h3 {
	font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	color: #03364f;
}

.sdlp-h3--21 {
	font-size: 21px;
	margin: 0 0 10px;
}

.sdlp-h3--22 {
	font-size: 22px;
	margin: 0 0 14px;
}

.sdlp-h3--22lh {
	font-size: 22px;
	line-height: 1.25;
	margin: 0 0 10px;
}

.sdlp-h3--23 {
	font-size: 23px;
	margin: 0 0 12px;
	line-height: 1.28;
}

.sdlp-h3--23b {
	font-size: 23px;
	line-height: 1.2;
	margin: 0 0 12px;
	text-wrap: balance;
}

.sdlp-h3--24 {
	font-size: 24px;
	margin: 0 0 9px;
}

.sdlp-h3--25 {
	font-size: 25px;
	margin: 0;
}

.sdlp-name {
	font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
	font-size: 25px;
	color: #03364f;
}

.sdlp-name--lies {
	margin-bottom: 12px;
}

.sdlp-name--card {
	margin-bottom: 18px;
}

.sdlp-stat-num {
	font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
	font-size: 26px;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

.sdlp-stat-num--ink {
	color: #03364f;
}

.sdlp-stat-num--gold {
	color: #c49a2c;
}

.sdlp-h2 {
	font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
	line-height: 1.12;
	font-weight: 400;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.sdlp-h2--light {
	font-size: 40px;
	color: #ffffff;
	margin: 0 0 18px;
	max-width: 860px;
}

.sdlp-h2--w600 {
	font-size: 42px;
	color: #03364f;
	margin: 0 0 18px;
	max-width: 600px;
}

.sdlp-h2--w760 {
	font-size: 42px;
	color: #03364f;
	margin: 0 0 18px;
	max-width: 760px;
}

.sdlp-h2--w800 {
	font-size: 42px;
	color: #03364f;
	margin: 0 0 18px;
	max-width: 800px;
}

.sdlp-h2--w820 {
	font-size: 42px;
	color: #03364f;
	margin: 0 0 18px;
	max-width: 820px;
}

.sdlp-h2--w900 {
	font-size: 42px;
	color: #03364f;
	margin: 0 0 18px;
	max-width: 900px;
}

.sdlp-h2--closing {
	font-size: 44px;
	color: #ffffff;
	margin: 0 auto 18px;
	max-width: 1160px;
}

.sdlp-h1 {
	font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
	font-size: 58px;
	line-height: 1.06;
	font-weight: 400;
	letter-spacing: -.02em;
	color: #03364f;
	margin: 0 0 22px;
	text-wrap: balance;
}

.sdlp-note {
	font-size: 14px;
	color: #6d8c9c;
}

.sdlp-note--mt14 {
	margin-top: 14px;
}

.sdlp-note--mt2 {
	margin-top: 2px;
}

.sdlp-stat-lbl {
	font-size: 14px;
	color: #6d8c9c;
	line-height: 1.4;
}

.sdlp-price {
	font-size: 14px;
	color: #6d8c9c;
	white-space: nowrap;
}

.sdlp-note-light {
	font-size: 14px;
	color: #a9c0cb;
	margin-top: 16px;
}

.sdlp-body {
	color: #2c5468;
}

.sdlp-body--lh162 {
	font-size: 16px;
	line-height: 1.62;
	margin: 0;
}

.sdlp-body--lh166 {
	font-size: 16px;
	line-height: 1.66;
	margin: 0;
}

.sdlp-body--lh16 {
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

.sdlp-body--lh16mb {
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 18px;
}

.sdlp-body--step {
	font-size: 17px;
	line-height: 1.62;
	margin: 0;
	max-width: 470px;
}

.sdlp-body--lies {
	font-size: 17px;
	line-height: 1.6;
	max-width: 660px;
	margin: 0;
}

.sdlp-ctabar-title {
	font-size: 17px;
	font-weight: 600;
	color: #03364f;
}

.sdlp-lead {
	font-size: 18px;
}

.sdlp-lead--w700mb34 {
	line-height: 1.62;
	color: #2c5468;
	max-width: 700px;
	margin: 0 0 34px;
}

.sdlp-lead--w700mb40 {
	line-height: 1.62;
	color: #2c5468;
	max-width: 700px;
	margin: 0 0 40px;
}

.sdlp-lead--w740mb38 {
	line-height: 1.62;
	color: #2c5468;
	max-width: 740px;
	margin: 0 0 38px;
}

.sdlp-lead--w760mb36 {
	line-height: 1.62;
	color: #2c5468;
	max-width: 760px;
	margin: 0 0 36px;
}

.sdlp-lead--w760mb42 {
	line-height: 1.62;
	color: #2c5468;
	max-width: 760px;
	margin: 0 0 42px;
}

.sdlp-lead--w760mb44 {
	line-height: 1.62;
	color: #2c5468;
	max-width: 760px;
	margin: 0 0 44px;
}

.sdlp-lead--flow {
	line-height: 1.66;
	color: #2c5468;
	margin: 0 0 0px;
}

.sdlp-lead--flowmb {
	line-height: 1.66;
	color: #2c5468;
	margin: 0 0 20px;
}

.sdlp-lead--lightflow {
	line-height: 1.66;
	color: #c6d8e1;
	margin: 0 0 0px;
}

.sdlp-lead--lightmb {
	line-height: 1.66;
	color: #c6d8e1;
	margin: 0 0 20px;
}

.sdlp-hero-lead {
	font-size: 19px;
	line-height: 1.62;
	color: #2c5468;
	max-width: 520px;
	margin: 0 0 30px;
}

.sdlp-closing-lead {
	font-size: 19px;
	line-height: 1.6;
	color: #c6d8e1;
	max-width: 640px;
	margin: 0 auto 34px;
}

.sdlp-strong {
	font-weight: 600;
}

.sdlp-maatlist {
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	max-width: 540px;
}

.sdlp-prijslist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sdlp-mt26 {
	margin-top: 26px;
}

.sdlp-liescard {
	margin-top: 26px;
	background: #e8f0f4;
	border: 1px solid #ccd8de;
	border-radius: 3px;
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

.sdlp-mt30 {
	margin-top: 30px;
}

.sdlp-cta-row {
	margin-top: 46px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.sdlp-p {
	margin: 0;
}

.sdlp-p-mb12 {
	margin: 0 0 12px;
}

.sdlp-step-rulewrap--last {
	padding-bottom: 0px;
}

.sdlp-step-rulewrap--gap {
	padding-bottom: 12px;
}

.sdlp-stat-starswrap {
	padding-right: 26px;
	border-right: 1px solid #dfe6ea;
	margin-right: 2px;
}

.sdlp-prijslist-foot {
	padding-top: 16px;
}

.sdlp-advcard-body {
	padding: 22px 22px 26px;
}

.sdlp-modelcard-body {
	padding: 24px 26px 28px;
}

.sdlp-liescard-body {
	padding: 26px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sdlp-hero-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom,rgba(3,54,79,0) 55%,rgba(3,54,79,.34) 100%);
}

.sdlp-hero-frame {
	position: relative;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(3,54,79,.14);
}

.sdlp-center {
	text-align: center;
}

.sdlp-wrap {
	width: 1160px;
	margin: 0 auto;
}

.sdlp-wrap--stats {
	display: flex;
	align-items: center;
}

.sdlp-wrap--footline {
	text-align: center;
	font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
	font-size: 20px;
	color: #c6d8e1;
	letter-spacing: .01em;
}

.sdlp-page {
	width: 1440px;
	background: #f2f5f7;
	font-family: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #03364f;
}

.sdlp-step-rule {
	width: 1px;
	height: 56px;
	background: #ccd8de;
	margin: 8px auto 0;
}

.sdlp-levering-col {
	width: 270px;
	padding: 26px 0 0;
	border-top: 2px solid #c49a2c;
}

.sdlp-advcard {
	width: 273px;
	background: #ffffff;
	border: 1px solid #ccd8de;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(3,54,79,.06);
}

.sdlp-modelcard {
	width: 370px;
	background: #ffffff;
	border: 1px solid #ccd8de;
	border-radius: 3px;
	overflow: hidden;
}

.sdlp-usp-card {
	width: 370px;
	background: #ffffff;
	border: 1px solid #ccd8de;
	border-radius: 3px;
	padding: 30px 28px 32px;
}

.sdlp-prep-card {
	width: 400px;
	background: #ffffff;
	border: 1px solid #ccd8de;
	border-radius: 3px;
	padding: 32px 30px;
}

.sdlp-step-num {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #e8f0f4;
	color: #03364f;
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sdlp-prijs-card {
	width: 440px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 3px;
	padding: 28px 28px 18px;
}

.sdlp-split-media {
	width: 460px;
}

.sdlp-hero-media {
	width: 520px;
	position: relative;
}

.sdlp-hero-copy {
	width: 560px;
}

.sdlp-split-copy {
	width: 620px;
}

/* ==========================================================================
   2. Behaviour the static export could not carry
   ========================================================================== */

/* --- links and buttons --- */

.sdlp .sdlp-btn:hover,
.sdlp .sdlp-btn:focus-visible,
.sdlp .sdlp-ctabar-btn:hover,
.sdlp .sdlp-ctabar-btn:focus-visible,
.sdlp .sdlp-advcard-btn:hover,
.sdlp .sdlp-advcard-btn:focus-visible {
	background: #0a4a6b;
	border-color: #0a4a6b;
	color: #ffffff;
}

.sdlp .sdlp-btn--gold:hover,
.sdlp .sdlp-btn--gold:focus-visible {
	background: #d9a44a;
	border-color: #d9a44a;
	color: #022330;
}

.sdlp .sdlp-textlink:hover,
.sdlp .sdlp-textlink:focus-visible {
	color: #03364f;
	border-bottom-color: #03364f;
}

.sdlp a:focus-visible,
.sdlp .sdlp-faq-q:focus-visible {
	outline: 2px solid #9d6f26;
	outline-offset: 3px;
}

/* --- FAQ accordion ---
   The export shows every answer open so it can be proofread; live, only
   the first one starts open. See assets/js/landing-slaapcheck.js. */

.sdlp-faq-item {
	border-bottom: 1px solid #ccd8de;
	padding: 26px 0;
}

.sdlp-faq-row {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.sdlp-faq-sign {
	font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
	font-size: 18px;
	color: #c49a2c;
	line-height: 1.2;
	flex: 0 0 auto;
	width: 12px;
}

.sdlp-faq-sign::before { content: '+'; }
.sdlp-faq-item.is-open .sdlp-faq-sign::before { content: '\2212'; }

.sdlp-faq-q {
	cursor: pointer;
	user-select: none;
}

.sdlp-faq-a {
	font-size: 17px;
	line-height: 1.66;
	color: #2c5468;
	max-width: 860px;
}

.sdlp-faq-item:not(.is-open) .sdlp-faq-q { margin-bottom: 0; }
.sdlp-faq-item:not(.is-open) .sdlp-faq-a { display: none; }

/* ==========================================================================
   3. Responsive layer
   --------------------------------------------------------------------------
   The design is drawn once, at 1440px. Part 1 above is that drawing, and
   nothing here touches it at full width — at 1440 every column still
   measures exactly what the export measures.
 
   Between 1440 and the first breakpoint nothing needs to be redeclared:
   the columns are flex items with a fixed width, so they shrink on their
   own. That only holds while the rows do NOT wrap, which is why wrapping
   is introduced per breakpoint below rather than switched on globally.
   ========================================================================== */

/* --- fluid shell --- */

/*
 * The export draws the page as a 1440px-wide box, which would leave the
 * section backgrounds stopping short on a wider screen. The box goes: each
 * section's background runs the full width of the window, and it is the
 * content wrap below that holds the design's measure. Nothing changes at
 * 1440 and under, where the two were the same thing.
 */
.sdlp-page {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Exactly 1160px wherever there is room for it, with a gutter once there
   isn't — no breakpoint needed. Centred on the window, so the content sits
   where the design puts it however wide the section behind it runs. */
.sdlp-wrap {
	width: min(1160px, 100% - 48px);
	max-width: none;
	margin: 0 auto;
}

/* Let the fixed-width columns shrink instead of pushing the row wide.
   Their widths are left exactly as the design set them. */
.sdlp-hero-copy,
.sdlp-hero-media,
.sdlp-split-copy,
.sdlp-split-media,
.sdlp-advcard,
.sdlp-modelcard,
.sdlp-usp-card,
.sdlp-levering-col,
.sdlp-prijs-card,
.sdlp-prep-card,
.sdlp-step-body,
.sdlp-atelier-img {
	min-width: 0;
	max-width: 100%;
}

/* A slaapcheck step is a number column beside its text. It shares its
   declaration with the slaapadviseur card grid, so it is spelled out here:
   this row must never wrap, or the text drops underneath the number. */
.sdlp-step-item { flex-wrap: nowrap; }
.sdlp-step-item > .sdlp-step-rulewrap { min-width: 0; }

/* --- headings scale with the viewport ---
   Each keeps its own ceiling, so the design's size hierarchy survives: the
   vw term is set just above size/1440 and the max clamps it back, which
   means every heading is exactly its drawn size at 1440 and above. */

.sdlp-h1 { font-size: clamp(34px, 4.2vw, 58px); }

.sdlp-page [class*="sdlp-h2--"] { font-size: clamp(27px, 3vw, 42px); }
.sdlp-page .sdlp-h2--light   { font-size: clamp(27px, 2.9vw, 40px); }
.sdlp-page .sdlp-h2--closing { font-size: clamp(28px, 3.2vw, 44px); }

.sdlp-page .sdlp-h3--21    { font-size: clamp(19px, 1.55vw, 21px); }
.sdlp-page .sdlp-h3--22,
.sdlp-page .sdlp-h3--22lh  { font-size: clamp(19px, 1.62vw, 22px); }
.sdlp-page .sdlp-h3--23,
.sdlp-page .sdlp-h3--23b   { font-size: clamp(20px, 1.7vw, 23px); }
.sdlp-page .sdlp-h3--24    { font-size: clamp(20px, 1.77vw, 24px); }
.sdlp-page .sdlp-h3--25    { font-size: clamp(21px, 1.84vw, 25px); }

/* --- images keep their proportions instead of a fixed box --- */

.sdlp-hero-img    { width: 100%; height: auto; aspect-ratio: 520 / 392; }
.sdlp-split-img   { width: 100%; height: auto; aspect-ratio: 460 / 520; }
.sdlp-atelier-img { width: 100%; height: auto; aspect-ratio: 374 / 230; }
.sdlp-advcard-img   { height: auto; aspect-ratio: 273 / 210; }
.sdlp-modelcard-img { height: auto; aspect-ratio: 370 / 236; }

/* The design's text `max-width` caps are left alone on purpose: a cap
   never overflows a narrower column, and overriding them to 100% would
   widen the measure at desktop (the slaapcheck step text is capped at
   470px, for instance, and reads as three lines because of it). */

/* ==========================================================================
   Below 1100px — the roomy 60–80px gutters between columns go first, which
   buys the columns enough width to carry on shrinking.
   ========================================================================== */

@media (max-width: 1100px) {

	.sdlp-duo          { gap: 44px; }
	.sdlp-split-row,
	.sdlp-atelier-cols,
	.sdlp-advies-grid,
	.sdlp-steps-row    { gap: 40px; }
	.sdlp-page .sdlp-sec { padding: 68px 0; }

}

/* ==========================================================================
   Below 900px — two-column bands stack and four-across grids go to two.
   From here on the rows wrap, so the items need explicit widths.
   ========================================================================== */

@media (max-width: 900px) {

	.sdlp-duo,
	.sdlp-split-row,
	.sdlp-steps-row,
	.sdlp-advcard-grid,
	.sdlp-modelcard-grid,
	.sdlp-levering-grid,
	.sdlp-advies-grid,
	.sdlp-usp-grid,
	.sdlp-cta-row { flex-wrap: wrap; }

	/* Stacked, the bands keep their source order — which puts the photo
	   first where the design has it on the left. The hero is the exception:
	   its photo belongs above the headline, not below the button. */
	.sdlp-duo { flex-direction: column; }
	.sdlp-sec--hero .sdlp-duo { flex-direction: column-reverse; }

	.sdlp-hero-copy,
	.sdlp-hero-media,
	.sdlp-split-copy,
	.sdlp-split-media { width: auto; max-width: none; }

	.sdlp-split-row  { flex-direction: column; }
	.sdlp-prijs-card { width: auto; max-width: none; }

	.sdlp-advcard      { width: calc(50% - 11px); }
	.sdlp-levering-col { width: calc(50% - 13px); }
	.sdlp-modelcard,
	.sdlp-usp-card     { width: calc(50% - 12px); }

	.sdlp-atelier-cols { flex-direction: column; gap: 0; }
	.sdlp-atelier-cols > * + * { margin-top: 18px; }

	.sdlp-advies-grid { gap: 32px; }
	.sdlp-advies-col  { flex: 1 1 100%; }

	/* the "je hoeft niets voor te bereiden" card drops under the steps */
	.sdlp-steps-row  { gap: 30px; }
	.sdlp-step-body  { flex: 1 1 100%; }
	.sdlp-prep-card  { width: 100%; max-width: none; }

	.sdlp-page .sdlp-sec { padding: 56px 0; }
	.sdlp-sec--hero      { padding: 40px 0 48px; }

	/* the stats band reads better stacked than squeezed */
	.sdlp-wrap--stats { flex-wrap: wrap; row-gap: 18px; }
	.sdlp-stat,
	.sdlp-stat--sep   { flex: 1 1 45%; border-right: 0; padding: 0; }
	.sdlp-stat-starswrap {
		flex: 1 1 100%;
		border-right: 0;
		padding-right: 0;
		margin-right: 0;
	}

	.sdlp-liescard { flex-direction: column; }
	.sdlp-liescard-img { flex: 0 0 auto; width: 100%; height: 240px; }

}

/* ==========================================================================
   Below 600px — single column throughout.
   ========================================================================== */

@media (max-width: 600px) {

	.sdlp-wrap { width: min(1160px, 100% - 32px); }

	.sdlp-advcard,
	.sdlp-levering-col,
	.sdlp-modelcard,
	.sdlp-usp-card { width: 100%; }

	.sdlp-atelier-row { flex-wrap: wrap; gap: 12px; }
	.sdlp-atelier-img { width: 100%; }

	/* the number column and its text stay side by side, just tighter */
	.sdlp-step-item { gap: 14px; }

	.sdlp-page .sdlp-sec { padding: 44px 0; }
	.sdlp-sec--ink       { padding: 56px 0; }

	.sdlp-btn,
	.sdlp-btn--gold { display: block; text-align: center; padding: 16px 20px; }

	.sdlp-cta-row { flex-direction: column; align-items: flex-start; gap: 12px; }
	.sdlp-cta-row .sdlp-btn { width: 100%; }

	/* the closing bar becomes a stacked block rather than a squeezed row */
	.sdlp-ctabar-inner { flex-direction: column; align-items: stretch; gap: 14px; }
	.sdlp-ctabar-btn   { text-align: center; }

	.sdlp-footline       { padding: 26px 0; }
	.sdlp-wrap--footline { font-size: 17px; }

	.sdlp-stat,
	.sdlp-stat--sep { flex: 1 1 100%; }

	.sdlp-liescard-img { height: 200px; }

}