/*
Theme Name: Van Vleymen Web & Software
Theme URI: https://www.vanvleymen.be
Author: Van Vleymen Web & Software
Author URI: https://www.vanvleymen.be
Description: Block theme voor Van Vleymen Web & Software — Hasselt, Limburg.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vanvleymen
Tags: block-theme, business
*/

/* =========================================================================
   1. DESIGN TOKENS
   Source: design/README.md §Design Tokens + SITE_PLAN OQ 18 (--sage-hover).
   ========================================================================= */
:root {
	/* Surfaces */
	--sand: #F7F3EE;
	--sand-2: #EDE6DC;

	/* Terracotta */
	--terra: #C27B5A;
	--terra-2: #D9987A;
	--terra-lt: #F5E6DC;
	--terra-a11y: #8B4B26;

	/* Sage */
	--sage: #4F7558;
	--sage-2: #7A9E82;
	--sage-lt: #C8DAC4;
	--sage-hover: #3D5C45; /* OQ 18 — filled pill hover (design files win) */

	/* Ink / text */
	--ink: #2C2420;
	--ink-2: #6B5E58;
	--muted: #8a7f74;

	/* Lines & inverted text */
	--rule: rgba(44, 36, 32, .1);
	--rule-light: rgba(247, 243, 238, .06);
	--on-ink: rgba(247, 243, 238, .75);
	--on-ink-soft: rgba(247, 243, 238, .65);
	--on-ink-faint: rgba(247, 243, 238, .5);
	--on-ink-label: rgba(247, 243, 238, .55);

	/* Type */
	--font-d: 'Lora', Georgia, serif;
	--font-b: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Geometry */
	--radius-pill: 40px;
	--radius-card: 16px;
	--radius-mock: 14px;
	--wrap: 1240px;
	--wrap-narrow: 1140px;
	--wrap-prose: 760px;
	--gutter: 32px;

	--ease: cubic-bezier(0.34, 1.56, 0.64, 1);
	--shadow-card: 0 10px 30px rgba(44, 36, 32, .08);
	--shadow-lift: 0 18px 44px rgba(44, 36, 32, .14);
}

/* =========================================================================
   2. BASE RESET + TYPOGRAPHY
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.vv {
	margin: 0;
	font-family: var(--font-b);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ink);
	background: var(--sand);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

body.vv img,
body.vv svg,
body.vv video { max-width: 100%; height: auto; display: block; }

body.vv input,
body.vv textarea,
body.vv button,
body.vv select,
body.vv a { -webkit-tap-highlight-color: transparent; }

/* ⚠ LESSON (the `:where(body.vv a)` lesson, generalised — see below): every base
   ELEMENT rule below is wrapped in `:where()`. An unwrapped `body.vv h2 em`
   (0,2,1) beats a component class like `.vv-cta-band__title em` (0,1,1) and
   painted the CTA band's accent sage-on-sage — invisible. Zeroing the base
   selector makes ANY component class win by default, which is what a base
   layer is for. Never re-specify these with `body.vv <element>`; never patch
   the symptom by escalating the component selector or with `!important`. */
:where(body.vv h1, body.vv h2, body.vv h3, body.vv h4, body.vv h5, body.vv h6) {
	font-family: var(--font-d);
	font-weight: 700;
	line-height: 1.12;
	color: var(--ink);
	margin: 0 0 .6em;
	text-wrap: balance;
}
:where(body.vv h1) { font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
:where(body.vv h2) { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
:where(body.vv h3) { font-size: 1.25rem; }
:where(body.vv h4) { font-size: 1.05rem; }
/* Accent word inside a heading: sage on light backgrounds. Components that sit
   on a dark/sage band (e.g. `.vv-cta-band__title em` → `--sage-lt`) override
   this with a plain class rule — possible only because this rule is (0,0,1). */
:where(body.vv h1, body.vv h2, body.vv h3) em {
	font-style: italic;
	font-weight: 700;
	color: var(--sage);
}
:where(body.vv p) { margin: 0 0 1.1em; }
:where(body.vv p:last-child) { margin-bottom: 0; }

/* ⚠ LESSON: an unwrapped `body.vv a` (0,1,1) beats `.vv-btn--primary` (0,1,0)
   and makes light-on-dark button labels invisible. :where() zeroes specificity. */
:where(body.vv a) { color: var(--sage); text-decoration: none; }
:where(body.vv a:hover) { color: var(--sage-hover); }

:where(body.vv ul, body.vv ol) { margin: 0 0 1.1em; padding-left: 1.2em; }

body.vv :focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

/* =========================================================================
   3. SHARED PRIMITIVES (global — used by patterns & templates, 0.5-N.3)
   ========================================================================= */

/* 3.1 Container */
.vv-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.vv-wrap--narrow { max-width: var(--wrap-narrow); }
.vv-wrap--prose { max-width: var(--wrap-prose); }

/* 3.2 Buttons — pill, 12.5px, 600, .08em, uppercase
   ⚠ LESSON (same trap as `body.vv a` / `body.vv h2 em` above): this base rule
   used to be written `.vv-btn, body.vv .vv-btn` (0,2,0), which out-specified
   every `.vv-btn--*` modifier (0,1,0) and forced the `border` shorthand's
   `transparent` onto `.vv-btn--outline` / `.vv-btn--outline-light` — the
   outline pills rendered as bare text. `:where()` zeroes the base layer so the
   modifiers below win by default. Never re-specify a base with `body.vv .cls`.
   ⚠ The `body.vv` scope is kept but wrapped in `:where()`, so the rule weighs
   exactly (0,1,0) — one class, like every `.vv-btn--*` modifier, which then
   wins on source order. Do NOT drop to a full `:where(.vv-btn)` (0,0,0):
   WordPress prints its theme.json element styles as `:root :where(…)` at
   (0,0,1), which would then out-specify the whole base layer. */
:where(body.vv) .vv-btn,
.vv-btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-b);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	padding: 14px 26px;
	border-radius: var(--radius-pill);
	border: 1.5px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background .25s, color .25s, border-color .25s, transform .2s, box-shadow .25s;
}

.vv-btn--primary { background: var(--sage); color: var(--sand); }
.vv-btn--primary:hover {
	background: var(--sage-hover);
	color: var(--sand);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(79, 117, 88, .25);
}

.vv-btn--terra { background: var(--terra); color: var(--sand); }
.vv-btn--terra:hover {
	background: var(--terra-2);
	color: var(--sand);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(194, 123, 90, .25);
}

.vv-btn--outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.vv-btn--outline:hover { border-color: var(--sage); color: var(--sage); transform: translateY(-2px); }

/* On dark / sage surfaces (CTA band, footer, cookie banner) */
.vv-btn--sand { background: var(--sand); color: var(--sage-hover); }
.vv-btn--sand:hover { background: var(--sage-lt); color: var(--sage-hover); }

.vv-btn--outline-light {
	background: transparent;
	color: var(--sand);
	border: 1px solid rgba(247, 243, 238, .4);
}
.vv-btn--outline-light:hover { border-color: var(--sand); color: var(--sand); }

/* 3.3 Section label — 11px / .18em / uppercase / #8B4B26 + 18x2px dash */
.vv-label {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-b);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--terra-a11y);
	margin: 0 0 1rem;
}
.vv-label::before {
	content: '';
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	flex: 0 0 auto;
}
.vv-label--light { color: var(--sage-lt); }

