/*
Theme Name: Lef Creative 2026
Theme URI: https://lefcreative.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl/
Description: Child theme van leflite voor lefcreative.nl (ontwerp 2026). Bron: prototype www.lef2026.test (child/style.css, 1-op-1).
Version: 1.0.0
Template: leflite
Text Domain: lefcreative

Rules (design-to-leflite):
- General rules only (tokens, elements, components, section variants). Never per page or per section.
- Prefer custom-leftheme.json tokens over CSS; prefer theme options over both.
- One block per selector. Prefix overrides with "body " (theme component CSS loads lazily, after this file).
- Order: fonts -> tokens -> basis -> layout -> header -> buttons -> components -> footer -> mobile -> new blocks.
*/

/* FONTS (self-hosted, AVG: never load fonts from Google) -------------------- */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url('fonts/open-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/geist-mono-latin.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/satoshi-700.woff2') format('woff2'); }
@font-face { font-family: 'Satoshi'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/satoshi-900.woff2') format('woff2'); }


/* TOKENS ------------------------------------------------------------------- */
:root {
	--lef-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--lef-muted: var(--quaternary);
	--lef-line: var(--darkgray);
	--lef-dot: #d9d9de;
	--lef-lead-size: 18px;
	--lef-shadow-float: 0 12px 32px -16px rgba(24, 24, 27, .18);
	--lef-shadow-tile: 0 18px 40px -22px rgba(24, 24, 27, .35);
	--lef-mono: 'Geist Mono', ui-monospace, monospace;
	--lef-mono-system: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--lef-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M8.5 3.5 13 8l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--lef-header-offset: 112px;
	--lef-radius-media: 8px;
	/* Nested radii in the header: outer = inner + gap. Inner = the button (--btn-border-radius, 10px). */
	--lef-bar-gap: 12px;
	--lef-radius-bar: calc(var(--btn-border-radius) + var(--lef-bar-gap));
}

/* Dark mode (lef-new/theme-toggle sets html[data-theme="dark"]): the same colour names, other values.
   white = surfaces, black = text and dark buttons, tertiary = page, gray/darkgray = tints and lines.
   Beats the generated :root tokens on specificity, so load order does not matter. */
html[data-theme="dark"] {
	color-scheme: dark;
	--white: #1c1c1f;
	--white-rgb: 28, 28, 31;
	--white-darkened: #2a2a2e;
	--black: #f4f4f5;
	--black-rgb: 244, 244, 245;
	--black-darkened: #d4d4d8;
	--tertiary: #111113;
	--tertiary-rgb: 17, 17, 19;
	--tertiary-darkened: #000000;
	--gray: #232327;
	--gray-rgb: 35, 35, 39;
	--gray-darkened: #2e2e33;
	--darkgray: #2e2e33;
	--darkgray-rgb: 46, 46, 51;
	--darkgray-darkened: #3a3a40;
	--secondary: #2c1b1b;
	--secondary-rgb: 44, 27, 27;
	--secondary-darkened: #3a2424;
	--quaternary: #a1a1aa;
	--quaternary-rgb: 161, 161, 170;
	--quaternary-darkened: #c4c4cb;
	--primary-content: #ffffff;
	--quaternary-content: var(--tertiary);
	--lef-dot: #26262b;
	--lef-shadow-float: 0 12px 32px -16px rgba(0, 0, 0, .6);
	--lef-shadow-tile: 0 18px 40px -22px rgba(0, 0, 0, .8);
}

/* grey sections (FAQ, apply, ...) in dark: a quiet tint just above the page, below the cards, instead of a flat grey band */
html[data-theme="dark"] section.lef-section.bg-gray {
	background-color: #161618;
}

/* black surfaces (cards, footer) stay dark in dark mode instead of flipping to light: inside them the
   light-mode roles return (white = light buttons, black-content = light text) on a lifted dark surface */
html[data-theme="dark"] .card.bg-black,
html[data-theme="dark"] section.lef-section.bg-black,
html[data-theme="dark"] footer.bg-black,
html[data-theme="dark"] .lef-new-kb-artikel__cta.bg-black {
	--black: #27272b;
	--black-rgb: 39, 39, 43;
	--black-darkened: #1f1f22;
	--black-content: #f4f4f5;
	--white: #f4f4f5;
	--white-rgb: 244, 244, 245;
	--white-darkened: #d4d4d8;
	--white-content: #18181b;
}

html[data-theme="dark"] footer.bg-black {
	--black: #0b0b0d;
	--black-rgb: 11, 11, 13;
	border-top: 1px solid var(--darkgray);
}

/* the outline button (colour "transparent") on those dark surfaces: there --white is light, which made it a light
   block with light text. Keep it an outline on the dark surface. */
html[data-theme="dark"] .card.bg-black .btn.bg-transparent,
html[data-theme="dark"] section.lef-section.bg-black .btn.bg-transparent,
html[data-theme="dark"] .card.why-lead .btn.bg-transparent,
html[data-theme="dark"] .card.support-lead .btn.bg-transparent,
html[data-theme="dark"] .card.branche-feature .btn.bg-transparent,
html[data-theme="dark"] .card.branche-other-card .btn.bg-transparent {
	border-color: rgba(244, 244, 245, .3);
	background-color: transparent;
	color: #f4f4f5;
}

html[data-theme="dark"] .card.bg-black .btn.bg-transparent:hover,
html[data-theme="dark"] section.lef-section.bg-black .btn.bg-transparent:hover,
html[data-theme="dark"] .card.why-lead .btn.bg-transparent:hover,
html[data-theme="dark"] .card.support-lead .btn.bg-transparent:hover,
html[data-theme="dark"] .card.branche-feature .btn.bg-transparent:hover,
html[data-theme="dark"] .card.branche-other-card .btn.bg-transparent:hover {
	border-color: #f4f4f5;
	background-color: transparent;
	color: #f4f4f5;
}

/* red text on the red tint (labels, chips, the "Wij" role): the brand red is too dark on the dark tint (2.9:1);
   a lighter red keeps it readable (4.5:1). Buttons and fills keep the brand red. */
html[data-theme="dark"] {
	--lef-red-on-tint: #f07a7a;
}

html[data-theme="dark"] body .featured.kb-grid .card-term,
html[data-theme="dark"] body .featured.search-results .card-term,
html[data-theme="dark"] body .featured.subdienst-list.vacature-list .card.card-simple .card-meta .card-term,
html[data-theme="dark"] .lef-new-timeline__roles p:last-child strong,
html[data-theme="dark"] .lef-new-kb-onderwerpen__icoon,
html[data-theme="dark"] body .featured.kb-grid .card-simple .card-icon {
	color: var(--lef-red-on-tint);
}

/* dark artwork turned light: the logo (hue-rotate keeps the red accent red), client logos (black silhouettes → white) */
html[data-theme="dark"] img.logo {
	filter: invert(1) hue-rotate(180deg);
}

html[data-theme="dark"] .lef-new-logo-marquee__track img {
	filter: brightness(0) invert(1);
}

/* BASIS -------------------------------------------------------------------- */
html {
	-webkit-font-smoothing: antialiased;
}

/* leflite sets overflow-x: hidden on html AND body, which turns body into the scroll container for
   position: sticky, so nothing ever sticks. clip cuts the same overflow without that side effect. */
html,
body {
	overflow-x: clip;
}

/* arrow in the cut-out corner of portfolio cards */
:root {
	--lef-notch-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11 4.5 16.5 10 11 15.5' fill='none' stroke='%2318181b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
	--lef-notch-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11 4.5 16.5 10 11 15.5' fill='none' stroke='%23fafafa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Canvas background: subtle dotted grid on paper */
body {
	background-color: var(--tertiary);
	background-image: radial-gradient(circle at 1px 1px, var(--lef-dot) 1px, transparent 0);
	background-size: 22px 22px;
	color: var(--black);
}

::selection {
	background: var(--primary);
	color: var(--primary-content);
}

h1, h2, h3, h4, h5 {
	letter-spacing: -0.035em;
	text-wrap: balance;
}

/* Visible keyboard focus everywhere (theme has none of its own) */
#main a:focus-visible,
#main button:focus-visible,
body .btn:focus-visible,
body header a:focus-visible,
body footer a:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 3px;
}

/* stretched card links: show the ring on the whole card */
body .card.card-portfolio:focus-within {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
	border-radius: var(--lef-radius-media);
}

body .card.card-portfolio .buttons-holder .btn:focus-visible {
	outline: none;
}

h4, h5 {
	font-family: var(--body-font);
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.4em;
}

/* Section headings never run wider than ~11 words of display type */
body .content-wrapper h2 {
	max-width: 11.5em;
	line-height: 1.02;
}

/* Kicker (h6 = "Subtitle" in the editor) */
body .main-content h6 {
	margin-bottom: 16px;
	line-height: 1.5;
	color: var(--primary);
	font-size: var(--h6-size);
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Lead paragraph: the paragraph right after a section heading, and the paragraphs that follow it in the same block
   (otherwise a second paragraph dropped back to small black body text). Article texts have their own rules. */
body .content-wrapper h2 + p,
body .content-wrapper:not(.vacature-text, .legal-tekst *, .lef-new-kb-artikel__tekst *) h2 + p ~ p,
body .content-wrapper.intro p {
	max-width: 56ch;
	margin-top: 20px;
	color: var(--lef-muted);
	font-size: var(--lef-lead-size);
	line-height: 1.625;
}

/* Text-content width variants (extra CSS class on the block) */
body .content-wrapper.intro p {
	max-width: 52ch;
	margin-top: 24px;
}

body .content-wrapper.narrow p {
	max-width: 44ch;
}

body .content-wrapper.wide p {
	max-width: 60ch;
}

/* "wide" also lets the heading run on one line */
body .content-wrapper.wide h2 {
	max-width: none;
}

/* Centred text from the editor (style="text-align: center") also centres its max-width box */
body .content-wrapper h2[style*="center"],
body .content-wrapper p[style*="center"] {
	margin-left: auto;
	margin-right: auto;
}

/* Hero buttons: same width, so the pair reads as one choice (also when stacked on mobile) */
body section.lef-section.section-hero .buttons-holder .btn {
	justify-content: center;
	min-width: 204px;
}

/* Text-content variant "hero-more": small follow-up line under the hero buttons */
body .content-wrapper.hero-more p {
	margin-top: 16px;
	color: var(--lef-muted);
}

body .content-wrapper.hero-more small {
	font-size: 14px;
}

#main .content-wrapper.hero-more a:not(.btn) {
	color: var(--black);
	font-weight: 500;
	text-decoration-color: rgba(24, 24, 27, .3);
	text-underline-offset: 3px;
}

#main .content-wrapper.hero-more a:not(.btn):hover {
	color: var(--primary);
	text-decoration-color: currentColor;
}

/* Text-content variant "muted" */
body .content-wrapper.muted {
	color: var(--lef-muted);
}

body .content-wrapper.muted p {
	font-size: 15px;
	line-height: 1.5;
}

body .content-wrapper small {
	font-size: 14px;
	line-height: 20px;
}

body .content-wrapper.muted a {
	color: var(--black);
	text-decoration-color: rgba(24, 24, 27, .25);
	text-underline-offset: 4px;
	font-weight: 500;
}

/* Theme reveal (theme_default_animation = fadeInUp): 32px and the house easing instead of
   animate.css's 100% travel */
.lef-animations .animate__animated.animate__fadeInUp {
	animation-name: lef-fade-up;
	animation-duration: 1s;
	animation-timing-function: var(--lef-ease);
	/* "both", no opacity:1 here: with "backwards" + opacity:1 Chrome paints the col visible between the class being
	   added and the animation's first frame, and then hides it again ("loads twice"). The held end state is
	   transform:none, so a revealed col does not become a containing block. */
	animation-fill-mode: both;
}

@keyframes lef-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 32px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* LAYOUT ------------------------------------------------------------------- */
/* Section spacing variants (extra CSS classes on the section). Default = --section-padding (128 / 96 mobile).
   Order matters: "follow" and "intro" come last so they win when combined with "xl". */
section.lef-section.section-xl {
	padding-top: 144px;
	padding-bottom: 144px;
}

section.lef-section.section-tight {
	padding-top: 16px;
	padding-bottom: 112px;
}

section.lef-section.section-intro {
	padding-bottom: 56px;
}

section.lef-section.section-follow {
	padding-top: 0;
}

/* Cols carry a 10px vertical margin (theme); cancel it at the outer edge of a section so the
   section padding is the real distance */
section.lef-section > .container > .row,
section.lef-section > .container-fluid > .row {
	margin-top: -10px;
	margin-bottom: -10px;
}

/* Grid variant "section-grid-tight": 20px gutters instead of bootstrap's 30px (cards, bento) */
section.lef-section.section-grid-tight .row {
	margin-left: -10px;
	margin-right: -10px;
}

section.lef-section.section-grid-tight .row > .wp-block-custom-section-block-col {
	padding-left: 10px;
	padding-right: 10px;
}

/* The heading col opening the grid sits 56px above it */
section.lef-section.section-grid-tight > .container > .row > .wp-block-custom-section-block-col:first-child {
	margin-bottom: 46px;
}

section.lef-section.section-flush {
	padding-top: 0;
	padding-bottom: 0;
}

body.fixed-header section.lef-section.section-hero {
	overflow: hidden;
	padding-top: 96px;
	padding-bottom: 40px;
}

section.lef-section.section-cta {
	overflow: hidden;
}

/* The container is the CTA "panel": the tiles position against it */
section.lef-section.section-cta > .container {
	padding-top: 112px;
	padding-bottom: 112px;
}

section.lef-section.section-cta h2 {
	font-size: 56px;
	line-height: 1.06;
}

/* HEADER ------------------------------------------------------------------- */
body .fake-header {
	background: transparent;
}

/* Above every hero layer (tiles, tech text, cursors z-index 30) */
body.fixed-header header.navigation {
	z-index: 100;
	transition: padding .5s var(--lef-ease), background-color .4s;
}

body header.navigation > .container {
	border: 1px solid transparent;
	border-radius: var(--lef-radius-bar);
	transition: max-width .5s var(--lef-ease), background-color .4s, border-color .4s, box-shadow .5s;
}

/* Scrolled: the header comes loose and floats with space around it */
body header.navigation.is-floating {
	padding: 18px 16px 0;
	background-color: transparent;
}

/* header full width up to 1400px at every desktop size, at the top and floating (not the 1140px container below
   1400): the theme folds the menu into the hamburger as soon as it does not fit, which hit every 1200-1399px laptop */
@media (min-width: 992px) {
	body header.navigation > .container {
		width: 100%;
		max-width: 1400px;
	}

	/* at the top (not floating) the bar has no background: keep logo and button off the screen edge */
	body header.navigation:not(.is-floating) > .container {
		padding-inline: 32px;
	}
}

/* equal gap around the CTA button (border included), so the bar radius nests around it */
body header.navigation.is-floating > .container {
	max-width: 1400px;
	padding: 0 calc(var(--lef-bar-gap) - 1px) 0 20px;
	background-color: rgba(var(--white-rgb), .82);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	border-color: var(--lef-line);
	box-shadow: var(--lef-shadow-float);
}

body .navigation .nav-holder-primary-1 {
	margin-left: 38px;
	margin-right: auto;
}

body .main-nav-menu > li > a {
	line-height: 1.5;
}

/* Dropdown caret: a thin chevron instead of the theme's rotated "›" */
body header .main-nav-menu > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 3px 0 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	vertical-align: 3px;
	transform: rotate(45deg);
}

/* CTA menu: no negative side margins, 12px from the phone number */
body .navigation .nav-holder-primary-2 .main-nav-menu {
	margin: 0;
}

/* margin-left auto: when the main menu collapses into the hamburger (it no longer fits), the phone number stays
   right, next to the hamburger, instead of space-between parking it mid-header */
body .navigation .nav-shortcode {
	margin-left: auto;
	margin-right: 2px;
	padding-left: 24px; /* minimum gap to the main menu when the bar is tight */
}

body .navigation .mobile-menu-toggle-position {
	margin-left: 16px;
}

body .main-nav-menu > li > a:hover,
body .main-nav-menu .sub-menu a:hover {
	color: var(--primary);
}

/* Dropdown as a floating card */
body .main-nav-menu .sub-menu {
	padding: 8px;
	border: 1px solid var(--lef-line);
	border-radius: var(--general-border-radius);
	background: var(--white);
	box-shadow: 0 20px 50px -20px rgba(24, 24, 27, .18);
}

body .main-nav-menu .sub-menu a {
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: var(--general-border-radius-small);
}

body .main-nav-menu .sub-menu a:hover {
	background: var(--gray);
}

body .main-nav-menu .sub-menu .icon {
	color: var(--primary);
	font-size: 1em;
	margin: 0;
}

/* Mega menu (menu-item ACF activate_mega_menu). The theme makes li.mega-menu static and the panel a
   full-width flex row; we turn it into a floating card: service columns + promo panel (child hooks). */
body header.navigation.is-floating .navigation-inner {
	padding-top: calc(var(--lef-bar-gap) - 1px);
	padding-bottom: calc(var(--lef-bar-gap) - 1px);
}

/* the bar (container) is the positioning box: the panel gets exactly its width */
body header.navigation > .container {
	position: relative;
}

/* bootstrap makes .col-md-12 relative; the bar itself must be the reference */
body header.navigation > .container .col-md-12 {
	position: static;
}

body .main-nav-menu li.mega-menu > .sub-menu.mega-menu-wrapper {
	top: calc(100% + 12px);
	left: 0;
	right: 0;
	width: auto;
	max-width: none;
	flex-wrap: nowrap;
	gap: 12px;
	margin-top: 0;
	padding: calc(var(--lef-bar-gap) - 1px);
	border: 1px solid var(--lef-line);
	border-radius: var(--lef-radius-bar);
	background: var(--white);
	box-shadow: 0 30px 60px -30px rgba(24, 24, 27, .25);
}

/* keep the hover alive between the menu item and the panel: the bridge is part of the panel, so part of the li */
body .main-nav-menu li.mega-menu > .sub-menu.mega-menu-wrapper::before {
	content: "";
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	height: 30px;
}

/* columns + the "Alle …" button under them */
.lef-mega-main {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

body .main-nav-menu .lef-mega-main .lef-mega-all {
	margin: 0;
	padding: 8px 16px;
	font-size: 14px;
}

/* layout "grid" (e.g. Branches): two plain columns, filled row by row */
.lef-mega-columns {
	align-self: stretch;
	display: grid;
	flex: 1;
	grid-template-columns: repeat(2, 1fr);
	align-content: start;
	gap: 4px 12px;
}

.lef-mega-columns > .sub-menu-column {
	position: relative;
}

/* layout "diensten": main business = the first 7 items on one light-grey block: 4 stacked in column 1, 3 in
   column 2 (natural height, not stretched); the other 4 stacked in column 3.
   The block is the grid container::before (a grid item), so the menu markup stays the theme's. */
.lef-mega-columns--diensten {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, auto);
}

.lef-mega-columns--diensten::before {
	content: "";
	grid-column: 1 / 3;
	grid-row: 1 / -1;
	border-radius: var(--btn-border-radius);
	background: var(--gray);
}

.lef-mega-columns--diensten > .sub-menu-column:nth-child(-n+4) { grid-column: 1; }
.lef-mega-columns--diensten > .sub-menu-column:nth-child(n+5):nth-child(-n+7) { grid-column: 2; }
.lef-mega-columns--diensten > .sub-menu-column:nth-child(n+8) { grid-column: 3; }
.lef-mega-columns--diensten > .sub-menu-column:nth-child(1),
.lef-mega-columns--diensten > .sub-menu-column:nth-child(5),
.lef-mega-columns--diensten > .sub-menu-column:nth-child(8) { grid-row: 1; }
.lef-mega-columns--diensten > .sub-menu-column:nth-child(2),
.lef-mega-columns--diensten > .sub-menu-column:nth-child(6),
.lef-mega-columns--diensten > .sub-menu-column:nth-child(9) { grid-row: 2; }
.lef-mega-columns--diensten > .sub-menu-column:nth-child(3),
.lef-mega-columns--diensten > .sub-menu-column:nth-child(7),
.lef-mega-columns--diensten > .sub-menu-column:nth-child(10) { grid-row: 3; }
.lef-mega-columns--diensten > .sub-menu-column:nth-child(4),
.lef-mega-columns--diensten > .sub-menu-column:nth-child(11) { grid-row: 4; }

body .main-nav-menu li.mega-menu .lef-mega-columns .sub-menu-column > li > a {
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 14px;
	align-items: center;
	padding: 12px;
	border-radius: var(--btn-border-radius);
	font-weight: 600;
	line-height: 1.3;
	white-space: normal;
}

body .main-nav-menu li.mega-menu .lef-mega-columns .sub-menu-column > li > a .icon {
	display: grid;
	grid-row: span 2;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--lef-radius-media);
	background: var(--secondary);
	font-size: 17px;
	transition: background-color .3s, color .3s;
}

body .main-nav-menu li.mega-menu .lef-mega-columns .sub-menu-column > li > a:hover .icon {
	background: var(--primary);
	color: var(--primary-content);
}

/* the secondary services (column 3, outside the grey block) get a grey icon: less important than the core business */
body .main-nav-menu li.mega-menu .lef-mega-columns--diensten > .sub-menu-column:nth-child(n+8) > li > a .icon {
	background: var(--gray);
	color: var(--lef-muted);
}

body .main-nav-menu li.mega-menu .lef-mega-columns--diensten > .sub-menu-column:nth-child(n+8) > li > a:hover .icon {
	background: var(--black);
	color: var(--white);
}

/* title + description hug the middle of the 44px icon (the icon spans both rows and would stretch them apart; the theme also sets a 12px row gap) */
body .main-nav-menu li.mega-menu .lef-mega-columns .sub-menu-column > li > a {
	row-gap: 0;
}

body .main-nav-menu li.mega-menu .lef-mega-columns .sub-menu-column > li > a > span:not(.menu-item-description) {
	align-self: end;
}

body .main-nav-menu li.mega-menu .lef-mega-columns .sub-menu-column > li > a > .menu-item-description {
	align-self: start;
	margin-top: 2px;
}

body .main-nav-menu .menu-item-description {
	color: var(--lef-muted);
	font-size: 13px;
	font-weight: 400;
}

/* Contact card next to the service columns */
.lef-mega-promo {
	display: flex;
	flex: 0 0 280px;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 20px;
	border-radius: var(--btn-border-radius);
	background: var(--gray);
	white-space: normal;
}

.lef-mega-promo__avatar {
	width: 48px;
	height: 48px;
	margin-bottom: 4px;
	border: 2px solid var(--white);
	border-radius: 50%;
	object-fit: cover;
}

.lef-mega-promo__title {
	margin: 0;
	font-family: var(--heading-font);
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.lef-mega-promo__text {
	margin: 0;
	color: var(--lef-muted);
	font-size: 13px;
	line-height: 1.5;
}

body .main-nav-menu .lef-mega-promo__phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
}

body .main-nav-menu .lef-mega-promo__phone::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--succes);
}

body .main-nav-menu .lef-mega-promo .btn,
body .main-nav-menu .lef-mega-promo .btn .icon {
	color: var(--black-content);
}

body .main-nav-menu .lef-mega-promo .btn {
	margin: auto 0 0;
	padding: 10px 20px;
	font-size: 15px;
}

/* buttons in the mega menu hover like every button, not like a menu link (theme: red text on light grey) */
body .main-nav-menu .lef-mega-promo .btn:hover {
	background-color: var(--primary);
	color: var(--primary-content);
}

body .main-nav-menu .lef-mega-main .lef-mega-all:hover {
	border-color: var(--black);
	background-color: var(--white);
	color: var(--black);
}

