/*
 * Leasechecken overrides.css — keep this file as small as possible.
 *
 * Every rule here is a client lock-out (not editable in Elementor). Before
 * adding a rule:
 *   1. Look for a native Elementor control / atomic style prop that covers it.
 *   2. If genuinely none exists, leave a comment explaining WHY it's unavoidable.
 *
 * Starts minimal. Rules get added only when a section proves a property has no
 * native control (documented per the workflow).
 */

/* -----------------------------------------------------------------------
 * Font smoothing — matches Tailwind's preflight so text visually weighs the
 * same as the NextJS reference. Not a widget setting.
 * `overflow-x: clip` blocks horizontal scroll from the off-screen mobile menu
 * panel's transform; `clip` (not `hidden`) preserves position:sticky on
 * descendants.
 * --------------------------------------------------------------------- */
html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Tailwind `container mx-auto px-4 md:px-6` replicated with real media queries
 * so the content width is correct on the live site AND inside the Elementor
 * editor canvas (atomic breakpoint variants only render per editor preview-mode,
 * which made the editor show the 1280 base on wide screens). The container
 * max-width is a structural design constant — not meant to be edited per-page. */
.lc-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}
@media (min-width: 640px)  { .lc-container { max-width: 640px; } }
@media (min-width: 768px)  { .lc-container { max-width: 768px; padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .lc-container { max-width: 1024px; } }
@media (min-width: 1280px) { .lc-container { max-width: 1280px; } }
@media (min-width: 1536px) { .lc-container { max-width: 1536px; } }

/* -----------------------------------------------------------------------
 * HERO — inline colored word in the H1. Atomic headings allow only `id` on
 * an inline <span> (no class/style survive wp_kses), so the accent word is
 * coloured by id. No native control for a colored run inside one heading.
 * --------------------------------------------------------------------- */
#lc-hero-eur, #lc-hero-eur-m { color: #7D40FF; }

/* HERO — rating stars are filled white (Tailwind `fill-current text-white`).
 * Lucide icons render stroke-only (.lucide forces fill:none); fill them here. */
.lc-hero-stars .elementor-icon svg.lucide { fill: currentColor !important; }

/* Icon-in-circle: the classic Icon widget's wrapper collapses inside an atomic
 * flex box, so its svg overflows off-centre. Force the chain to fill + centre
 * the circle so the glyph lands dead centre. Reusable for any `.lc-icon-circle`. */
.lc-icon-circle .elementor-widget-icon,
.lc-icon-circle .elementor-widget-container,
.lc-icon-circle .elementor-icon-wrapper,
.lc-icon-circle .elementor-icon {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
}
.lc-icon-circle svg { display: block; width: 14px; height: 14px; flex: 0 0 auto; }

/* HERO entrance animations — match framer-motion (mount, above the fold).
 * Atomic widgets expose no native entrance animation, so replicate in CSS.
 * copy col: fadeInLeft (x:-20, 0.5s easeOut) · widget col: fadeInUp (y:20, 0.4s). */
@keyframes lcFadeLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes lcFadeUp   { from { opacity: 0; transform: translateY(20px); }  to { opacity: 1; transform: none; } }
.lc-anim-left { animation: lcFadeLeft 0.5s cubic-bezier(0,0,0.58,1) both; }
.lc-anim-up   { animation: lcFadeUp 0.4s cubic-bezier(0,0,0.58,1) both; }
@media (prefers-reduced-motion: reduce) {
	.lc-anim-left, .lc-anim-up { animation: none; }
}

/* -----------------------------------------------------------------------
 * HERO — card depth (shadow-xl + 1px gray-100 border). Atomic div-block has
 * no box-shadow/border control surface exposed in this build; this mirrors
 * Tailwind `shadow-xl border border-gray-100` exactly.
 * --------------------------------------------------------------------- */
.lc-hero-card {
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
	border: 1px solid #F3F4F6;
}

/* -----------------------------------------------------------------------
 * HERO — decorative background layer (purely cosmetic, not client content):
 * faint dot-grid + two solid purple shapes + a large soft white blur. Atomic
 * has no gradient/blur/rotate control, so the decorative layer is drawn here.
 * --------------------------------------------------------------------- */
.lc-hero-decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.lc-hero-decor::before { /* dot-grid */
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.04;
	background-image: radial-gradient(circle at 2px 2px, black 1px, transparent 0);
	background-size: 40px 40px;
}
/* purple shapes: hidden on mobile, shown ≥768 (NextJS `hidden md:block`).
 * !important + this source order (hide first, show-in-media after) is required:
 * Elementor's `.elementor .e-div-block-base{display:block}` has equal specificity
 * (0,2,0) and loads AFTER overrides.css, so without !important it wins and the
 * shapes leak onto mobile. With both !important, at ≥768 the later media rule wins. */
.lc-hero-decor .lc-shape-sq,
.lc-hero-decor .lc-shape-circle { display: none !important; }
.lc-hero-decor .lc-shape-sq { /* rounded purple square */
	position: absolute; top: 128px; right: 40px;
	width: 96px; height: 96px; background: #7D40FF;
	border-radius: 24px; transform: rotate(12deg); opacity: 0.9;
}
.lc-hero-decor .lc-shape-circle { /* purple circle */
	position: absolute; bottom: -48px; left: 25%;
	width: 128px; height: 128px; background: #7D40FF;
	border-radius: 9999px; opacity: 0.8;
}
@media (min-width: 768px) {
	.lc-hero-decor::after { /* white soft blur, right-center */
		content: "";
		position: absolute;
		top: 50%;
		right: -80px;
		width: 256px;
		height: 256px;
		background: #fff;
		border-radius: 9999px;
		opacity: 0.2;
		filter: blur(40px);
	}
	.lc-hero-decor .lc-shape-sq,
	.lc-hero-decor .lc-shape-circle { display: block !important; }
}

/* ======================================================================
 * HOMEPAGE SECTIONS — reusable utilities + per-section decor.
 * Decorative shapes + shadows + scroll-reveal have no atomic control surface.
 * ==================================================================== */

/* Tailwind box-shadows */
.lc-shadow-sm  { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.lc-shadow-md  { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.lc-shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
.lc-shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
.lc-shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

.lc-border-y { border-top: 1px solid #F3F4F6; border-bottom: 1px solid #F3F4F6; }
.lc-rating svg.lucide { fill: currentColor !important; }
#lc-testi-sep { color: #9CA3AF; font-size: 24px; font-weight: 700; }

/* Scroll-reveal (framer whileInView) — JS toggles .lc-revealed.
 * Scope the initial HIDDEN state to the frontend only: in the Elementor editor
 * (body.elementor-editor-active) the IntersectionObserver doesn't fire, so the
 * elements would stay opacity:0 and look missing. Editor → always visible. */
body:not(.elementor-editor-active) .lc-reveal { opacity: 0; will-change: opacity, transform; }
/* direction classes: lc-rvu (up) / lc-rvl (left). NOTE: do NOT name these lc-up —
 * that collides with the upload-dropzone widget class `.lc-up` and paints a white
 * dashed box + 40px padding over every revealed element (broke HowItWorks cards). */
body:not(.elementor-editor-active) .lc-reveal.lc-rvu { transform: translateY(16px); }
body:not(.elementor-editor-active) .lc-reveal.lc-rvl { transform: translateX(-16px); }
/* The reveal rule MUST carry the same body:not(...) prefix or it's LOWER
 * specificity than the hide rule above and never wins (cards stay hidden). */
body:not(.elementor-editor-active) .lc-reveal.lc-revealed {
	opacity: 1; transform: none;
	transition: opacity .45s cubic-bezier(0,0,0.58,1), transform .45s cubic-bezier(0,0,0.58,1);
}
body:not(.elementor-editor-active) .lc-reveal.lc-d1.lc-revealed { transition-delay: .1s; }
body:not(.elementor-editor-active) .lc-reveal.lc-d2.lc-revealed { transition-delay: .2s; }
body:not(.elementor-editor-active) .lc-reveal.lc-d3.lc-revealed { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .lc-reveal { opacity: 1 !important; transform: none !important; } }

/* Partner logos — grayscale, dim, colour on hover */
img.lc-partner-logo { max-height: 48px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
img.lc-partner-logo:hover { filter: none; opacity: 1; }

/* ---- Decorative layers (rounded squares / circles / soft blurs) ---- */
.lc-finalcta-decor-layer, .lc-testi-decor-layer, .lc-vw-decor-layer,
.lc-hwc-decor-layer, .lc-ct-decor-layer, .lc-hiw-decor-layer, .lc-faq-decor-layer, .lc-ou-decor-layer {
	position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.lc-finalcta-decor-layer::before { content:""; position:absolute; top:40px; right:40px; width:128px; height:128px; background:#F1A348; border-radius:24px; transform:rotate(12deg); opacity:.9; }
.lc-finalcta-decor-layer::after  { content:""; position:absolute; bottom:-40px; left:-40px; width:160px; height:160px; background:#F1A348; border-radius:9999px; opacity:.9; }

.lc-testi-decor-layer::before { content:""; position:absolute; top:40px; left:40px; width:96px; height:96px; background:#7D40FF; border-radius:24px; transform:rotate(12deg); }
.lc-testi-decor-layer::after  { content:""; position:absolute; bottom:-40px; right:40px; width:160px; height:160px; background:#fff; border-radius:9999px; opacity:.3; }

.lc-vw-decor-layer::before { content:""; position:absolute; top:40px; right:40px; width:128px; height:128px; background:#fff; border-radius:9999px; opacity:.2; }
.lc-vw-decor-layer::after  { content:""; position:absolute; bottom:-24px; left:40px; width:96px; height:96px; background:#F1A348; border-radius:24px; transform:rotate(12deg); }

/* ---- VoorWie image cards (media + gradient + content layering) ----
 * The card's children are all absolutely positioned, so Elementor treats the
 * card as an EMPTY atomic container and adds a dashed placeholder border +
 * centered text on the frontend. Kill both, and left-align the content. */
/* Definite height (not min-height) so the img's height:100% resolves — an <img>
 * is a replaced element, so inset:0 alone won't stretch it; it needs height:100%
 * against a definite parent height or it keeps its tall intrinsic height and
 * crops from the top. */
.lc-vw-card { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); border: 0 !important; text-align: left; height: 380px; }
img.lc-vw-card__media { position: absolute; inset: 0; z-index: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; transition: transform .5s ease; }
.lc-vw-card:hover img.lc-vw-card__media { transform: scale(1.05); }
.lc-vw-card .lc-vw-card__content { position: absolute; left:0; right:0; bottom:0; z-index:2; padding: 24px; text-align: left; }

/* ComparisonTable decor + highlighted column + cell borders */
.lc-ct-decor-layer::before { content:""; position:absolute; top:40px; right:40px; width:96px; height:96px; background:#F1A348; border-radius:24px; transform:rotate(12deg); opacity:.8; }
.lc-ct-decor-layer::after  { content:""; position:absolute; bottom:-24px; left:-24px; width:128px; height:128px; background:#F1A348; border-radius:9999px; opacity:.8; }
@media (max-width:767px){ .lc-ct-decor-layer::before,.lc-ct-decor-layer::after{ display:none; } }
/* ── lc-compare-table custom widget (desktop table + mobile cards) ── */
.elementor-widget-lc-compare-table { padding:0 !important; width:100%; }
.lc-cmp { width:100%; }
.lc-cmp-ic { display:inline-block; vertical-align:middle; }
.lc-cmp-ic-green { color:#22C55E; }
.lc-cmp-ic-red   { color:#EF4444; width:20px; height:20px; }
.lc-cmp-ic-purple{ color:#7D40FF; width:24px; height:24px; }

/* desktop table */
.lc-cmp-desktop { display:none; }
@media (min-width:768px){ .lc-cmp-desktop { display:block; max-width:1024px; margin:0 auto; background:#fff; border-radius:24px; padding:40px; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); } }
.lc-cmp-table { width:100%; text-align:left; border-collapse:collapse; }
.lc-cmp-th { padding:16px; border-bottom:1px solid #E5E7EB; text-align:center; font-weight:700; color:#6B7280; font-size:16px; }
.lc-cmp-th-feature { width:33%; border-bottom:1px solid #E5E7EB; }
.lc-cmp-th-hl { position:relative; background:#F1A348; color:#fff; border:2px solid #F1A348; border-bottom:0; border-top-left-radius:12px; border-top-right-radius:12px; }
.lc-cmp-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:#F1A348; color:#fff; font-size:12px; font-weight:700; padding:4px 16px; border-radius:9999px; text-transform:uppercase; letter-spacing:1.2px; white-space:nowrap; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.lc-cmp-brand { font-size:20px; font-weight:700; color:#fff; }
.lc-cmp-td { padding:16px; border-bottom:1px solid #E5E7EB; }
.lc-cmp-center { text-align:center; }
.lc-cmp-feature { font-weight:600; color:#111827; }
.lc-cmp-txt { font-size:16px; color:#6B7280; }
.lc-cmp-txt-hl { font-size:16px; font-weight:600; color:#111827; }
.lc-cmp-cell-hl { background:#FFF7ED; border-left:2px solid #F1A348; border-right:2px solid #F1A348; }
.lc-cmp-td-empty { padding:16px; }
.lc-cmp-foot { padding:16px; text-align:center; border-left:2px solid #F1A348; border-right:2px solid #F1A348; border-bottom:2px solid #F1A348; border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
.lc-cmp-btn { display:flex; align-items:center; justify-content:center; width:100%; height:56px; background:#7D40FF; color:#fff; font-weight:700; font-size:18px; border-radius:9999px; text-decoration:none; transition:background .2s; }
.lc-cmp-btn:hover { background:#6d34e6; color:#fff; }

/* mobile cards */
.lc-cmp-mobile { display:block; }
@media (min-width:768px){ .lc-cmp-mobile { display:none; } }
.lc-cmp-m-head { display:flex; gap:12px; padding:0 4px; margin-bottom:16px; }
.lc-cmp-m-head-col { flex:1; text-align:center; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:rgba(255,255,255,.7); line-height:1.2; }
.lc-cmp-m-badge { display:inline-block; background:#F1A348; color:#fff; font-size:10px; font-weight:700; padding:2px 10px; border-radius:9999px; letter-spacing:0; }
.lc-cmp-m-card { background:#fff; border-radius:16px; padding:16px; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); margin-bottom:16px; }
.lc-cmp-m-feature { font-size:14px; font-weight:700; color:#111827; margin-bottom:12px; }
.lc-cmp-m-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lc-cmp-m-cell { background:#F9FAFB; border-radius:12px; padding:12px; display:flex; align-items:center; justify-content:center; min-height:64px; text-align:center; }
.lc-cmp-m-cell-hl { background:#faf5ff; border:2px solid #7D40FF; }
.lc-cmp-m-cell .lc-cmp-txt, .lc-cmp-m-cell .lc-cmp-txt-hl { font-size:14px; }
.lc-cmp-m-btn { display:flex; align-items:center; justify-content:center; width:100%; height:56px; background:#fff; color:#7D40FF; font-weight:700; font-size:16px; border:1px solid #7D40FF; border-radius:9999px; margin-top:24px; box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); text-decoration:none; }

/* HowItWorks decor + step image */
.lc-hiw-decor-layer::before { content:""; position:absolute; top:40px; right:40px; width:96px; height:96px; background:#F1A348; border-radius:24px; transform:rotate(12deg); opacity:.8; }
@media (max-width:767px){ .lc-hiw-decor-layer::before{ display:none; } }
img.lc-hiw-img { width:82%; max-height:300px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 20px 25px rgba(0,0,0,.18)); }
/* card hover: subtle lift + shadow (NextJS hover:shadow-md hover:-translate-y-0.5) */
.lc-hiw-card { border-radius:20px; transition:transform .2s, box-shadow .2s; }
.lc-hiw-card:hover { transform:translateY(-2px); box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); }
/* the card is ALSO .lc-reveal; its `.lc-revealed{transform:none}` rule (0,3,1, body-scoped)
 * out-specifies the plain :hover above, so the lift never applies on the frontend.
 * Match that specificity (+:hover) so the hover transform wins on revealed cards. */
body:not(.elementor-editor-active) .lc-hiw-card.lc-revealed:hover { transform:translateY(-2px); }
/* …and override the reveal's .45s transform transition so the HOVER lift is snappy
 * (.2s, NextJS duration-200); keep the opacity fade at .45s for the entrance. */
body:not(.elementor-editor-active) .lc-hiw-card.lc-revealed { transition:opacity .45s cubic-bezier(0,0,0.58,1), transform .2s ease, box-shadow .2s ease; }
/* the colored step bar is w-1 (4px); atomic .e-div-block-base{min-width:30px} forces
 * it to 30px, so override min-width (the e-div-block-base rule is 0,2,0 and wins
 * over the atomic per-element style — needs !important here). */
.lc-hiw-bar { min-width:4px !important; width:4px !important; padding:0 !important; }

/* FAQ decor + accordion polish */
.lc-faq-decor-layer::before { content:""; position:absolute; top:40px; right:40px; width:96px; height:96px; background:#F1A348; border-radius:24px; transform:rotate(12deg); opacity:.8; }
@media (max-width:767px){ .lc-faq-decor-layer::before{ display:none; } }
/* lc-faq-accordion custom widget — minimal shadcn-style accordion */
.elementor-widget-lc-faq-accordion { padding:0 !important; width:100%; }
.lc-acc { width:100%; }
.lc-acc__item { border-bottom:1px solid #E5E7EB; }
.lc-acc__trigger { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:24px 0; margin:0; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; }
.lc-acc__q { font-size:18px; font-weight:700; color:#111827; line-height:1.4; transition:color .2s; }
.lc-acc__trigger:hover .lc-acc__q { color:#F1A348; }
.lc-acc__chev { flex:0 0 auto; color:#6B7280; transition:transform .25s ease; }
.lc-acc__trigger[aria-expanded="true"] .lc-acc__chev { transform:rotate(180deg); }
.lc-acc__content { overflow:hidden; height:0; transition:height .25s ease; }
.lc-acc__inner { padding:0 0 24px; color:#6B7280; font-size:16px; line-height:1.6; }
/* editor: show content (no JS toggle there) so it's not all collapsed-empty */
body.elementor-editor-active .lc-acc__content { height:auto !important; }

/* LC Calculator widget */
.lc-calc { background:#fff; border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.08); padding:32px; border:1px solid #F3F4F6; max-width:448px; margin:0 auto; }
.lc-calc__eyebrow { font-size:12px; font-weight:700; color:#F1A348; text-transform:uppercase; letter-spacing:1.2px; margin-bottom:12px; }
.lc-calc__heading { font-size:24px; font-weight:700; color:#111827; line-height:1.2; margin:0 0 8px; }
.lc-calc__sub { font-size:14px; color:#4B5563; margin:0 0 24px; line-height:1.5; }
.lc-calc__row { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:8px; }
.lc-calc__sliderlabel { font-size:14px; font-weight:600; color:#374151; }
.lc-calc__value { font-size:24px; font-weight:800; color:#111827; }
.lc-calc__slider { width:100%; accent-color:#7D40FF; margin:8px 0; }
.lc-calc__minmax { display:flex; justify-content:space-between; font-size:12px; color:#6B7280; font-weight:600; margin-bottom:24px; }
.lc-calc__result { background:#7D40FF; color:#fff; padding:24px; border-radius:12px; text-align:center; margin-bottom:16px; }
.lc-calc__resultlabel { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.8); margin-bottom:8px; }
.lc-calc__resultvalue { font-size:36px; font-weight:800; letter-spacing:-1px; }
.lc-calc__btn { display:block; text-align:center; background:#F1A348; color:#fff; font-weight:700; height:48px; line-height:48px; border-radius:9999px; text-decoration:none; }

/* LC Upload widget */
.lc-upwrap { width:100%; }
.lc-up { background:#fff; border-radius:16px; box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); padding:40px; border:2px dashed #E5E7EB; cursor:pointer; transition:border-color .2s, background .2s; text-align:center; }
.lc-up:hover { border-color:rgba(125,64,255,.5); }
.lc-up.is-drag { border-color:#7D40FF; background:rgba(125,64,255,.05); }
.lc-up__icon { width:64px; height:64px; border-radius:16px; background:rgba(125,64,255,.1); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.lc-up__icon--green { background:#DCFCE7; }
.lc-up__title { font-size:18px; font-weight:700; color:#111827; margin:0 0 8px; }
.lc-up__sub { font-size:14px; color:#6B7280; margin:0 0 20px; }
.lc-up__formats { display:flex; justify-content:center; gap:8px; }
.lc-up__formats span { background:#F3F4F6; color:#9CA3AF; font-size:12px; font-weight:500; padding:4px 8px; border-radius:6px; }
.lc-up__filename { font-size:18px; font-weight:700; color:#111827; margin:0 0 4px; }
.lc-up__submit { display:inline-block; background:#7D40FF; color:#fff; font-weight:700; height:48px; line-height:48px; padding:0 32px; border-radius:9999px; text-decoration:none; margin-top:8px; }
.lc-up__reset { display:block; margin:12px auto 0; background:none; border:none; color:#9CA3AF; font-size:12px; text-decoration:underline; cursor:pointer; }
.lc-up__note { text-align:center; font-size:12px; color:rgba(17,24,39,.5); font-weight:500; margin-top:16px; }

/* HowWeCompare + OfferteUpload decor */
.lc-hwc-decor-layer::before { content:""; position:absolute; top:40px; right:40px; width:80px; height:80px; background:#F1A348; border-radius:24px; transform:rotate(12deg); opacity:.9; }
.lc-ou-decor-layer::before { content:""; position:absolute; top:-40px; right:-40px; width:192px; height:192px; background:#7D40FF; border-radius:9999px; opacity:.3; filter:blur(40px); }
.lc-ou-decor-layer::after  { content:""; position:absolute; bottom:40px; left:40px; width:128px; height:128px; background:#fff; border-radius:24px; transform:rotate(12deg); opacity:.2; }

/* OfferteUpload inline highlight word */
#lc-ou-hl { color: #fff; font-weight: 700; }

/* ======================================================================
 * DECOR SHAPES — real child divs (Elementor owns ::before/::after on its
 * atomic .e-con elements, so pseudo-element decorations silently don't render).
 * Composable utilities, scoped under .lc-dl for specificity over .e-con. */
.lc-dl { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.lc-dl .lc-shape { position:absolute; }
.lc-dl .lc-sq { border-radius:24px; }
.lc-dl .lc-ci { border-radius:9999px; }
.lc-dl .lc-c-orange { background:#F1A348; }
.lc-dl .lc-c-purple { background:#7D40FF; }
.lc-dl .lc-c-white  { background:#fff; }
.lc-dl .lc-s80 {width:80px;height:80px} .lc-dl .lc-s96 {width:96px;height:96px}
.lc-dl .lc-s128{width:128px;height:128px} .lc-dl .lc-s160{width:160px;height:160px} .lc-dl .lc-s192{width:192px;height:192px}
.lc-dl .lc-rot { transform:rotate(12deg); }
.lc-dl .lc-op2{opacity:.2} .lc-dl .lc-op3{opacity:.3} .lc-dl .lc-op8{opacity:.8} .lc-dl .lc-op9{opacity:.9}
.lc-dl .lc-blur{filter:blur(40px)}
.lc-dl .lc-t10{top:40px} .lc-dl .lc-tn10{top:-40px}
.lc-dl .lc-r10{right:40px} .lc-dl .lc-rn10{right:-40px}
.lc-dl .lc-l10{left:40px} .lc-dl .lc-ln10{left:-40px} .lc-dl .lc-ln6{left:-24px}
.lc-dl .lc-b10{bottom:40px} .lc-dl .lc-bn6{bottom:-24px} .lc-dl .lc-bn10{bottom:-40px}
@media(max-width:767px){ .lc-dl .lc-md{display:none} }

/* VoorWie card gradient overlay — real div (orange→black, bottom→top) */
.lc-vw-card .lc-vw-card__overlay { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(241,163,72,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%); }
.lc-vw-card .lc-vw-card__content { z-index:2 !important; }

/* LC Audience Card (VoorWie) — custom widget; absolute layering inside the
 * widget's own HTML works in BOTH the editor and the frontend. */
.lc-ac { position:relative; display:block; border-radius:16px; overflow:hidden; min-height:380px; height:380px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25); text-decoration:none; text-align:left; }
/* height:100% needs !important — Elementor's global img rule sets height:auto, so
 * otherwise the img keeps its tall intrinsic height (562) and crops from the top. */
.lc-ac__img { position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; object-position:center; transition:transform .5s ease; z-index:0; }
.lc-ac:hover .lc-ac__img { transform:scale(1.05); }
.lc-ac__grad { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(241,163,72,.9) 0%, rgba(0,0,0,.4) 50%, rgba(0,0,0,.1) 100%); }
.lc-ac__body { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.lc-ac__title { color:#fff; font-size:20px; font-weight:700; line-height:26px; margin:0 0 8px; }
.lc-ac__desc { color:rgba(255,255,255,.9); font-size:14px; line-height:22px; margin:0 0 16px; }
.lc-ac__link { display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:700; font-size:14px; }
.lc-ac__link svg { width:16px; height:16px; }
.lc-ac:hover .lc-ac__link { gap:12px; transition:gap .2s ease; }

/* lc-audience-card widget wrapper: kill the grid-context 40px padding AND the
 * empty-container placeholder (2px dashed border + text-align:center, which the
 * card description was inheriting). */
.elementor-widget-lc-audience-card { padding: 0 !important; border: 0 !important; text-align: left; }

/* ======================================================================
 * RESPONSIVE (Tailwind breakpoints: sm 640, md 768, lg 1024).
 * Overrides the desktop atomic styles via real media queries (!important to
 * beat the per-element .e-<id> atomic rules).
 * ==================================================================== */

/* Section headings — text-4xl on mobile, md:text-6xl/5xl desktop (atomic value kept) */
@media (max-width: 767px) {
	.lc-section-h2 { font-size: 36px !important; line-height: 40px !important; letter-spacing: -0.9px !important; }
}

/* HERO — stack to one column < lg; hide desktop copy; show mobile headline block */
@media (max-width: 1023px) {
	.lc-hero-row { flex-direction: column !important; gap: 24px !important; }
	.lc-hero-copy { display: none !important; }
	.lc-hero-widget { width: 100% !important; flex: 0 0 auto !important; justify-content: center !important; }
}
/* !important: .lc-hero-mobile (0,1,0) otherwise loses to Elementor's
 * `.elementor .e-div-block-base{display:block}` (0,2,0) and leaks onto desktop. */
.lc-hero-mobile { display: none !important; }
@media (max-width: 1023px) { .lc-hero-mobile { display: block !important; } }
@media (max-width: 767px)  { .lc-hero-section { padding-top: 96px !important; padding-bottom: 24px !important; } }

/* PARTNERS — lg 7-col grid (base) → md 4-col → mobile horizontal scroll */
@media (max-width: 1023px) {
	.lc-partners-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
	.lc-partners-grid { display: flex !important; overflow-x: auto !important; gap: 24px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
	/* width:auto + min-width:0 cancel the atomic flexbox default (width:100% basis),
	 * so each cell shrinks to its logo instead of filling the viewport (only 1 shows). */
	.lc-partners-grid > * { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; scroll-snap-align: start; padding: 0 8px; }
	/* shrink logos to ~max-h-9 (NextJS mobile) so 2–3 fit at once like the source */
	.lc-partners-grid img.lc-partner-logo { max-height: 36px !important; max-width: none !important; }
}

/* VOORWIE — 3-col grid (base) → mobile 1-col stack */
@media (max-width: 767px) { .lc-vw-grid { grid-template-columns: 1fr !important; } }

/* FINALCTA trust bullets — hidden < sm (640), shown ≥640 (NextJS `hidden sm:inline`).
 * !important + base-hidden-first beats Elementor's `.elementor .e-paragraph-base`
 * default display, same trap as the e-div-block-base show/hide issue. */
.lc-bullet-sep { display: none !important; }
@media (min-width: 640px) { .lc-bullet-sep { display: block !important; } }

/* HowWeCompare / OfferteUpload — 2-col rows stack < lg (NextJS `lg:grid-cols-2`).
 * Reset the flex:1 children to full-width auto so they don't share height in column. */
@media (max-width: 1023px) {
	.lc-stack-lg { flex-direction: column !important; gap: 40px !important; align-items: stretch !important; }
	.lc-stack-lg > * { flex: 0 0 auto !important; width: 100% !important; }
}
/* Testimonials 3-col grid → 1-col < md (NextJS `md:grid-cols-3`) */
@media (max-width: 767px) { .lc-grid-3 { grid-template-columns: 1fr !important; } }
/* HowItWorks 4-col grid → 1-col stack < md (NextJS shows a swiper there) */
@media (max-width: 767px) { .lc-grid-4 { grid-template-columns: 1fr !important; } }

/* ======================================================================
 * LC HEADER (Theme Builder header template) — NextJS Navbar.tsx
 * ==================================================================== */
.lc-hdr { position:fixed; top:0; left:0; right:0; z-index:50; background:#fff; padding:24px 0; transition:background .3s, box-shadow .3s, padding .3s; }
.lc-hdr.is-scrolled { background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 2px rgba(0,0,0,.05); padding:16px 0; }
.lc-hdr__inner { display:flex; align-items:center; justify-content:space-between; }
.lc-hdr__logo { display:inline-flex; align-items:center; }
/* !important: global `.elementor img{height:auto}` (0,1,1) ties this and wins on
 * source order, blowing the logo up to its natural height. */
.lc-hdr__logo img { height:44px !important; width:auto; display:block; }

/* desktop nav */
.lc-hdr__nav { display:none; }
.lc-hdr__cta { display:none; }
@media (min-width:1024px){
	.lc-hdr__nav { display:flex; align-items:center; gap:32px; }
	.lc-hdr__cta { display:inline-flex; align-items:center; justify-content:center; }
	.lc-hdr__toggle { display:none; }
}
.lc-hdr__item { position:relative; }
.lc-hdr__trigger, .lc-hdr__link { display:flex; align-items:center; gap:4px; font-size:16px; font-weight:500; color:#0E0C0C; cursor:pointer; padding:8px 0; transition:color .2s; text-decoration:none; white-space:nowrap; }
.lc-hdr__trigger:hover, .lc-hdr__link:hover { color:#F1A348; }
.lc-hdr__chev { flex:0 0 auto; }
.lc-hdr__dropdown { position:absolute; top:100%; left:0; padding-top:8px; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .2s, visibility .2s, transform .2s; z-index:50; }
.lc-hdr__item:hover .lc-hdr__dropdown { opacity:1; visibility:visible; transform:none; }
.lc-hdr__dropdown-inner { background:#fff; box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); border-radius:12px; border:1px solid #F3F4F6; padding:12px 0; min-width:260px; }
.lc-hdr__drop-link { display:block; padding:10px 20px; font-size:14px; font-weight:500; color:#374151; text-decoration:none; transition:background .15s, color .15s; }
.lc-hdr__drop-link:hover { background:#FFF7ED; color:#F1A348; }
.lc-hdr__cta { border-radius:9999px; background:#7D40FF; color:#fff; padding:0 32px; height:48px; font-size:16px; font-weight:700; box-shadow:0 4px 6px -1px rgba(0,0,0,.1); text-decoration:none; transition:background .2s; white-space:nowrap; }
.lc-hdr__cta:hover { background:#6d34e6; color:#fff; }

/* mobile toggle + panel — display only < lg (the ≥1024 hide above loses on
 * source order otherwise, so the hamburger would leak onto desktop). */
.lc-hdr__toggle { align-items:center; justify-content:center; padding:8px; background:none; border:0; color:#0E0C0C; cursor:pointer; }
@media (max-width:1023px){ .lc-hdr__toggle { display:inline-flex; } }
.lc-hdr__icon-x { display:none; }
.lc-hdr.is-open .lc-hdr__icon-menu { display:none; }
.lc-hdr.is-open .lc-hdr__icon-x { display:block; }
.lc-hdr__mobile { display:none; background:#fff; border-top:1px solid #E5E7EB; max-height:calc(100vh - 60px); overflow-y:auto; }
.lc-hdr.is-open .lc-hdr__mobile { display:block; }
@media (min-width:1024px){ .lc-hdr.is-open .lc-hdr__mobile { display:none; } }
.lc-hdr__mobile-inner { display:flex; flex-direction:column; padding:16px; }
.lc-hdr__m-group { border-bottom:1px solid #F3F4F6; }
.lc-hdr__m-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; padding:16px 0; background:none; border:0; font-family:inherit; font-size:16px; font-weight:600; color:#111827; cursor:pointer; }
.lc-hdr__m-trigger .lc-hdr__chev { transition:transform .2s; }
.lc-hdr__m-group.is-open .lc-hdr__m-trigger .lc-hdr__chev { transform:rotate(180deg); }
.lc-hdr__m-sub { overflow:hidden; max-height:0; transition:max-height .25s ease; display:flex; flex-direction:column; padding-left:12px; }
.lc-hdr__m-group.is-open .lc-hdr__m-sub { max-height:520px; }
.lc-hdr__m-sub a { padding:10px 0; font-size:14px; color:#4B5563; text-decoration:none; }
.lc-hdr__m-sub a:hover { color:#F1A348; }
.lc-hdr__m-link { padding:16px 0; font-size:16px; font-weight:600; color:#111827; text-decoration:none; border-bottom:1px solid #F3F4F6; }
.lc-hdr__m-cta { display:flex; align-items:center; justify-content:center; margin-top:20px; height:48px; border-radius:9999px; background:#7D40FF; color:#fff; font-weight:700; text-decoration:none; }
@media (max-width:1023px){ .lc-hdr__logo img { height:28px !important; } .lc-hdr { padding:12px 0; } .lc-hdr.is-scrolled { padding:8px 0; } }

/* ======================================================================
 * LC FOOTER (Theme Builder footer template) — NextJS Footer.tsx
 * ==================================================================== */
/* The footer widget is a flex item in the TB template's container and only sizes
 * to ~half width; force it (and the footer) to fill so the orange bg is full-bleed. */
.elementor-widget-lc-footer { width:100%; }
.lc-ftr { width:100%; background:#F1A348; color:#fff; padding:64px 0 32px; }
.lc-ftr__news { display:flex; flex-direction:column; gap:24px; align-items:center; justify-content:space-between; background:rgba(255,255,255,.15); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border-radius:16px; padding:32px; margin-bottom:56px; }
.lc-ftr__news-title { font-size:20px; font-weight:700; color:#fff; margin:0 0 4px; }
.lc-ftr__news-sub { font-size:14px; color:rgba(255,255,255,.8); margin:0; }
.lc-ftr__news-form { display:flex; gap:8px; width:100%; }
.lc-ftr__news-input { height:44px; flex:1; min-width:0; background:#fff; color:#111827; border:0; border-radius:8px; padding:0 14px; font-size:14px; }
.lc-ftr__news-input::placeholder { color:#9CA3AF; }
.lc-ftr__news-btn { height:44px; padding:0 24px; background:#7D40FF; color:#fff; font-weight:700; font-family:inherit; border:0; border-radius:8px; cursor:pointer; flex:0 0 auto; }
.lc-ftr__news-btn:hover { background:#6d34e6; }
@media (min-width:768px){
	.lc-ftr__news { flex-direction:row; }
	.lc-ftr__news-form { width:auto; }
	.lc-ftr__news-input { min-width:220px; }
}

.lc-ftr__cols { display:grid; grid-template-columns:repeat(2,1fr); gap:48px 32px; margin-bottom:64px; }
@media (min-width:768px){ .lc-ftr__cols { grid-template-columns:repeat(5,1fr); } }
.lc-ftr__brand { grid-column:span 2; }
@media (min-width:768px){ .lc-ftr__brand { grid-column:span 1; } }
.lc-ftr__logo-link { display:inline-block; margin-bottom:24px; }
.lc-ftr__logo { height:40px !important; width:auto; filter:brightness(0); }
.lc-ftr__brand-text { font-size:14px; line-height:1.6; color:rgba(255,255,255,.8); max-width:20rem; margin:0; }
.lc-ftr__social { display:flex; gap:12px; margin-top:20px; }
.lc-ftr__social a { width:32px; height:32px; border-radius:9999px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; transition:background .2s; color:#fff; }
.lc-ftr__social a:hover { background:rgba(255,255,255,.3); }
.lc-ftr__social svg { width:16px; height:16px; fill:#fff; }
.lc-ftr__col-title { font-size:16px; font-weight:700; color:#fff; margin:0 0 20px; }
.lc-ftr__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.lc-ftr__list a { font-size:14px; color:rgba(255,255,255,.8); text-decoration:none; transition:color .2s; }
.lc-ftr__list a:hover { color:#fff; }
.lc-ftr__address { font-size:14px; color:rgba(255,255,255,.8); line-height:1.6; padding-top:4px; }
.lc-ftr__contact-link { font-weight:700; }

.lc-ftr__badges { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.2); }
.lc-ftr__badge { background:rgba(255,255,255,.2); border-radius:8px; padding:8px 16px; font-size:12px; font-weight:700; color:#fff; }

.lc-ftr__bottom { display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:16px; font-size:12px; color:rgba(255,255,255,.6); }
.lc-ftr__legal { display:flex; flex-wrap:wrap; gap:20px; }
.lc-ftr__legal a { color:rgba(255,255,255,.6); text-decoration:none; transition:color .2s; }
.lc-ftr__legal a:hover { color:#fff; }
@media (min-width:768px){ .lc-ftr__bottom { flex-direction:row; } }

/* ======================================================================
 * CONTENT PAGES (data/pages.ts) — PageHero + prose + CTA band
 * ==================================================================== */
.lc-page-hero { padding-top:160px; padding-bottom:80px; }
@media (max-width:767px){ .lc-page-hero { padding-top:112px !important; padding-bottom:48px !important; } }
.lc-page-decor { pointer-events:none; }
.lc-page-dots { position:absolute; inset:0; opacity:.04; background-image:radial-gradient(circle at 2px 2px, black 1px, transparent 0); background-size:40px 40px; }
.lc-page-blur { position:absolute; bottom:-64px; width:160px; height:160px; border-radius:9999px; filter:blur(40px); }
.lc-page-blur--purple { right:25%; background:#7D40FF; opacity:.3; }
.lc-page-blur--orange { left:25%; background:#F1A348; opacity:.4; }
@media (max-width:767px){ .lc-page-blur { display:none; } }
/* prose icon cards: 2-col → 1-col on mobile (NextJS sm:grid-cols-2) */
@media (max-width:639px){ .lc-cp-cards { grid-template-columns:1fr !important; } }
.lc-cp-card { border:1px solid #FFEDD5; transition:box-shadow .2s; }
.lc-cp-card:hover { box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); }
/* CTA band heading scales down on mobile */
@media (max-width:767px){ .lc-page-hero .lc-container h1 { font-size:36px !important; line-height:40px !important; } }

/* ======================================================================
 * BLOG — single post (lc-post) + listing grid (lc-blog-grid)
 * ==================================================================== */
.elementor-widget-lc-post { padding:0 !important; width:100%; }
.elementor-widget-lc-blog-grid { padding:0 !important; width:100%; }

/* full-bleed coloured sections (html{overflow-x:clip} guards scroll) */
.lc-post__hero, .lc-post__related { width:100vw; margin-left:calc(50% - 50vw); }

/* extra bottom padding: the featured image overlaps the hero by 40px (-mt), so
 * the visible gap between the excerpt and the image needs more room. */
.lc-post__hero { position:relative; background:#F1A348; padding:144px 0 96px; overflow:hidden; }
.lc-post__dots { position:absolute; inset:0; opacity:.04; background-image:radial-gradient(circle at 2px 2px, black 1px, transparent 0); background-size:40px 40px; }
.lc-post__hero-inner { position:relative; z-index:1; }
.lc-post__back { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:rgba(255,255,255,.85); text-decoration:none; margin-bottom:20px; transition:color .2s; }
.lc-post__back:hover { color:#fff; }
.lc-post__head { max-width:768px; }
.lc-post__meta { display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:12px; }
.lc-post__cat { background:#7D40FF; color:#fff; font-weight:700; padding:6px 12px; border-radius:9999px; text-transform:uppercase; letter-spacing:.06em; }
.lc-post__date { display:inline-flex; align-items:center; gap:4px; color:rgba(17,24,39,.7); font-weight:500; }
.lc-post__title { font-size:48px; line-height:1.15; font-weight:700; color:#111827; letter-spacing:-.5px; margin:0 0 20px; }
.lc-post__excerpt { font-size:18px; line-height:1.6; color:rgba(17,24,39,.8); margin:0; }

.lc-post__imgwrap { margin-top:-40px; position:relative; z-index:5; }
.lc-post__img { max-width:896px; margin:0 auto; aspect-ratio:16/8; border-radius:16px; overflow:hidden; box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); background:#f3f4f6; }
.lc-post__img img { width:100%; height:100%; object-fit:cover; display:block; }

.lc-post__bodywrap { padding:64px 0; }
.lc-post__content { max-width:768px; margin:0 auto; }
.lc-post__content h2 { font-size:30px; line-height:1.25; font-weight:700; color:#111827; margin:40px 0 16px; }
.lc-post__content > h2:first-child { margin-top:0; }
.lc-post__content p { font-size:18px; line-height:1.6; color:#4B5563; margin:0 0 16px; }
.lc-post__content ul { list-style:none; margin:16px 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.lc-post__content ul li { position:relative; padding-left:32px; font-size:18px; line-height:1.5; color:#374151; }
.lc-post__content ul li::before { content:""; position:absolute; left:0; top:3px; width:20px; height:20px; border-radius:9999px; background:#7D40FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }
.lc-post__content ol { margin:16px 0; padding-left:24px; }
.lc-post__content ol li { font-size:18px; line-height:1.5; color:#374151; margin-bottom:12px; padding-left:4px; }
.lc-post__content ol li::marker { color:#F1A348; font-weight:700; }
.lc-post__content h3 { font-size:22px; line-height:1.3; font-weight:700; color:#111827; margin:32px 0 12px; }
.lc-post__content h5 { font-size:18px; font-weight:700; color:#111827; margin:24px 0 8px; }
.lc-post__content a { color:#7D40FF; text-decoration:underline; }
.lc-post__content strong { font-weight:700; color:#111827; }
.lc-post__content code { background:#F3F4F6; padding:2px 6px; border-radius:4px; font-size:.9em; }

.lc-post__related { background:#F9FAFB; padding:64px 0; }
.lc-post__related-title { text-align:center; font-size:30px; font-weight:700; color:#111827; margin:0 0 32px; }
.lc-post__related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; max-width:1024px; margin:0 auto; }
.lc-post__rcard { display:flex; flex-direction:column; background:#fff; border:1px solid #F3F4F6; border-radius:16px; overflow:hidden; text-decoration:none; transition:box-shadow .2s; }
.lc-post__rcard:hover { box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); }
.lc-post__rimg { aspect-ratio:16/10; background:#f3f4f6; overflow:hidden; }
.lc-post__rimg img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.lc-post__rcard:hover .lc-post__rimg img { transform:scale(1.05); }
.lc-post__rbody { padding:20px; }
.lc-post__rcat { font-size:12px; font-weight:700; color:#F1A348; text-transform:uppercase; letter-spacing:.06em; }
.lc-post__rtitle { font-size:16px; font-weight:700; color:#111827; line-height:1.35; margin:8px 0 12px; transition:color .2s; }
.lc-post__rcard:hover .lc-post__rtitle { color:#7D40FF; }
.lc-post__rmore { display:inline-flex; align-items:center; gap:6px; color:#7D40FF; font-weight:700; font-size:14px; }

/* listing grid */
/* single-row horizontal scroll with a visible thin scrollbar. `safe center`
 * centers the row when it fits but falls back to start when it overflows (plain
 * `center` clips the first item and you can't scroll back to it). */
.lc-blog__filters { display:flex; flex-wrap:nowrap; gap:8px; justify-content:safe center; margin-bottom:40px; overflow-x:auto; padding-bottom:10px; scrollbar-width:thin; scrollbar-color:#E0B884 transparent; }
.lc-blog__filters::-webkit-scrollbar { height:7px; }
.lc-blog__filters::-webkit-scrollbar-track { background:transparent; }
.lc-blog__filters::-webkit-scrollbar-thumb { background:#E0B884; border-radius:9999px; }
.lc-blog__filters::-webkit-scrollbar-thumb:hover { background:#d49a55; }
/* font-family:inherit — <button> doesn't inherit the page font, so it falls back
 * to Arial and reads thinner than the Poppins around it. */
.lc-blog__filter { flex:0 0 auto; font-family:inherit; padding:8px 16px; border-radius:9999px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; background:#FFF7ED; color:#374151; border:0; cursor:pointer; transition:background .2s, color .2s; white-space:nowrap; }
.lc-blog__filter:hover { background:#FFEDD5; }
.lc-blog__filter.is-active { background:#7D40FF; color:#fff; box-shadow:0 4px 6px -1px rgba(0,0,0,.1); }
.lc-blog__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.lc-blog__card { display:flex; flex-direction:column; background:#fff; border:1px solid #F3F4F6; border-radius:16px; overflow:hidden; text-decoration:none; transition:box-shadow .2s, transform .2s; }
.lc-blog__card:hover { box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); transform:translateY(-4px); }
.lc-blog__img { aspect-ratio:16/10; background:#f3f4f6; overflow:hidden; }
.lc-blog__img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.lc-blog__card:hover .lc-blog__img img { transform:scale(1.05); }
.lc-blog__body { padding:24px; }
.lc-blog__meta { display:flex; align-items:center; gap:12px; font-size:12px; color:#9CA3AF; margin-bottom:12px; }
.lc-blog__cat { background:#FFF7ED; color:#F1A348; font-weight:700; padding:4px 10px; border-radius:9999px; text-transform:uppercase; letter-spacing:.06em; }
.lc-blog__date { display:inline-flex; align-items:center; gap:4px; }
.lc-blog__title { font-size:18px; font-weight:700; color:#111827; line-height:1.35; margin:0 0 8px; transition:color .2s; }
.lc-blog__card:hover .lc-blog__title { color:#7D40FF; }
.lc-blog__excerpt { font-size:14px; line-height:1.6; color:#6B7280; margin:0 0 16px; }
.lc-blog__more { display:inline-flex; align-items:center; gap:6px; color:#7D40FF; font-weight:700; font-size:14px; }

@media (max-width:1023px){ .lc-blog__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:767px){
	.lc-blog__grid, .lc-post__related-grid { grid-template-columns:1fr; }
	.lc-post__title { font-size:32px; }
	.lc-post__hero { padding:112px 0 64px; }
	.lc-blog__filters { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; }
}

/* ======================================================================
 * STATIC PAGES — partners, vergelijker, contact
 * ==================================================================== */
/* partners cards */
.lc-pp-card { border:1px solid #F3F4F6; transition:box-shadow .2s, transform .2s; }
.lc-pp-card:hover { box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1); transform:translateY(-4px); }
img.lc-pp-logo { max-height:48px !important; max-width:180px; width:auto; object-fit:contain; }
@media (max-width:1023px){ .lc-pp-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:767px){ .lc-pp-grid, .lc-pp-badges { grid-template-columns:1fr !important; } }

/* vergelijker hero */
.lc-vg-hero { position:relative; overflow:hidden; }
/* purple decor shapes (NextJS `hidden md:block`) — square top-right, circle bottom-left.
 * Scoped under .lc-vg-hero (0,2,0) so position/size beat Elementor's `.e-con` (0,1,0). */
.lc-vg-hero .lc-vg-sq, .lc-vg-hero .lc-vg-ci { display:none !important; position:absolute !important; padding:0 !important; z-index:0; }
@media (min-width:768px){ .lc-vg-hero .lc-vg-sq, .lc-vg-hero .lc-vg-ci { display:block !important; } }
.lc-vg-hero .lc-vg-sq { top:128px; right:40px; width:96px !important; min-width:0 !important; height:96px; background:#7D40FF; border-radius:24px; transform:rotate(12deg); opacity:.9; }
.lc-vg-hero .lc-vg-ci { bottom:-48px; left:25%; width:128px !important; min-width:0 !important; height:128px; background:#7D40FF; border-radius:9999px; opacity:.8; }
.lc-embed__frame, .lc-embed { width:100%; }
/* keep the USP labels on one line (NextJS doesn't wrap them) */
.lc-vg-usp { white-space:nowrap; }
.lc-vg-trust { color:#6B7280; }
/* mobile: KEEP the left copy visible (NextJS hides it `lg:block`, but we want the
 * headline + USPs on phones too) — stack copy above the form, scale the h1 down. */
@media (max-width:1023px){
	.lc-vg-left { flex:1 1 100% !important; padding-top:0 !important; }
	.lc-vg-right { flex:1 1 100% !important; }
	.lc-vg-hero { padding-top:112px !important; }
	.lc-vg-hero .lc-container h1 { font-size:36px !important; line-height:40px !important; }
}
@media (max-width:479px){ .lc-vg-usps { grid-template-columns:1fr !important; } }

/* contact */
.lc-ct-left { max-width:none; }
.elementor-widget-lc-contact-form { padding:0 !important; width:100%; }
.lc-cform { width:100%; }
.lc-cform__form { background:#fff; border:1px solid #F3F4F6; border-radius:24px; padding:40px; box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); display:flex; flex-direction:column; gap:20px; }
.lc-cform__title { font-size:30px; font-weight:700; color:#111827; margin:0; }
.lc-cform__sub { font-size:14px; color:#6B7280; margin:-12px 0 4px; }
.lc-cform__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.lc-cform__field { display:flex; flex-direction:column; gap:6px; }
.lc-cform__field > span { font-size:14px; font-weight:600; color:#111827; }
.lc-cform__field input, .lc-cform__field textarea { width:100%; border:1px solid #E5E7EB; border-radius:8px; padding:10px 14px; font-size:15px; font-family:inherit; color:#111827; background:#fff; }
.lc-cform__field input:focus, .lc-cform__field textarea:focus { outline:2px solid #7D40FF; outline-offset:-1px; border-color:#7D40FF; }
.lc-cform__field input::placeholder, .lc-cform__field textarea::placeholder { color:#9CA3AF; }
.lc-cform__btn { align-self:flex-start; height:52px; padding:0 40px; border-radius:9999px; background:#7D40FF; color:#fff; font-weight:700; font-family:inherit; border:0; cursor:pointer; transition:background .2s; }
.lc-cform__btn:hover { background:#6d34e6; }
.lc-cform__success { background:#7D40FF; border-radius:24px; padding:40px; text-align:center; }
.lc-cform__check { width:64px; height:64px; border-radius:9999px; background:#fff; color:#7D40FF; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.lc-cform__success-title { font-size:28px; font-weight:700; color:#fff; margin:0 0 12px; }
.lc-cform__success-text { color:rgba(255,255,255,.85); max-width:28rem; margin:0 auto; }
@media (max-width:767px){ .lc-cform__row { grid-template-columns:1fr; } .lc-cform__form { padding:24px; } }