/* ---------- Fonts ---------- */
@font-face { font-family: "Poppins"; src: url("../../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../../fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../../fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../../fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("../../fonts/raleway-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("../../fonts/raleway-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
	--backgroundColorOrange:#CA4F00;
	--backgroundColorOrangeRGB:202,79,0;
	--backgroundColorBlack:#0F0F0F;
	--backgroundColorBorder:#1A1A1A;
	--textColor:#222222;
	--buttonPrimary:#C24900;
	--buttonPrimaryHover:#CA4F00;
	--buttonHover:#CF6019;
	--buttonText:#FFFFFF;
	--buttonDark:#0F0F0F;
	--buttonLight:#FFFFFF;
	--container-width:1200px;
	--font-body:"Poppins",sans-serif;
	--font-heading:"Raleway",sans-serif;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--textColor); background: #F6F3F0; font-family: var(--font-body); font-size: 18px; line-height: 1.7; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); }
h1,h2,h3,h4 { text-wrap: balance; }
button, input, select, textarea { font-family: var(--font-body); }
a { color: var(--backgroundColorOrange); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display:block; max-width:100%; height:auto; border-radius:6px; }
.site-logo img,.footer-logo img { border-radius:0; }
button,button:hover,button:focus,.button,.button:hover,.button:focus,.header-button,.header-button:hover,.header-button:focus,.footer-cta__button,.footer-cta__button:hover,.footer-cta__button:focus,.home-hero__button,.home-hero__button:hover,.home-hero__button:focus,.services-block__card-link,.services-block__card-link:hover,.services-block__card-link:focus,.services-block__cta-link,.services-block__cta-link:hover,.services-block__cta-link:focus,button *,.button *,.header-button *,.footer-cta__button *,.home-hero__button *,.services-block__card-link *,.services-block__cta-link * { text-decoration: none !important; }

/* ---------- Layout ---------- */
.site-container { width: 100%; max-width: var(--container-width); margin: 0 auto;}
.site-content { width: 100%; }
.content-area { width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 24px; }

/* ---------- Buttons ---------- */
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:52px; padding:0 24px; color:var(--buttonText); border:1px solid transparent; border-radius:5px; font-size:15px; line-height:1; font-weight:600; text-decoration:none; white-space:nowrap; transition:color .3s ease,background-color .3s ease,border-color .3s ease,transform .3s ease; }
.button:hover { text-decoration:none; transform:translateY(-2px); }
.button:focus-visible { outline:3px solid rgba(202,79,0,.35); outline-offset:4px; }
.button--primary { color:var(--buttonText); background:var(--buttonPrimary); border-color:var(--buttonPrimary); }
.button--primary:hover,.button--primary:focus { color:var(--buttonText); background:var(--buttonPrimaryHover); border-color:var(--buttonPrimaryHover); }
.button--secondary { color:var(--buttonLight); background:transparent; border-color:var(--buttonLight); }
.button--secondary:hover,.button--secondary:focus { color:var(--buttonDark); background:var(--buttonLight); border-color:var(--buttonLight); }
.button--outline { color:var(--buttonPrimary); background:transparent; border-color:var(--buttonPrimary); }
.button--outline:hover,.button--outline:focus { color:var(--buttonText); background:var(--buttonPrimary); border-color:var(--buttonPrimary); }
.button::after { display:block; flex:0 0 16px; width:16px; height:16px; content:""; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .3s ease; }
.button:hover::after { transform:translateX(4px); }

/* ---------- Titel Dots + Lines ---------- */
.line {position:relative;margin-bottom:24px}
.line::before{content:"";position:absolute;left:0;bottom:-10px;width:30px;height:6px;background:radial-gradient(circle,var(--backgroundColorOrange) 2px,transparent 2px) 0 0/10px 6px repeat-x;z-index:2}
.line::after{content:"";position:absolute;left:34px;bottom:-8px;width:100px;height:2px;background:var(--backgroundColorOrange)}
.line_center{position:relative;margin-bottom:24px;padding-bottom:8px!important;}
.line_center::before{content:"";position:absolute;left:50%;transform:translateX(-123px);bottom:0;width:100px;height:2px;background:var(--backgroundColorOrange);}
.line_center::after{content:"";position:absolute;left:50%;transform:translateX(-18px);bottom:0;width:140px;height:2px;background:linear-gradient(to right,transparent 0 6px,var(--backgroundColorOrange) 6px 10px,transparent 10px 16px,var(--backgroundColorOrange) 16px 20px,transparent 20px 26px,var(--backgroundColorOrange) 26px 30px,transparent 30px 40px,var(--backgroundColorOrange) 40px 100px)}
@media(max-width:1200px){
	.line_center{position:relative;margin-bottom:24px;padding-bottom:8px!important;}
	.line_center::before{content:"";position:absolute;left:50%;transform:translateX(-93px);bottom:0;width:70px;height:2px;background:var(--backgroundColorOrange);}
	.line_center::after{content:"";position:absolute;left:50%;transform:translateX(-18px);bottom:0;width:110px;height:2px;background:linear-gradient(to right,transparent 0 6px,var(--backgroundColorOrange) 6px 10px,transparent 10px 16px,var(--backgroundColorOrange) 16px 20px,transparent 20px 26px,var(--backgroundColorOrange) 26px 30px,transparent 30px 40px,var(--backgroundColorOrange) 40px 100px);}}
@media(min-width:768px){
	.line_mobile{position:relative;margin-bottom:24px;padding-bottom:8px!important;}
	.line_mobile::before{content:"";position:absolute;left:50%;transform:translateX(-123px);bottom:0;width:100px;height:2px;background:var(--backgroundColorOrange);}
	.line_mobile::after{content:"";position:absolute;left:50%;transform:translateX(-18px);bottom:0;width:140px;height:2px;background:linear-gradient(to right,transparent 0 6px,var(--backgroundColorOrange) 6px 10px,transparent 10px 16px,var(--backgroundColorOrange) 16px 20px,transparent 20px 26px,var(--backgroundColorOrange) 26px 30px,transparent 30px 40px,var(--backgroundColorOrange) 40px 100px);}}

/* ---------- Accessibility ---------- */
.skip-link { position: absolute; z-index: 10000; top: 12px; left: 12px; padding: 12px 18px; color: #fff; background: var(--backgroundColorBlack); border: 2px solid var(--backgroundColorOrange); border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; transform: translateY(-200%); transition: transform .2s ease; }
.skip-link:focus { color: #fff; text-decoration: none; transform: translateY(0); outline: none; }
.site-content:focus { outline: none; }
/* Links in running text must not rely on colour alone (WCAG 1.4.1). */
:where(main) :is(p, td, dd, blockquote) a:not([class]),
:where(main) li:not(nav li) a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(main) :is(p, td, dd, blockquote) a:not([class]):hover,
:where(main) li:not(nav li) a:not([class]):hover { text-decoration-thickness: 2px; }

/* ---------- Strakker (27-09) ---------- */
:root {
	--section-pad: 96px;
	--section-pad-tight: 40px;
	--h2-size: clamp(30px, 2.2vw, 38px);
	--h2-size-lg: clamp(32px, 2.5vw, 42px);
	--header-gap: 48px;
	--radius-card: 14px;
	--radius-card-lg: 16px;
	--shadow-card: 0 10px 30px rgba(15, 15, 15, .06);
	--shadow-card-strong: 0 18px 44px rgba(15, 15, 15, .16);
}
/* Two light sections in a row: no double white space. */
:is(.home-intro, .image-text-block:not(.image-text-block--has-background), .features-light, .content-highlight, .phone-showcase, .logo-showcase, .portfolio-showcase, .tarieven-block, .faq-block, .cta-block, .text-content-block) + :is(.image-text-block:not(.image-text-block--has-background), .features-light, .content-highlight, .phone-showcase, .logo-showcase, .portfolio-showcase, .tarieven-block, .faq-block, .cta-block, .text-content-block) { padding-top: var(--section-pad-tight); }
@media (max-width: 767px) {
	:root { --section-pad: 64px; --section-pad-tight: 28px; --header-gap: 32px; }
}
/* Full-bleed panels (mobile menu, 100vw) must not cause a horizontal scrollbar next to a classic scrollbar. clip keeps position:sticky working. */
html, body { overflow-x: clip; }

/* ---------- Contrast AA (27-09): small orange text ---------- */
/* Brand orange #CA4F00 stays for buttons, shapes and large headings; small text gets a tint that passes 4.5:1. */
:root { --orange-text-light: #B34600; --orange-text-dark: #E8691F; }
body [class*="__eyebrow"],
body main p a:not([class]),
body main li a:not([class]),
body .faq-block__number { color: var(--orange-text-light); }
body :is(.home-hero, .page-hero, .services-block, .process-block, .features-dark, .reviews-block, .contact-home, .image-text-block--has-background, .cta-block__inner, .content-highlight__card, .tarieven-card) :is([class*="__eyebrow"], p a:not([class]), li a:not([class])),
body .wpsr-reviews-badge-title,
body .reviews-block__shortcode .wpsr_add_read_more .wpsr_read_more,
body .reviews-block__shortcode .wpsr_add_read_more .wpsr_read_less,
body .services-block__cta-title span { color: var(--orange-text-dark) !important; }
body .ff-btn-submit, body .ff-btn.ff-btn-submit { background-color: var(--buttonPrimary) !important; border-color: var(--buttonPrimary) !important; }
body .tarieven-card__subtitle { color: var(--orange-text-dark); }
body .tarieven-page__section:not(.tarieven-page__section--cards-dark) .tarieven-card__subtitle,
body .tarieven-page__section-number { color: var(--orange-text-light); }
body .tarieven-page__section:not(.tarieven-page__section--cards-dark) .tarieven-card__price-prefix { color: rgba(15, 15, 15, .72); }
body .tarieven-block__note, body .tarieven-page__note { color: rgba(34, 34, 34, .78); }

/* Inline SVG icons (Lucide / brand) that replaced dashicons (28-09): default to the old icon size. */
:where(svg.kami-lucide, svg.kami-brand-icon) { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }
:where(.support-category-card__icon) svg { width: 28px; height: 28px; }

/* ---------- Google rating badge (kami_google_rating_badge()): page hero and the reviews section ---------- */
.kami-rating { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; font-size: 14px; line-height: 1.2; text-decoration: none; transition: background-color .25s ease, border-color .25s ease; }
a.kami-rating:hover,
a.kami-rating:focus-visible { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); text-decoration: none; }
.kami-rating__g { flex: 0 0 22px; width: 22px; height: 22px; padding: 2px; background: #fff; border-radius: 50%; }
.kami-rating__score { font-size: 17px; font-weight: 700; }
.kami-rating__stars { color: #F5A524; font-size: 15px; letter-spacing: 1px; }
.kami-rating__count { color: rgba(255, 255, 255, .78); font-weight: 500; }
/* On a light background */
.kami-rating--light { color: #1F1F1F; background: #fff; border-color: rgba(0, 0, 0, .08); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .35); }
a.kami-rating--light:hover,
a.kami-rating--light:focus-visible { color: #1F1F1F; background: #fff; border-color: rgba(0, 0, 0, .18); }
.kami-rating--light .kami-rating__g { padding: 0; }
.kami-rating--light .kami-rating__count { color: #555; }
.reviews-block__rating { display: flex; justify-content: center; margin-top: 20px; }