/* Language switcher (plugin lefcreative-multisite-sync: menu item "[lef_language_switcher]", class
   .lef-switcher-menu-item) in the CTA menu: flag + "NL" with a small chevron, the other languages in a compact
   dropdown. What shows (flag / code / label) is the plugin's network setting; the flag size is the plugin's CSS. */

body .nav-holder-primary-2 li.lef-switcher-menu-item > a {
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
}

body .nav-holder-primary-2 li.lef-switcher-menu-item.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: 0 2px 0 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

body .nav-holder-primary-2 li.lef-switcher-menu-item > .sub-menu {
	min-width: 0;
	padding: 6px;
}

body .nav-holder-primary-2 li.lef-switcher-menu-item > .sub-menu a {
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 600;
}

/* mobile menu: the languages side by side at the bottom (current one dark, the others muted), no dropdown */
body nav.mobile-navigation li.lef-switcher-menu-item.menu-item-has-children {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-top: 16px;
}

body nav.mobile-navigation li.lef-switcher-menu-item > .sub-menu-toggle {
	display: none;
}

body nav.mobile-navigation li.lef-switcher-menu-item > .sub-menu {
	display: flex !important;
	position: static;
	width: auto;
	height: auto !important;
	max-height: none !important;
	margin: 0;
	padding: 0;
	overflow: visible;
	visibility: visible;
	opacity: 1;
	background: none;
	transform: none;
}

/* the theme gives mobile menu links the full width: shrink them so the codes sit next to each other; the current
   language keeps the menu's 15px left inset so it lines up with the items above */
body nav.mobile-navigation li.lef-switcher-menu-item a {
	gap: 8px;
	width: auto;
	padding: 0 16px 0 0;
	font-size: 15px;
	font-weight: 600;
}

body nav.mobile-navigation li.lef-switcher-menu-item.menu-item-has-children > a {
	flex: 0 0 auto; /* the theme grows it to make room for the (hidden) dropdown toggle */
	padding-left: 15px;
}

body nav.mobile-navigation li.lef-switcher-menu-item > .sub-menu a {
	color: var(--lef-muted);
}

/* Phone number in the menu-bar shortcode slot, with a live "reachable" dot */
body .nav-shortcode a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: 2px;
	color: var(--black);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

body .nav-shortcode a::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--succes);
	box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
	animation: lef-pulse 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

/* CTA menu button */
body .main-nav-menu li.menu-item-has-button > a {
	padding: 0 !important;
}

body .main-nav-menu .menu-item-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--btn-border-radius);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	transition: var(--general-transition);
}

/* The theme always puts a menu-item icon before the label; ours trails it */
body .main-nav-menu .menu-item-button .icon {
	order: 2;
	margin: 0;
}

body .main-nav-menu .menu-item-button.bg-black:hover {
	background-color: var(--primary);
	color: var(--primary-content);
}

/* BUTTONS ------------------------------------------------------------------ */
body .btn {
	letter-spacing: 0;
	line-height: 1.5;
}

body .btn.btn-small {
	line-height: 20px;
}

/* Convention: icon "arrow-up" in a button is drawn diagonally (↗ = "start a conversation") */
body .btn .icon-arrow-up,
body .menu-item-button .icon-arrow-up {
	transform: rotate(45deg);
}

body .btn.bg-black:hover,
body .btn.bg-black.is-peer-hover {
	background-color: var(--primary);
	color: var(--primary-content);
}

/* Outline button (colour "transparent") on the light canvas */
body .btn.bg-transparent {
	border-color: rgba(var(--black-rgb), .15);
	background-color: var(--white);
}

/* .is-peer-hover: the green cursor of the hero canvas "hovers" a button (js/hero-canvas.js) */
body .btn.bg-transparent:hover,
body .btn.bg-transparent.is-peer-hover {
	border-color: var(--black);
	background-color: var(--white);
	color: var(--black);
}

body .btn.bg-white:hover,
body .btn.bg-white.is-peer-hover {
	background-color: var(--primary);
	color: var(--primary-content);
}

/* COMPONENTS --------------------------------------------------------------- */
/* Images: 8px (= --general-border-radius; only buttons and the header nesting differ) */
body .image-outer .image-holder img {
	border-radius: var(--lef-radius-media);
}

/* Cards (col cards and card blocks) */
/* .card.col-card is the theme's selector (0,2,0); match it */
body .card.col-card {
	padding: 32px;
	border-radius: var(--general-border-radius);
}

/* Price cards breathe a little more */
body .col-card:has(.price),
body .col-card:has(.lef-new-plan-card) {
	padding: 40px;
}

body .col-card.bg-white p,
body .col-card.bg-gray p {
	color: var(--lef-muted);
	line-height: 1.625;
}

/* Stretch rows nested in a col: cards fill the available height */
body .row.align-stretch > .wp-block-custom-section-block-col > .wp-block-custom-section-block-row.align-stretch {
	height: calc(100% + 20px);
	margin-top: -10px;
	margin-bottom: -10px;
}

body .wp-block-custom-section-block-row.align-stretch > .wp-block-custom-section-block-col {
	display: flex;
	flex-direction: column;
}

body .wp-block-custom-section-block-row.align-stretch > .wp-block-custom-section-block-col > .col-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
}

body .col-card.bg-primary,
body .col-card.bg-black {
	border-color: transparent;
}

/* Col variant "service-card" (extra CSS class on the col): icon square on top, title + text + link at the bottom */
body .service-card > .card.col-card {
	display: flex;
	flex-direction: column;
	transition: border-color .3s, box-shadow .5s var(--lef-ease);
}

body .service-card > .card.col-card:hover {
	border-color: var(--black);
	box-shadow: 0 24px 48px -32px rgba(24, 24, 27, .35);
}

body .service-card .icon-outer {
	margin-bottom: 0;
}

body .service-card .icon-outer .icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: var(--lef-radius-media);
	background: var(--secondary);
	font-size: 20px;
}

body .service-card .bg-black .icon-outer .icon {
	background: rgba(255, 255, 255, .1);
}

/* core services (col class "dienst-kern", same code as the mega menu): icon block filled in primary */
body .service-card.dienst-kern .icon-outer .icon {
	background: var(--primary);
	color: var(--primary-content);
}

/* second tier (col class "service-card-small", 4 in a row): smaller title, so Websites and Webshops lead */
body .service-card.service-card-small h3 {
	margin-top: 20px;
	font-size: 26px;
}

body .service-card.service-card-small .content-wrapper p {
	font-size: 15px;
}

/* extra services: one quiet line under the cards */
body .content-wrapper.services-extra p {
	margin: 12px 0 0;
	color: var(--lef-muted);
}

body .service-card h3 {
	margin: 28px 0 0;
	font-size: 40px;
	line-height: 1.1;
}

body .service-card .content-wrapper p {
	max-width: 52ch;
	margin-top: 10px;
}

/* the link sits at the bottom, so cards in one row line up */
body .row.align-stretch .service-card .card.col-card .buttons-holder {
	margin-top: auto;
	padding-top: calc(28px - var(--btn-margin-outer));
}

body .content-wrapper.price h3 {
	margin: 0 0 8px;
	font-size: 60px;
	letter-spacing: -0.04em;
	line-height: 1;
}

body .content-wrapper.price h3 {
	margin-top: 32px;
	font-size: 72px;
}

body .content-wrapper.price p {
	margin: 8px 0 0;
}

body .content-wrapper.price h3 small {
	color: var(--lef-muted);
	font-family: var(--body-font);
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
}

body .bg-black .content-wrapper.price h3 small,
body .bg-black .content-wrapper p {
	color: rgba(255, 255, 255, .7);
}

body .content-wrapper.price h4,
.lef-new-plan-card__head h4 {
	margin: 0;
	font-size: 24px;
	line-height: 1.333;
}

/* the theme pushes card buttons down with margin-top: auto in stretch rows; ours follow the content */
body .row.align-stretch .card.col-card .buttons-holder,
body .card.col-card .buttons-holder {
	margin-top: calc(40px - var(--btn-margin-outer));
}

/* A row inside a card: no extra col margin at its edges */
body .card.col-card > .wp-block-custom-section-block-row {
	margin-top: -10px;
	margin-bottom: -10px;
}

/* Icon lists */
body .icons-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px 32px;
	margin: 32px 0 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.5;
}

body .icons-list li .icon {
	width: auto;
	margin-right: 12px;
	font-size: 15px;
}

body .icons-list li .icon {
	color: var(--primary);
}

body .bg-black .icons-list li .icon {
	color: #e58a8a;
}

/* Gravity Forms placeholder (inline e-mail + button); restyle real GF output the same way */
body .gform-placeholder form {
	display: flex;
	gap: 12px;
	max-width: 460px;
	margin: 36px auto 0;
}

body .gform-placeholder input[type="email"] {
	flex: 1;
	height: 48px;
	color: var(--black);
	padding: 0 var(--form-elements-padding-x);
	border: 1px solid var(--lef-line);
	border-radius: var(--form-elements-border-radius);
	background: var(--gray);
	font: inherit;
	font-size: 15px;
}

body .gform-placeholder .btn {
	height: 48px;
	margin: 0;
}

body .gform-placeholder + .content-wrapper.muted p {
	margin-top: 24px;
}

/* PAGE TITLE (text-content variant "page-title"): big h1 with the red closing dot of the logo */
body .content-wrapper.page-title h1 {
	margin: 0;
	font-size: 96px;
	letter-spacing: -0.045em;
	line-height: 1;
}

body .content-wrapper.page-title h1::after {
	content: ".";
	color: var(--primary);
}

body .content-wrapper.page-title h1 + p {
	max-width: 52ch;
	margin-top: 28px;
	color: var(--lef-muted);
	font-size: var(--lef-lead-size);
	line-height: 1.625;
}

body .content-wrapper.page-count p {
	font-size: 15px;
	line-height: 1.6;
}

body .content-wrapper.page-count strong {
	color: var(--black);
	font-family: var(--heading-font);
	font-size: 28px;
	font-weight: 900;
}

/* the first section of an inner page: less top room than the home hero */
body.fixed-header section.lef-section.section-page-top {
	padding-top: 168px;
}

/* Section extra class "section-page-hero": the hero of a sub page (left aligned, cursors stay inside) */
body section.lef-section.section-page-hero {
	overflow: clip; /* not hidden: hidden makes the section a scroll container and breaks lef-sticky columns */
}

body .section-page-hero .content-wrapper.intro p {
	margin-top: 8px;
}

/* acf/breadcrumbs (Yoast trail): a path in mono with red slashes (separator span via child filter wpseo_breadcrumb_separator) */
body #breadcrumbs {
	display: block;
	margin-bottom: 20px;
	color: var(--lef-muted);
	font-family: var(--lef-mono);
	font-size: 13px;
	letter-spacing: -0.01em;
}

body #breadcrumbs .breadcrumb-sep {
	margin: 0 10px;
	color: var(--primary);
	font-weight: 600;
}

#main #breadcrumbs a:not(.btn) {
	color: var(--lef-muted);
	text-decoration: none;
	transition: color .2s;
}

#main #breadcrumbs a:not(.btn):hover {
	color: var(--black);
}

body #breadcrumbs .breadcrumb_last {
	color: var(--black);
	font-weight: 500;
}

/* TERM FILTER (featured-taxonomy-terms as links, extra class "term-filter") */
body .featured-taxonomy-terms.term-filter {
	gap: 8px;
	margin-top: 40px;
}

#main .featured-taxonomy-terms.term-filter a {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	border: 1px solid var(--lef-line);
	border-radius: 999px;
	background: var(--white);
	color: var(--black);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .3s, background-color .3s, color .3s;
}

#main .featured-taxonomy-terms.term-filter a:hover {
	border-color: var(--black);
}

#main .featured-taxonomy-terms.term-filter a.is-active,
#main .featured-taxonomy-terms.term-filter a[aria-current] {
	border-color: var(--black);
	background: var(--black);
	color: var(--white);
}

/* CARD-PORTFOLIO (child override adds p.card-client): photo 3:2, client in red, a result sentence; the whole card
   is the link. On hover a cut-out corner with an arrow appears top right of the photo (always visible on touch).
   With 1 per row (featured-highlight) the text sits over the photo. Same look as the items of lef-new/work-rows. */
body .card.card-portfolio {
	position: relative;
	margin: 0 0 24px;
	padding: 0;
	overflow: visible;
	border: 0;
	background: transparent;
}

body .card.card-portfolio .image-outer {
	position: relative;
	padding: 0;
	overflow: hidden;
	clip-path: inset(0 round var(--lef-radius-media));
	border-radius: var(--lef-radius-media);
	background: var(--gray);
}

body .card.card-portfolio .image-outer .image-holder {
	padding-bottom: 125%;
}

body .card.card-portfolio .image-outer .image-holder img {
	border-radius: 0;
	transition: transform .8s var(--lef-ease);
}

body .card.card-portfolio:hover .image-outer .image-holder img {
	transform: scale(1.04);
}

body .card.card-portfolio .content-outer {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	padding: 20px 0 0;
	background: transparent;
	color: var(--black);
}

body .card.card-portfolio .card-client {
	grid-column: 1;
	margin: 0 0 6px;
	color: var(--primary);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

body .card.card-portfolio h4 {
	grid-column: 1;
	margin: 0;
	font-size: 22px;
	letter-spacing: -0.015em;
	line-height: 1.35;
}

/* services stay in the markup (filter + SEO) but are not shown */
body .card.card-portfolio .block-list {
	display: none;
}

/* the read-more button stays in the markup (link + label for screen readers); its ::before stretches the link over
   the whole card, the button itself takes no space */
body .card.card-portfolio .buttons-holder {
	margin: 0;
}

body .card.card-portfolio .buttons-holder .btn {
	position: static;
	width: 0;
	height: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: none;
	font-size: 0;
}

body .card.card-portfolio .buttons-holder .btn span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body .card.card-portfolio .buttons-holder .btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
}

/* the cut-out corner: a notch in the background colour of the section (--lef-notch) with the arrow in it, plus two
   concave fillers so the photo corner curves into it. Lives on .image-outer::after / ::before and .image-holder::before. */
body .card.card-portfolio {
	--lef-notch: var(--tertiary);
	--lef-notch-size: 60px;
	--lef-notch-r: 16px;
}

body .bg-gray .card.card-portfolio {
	--lef-notch: var(--gray);
}

body .bg-white .card.card-portfolio {
	--lef-notch: var(--white);
}

body .card.card-portfolio .image-outer::after,
body .card.card-portfolio .image-outer::before,
body .card.card-portfolio .image-outer .image-holder::before {
	content: "";
	position: absolute;
	z-index: 3;
	opacity: 0;
	transform: translate(10px, -10px);
	transition: opacity .3s, transform .45s var(--lef-ease);
	pointer-events: none;
}

body .card.card-portfolio .image-outer::after {
	top: -1px;
	right: -1px;
	width: calc(var(--lef-notch-size) + 1px);
	height: calc(var(--lef-notch-size) + 1px);
	border-bottom-left-radius: var(--lef-notch-r);
	background: var(--lef-notch) var(--lef-notch-arrow) no-repeat 58% 42% / 20px;
}

body .card.card-portfolio .image-outer::before {
	top: -1px;
	right: var(--lef-notch-size);
	width: var(--lef-notch-r);
	height: var(--lef-notch-r);
	background: radial-gradient(circle at 0 100%, transparent calc(var(--lef-notch-r) - .5px), var(--lef-notch) var(--lef-notch-r));
}

body .card.card-portfolio .image-outer .image-holder::before {
	top: var(--lef-notch-size);
	right: -1px;
	width: var(--lef-notch-r);
	height: var(--lef-notch-r);
	background: radial-gradient(circle at 0 100%, transparent calc(var(--lef-notch-r) - .5px), var(--lef-notch) var(--lef-notch-r));
}

body .card.card-portfolio:hover .image-outer::after,
body .card.card-portfolio:hover .image-outer::before,
body .card.card-portfolio:hover .image-outer .image-holder::before,
body .card.card-portfolio:focus-within .image-outer::after,
body .card.card-portfolio:focus-within .image-outer::before,
body .card.card-portfolio:focus-within .image-outer .image-holder::before {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	body .card.card-portfolio .image-outer::after,
	body .card.card-portfolio .image-outer::before,
	body .card.card-portfolio .image-outer .image-holder::before {
		opacity: 1;
		transform: none;
	}
}

/* highlighted case: text over the photo */
body .featured-highlight .card.card-portfolio .image-outer .image-holder {
	padding-bottom: 46%;
}

body .featured-highlight .card.card-portfolio .image-outer .image-holder::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(24, 24, 27, .72), rgba(24, 24, 27, .1) 50%, transparent);
}

body .featured-highlight .card.card-portfolio .content-outer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 40px;
	color: #fff; /* over the photo: always white, also in dark mode (where --white is dark) */
}

body .featured-highlight .card.card-portfolio .card-client {
	color: #fff;
	opacity: .8;
}

body .featured-highlight .card.card-portfolio h4 {
	max-width: 22em;
	color: #fff;
	font-size: 32px;
	line-height: 1.25;
}

body .featured-highlight + .featured {
	margin-top: 32px;
}

/* INSPIRE CARD (col-card gray, extra class "inspire-card"): steps 48px out of the grid on both sides (never closer
   than 12px to the viewport edge); the text padding uses the same value, so the text stays on the content line.
   Registered as <length> so the value is resolved once here and inherited as-is by the inner columns. */
@property --lef-bleed {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

/* content width per container step (container-width 1350 → 1320; bootstrap 1140 → 1110; 960 → 930) */
body .grid-cta {
	--lef-bleed: min(48px, calc((100vw - 930px) / 2 - 12px));
	margin: 24px calc(var(--lef-bleed) * -1) 56px;
	max-width: none;
	flex: 0 0 calc(100% + var(--lef-bleed) * 2);
}

@media (min-width: 1200px) {
	body .grid-cta {
		--lef-bleed: min(48px, calc((100vw - 1110px) / 2 - 12px));
	}
}

@media (min-width: 1380px) {
	body .grid-cta {
		--lef-bleed: min(48px, calc((100vw - 1320px) / 2 - 12px));
	}
}

body .card.col-card.inspire-card {
	overflow: hidden;
	padding: 0;
	border-color: transparent;
}

body .inspire-card > .row {
	margin: 0;
}

body .inspire-card > .row > .wp-block-custom-section-block-col {
	margin: 0;
	padding: 0;
}

body .inspire-card > .row > .wp-block-custom-section-block-col:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 80px 64px 80px calc(var(--lef-bleed) + 9px); /* bleed + 9px row/border offset = text on the content line */
}

body .inspire-card h3 {
	max-width: 11em;
	margin: 24px 0 0;
	color: var(--black);
	font-size: 48px;
	line-height: 1.04;
}

body .inspire-card .content-wrapper p {
	max-width: 46ch;
	margin-top: 20px;
	color: var(--lef-muted);
	font-size: var(--lef-lead-size);
	line-height: 1.6;
}

body .inspire-card .content-wrapper p strong {
	color: var(--black);
}

body .inspire-card .buttons-holder {
	margin-top: calc(32px - var(--btn-margin-outer));
}

/* the photo fills its half of the card */
body .inspire-card .image-outer,
body .inspire-card .image-holder {
	height: 100%;
	margin: 0;
}

body .inspire-card .image-holder img {
	height: 100%;
	min-height: 520px;
	border-radius: 0;
	object-fit: cover;
}

/* [review_information] score: stars + 9.9 / 10 + link */
body .review-information .review-information-header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
}

body .review-information .avarage-stars {
	order: -1;
	display: flex;
	gap: 3px;
	color: var(--primary);
	font-size: 15px;
}

body .review-information .avarage-stars .icon {
	margin: 0;
	font-size: 1em;
}

body .review-information .avarage-rating {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 14px;
}

body .inspire-card .review-information .rating-value {
	color: var(--black);
	font-weight: 600;
}

#main .inspire-card .review-information-based-on {
	color: var(--lef-muted);
	text-decoration-color: rgba(24, 24, 27, .25);
	text-underline-offset: 3px;
}

body .werk-empty {
	padding: 48px 0;
	color: var(--lef-muted);
	text-align: center;
}

/* FOOTER ------------------------------------------------------------------- */
/* Dark canvas panel closing the page, floating 12px from the edges (theme option footer colour = black). */
body footer#footer {
	position: relative;
	overflow: hidden;
	margin: 0 12px 12px;
	border-radius: var(--general-border-radius);
	background-color: var(--black);
	background-image:
		radial-gradient(60% 80% at 100% 100%, rgba(189, 55, 55, .28), transparent 70%),
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0);
	background-size: auto, 22px 22px;
	color: rgba(255, 255, 255, .6);
	font-size: 15px;
	line-height: 1.5;
}

body footer#footer .footer-inner {
	padding: 96px 0 72px;
}

@media (min-width: 992px) {
	body footer#footer .footer-inner .row {
		display: grid;
		grid-template-columns: 6fr 2fr 2fr 2fr;
		column-gap: 40px;
		margin: 0;
	}

	body footer#footer .footer-inner .row > [class*="col-lg-"] {
		max-width: none;
		margin: 0;
		padding: 0;
	}
}

body footer#footer a {
	color: rgba(255, 255, 255, .6);
	text-decoration: none;
	transition: color .3s;
}

body footer#footer a:hover {
	color: var(--white);
}

body footer#footer h6 {
	margin-bottom: 20px;
	color: var(--white);
	font-family: var(--body-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: normal;
	text-transform: none;
}

body footer#footer .clean-list li {
	margin-bottom: 10px;
}

/* Area 1: text-content "footer-hero"; first paragraph = [lef_team_avatars] + status text */
body footer#footer .footer-hero p:first-child {
	display: flex;
	align-items: center;
	margin-bottom: 36px;
	color: rgba(255, 255, 255, .75);
	font-size: 14px;
}

body footer#footer .footer-hero .team-avatars {
	display: inline-flex;
}

body footer#footer .footer-hero .team-avatars img {
	width: 40px;
	height: 40px;
	margin-right: -10px;
	border: 2px solid var(--black);
	border-radius: 50%;
	object-fit: cover;
}

body footer#footer .footer-hero .team-avatars img:last-child {
	margin-right: 14px;
}

/* [lef_team_status]: live status from the opening hours, green dot when open, grey when closed */
.lef-team-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.lef-team-status__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--succes);
}

.lef-team-status.is-closed .lef-team-status__dot {
	background: var(--lef-muted);
}

/* closed (body class from inc/shortcodes.php): every "reachable" dot turns grey and stops pulsing */
body.lef-team-closed .nav-shortcode a::before,
body.lef-team-closed .main-nav-menu .lef-mega-promo__phone::before,
body.lef-team-closed .hero-contact .content-wrapper:first-child p:first-child::after {
	background: var(--lef-muted);
	animation: none;
}

/* Big contact links: display type, underline grows in, arrow turns on hover */
body footer#footer .footer-hero p:last-child a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--white);
	font-family: var(--heading-font);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.35;
}

body footer#footer .footer-hero p:last-child a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 46px;
	bottom: 2px;
	height: 2px;
	background: var(--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--lef-ease);
}

body footer#footer .footer-hero p:last-child a::after {
	content: "\2197";
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	font-family: var(--body-font);
	font-size: 16px;
	transition: transform .4s var(--lef-ease), background-color .3s;
}

body footer#footer .footer-hero p:last-child a:hover::before {
	transform: scaleX(1);
}

body footer#footer .footer-hero p:last-child a:hover::after {
	background: var(--primary);
	color: var(--white);
	transform: rotate(45deg);
}

/* Socket */
body footer#footer .socket {
	padding: 24px 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .45);
	font-size: 14px;
	line-height: 20px;
}

body footer#footer .socket-half:first-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	width: 100%;
}