/* 3.4 Checklist */
.vv-check { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 10px; }
.vv-check li {
	position: relative;
	padding-left: 28px;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ink-2);
}
.vv-check li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .45em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--sage);
	border-bottom: 2px solid var(--sage);
	transform: rotate(-45deg);
}
.vv-check--light li { color: var(--on-ink); }
.vv-check--light li::before { border-color: var(--sage-lt); }

/* 3.5 Misc helpers */
.vv-muted { color: var(--ink-2); }
.vv-screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* 3.6 Page shell — full-bleed sections (0.5-N.3)
   templates/page.html renders `wp:post-content` and the BUILD_SPEC page wrapper
   is a *constrained* group, so core prints
   `.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
    { max-width: contentSize; margin-inline: auto !important }`
   plus a 24px `> * { margin-block-start }` gap. That clamps every band the
   design wants edge-to-edge (CTA band, sand-2 section bands, the Home hero
   wall) and puts a gap between contiguous sections.

   Released here ONCE, globally, so a page the client builds from the
   registered patterns behaves the same as the eight built pages.

   ⚠ The release is OPT-IN, never blanket. `body.vv .vvpage > * { max-width:
   none }` also neutralised every LEGITIMATE inner constraint — it stretched
   /zorgplan/'s hero and add-on stack to the full viewport while the card grid
   between them stayed at 1140px, and it flattened `.vv-wrap--narrow` on
   /blog/ so nothing lined up with the header, CTA band and footer.

   A direct child of the page wrapper escapes ONLY when it is a real band, and
   the theme's own convention says exactly which those are: a full-bleed band
   owns its width through an inner container, so it is a section that has a
   `…__inner` / `.vv-wrap*` child (every pattern 0.5-N.3 is built that way),
   or it is explicitly marked `alignfull` / `.vv-bleed` / is the CTA band.
   Everything else — a `.vv-wrap` used directly as a section, a section that
   carries its own `max-width` like `.vv-care-grid` or `.vv-zorg-hero` — keeps
   its constraint and stays centred by core (contentSize = 1140px = --wrap-narrow).
   `.vv-wrap*` is excluded explicitly so a client dropping a bare container in
   the wrapper can never be stretched.

   ⚠ Never use `width: 100vw` for this: 100vw includes the scrollbar width and
   the build validator fails on any horizontal scrollbar. `width: auto` +
   `max-width: none` simply fills the wrapper, which can never overflow.
   Core's `margin-inline: auto !important` is left alone — with no max-width
   the auto margins compute to 0. */

/* Core's constrained/flow layout also injects a 24px `> * + *` sibling gap;
   contiguous bands must touch, so that is reset for every child (width-safe). */
body.vv .vvpage > * { margin-block: 0; }

body.vv .vvpage > .vv-bleed,
body.vv .vvpage > .alignfull,
body.vv .vvpage > .vv-cta-band,
body.vv .vvpage > :not(.vv-wrap):has(> [class*="__inner"]),
body.vv .vvpage > :not(.vv-wrap):has(> .vv-wrap) {
	max-width: none;
	width: auto;
}

/* Safety net for a client page where loose text is typed straight into the
   wrapper instead of into a section group: keep it readable and centred
   instead of stretched across the full viewport. */
body.vv .vvpage > p,
body.vv .vvpage > h1,
body.vv .vvpage > h2,
body.vv .vvpage > h3,
body.vv .vvpage > h4,
body.vv .vvpage > ul,
body.vv .vvpage > ol {
	max-width: var(--wrap-prose);
	margin-inline: auto;
	margin-block: 0 1.1em;
	padding-inline: var(--gutter);
}

/* The CTA band is chrome, not page content: it must bleed edge-to-edge in any
   wrapper it lands in (page wrapper, single.html <main>, a client pattern).
   `body.vv` (0,1,1) outranks core's layout rule (0,1,0) whatever the order. */
body.vv .vv-cta-band {
	max-width: none;
	width: auto;
}

/* 3.7 CORE BLOCK-GAP NEUTRALISATION — the ONE systemic rule set
   =========================================================================
   ⚠ THE bug this theme kept re-growing. When block-gap support is enabled,
   WordPress prints, in global-styles-inline-css, AFTER the theme stylesheet:

       :root :where(.wp-site-blocks) > *      { margin-block-start: 24px; margin-block-end: 0 }
       :root :where(.is-layout-flow) > *      { margin-block-start: 24px; margin-block-end: 0 }
       :root :where(.is-layout-constrained) > * { … idem … }

   `:root` is a pseudo-CLASS and `:where()` weighs nothing, so those rules are
   (0,1,0) — exactly as strong as a one-class theme rule, and they win on source
   order. Consequences that reached production:
     · `.wp-site-blocks > *`  → 24px white band between header and the page
       wrapper AND between the wrapper and the footer (the user report).
     · `.vv-header__inner > *` (a FLEX row, but core still injects the margin
       on the flex items) → nav + CTA pushed 24px down, so the menu sat ~11px
       below the wordmark instead of being centred on it.
     · every new `is-layout-flow` component the theme lays out itself.
   It was patched component-by-component (`.vv-cta-band__*`, `.vv-card-grid-*`,
   `.vv-care-grid`, …) — ~40 one-off resets — and it kept resurfacing on the
   next component. That whack-a-mole ends here.

   PRIMARY FIX = theme.json `settings.spacing.blockGap: null`, which switches
   the injection OFF at the source (see theme.json for the rationale: every
   flex/grid gap and every prose margin in this theme is already theme-owned,
   so nothing depended on the injected value). `null` — not `false` — because
   `appearanceTools: true` opts blockGap IN only when the key is *unset*
   (WP_Theme_JSON::do_opt_in_into_settings uses an "unset prop" marker, so an
   explicit null is respected).

   BELOW = defence in depth, so the two reported defects can never come back if
   block gap is re-enabled by a plugin, by a user global-styles setting, or by a
   future core default. Deliberately expressed as a CONVENTION, not a list of
   components: `body.vv …` is (0,2,0) and outranks core's (0,1,0).
     (a) the site shell: header ↔ content ↔ footer always touch;
     (b) anything the THEME lays out itself — every container carrying a `vv-`
         class owns its own `gap`/`padding`, so its children never take a
         core-injected top margin. A NEW `.vv-*` component is covered the day
         it is written; no follow-up patch needed.
   Only `margin-block-start` is zeroed in (b): the theme's vertical rhythm is
   expressed as BOTTOM margins (base `p { margin: 0 0 1.1em }`, headings
   `0 0 .6em`, `tpl-post.css .wp-block-post-content > * { margin-block: 0 1.3em }`),
   so prose spacing inside article bodies and legal pages survives untouched.
   No `!important` anywhere — specificity alone is enough. */
body.vv .wp-site-blocks > * { margin-block: 0; }
body.vv [class*="vv-"] > * { margin-block-start: 0; }

/* =========================================================================
   4. CHROME — HEADER / NAV  (design/Nav.dc.html)
   ========================================================================= */
.vv-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(247, 243, 238, .92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--rule);
	transition: box-shadow .3s;
}
.vv-header.is-scrolled { box-shadow: 0 2px 18px rgba(44, 36, 32, .08); }

.vv-header__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px var(--gutter);
}
/* Core's `is-layout-flow` injects `> * + * { margin-block-start }` — kill it
   inside the flex/grid chrome wrappers so items are not nudged down. */
.vv-header__inner > *,
.vv-footer__inner > *,
.vv-cta-band__inner > *,
.vv-footer__col > * { margin-block-start: 0; margin-block-end: 0; }

