/* =========================================================================
   Webdesign — /diensten/webdesign/
   Source of truth: design/Webdesign.dc.html (pixel values below are verbatim
   from that file). Every rule is scoped .vvpage-webdesign.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Page shell — the wrapper must not constrain the full-bleed bands; every
      section carries its own 1200px inner container (design value). The
      unclamp itself is global — style.css §3.6.
   ------------------------------------------------------------------------- */
.vvpage-webdesign .vv-label { margin: 0; }

/* -------------------------------------------------------------------------
   1. Hero — 1.1fr / 1fr, 64px gap, 88/32/80 padding
   ------------------------------------------------------------------------- */
.vvpage-webdesign .vv-hero__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 88px 32px 80px;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 64px;
	align-items: center;
}

.vvpage-webdesign .vv-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}
.vvpage-webdesign .vv-hero__copy > * { margin: 0; }

.vvpage-webdesign .vv-hero__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 600;
	font-size: clamp(34px, 4.6vw, 48px);
	line-height: 1.15;
	text-wrap: balance;
}
.vvpage-webdesign .vv-hero__title em {
	font-style: italic;
	font-weight: 600;
	color: var(--terra);
}

.vvpage-webdesign .vv-hero__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-2);
	max-width: 480px;
}

.vvpage-webdesign .vv-hero__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.vvpage-webdesign .vv-hero__actions > * { margin: 0; }
/* Design overrides the global pill metrics for this hero (12px / .12em / 15-26). */
.vvpage-webdesign .vv-hero__actions .vv-btn {
	font-size: 12px;
	letter-spacing: .12em;
	padding: 15px 26px;
	border-radius: 999px;
	min-height: 44px;
	justify-content: center;
}
.vvpage-webdesign .vv-hero__actions .vv-btn--outline {
	border-width: 1px;
	border-color: rgba(44, 36, 32, .2);
	color: var(--ink);
}
.vvpage-webdesign .vv-hero__actions .vv-btn--outline:hover {
	border-color: var(--terra);
	color: var(--terra);
}

/* vv/browser-mock — promoted to style.css §9 (0.5-N.3). */

/* -------------------------------------------------------------------------
   2. "Wat u krijgt" — sand-2 band
   ------------------------------------------------------------------------- */
.vvpage-webdesign .vv-what { background: var(--sand-2); }
.vvpage-webdesign .vv-what__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 88px 32px;
}
.vvpage-webdesign .vv-what__intro {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 560px;
}
.vvpage-webdesign .vv-what__intro > * { margin: 0; }
.vvpage-webdesign .vv-what__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 600;
	font-size: clamp(27px, 3.2vw, 36px);
	line-height: 1.2;
}
.vvpage-webdesign .vv-what__title em {
	font-style: italic;
	font-weight: 600;
	color: var(--sage);
}

/* vv/card-grid-6 — promoted to style.css §9 (0.5-N.3). */

/* -------------------------------------------------------------------------
   3. "Zo werkt het" — 1fr / 1.2fr
   ------------------------------------------------------------------------- */
.vvpage-webdesign .vv-how__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: 88px 32px;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 64px;
	align-items: start;
}
.vvpage-webdesign .vv-how__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.vvpage-webdesign .vv-how__intro > * { margin: 0; }
.vvpage-webdesign .vv-how__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 600;
	font-size: clamp(27px, 3.2vw, 36px);
	line-height: 1.25;
}
.vvpage-webdesign .vv-how__title em {
	font-style: italic;
	font-weight: 600;
	color: var(--terra);
}
.vvpage-webdesign .vv-how__lead {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
}

/* vv/process-steps — the shared component lives in style.css §9.7; this page
   uses the darker sand-2 variant from design/Webdesign.dc.html. These are the
   only page-specific deltas, written at (0,3,1) so they outrank the promoted
   global rules (0,2,1) whatever the load order. */
body.vv .vvpage-webdesign .vv-step {
	background: var(--sand-2);
	border: 0;
	border-radius: var(--radius-mock);
	padding: 22px 26px;
	gap: 20px;
}
body.vv .vvpage-webdesign .vv-step__num {
	font-weight: 600;
	font-size: 20px;
	line-height: 1.35;
}
body.vv .vvpage-webdesign .vv-step__title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}
body.vv .vvpage-webdesign .vv-step__text {
	font-weight: 400;
	line-height: 1.6;
}
@media (max-width: 900px) {
	body.vv .vvpage-webdesign .vv-step { padding: 20px 20px; gap: 14px; }
}

/* -------------------------------------------------------------------------
   4. Responsive — stack everything, zero horizontal overflow
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.vvpage-webdesign .vv-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 56px 20px 48px;
	}
	.vvpage-webdesign .vv-hero__lead { max-width: none; }
	.vvpage-webdesign .vv-hero__actions { width: 100%; }

	.vvpage-webdesign .vv-what__inner { padding: 56px 20px; }
	.vvpage-webdesign .vv-what__intro { max-width: none; }

	.vvpage-webdesign .vv-how__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 56px 20px;
	}

	.vvpage-webdesign img { max-width: 100%; }
}

@media (max-width: 600px) {
	.vvpage-webdesign .vv-hero__actions .vv-btn {
		flex: 1 1 100%;
		width: 100%;
	}
	.vvpage-webdesign .vv-hero__actions > * { flex: 1 1 100%; }
}