body footer#footer .socket-logo {
	width: 110px;
	height: auto;
	filter: brightness(0) invert(1);
}

body footer#footer #socket-menu {
	margin-left: auto;
}

body footer#footer #socket-menu-ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body footer#footer #socket-menu-ul a {
	color: rgba(255, 255, 255, .45);
}

body footer#footer #socket-menu-ul .menu-item-top a {
	color: var(--white);
}

body footer#footer #socket-menu-ul .menu-item-top a::after {
	content: " \2191";
}

/* MOBILE ------------------------------------------------------------------- */
/* Menu button: a small burger in a 44px bordered square (theme draws a 30px burger) */
body .mobile-menu-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(24, 24, 27, .15);
	border-radius: var(--btn-border-radius);
	background: transparent;
}

body .mobile-menu-toggle .hamburger {
	width: 18px;
	height: 18px;
}

body .mobile-menu-toggle .hamburger-icon {
	width: 18px;
}

body .mobile-menu-toggle .hamburger-icon span {
	height: 1.5px;
	border-radius: 1px;
}

body .mobile-menu-toggle .hamburger-icon span + span {
	margin-top: 4.5px;
}

/* the theme's X animation travels 11px (3px bars + 8px gap); ours travel 6px */
body.menu-open .hamburger-icon span:first-child {
	animation-name: lef-burger-top;
}

body.menu-open .hamburger-icon span:nth-child(3) {
	animation-name: lef-burger-bottom;
}

@keyframes lef-burger-top {
	0% { top: 0; transform: rotate(0); }
	50% { top: 6px; transform: rotate(0); }
	to { top: 6px; transform: rotate(45deg); }
}

@keyframes lef-burger-bottom {
	0% { bottom: 0; transform: rotate(0); }
	50% { bottom: 6px; transform: rotate(0); }
	to { bottom: 6px; transform: rotate(135deg); }
}

@media (max-width: 991px) {
	/* html:root: the theme prints its :root tokens inline after this sheet */
	html:root {
		--section-padding: 96px;
		--transparent-top-section-padding: calc(var(--fake-menu-height) + var(--section-padding));
	}

	section.lef-section.section-xl {
		padding-top: 96px;
		padding-bottom: 96px;
	}

	section.lef-section.section-tight {
		padding-bottom: 80px;
	}

	section.lef-section.section-intro {
		padding-bottom: 56px;
	}

	section.lef-section.section-follow {
		padding-top: 0;
	}

	section.lef-section.section-cta > .container {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	section.lef-section.section-cta h2 {
		font-size: 36px;
	}

	body.fixed-header section.lef-section.section-page-top {
		padding-top: 128px;
	}

	body .content-wrapper.page-title h1 {
		font-size: 56px;
	}

	body .content-wrapper.page-count p[style*="right"] {
		text-align: left !important;
	}

	body .featured-taxonomy-terms.term-filter {
		flex-wrap: nowrap;
		margin-right: -15px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	#main .featured-taxonomy-terms.term-filter a {
		flex: 0 0 auto;
	}

	body .featured-highlight .card.card-portfolio .image-outer .image-holder {
		padding-bottom: 120%;
	}

	body .featured-highlight .card.card-portfolio .content-outer {
		padding: 24px;
	}

	body .featured-highlight .card.card-portfolio h4 {
		font-size: 24px;
	}

	body .card.card-portfolio h4 {
		font-size: 19px;
	}

	body .grid-cta {
		--lef-bleed: 0px;
		margin: 16px 0 40px;
		flex: 0 0 100%;
	}

	body .inspire-card > .row > .wp-block-custom-section-block-col:first-child {
		padding: 40px 24px;
	}

	body .inspire-card h3 {
		font-size: 34px;
	}

	body .inspire-card .image-holder img {
		min-height: 260px;
	}

	/* the CTA panel keeps 24px of its own side padding (container 15 + 25) */
	section.lef-section.section-cta > .container {
		padding-left: 40px;
		padding-right: 40px;
	}

	/* right-aligned buttons line up with the text on small screens */
	body .buttons-holder.alignment-right {
		text-align: left;
	}

	body .card.col-card {
		padding: 24px;
	}

	body .service-card h3 {
		margin-top: 24px;
		font-size: 30px;
	}


	body .content-wrapper.price h3 {
		font-size: 60px;
	}

	body .col-card:has(.price),
	body .col-card:has(.lef-new-plan-card) {
		padding: 24px;
	}

	body .gform-placeholder form {
		flex-direction: column;
	}

	body .gform-placeholder input[type="email"] {
		flex: none;
		width: 100%;
	}

	body .gform-placeholder .btn {
		justify-content: center;
		width: 100%;
	}

	/* Footer: contact on top, two link columns side by side, address below */
	body footer#footer {
		margin: 0 8px 8px;
	}

	body footer#footer .footer-inner .row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		margin: 0;
	}

	body footer#footer .footer-inner .row > [class*="col-lg-"] {
		max-width: none;
		margin: 0;
		padding: 0;
	}

	body footer#footer .footer-inner .row > :first-child,
	body footer#footer .footer-inner .row > :last-child {
		grid-column: 1 / -1;
	}

	body footer#footer .footer-inner {
		padding: 64px 0 48px;
	}

	body footer#footer .footer-hero p:last-child a {
		font-size: 24px;
	}

	body footer#footer #socket-menu {
		margin-left: 0;
	}
}

@keyframes lef-pulse {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); }
	75%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
	body .nav-shortcode a::before {
		animation: none;
	}
}

/* DIENSTPAGINA ------------------------------------------------------------------ */

/* Col extra class "lef-sticky": the col stays in view while the column next to it scrolls */
body .lef-sticky {
	position: sticky;
	top: calc(var(--lef-header-offset) + 24px);
}

body .lef-sticky .image-holder img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Text-content variant "process": every h3 + p is a step, separated by a line */
body .content-wrapper.process {
	margin-top: 40px;
}

body .content-wrapper.process h3 {
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid var(--lef-line);
	font-size: 26px;
}

body .content-wrapper.process h3:not(:first-child) {
	margin-top: 32px;
}

body .content-wrapper.process p {
	max-width: 52ch;
	margin-top: 10px;
	color: var(--lef-muted);
}

/* acf/counter: big numbers in the heading font */
body .counter-outer {
	margin-top: 32px;
}

body .count-outer * {
	text-align: left;
}

body .count-outer .top-layer {
	justify-content: flex-start;
	font-variant-numeric: tabular-nums;
	align-items: baseline;
	font-family: var(--heading-font);
	letter-spacing: -0.04em;
	line-height: 1;
}

body .count-outer .top-layer .counter,
body .count-outer .top-layer .counter-surfix {
	margin: 0;
	font-size: 64px;
	font-weight: 900;
}

body .count-outer .counter-ondertitle {
	margin-top: 10px;
	color: var(--lef-muted);
	font-size: 15px;
	opacity: 1;
}

/* acf/featured-faqs: roomier rows, question in the heading font */
body .featured-faqs .accordion + .accordion {
	margin-top: 12px;
}

body .featured-faqs .accordion .accordion-title {
	gap: 24px;
	padding: 22px 24px;
	font-family: var(--heading-font);
	font-size: 19px;
	letter-spacing: -0.01em;
}

body .featured-faqs .accordion .accordion-content {
	padding: 0 24px 24px;
	border-top: 0;
}

body .featured-faqs .accordion .accordion-content p {
	max-width: 60ch;
	color: var(--lef-muted);
}

body .featured-faqs .accordion-toggle {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--lef-line);
	border-radius: 50%;
	font-size: 13px;
}

/* col-card extra class "update-feed": a short changelog */
body .card.col-card.update-feed {
	padding: 40px;
}

body .update-feed h4 {
	margin-bottom: 12px;
}

body .update-feed ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .update-feed li {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 12px;
	align-items: baseline;
	margin: 0;
	padding: 14px 0;
	font-size: 15px;
	line-height: 1.5;
}

body .update-feed li + li {
	border-top: 1px solid var(--lef-line);
}

body .update-feed li::before {
	content: none;
}

body .update-feed li strong {
	color: var(--lef-muted);
	font-family: var(--lef-mono-system);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}

body .update-feed p {
	margin-top: 16px;
	color: var(--lef-muted);
}

@media (max-width: 991px) {
	body .lef-sticky {
		position: static;
	}

	body .lef-sticky .image-holder img {
		aspect-ratio: 3 / 2;
	}

	body .count-outer .top-layer .counter,
	body .count-outer .top-layer .counter-surfix {
		font-size: 48px;
	}

	body .card.col-card.update-feed {
		padding: 28px 24px;
	}
}

/* NEW BLOCKS (not in leflite yet; each one is documented in NEW-BLOCKS.md) - */

/* lef-new/hero-canvas */
.lef-new-hero-canvas__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.lef-new-hero-canvas__text {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 2.3em;
	font-family: var(--heading-font);
	font-size: clamp(48px, 6.6vw, 92px);
	font-weight: 900;
}

/* before hero-canvas.js moves the tiles into the section they sit inside the block: keep them out of the flow and
   invisible, otherwise the stacked photos push the page down until the script runs (CLS 0.86 on the home page) */
.lef-new-hero-canvas > .lef-new-hero-canvas__tiles {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

body section.lef-section > .lef-new-hero-canvas__tiles {
	position: absolute;
	inset: 84px 0 0;
	z-index: 1;
	pointer-events: none;
	--m: radial-gradient(ellipse 52% 50% at 50% 50%, transparent 42%, rgba(0, 0, 0, .3) 66%, #000 92%), linear-gradient(to bottom, transparent, #000 60px, #000 calc(100% - 110px), transparent);
	-webkit-mask-image: var(--m);
	mask-image: var(--m);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.lef-new-hero-canvas__tile {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	border: 3px solid var(--white);
	border-radius: var(--lef-radius-media);
	background: var(--gray);
	box-shadow: var(--lef-shadow-tile);
	will-change: transform;
}

.lef-new-hero-canvas__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body section.lef-section > .lef-new-hero-canvas__cursor {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 30;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

.lef-new-hero-canvas__cursor svg {
	display: block;
	fill: var(--cursor-color);
}

.lef-new-hero-canvas__label {
	position: absolute;
	left: 18px;
	top: 22px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--cursor-color);
	box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transform-origin: 0 0;
	will-change: transform;
}

.lef-new-hero-canvas__name {
	display: inline-block;
	transition: opacity .18s, transform .18s;
}

.lef-new-hero-canvas__name.swap {
	opacity: 0;
	transform: translateY(4px);
}

/* the section's own content above the tile ring */
section.lef-section.section-hero > .container {
	z-index: 3;
}

@media (pointer: fine) {
	section.lef-section.uc-on,
	section.lef-section.uc-on * {
		cursor: none !important;
	}
}

@media (max-width: 639px) {
	.lef-new-hero-canvas__text {
		height: 4.5em;
	}

	body section.lef-section > .lef-new-hero-canvas__tiles {
		--m: radial-gradient(ellipse 80% 44% at 50% 50%, transparent 55%, rgba(0, 0, 0, .35) 75%, #000 95%), linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 70px), transparent);
	}
}

/* hero-canvas variant "compact" (page heroes): smaller type, no ring */
.lef-new-hero-canvas--compact .lef-new-hero-canvas__text {
	font-size: clamp(44px, 5.4vw, 80px);
}

@media (max-width: 639px) {
	.lef-new-hero-canvas--compact .lef-new-hero-canvas__text {
		height: 3.5em;
	}
}

/* lef-new/logo-marquee */
.lef-new-logo-marquee {
	display: flex;
	flex-direction: column;
	gap: 36px;
	overflow: hidden;
	margin-top: 40px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.lef-new-logo-marquee__track {
	display: flex;
	align-items: center;
	gap: 64px;
	width: max-content;
	padding-right: 64px;
	animation: lef-marquee 38s linear infinite;
}

.lef-new-logo-marquee__track.is-reverse {
	animation-direction: reverse;
}

.lef-new-logo-marquee__track img {
	width: auto;
	height: 36px;
	filter: brightness(0);
	opacity: .45;
	transition: opacity .3s;
}

.lef-new-logo-marquee__track img.is-small {
	height: 24px;
}

.lef-new-logo-marquee__track img:hover {
	opacity: .9;
}

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

/* lef-new/work-rows */
/* --gutter = left edge of the grid content: (block width - container step) / 2 + 15px col padding.
   % in padding/margin resolves against the block, which spans the full viewport. */
.lef-new-work-rows {
	--gutter: 15px;
	margin: 0 -15px;
}

@media (min-width: 576px) {
	.lef-new-work-rows {
		--gutter: calc((100% - 540px) / 2 + 15px);
	}
}

@media (min-width: 768px) {
	.lef-new-work-rows {
		--gutter: calc((100% - 720px) / 2 + 15px);
	}
}

@media (min-width: 992px) {
	.lef-new-work-rows {
		--gutter: calc((100% - 960px) / 2 + 15px);
	}
}

@media (min-width: 1200px) {
	.lef-new-work-rows {
		--gutter: calc((100% - 1140px) / 2 + 15px);
	}
}

@media (min-width: 1410px) {
	.lef-new-work-rows {
		--gutter: calc((100% - 1350px) / 2 + 15px);
	}
}

.lef-new-work-rows__row {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	padding: 0 var(--gutter) 8px;
	scroll-padding: 0 var(--gutter);
	scrollbar-width: none;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
}

.lef-new-work-rows__row::-webkit-scrollbar {
	display: none;
}

.lef-new-work-rows__row:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.lef-new-work-rows.is-dragging .lef-new-work-rows__row {
	cursor: grabbing;
}

/* --lef-sub: sub-pixel part of the scroll drift (set by work-rows.js) */
.lef-new-work-rows__row > * {
	flex: 0 0 auto;
	transform: translate3d(var(--lef-sub, 0px), 0, 0);
}

.lef-new-work-rows__bar {
	position: relative;
	height: 16px;
	margin: 24px var(--gutter) 0;
	cursor: pointer;
	touch-action: none;
}

.lef-new-work-rows__bar[hidden] {
	display: none;
}

/* thin track, thumb thickens on hover/drag */
.lef-new-work-rows__bar::before {
	content: "";
	position: absolute;
	inset: 7px 0;
	border-radius: 999px;
	background: var(--gray);
}

.lef-new-work-rows__thumb {
	position: absolute;
	left: 0;
	top: 6px;
	height: 4px;
	border-radius: 999px;
	background: var(--black);
	cursor: grab;
	transition: top .2s var(--lef-ease), height .2s var(--lef-ease), background .2s;
}

.lef-new-work-rows__bar:hover .lef-new-work-rows__thumb,
.lef-new-work-rows.is-dragging .lef-new-work-rows__thumb {
	top: 4px;
	height: 8px;
	background: var(--primary);
}

/* items look exactly like card-portfolio: 3:2 photo, client in red, result sentence, cut-out corner with arrow on hover
   (notch = figure::after, fillers = figure::before + the link's ::after; colours/sizes from the card-portfolio variables) */
#main a.lef-new-work-rows__item:not(.btn) {
	--lef-notch: var(--tertiary);
	--lef-notch-size: 60px;
	--lef-notch-r: 16px;
	position: relative;
	display: grid;
	align-content: start;
	width: 520px;
	color: var(--black);
	text-decoration: none;
}

.lef-new-work-rows__item figure {
	position: relative;
	overflow: hidden;
	clip-path: inset(0 round var(--lef-radius-media));
	aspect-ratio: 4 / 5;
	margin: 0 0 20px;
	border-radius: var(--lef-radius-media);
	background: var(--gray);
}

.lef-new-work-rows__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--lef-ease);
}

.lef-new-work-rows__item:hover img {
	transform: scale(1.04);
}

.lef-new-work-rows__item figure::after,
.lef-new-work-rows__item figure::before,
#main a.lef-new-work-rows__item:not(.btn)::after {
	content: "";
	position: absolute;
	z-index: 3;
	opacity: 0;
	transform: translate(10px, -10px);
	transition: opacity .3s, transform .45s var(--lef-ease);
	pointer-events: none;
}

.lef-new-work-rows__item figure::after {
	top: -1px;
	right: -1px;
	width: calc(var(--lef-notch-size) + 1px);
	height: calc(var(--lef-notch-size) + 1px);
	border-bottom-left-radius: var(--lef-notch-r);
	background: var(--lef-notch) var(--lef-notch-arrow) no-repeat 58% 42% / 20px;
}

.lef-new-work-rows__item figure::before {
	top: -1px;
	right: var(--lef-notch-size);
	width: var(--lef-notch-r);
	height: var(--lef-notch-r);
	background: radial-gradient(circle at 0 100%, transparent calc(var(--lef-notch-r) - .5px), var(--lef-notch) var(--lef-notch-r));
}

#main a.lef-new-work-rows__item:not(.btn)::after {
	top: var(--lef-notch-size);
	right: -1px;
	width: var(--lef-notch-r);
	height: var(--lef-notch-r);
	background: radial-gradient(circle at 0 100%, transparent calc(var(--lef-notch-r) - .5px), var(--lef-notch) var(--lef-notch-r));
}

.lef-new-work-rows__item:hover figure::after,
.lef-new-work-rows__item:hover figure::before,
#main a.lef-new-work-rows__item:not(.btn):hover::after,
.lef-new-work-rows__item:focus-visible figure::after,
.lef-new-work-rows__item:focus-visible figure::before,
#main a.lef-new-work-rows__item:not(.btn):focus-visible::after {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.lef-new-work-rows__item figure::after,
	.lef-new-work-rows__item figure::before,
	#main a.lef-new-work-rows__item:not(.btn)::after {
		opacity: 1;
		transform: none;
	}
}

.lef-new-work-rows__client {
	margin: 0 0 6px;
	color: var(--primary);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.lef-new-work-rows__title {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.35;
	text-wrap: balance;
}

/* services stay in the markup but are not shown, like the block-list of card-portfolio */
.lef-new-work-rows__meta {
	display: none;
}

/* lef-new/photo-wall */
/* full bleed: cancel the container-fluid + col padding */
.lef-new-photo-wall {
	height: 300vh;
	margin: 0 -15px;
}

/* flex (not grid) so the taller-than-screen wall overflows evenly above and below the logo */
.lef-new-photo-wall__stage {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	overflow: hidden;
	perspective: 1100px;
}

.lef-new-photo-wall__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	flex: 0 0 auto;
	gap: 16px;
	width: calc(100% - 24px);
	transform-style: preserve-3d;
}

.lef-new-photo-wall__title {
	position: relative;
	z-index: 2;
	display: flex;
	grid-column: 2 / span 3;
	grid-row: 3;
	align-items: center;
	justify-content: center;
	max-width: none;
	margin: 0;
	font-size: clamp(36px, 4.6vw, 72px);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.lef-new-photo-wall__title span {
	color: var(--primary);
}

.lef-new-photo-wall__tile {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin: 0;
	border-radius: var(--lef-radius-media);
	background: var(--gray);
	box-shadow: var(--lef-shadow-tile);
	will-change: transform, opacity;
}

.lef-new-photo-wall__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lef-new-photo-wall.is-static {
	height: auto;
}

.lef-new-photo-wall.is-static .lef-new-photo-wall__stage {
	position: static;
	height: auto;
	padding: 96px 0;
}

/* lef-new/autocue */
.lef-new-autocue {
	--autocue-off: #d4d4d8;
	--autocue-on: var(--black);
	height: 220vh;
}

/* dark mode: from muted grey to pure white (--black is an off-white there) */
html[data-theme="dark"] .lef-new-autocue {
	--autocue-off: rgba(255, 255, 255, .28);
	--autocue-on: #fff;
}

.lef-new-autocue__sticky {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 1080px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 112px 0;
}

.lef-new-autocue__text p {
	margin: 0;
	font-family: var(--heading-font);
	font-size: 50px;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.28;
}

/* --lit (0..1) is scrubbed per word by js/autocue.js; the colours stay CSS, so a theme switch applies at once */
.lef-new-autocue__text .w {
	--lit: 0;
	color: color-mix(in srgb, var(--autocue-on) calc(var(--lit) * 100%), var(--autocue-off));
}

.lef-new-autocue__text a .w {
	--autocue-on: var(--primary);
}

.lef-new-autocue.is-static .lef-new-autocue__text .w {
	--lit: 1;
}

#main .lef-new-autocue__text a:not(.btn) {
	color: inherit;
	text-decoration: none;
}

.lef-new-autocue .buttons-holder {
	margin-top: 48px;
}

.lef-new-autocue__text a .w {
	text-decoration-line: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

.lef-new-autocue__text a:hover .w {
	color: var(--primary-darkened) !important;
}

.lef-new-autocue.is-static {
	height: auto;
}

.lef-new-autocue.is-static .lef-new-autocue__sticky {
	position: static;
	min-height: 0;
}

#main .lef-new-autocue.is-static .lef-new-autocue__text a:not(.btn) {
	color: var(--primary);
	text-decoration: underline;
}

/* lef-new/cta-tiles */
.lef-new-cta-tiles {
	position: absolute;
	inset: 0 15px;
	pointer-events: none;
}

section.lef-section.section-cta .row,
section.lef-section.section-cta .wp-block-custom-section-block-col {
	position: static;
}

/* The col that holds the tiles only fades in: a fadeInUp transform would make it the containing block of the
   absolute tiles for a moment, so they jump while the reveal runs. */
body section.lef-section.section-cta .wp-block-custom-section-block-col:has(> .lef-new-cta-tiles).animate__animated {
	animation-name: lef-cta-fade;
	transform: none;
}

@keyframes lef-cta-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* lef-new/plan-card */
/* package card next to the Maatwerk card: both cards as tall as the row (desktop; on mobile they stack) */
@media (min-width: 992px) {
	body .row:has(.lef-new-plan-card) {
		align-items: stretch;
	}

	/* section-grid-tight gives its first col (normally a heading) 46px below; here that col is the package card, which
	   made it 36px shorter than the Maatwerk card */
	body section.lef-section .row:has(.lef-new-plan-card) > .wp-block-custom-section-block-col {
		display: flex;
		flex-direction: column;
	}

	body section.lef-section.section-grid-tight > .container > .row:has(.lef-new-plan-card) > .wp-block-custom-section-block-col:first-child {
		margin-bottom: 10px;
	}

	body .row:has(.lef-new-plan-card) > .wp-block-custom-section-block-col > .card {
		flex: 1;
	}
}

.lef-new-plan-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.lef-new-plan-card__switch {
	--knob-index: 0;
	position: relative;
	display: inline-flex;
	padding: 4px;
	border-radius: 999px;
	background: var(--gray);
	font-size: 14px;
	font-weight: 500;
}

.lef-new-plan-card__knob {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: calc(50% - 4px);
	border-radius: 999px;
	background: var(--white);
	box-shadow: 0 2px 8px -2px rgba(24, 24, 27, .15);
	transform: translateX(calc(var(--knob-index) * 100%));
	transition: transform .3s var(--lef-ease);
}

.lef-new-plan-card__switch button {
	position: relative;
	z-index: 1;
	width: 112px;
	padding: 8px 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--lef-muted);
	font: inherit;
	line-height: 20px;
	cursor: pointer;
}

.lef-new-plan-card__switch button[aria-selected="true"] {
	color: var(--black);
}

.lef-new-plan-card__price {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin-top: 32px;
}

.lef-new-plan-card__amount {
	font-family: var(--heading-font);
	font-size: 72px;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
}

.lef-new-plan-card__per {
	padding-bottom: 8px;
	color: var(--lef-muted);
}

body .col-card .lef-new-plan-card__note {
	margin: 8px 0 0;
	line-height: 1.5;
}