/* The `__text` / `__actions` groups inside the band are plain `is-layout-flow`
   groups, so core's `:root :where(.is-layout-flow) > * { margin-block-start:
   24px }` applies to their children. That rule is (0,1,0) — `:root` counts as a
   pseudo-class — and global-styles is printed AFTER the theme stylesheet, so a
   one-class reset loses on source order. Two classes (0,2,0) are required, or
   the second CTA pill sits 24px below the first. */
body.vv .vv-cta-band__text > *,
body.vv .vv-cta-band__actions > * { margin-block-start: 0; margin-block-end: 0; }

.vv-logo,
body.vv .vv-logo {
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .01em;
	color: var(--sage);
	text-decoration: none;
	white-space: nowrap;
}
.vv-logo span { color: var(--terra); font-style: italic; font-weight: 400; }

/* wp:navigation — rendered as the classic `primary` menu (wp_nav_menu) by the
   `pre_render_block` filter in mu-plugins/vanvleymen-content-model.php §16.
   The `wp-block-navigation*` selectors stay so a ref'd nav block would still fit. */
.vv-header .vv-nav { flex: 0 1 auto; min-width: 0; }
.vv-header .vv-nav .wp-block-navigation__container,
.vv-header .vv-nav ul {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.vv-header .vv-nav li { margin: 0; white-space: nowrap; }
.vv-header .vv-nav a,
.vv-header .vv-nav .wp-block-navigation-item__content {
	font-family: var(--font-b);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink-2);
	transition: color .2s;
}
.vv-header .vv-nav a:hover { color: var(--sage); }

/* Active state comes from WordPress itself — no JS (SITE_PLAN §6.3) */
.vv-header .vv-nav .current-menu-item > a,
.vv-header .vv-nav .current_page_item > a,
.vv-header .vv-nav .current-menu-ancestor > a,
.vv-header .vv-nav .current-page-ancestor > a,
.vv-header .vv-nav .current-menu-item > .wp-block-navigation-item__content,
.vv-header .vv-nav .current-page-ancestor > .wp-block-navigation-item__content {
	color: var(--terra);
	font-weight: 700;
}

.vv-header__cta {
	background: var(--sage);
	color: var(--sand);
	font-family: var(--font-b);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 10px 22px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	transition: background .25s;
}
.vv-header__cta:hover { background: var(--sage-hover); color: var(--sand); }

/* Hamburger */
.vv-hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 4px;
	background: none;
	border: 0;
	cursor: pointer;
	flex-shrink: 0;
}
.vv-hamburger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
}

/* Fullscreen mobile overlay (built by assets/js/site.js) */
.vv-mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 101;
	background: var(--sand);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.2rem;
	padding: 5rem 24px 3rem;
	overflow-y: auto;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
}
.vv-mobile-nav.is-open { display: flex; opacity: 1; pointer-events: all; }
.vv-mobile-nav a {
	font-family: var(--font-d);
	font-size: 2rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}
.vv-mobile-nav a:hover { color: var(--sage); }
.vv-mobile-nav a.is-current { color: var(--terra); }
.vv-mobile-nav .vv-mobile-nav__cta {
	font-family: var(--font-b);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sand);
	background: var(--sage);
	padding: 14px 26px;
	border-radius: var(--radius-pill);
}
.vv-mobile-nav__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	font-size: 1.8rem;
	line-height: 1;
	color: var(--ink-2);
	background: none;
	border: none;
	cursor: pointer;
}

/* =========================================================================
   5. CHROME — CTA BAND  (design/CTA.dc.html)
   ========================================================================= */
.vv-cta-band {
	background: var(--sage);
	color: var(--sand);
	font-family: var(--font-b);
}
.vv-cta-band__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.vv-cta-band__text { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
/* Base layer for the band heading — the `body.vv` scope is wrapped in
   `:where()` so the rule weighs (0,1,0) and the ≤900px override below
   (`.vv-cta-band__title { font-size: 27px }`, also 0,1,0) wins on source order.
   Written unwrapped as `body.vv .vv-cta-band__title` (0,2,0) it pinned the
   heading at 34px on mobile. It must stay at one class, not (0,0,0): the
   heading colour has to beat WordPress' theme.json `:root :where(h1…h6)`
   element style (0,0,1), or the sand title turns ink-on-sage. */
:where(body.vv) .vv-cta-band__title,
.vv-cta-band__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 600;
	font-size: 34px;
	line-height: 1.2;
	color: var(--sand);
}
.vv-cta-band__title em { font-style: italic; color: var(--sage-lt); }
.vv-cta-band__lead {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(247, 243, 238, .85);
}
.vv-cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.vv-cta-band .vv-btn { font-size: 12px; letter-spacing: .12em; padding: 15px 26px; border-radius: 999px; }

/* =========================================================================
   6. CHROME — FOOTER  (design/Footer.dc.html)
   ========================================================================= */
.vv-footer {
	background: var(--ink);
	color: var(--on-ink);
	font-family: var(--font-b);
}
.vv-footer__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 64px var(--gutter) 32px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
}
.vv-footer__col { display: flex; flex-direction: column; gap: 10px; }
.vv-footer__col--brand { gap: 14px; }

.vv-footer__brand {
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 18px;
	color: var(--sand);
}
.vv-footer__brand span { color: var(--terra-2); font-style: italic; font-weight: 400; }
.vv-footer__tagline {
	margin: 0;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.75;
	max-width: 280px;
	color: var(--on-ink-soft);
}
.vv-footer__heading {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--on-ink-label);
	font-weight: 600;
	margin-bottom: 4px;
}
.vv-footer a {
	color: var(--on-ink);
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 300;
	transition: color .2s;
}
.vv-footer a:hover { color: var(--sage-lt); }
.vv-footer__col span,
.vv-footer__col p { font-size: 13.5px; font-weight: 300; margin: 0; }

.vv-footer__col ul,
.vv-footer .wp-block-navigation__container {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vv-footer__bar { border-top: 1px solid var(--rule-light); }
.vv-footer__bar-inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 20px var(--gutter);
	font-size: 12px;
	color: var(--on-ink-faint);
}

/* =========================================================================
   7. COOKIE BANNER (markup injected by assets/js/site.js)
   ========================================================================= */
.vv-cookie {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: var(--ink);
	padding: 1.2rem var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	box-shadow: 0 -4px 24px rgba(44, 36, 32, .18);
	transform: translateY(100%);
	transition: transform .4s var(--ease);
}
.vv-cookie.is-visible { transform: translateY(0); }
.vv-cookie p {
	margin: 0;
	font-size: .87rem;
	font-weight: 300;
	color: rgba(247, 243, 238, .7);
	line-height: 1.6;
	max-width: 640px;
}
.vv-cookie p a { color: var(--terra-2); text-decoration: underline; }
.vv-cookie__actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; flex-wrap: wrap; }
.vv-cookie .vv-btn { padding: .65rem 1.4rem; font-size: 12px; }
.vv-cookie .vv-btn--outline { color: rgba(247, 243, 238, .6); border-color: rgba(247, 243, 238, .2); }
.vv-cookie .vv-btn--outline:hover { color: var(--sand); border-color: var(--sand); background: transparent; }
.vv-cookie__link { font-size: .8rem; color: rgba(247, 243, 238, .6); text-decoration: underline; }
.vv-cookie__link:hover { color: var(--sand); }

/* =========================================================================
   8. RESPONSIVE — hamburger, column collapse, hide hero visuals
   ========================================================================= */