.lef-new-cta-tiles img {
	position: absolute;
	left: var(--l, auto);
	right: var(--r, auto);
	top: var(--t);
	width: var(--w);
	height: var(--h);
	object-fit: cover;
	border: 3px solid var(--white);
	border-radius: var(--lef-radius-media);
	box-shadow: var(--lef-shadow-tile);
}

@media (min-width: 640px) and (max-width: 991px) {
	#main a.lef-new-work-rows__item:not(.btn) {
		width: 420px;
	}

	.lef-new-autocue__text p {
		font-size: 40px;
	}
}

@media (max-width: 639px) {
	.lef-new-photo-wall__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.lef-new-photo-wall__title {
		grid-column: 1 / -1;
		padding: 12px 0;
		font-size: 30px;
	}

	.lef-new-photo-wall__tile:nth-of-type(n+15) {
		display: none;
	}

	#main a.lef-new-work-rows__item:not(.btn) {
		width: 300px;
	}

	.lef-new-work-rows__title {
		font-size: 19px;
	}

	.lef-new-autocue__text p {
		font-size: 28px;
	}

	.lef-new-plan-card__amount {
		font-size: 60px;
	}

}

@media (max-width: 991px) {
	.lef-new-cta-tiles {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lef-new-logo-marquee__track {
		animation: none;
	}
}

/* lef-new/editor-demo */
/* A rebuild of the real leflite editor (col-block builder), recorded on elix.lefonline.nl, without the WP admin bar/menu
   so it does not read as "WordPress". Blocks are added with the + in a column, patterns with "Patroon toevoegen".
   The stage is drawn at a fixed 1200x680 and scaled to the frame width (--s, set by editor-demo.js), so it looks
   like a screenshot at every size. WP admin colours are literal on purpose: the admin is not themed (also not in dark mode). */
.lef-new-editor-demo {
	--wp-blue: #3858e9;
	--wp-dark: #1d2327;
	--wp-line: #e0e0e0;
	--wp-text: #1e1e1e;
	--wp-muted: #757575;
	margin-top: 32px;
}

.lef-new-editor-demo__steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0 24px;
	margin-bottom: 28px;
}

.lef-new-editor-demo__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 16px 0 0;
	border: 0;
	border-top: 2px solid var(--lef-line);
	background: none;
	color: var(--lef-muted);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: color .3s;
}

.lef-new-editor-demo__step strong {
	font-family: var(--heading-font);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.lef-new-editor-demo__step span {
	font-size: 14px;
	line-height: 1.5;
}

.lef-new-editor-demo__step.is-active,
.lef-new-editor-demo__step:hover {
	color: var(--black);
}

.lef-new-editor-demo__step:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
}

/* progress of the step that is playing, on its top line */
.lef-new-editor-demo__step i {
	position: absolute;
	top: -2px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--primary);
	transform: scaleX(0);
	transform-origin: left;
}

.lef-new-editor-demo__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1200 / 680;
	border: 1px solid var(--lef-line);
	border-radius: var(--lef-radius-media);
	box-shadow: 0 40px 80px -40px rgba(24, 24, 27, .35);
	user-select: none;
}

.lef-new-editor-demo__stage {
	position: absolute;
	left: 0;
	top: 0;
	width: 1200px;
	height: 680px;
	overflow: hidden;
	background: #fff;
	color: var(--wp-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	transform: scale(var(--s, 1));
	transform-origin: 0 0;
}

.lef-new-editor-demo__stage .icon {
	margin: 0;
}

/* editor */
.lef-new-editor-demo__editor {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
}

.lef-new-editor-demo__toolbar {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 60px;
	padding: 0 14px;
	border-bottom: 1px solid var(--wp-line);
	color: var(--wp-text);
	font-size: 16px;
}

/* block appender at the bottom of every column */
.lef-new-editor-demo__add {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	margin-top: 16px;
	border-radius: 2px;
	background: #1e1e1e;
	color: #fff;
	font-size: 12px;
	transition: background-color .2s;
}

.lef-new-editor-demo__add .icon {
	transition: transform .2s;
}

.lef-new-editor-demo__add.is-on .icon {
	transform: rotate(45deg);
}

.lef-new-editor-demo__secbody.is-dark .lef-new-editor-demo__add {
	background: #fff;
	color: #1e1e1e;
}

/* "Sectie toevoegen / Patroon toevoegen" under the last section */
.lef-new-editor-demo__appender {
	display: flex;
	justify-content: center;
	gap: 10px;
	padding: 14px;
	border: 1px dashed #c3c4c7;
}

.lef-new-editor-demo__appender span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--wp-text);
	border-radius: 2px;
	font-size: 13px;
	transition: background-color .15s, color .15s;
}

.lef-new-editor-demo__appender span.is-hover {
	background: var(--wp-text);
	color: #fff;
}

.lef-new-editor-demo__doc {
	flex: 1;
	max-width: 420px;
	margin: 0 auto;
	padding: 7px 12px;
	border-radius: 2px;
	background: #f0f0f0;
	font-size: 13px;
	text-align: center;
}

.lef-new-editor-demo__sidebtn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 2px;
	background: var(--wp-dark);
	color: #fff;
}

.lef-new-editor-demo__save {
	padding: 8px 14px;
	border-radius: 2px;
	background: var(--wp-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
}

.lef-new-editor-demo__save.is-busy {
	opacity: .6;
}

.lef-new-editor-demo__main {
	position: relative;
	display: flex;
	flex: 1;
	min-height: 0;
}

/* block inserter: popover next to the + of the column (positioned by editor-demo.js) */
.lef-new-editor-demo__inserter {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 6;
	width: 290px;
	padding-bottom: 6px;
	border: 1px solid var(--wp-text);
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35);
	visibility: hidden;
}

.lef-new-editor-demo__inserter u {
	display: block;
	margin-top: 6px;
	padding: 10px 0;
	border-top: 1px solid var(--wp-line);
	color: var(--wp-text);
	font-size: 12.5px;
	text-align: center;
	text-decoration: none;
}

.lef-new-editor-demo__tabs {
	display: flex;
	align-items: center;
	gap: 22px;
	height: 46px;
	padding: 0 16px;
	border-bottom: 1px solid var(--wp-line);
}

.lef-new-editor-demo__tabs b {
	align-self: stretch;
	display: flex;
	align-items: center;
	box-shadow: inset 0 -2px 0 var(--wp-blue);
	font-weight: 500;
}

.lef-new-editor-demo__tabs .icon {
	margin-left: auto !important;
}

.lef-new-editor-demo__search {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px;
	padding: 9px 12px;
	border: 1px solid #949494;
	border-radius: 2px;
	color: var(--wp-muted);
}

.lef-new-editor-demo__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	padding: 0 12px;
}

.lef-new-editor-demo__grid span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 4px;
	border-radius: 2px;
	font-size: 12.5px;
	transition: background-color .15s, color .15s;
}

.lef-new-editor-demo__grid span .icon {
	font-size: 18px;
}

.lef-new-editor-demo__grid span.is-hover {
	background: #f0f0f0;
	color: var(--wp-blue);
}

/* canvas */
.lef-new-editor-demo__canvas {
	position: relative;
	flex: 1;
	overflow: hidden;
	padding: 26px 34px;
	background: #fff;
}

.lef-new-editor-demo__page {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lef-new-editor-demo__section {
	position: relative;
	outline: 2px solid transparent;
	transition: outline-color .2s;
}

.lef-new-editor-demo__section.is-selected {
	outline-color: #2271b1;
}

.lef-new-editor-demo__secbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	padding: 0 14px;
	background: #1e1e1e;
	color: #fff;
	transition: background-color .2s;
}

.lef-new-editor-demo__section.is-selected .lef-new-editor-demo__secbar {
	background: #2271b1;
}

.lef-new-editor-demo__secbar span {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lef-new-editor-demo__secbar em {
	width: 16px;
	height: 16px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #fff;
	transition: background-color .3s;
}

.lef-new-editor-demo__secbody {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 28px;
	align-items: center;
	padding: 30px 28px;
	background: var(--sec-bg, #fff);
	color: var(--sec-fg, #18181b);
	transition: background-color .5s, color .5s;
}

.lef-new-editor-demo__secbody img {
	width: 100%;
	height: 210px;
	border-radius: 6px;
	object-fit: cover;
}

.lef-new-editor-demo__col {
	position: relative;
	padding-top: 26px;
}

.lef-new-editor-demo__label {
	position: absolute;
	left: 0;
	top: 0;
	padding: 2px 8px;
	background: #ddd;
	color: #1e1e1e;
	font-size: 11px;
	font-style: normal;
}

.lef-new-editor-demo__text {
	position: relative;
	outline: 1px solid transparent;
	transition: outline-color .2s;
}

.lef-new-editor-demo__text.is-selected {
	outline: 1px solid #3858e9;
	outline-offset: 4px;
}

.lef-new-editor-demo__badge {
	position: absolute;
	top: -26px;
	left: -4px;
	display: none;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	background: #c62828;
	color: #fff;
	font-size: 12px;
}

.lef-new-editor-demo__badge.is-type {
	left: auto;
	right: -4px;
}

.lef-new-editor-demo__text.is-selected .lef-new-editor-demo__badge {
	display: inline-flex;
}

.lef-new-editor-demo__badge.is-hover {
	background: #8e1c1c;
}

.lef-new-editor-demo__h {
	margin: 0 0 8px;
	font-family: var(--heading-font);
	font-size: 34px;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.lef-new-editor-demo__p {
	margin: 0;
	font-size: 15px;
	opacity: .75;
}

.lef-new-editor-demo__btn {
	display: inline-block;
	margin-top: 16px;
	padding: 9px 16px;
	border-radius: 8px;
	background: #18181b;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
}

.lef-new-editor-demo__btn.is-light {
	background: #fff;
	color: #18181b;
}

.lef-new-editor-demo__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	overflow: hidden;
}

.lef-new-editor-demo__gallery img {
	width: 100%;
	height: 78px;
	border-radius: 6px;
	object-fit: cover;
}

.lef-new-editor-demo__pattern {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	padding: 34px 28px 20px;
	border-radius: 6px;
	background: #18181b;
	color: #fff;
	outline: 2px dashed transparent;
	outline-offset: 3px;
}

.lef-new-editor-demo__pattern.is-selected {
	outline-color: #7a56d6;
}

.lef-new-editor-demo__pattern p {
	margin: 0;
	font-size: 17px;
}

.lef-new-editor-demo__pattern .lef-new-editor-demo__btn {
	margin: 0;
}

.lef-new-editor-demo__label.is-pattern {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #7a56d6;
	color: #fff;
}

/* a comment from the colleague */
.lef-new-editor-demo__comment {
	position: absolute;
	right: 30px;
	bottom: 26px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 240px;
	padding: 10px 14px;
	border-radius: 12px 12px 12px 2px;
	background: #16a34a;
	color: #fff;
	font-size: 13px;
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35);
	visibility: hidden;
}

/* settings sidebar (right) */
.lef-new-editor-demo__sidebar {
	width: 280px;
	border-left: 1px solid var(--wp-line);
	background: #fff;
}

.lef-new-editor-demo__sidebar .lef-new-editor-demo__tabs b {
	order: 2;
}

.lef-new-editor-demo__sidebar .lef-new-editor-demo__tabs .icon {
	order: 3;
}

.lef-new-editor-demo__sbhead {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 16px;
	border-bottom: 1px solid var(--wp-line);
}

.lef-new-editor-demo__panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border-bottom: 1px solid var(--wp-line);
}

.lef-new-editor-demo__panel small {
	color: var(--wp-text);
	font-size: 11px;
	font-weight: 500;
}

.lef-new-editor-demo__select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 12px;
	border: 1px solid #949494;
	border-radius: 2px;
}

.lef-new-editor-demo__select.is-small {
	gap: 18px;
	padding: 4px 8px;
}

.lef-new-editor-demo__swatches {
	display: flex;
	gap: 10px;
}

.lef-new-editor-demo__swatches span {
	width: 30px;
	height: 30px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 50%;
	transition: box-shadow .2s;
}

.lef-new-editor-demo__swatches .is-white { background: #fff; }
.lef-new-editor-demo__swatches .is-gray { background: #f3f3f4; }
.lef-new-editor-demo__swatches .is-secondary { background: #fbeeee; }
.lef-new-editor-demo__swatches .is-black { background: #18181b; }
.lef-new-editor-demo__swatches .is-primary { background: #bd3737; }

.lef-new-editor-demo__swatches span.is-active {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-blue);
}

.lef-new-editor-demo__crumbs {
	display: flex;
	align-items: center;
	height: 30px;
	padding: 0 16px;
	border-top: 1px solid var(--wp-line);
	color: var(--wp-text);
	font-size: 12.5px;
}

/* slide-in edit panel (the "Bewerken" view of an ACF block) */
.lef-new-editor-demo__slide {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 600px;
	padding: 0 22px;
	background: #fff;
	box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .35);
	visibility: hidden;
}

.lef-new-editor-demo__slidehead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 62px;
	margin: 0 -22px 4px;
	padding: 0 22px;
	border-bottom: 1px solid var(--wp-line);
	font-size: 15px;
}

.lef-new-editor-demo__klaar {
	padding: 9px 16px;
	border-radius: 2px;
	background: var(--wp-blue);
	color: #fff;
	font-weight: 600;
}

.lef-new-editor-demo__media {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid #2271b1;
	border-radius: 2px;
	color: #2271b1;
}

.lef-new-editor-demo__wysiwyg {
	border: 1px solid #dcdcde;
}

.lef-new-editor-demo__wtools {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px 10px;
	border-bottom: 1px solid #dcdcde;
	background: #f6f7f7;
	font-size: 15px;
}

.lef-new-editor-demo__wtools em {
	font-family: Georgia, serif;
}

.lef-new-editor-demo__wbody {
	min-height: 220px;
	padding: 16px;
	font-family: Georgia, serif;
	font-size: 15px;
	line-height: 1.6;
}

.lef-new-editor-demo__wbody .is-h {
	margin: 0 0 14px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.lef-new-editor-demo__wbody .is-h::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	background: currentColor;
	vertical-align: -0.12em;
	opacity: 0;
}

.lef-new-editor-demo__wbody .is-h.is-typing::after {
	animation: lef-caret 1s steps(1) infinite;
}

@keyframes lef-caret {
	50% { opacity: 1; }
}

/* pattern picker (modal) */
.lef-new-editor-demo__patterns {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 440px;
	padding: 0 22px 18px;
	background: #fff;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
	visibility: hidden;
	transform: translate(-50%, -50%);
}

.lef-new-editor-demo__patterns span {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--wp-line);
	border-radius: 2px;
	font-size: 14px;
	transition: border-color .15s, background-color .15s;
}

.lef-new-editor-demo__patterns span em {
	margin-left: auto;
	padding: 2px 8px;
	border-radius: 99px;
	background: #f0ebfb;
	color: #7a56d6;
	font-size: 11px;
	font-style: normal;
}

.lef-new-editor-demo__patterns span.is-hover {
	border-color: var(--wp-blue);
	background: #f5f7ff;
}

/* snackbar */
.lef-new-editor-demo__snack {
	position: absolute;
	left: 20px;
	bottom: 46px;
	z-index: 7;
	padding: 14px 20px;
	border-radius: 2px;
	background: #1e1e1e;
	color: #fff;
	font-size: 13px;
	visibility: hidden;
}

/* cursors */
.lef-new-editor-demo__cursor {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	pointer-events: none;
	will-change: transform;
}

.lef-new-editor-demo__cursor svg {
	display: block;
}

.lef-new-editor-demo__cursor span {
	position: absolute;
	left: 18px;
	top: 20px;
	padding: 3px 10px;
	border-radius: 99px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.lef-new-editor-demo__cursor.is-me svg { fill: #bd3737; }
.lef-new-editor-demo__cursor.is-me span { background: #bd3737; }
.lef-new-editor-demo__cursor.is-peer svg { fill: #16a34a; }
.lef-new-editor-demo__cursor.is-peer span { background: #16a34a; }

@media (max-width: 991px) {
	.lef-new-editor-demo__steps {
		grid-template-columns: repeat(5, minmax(150px, 1fr));
		overflow-x: auto;
		margin-right: -15px;
		padding-right: 15px;
		scrollbar-width: none;
	}

	.lef-new-editor-demo__steps::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 639px) {
	/* small screens: show the editor without the right sidebar, so it is readable */
	.lef-new-editor-demo__frame {
		aspect-ratio: 770 / 680;
	}
}

/* lef-new/theme-toggle: light/dark switch, fixed bottom left */
.lef-new-theme-toggle {
	cursor: pointer;
	font: inherit;
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 90;
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	border: 1px solid var(--lef-line);
	border-radius: 999px;
	background: rgba(var(--white-rgb), .82);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	box-shadow: var(--lef-shadow-float);
}

.lef-new-theme-toggle__btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--lef-muted);
	cursor: pointer;
	transition: background-color .3s var(--lef-ease), color .3s;
}

.lef-new-theme-toggle__btn .icon {
	margin: 0;
	font-size: 15px;
}

.lef-new-theme-toggle:hover .lef-new-theme-toggle__btn {
	color: var(--black);
}

.lef-new-theme-toggle .lef-new-theme-toggle__btn[data-active] {
	background: var(--black);
	color: var(--black-content);
}

.lef-new-theme-toggle:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* the switch itself fades colours; everything else changes at once (no flash of half-themed blocks) */
html.lef-theme-switching,
html.lef-theme-switching * {
	transition: none !important;
}

/* WhatsApp button (theme option): same height and corner distance as the theme toggle bottom left */
body .whatsapp-button.right {
	right: 16px;
	bottom: 16px;
	width: 46px;
	height: 46px;
	box-shadow: var(--lef-shadow-float);
}

body .whatsapp-button.right .icon {
	font-size: 22px;
}

/* KENNISBANK ---------------------------------------------------------------- */
/* text-content extra class "lead": the opening paragraph of an article */
body .content-wrapper.lead p {
	color: var(--black);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.6;
}

/* text-content extra class "kb-search": the theme search (search-dropdown) in the kennisbank hero */
body .content-wrapper.kb-search {
	max-width: 560px;
	margin-top: 28px;
}

body .kb-search .search-dropdown__input-wrap {
	border: 1px solid var(--lef-line);
	border-radius: var(--btn-border-radius);
	background: var(--white);
	box-shadow: var(--lef-shadow-float);
}

body .kb-search input[type="search"] {
	min-height: 56px;
	border: 0;
	background: transparent;
	font-size: 16px;
}

/* inline CTA in an article (reusable block: col-card bg-black, extra class "kb-cta-inline", nested row text | image).
   Red glow + white dots like the footer, so it reads as an offer, not as part of the article. */
body .card.col-card.kb-cta-inline {
	overflow: hidden;
	margin: 48px 0;
	padding: 36px;
	background-image:
		radial-gradient(70% 90% at 100% 100%, rgba(var(--primary-rgb), .45), transparent 70%),
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0);
	background-size: auto, 22px 22px;
	background-repeat: no-repeat, repeat; /* the glow must not repeat: its next tile showed as a red line in the transparent border */
	box-shadow: var(--lef-shadow-tile);
}

body .card.kb-cta-inline > .row {
	margin: -10px -15px;
}

body .card.kb-cta-inline .content-wrapper h3 {
	margin: 0 0 10px;
	font-size: 32px;
	line-height: 1.08;
}

body .card.kb-cta-inline .content-wrapper p {
	color: rgba(255, 255, 255, .75);
	font-size: 16px;
	line-height: 1.6;
}

body .card.kb-cta-inline .icons-list {
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 18px 0 4px;
}

body .card.kb-cta-inline .icons-list li {
	color: var(--black-content);
	font-size: 15px;
	font-weight: 600;
}

body .card.kb-cta-inline .image-outer,
body .card.kb-cta-inline .image-holder {
	height: 100%;
	margin: 0;
}

body .card.kb-cta-inline .image-holder img {
	width: 100%;
	height: 100%;
	min-height: 240px;
	border-radius: var(--lef-radius-media);
	object-fit: cover;
	transform: rotate(2deg);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6);
}

@media (max-width: 991px) {
	body .card.kb-cta-inline .image-outer {
		display: none;
	}
}

/* lef-new/kb-onderwerpen */
.lef-new-kb-onderwerpen {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.lef-new-kb-onderwerpen__kaart {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--lef-line);
	border-radius: var(--general-border-radius);
	background: var(--white);
	transition: border-color .3s, box-shadow .5s var(--lef-ease);
}

.lef-new-kb-onderwerpen__kaart:hover {
	border-color: var(--black);
	box-shadow: 0 24px 48px -32px rgba(var(--black-rgb), .35);
}

#main a.lef-new-kb-onderwerpen__kop:not(.btn) {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	color: var(--black);
	text-decoration: none;
}

.lef-new-kb-onderwerpen__icoon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--lef-radius-media);
	background: var(--secondary);
	color: var(--primary);
	font-size: 18px;
	transition: background-color .3s, color .3s;
}

.lef-new-kb-onderwerpen__icoon .icon {
	margin: 0;
}

.lef-new-kb-onderwerpen__kaart:hover .lef-new-kb-onderwerpen__icoon {
	background: var(--primary);
	color: var(--primary-content);
}

.lef-new-kb-onderwerpen__naam {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
}

.lef-new-kb-onderwerpen__pijl {
	margin: 0;
	color: var(--lef-muted);
	transition: transform .3s var(--lef-ease), color .3s;
}

.lef-new-kb-onderwerpen__kaart:hover .lef-new-kb-onderwerpen__pijl {
	color: var(--primary);
	transform: translateX(4px);
}

.lef-new-kb-onderwerpen__lijst li {
	padding: 9px 0;
	border-top: 1px solid var(--lef-line);
	font-size: 15px;
	line-height: 1.4;
}

#main .lef-new-kb-onderwerpen__lijst a:not(.btn) {
	color: var(--lef-muted);
	text-decoration: none;
}

#main .lef-new-kb-onderwerpen__lijst a:not(.btn):hover {
	color: var(--black);
}

#main a.lef-new-kb-onderwerpen__alles:not(.btn) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 16px;
	color: var(--primary);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.lef-new-kb-onderwerpen__alles .icon {
	margin: 0;
	font-size: 12px;
	transition: transform .3s var(--lef-ease);
}

#main a.lef-new-kb-onderwerpen__alles:not(.btn):hover .icon {
	transform: translateX(4px);
}

/* lef-new/kb-artikel: header */
.lef-new-kb-artikel__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0 16px;
}

#main a.lef-new-kb-artikel__label:not(.btn) {
	padding: 6px 14px;
	border: 1px solid var(--lef-line);
	border-radius: 999px;
	background: var(--white);
	color: var(--black);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .3s;
}

#main a.lef-new-kb-artikel__label:not(.btn):hover {
	border-color: var(--black);
}

body .lef-new-kb-artikel__titel {
	margin: 0;
	font-size: clamp(40px, 4.6vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.lef-new-kb-artikel__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
}

.lef-new-kb-artikel__meta p {
	margin: 0;
	color: var(--lef-muted);
	font-size: 14px;
	line-height: 1.5;
}

.lef-new-kb-artikel__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

.lef-new-kb-artikel__auteur {
	color: var(--black);
	font-weight: 600;
}

.lef-new-kb-artikel__beeld {
	overflow: hidden;
	margin: 0;
	border-radius: var(--general-border-radius);
	aspect-ratio: 4 / 3;
	background: var(--gray);
}

.lef-new-kb-artikel__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* lef-new/kb-artikel: text column (the_content). In WP the blocks arrive in their own sections and cols:
   flatten those inside this column (as ELIX does), so only the block spacing below remains. */
.lef-new-kb-artikel__tekst > * + * {
	margin-top: 24px;
}

/* news post: featured image above the text */
.lef-new-kb-artikel__foto {
	margin: 0 0 40px;
	overflow: hidden;
	border-radius: var(--lef-radius-media);
	aspect-ratio: 16 / 9;
	background: var(--gray);
}

.lef-new-kb-artikel__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lef-new-kb-artikel__tekst .content-wrapper p,
.lef-new-kb-artikel__tekst .content-wrapper li {
	font-size: 17px;
	line-height: 1.75;
}

.lef-new-kb-artikel__tekst .content-wrapper h2 {
	margin: 48px 0 16px;
	font-size: 34px;
	line-height: 1.1;
}

.lef-new-kb-artikel__tekst .content-wrapper h3 {
	margin: 32px 0 12px;
	font-size: 22px;
}

/* #anchors (pagination, search filter) land below the floating header */
section.lef-section[id] {
	scroll-margin-top: var(--lef-header-offset);
}

.lef-new-kb-artikel__tekst h2[id],
.lef-new-kb-artikel__tekst h3[id] {
	scroll-margin-top: calc(var(--lef-header-offset) + 16px);
}

.lef-new-kb-artikel__tekst .block-notice {
	padding: 28px 32px;
	border-radius: var(--general-border-radius);
}

.lef-new-kb-artikel__tekst .block-notice h3 {
	margin: 0 0 12px;
	font-size: 20px;
}

.lef-new-kb-artikel__tekst .block-notice > :last-child {
	margin-bottom: 0;
}

.lef-new-kb-artikel__tekst .image-outer {
	margin: 32px 0;
}

.lef-new-kb-artikel__tekst .image-outer img {
	border-radius: var(--general-border-radius);
}

.lef-new-kb-artikel__tekst figcaption {
	margin-top: 10px;
	color: var(--lef-muted);
	font-size: 14px;
}

/* lef-new/kb-artikel: share + author at the end of the text */
.lef-new-kb-artikel__einde {
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid var(--lef-line);
}

.lef-new-kb-artikel__delen {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 28px;
}

.lef-new-kb-artikel__delen p {
	margin: 0;
	font-weight: 600;
}

.lef-new-kb-artikel__auteurkaart {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 20px;
	align-items: center;
	padding: 24px;
	border-radius: var(--general-border-radius);
	background: var(--gray);
}

.lef-new-kb-artikel__auteurkaart img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.lef-new-kb-artikel__auteurkaart p {
	margin: 0;
	color: var(--lef-muted);
	font-size: 15px;
}

.lef-new-kb-artikel__auteurkaart .lef-new-kb-artikel__auteur {
	margin-bottom: 4px;
	color: var(--black);
	font-size: 17px;
}

/* lef-new/kb-artikel: sidebar (sticky) */
.lef-new-kb-artikel__zijbalk {
	position: sticky;
	top: calc(var(--lef-header-offset) + 8px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-left: 24px;
}

.lef-new-kb-artikel__kaart {
	padding: 24px 26px;
	border: 1px solid var(--lef-line);
	border-radius: var(--general-border-radius);
	background: var(--white);
}

.lef-new-kb-artikel__kaarttitel {
	margin: 0 0 12px;
	font-family: var(--heading-font);
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -0.01em;
}

.lef-new-kb-artikel__kaart li {
	font-size: 14.5px;
	line-height: 1.45;
}

.lef-new-kb-artikel__kaart li + li {
	margin-top: 8px;
}

#main .lef-new-kb-artikel__kaart a:not(.btn) {
	color: var(--lef-muted);
	text-decoration: none;
}

#main .lef-new-kb-artikel__kaart a:not(.btn):hover {
	color: var(--black);
}

.lef-new-kb-artikel__toc li {
	position: relative;
	padding-left: 14px;
}

.lef-new-kb-artikel__toc li.is-niveau-3 {
	margin-left: 14px;
}

.lef-new-kb-artikel__toc li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 2px;
	height: 1.1em;
	border-radius: 2px;
	background: var(--lef-line);
	transition: background-color .3s;
}

.lef-new-kb-artikel__toc li:has(a.is-active)::before {
	background: var(--primary);
}

#main .lef-new-kb-artikel__toc a.is-active:not(.btn) {
	color: var(--black);
	font-weight: 600;
}

/* sidebar CTA: bg-black card (so dark mode keeps it dark) */
.lef-new-kb-artikel__kaart.lef-new-kb-artikel__cta {
	border-color: transparent;
	background: var(--black);
	color: var(--black-content);
}

.lef-new-kb-artikel__cta p {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.55;
	opacity: .75;
}

.lef-new-kb-artikel__cta .lef-new-kb-artikel__kaarttitel {
	margin-bottom: 8px;
	font-size: 22px;
	opacity: 1;
}

body .lef-new-kb-artikel__cta .btn {
	margin: 0;
}

@media (max-width: 991px) {
	.lef-new-kb-onderwerpen {
		grid-template-columns: 1fr 1fr;
	}

	.lef-new-kb-artikel__beeld {
		margin-top: 28px;
	}

	/* the contents list moves above the text; the other sidebar cards are covered by the inline and closing CTA */
	.lef-new-kb-artikel__body .row {
		display: flex;
		flex-direction: column;
	}

	.lef-new-kb-artikel__zijkolom {
		order: -1;
	}

	.lef-new-kb-artikel__zijbalk {
		position: static;
		padding-left: 0;
	}

	.lef-new-kb-artikel__zijbalk > :not(.lef-new-kb-artikel__toc) {
		display: none;
	}
}

@media (max-width: 639px) {
	.lef-new-kb-onderwerpen {
		grid-template-columns: 1fr;
	}

	.lef-new-kb-artikel__tekst .content-wrapper h2 {
		font-size: 28px;
	}

	.lef-new-kb-artikel__tekst .block-notice,
	body .card.col-card.kb-cta-inline {
		padding: 24px;
	}
}

/* card-default in a featured grid: equal heights, read-more button on one line at the bottom */
body .featured .card.card-default,
body .featured .card.card-simple {
	display: flex;
	flex-direction: column;
	height: 100%;
}

body .featured .card.card-default .content-outer,
body .featured .card.card-simple .content-outer {
	display: flex;
	flex: 1;
	flex-direction: column;
}

body .featured .card.card-default .buttons-holder,
body .featured .card.card-simple .buttons-holder {
	margin-top: auto;
}

/* lef-new/kb-artikel: article text overrides the general page typography (h2 width cap, h2 + p as intro, list grid) */
.lef-new-kb-artikel__body .row {
	align-items: stretch;
}

body .lef-new-kb-artikel__tekst .content-wrapper h2 {
	max-width: none;
}

body .lef-new-kb-artikel__tekst .content-wrapper h2 + p {
	max-width: none;
	color: inherit;
	font-size: 17px;
}

body .lef-new-kb-artikel__tekst .icons-list {
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 8px;
}

body .lef-new-kb-artikel__tekst .icons-list li {
	align-items: baseline;
	font-size: 17px;
	line-height: 1.6;
}

body .lef-new-kb-artikel__delen .share-on-social-media a i {
	font-size: 26px;
}

/* Col-card extra class "hero-contact": contact card in a page hero (photo + online dot, heading, button, phone line, rating) */
body .card.col-card.hero-contact {
	padding: 28px;
	box-shadow: var(--lef-shadow-tile);
}

body .hero-contact .content-wrapper:first-child p:first-child {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 14px;
	align-content: center;
	align-items: start;
	min-height: 56px;
	margin: 0 0 22px;
	color: rgba(var(--black-content-rgb, 255, 255, 255), .7);
	font-size: 14px;
	line-height: 1.4;
}

body .hero-contact .content-wrapper:first-child p:first-child img {
	grid-row: span 2;
	width: 56px;
	height: 56px;
	margin: 0;
	border-radius: 50%;
	object-fit: cover;
}

/* online dot on the photo */
body .hero-contact .content-wrapper:first-child p:first-child::after {
	content: "";
	position: absolute;
	left: 42px;
	top: 2px;
	width: 12px;
	height: 12px;
	border: 2px solid var(--black);
	border-radius: 50%;
	background: var(--succes);
}

body .hero-contact .content-wrapper:first-child p:first-child strong {
	color: var(--black-content);
	font-size: 16px;
}

body .hero-contact .content-wrapper h3 {
	margin: 0 0 10px;
	font-size: 28px;
	line-height: 1.1;
}

body .hero-contact .content-wrapper p {
	color: rgba(var(--black-content-rgb, 255, 255, 255), .75);
	font-size: 15px;
	line-height: 1.6;
}

body .row.align-center .hero-contact .buttons-holder,
body .hero-contact .buttons-holder {
	margin-top: 6px;
}

body .hero-contact .content-wrapper.hero-contact-meta {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(var(--black-content-rgb, 255, 255, 255), .12);
}

body .hero-contact .hero-contact-meta p {
	margin: 0 0 14px;
	font-size: 14px;
}

#main .hero-contact .hero-contact-meta a:not(.btn) {
	color: var(--black-content);
}

body .hero-contact .review-information .rating-value {
	color: var(--black-content);
	font-weight: 600;
}

#main .hero-contact .review-information-based-on {
	color: rgba(var(--black-content-rgb, 255, 255, 255), .7);
	text-underline-offset: 3px;
}

body .hero-contact .review-information .avarage-stars {
	color: var(--yellow);
}

@media (max-width: 991px) {
	body .card.col-card.hero-contact {
		margin-top: 32px;
	}
}

/* the <br> between name and role would be its own grid row */
body .hero-contact .content-wrapper:first-child p:first-child br {
	display: none;
}

/* the outline button on the black card */
body .hero-contact .btn.bg-transparent {
	border-color: rgba(255, 255, 255, .3);
	background: transparent;
	color: var(--black-content);
}

body .hero-contact .btn.bg-transparent:hover {
	border-color: var(--black-content);
	background: transparent;
	color: var(--black-content);
}

/* hero-contact card as the left side of the FAQ pattern: the h2 takes the role of the card heading */
body .hero-contact.faq-card .content-wrapper h2 {
	margin: 0 0 12px;
	color: var(--black-content);
	font-size: clamp(30px, 2.6vw, 38px);
	line-height: 1.05;
}

body .hero-contact.faq-card .buttons-holder {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* project count under the intro of a page hero (werk) */
body .section-page-hero .content-wrapper.page-count {
	margin-top: 20px;
}

/* hero-canvas ring "quarter" (data-ring="quarter", page heroes): tiles drift along a quarter circle in the bottom-right corner.
   Vertical mask for the top/bottom fade; each tile also fades itself near the text and the arc ends (hero-canvas.js). Hidden on small screens. */
/* top + bottom fade like the home ring (vertical only; the tiles fade themselves near the text) */
body section.lef-section > .lef-new-hero-canvas__tiles--quarter {
	overflow: hidden;
	--m: linear-gradient(to bottom, transparent, #000 90px, #000 calc(100% - 130px), transparent);
	-webkit-mask-image: var(--m);
	mask-image: var(--m);
	-webkit-mask-composite: source-over;
	mask-composite: add;
}

@media (max-width: 991px) {
	body section.lef-section > .lef-new-hero-canvas__tiles--quarter {
		display: none;
	}
}

/* acf/featured extra class "kb-grid" (kennisbank cards: card-default + child override that adds .card-meta) */
body .featured.kb-grid .card.card-simple {
	overflow: hidden;
	border: 1px solid var(--lef-line);
	border-radius: var(--general-border-radius);
	background: var(--white);
	cursor: pointer;
	transition: transform .5s var(--lef-ease), border-color .3s, box-shadow .5s var(--lef-ease);
}

body .featured.kb-grid .card.card-simple:hover {
	border-color: var(--black);
	box-shadow: 0 28px 56px -36px rgba(var(--black-rgb), .45);
	transform: translateY(-4px);
}

body .featured.kb-grid .card-simple .image-outer {
	margin: 0;
}

body .featured.kb-grid .card-simple .image-holder {
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

body .featured.kb-grid .card-simple .image-holder img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform .8s var(--lef-ease);
}

body .featured.kb-grid .card-simple:hover .image-holder img {
	transform: scale(1.05);
}

body .featured.kb-grid .card-simple .content-outer {
	padding: 22px 24px 24px;
}

body .featured.kb-grid .card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	color: var(--lef-muted);
	font-family: var(--lef-mono);
	font-size: 12px;
}

body .featured.kb-grid .card-term {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--secondary);
	color: var(--primary);
	font-weight: 600;
}

body .featured.kb-grid .card-simple h4 {
	margin: 0 0 8px;
	font-family: var(--heading-font);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

body .featured.kb-grid .card-simple .excerpt-holder {
	display: -webkit-box;
	overflow: hidden;
	color: var(--lef-muted);
	font-size: 15px;
	line-height: 1.55;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* the read-more button becomes a text link with an arrow (the whole card is clickable via data-href) */
body .featured.kb-grid .card-simple .buttons-holder {
	padding-top: 18px;
}

body .featured.kb-grid .card-simple .btn {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--black);
	font-weight: 600;
}

body .featured.kb-grid .card-simple .btn span::after {
	content: "→";
	display: inline-block;
	margin-left: 8px;
	color: var(--primary);
	transition: transform .3s var(--lef-ease);
}

body .featured.kb-grid .card-simple:hover .btn span::after {
	transform: translateX(4px);
}

/* Theme pagination (lef_default_pagination): round number buttons, active one filled, light arrow buttons */
body .pagination-holder .page-navigation {
	flex-direction: row;
	justify-content: center;
	gap: 16px;
	margin-top: 48px;
}

body .pagination-holder .page-navigation ul {
	display: flex;
	gap: 8px;
	margin: 0;
}

#main .pagination-holder .page-navigation ul li a:not(.btn) {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--lef-line);
	border-radius: 50%;
	background: var(--white);
	color: var(--black);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .3s, background-color .3s, color .3s;
}

#main .pagination-holder .page-navigation ul li a:not(.btn):hover {
	border-color: var(--black);
}

#main .pagination-holder .page-navigation ul li.active a:not(.btn) {
	border-color: var(--black);
	background: var(--black);
	color: var(--black-content);
}

body .pagination-holder .page-navigation .btn {
	margin: 0;
	padding: 10px 20px;
	border: 1px solid var(--lef-line);
	border-radius: 999px;
	background: var(--white);
	color: var(--black);
	font-size: 15px;
	font-weight: 600;
}

body .pagination-holder .page-navigation .btn:hover {
	border-color: var(--black);
	background: var(--white);
	color: var(--black);
}

body .pagination-holder .page-navigation .btn.disabled {
	opacity: .35;
}

/* small screens: previous/next become round arrow buttons, so everything fits on one line */
@media (max-width: 639px) {
	body .pagination-holder .page-navigation {
		gap: 8px;
	}

	body .pagination-holder .page-navigation .btn {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		overflow: hidden;
		font-size: 0;
	}

	body .pagination-holder .pagination-previous-link .btn::before,
	body .pagination-holder .pagination-next-link .btn::before {
		font-size: 18px;
	}

	body .pagination-holder .pagination-previous-link .btn::before {
		content: "←";
	}

	body .pagination-holder .pagination-next-link .btn::before {
		content: "→";
	}
}

body .featured.kb-grid .card-simple .buttons-holder {
	margin-left: 0;
	margin-right: 0;
}

body .featured.kb-grid .card-simple .buttons-holder .btn {
	margin-left: 0;
}

/* lef_default_pagination prints first, current ±1 and last page without an ellipsis: show "…" before the last page when pages are skipped
   (child filter adds class "is-gap" to that li in WP; prototype markup carries it already) */
body .pagination-holder .page-navigation ul li.is-gap {
	display: flex;
	align-items: center;
	gap: 8px;
}

body .pagination-holder .page-navigation ul li.is-gap::before {
	content: "…";
	color: var(--lef-muted);
}

/* hero-contact card in the kennisbank sidebar: a bit tighter than in a hero */
body .lef-new-kb-artikel__zijbalk .card.col-card.hero-contact {
	margin: 0;
	padding: 24px;
}

body .lef-new-kb-artikel__zijbalk .hero-contact .content-wrapper h3 {
	font-size: 24px;
}

body .lef-new-kb-artikel__zijbalk .hero-contact .buttons-holder {
	margin-top: 4px;
}

/* kennisbank cards have no image: the topic icon (child override of card-simple, same icon as the onderwerp) leads instead */
body .featured.kb-grid .card-simple .card-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin: 24px 24px 0;
	border-radius: var(--lef-radius-media);
	background: var(--secondary);
	color: var(--primary);
	font-size: 20px;
	transition: background-color .3s, color .3s;
}

body .featured.kb-grid .card-simple .card-icon .icon {
	margin: 0;
}

body .featured.kb-grid .card-simple:hover .card-icon {
	background: var(--primary);
	color: var(--primary-content);
}

body .featured.kb-grid .card-simple .content-outer {
	padding-top: 18px;
}

/* GRAVITY FORMS (gravity-theme output) ---------------------------------------- */
/* the theme places fields on 12 columns (gfield--width-half = span 6) */
body .gform_wrapper.gravity-theme .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 18px 14px;
}

body .gform_wrapper.gravity-theme .gfield--width-full {
	grid-column: 1 / -1;
}

body .gform_wrapper.gravity-theme fieldset.gfield {
	margin: 0;
	padding: 0;
	border: 0;
}

body .gform_wrapper.gravity-theme .gfield_label {
	display: block;
	margin-bottom: 6px;
	padding: 0;
	color: var(--black);
	font-size: 14px;
	font-weight: 600;
}

body .gform_wrapper.gravity-theme .gfield_required_asterisk {
	margin-left: 3px;
	color: var(--primary);
}

body .gform_wrapper.gravity-theme input[type="text"],
body .gform_wrapper.gravity-theme input[type="email"],
body .gform_wrapper.gravity-theme input[type="tel"],
body .gform_wrapper.gravity-theme input[type="date"],
body .gform_wrapper.gravity-theme select,
body .gform_wrapper.gravity-theme textarea {
	width: 100%;
	padding: var(--form-elements-padding-y) var(--form-elements-padding-x);
	border: 1px solid var(--lef-line);
	border-radius: var(--form-elements-border-radius);
	background: var(--tertiary);
	color: var(--black);
	font: inherit;
	font-size: 15px;
	transition: border-color .2s, box-shadow .2s;
}

body .gform_wrapper.gravity-theme textarea {
	resize: vertical;
}

body .gform_wrapper.gravity-theme input:focus-visible,
body .gform_wrapper.gravity-theme select:focus-visible,
body .gform_wrapper.gravity-theme textarea:focus-visible {
	border-color: var(--black);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}

/* radio choices with extra field class "gfield--pills": choices as pills */
body .gform_wrapper.gravity-theme .gfield--pills .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body .gform_wrapper.gravity-theme .gfield--pills .gchoice {
	position: relative;
}

body .gform_wrapper.gravity-theme .gfield--pills .gfield-choice-input {
	position: absolute;
	opacity: 0;
}

body .gform_wrapper.gravity-theme .gfield--pills .gchoice label {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--lef-line);
	border-radius: 999px;
	background: var(--white);
	color: var(--black);
	font-size: 14px;
	cursor: pointer;
	transition: border-color .2s, background-color .2s, color .2s;
}

body .gform_wrapper.gravity-theme .gfield--pills .gchoice label:hover {
	border-color: var(--black);
}

body .gform_wrapper.gravity-theme .gfield--pills .gfield-choice-input:checked + label {
	border-color: var(--black);
	background: var(--black);
	color: var(--black-content);
}

body .gform_wrapper.gravity-theme .gfield--pills .gfield-choice-input:focus-visible + label {
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .3);
}

body .gform_wrapper.gravity-theme .gform_footer {
	margin-top: 22px;
}

body .gform_wrapper.gravity-theme .gform_footer .btn {
	margin: 0;
}

/* Real GF output (child inc/forms.php renders the gravity-theme markup with a theme button; GF's own CSS is off) */
/* the heading only carries the (emptied) required legend: no title/description in the design */
body .gform_wrapper.gravity-theme .gform_heading:not(:has(.gform_title, .gform_description)),
body .gform_wrapper.gravity-theme .gform_required_legend:empty {
	display: none;
}

/* hidden fields and GF helpers take no grid cell */
body .gform_wrapper.gravity-theme .gfield.gform_hidden,
body .gform_wrapper.gravity-theme .gfield_visibility_hidden,
body .gform_wrapper.gravity-theme .gform_validation_container,
body .gform_wrapper.gravity-theme .validation_message--hidden-on-empty:empty {
	display: none;
}

/* the theme sizes textarea.small/.medium at 100/200px; the rows (3/4/5, set in inc/forms.php) decide here */
body .gform_wrapper.gravity-theme textarea {
	height: auto;
}

/* hidden label (field setting "Label verbergen"): stays for screen readers */
body .gform_wrapper.gravity-theme .hidden_label .gfield_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* validation: a red line and a short message under the field (the theme paints a red block) */
body .gform_wrapper.gravity-theme .gfield_error input,
body .gform_wrapper.gravity-theme .gfield_error select,
body .gform_wrapper.gravity-theme .gfield_error textarea {
	border-color: var(--primary);
}

body .gform_wrapper.gravity-theme .validation_message {
	margin-top: 6px;
	padding: 0;
	background: none;
	color: var(--primary);
	font-size: 13px;
	line-height: 1.4;
}

body .gform_wrapper.gravity-theme .gform_validation_errors {
	margin-bottom: 18px;
	padding: 12px 16px;
	border: 1px solid var(--primary);
	border-radius: var(--form-elements-border-radius);
}

body .gform_wrapper.gravity-theme .gform_validation_errors .gform_submission_error {
	margin: 0;
	padding: 0;
	background: none;
	color: var(--primary);
	max-width: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/* the thank-you message that replaces the form */
body .gform_confirmation_wrapper .gform_confirmation_message {
	padding: 18px 20px;
	border: 1px solid var(--lef-line);
	border-radius: var(--form-elements-border-radius);
	background: var(--gray);
	color: var(--black);
	font-size: 15px;
	line-height: 1.55;
}

/* (0,3,3): beats card text rules such as .afspraak-card .content-wrapper p */
body .gform_confirmation_wrapper div.gform_confirmation_message p,
body .content-wrapper .gform_confirmation_wrapper .gform_confirmation_message p {
	margin: 0;
	color: inherit;
	font-size: inherit;
}

/* ajax spinner GF appends to the footer while sending */
body .gform_wrapper.gravity-theme .gform_footer {
	display: flex;
	align-items: center;
	gap: 12px;
}

body .gform_wrapper.gravity-theme .gform-loader,
body .gform_wrapper.gravity-theme .gform_ajax_spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--black);
	border-right-color: transparent;
	border-radius: 50%;
	animation: lef-gf-spin .7s linear infinite;
}

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

/* Form class "gform-inline" (Contact kort, the CTA at the bottom of the pages): e-mail field + button on one line */
body .gform_wrapper.gform-inline_wrapper {
	max-width: 460px;
	margin: 36px auto 0;
}