@media (max-width: 900px) {
	:root { --gutter: 24px; }

	.vv-header__inner { padding: 12px var(--gutter); }
	.vv-header .vv-nav,
	.vv-header__cta { display: none; }
	.vv-hamburger { display: flex; }
	.vv-logo { font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

	/* Base layer, so :where()-zeroed like §2 — a component class must still win. */
	:where(body.vv h1) { font-size: clamp(2rem, 8vw, 2.6rem); }
	:where(body.vv h2) { font-size: clamp(1.6rem, 6vw, 2rem); }

	.vv-cta-band__inner { padding: 48px var(--gutter); flex-direction: column; align-items: flex-start; gap: 24px; }
	.vv-cta-band__title { font-size: 27px; }

	.vv-footer__inner { grid-template-columns: 1fr; gap: 32px; padding: 48px var(--gutter) 24px; }
	.vv-footer__tagline { max-width: none; }

	.vv-cookie { padding: 1rem var(--gutter); }
	.vv-cookie__actions { width: 100%; }

	/* Hero visuals are decorative below 900px (design/README.md) */
	.vv-hide-mobile,
	.vv-hero__visual { display: none !important; }
}

/* =========================================================================
   9. PATTERN STYLES (0.5-N.3 — promoted from the per-page stylesheets)

   Every class used by a registered block pattern (vanvleymen/patterns/*.php)
   or by a post template MUST be styled here, globally under `body.vv`.
   A page the client creates from a pattern has NO per-page stylesheet and
   never will — without these rules it would render unstyled.

   Promoted from (BUILD_SPEC §2.2 `@promote` banners + the rules those
   patterns depend on): home.css · concepten.css · diensten.css ·
   webdesign.css · lokale-seo.css · over-ons.css · zorgplan.css ·
   prijzen.css · contact.css. Declarations are verbatim; only the
   `.vvpage-<slug>` scope was replaced by `body.vv`. Each component keeps
   its own @media counterpart directly below it. Per-page files load AFTER
   style.css and may still override with `body.vv .vvpage-<slug> …`
   (0,3,1 beats the 0,2,1 used here).
   ========================================================================= */

/* -------------------------------------------------------------------------
   9.0 Section shell — patterns are inserted into a bare page wrapper, which
   `body.vv .vvpage > *` (§3.6) releases to full width. Every pattern
   therefore carries its own band + inner container.
   ------------------------------------------------------------------------- */
body.vv .vv-section { position: relative; }
body.vv .vv-section--sand { background: var(--sand); }
body.vv .vv-section--sand-2 { background: var(--sand-2); }
body.vv .vv-section--white { background: #fff; }

body.vv .vv-section__inner {
	max-width: var(--wrap-narrow);
	margin-inline: auto;
	padding: 88px var(--gutter);
}
body.vv .vv-section__inner--wide { max-width: var(--wrap); }
body.vv .vv-section__inner--prose { max-width: var(--wrap-prose); }
body.vv .vv-section__inner--tight { padding-block: 0 88px; }

@media (max-width: 900px) {
	body.vv .vv-section__inner { padding: 56px var(--gutter); }
	body.vv .vv-section__inner--tight { padding-block: 0 56px; }
}

/* -------------------------------------------------------------------------
   9.1 vv/page-intro — eyebrow + Lora H1 with <em> + lead  (was concepten.css)
   ------------------------------------------------------------------------- */
body.vv .vv-page-intro {
	padding: 88px var(--gutter) 56px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
body.vv .vv-page-intro > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-page-intro .vv-label { margin: 0; }

body.vv .vv-page-intro__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 52px;
	line-height: 1.1;
	max-width: 680px;
	text-wrap: balance;
}
body.vv .vv-page-intro__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--sage);
}

body.vv .vv-page-intro__lead {
	margin: 0;
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--ink-2);
	max-width: 560px;
}

@media (max-width: 900px) {
	body.vv .vv-page-intro { padding: 64px 24px 40px; gap: 14px; }
	body.vv .vv-page-intro__title { font-size: 36px; }
	body.vv .vv-page-intro__lead { font-size: 15px; max-width: none; }
}
@media (max-width: 600px) {
	body.vv .vv-page-intro { padding: 48px 20px 32px; }
	body.vv .vv-page-intro__title { font-size: 30px; }
}

/* -------------------------------------------------------------------------
   9.2 vv/split-intro — head left, lead right  (was home.css)
   ------------------------------------------------------------------------- */
body.vv .vv-split-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: end;
	margin-bottom: 64px;
}
body.vv .vv-split-intro > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-split-intro__head > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-split-intro__head .vv-label { margin: 0 0 16px; }
body.vv .vv-split-intro__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 46px;
	line-height: 1.1;
}
body.vv .vv-split-intro__lead {
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--ink-2);
}

@media (max-width: 900px) {
	body.vv .vv-split-intro {
		grid-template-columns: 1fr;
		gap: 20px;
		align-items: start;
		margin-bottom: 40px;
	}
	body.vv .vv-split-intro__title { font-size: 32px; }
}

/* -------------------------------------------------------------------------
   9.3 vv/service-cards — 3 icon cards with watermark number  (was home.css)
   ------------------------------------------------------------------------- */
body.vv .vv-service-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
body.vv .vv-service-cards > * { margin-block-start: 0; margin-block-end: 0; }

body.vv .vv-service-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--sand-2);
	border-radius: 20px;
	padding: 42px 35px;
	color: var(--ink);
	transition: box-shadow .3s, transform .3s;
}
body.vv .vv-service-card > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-service-card:hover {
	box-shadow: 0 20px 50px rgba(44, 36, 32, .1);
	transform: translateY(-3px);
}

body.vv .vv-service-card__topline {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sage), var(--terra));
}
body.vv .vv-service-card__num {
	position: absolute;
	top: 24px;
	right: 32px;
	font-family: var(--font-d);
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	color: rgba(44, 36, 32, .05);
}
body.vv .vv-service-card__icon {
	width: 52px;
	height: 52px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	background: var(--sand);
	border-radius: 14px;
	color: var(--sage);
	margin-bottom: 26px;
	box-shadow: 0 4px 16px rgba(79, 117, 88, .15);
}
body.vv .vv-service-card__title {
	margin: 0 0 10px;
	font-family: var(--font-d);
	font-size: 22px;
	font-weight: 700;
}
body.vv .vv-service-card__text {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--ink-2);
}
body.vv .vv-service-card__link {
	margin: auto 0 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
body.vv .vv-service-card__link a { color: var(--sage); text-decoration: none; }
/* Stretched link: the whole card is clickable, one link in the a11y tree. */
body.vv .vv-service-card__link a::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 20px;
}
body.vv .vv-service-card:hover .vv-service-card__link a { color: var(--sage-hover); }

@media (max-width: 900px) {
	body.vv .vv-service-cards { grid-template-columns: 1fr; gap: 20px; }
	body.vv .vv-service-card { padding: 34px 28px; }
}

/* -------------------------------------------------------------------------
   9.4 vv/service-row — alternating text/image rows  (was diensten.css)
   ------------------------------------------------------------------------- */
body.vv .vv-svc-rows__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--gutter) 96px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

body.vv .vv-svc-row {
	background: var(--sand-2);
	border-radius: var(--radius-card);
	padding: 44px;
	display: grid;
	gap: 48px;
	align-items: center;
}

body.vv .vv-svc-row--text-first { grid-template-columns: 1.2fr 1fr; }
body.vv .vv-svc-row--media-first { grid-template-columns: 1fr 1.2fr; }

body.vv .vv-svc-row__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

body.vv .vv-svc-row__num {
	margin: 0;
	font-family: var(--font-d);
	font-style: italic;
	font-weight: 400;
	font-size: 30px;
	line-height: 1;
	color: rgba(44, 36, 32, .22);
}

body.vv .vv-svc-row__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 600;
	font-size: 30px;
	line-height: 1.2;
	color: var(--ink);
}

body.vv .vv-svc-row__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink-2);
}

body.vv .vv-svc-row__check {
	margin: 0;
	gap: 8px;
}

body.vv .vv-svc-row__check li {
	padding-left: 26px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ink-2);
}

body.vv .vv-svc-row__cta { margin: 8px 0 0; }

body.vv .vv-svc-row__cta .vv-btn {
	font-size: 12px;
	letter-spacing: .12em;
	padding: 14px 24px;
	border-radius: 999px;
}

body.vv .vv-svc-row__media {
	height: 280px;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	min-width: 0;
}

body.vv .vv-svc-row__shot { margin: 0; height: 100%; }

/* Screenshots are always top-cropped (BUILD_SPEC §5). */
body.vv .vv-svc-row__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
}

@media (max-width: 900px) {
	body.vv .vv-svc-rows__inner { padding: 0 var(--gutter) 64px; gap: 20px; }
	body.vv .vv-svc-row--text-first,
	body.vv .vv-svc-row--media-first {
		grid-template-columns: minmax(0, 1fr);
		padding: 26px 22px 30px;
		gap: 24px;
	}
	/* Image always above the text once the row stacks. */
	body.vv .vv-svc-row__media { order: -1; height: 210px; }
	body.vv .vv-svc-row__title { font-size: 25px; }
	body.vv .vv-svc-row__cta .vv-btn { padding: 15px 24px; min-height: 44px; white-space: normal; }
}
@media (max-width: 600px) {
	body.vv .vv-svc-row--text-first,
	body.vv .vv-svc-row--media-first { padding: 22px 18px 26px; }
	body.vv .vv-svc-row__media { height: 180px; }
	body.vv .vv-svc-row__num { font-size: 26px; }
}

/* -------------------------------------------------------------------------
   9.5 vv/card-grid-3 + vv/card-grid-6 — the same 3-column feature grid
       (was webdesign.css; the 3-card variant is the identical grid)
   ------------------------------------------------------------------------- */
body.vv .vv-card-grid-3,
body.vv .vv-card-grid-6 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 40px;
}

/* ⚠ LESSON: core's `is-layout-flow` prints `> * + * { margin-block-start: 24px }`
   on every wp:group. On a GRID container that margin does not collapse and is
   not absorbed by `gap`: it pushes every item except the first down 24px AND
   eats 24px off its stretched height, so a 3-column card row renders ragged
   (staggered tops, unequal card heights). Every §9 grid must therefore reset
   the sibling margin on its direct children — the same reset already applied
   to the chrome wrappers in §4. Add any new grid container to this list. */
body.vv .vv-card-grid-3 > *,
body.vv .vv-card-grid-6 > *,
body.vv .vv-care-grid > * { margin-block-start: 0; margin-block-end: 0; }

body.vv .vv-feature-card {
	background: var(--sand);
	border-radius: var(--radius-mock);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow .25s, transform .2s;
}
body.vv .vv-feature-card:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}
body.vv .vv-feature-card > * { margin: 0; }
body.vv .vv-feature-card__title {
	margin: 0;
	font-family: var(--font-d);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}
body.vv .vv-feature-card__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
}
body.vv .vv-feature-card__text a {
	color: var(--sage);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.vv .vv-feature-card__text a:hover { color: var(--terra); }

@media (max-width: 900px) {
	body.vv .vv-card-grid-3,
	body.vv .vv-card-grid-6 {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 28px;
	}
}
@media (max-width: 600px) {
	body.vv .vv-feature-card { padding: 22px; }
}

/* -------------------------------------------------------------------------
   9.6 vv/numbered-cards-3 — 3 numbered pillar cards  (was lokale-seo.css)
   ------------------------------------------------------------------------- */
body.vv .vv-numbered-cards-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 40px;
}
body.vv .vv-numbered-cards-3 > * { margin-block-start: 0; margin-block-end: 0; }

body.vv .vv-numbered-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	background: var(--sand);
	border-radius: var(--radius-mock);
	padding: 28px;
}
body.vv .vv-numbered-card > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-numbered-card__num {
	margin: 0;
	font-family: var(--font-d);
	font-style: italic;
	font-size: 24px;
	line-height: 1;
	color: var(--terra);
}
body.vv .vv-numbered-card__title {
	margin: 0;
	font-family: var(--font-d);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
}
body.vv .vv-numbered-card__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
}

@media (max-width: 900px) {
	body.vv .vv-numbered-cards-3 { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
	body.vv .vv-numbered-card { padding: 24px; }
}

/* -------------------------------------------------------------------------
   9.7 vv/process-steps — numbered step rows  (was home.css; the darker
       /diensten/webdesign/ variant stays a page override in webdesign.css)
   ------------------------------------------------------------------------- */
body.vv .vv-process-steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
body.vv .vv-process-steps > * { margin-block-start: 0; margin-block-end: 0; }

body.vv .vv-step {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	background: var(--sand);
	border: 1px solid rgba(44, 36, 32, .06);
	border-radius: var(--radius-card);
	padding: 26px 30px;
}
body.vv .vv-step > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-step__num {
	flex: 0 0 auto;
	margin: 0;
	font-family: var(--font-d);
	font-style: italic;
	font-size: 24px;
	line-height: 1.2;
	color: var(--terra);
}
body.vv .vv-step__body > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-step__title {
	margin: 0 0 6px;
	font-family: var(--font-d);
	font-size: 18px;
	font-weight: 700;
}
body.vv .vv-step__text {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--ink-2);
}
body.vv .vv-step__text a {
	color: var(--sage);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.vv .vv-step__text a:hover { color: var(--terra); }

@media (max-width: 900px) {
	body.vv .vv-step { padding: 22px 24px; gap: 16px; }
}

/* -------------------------------------------------------------------------
   9.8 vv/careplan-grid — the zorgplan cards  (was zorgplan.css)
   ------------------------------------------------------------------------- */
body.vv .vv-care-grid {
	max-width: var(--wrap-narrow);
	margin-inline: auto;
	padding: 0 var(--gutter) 64px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 22px;
}

body.vv .vv-care-card {
	background: var(--sand-2);
	border-radius: var(--radius-card);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
	transition: box-shadow .25s, transform .2s;
}
body.vv .vv-care-card:hover {
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}

body.vv .vv-care-card__tag {
	position: absolute;
	top: 22px;
	right: 24px;
	margin: 0;
	max-width: calc(100% - 48px);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--terra-a11y);
	background: var(--terra-lt);
	padding: 4px 10px;
	border-radius: 100px;
	line-height: 1.4;
}

body.vv .vv-care-card__icon {
	width: 44px;
	height: 44px;
	background: var(--sand);
	border-radius: 12px;
	display: grid;
	place-items: center;
	color: var(--sage);
	flex: 0 0 auto;
}

body.vv .vv-care-card__title {
	margin: 6px 0 0;
	font-family: var(--font-d);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
}

body.vv .vv-care-card__body {
	margin: 0;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ink-2);
}

/* Sage accent variant */
body.vv .vv-care-card--accent { background: var(--sage); color: var(--sand); }
body.vv .vv-care-card--accent .vv-care-card__tag {
	color: var(--sand);
	background: rgba(247, 243, 238, .15);
}
body.vv .vv-care-card--accent .vv-care-card__icon {
	background: rgba(247, 243, 238, .12);
	color: var(--sage-lt);
}
body.vv .vv-care-card--accent .vv-care-card__title { color: var(--sand); }
body.vv .vv-care-card--accent .vv-care-card__body { color: rgba(247, 243, 238, .85); }