body .gform_wrapper.gform-inline_wrapper form {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

body .gform_wrapper.gform-inline_wrapper .gform_body {
	flex: 1;
	min-width: 0;
}

body .gform_wrapper.gform-inline_wrapper .gform_fields {
	display: block;
}

body .gform_wrapper.gform-inline_wrapper .gform_footer {
	margin: 0;
	padding: 0;
}

body .gform_wrapper.gform-inline_wrapper input[type="email"] {
	height: 48px;
	padding: 0 var(--form-elements-padding-x);
	background: var(--gray);
}

body .gform_wrapper.gform-inline_wrapper .gform_footer .btn {
	height: 48px;
}

/* one field: its own message is enough, no summary box above the line */
body .gform_wrapper.gform-inline_wrapper .gform_validation_errors {
	display: none;
}

body .gform_wrapper.gform-inline_wrapper .validation_message {
	text-align: left;
}

body .gform_confirmation_wrapper.gform-inline {
	max-width: 460px;
	margin: 36px auto 0;
	text-align: center;
}

body .content-wrapper:has(.gform-inline_wrapper, .gform_confirmation_wrapper.gform-inline) + .content-wrapper.muted p {
	margin-top: 24px;
}

@media (max-width: 991px) {
	body .gform_wrapper.gform-inline_wrapper form {
		flex-direction: column;
		align-items: stretch;
	}

	body .gform_wrapper.gform-inline_wrapper .gform_footer .btn {
		justify-content: center;
		width: 100%;
	}
}

/* CONTACT ------------------------------------------------------------------- */
/* col-card extra class "afspraak-card": the appointment form in the hero */
body .card.col-card.afspraak-card {
	padding: 32px;
	box-shadow: var(--lef-shadow-tile);
}

body .afspraak-card .content-wrapper h3 {
	margin: 0 0 6px;
	font-size: 30px;
}

body .afspraak-card .content-wrapper p {
	margin-bottom: 22px;
	color: var(--lef-muted);
	font-size: 15px;
}

body .afspraak-card .content-wrapper.muted p {
	margin: 16px 0 0;
}

/* acf/list extra class "contact-routes": mail / WhatsApp / bel as icon tiles */
body .icons-list.contact-routes {
	grid-template-columns: 1fr;
	gap: 18px;
	margin-top: 36px;
}

body .icons-list.contact-routes li {
	align-items: flex-start;
	line-height: 1.55;
}

body .icons-list.contact-routes li .icon {
	display: grid;
	flex: 0 0 44px;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: 16px;
	border-radius: var(--lef-radius-media);
	background: var(--secondary);
	font-size: 17px;
}

body .icons-list.contact-routes li strong {
	color: var(--black);
}

body .icons-list.contact-routes .li-content {
	color: var(--lef-muted);
	font-size: 15px;
}

body .content-wrapper.contact-rating {
	margin-top: 32px;
}

/* "Kom langs": office photo next to the visit card, same height */
body .image-outer.office-photo,
body .image-outer.office-photo .image-holder {
	height: 100%;
	margin: 0;
}

body .image-outer.office-photo img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	border-radius: var(--general-border-radius);
	object-fit: cover;
}

body .card.col-card.visit-card {
	display: flex;
	flex-direction: column;
	padding: 36px;
}

body .visit-card .content-wrapper h2 {
	font-size: 40px;
}

body .visit-card .buttons-holder {
	margin-top: auto;
}

@media (max-width: 639px) {
	body .gform_wrapper.gravity-theme .gfield {
		grid-column: 1 / -1;
	}

	body .card.col-card.afspraak-card,
	body .card.col-card.visit-card {
		padding: 24px;
	}
}

body .gform_wrapper.gravity-theme .ginput_container input,
body .gform_wrapper.gravity-theme .ginput_container select,
body .gform_wrapper.gravity-theme .ginput_container textarea {
	box-sizing: border-box;
	max-width: none;
	margin: 0;
}

/* OPENING HOURS ([openstatus] + [openingstijden]): day left, time right, today bold; the status line above carries the dot */
body .openinghours {
	display: grid;
	gap: 4px;
	margin: 12px 0 0;
	padding: 0;
	max-width: 280px;
}

body .openinghours li.single-day {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	font-size: 14px;
	line-height: 1.6;
}

body .openinghours li.single-day .open-status-circle {
	display: none;
}

body .openinghours li.single-day .day-time {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

body .open-status {
	font-size: 14px;
	font-weight: 600;
}

body .open-status-circle {
	width: 8px;
	height: 8px;
	box-shadow: 0 0 0 4px rgba(var(--succes-rgb, 22, 163, 74), .18);
}

/* footer: second widget in the Kantoor column */
body footer#footer .content-wrapper.footer-hours {
	margin-top: 28px;
}

body footer#footer .footer-hours .openinghours li.single-day {
	color: rgba(255, 255, 255, .6);
}

body footer#footer .footer-hours .openinghours li.single-day.active {
	color: var(--white);
}

body footer#footer .footer-hours .open-status {
	color: rgba(255, 255, 255, .85);
}

/* contact: in the visit card */
body .content-wrapper.visit-hours {
	margin: 24px 0 20px;
}

body .visit-hours .openinghours li.single-day {
	color: var(--lef-muted);
}

body .visit-hours .openinghours li.single-day.active {
	color: var(--black);
}

/* BRANCHES ------------------------------------------------------------------- */
/* col-card bg-black, extra class "branche-feature": own software (Flexsoftware, EHBO Software). Red glow like the article CTA. */
body .card.col-card.branche-feature {
	display: flex;
	flex-direction: column;
	padding: 40px;
	background-image:
		radial-gradient(70% 80% at 100% 100%, rgba(var(--primary-rgb), .4), transparent 70%),
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0);
	background-size: auto, 22px 22px;
	background-repeat: no-repeat, repeat; /* the glow must not repeat: its next tile showed as a red line in the transparent border */
	box-shadow: var(--lef-shadow-tile);
}

body .branche-feature .icon-outer .icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: var(--lef-radius-media);
	background: var(--primary);
	color: var(--primary-content);
	font-size: 22px;
}

body .branche-feature .content-wrapper h6 {
	margin: 28px 0 6px;
	color: #e58a8a;
}

body .branche-feature .content-wrapper h3 {
	margin: 0 0 12px;
	font-size: 44px;
	line-height: 1.05;
}

body .branche-feature .content-wrapper p {
	color: rgba(255, 255, 255, .75);
}

body .branche-feature .icons-list {
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 20px 0 0;
}

body .branche-feature .icons-list li {
	color: var(--black-content);
	font-size: 15px;
}

body .row.align-stretch .card.branche-feature .buttons-holder {
	margin-top: auto;
	padding-top: 28px;
}

/* the outline button on a black card */
body .branche-feature .btn.bg-transparent {
	border-color: rgba(255, 255, 255, .3);
	background: transparent;
	color: var(--black-content);
}

body .branche-feature .btn.bg-transparent:hover {
	border-color: var(--black-content);
	background: transparent;
	color: var(--black-content);
}

/* branche cards: "Onder andere" line with links to the cases */
body .branche-card .content-wrapper p.branche-clients {
	margin-top: 14px;
	color: var(--lef-muted);
	font-size: 14px;
}

#main .branche-card .branche-clients a:not(.btn) {
	color: var(--black);
	text-underline-offset: 3px;
}

/* "Staat jouw branche er niet tussen?" */
body .card.col-card.branche-other {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	margin-top: 8px;
	padding: 40px;
}

body .branche-other .content-wrapper {
	flex: 1 1 420px;
}

body .branche-other .content-wrapper h3 {
	margin: 0 0 8px;
	font-size: 32px;
}

body .branche-other .content-wrapper p {
	margin: 0;
	color: var(--lef-muted);
}

body .branche-other .buttons-holder {
	margin: 0;
}

html[data-theme="dark"] .card.branche-feature {
	--black: #27272b;
	--black-rgb: 39, 39, 43;
	--black-content: #f4f4f5;
	--white: #f4f4f5;
	--white-rgb: 244, 244, 245;
	--white-content: #18181b;
}

@media (max-width: 639px) {
	body .card.col-card.branche-feature,
	body .card.col-card.branche-other {
		padding: 24px;
	}

	body .branche-feature .content-wrapper h3 {
		font-size: 34px;
	}
}

/* branche landing pages */
body .card.col-card.branche-checklist {
	padding: 32px;
}

body .branche-checklist .content-wrapper h3 {
	margin: 0;
	font-size: 26px;
	line-height: 1.15;
}

body .branche-checklist .icons-list {
	grid-template-columns: 1fr;
	gap: 10px;
	margin-top: 20px;
}

body .content-wrapper.branche-links p {
	color: var(--lef-muted);
	line-height: 2;
}

#main .content-wrapper.branche-links a:not(.btn) {
	margin: 0 6px;
	white-space: nowrap;
}

body .branche-card .buttons-holder .btn {
	margin-left: 0;
}

/* card-portfolio with 3 per row: the theme centres the content (align-items: center); keep it left like the 1 and 2 per row cards */
body .card.card-portfolio .content-outer {
	align-items: flex-start;
}

/* opening hours as one quiet line: [lef_openingstijden format="regel"] = theme open status + hours */
body .content-wrapper .hours-line {
	display: inline-block;
	margin: 0;
	line-height: 1.6;
	color: var(--lef-muted);
	font-size: 13px;
}

/* the theme prints the status as a bold flex row (span.open-status): keep it inline in the quiet line */
body .hours-line .open-status {
	display: inline;
	font: inherit;
}

body .hours-line .open-status .open-status-circle,
body .hours-line .open-status-circle {
	display: inline-block;
	margin: 0 8px 1px 2px;
	vertical-align: middle;
	width: 7px;
	height: 7px;
	box-shadow: 0 0 0 3px rgba(var(--succes-rgb, 22, 163, 74), .18);
}

body .hours-line .hours-sep {
	margin: 0 4px;
	opacity: .5;
}

body footer#footer .content-wrapper.footer-hours {
	margin-top: 4px;
}

body footer#footer .footer-hours .hours-line {
	color: rgba(255, 255, 255, .55);
}

body .content-wrapper.visit-hours {
	margin: 2px 0 18px;
}

/* FAQ everywhere: every question is a white card (also on bg-gray sections), the open one gets a black border and a red toggle */
body .featured-faqs .accordion {
	border: 1px solid var(--lef-line);
	border-radius: var(--general-border-radius);
	background: var(--white);
	box-shadow: 0 10px 28px -22px rgba(var(--black-rgb), .35);
	transition: border-color .3s, box-shadow .4s var(--lef-ease);
}

body .featured-faqs .accordion:hover,
body .featured-faqs .accordion.opened {
	border-color: var(--black);
}

body .featured-faqs .accordion .accordion-title h5 {
	margin: 0;
	font-size: inherit;
	line-height: 1.3;
}

body .featured-faqs .accordion-toggle .icon {
	margin: 0;
	transition: transform .3s var(--lef-ease);
}

body .featured-faqs .accordion.opened .accordion-toggle {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--primary-content);
}

body .featured-faqs .accordion.opened .accordion-toggle .icon {
	transform: rotate(45deg);
}

/* a heading directly above the FAQ never touches it */
body .content-wrapper + .featured-faqs {
	margin-top: 28px;
}

/* WAAROM LEF (branche pages): one dark lead card + two white cards, then the needs as chips */
body .card.col-card.why-lead {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 360px;
	padding: 40px;
	background-image:
		radial-gradient(80% 90% at 100% 0%, rgba(var(--primary-rgb), .45), transparent 70%),
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0);
	background-size: auto, 22px 22px;
	background-repeat: no-repeat, repeat; /* the glow must not repeat: its next tile showed as a red line in the transparent border */
	box-shadow: var(--lef-shadow-tile);
}

body .why-lead .content-wrapper h3 {
	margin: 0 0 14px;
	font-size: 36px;
	line-height: 1.05;
}

body .why-lead .content-wrapper p {
	color: rgba(255, 255, 255, .75);
	font-size: 17px;
}

body .row.why-stack {
	height: calc(100% + 20px);
	margin: -10px -10px;
}

body .card.col-card.why-card {
	height: 100%;
	padding: 32px;
	transition: border-color .3s;
}

body .card.col-card.why-card:hover {
	border-color: var(--black);
}

body .why-card .content-wrapper h3 {
	margin: 0 0 10px;
	font-size: 26px;
}

body .why-card .content-wrapper p {
	color: var(--lef-muted);
}

body .content-wrapper.needs-title h3 {
	margin: 40px 0 0;
	font-size: 22px;
}

body .icons-list.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

body .icons-list.chip-list li {
	padding: 10px 16px;
	border: 1px solid var(--lef-line);
	border-radius: 999px;
	background: var(--white);
	font-size: 15px;
}

body .icons-list.chip-list li .icon {
	margin-right: 8px;
	font-size: 13px;
}

/* ANDERE BRANCHES: card-simple grid, whole card clickable (theme data-href) */
body .featured.branche-grid .card.card-simple {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 26px;
	border: 1px solid var(--lef-line);
	border-radius: var(--general-border-radius);
	background: var(--white);
	cursor: pointer;
	transition: transform .5s var(--lef-ease), border-color .3s, box-shadow .5s var(--lef-ease);
}

body .featured.branche-grid .card.card-simple:hover {
	border-color: var(--black);
	box-shadow: 0 28px 56px -36px rgba(var(--black-rgb), .45);
	transform: translateY(-4px);
}

body .featured.branche-grid .card-simple .content-outer {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 0;
}

body .featured.branche-grid .card-simple h4 {
	margin: 0 0 8px;
	font-family: var(--heading-font);
	font-size: 21px;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

body .featured.branche-grid .card-simple .excerpt-holder {
	color: var(--lef-muted);
	font-size: 15px;
	line-height: 1.5;
}

body .featured.branche-grid .card-simple .buttons-holder {
	margin: auto 0 0;
	padding-top: 18px;
}

body .featured.branche-grid .card-simple .btn {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--black);
	font-weight: 600;
}

body .featured.branche-grid .card-simple .btn span::after {
	content: "→";
	display: inline-block;
	margin-left: 8px;
	color: var(--primary);
	transition: transform .3s var(--lef-ease);
}

body .featured.branche-grid .card-simple:hover .btn span::after {
	transform: translateX(4px);
}

/* the last card ("Staat jouw branche er niet tussen?") is dark */
body .featured.branche-grid .card.card-simple.branche-other-card {
	border-color: transparent;
	background: var(--black);
	color: var(--black-content);
}

body .featured.branche-grid .branche-other-card h4,
body .featured.branche-grid .branche-other-card .btn {
	color: var(--black-content);
}

body .featured.branche-grid .branche-other-card .excerpt-holder {
	color: rgba(255, 255, 255, .7);
}

html[data-theme="dark"] .card.why-lead,
html[data-theme="dark"] .card.branche-other-card {
	--black: #27272b;
	--black-rgb: 39, 39, 43;
	--black-content: #f4f4f5;
	--white: #f4f4f5;
	--white-content: #18181b;
}

@media (max-width: 991px) {
	body .row.why-stack {
		height: auto;
	}

	body .card.col-card.why-lead {
		min-height: 0;
	}
}

@media (max-width: 639px) {
	body .card.col-card.why-lead,
	body .card.col-card.why-card {
		padding: 24px;
	}

	body .why-lead .content-wrapper h3 {
		font-size: 30px;
	}
}

/* branche cards on /branches: the title is the first link (data-href opens it), styled as plain heading */
#main .branche-card h3 a:not(.btn) {
	color: inherit;
	text-decoration: none;
}

/* editor-demo, compact stage (frame < 600px): the settings sidebar slides over the canvas when needed */
.lef-new-editor-demo__stage.is-compact {
	width: 770px;
}

.lef-new-editor-demo__stage.is-compact .lef-new-editor-demo__doc,
.lef-new-editor-demo__stage.is-compact .lef-new-editor-demo__toolbar > .icon {
	display: none;
}

.lef-new-editor-demo__stage.is-compact .lef-new-editor-demo__sidebar {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 5;
	box-shadow: -20px 0 40px -20px rgba(0, 0, 0, .3);
	transform: translateX(100%);
	transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.lef-new-editor-demo__stage.is-compact.is-sb .lef-new-editor-demo__sidebar {
	transform: none;
}

.lef-new-editor-demo__stage.is-compact .lef-new-editor-demo__slide {
	width: 100%;
}

/* dark section: the button switches to the light variant, like the theme's button colour per section */
.lef-new-editor-demo__secbody.is-dark .lef-new-editor-demo__btn {
	background: #fff;
	color: #18181b;
}

/* the theme styles every "main button" as a primary button: reset the step tabs (also on hover/focus) */
main .lef-new-editor-demo__step,
main .lef-new-editor-demo__step:hover,
main .lef-new-editor-demo__step:focus {
	margin: 0;
	padding: 16px 0 0;
	border: 0;
	border-top: 2px solid var(--lef-line);
	border-radius: 0;
	background: none;
	color: var(--lef-muted);
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

main .lef-new-editor-demo__step.is-active,
main .lef-new-editor-demo__step:hover {
	color: var(--black);
}

main .lef-new-editor-demo__step:focus:not(:focus-visible) {
	outline: none;
}

/* NOOIT ALLEEN (website): bento with the kennisbank as the dark lead card */
body .card.col-card.support-lead {
	display: flex;
	flex-direction: column;
	padding: 40px;
	background-image:
		radial-gradient(80% 90% at 100% 0%, rgba(var(--primary-rgb), .45), transparent 70%),
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 0);
	background-size: auto, 22px 22px;
}

body .support-lead .content-wrapper h3 {
	margin: 0 0 12px;
	font-size: 36px;
	line-height: 1.05;
}

body .support-lead .content-wrapper p {
	color: rgba(255, 255, 255, .75);
}

body .support-lead .content-wrapper ul {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

body .support-lead .content-wrapper li {
	padding: 10px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

#main .support-lead .content-wrapper li a:not(.btn) {
	color: var(--black-content);
	text-decoration: none;
}

#main .support-lead .content-wrapper li a:not(.btn)::after {
	content: " →";
	color: #e58a8a;
}

body .row.align-stretch .card.support-lead .buttons-holder {
	margin-top: auto;
	padding-top: 24px;
}

body .card.col-card.support-card {
	padding: 32px;
}

body .support-card .content-wrapper h3 {
	margin: 0 0 10px;
	font-size: 26px;
}

body .support-card .content-wrapper p {
	color: var(--lef-muted);
}

body .support-card .team-avatars {
	display: flex;
	margin-bottom: 18px;
}

body .support-card .team-avatars img {
	width: 44px;
	height: 44px;
	margin-right: -10px;
	border: 2px solid var(--white);
	border-radius: 50%;
	object-fit: cover;
}

body .support-updates .counter-outer {
	margin-top: 8px;
}

body .support-updates .content-wrapper.update-list h4 {
	margin: 20px 0 8px;
	font-size: 15px;
}

body .support-updates .update-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .support-updates .update-list li {
	padding: 6px 0;
	border-top: 1px solid var(--lef-line);
	color: var(--lef-muted);
	font-size: 14px;
}

body .support-updates .update-list li strong {
	display: inline-block;
	min-width: 56px;
	color: var(--black);
	font-family: var(--lef-mono);
	font-size: 12px;
}

html[data-theme="dark"] .card.support-lead {
	--black: #27272b;
	--black-rgb: 39, 39, 43;
	--black-content: #f4f4f5;
	--white: #f4f4f5;
	--white-content: #18181b;
}

@media (max-width: 639px) {

	body .card.col-card.support-card,
	body .card.col-card.support-lead {
		padding: 24px;
	}
}

/* lef-new/timeline: vertical timeline. Intro sticky left; on the right a line that fills red while you scroll,
   each step lights up when it reaches the middle of the screen (timeline.js). Without JS everything is simply visible. */
.lef-new-timeline {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 80px;
	align-items: start;
}

.lef-new-timeline__intro {
	position: sticky;
	top: calc(var(--lef-header-offset) + 40px);
}

.lef-new-timeline__intro h2 {
	margin: 0 0 16px;
}

.lef-new-timeline__intro p {
	max-width: 46ch;
	margin: 0;
	color: var(--lef-muted);
	font-size: var(--lef-lead-size);
}

.lef-new-timeline__track {
	--fill: 0;
	position: relative;
	margin: 0;
	padding: 0 0 0 64px;
	list-style: none;
}

/* the line: grey, with a red fill on top (scaleY = scroll progress) */
.lef-new-timeline__track::before,
.lef-new-timeline__track::after {
	content: "";
	position: absolute;
	left: 15px;
	top: 14px;
	bottom: 14px;
	width: 2px;
	border-radius: 2px;
	background: var(--lef-line);
}

.lef-new-timeline__track::after {
	background: var(--primary);
	transform: scaleY(var(--fill));
	transform-origin: top;
}

.lef-new-timeline__step {
	position: relative;
	padding-bottom: 72px;
	opacity: .35;
	transition: opacity .5s var(--lef-ease);
}

.lef-new-timeline__step:last-child {
	padding-bottom: 0;
}

.lef-new-timeline__step.is-on {
	opacity: 1;
}

.lef-new-timeline__dot {
	position: absolute;
	left: -64px;
	top: 4px;
	z-index: 1;
	width: 32px;
	height: 32px;
	border: 2px solid var(--lef-line);
	border-radius: 50%;
	background: var(--tertiary);
	transition: border-color .4s, background-color .4s, box-shadow .4s, transform .4s var(--lef-ease);
}

.lef-new-timeline__dot::after {
	content: "";
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: var(--lef-line);
	transition: background-color .4s;
}

.lef-new-timeline__step.is-on .lef-new-timeline__dot {
	border-color: var(--primary);
	box-shadow: 0 0 0 6px rgba(var(--primary-rgb), .14);
	transform: scale(1.08);
}

.lef-new-timeline__step.is-on .lef-new-timeline__dot::after {
	background: var(--primary);
}

.lef-new-timeline__step h3 {
	margin: 0 0 20px;
	font-size: 40px;
	line-height: 1.05;
}

.lef-new-timeline__roles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}

.lef-new-timeline__roles p {
	margin: 0;
	padding: 20px 22px;
	border: 1px solid var(--lef-line);
	border-radius: var(--general-border-radius);
	background: var(--white);
	color: var(--lef-muted);
	font-size: 16px;
	line-height: 1.6;
}

.lef-new-timeline__roles p:last-child {
	border-color: rgba(var(--primary-rgb), .35);
	background: var(--secondary);
}

.lef-new-timeline__roles strong {
	display: block;
	margin-bottom: 6px;
	color: var(--black);
	font-family: var(--heading-font);
	font-size: 20px;
}

.lef-new-timeline__roles p:last-child strong {
	color: var(--primary);
}

.lef-new-timeline.is-static .lef-new-timeline__step {
	opacity: 1;
}

.lef-new-timeline.is-static .lef-new-timeline__track {
	--fill: 1;
}