@media (max-width: 900px) {
	body.vv .vv-care-grid { grid-template-columns: 1fr; gap: 16px; padding: 0 20px 40px; }
	body.vv .vv-care-card { padding: 24px; }
	body.vv .vv-care-card__tag { position: static; align-self: flex-start; max-width: 100%; }
}

/* -------------------------------------------------------------------------
   9.9 vv/prijskaarten — 3 price cards  (was prijzen.css)
   ------------------------------------------------------------------------- */
body.vv .vvp-cards {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 26px;
	align-items: stretch;
	padding: 0 32px 48px;
}
body.vv .vvp-cards > *,
body.vv .vvp-card > *,
body.vv .vvp-card__head > *,
body.vv .vvp-card__price > * { margin-block-start: 0; margin-block-end: 0; }

body.vv .vvp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--sand-2);
	border-radius: 20px;
	padding: 38px 32px;
}

body.vv .vvp-card--dark {
	background: var(--ink);
	color: var(--sand);
	box-shadow: 0 24px 48px rgba(44, 36, 32, .22);
}

body.vv .vvp-card__badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--terra);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 6px 16px;
	border-radius: 100px;
	white-space: nowrap;
}

body.vv .vvp-card__head { display: block; }

body.vv .vvp-card__tier {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--terra-a11y);
}
body.vv .vvp-card--dark .vvp-card__tier { color: var(--terra-2); }

body.vv .vvp-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin-top: 10px;
	font-family: var(--font-d);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.05;
}
body.vv .vvp-card__cur,
body.vv .vvp-card__amount { font: inherit; color: inherit; }
body.vv .vvp-card__pre {
	font-size: 18px;
	font-weight: 400;
	margin-right: .22em;
}
body.vv .vvp-card__qual {
	margin-left: .28em;
	font-family: var(--font-b);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ink-2);
}
body.vv .vvp-card--dark .vvp-card__qual { color: rgba(247, 243, 238, .6); }

body.vv .vvp-card__desc {
	margin-top: 10px;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ink-2);
}
body.vv .vvp-card--dark .vvp-card__desc { color: rgba(247, 243, 238, .75); }

body.vv .vvp-card__list { margin: 0; gap: 10px; }
body.vv .vvp-card__list li {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
}
body.vv .vvp-card--dark .vvp-card__list li { color: rgba(247, 243, 238, .85); }

body.vv .vvp-card__cta { margin-top: auto; }
body.vv .vvp-card__cta .vv-btn {
	display: flex;
	justify-content: center;
	font-size: 12px;
	padding: 14px 24px;
}
body.vv .vvp-card__cta .vv-btn--outline {
	border: 1.5px solid rgba(44, 36, 32, .15);
	color: var(--ink);
}
body.vv .vvp-card__cta .vv-btn--outline:hover,
body.vv .vvp-card__cta .vv-btn--outline:focus-visible {
	border-color: var(--sage);
	color: var(--sage);
}
body.vv .vvp-card__cta .vv-btn--terra,
body.vv .vvp-card__cta .vv-btn--terra:hover { color: #fff; }

@media (max-width: 900px) {
	body.vv .vvp-cards { grid-template-columns: 1fr; gap: 34px; padding: 0 20px 40px; }
	body.vv .vvp-card { padding: 34px 24px; }
	body.vv .vvp-card__price { font-size: 38px; }
}
@media (max-width: 600px) {
	body.vv .vvp-card__cta .vv-btn { width: 100%; white-space: normal; text-align: center; }
}

/* -------------------------------------------------------------------------
   9.10 vv/addon-rij — optional add-on rows + reassurance note  (prijzen.css)
   ------------------------------------------------------------------------- */
body.vv .vvp-addons {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 32px 80px;
}
body.vv .vvp-addons > *,
body.vv .vvp-addon > *,
body.vv .vvp-addon__body > *,
body.vv .vvp-addon__price > *,
body.vv .vvp-addon__monthly > * { margin-block-start: 0; margin-block-end: 0; }

body.vv .vvp-addon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: #fff;
	border: 1px solid rgba(44, 36, 32, .08);
	border-radius: var(--radius-card);
	padding: 24px 30px;
}

body.vv .vvp-addon__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 640px;
}

body.vv .vvp-addon__label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--terra-a11y);
}

body.vv .vvp-addon__title {
	margin: 0;
	font-family: var(--font-d);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
}

body.vv .vvp-addon__desc {
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ink-2);
}

body.vv .vvp-addon__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	font-family: var(--font-d);
	font-size: 26px;
	line-height: 1.2;
	color: var(--sage);
	white-space: nowrap;
}
body.vv .vvp-addon__pre { margin-right: .22em; }
body.vv .vvp-addon__monthly {
	display: flex;
	align-items: baseline;
	margin-left: .34em;
}
body.vv .vvp-addon__qual,
body.vv .vvp-addon__monthly {
	font-family: var(--font-b);
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-2);
}
body.vv .vvp-addon__qual { margin-left: .34em; }

body.vv .vvp-note {
	margin: 14px auto 0;
	max-width: 640px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--ink-2);
	text-align: center;
}
body.vv .vvp-note strong { font-weight: 700; color: var(--ink); }

@media (max-width: 900px) {
	body.vv .vvp-addons { padding: 0 20px 56px; }
	body.vv .vvp-addon {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 22px 22px;
	}
	body.vv .vvp-addon__price { white-space: normal; }
}
@media (max-width: 600px) {
	body.vv .vvp-note { text-align: left; }
}

/* -------------------------------------------------------------------------
   9.11 vv/faq-accordeon — <details> wrapper around the `faq` Query Loop
        (was prijzen.css)
   ------------------------------------------------------------------------- */
body.vv .vvp-faq { background: var(--sand-2); }

body.vv .vvp-faq__inner {
	max-width: 800px;
	margin: 0 auto;
	padding: 88px 32px;
}
body.vv .vvp-faq__inner > *,
body.vv .vvp-faq__head > * { margin-block-start: 0; margin-block-end: 0; }

body.vv .vvp-faq__head {
	text-align: center;
	margin-bottom: 40px;
}
body.vv .vvp-faq__head .vv-label { margin: 0; }

body.vv .vvp-faq__title {
	margin: 14px 0 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.15;
	color: var(--ink);
}

body.vv .vvp-faq__query--rest { margin-top: 12px; }

body.vv .vvp-faq__items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.vv .vvp-faq__items > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.vv .vvp-faq__item {
	background: #fff;
	border-radius: var(--radius-card);
	padding: 20px 26px;
}

body.vv .vvp-faq__q {
	display: block;
	cursor: pointer;
	list-style: none;
	min-height: 24px;
}
body.vv .vvp-faq__q::-webkit-details-marker { display: none; }
body.vv .vvp-faq__q::marker { content: ''; }
body.vv .vvp-faq__q:focus-visible {
	outline: 2px solid var(--sage);
	outline-offset: 4px;
	border-radius: 4px;
}

body.vv .vvp-faq__qtext {
	margin: 0;
	font-family: var(--font-b);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink);
}

body.vv .vvp-faq__a {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--rule);
}
body.vv .vvp-faq__a p {
	margin: 0 0 .9em;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--ink-2);
}
body.vv .vvp-faq__a p:last-child { margin-bottom: 0; }

body.vv .vvp-faq__empty {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--ink-2);
	text-align: center;
}

@media (max-width: 900px) {
	body.vv .vvp-faq__inner { padding: 56px 20px; }
	body.vv .vvp-faq__title { font-size: 28px; }
	body.vv .vvp-faq__item { padding: 18px 20px; }
}

/* -------------------------------------------------------------------------
   9.12 vv/prijzen-teaser — eyebrow + heading row, hero card + two light
        cards, and the sage Zorgplan band  (amounts via vv/figure)
   ------------------------------------------------------------------------- */
body.vv .vv-prijzen-teaser { display: block; }
body.vv .vv-prijzen-teaser > * { margin-block-start: 0; margin-block-end: 0; }

/* heading row : H2 left, "bekijk alle prijzen" link right on the baseline */
body.vv .vv-prijzen-teaser__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin: 0 0 30px;
}
body.vv .vv-prijzen-teaser__head > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-prijzen-teaser__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 44px;
	line-height: 1.12;
	color: var(--ink);
}
body.vv .vv-prijzen-teaser__title em { font-style: italic; color: var(--sage); }
body.vv .vv-prijzen-teaser__all { margin: 0; }
body.vv .vv-prijzen-teaser__all a {
	font-family: var(--font-b);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sage);
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
	white-space: nowrap;
}
body.vv .vv-prijzen-teaser__all a:hover { color: var(--sage-hover); }

/* the 58 / 42 grid : dark hero card | column of two light cards */
body.vv .vv-prijzen-teaser__grid {
	display: grid;
	grid-template-columns: 1.38fr 1fr;
	gap: 22px;
	align-items: stretch;
}
body.vv .vv-prijzen-teaser__grid > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-prijzen-teaser__col {
	display: grid;
	grid-auto-rows: 1fr;
	gap: 22px;
}
body.vv .vv-prijzen-teaser__col > * { margin-block-start: 0; margin-block-end: 0; }

/* plan cards */
body.vv .vv-plan {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--sand-2);
	color: var(--ink);
	border-radius: 20px;
	padding: 34px;
}
body.vv .vv-plan > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-prijzen-teaser__col .vv-plan { justify-content: center; }
body.vv .vv-plan--hero { background: var(--ink); color: var(--sand); padding: 40px; }

body.vv .vv-plan__eyebrow {
	margin: 0 0 14px;
	font-family: var(--font-b);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--terra-a11y);
}
body.vv .vv-plan--hero .vv-plan__eyebrow { margin: 0; color: var(--terra-2); }

body.vv .vv-plan__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 12px;
	width: 100%;
	margin: 0 0 24px;
}
body.vv .vv-plan__top > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-plan__pill {
	margin: 0;
	flex: 0 0 auto;
	background: var(--terra);
	color: var(--sand);
	font-family: var(--font-b);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 100px;
	white-space: nowrap;
}

/* price line : optional "v.a.", the "€", the vv/figure amount, optional suffix */
body.vv .vv-plan__price {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	column-gap: 3px;
	margin: 0 0 14px;
	font-family: var(--font-d);
	font-weight: 700;
	line-height: 1;
	font-size: 34px;
	white-space: nowrap;
}
body.vv .vv-plan__price > * { margin: 0; }
body.vv .vv-plan__price .vv-figure { margin: 0; }
body.vv .vv-plan__cur { font-size: .82em; }
body.vv .vv-plan__pre {
	font-family: var(--font-b);
	font-weight: 600;
	font-size: 15px;
	color: var(--ink-2);
	margin-right: 2px;
}
body.vv .vv-plan__per {
	font-family: var(--font-b);
	font-weight: 400;
	font-size: 14px;
	color: var(--muted);
	margin-left: 8px;
}
body.vv .vv-plan--hero .vv-plan__price { margin: 0 0 22px; font-size: 54px; color: var(--sand); }
body.vv .vv-plan--hero .vv-plan__per { color: rgba(247, 243, 238, .55); }

body.vv .vv-plan__desc {
	margin: 0;
	font-family: var(--font-b);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--ink-2);
}
body.vv .vv-plan--hero .vv-plan__desc { max-width: 42ch; color: rgba(247, 243, 238, .7); }
body.vv .vv-plan--hero .vv-plan__cta { margin: 28px 0 0; }

/* sage Zorgplan band */
body.vv .vv-prijzen-teaser__band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px 28px;
	margin: 22px 0 0;
	background: var(--sage);
	color: var(--sand);
	border-radius: 18px;
	padding: 28px 34px;
}
body.vv .vv-prijzen-teaser__band > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-prijzen-teaser__band-main {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 20px;
}
body.vv .vv-prijzen-teaser__band-main > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-prijzen-teaser__band-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(247, 243, 238, .14);
	color: var(--sand);
}
body.vv .vv-prijzen-teaser__band-text > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-prijzen-teaser__band-title {
	margin: 0 0 4px;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
	color: var(--sand);
}
body.vv .vv-prijzen-teaser__band-sub {
	margin: 0;
	font-family: var(--font-b);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(247, 243, 238, .8);
}
body.vv .vv-prijzen-teaser__band-link { margin: 0; flex: 0 0 auto; }
body.vv .vv-prijzen-teaser__band-link a {
	font-family: var(--font-b);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sand);
	text-decoration: none;
	white-space: nowrap;
}
body.vv .vv-prijzen-teaser__band-link a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
	body.vv .vv-prijzen-teaser__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin: 0 0 24px;
	}
	body.vv .vv-prijzen-teaser__title { font-size: 31px; }
	body.vv .vv-prijzen-teaser__grid { grid-template-columns: 1fr; }
	body.vv .vv-prijzen-teaser__col { grid-auto-rows: auto; }
	body.vv .vv-plan--hero { padding: 30px; }
	body.vv .vv-plan { padding: 28px; }
	body.vv .vv-plan--hero .vv-plan__price { font-size: 44px; }
	body.vv .vv-prijzen-teaser__band {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 26px;
	}
}

/* -------------------------------------------------------------------------
   9.13 vv/stats-band — 3 figures on sage  (was home.css)
   ------------------------------------------------------------------------- */
body.vv .vv-stats-band { background: var(--sage); }

body.vv .vv-stats-band__inner {
	max-width: var(--wrap-narrow);
	margin: 0 auto;
	padding: 48px var(--gutter);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
body.vv .vv-stats-band__inner > * { margin-block-start: 0; margin-block-end: 0; }

body.vv .vv-stats-band .vv-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 0 32px;
}
body.vv .vv-stats-band .vv-stat > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-stats-band .vv-stat--divided {
	border-left: 1px solid rgba(200, 218, 196, .25);
	border-right: 1px solid rgba(200, 218, 196, .25);
}

body.vv .vv-stats-band .vv-stat__value {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 0;
	font-family: var(--font-d);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	color: var(--sand);
	white-space: nowrap;
}
body.vv .vv-stats-band .vv-stat__value p { margin: 0; }
body.vv .vv-stats-band .vv-stat__value em,
body.vv .vv-stats-band .vv-stat__value .vv-figure {
	font-style: italic;
	font-weight: 400;
	color: var(--sage-lt);
}

body.vv .vv-stats-band .vv-stat__label {
	margin: 0;
	font-family: var(--font-b);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(200, 218, 196, .6);
}

@media (max-width: 900px) {
	body.vv .vv-stats-band__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 40px var(--gutter);
	}
	body.vv .vv-stats-band .vv-stat { padding: 0; }
	body.vv .vv-stats-band .vv-stat--divided {
		border-left: 0;
		border-right: 0;
		border-top: 1px solid rgba(200, 218, 196, .25);
		border-bottom: 1px solid rgba(200, 218, 196, .25);
		padding: 32px 0;
	}
}
@media (max-width: 600px) {
	body.vv .vv-stats-band .vv-stat__value { font-size: 36px; }
}