@media (max-width: 991px) {
	.lef-new-timeline {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.lef-new-timeline__intro {
		position: static;
	}

	.lef-new-timeline__track {
		padding-left: 48px;
	}

	.lef-new-timeline__track::before,
	.lef-new-timeline__track::after {
		left: 11px;
	}

	.lef-new-timeline__dot {
		left: -48px;
		width: 24px;
		height: 24px;
	}

	.lef-new-timeline__dot::after {
		inset: 6px;
	}

	.lef-new-timeline__step {
		padding-bottom: 48px;
	}

	.lef-new-timeline__step h3 {
		font-size: 30px;
	}

	.lef-new-timeline__roles {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* lef-new/timeline, desktop: horizontal. The block is (steps x 50vh + 100vh) tall; the inner part sticks and the track pans
   to the left while you scroll (timeline.js sets --x and --fill). Below 992px and without JS it stays the vertical version above. */
@media (min-width: 992px) {
	.lef-new-timeline.is-horizontal {
		display: block;
		height: calc(var(--steps, 5) * 50vh + 100vh);
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__sticky {
		position: sticky;
		top: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 56px;
		height: 100vh;
		padding-top: var(--lef-header-offset);
		overflow: hidden;
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__intro {
		position: static;
		max-width: 760px;
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__track {
		display: flex;
		gap: 40px;
		width: max-content;
		padding: 64px 0 0;
		transform: translateX(var(--x, 0px));
		will-change: transform;
	}

	/* horizontal line through the dots */
	.lef-new-timeline.is-horizontal .lef-new-timeline__track::before,
	.lef-new-timeline.is-horizontal .lef-new-timeline__track::after {
		left: 16px;
		right: 16px;
		top: 15px;
		bottom: auto;
		width: auto;
		height: 2px;
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__track::after {
		transform: scaleX(var(--fill));
		transform-origin: left;
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__step {
		flex: 0 0 440px;
		padding: 0;
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__dot {
		left: 0;
		top: -64px;
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__step h3 {
		font-size: 34px;
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__roles {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* the horizontal track runs to the edges of the screen, the content stays on the grid */
@media (min-width: 992px) {
	.lef-new-timeline.is-horizontal .lef-new-timeline__sticky {
		margin-inline: calc(50% - 50vw);
		padding-inline: calc(50vw - 50%);
	}
}

/* lef-new/timeline: Jij / Wij as chat bubbles (Jij left, Wij right in the brand colour) */
.lef-new-timeline__roles p {
	position: relative;
	border-radius: 20px 20px 20px 6px;
	box-shadow: 0 12px 28px -22px rgba(var(--black-rgb), .4);
}

.lef-new-timeline__roles p:first-child {
	margin-right: 36px;
}

.lef-new-timeline__roles p:last-child {
	margin-left: 36px;
	border-color: transparent;
	border-radius: 20px 20px 6px 20px;
	background: var(--primary);
	color: rgba(255, 255, 255, .88);
}

.lef-new-timeline__roles p:last-child strong {
	color: #fff;
}

.lef-new-timeline__roles strong {
	font-size: 15px;
	letter-spacing: .01em;
}

/* little tails */
.lef-new-timeline__roles p::after {
	content: "";
	position: absolute;
	bottom: -1px;
	width: 14px;
	height: 14px;
}

.lef-new-timeline__roles p:first-child::after {
	left: -7px;
	border-bottom: 1px solid var(--lef-line);
	border-left: 1px solid var(--lef-line);
	background: linear-gradient(225deg, transparent 50%, var(--white) 50%);
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	border: 0;
	background: var(--white);
}

.lef-new-timeline__roles p:last-child::after {
	right: -7px;
	background: var(--primary);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* desktop horizontal: every row of bubbles has the same height (subgrid over all steps) */
@media (min-width: 992px) {
	.lef-new-timeline.is-horizontal .lef-new-timeline__track {
		display: grid;
		grid-auto-columns: 440px;
		grid-auto-flow: column;
		grid-template-rows: auto auto auto;
		column-gap: 40px;
		row-gap: 14px;
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__step {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: 14px;
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__step h3 {
		margin-bottom: 6px;
	}

	.lef-new-timeline.is-horizontal .lef-new-timeline__roles {
		display: contents;
	}
}

/* bubbles are narrower than the step and sit left (Jij) or right (Wij), so they never stick out */
.lef-new-timeline__roles p:first-child,
.lef-new-timeline__roles p:last-child {
	width: calc(100% - 36px);
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

.lef-new-timeline__roles p:last-child {
	justify-self: end;
	margin-left: auto;
}

/* timeline bubbles (12-10, v2): Wij back to the light red tint; both tails as a small rotated square with the bubble's border */
.lef-new-timeline__roles p:last-child {
	border: 1px solid rgba(var(--primary-rgb), .35);
	background: var(--secondary);
	color: var(--lef-muted);
}

.lef-new-timeline__roles p:last-child strong {
	color: var(--primary);
}

.lef-new-timeline__roles p::after {
	bottom: 14px;
	width: 14px;
	height: 14px;
	clip-path: none;
	transform: rotate(45deg);
}

.lef-new-timeline__roles p:first-child::after {
	left: -8px;
	border: 0;
	border-bottom: 1px solid var(--lef-line);
	border-left: 1px solid var(--lef-line);
	background: var(--white);
}

.lef-new-timeline__roles p:last-child::after {
	right: -8px;
	border: 0;
	border-top: 1px solid rgba(var(--primary-rgb), .35);
	border-right: 1px solid rgba(var(--primary-rgb), .35);
	background: var(--secondary);
}

/* the tails sit at the bottom of the bubble, so the bubble corner there is round again */
.lef-new-timeline__roles p:first-child,
.lef-new-timeline__roles p:last-child {
	border-radius: 20px;
}

.lef-new-timeline__roles p:first-child::after,
.lef-new-timeline__roles p:last-child::after {
	bottom: 16px;
	width: 16px;
	height: 16px;
	clip-path: none;
}

.lef-new-timeline__roles p:first-child::after {
	left: -9px;
}

.lef-new-timeline__roles p:last-child::after {
	right: -9px;
}

/* OVER ONS: photos (acf/image-block, extra class "about-photo") and the team cards (acf/card-default in section "section-team") */
body .image-outer.about-photo,
body .image-outer.about-photo .image-holder {
	margin: 0;
	overflow: hidden;
	border-radius: var(--lef-radius-media);
}

body .image-outer.about-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

body .image-outer.about-photo.is-tall img {
	aspect-ratio: 4 / 5;
}

/* team cards look like the work-rows items on the home page: a bare portrait, name + role (mono) underneath,
   the whole card is the link (theme data-href opens the first link = the mail button, kept for screen readers/keyboard) */
body .section-team .card.card-default {
	position: relative;
	height: 100%;
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

body .section-team .card.card-default .image-outer {
	margin: 0;
}

/* the theme holder is a 60% padding box: make it a 3:4 portrait like the work rows */
body .section-team .card.card-default .image-outer .image-holder {
	overflow: hidden;
	padding-bottom: 133.33%;
	border-radius: var(--lef-radius-media);
	background: var(--gray);
}

body .section-team .card.card-default .image-outer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	transition: transform .7s var(--lef-ease);
}

body .section-team .card.card-default:hover .image-outer img {
	transform: scale(1.04);
}

body .section-team .card.card-default .content-outer {
	display: grid;
	gap: 2px;
	padding: 12px 0 0;
}

body .section-team .card.card-default h4 {
	margin: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	transition: color .3s;
}

body .section-team .card.card-default:hover h4 {
	color: var(--primary);
}

body .section-team .card.card-default .excerpt-holder p {
	margin: 0;
	color: var(--lef-muted);
	font-family: var(--lef-mono-system);
	font-size: 12px;
	letter-spacing: -0.025em;
	line-height: 16px;
}

/* the mail button stays in the markup (link target + keyboard), visually hidden until focused */
body .section-team .card.card-default .buttons-holder {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

body .section-team .card.card-default .buttons-holder:focus-within {
	position: static;
	width: auto;
	height: auto;
	grid-column: 1 / -1;
	clip-path: none;
}

/* team cards two per row on phone/tablet (the theme stacks every col below 992px) */
@media (max-width: 991px) {
	body .section-team > .container > .row > .col-lg-3 {
		flex: 0 0 50%;
		max-width: 50%;
		width: 50%;
	}

	body .section-team .card.card-default h4 {
		font-size: 16px;
		line-height: 22px;
	}
}

/* "Jij hier?" strip under the team: text left, button right */
/* .row.align-stretch .card is a column flexbox in the theme: match its depth */
body .row.align-stretch .card.col-card.team-join {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin-top: 24px;
	padding: 28px 32px;
}

body .card.col-card.team-join .content-wrapper h3 {
	margin: 0 0 6px;
	font-size: 24px;
}

body .card.col-card.team-join .content-wrapper p {
	margin: 0;
}

body .row.align-stretch .card.col-card.team-join .content-wrapper {
	flex: 1 1 420px;
}

body .row.align-stretch .card.col-card.team-join .buttons-holder {
	margin: 0;
}

/* "Ga direct naar" (acf/featured card-simple, cards_per_row 1, extra class "subdienst-list"): sub-services as rows,
   title left, text right, arrow; the whole row is the link (theme data-href), the button stays for keyboard/screen readers */
body .featured.subdienst-list {
	margin-top: 36px;
}

body .featured.subdienst-list > .row {
	margin: 0;
	border-top: 1px solid var(--lef-line);
}

body .featured.subdienst-list > .row > .wp-block-custom-section-block-col {
	margin: 0;
	padding: 0;
}

body .featured.subdienst-list .card.card-simple {
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--lef-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

body .featured.subdienst-list .card.card-simple .content-outer {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 40px;
	align-items: center;
	gap: 24px;
	padding: 26px 8px;
	transition: padding .4s var(--lef-ease);
}

body .featured.subdienst-list .card.card-simple h4 {
	margin: 0;
	font-size: clamp(20px, 1.8vw, 26px);
	transition: color .3s;
}

body .featured.subdienst-list .card.card-simple .excerpt-holder,
body .featured.subdienst-list .card.card-simple .excerpt-holder p {
	margin: 0;
	color: var(--lef-muted);
}

/* the arrow */
body .featured.subdienst-list .card.card-simple .content-outer::after {
	content: "";
	justify-self: end;
	width: 40px;
	height: 40px;
	border: 1px solid var(--lef-line);
	border-radius: 50%;
	background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%2318181b' stroke-width='1.6'/%3E%3C/svg%3E");
	transition: background-color .3s, border-color .3s, transform .4s var(--lef-ease);
}

/* slide the text with transform, not padding (padding narrowed the text column, long lines wrapped) */
body .featured.subdienst-list .card.card-simple h4,
body .featured.subdienst-list .card.card-simple .excerpt-holder {
	transition: transform .4s var(--lef-ease), color .3s;
}

body .featured.subdienst-list .card.card-simple:hover h4,
body .featured.subdienst-list .card.card-simple:hover .excerpt-holder {
	transform: translateX(16px);
}

body .featured.subdienst-list .card.card-simple:hover h4 {
	color: var(--primary);
}

body .featured.subdienst-list .card.card-simple:hover .content-outer::after {
	border-color: var(--primary);
	background-color: var(--secondary);
	transform: translateX(-4px);
}

body .featured.subdienst-list .card.card-simple .buttons-holder {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

body .featured.subdienst-list .card.card-simple .buttons-holder:focus-within {
	inset: 8px auto auto 8px;
	width: auto;
	height: auto;
	clip-path: none;
}

html[data-theme="dark"] body .featured.subdienst-list .card.card-simple .content-outer::after {
	filter: invert(1);
}

/* hover in dark: no invert (it turned the dark red tint light turquoise), red circle with a white arrow */
html[data-theme="dark"] body .featured.subdienst-list .card.card-simple:hover .content-outer::after {
	border-color: var(--primary);
	background-color: var(--primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
	filter: none;
}

@media (max-width: 767px) {
	body .featured.subdienst-list .card.card-simple .content-outer {
		grid-template-columns: minmax(0, 1fr) 36px;
		gap: 4px 16px;
		padding: 20px 0;
	}

	body .featured.subdienst-list .card.card-simple .excerpt-holder {
		grid-row: 2;
		font-size: 15px;
	}

	body .featured.subdienst-list .card.card-simple .content-outer::after {
		grid-row: 1 / span 2;
		grid-column: 2;
		width: 36px;
		height: 36px;
	}
}

/* =====================================================================
   CASE-DETAIL (werk/<slug>.html, gebouwd met tools/case-build.mjs)
   ===================================================================== */

body .case-hero .chip-list {
	margin: 18px 0 24px;
}

/* lef-new/case-devices: browser frame + phone frame around the captured screenshots */
.lef-new-case-devices {
	position: relative;
	margin-top: 48px;
}

.lef-new-case-devices__browser {
	overflow: hidden;
	border: 1px solid var(--lef-line);
	border-radius: 14px;
	background: var(--white);
	box-shadow: 0 50px 100px -50px rgba(24, 24, 27, .45);
}

.lef-new-case-devices__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px;
	border-bottom: 1px solid var(--lef-line);
	background: var(--gray);
}

.lef-new-case-devices__bar i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: rgba(var(--black-rgb), .14);
}

.lef-new-case-devices__bar span {
	flex: 0 1 340px;
	margin: 0 auto;
	padding: 4px 12px;
	border-radius: 99px;
	background: var(--white);
	color: var(--lef-muted);
	font-family: var(--lef-mono-system);
	font-size: 12px;
	text-align: center;
	transform: translateX(-20px);
}

.lef-new-case-devices__browser img {
	display: block;
	width: 100%;
	height: auto;
}

.lef-new-case-devices__phone {
	overflow: hidden;
	aspect-ratio: 390 / 844;
	border: 9px solid #111113;
	border-radius: 38px;
	background: #111113;
	box-shadow: 0 40px 80px -30px rgba(24, 24, 27, .5);
}

.lef-new-case-devices__phone img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 29px;
	object-fit: cover;
	object-position: top;
}

/* layout "hero": phone overlaps the bottom right of the browser */
.lef-new-case-devices[data-layout="hero"] {
	padding-right: 7%;
}

.lef-new-case-devices[data-layout="hero"] .lef-new-case-devices__phone {
	position: absolute;
	right: 0;
	bottom: -48px;
	width: 21%;
	max-width: 280px;
}

/* layout "phones": a row of three, the middle one a bit higher */
.lef-new-case-devices[data-layout="phones"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 300px));
	justify-content: center;
	gap: clamp(16px, 4vw, 64px);
	margin-top: 56px;
}

@media (max-width: 767px) {
	.lef-new-case-devices[data-layout="hero"] {
		padding-right: 0;
		margin-bottom: 40px;
	}

	.lef-new-case-devices[data-layout="hero"] .lef-new-case-devices__phone {
		right: -6px;
		bottom: -40px;
		width: 30%;
		border-width: 5px;
		border-radius: 20px;
	}

	.lef-new-case-devices[data-layout="hero"] .lef-new-case-devices__phone img {
		border-radius: 15px;
	}

	.lef-new-case-devices__bar {
		height: 28px;
	}

	.lef-new-case-devices__bar span {
		font-size: 10px;
	}

	.lef-new-case-devices[data-layout="phones"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}

	.lef-new-case-devices[data-layout="phones"] .lef-new-case-devices__phone {
		border-width: 4px;
		border-radius: 16px;
	}

	.lef-new-case-devices[data-layout="phones"] .lef-new-case-devices__phone img {
		border-radius: 12px;
	}
}

/* "In het kort": list-split as a facts table */
body .list-split.case-facts {
	margin: 0;
	border-top: 1px solid var(--lef-line);
}

body .list-split.case-facts li {
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--lef-line);
}

body .list-split.case-facts .li-content {
	color: var(--lef-muted);
	font-family: var(--lef-mono-system);
	font-size: 13px;
}

body .list-split.case-facts .li-content-right {
	font-weight: 600;
	text-align: right;
}

/* aanpak: the key parts as a single-column list with a bit more air (theme icons-list is a 2-col grid) */
body .icons-list.case-parts {
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: 24px;
	border-top: 1px solid var(--lef-line);
}

body .icons-list.case-parts li {
	padding: 12px 0;
	border-bottom: 1px solid var(--lef-line);
}

/* meer werk */
body .content-wrapper.case-related-title h3 {
	margin: 48px 0 8px;
}

/* de vraag: black band, big heading left, text right */
body .case-question .content-wrapper h2 {
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1;
}

body .case-question .content-wrapper p {
	color: rgba(var(--black-content-rgb, 255, 255, 255), .75);
}

body .case-question .content-wrapper p:first-child {
	color: var(--black-content);
	font-size: 20px;
	line-height: 1.55;
}

body .case-question .before-after-slider {
	margin-top: 56px;
	overflow: hidden;
	border-radius: 14px;
}

/* wat we bouwden: rows of screenshot (browser frame) | text, every second row flipped */
body .case-features .row.case-feature {
	margin-top: clamp(48px, 7vw, 112px);
}

@media (min-width: 992px) {
	body .case-features .row.case-feature.is-flipped {
		flex-direction: row-reverse;
	}
}

body .case-feature .content-wrapper h3 {
	font-size: clamp(28px, 2.6vw, 38px);
}

@media (max-width: 991px) {
	body .case-feature .content-wrapper {
		margin-top: 20px;
	}
}

/* layout "browser": just the framed screenshot */
.lef-new-case-devices[data-layout="browser"] {
	margin-top: 0;
}

/* mobiel: the phones sit next to the text */
.lef-new-case-devices[data-layout="phones"] {
	grid-template-columns: repeat(3, minmax(0, 240px));
	margin-top: 0;
}

/* lef-new/case-brand: big colour fields with name + hex in the field, fonts as one line underneath */
.lef-new-case-brand__colors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0;
	margin: 40px 0 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--lef-line);
	border-radius: 14px;
	list-style: none;
}

.lef-new-case-brand__colors li {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	min-height: 240px;
	margin: 0;
	padding: 22px;
	background: var(--c);
	color: var(--ink);
	transition: flex-grow .5s var(--lef-ease);
}

.lef-new-case-brand__colors strong {
	font-family: var(--heading-font);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.lef-new-case-brand__colors code {
	color: inherit;
	opacity: .7;
	font-family: var(--lef-mono-system);
	font-size: 13px;
	background: none;
}

.lef-new-case-brand__fonts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin: 18px 0 0;
	font-size: 18px;
	font-weight: 600;
}

.lef-new-case-brand__fonts small {
	margin-right: 8px;
	color: var(--lef-muted);
	font-family: var(--lef-mono-system);
	font-size: 12px;
	font-weight: 400;
}

@media (max-width: 767px) {
	.lef-new-case-brand__colors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lef-new-case-brand__colors li {
		min-height: 150px;
		padding: 16px;
	}
}

/* gemeten: four big counters in a row with a line above each */
body .case-scores .counter-outer {
	margin-top: 24px;
}

body .case-scores .count-outer {
	padding-top: 20px;
	border-top: 2px solid var(--black);
}

body .case-scores .content-wrapper.muted p {
	margin: 24px 0 0;
}

/* =====================================================================
   PAGINATYPES 12-10-2026 (diensten, prijzen, vacatures, werkgebied, kennisbank-onderwerp, zoeken, 404,
   tekst/juridisch, verhaal (mvo), partners, website-check). Samengevoegd uit child/incoming/.
   ===================================================================== */

/* ---------- diensten ---------- */
/* diensten.html — tijdelijk, wordt samengevoegd in child/style.css */

/* Core service cards with an acf/list (Diensten-overzicht): one column, between the text and the buttons */
body .service-card.dienst-kern .icons-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 24px 0 0;
}

body .service-card.dienst-kern .icons-list li {
	width: auto;
	margin: 0;
}

body .service-card.dienst-kern .buttons-holder {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* "Ga direct naar"-rows as secondary services (acf/featured extra class "dienst-bijzaak"): smaller, quieter rows */
body .featured.subdienst-list.dienst-bijzaak {
	margin-top: 0;
}

body .featured.subdienst-list.dienst-bijzaak .card.card-simple .content-outer {
	grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 34px;
	padding: 18px 8px;
}

body .featured.subdienst-list.dienst-bijzaak .card.card-simple h4 {
	font-size: 19px;
	font-weight: 600;
}

body .featured.subdienst-list.dienst-bijzaak .card.card-simple .excerpt-holder p {
	font-size: 15px;
}

body .featured.subdienst-list.dienst-bijzaak .card.card-simple .content-outer::after {
	width: 34px;
	height: 34px;
	opacity: .6;
}

body .featured.subdienst-list.dienst-bijzaak .card.card-simple:hover .content-outer::after {
	opacity: 1;
}

@media (max-width: 767px) {
	body .featured.subdienst-list.dienst-bijzaak .card.card-simple .content-outer {
		grid-template-columns: minmax(0, 1fr) 32px;
		padding: 16px 0;
	}
}

/* ---------- prijzen ---------- */
/* wat-kost-een-website.html — tijdelijk, wordt samengevoegd in child/style.css */

/* text-content extra class "prijs-factoren": WYSIWYG h3 + p pairs shown as numbered rows (number = CSS counter, decorative) */
body .content-wrapper.prijs-factoren {
	counter-reset: factor;
	border-top: 1px solid var(--lef-line);
}

body .content-wrapper.prijs-factoren h3 {
	counter-increment: factor;
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin: 0;
	padding-top: 28px;
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.15;
}

body .content-wrapper.prijs-factoren h3::before {
	content: counter(factor, decimal-leading-zero);
	flex: 0 0 32px;
	color: var(--primary);
	font-family: var(--lef-mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
}

body .content-wrapper.prijs-factoren p {
	margin: 10px 0 0;
	padding: 0 0 28px 48px;
	border-bottom: 1px solid var(--lef-line);
	color: var(--lef-muted);
}

/* col-card extra class "kosten-card": one-off vs recurring costs; list in one column, the Lef line at the bottom */
body .card.col-card.kosten-card {
	display: flex;
	flex-direction: column;
}

body .kosten-card .icons-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 24px 0 0;
}

body .kosten-card .icons-list li {
	width: auto;
	margin: 0;
}

body .kosten-card .content-wrapper.kosten-card-note {
	margin-top: auto;
	padding-top: 24px;
}

body .kosten-card .content-wrapper.kosten-card-note p {
	margin: 4px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--lef-line);
}

body .kosten-card.bg-black .content-wrapper.kosten-card-note p {
	border-top-color: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .75);
}

body .kosten-card.bg-black .content-wrapper.kosten-card-note strong {
	color: var(--black-content);
}

/* "Tijd voor een lijstje": the support-lead card at full width; list in one column on small screens */
body .card.col-card.lijstje-card {
	padding: 56px;
}

body .lijstje-card .icons-list.lijstje-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
	margin: 0;
}

body .lijstje-card .icons-list.lijstje-list li {
	width: auto;
	margin: 0;
	color: var(--black-content);
}

@media (max-width: 767px) {
	body .content-wrapper.prijs-factoren p {
		padding-left: 0;
	}

	body .card.col-card.lijstje-card {
		padding: 32px 24px;
	}

	body .lijstje-card .icons-list.lijstje-list {
		grid-template-columns: 1fr;
		margin-top: 16px;
	}
}

/* ---------- vacatures ---------- */
/* VACATURES (vacatures.html + vacatures/*.html) ------------------------------------- */
/* Incoming from agent ag-vacatures: to be merged into child/style.css by the main session. */

/* acf/featured extra class "vacature-list" (on top of "subdienst-list"): the rows get a .card-meta line
   (child card override, ACF fields soort / opleiding / plaats) above the title */
body .featured.subdienst-list.vacature-list .card.card-simple .content-outer {
	grid-template-areas:
		"meta text arrow"
		"title text arrow";
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 40px;
	row-gap: 8px;
}

body .featured.subdienst-list.vacature-list .card.card-simple .card-meta {
	display: flex;
	flex-wrap: wrap;
	grid-area: meta;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	color: var(--lef-muted);
	font-family: var(--lef-mono);
	font-size: 12px;
}

body .featured.subdienst-list.vacature-list .card.card-simple .card-meta span + span::before {
	content: "·";
	margin-right: 10px;
}

body .featured.subdienst-list.vacature-list .card.card-simple .card-meta .card-term {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--secondary);
	color: var(--primary);
	font-weight: 600;
}

body .featured.subdienst-list.vacature-list .card.card-simple .card-meta .card-term + span::before {
	content: none;
}

body .featured.subdienst-list.vacature-list .card.card-simple h4 {
	grid-area: title;
}

body .featured.subdienst-list.vacature-list .card.card-simple .excerpt-holder {
	grid-area: text;
}

body .featured.subdienst-list.vacature-list .card.card-simple .content-outer::after {
	grid-area: arrow;
}

body .featured.vacature-list + .buttons-holder {
	margin-top: 32px;
}

/* acf/image-block extra class "vacature-photo": portrait in the narrow hero col */
body .image-outer.about-photo.vacature-photo img {
	aspect-ratio: 4 / 5;
	max-height: 520px;
}

/* text-content extra class "vacature-text": the body of a vacature (h2 per topic, h3 per task) */
body .content-wrapper.vacature-text + .content-wrapper.vacature-text {
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid var(--lef-line);
}

body .content-wrapper.vacature-text h2 {
	margin-bottom: 16px;
	font-size: 40px;
}

body .content-wrapper.vacature-text h2 + p {
	max-width: none;
	margin-top: 0;
	color: inherit;
	font-size: 17px;
}

body .content-wrapper.vacature-text h3 {
	margin: 28px 0 6px;
	font-size: 22px;
}

body .content-wrapper.vacature-text p,
body .content-wrapper.vacature-text li {
	font-size: 17px;
	line-height: 1.7;
}

body .content-wrapper.vacature-text ul {
	display: grid;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

body .content-wrapper.vacature-text li {
	position: relative;
	padding-left: 26px;
}

body .content-wrapper.vacature-text li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .62em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--primary);
}

body .content-wrapper.vacature-text li strong {
	color: var(--black);
}

/* sidebar: col-card "vacature-facts" above the hero-contact card, both in the sticky col */
body .lef-sticky > .card + .card {
	margin-top: 20px;
}

body .card.col-card.vacature-facts {
	padding: 28px;
	border: 1px solid var(--lef-line);
	box-shadow: var(--lef-shadow-tile);
}

body .vacature-facts .content-wrapper h3 {
	margin: 0 0 18px;
	font-size: 24px;
}

body .icons-list.vacature-facts-list {
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
}

body .icons-list.vacature-facts-list li {
	align-items: flex-start;
	line-height: 1.5;
}

body .icons-list.vacature-facts-list li .icon {
	display: grid;
	flex: 0 0 36px;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-right: 14px;
	border-radius: var(--general-border-radius);
	background: var(--secondary);
	color: var(--primary);
	font-size: 15px;
}

body .icons-list.vacature-facts-list .li-content {
	color: var(--lef-muted);
	font-size: 15px;
}

body .icons-list.vacature-facts-list li strong {
	color: var(--black);
	font-size: 14px;
}

/* GRAVITY FORMS: file upload field (gfield--type-fileupload) */
body .gform_wrapper.gravity-theme input[type="file"] {
	width: 100%;
	padding: 8px;
	border: 1px dashed var(--lef-line);
	border-radius: var(--form-elements-border-radius);
	background: var(--tertiary);
	color: var(--lef-muted);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: border-color .2s;
}

body .gform_wrapper.gravity-theme input[type="file"]:hover {
	border-color: var(--black);
}

body .gform_wrapper.gravity-theme input[type="file"]:focus-visible {
	border-color: var(--black);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18);
}

body .gform_wrapper.gravity-theme input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: var(--btn-border-radius, 10px);
	background: var(--black);
	color: var(--black-content);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}

body .gform_wrapper.gravity-theme .gform_fileupload_rules {
	display: block;
	margin-top: 6px;
	color: var(--lef-muted);
	font-size: 13px;
}

@media (max-width: 991px) {
	body .image-outer.about-photo.vacature-photo img {
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 767px) {
	body .featured.subdienst-list.vacature-list .card.card-simple .content-outer {
		grid-template-areas:
			"meta arrow"
			"title arrow"
			"text text";
		grid-template-columns: minmax(0, 1fr) 36px;
	}

	/* the subdienst-list mobile rules set grid-row/column on these: restore the named areas */
	body .featured.subdienst-list.vacature-list .card.card-simple .content-outer::after {
		grid-area: arrow;
	}

	body .featured.subdienst-list.vacature-list .card.card-simple .excerpt-holder {
		grid-area: text;
	}

	body .content-wrapper.vacature-text h2 {
		font-size: 30px;
	}

	body .content-wrapper.vacature-text + .content-wrapper.vacature-text {
		margin-top: 40px;
		padding-top: 40px;
	}
}

/* the theme frames .ginput_container_fileupload (black border, 20px radius, centred): the input itself is the field here */
body .gform_wrapper.gravity-theme .ginput_container_fileupload {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: left;
}

body .gform_wrapper.gravity-theme .ginput_container_fileupload input[type="file"] {
	opacity: 1;
}

/* ---------- werkgebied ---------- */
/* Werkgebied + plaats-landingspagina (werkgebied.html, website-laten-maken-dokkum.html). Merge into child/style.css. */

/* Text-content extra class "area-title": province heading above a list of places (h3 at h4-ish size, the list follows close below) */
body .content-wrapper.area-title h3 {
	margin-bottom: 8px;
	font-size: 28px;
}

body .content-wrapper.area-title p {
	color: var(--lef-muted);
}

body .content-wrapper.area-title + .featured.subdienst-list {
	margin-top: 24px;
}

/* Row extra class "area-cards": the other regions as two grey cards under the list of places */
body .row.area-cards {
	margin-top: 46px;
}

body .card.col-card.area-card {
	height: 100%;
}

body .area-card .content-wrapper h3 {
	font-size: 24px;
	margin-bottom: 10px;
}

body .area-card .content-wrapper p {
	color: var(--lef-muted);
}

/* ---------- archief ---------- */
/* ==========================================================================
   INCOMING: archief.css (kennisbank/seo.html, zoeken.html, 404.html)
   To be merged into child/style.css by the main session. General rules only:
   - .term-count in the term filter (search: count per type)
   - acf/featured extra class "search-results" (search.php: card-simple list with card-meta + optional thumbnail)
   ========================================================================== */

/* count after a filter label (search results: "Kennisbank 6") */
#main .featured-taxonomy-terms.term-filter a .term-count {
	margin-left: 8px;
	color: var(--lef-muted);
	font-family: var(--lef-mono);
	font-size: 12px;
	transition: color .3s;
}

#main .featured-taxonomy-terms.term-filter a.is-active .term-count,
#main .featured-taxonomy-terms.term-filter a[aria-current] .term-count {
	color: rgba(var(--white-rgb, 255, 255, 255), .65);
}

/* SEARCH RESULTS (acf/featured markup in the child search.php, extra class "search-results"):
   one result per row, separated by lines; label (post type) + path in mono, title, excerpt; a case gets its photo on the right.
   The whole row is the link (theme data-href); the button stays for keyboard and screen readers and reads as a text link. */
body .featured.search-results > .row {
	margin: 0;
	border-top: 1px solid var(--lef-line);
}

body .featured.search-results > .row > .wp-block-custom-section-block-col {
	margin: 0;
	padding: 0;
}

body .featured.search-results .card.card-simple {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 28px;
	padding: 26px 8px;
	border: 0;
	border-bottom: 1px solid var(--lef-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

/* hover slides the text with transform, not padding: padding narrowed the column and long titles wrapped */
body .featured.search-results .card-simple .content-outer {
	flex: 1;
	min-width: 0;
	padding: 0;
	transition: transform .4s var(--lef-ease);
}

body .featured.search-results .card.card-simple:hover .content-outer {
	transform: translateX(8px);
}

body .featured.search-results .card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	color: var(--lef-muted);
	font-family: var(--lef-mono);
	font-size: 12px;
}

body .featured.search-results .card-term {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--secondary);
	color: var(--primary);
	font-weight: 600;
}

body .featured.search-results .card-simple h4 {
	margin: 0 0 6px;
	font-family: var(--heading-font);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
	transition: color .3s;
}

body .featured.search-results .card-simple:hover h4 {
	color: var(--primary);
}

body .featured.search-results .card-simple .excerpt-holder {
	max-width: 60ch;
	color: var(--lef-muted);
	font-size: 15px;
	line-height: 1.55;
}

body .featured.search-results .card-simple .buttons-holder {
	margin: 0;
	padding-top: 12px;
}

body .featured.search-results .card-simple .btn {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--black);
	font-size: 14px;
	font-weight: 600;
}

body .featured.search-results .card-simple .btn span::after {
	content: "→";
	display: inline-block;
	margin-left: 8px;
	color: var(--primary);
	transition: transform .3s var(--lef-ease);
}

body .featured.search-results .card-simple:hover .btn span::after {
	transform: translateX(4px);
}

/* a case result: photo on the right */
body .featured.search-results .card-simple .image-outer {
	order: 2;
	flex: 0 0 184px;
	margin: 0;
}

body .featured.search-results .card-simple .image-holder {
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: var(--lef-radius-media);
}

body .featured.search-results .card-simple .image-holder img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform .8s var(--lef-ease);
}

body .featured.search-results .card-simple:hover .image-holder img {
	transform: scale(1.05);
}

body .featured.search-results .no-posts-message {
	padding: 26px 8px;
	color: var(--lef-muted);
}

body .featured.search-results .pagination-holder {
	margin-top: 40px;
}

@media (max-width: 767px) {
	body .featured.search-results .card.card-simple {
		gap: 16px;
		padding: 22px 0;
	}

	body .featured.search-results .card.card-simple:hover {
		padding-left: 0;
	}

	body .featured.search-results .card-simple .image-outer {
		flex-basis: 96px;
		align-self: flex-start;
	}
}

/* the read-more link stays for keyboard and screen readers, but the whole row already reads as the link */
body .featured.search-results .card-simple .buttons-holder {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

body .featured.search-results .card-simple .buttons-holder:focus-within {
	position: static;
	width: auto;
	height: auto;
	clip-path: none;
}

/* "Snel naar" (Builder pattern on zoeken + 404: acf/featured card-simple, extra classes "branche-grid quick-links"):
   on phones two per row, title + link only, so eight cards don't fill four screens */
@media (max-width: 767px) {
	body .featured.quick-links > .row > .wp-block-custom-section-block-col {
		flex: 0 0 50%;
		max-width: 50%;
		margin: 6px 0;
		padding: 0 6px;
	}

	body .featured.quick-links > .row {
		margin: 0 -6px;
	}

	body .featured.branche-grid.quick-links .card.card-simple {
		padding: 18px 16px;
	}

	body .featured.branche-grid.quick-links .card-simple h4 {
		font-size: 18px;
	}

	body .featured.branche-grid.quick-links .card-simple .excerpt-holder {
		display: none;
	}

	body .featured.branche-grid.quick-links .card-simple .buttons-holder {
		padding-top: 12px;
	}

	body .featured.branche-grid.quick-links .card-simple .btn {
		font-size: 14px;
	}
}

/* ---------- tekst ---------- */
/* ==========================================================================
   INCOMING: privacy-policy.html (template "Juridisch") + mvo.html (paginatype "Verhaal").
   Samen te voegen in child/style.css door de hoofdsessie.
   ========================================================================== */

/* JURIDISCH: tekstkolom (col-klasse "legal-tekst", naast lef-new-kb-artikel__tekst) houdt een leesbare regel */
body .legal-tekst .content-wrapper {
	max-width: 70ch;
}

/* JURIDISCH: contactkaart onder de tekst (col-card bg-gray, extra klasse "legal-contact") */
body .card.col-card.legal-contact {
	max-width: 70ch;
	margin-top: 32px;
	padding: 28px 32px;
	border-radius: var(--general-border-radius);
}

body .legal-tekst .card.legal-contact .content-wrapper p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.6;
}

body .card.col-card.legal-contact .buttons-holder {
	margin-top: 8px;
}

/* JURIDISCH: zijbalkkaart met de andere documenten (socket-menu); huidige pagina zwart */
#main .lef-new-kb-artikel__kaart.legal-docs .current-menu-item a:not(.btn) {
	color: var(--black);
	font-weight: 600;
}

/* VERHAAL (mvo): Green Web Foundation-badge onder de tekst (acf/image-block met link, link-klasse "green-badge") */
#main a.green-badge {
	display: inline-block;
	margin-top: 28px;
	text-decoration: none;
}

body .green-badge .image-outer,
body .green-badge .image-holder {
	margin: 0;
}

body .green-badge img {
	display: block;
	width: 200px;
	height: auto;
	transition: transform .3s;
}

#main a.green-badge:hover img {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	body .green-badge img {
		transition: none;
	}
}