/* -------------------------------------------------------------------------
   9.14 vv/stats-row — 4 figures in a row  (was over-ons.css; the page keeps
        the class `vv-about-stats__inner` and now also carries `vv-stats-row`)
   ------------------------------------------------------------------------- */
body.vv .vv-stats-row {
	max-width: var(--wrap-narrow);
	margin-inline: auto;
	padding: 88px var(--gutter);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}
body.vv .vv-stats-row > * { margin-block-start: 0; margin-block-end: 0; }

body.vv .vv-stats-row .vv-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
body.vv .vv-stats-row .vv-stat > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-stats-row .vv-stat__num {
	display: block;
	font-family: var(--font-d);
	font-size: 42px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--sage);
}
body.vv .vv-stats-row .vv-stat__label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ink-2);
}

@media (max-width: 900px) {
	body.vv .vv-stats-row {
		padding: 56px var(--gutter);
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 16px;
	}
	body.vv .vv-stats-row .vv-stat__num { font-size: 34px; }
}
@media (max-width: 600px) {
	body.vv .vv-stats-row .vv-stat__num { font-size: 30px; }
	body.vv .vv-stats-row .vv-stat__label { font-size: 11px; letter-spacing: .08em; }
}

/* -------------------------------------------------------------------------
   9.15 vv/stat-badge — sage figure badge floating over a portrait
        (was over-ons.css; used inside the starter compositions)
   ------------------------------------------------------------------------- */
body.vv .vv-about-badge {
	position: absolute;
	left: -20px;
	bottom: -20px;
	background: var(--sage);
	color: var(--sand);
	border-radius: var(--radius-card);
	padding: 17px 21px;
	box-shadow: 0 18px 40px rgba(79, 117, 88, .34);
}
body.vv .vv-about-badge > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-about-badge__num {
	display: block;
	margin: 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	color: var(--sand);
}
body.vv .vv-about-badge__label {
	margin: 6px 0 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	color: var(--sage-lt);
}

@media (max-width: 900px) {
	body.vv .vv-about-badge { left: 0; bottom: -16px; padding: 14px 18px; }
	body.vv .vv-about-badge__num { font-size: 26px; }
}

/* -------------------------------------------------------------------------
   9.16 vv/drie-beloftes — 3 numbered promise cards  (was over-ons.css)
   ------------------------------------------------------------------------- */
body.vv .vv-about-promises__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
}
body.vv .vv-about-promises__grid > * { margin-block-start: 0; margin-block-end: 0; }

body.vv .vv-promise {
	background: var(--sand);
	border-radius: var(--radius-card);
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
body.vv .vv-promise > * { margin-block-start: 0; margin-block-end: 0; }
body.vv .vv-promise__num {
	margin: 0;
	font-family: var(--font-d);
	font-style: italic;
	font-size: 26px;
	line-height: 1;
	color: var(--terra);
}
body.vv .vv-promise__title {
	margin: 0;
	font-family: var(--font-d);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
}
body.vv .vv-promise__desc {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
	color: var(--ink-2);
}

@media (max-width: 900px) {
	body.vv .vv-about-promises__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* -------------------------------------------------------------------------
   9.17 vv/browser-mock — fake browser chrome around a screenshot
        (was webdesign.css)
   ------------------------------------------------------------------------- */
body.vv .vv-browser-mock {
	background: #fff;
	border-radius: var(--radius-mock);
	box-shadow: 0 24px 60px rgba(44, 36, 32, .12);
	overflow: hidden;
	border: 1px solid rgba(44, 36, 32, .06);
}
body.vv .vv-browser-mock__chrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(44, 36, 32, .07);
}
body.vv .vv-browser-mock__dot {
	display: block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}
body.vv .vv-browser-mock__dot--1 { background: #e3b8a5; }
body.vv .vv-browser-mock__dot--2 { background: var(--sage-lt); }
body.vv .vv-browser-mock__dot--3 { background: #a9c3b1; }
body.vv .vv-browser-mock__bar {
	display: block;
	flex: 1 1 auto;
	max-width: 220px;
	height: 12px;
	margin-left: 8px;
	border-radius: 6px;
	background: rgba(44, 36, 32, .05);
}
body.vv .vv-browser-mock .vv-mock__shot { margin: 0; }
body.vv .vv-browser-mock .vv-mock__shot img {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: cover;
	object-position: top;
}

@media (max-width: 900px) {
	body.vv .vv-browser-mock .vv-mock__shot img { height: 220px; }
	body.vv .vv-browser-mock__bar { max-width: 140px; }
}

/* -------------------------------------------------------------------------
   9.18 vv/contact-strip + vv/proof-stats — contact details & review card
        (was contact.css)
   ------------------------------------------------------------------------- */
body.vv .vv-contact__details {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

body.vv .vv-contact__detail {
	display: flex;
	align-items: center;
	gap: 14px;
}

body.vv .vv-contact__detail::before {
	content: '';
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background-color: var(--sand-2);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
}
body.vv .vv-contact__detail--location::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234F7558' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
body.vv .vv-contact__detail--email::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234F7558' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}
body.vv .vv-contact__detail--hours::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234F7558' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

body.vv .vv-contact__detail-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink);
}
body.vv .vv-contact__detail-text a { color: var(--ink); text-decoration: none; }
body.vv .vv-contact__detail-text a:hover,
body.vv .vv-contact__detail-text a:focus-visible { color: var(--terra); }

body.vv .vv-contact__proof {
	margin-top: 40px;
	background: var(--sand-2);
	border-radius: 16px;
	padding: 22px 26px;
	display: flex;
	align-items: center;
	gap: 18px;
}

body.vv .vv-contact__proof-rating {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

body.vv .vv-contact__stars {
	margin: 0;
	color: var(--terra);
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 1;
}
body.vv .vv-contact__rating-meta {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink-2);
}

body.vv .vv-contact__proof-volume {
	position: relative;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.4;
}
body.vv .vv-contact__proof-volume::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 34px;
	background: rgba(44, 36, 32, .1);
}

body.vv .vv-contact__years {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ink);
}
body.vv .vv-contact__projects {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink-2);
}

@media (max-width: 600px) {
	body.vv .vv-contact__proof { flex-wrap: wrap; row-gap: 14px; padding: 20px; }
	body.vv .vv-contact__proof-volume { padding-left: 0; }
	body.vv .vv-contact__proof-volume::before { display: none; }
}

/* -------------------------------------------------------------------------
   9.19 vv/cta-question — small sage closer for pages without the CTA band
        (was zorgplan.css)
   ------------------------------------------------------------------------- */
body.vv .vv-zorg-ask {
	background: var(--sage);
	color: var(--sand);
	border-radius: var(--radius-card);
	padding: 30px 34px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 14px;
}

body.vv .vv-zorg-ask__title {
	margin: 0 0 4px;
	font-family: var(--font-d);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sand);
}
body.vv .vv-zorg-ask__lead {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	color: rgba(247, 243, 238, .8);
}
body.vv .vv-zorg-ask__actions p { margin: 0; }
body.vv .vv-zorg-ask .vv-btn--sand {
	font-size: 12px;
	padding: 14px 28px;
}

@media (max-width: 900px) {
	body.vv .vv-zorg-ask { padding: 26px 22px; align-items: flex-start; }
	body.vv .vv-zorg-ask__title { font-size: 21px; }
	body.vv .vv-zorg-ask .vv-btn--sand { white-space: normal; }
}