@media (max-width: 991px) {
	/* VERHAAL: hoofdstukken met het beeld rechts (sectieklasse "mvo-flip") tonen op mobiel ook eerst het beeld */
	body section.mvo-flip .row > .col-lg-6 {
		order: -1;
	}

	body .card.col-card.legal-contact {
		padding: 24px;
	}
}

body .legal-tekst .card.legal-contact .content-wrapper p {
	color: var(--black);
}

/* ---------- partners ---------- */
/* ==========================================================================
   child/incoming/partners.css — CSS for partners.html and website-check.html
   (to be merged into child/style.css by the main session)
   ========================================================================== */

/* PARTNERS ------------------------------------------------------------------ */
/* group heading above each pair of partner cards (text-content, extra class "partner-group") */
body .content-wrapper.partner-group h3 {
	margin: 24px 0 0;
	font-size: 22px;
}

body .inspire-card + .partner-group h3,
body .grid-cta + .wp-block-custom-section-block-col .content-wrapper.partner-group h3 {
	margin-top: 48px;
}

/* partner cards (acf/card-default, extra class "partner-card"): logo banner on top, name, "vak · sinds", text, strengths as chips,
   outline link to the partner site; the whole card opens that site (theme data-href, respects target) */
body .card.card-default.partner-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--lef-line);
	border-radius: var(--general-border-radius);
	background: var(--white);
	cursor: pointer;
	transition: border-color .3s, box-shadow .3s;
}

body .card.card-default.partner-card:hover {
	border-color: var(--black);
	box-shadow: var(--lef-shadow-tile);
}

body .card.card-default.partner-card .image-outer {
	margin: 0;
	padding: 0;
}

/* the theme holder is a padding box: 2:1, the banner's logo sits in the middle so cover crops only empty space */
body .card.card-default.partner-card .image-outer .image-holder {
	overflow: hidden;
	padding-bottom: 38%;
	border-bottom: 1px solid var(--lef-line);
	border-radius: 0;
}

body .card.card-default.partner-card .image-outer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--lef-ease);
}

body .card.card-default.partner-card:hover .image-outer img {
	transform: scale(1.04);
}

body .row.align-stretch .card.card-default.partner-card .content-outer {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 28px 32px 32px;
}

body .card.card-default.partner-card h4 {
	margin: 0 0 6px;
	font-family: var(--heading-font);
	font-weight: var(--h-font-weight);
	letter-spacing: -0.035em;
	font-size: 30px;
	line-height: 1.1;
}

body .card.card-default.partner-card .excerpt-holder p {
	margin: 0 0 14px;
	color: var(--lef-muted);
	font-size: 16px;
}

/* first line = vak · sinds (mono, like the team roles) */
body .card.card-default.partner-card .excerpt-holder p:first-child {
	margin-bottom: 16px;
	font-family: var(--lef-mono-system);
	font-size: 12px;
	letter-spacing: -0.025em;
	line-height: 16px;
}

body .card.card-default.partner-card .excerpt-holder ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

body .card.card-default.partner-card .excerpt-holder li {
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--lef-line);
	border-radius: 999px;
	color: var(--black);
	font-size: 13px;
	line-height: 1.4;
}

body .card.card-default.partner-card .excerpt-holder li::before {
	content: none;
}

body .row.align-stretch .card.card-default.partner-card .buttons-holder {
	margin-top: auto;
	padding-top: 24px;
}

/* "Partner worden?" sits on the grey section (align-stretch row): white card, no theme margin above the buttons */
body .bg-gray .card.col-card.branche-other {
	margin-top: 20px;
}

body .row.align-stretch .card.col-card.branche-other .buttons-holder {
	margin: 0;
}

@media (max-width: 639px) {
	body .row.align-stretch .card.card-default.partner-card .content-outer {
		padding: 22px 22px 24px;
	}

	body .card.card-default.partner-card h4 {
		font-size: 26px;
	}
}

/* WEBSITE-CHECK -------------------------------------------------------------- */
/* Gravity Forms: website field + checkbox choices as pills (same look as the radio pills; merge into GRAVITY FORMS) */
body .gform_wrapper.gravity-theme input[type="url"] {
	width: 100%;
	padding: var(--form-elements-padding-y) var(--form-elements-padding-x);
	border: 1px solid var(--lef-line);
	border-radius: var(--form-elements-border-radius);
	background: var(--tertiary);
	color: var(--black);
	font: inherit;
	font-size: 15px;
	transition: border-color .2s, box-shadow .2s;
}

body .gform_wrapper.gravity-theme .gfield_description_inline {
	color: var(--lef-muted);
	font-weight: 400;
}

body .gform_wrapper.gravity-theme .gfield--pills .gfield_checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body .gform_wrapper.gravity-theme .gfield--pills .gfield_checkbox .gchoice label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* a checked checkbox pill shows a small tick */
body .gform_wrapper.gravity-theme .gfield--pills .gfield_checkbox .gfield-choice-input:checked + label::before {
	content: "";
	width: 8px;
	height: 4px;
	margin-top: -3px;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(-45deg);
}

/* "Dit checken we": the three check points (service-card-small look) with a short check list */
body .service-card.check-point .icons-list {
	display: grid;
	gap: 8px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--lef-line);
}

body .service-card.check-point .icons-list li {
	align-items: flex-start;
	color: var(--black);
	font-size: 15px;
	line-height: 1.5;
}

body .service-card.check-point .icons-list li .icon {
	margin: 4px 10px 0 0;
	color: var(--primary);
	font-size: 12px;
}



/* Kennisbank: "Let op" notice = grey notice block with extra class "notice-letop". The theme template glues the extra
   class to the colour class ("notice-letopbg-gray"), hence the attribute selector. */
body .block-notice[class*="notice-letop"] {
	border-left: 3px solid var(--primary);
}

/* SEARCH DROPDOWN (theme component search-dropdown, e.g. [lef_kb_search] in the kennisbank hero) */
/* the hero clips its floating photos (overflow: clip); clip only sideways so the results can drop below it */
body section.lef-section:has([data-component="search-dropdown"]) {
	position: relative;
	z-index: 5; /* above the next section, so the open results lie over it */
	overflow-x: clip;
	overflow-y: visible;
}

body section.lef-section:has([data-component="search-dropdown"]) .search-dropdown {
	z-index: 20;
}

#main .search-dropdown__item a:not(.btn):not(.button),
#main .search-dropdown__item a:not(.btn):not(.button):hover {
	text-decoration: none;
}

/* lef-new/sticky-cta: floating contact card on the service pages (inc/chrome.php, js/sticky-cta.js). Desktop only:
   on smaller screens the WhatsApp button stays as it is. */
.lef-sticky-cta {
	display: none;
}

@media (min-width: 992px) {
	/* the card takes over from the loose WhatsApp button */
	body.has-sticky-cta .whatsapp-button {
		display: none;
	}

	.lef-sticky-cta {
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 90;
		display: flex;
		align-items: flex-end;
		gap: 10px;
		opacity: 0;
		pointer-events: none;
		transform: translateY(16px);
		transition: opacity .35s var(--lef-ease), transform .45s var(--lef-ease);
	}

	.lef-sticky-cta.is-visible {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	.lef-sticky-cta__card {
		position: relative;
		order: -1;
		width: 280px;
		padding: 18px 20px 20px;
		border: 1px solid var(--lef-line);
		border-radius: calc(var(--general-border-radius) * 2);
		background: rgba(var(--white-rgb), .9);
		-webkit-backdrop-filter: blur(14px) saturate(160%);
		backdrop-filter: blur(14px) saturate(160%);
		box-shadow: var(--lef-shadow-float);
		transform-origin: bottom right;
		transition: opacity .25s, transform .35s var(--lef-ease);
	}

	.lef-sticky-cta.is-collapsed .lef-sticky-cta__card {
		opacity: 0;
		pointer-events: none;
		transform: scale(.9) translateY(8px);
	}

	.lef-sticky-cta__close {
		position: absolute;
		top: 10px;
		right: 10px;
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--lef-muted);
		cursor: pointer;
	}

	.lef-sticky-cta__close:hover {
		background: var(--gray);
		color: var(--black);
	}

	.lef-sticky-cta__close .icon {
		margin: 0;
		font-size: 13px;
	}

	.lef-sticky-cta__who {
		display: grid;
		margin: 0 0 10px;
		font-size: 14px;
		line-height: 1.4;
	}

	.lef-sticky-cta__who span {
		color: var(--lef-muted);
		font-size: 13px;
	}

	.lef-sticky-cta__title {
		margin: 0 0 14px;
		font-family: var(--heading-font);
		font-size: 19px;
		font-weight: 700;
		letter-spacing: -0.01em;
		line-height: 1.25;
	}

	.lef-sticky-cta__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 14px;
	}

	.lef-sticky-cta__actions .btn {
		margin: 0;
	}

	#main ~ * .lef-sticky-cta__wa,
	body .lef-sticky-cta__wa {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--black);
		font-size: 14px;
		font-weight: 500;
		text-decoration: none;
	}

	body .lef-sticky-cta__wa .icon {
		margin: 0;
		color: var(--succes);
		font-size: 18px;
	}

	body .lef-sticky-cta__wa:hover span {
		text-decoration: underline;
	}

	.lef-sticky-cta__bubble {
		position: relative;
		flex: none;
		width: 56px;
		height: 56px;
		padding: 0;
		border: 2px solid var(--white);
		border-radius: 50%;
		background: var(--gray);
		box-shadow: var(--lef-shadow-float);
		cursor: pointer;
		transition: transform .3s var(--lef-ease);
	}

	.lef-sticky-cta__bubble:hover {
		transform: scale(1.05);
	}

	.lef-sticky-cta__bubble img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
	}

	.lef-sticky-cta__dot {
		position: absolute;
		right: 1px;
		bottom: 1px;
		width: 13px;
		height: 13px;
		border: 2px solid var(--white);
		border-radius: 50%;
		background: var(--succes);
	}

	.lef-sticky-cta.is-closed-hours .lef-sticky-cta__dot {
		background: var(--lef-muted);
	}

	.lef-sticky-cta__bubble:focus-visible,
	.lef-sticky-cta__close:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
	.lef-sticky-cta,
	.lef-sticky-cta__card {
		transition: none;
	}
}

/* lef-new/header-search: magnifier in the CTA menu + search panel under the header bar (inc/chrome.php) */
body .main-nav-menu li.lef-search-toggle-item {
	display: flex;
	align-items: center;
}

.lef-search-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--black);
	cursor: pointer;
	transition: background-color .3s, color .3s;
}

.lef-search-toggle:hover,
.lef-search-toggle[aria-expanded="true"] {
	background: var(--gray);
	color: var(--primary);
}

.lef-search-toggle .icon {
	margin: 0;
	font-size: 16px;
}

.lef-search-toggle:focus-visible,
.lef-search-panel__close:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.lef-search-panel {
	position: fixed;
	top: var(--search-top, 96px);
	left: 50%;
	z-index: 1000;
	width: min(640px, calc(100vw - 32px));
	opacity: 0;
	transform: translate(-50%, -8px);
	transition: opacity .2s, transform .3s var(--lef-ease);
}

.lef-search-panel.is-open {
	opacity: 1;
	transform: translate(-50%, 0);
}

.lef-search-panel__inner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border: 1px solid var(--lef-line);
	border-radius: calc(var(--general-border-radius) * 2);
	background: rgba(var(--white-rgb), .92);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	box-shadow: var(--lef-shadow-float);
}

.lef-search-panel .search-dropdown {
	flex: 1;
	max-width: none;
}

.lef-search-panel__close {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--lef-muted);
	cursor: pointer;
}

.lef-search-panel__close:hover {
	background: var(--gray);
	color: var(--black);
}

.lef-search-panel__close .icon {
	margin: 0;
	font-size: 14px;
}

/* mobile menu: the search box as the first item */
body nav.mobile-navigation li.lef-mobile-search {
	padding: 4px 15px 16px; /* in line with the menu items */
}

body nav.mobile-navigation li.lef-mobile-search .search-dropdown {
	max-width: none;
}

@media (prefers-reduced-motion: reduce) {
	.lef-search-panel {
		transition: none;
	}
}

/* js/ajax-pagination.js: the list section while its next page loads */
section.lef-section.is-ajax-loading {
	opacity: .5;
	pointer-events: none;
	transition: opacity .2s;
}